/* ==========================================================================
   The Chairhand — portfolio site
   Palette locked 2026-09-03
   ========================================================================== */

:root {
  /* Core five */
  --brown:  #6B381F;
  --cream:  #F3D7BA;
  --orange: #CD4721;
  --taupe:  #A4876E;
  --navy:   #1B223F;

  /* Derived tints for section rhythm */
  --sand:   #E8C7A0;
  --card:   #FDF7EE;

  /* Roles */
  --ink:        var(--navy);
  --body-text:  var(--brown);
  --heading:    var(--navy);

  --font-sans:  'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-serif: 'Playfair Display', Georgia, serif;
  --font-hand:  'Caveat', cursive;

  --wrap: 1120px;
  --radius: 14px;
  --border: 2px solid var(--ink);
  --hard: 5px 5px 0 var(--ink);
  --hard-lg: 7px 8px 0 var(--ink);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 400;
  color: var(--body-text);
  background: var(--cream);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }

h1, h2, h3 {
  font-family: var(--font-serif);
  color: var(--heading);
  font-weight: 600;
  line-height: 1.08;
  margin: 0 0 .4em;
}

h1 { font-size: clamp(2.1rem, 7vw, 4.2rem); }
h2 { font-size: clamp(1.6rem, 4vw, 2.6rem); }
h3 { font-size: clamp(1.1rem, 2vw, 1.4rem); }

p { margin: 0 0 .9em; }

a { color: inherit; }

.serif { font-family: var(--font-serif); }
.hand  { font-family: var(--font-hand); font-weight: 600; line-height: 1.2; }
.center { text-align: center; }

.skip-link {
  position: absolute; left: -9999px;
  background: var(--navy); color: var(--cream);
  padding: .8rem 1.2rem; z-index: 200; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; top: 0; }

:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 3px;
}

/* ---------- Layout ---------- */

.wrap { max-width: var(--wrap); margin: 0 auto; }

.section { padding: clamp(2.6rem, 7vw, 5.5rem) clamp(1.25rem, 5vw, 3rem); position: relative; }
.section--cream { background: var(--cream); }
.section--sand  { background: var(--sand); }
.bordered { border-top: var(--border); }

.section__head { margin-bottom: 2rem; }
.section__lede { max-width: 44ch; font-size: .95rem; margin-bottom: 1.6rem; }

.eyebrow { font-size: clamp(1.15rem, 2.4vw, 1.4rem); margin-bottom: .1em; transform: rotate(-2deg); }
.eyebrow--orange { color: var(--orange); }

.note { font-size: clamp(1rem, 2vw, 1.15rem); margin-top: .6em; }
.note--orange { color: var(--orange); }
.note--right { text-align: right; }

.robot-link {
  display: inline-block; text-decoration: none;
  border-bottom: 2px solid transparent; transition: border-color .15s ease;
}
.robot-link:hover { border-bottom-color: var(--orange); }

/* ---------- Buttons ---------- */

.btn {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: .9rem;
  font-weight: 500;
  padding: .75rem 1.6rem;
  border-radius: 30px;
  border: var(--border);
  background: transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform .16s ease, box-shadow .16s ease;
  line-height: 1.3;
}
.btn--lg { padding: .85rem 1.9rem; font-size: .95rem; }
.btn--hard { box-shadow: var(--hard); }
.btn--hard:hover { transform: translate(-2px, -2px); box-shadow: var(--hard-lg); }
.btn--hard:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ink); }

.btn--brown  { background: var(--brown);  color: var(--cream); }
.btn--orange { background: var(--orange); color: var(--cream); }
.btn--pill   { padding: .45rem 1.1rem; font-size: .78rem; box-shadow: 3px 3px 0 var(--ink); }
.btn--ghost  { background: transparent; color: var(--cream); border-color: var(--cream); }
.btn--ghost:hover { background: rgba(243,215,186,.12); }
.btn--quiet  { border-color: transparent; color: var(--body-text); font-size: .85rem; }
.btn--quiet:hover { text-decoration: underline; }

.link-underline {
  font-size: .9rem; font-weight: 500; color: var(--ink);
  text-decoration: none; border-bottom: 2px solid var(--ink); padding-bottom: 2px;
}
.link-underline:hover { border-color: var(--orange); color: var(--orange); }

.hard { border: var(--border); box-shadow: var(--hard); }

.tilt-l, .tilt-r { transition: transform .22s ease, box-shadow .22s ease; }
.tilt-l { transform: rotate(-1deg); }
.tilt-r { transform: rotate(1deg); }
.tilt-l:hover, .tilt-r:hover { transform: rotate(0) translateY(-4px); box-shadow: var(--hard-lg); }

/* ---------- Nav ---------- */

.nav {
  position: sticky; top: 0; z-index: 90;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  padding: .75rem clamp(1.25rem, 5vw, 3rem);
  background: var(--cream);
  border-bottom: var(--border);
}
.nav__brand { display: flex; align-items: center; gap: .55rem; text-decoration: none; }
.nav__mark {
  width: 34px; height: 34px; border-radius: 9px;
  background: var(--brown); color: var(--cream);
  font-family: var(--font-serif); font-size: 1.05rem;
  display: flex; align-items: center; justify-content: center; padding-bottom: 3px;
}
.nav__name { font-family: var(--font-serif); font-size: 1rem; color: var(--navy); }

.nav__links { display: flex; align-items: center; gap: 1.1rem; font-size: .85rem; }
.nav__links a { text-decoration: none; padding-bottom: 2px; border-bottom: 2px solid transparent; }
.nav__links a:not(.btn):hover { border-bottom-color: var(--orange); color: var(--orange); }
.nav__cta { color: var(--cream); }

.nav__toggle {
  display: none; flex-direction: column; gap: 5px;
  background: none; border: none; cursor: pointer; padding: .5rem;
}
.nav__toggle span { display: block; width: 24px; height: 2px; background: var(--navy); transition: transform .2s ease, opacity .2s ease; }
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Decorative ---------- */

.blob { position: absolute; pointer-events: none; z-index: 0; }
.blob--a { width: 300px; top: -70px; right: -80px; fill: var(--taupe); opacity: .5; }
.blob--b { width: 190px; bottom: -55px; left: -55px; fill: var(--orange); opacity: .3; }
.blob--cta { width: 190px; top: -55px; left: -55px; fill: var(--orange); opacity: .3; }

.sparkle { position: absolute; pointer-events: none; z-index: 1; }
.sparkle--nav { width: 30px; top: 26px; left: clamp(1.25rem, 5vw, 3rem); fill: none; stroke: var(--navy); stroke-width: 2; stroke-linecap: round; }
.sparkle--star { width: 26px; top: 30%; right: 6%; fill: var(--orange); }
.sparkle--cta { width: 24px; top: 26px; right: 8%; fill: var(--taupe); }

/* ---------- Hero ---------- */

.hero {
  position: relative; overflow: hidden;
  padding: clamp(2.2rem, 6vw, 4.5rem) clamp(1.25rem, 5vw, 3rem) clamp(3rem, 7vw, 5rem);
  background: var(--cream);
}
.hero__inner {
  position: relative; z-index: 2;
  max-width: var(--wrap); margin: 0 auto;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem;
}
.hero__copy { max-width: 34rem; }
.hero__greet { font-size: clamp(1.25rem, 3vw, 1.6rem); color: var(--orange); transform: rotate(-3deg); margin-bottom: .35rem; min-height: 1.4em; }
.hero__title { margin-bottom: .3em; }
.hero__title em { color: var(--brown); font-style: italic; }

.underlined { position: relative; display: inline-block; }
.swoosh { position: absolute; left: 0; bottom: -.12em; width: 100%; height: .28em; }
.swoosh path { stroke: var(--orange); stroke-width: 5; fill: none; stroke-linecap: round; }

.hero__sub { font-size: clamp(.95rem, 1.6vw, 1.05rem); max-width: 40ch; margin: 1.4rem 0 1.2rem; }

.chips { display: flex; flex-wrap: wrap; gap: .45rem; list-style: none; padding: 0; margin: 0 0 1.5rem; }
.chip { padding: .35rem .9rem; border-radius: 20px; font-size: .75rem; font-weight: 500; }
.chip--navy   { background: var(--navy);   color: var(--cream); }
.chip--orange { background: var(--orange); color: var(--cream); }
.chip--taupe  { background: var(--taupe);  color: var(--navy); }

.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem; }

.hero__stamp { width: 124px; flex-shrink: 0; margin-bottom: .5rem; }
.stamp__disc { fill: var(--navy); }
.stamp__ring { fill: none; stroke: var(--cream); stroke-width: 1.5; stroke-dasharray: 4 4; }
.stamp__spin { transform-origin: 50% 50%; animation: spin 16s linear infinite; }
.stamp__text { fill: var(--cream); font-family: var(--font-sans); font-size: 10.5px; letter-spacing: 2.4px; }
.stamp__word { fill: var(--cream); font-family: var(--font-hand); font-size: 19px; text-anchor: middle; }
.stamp__word--accent { fill: var(--orange); }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Marquee ---------- */

.marquee {
  background: var(--navy); color: var(--cream);
  padding: .7rem 0; overflow: hidden; white-space: nowrap;
  border-top: var(--border); border-bottom: var(--border);
}
.marquee__track { display: inline-block; animation: slide 26s linear infinite; }
.marquee__track span { font-family: var(--font-serif); font-size: clamp(.9rem, 2vw, 1rem); letter-spacing: .5px; }
@keyframes slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- About ---------- */

.about { display: flex; gap: clamp(1.5rem, 4vw, 3rem); align-items: flex-start; flex-wrap: wrap; }
.about__copy { flex: 1 1 22rem; min-width: 0; }
.about__copy p { font-size: .95rem; max-width: 48ch; }

.stats { display: flex; flex-wrap: wrap; gap: .6rem; list-style: none; padding: 0; margin: 1.3rem 0 0; }
.stat {
  padding: .6rem .9rem; border-radius: 3px;
  box-shadow: 2px 3px 0 rgba(27,34,63,.3);
  transition: transform .2s ease;
}
.stat:nth-child(1) { transform: rotate(-3deg); }
.stat:nth-child(2) { transform: rotate(2deg); }
.stat:nth-child(3) { transform: rotate(-1.5deg); }
.stat:hover { transform: rotate(0) translateY(-3px); }
.stat strong { display: block; font-size: 1.15rem; font-weight: 600; line-height: 1.1; }
.stat small { font-size: .7rem; }
.stat span { font-size: .68rem; }
.stat--taupe  { background: var(--taupe);  color: var(--navy); }
.stat--navy   { background: var(--navy);   color: var(--cream); }
.stat--orange { background: var(--orange); color: var(--cream); }

.polaroid {
  flex: 0 0 auto; width: clamp(180px, 26vw, 260px);
  background: var(--card); padding: 11px 11px 30px;
  margin: 0; transform: rotate(3deg);
  border: 1px solid #E0C6A6;
  box-shadow: 4px 5px 0 rgba(27,34,63,.25);
  transition: transform .22s ease, box-shadow .22s ease;
}
.polaroid:hover { transform: rotate(0) translateY(-4px); box-shadow: 6px 7px 0 rgba(27,34,63,.28); }
/* Frame owns the box so a missing or slow image can never blow out the layout. */
.polaroid__frame {
  display: block; width: 100%; aspect-ratio: 4 / 5;
  overflow: hidden; background: var(--sand);
  font-size: .62rem; color: #8E7358; line-height: 1.4;
}
.polaroid img { width: 100%; height: 100%; object-fit: cover; }
.polaroid figcaption { text-align: center; font-size: 1.1rem; margin-top: .5rem; color: var(--navy); }

/* ---------- Cards / services ---------- */

.cards-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: 1.2rem; }

.card { border-radius: var(--radius); padding: 1.4rem 1.3rem; position: relative; }
.card--light { background: var(--card); }
.card--brown { background: var(--brown); color: var(--cream); }
.card--brown h3 { color: var(--cream); }
.card--navy  { background: var(--navy);  color: var(--cream); }
.card--navy h3 { color: var(--cream); }
.card p { font-size: .88rem; margin-bottom: .6em; }

.badge {
  position: absolute; top: -14px; left: 16px;
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .78rem; font-weight: 600; border: var(--border);
}
.badge--navy   { background: var(--navy);   color: var(--cream); }
.badge--orange { background: var(--orange); color: var(--cream); }
.badge--taupe  { background: var(--taupe);  color: var(--navy); }
.badge--brown  { background: var(--brown);  color: var(--cream); }
/* Badges overhang the top edge of their card, so the upper half sits on the
   page background. A cream badge on a cream page loses that half entirely,
   which is why step 04 needs the navy outline the others already get. */
.badge--navy-on-cream { background: var(--cream); color: var(--navy); border-color: var(--ink); }
.card h3, .step h3 { margin-top: .6rem; }

.tags { display: flex; flex-wrap: wrap; gap: .3rem; list-style: none; padding: 0; margin: .8rem 0 0; }
.tags li { background: var(--taupe); color: var(--navy); font-size: .68rem; padding: .2rem .6rem; border-radius: 12px; }
.tags__open { background: transparent !important; border: 1px dashed var(--taupe); color: var(--brown) !important; }

/* ---------- Vibe picker ---------- */

.vibe { display: flex; gap: clamp(1.5rem, 4vw, 3rem); align-items: flex-start; flex-wrap: wrap; }
.vibe__list { flex: 1 1 20rem; min-width: 0; }
/* A tablist may own only tabs, so the aside below it sits outside this box. */
.vibe__tabs { display: flex; flex-direction: column; gap: .6rem; }

.vibe__opt {
  display: block; width: 100%; text-align: left;
  padding: .8rem .9rem; border-radius: 11px; cursor: pointer;
  font-family: var(--font-sans); font-size: 1rem;
  transition: transform .18s ease, box-shadow .18s ease;
}
.vibe__opt[aria-selected="true"] { transform: translateX(6px); box-shadow: 2px 2px 0 var(--ink); }
.vibe__row { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.vibe__name { font-size: 1rem; font-weight: 500; }
.vibe__meta { display: block; font-size: .72rem; margin-top: 2px; }
.pill-concept {
  background: var(--navy); color: var(--cream);
  font-size: .52rem; letter-spacing: .6px;
  padding: 2px 7px; border-radius: 10px; flex-shrink: 0;
}

.vibe__phone { flex: 0 0 auto; margin: 0 auto; width: 210px; }
.phone { background: var(--navy); border-radius: 28px; padding: 10px 8px 14px; box-shadow: 6px 7px 0 rgba(27,34,63,.35); }
.phone__notch { display: block; width: 44px; height: 4px; background: #3A4260; border-radius: 4px; margin: 0 auto 8px; }
.phone__screen {
  border-radius: 18px; height: 360px;
  overflow-y: auto; overflow-x: hidden;
  background: #F3EBDD;
  transition: background .35s ease;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.phone__screen::-webkit-scrollbar { width: 0; }

/* ---------- Before / after wipe ---------- */

.wipe {
  --split: 48%;
  position: relative; height: clamp(280px, 30vw, 330px);
  border-radius: var(--radius); overflow: hidden;
  border: var(--border); box-shadow: var(--hard);
  user-select: none; -webkit-user-select: none; margin-top: 1rem;
  /* Reserve sideways gestures for the wipe. Left at auto the browser can
     claim a horizontal drag as a pan and the split never moves, which is
     how this read as dead on a phone. pan-y keeps vertical swipes with
     the page, so scrolling through the section still works. */
  touch-action: pan-y;
}

/* Both layers are full-bleed and centre an identically sized card, so the
   split cuts through the same object rather than sliding two differently
   anchored panes past each other. Clipping with clip-path instead of width
   means nothing reflows as the handle moves, which is what left dead space
   in the earlier version. */
.wipe__layer {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}
.wipe__layer--after  { background: var(--navy); }
.wipe__layer--before {
  background: var(--sand);
  clip-path: inset(0 calc(100% - var(--split)) 0 0);
}

/* The divider has to live on the container: a border on a clip-path'd element
   is clipped away with everything else. */
.wipe::after {
  content: ''; position: absolute; top: 0; bottom: 0;
  left: var(--split); width: 3px; margin-left: -1.5px;
  background: var(--cream); z-index: 4; pointer-events: none;
}

.wipe__label {
  position: absolute; top: 16px; margin: 0;
  font-size: .6rem; letter-spacing: 1.4px; font-weight: 500;
}
.wipe__label--before { left: 20px; color: #8C3A18; }
.wipe__label--after  { right: 20px; color: var(--orange); }

.wipe__card {
  width: clamp(250px, 50%, 330px);
  background: var(--card);
  border: 2px solid var(--ink); border-radius: 12px;
  padding: .9rem 1.1rem 1.1rem;
  box-shadow: 4px 4px 0 rgba(27,34,63,.4);
}
/* Three dots read the card as a browser window, so the wipe looks like the
   same site changing rather than two unrelated boxes. */
.wipe__bar {
  display: block; height: 9px; margin: 0 0 .7rem;
  background:
    radial-gradient(circle 3.5px at 4px 4px,  #D8C6AE 98%, transparent 100%),
    radial-gradient(circle 3.5px at 17px 4px, #D8C6AE 98%, transparent 100%),
    radial-gradient(circle 3.5px at 30px 4px, #D8C6AE 98%, transparent 100%);
  background-repeat: no-repeat;
}
.wipe__url {
  font-size: 1.05rem; margin: 0 0 .55rem; color: var(--navy);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Rows span the full card width with the status marker pushed right, so the
   split always has content to cross. Labels are identical in both layers;
   only the treatment changes. */
.wipe__rows { list-style: none; padding: 0; margin: 0; font-size: .78rem; }
.wipe__rows li {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: .6rem; padding: .3rem 0;
  border-bottom: 1px solid rgba(27,34,63,.09);
}
.wipe__rows li:last-child { border-bottom: 0; }
.wipe__rows li::after { font-weight: 600; flex-shrink: 0; }
.wipe__rows .is-live { color: var(--brown); }
.wipe__rows .is-live::after { content: '\2713'; color: #2F6B45; }
.wipe__rows .is-dead { color: #A08D78; text-decoration: line-through; }
.wipe__rows .is-dead::after { content: '\00D7'; color: #B4553A; text-decoration: none; }

/* Both buttons occupy an identical box with centred text, so the split
   transforms one control rather than sliding two different ones past
   each other. Same reason the row labels are word-for-word identical. */
.wipe__btn {
  display: block; width: 100%; margin-top: .85rem;
  text-align: center;
  background: var(--orange); color: var(--cream);
  font-size: .72rem; font-weight: 600;
  padding: .42rem .6rem; border-radius: 20px;
  border: 2px solid var(--ink);
}
.wipe__btn--dead {
  background: transparent; color: #A08D78;
  border: 2px dashed #CBB49A; font-weight: 400;
}
.wipe__range {
  position: absolute; inset: 0; width: 100%; height: 100%;
  margin: 0; opacity: 0; cursor: ew-resize; z-index: 5;
  touch-action: pan-y;
  -webkit-appearance: none; appearance: none; background: transparent;
}
.wipe__range::-webkit-slider-thumb { -webkit-appearance: none; width: 44px; height: 100%; cursor: ew-resize; }
.wipe__range::-moz-range-thumb { width: 44px; height: 260px; border: 0; background: transparent; cursor: ew-resize; }
.wipe__handle {
  position: absolute; top: 50%;
  /* The handle is centred on the split, so at the extremes half of it would
     hang outside the frame and get cut into a half circle by overflow:hidden.
     Hold it an 18px radius clear of both edges. Inside the 6-94% range the
     clamp is inert; only on a very narrow frame does it bite, and then by
     a pixel or two. */
  left: clamp(18px, var(--split), calc(100% - 18px));
  width: 36px; height: 36px; margin: -18px 0 0 -18px;
  background: var(--cream); border: var(--border); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .85rem; color: var(--navy);
  box-shadow: 2px 2px 0 var(--ink); pointer-events: none; z-index: 6;
}
/* The range is opacity:0, which hides its own focus ring too, so the visible
   handle wears the ring on its behalf. Without this a keyboard user lands on a
   fully interactive control with no indication it is focused. */
.wipe__range:focus-visible ~ .wipe__handle {
  outline: 3px solid var(--orange);
  outline-offset: 3px;
  background: var(--orange);
  color: var(--cream);
}

/* ---------- Process ---------- */

.steps {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
}
.step { border-radius: 13px; padding: 1.1rem 1rem; position: relative; }
.step h3 { font-size: 1.05rem; margin-bottom: .3rem; }
.step p { font-size: .8rem; line-height: 1.55; margin: 0; }

/* ---------- CTA + footer ---------- */

.cta { background: var(--brown); color: var(--cream); overflow: hidden; }
.cta h2, .cta__title { color: var(--cream); }
.cta__sub { font-size: .95rem; opacity: .9; margin-bottom: 1.4rem; }
.cta__actions { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; }
.cta__handle { font-size: 1.15rem; color: var(--taupe); margin-top: 1.2rem; }
.cta .wrap { position: relative; z-index: 2; }

.footer {
  background: var(--navy); color: var(--taupe);
  padding: 1.1rem clamp(1.25rem, 5vw, 3rem);
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: .7rem; font-size: .85rem;
}
.footer__mark { font-size: .95rem; }
.footer__ig { color: var(--cream); text-decoration: none; border-bottom: 1px solid var(--taupe); }
.footer__ig:hover { color: var(--orange); }

/* ---------- Back to top ---------- */

.to-top {
  position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 80;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--orange); color: var(--cream);
  border: var(--border); box-shadow: 3px 3px 0 var(--ink);
  font-size: 1.1rem; cursor: pointer;
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s;
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { transform: translateY(-3px); box-shadow: 5px 5px 0 var(--ink); }

/* ---------- Modal ---------- */

.modal {
  border: none; padding: 0; background: transparent;
  max-width: none; max-height: none; width: 100%; height: 100%;
}
dialog.modal { position: fixed; inset: 0; }
dialog.modal::backdrop { background: rgba(27,34,63,.6); }

dialog.modal[open] { display: flex; align-items: center; justify-content: center; padding: 1.25rem; }

.modal__box {
  background: var(--cream); color: var(--body-text);
  border: var(--border); border-radius: var(--radius);
  box-shadow: var(--hard);
  padding: clamp(1.4rem, 4vw, 2rem);
  width: 100%; max-width: 30rem;
  max-height: 88vh; overflow-y: auto;
  position: relative;
}
.modal__x {
  position: absolute; top: .6rem; right: .8rem;
  background: none; border: none; font-size: 1.6rem;
  line-height: 1; color: var(--navy); cursor: pointer; padding: .2rem .4rem;
}
.modal__x:hover { color: var(--orange); }
.modal__title { margin-bottom: .3rem; }
.modal__lede { font-size: .88rem; margin-bottom: 1.2rem; }
.modal__actions { display: flex; gap: .7rem; align-items: center; flex-wrap: wrap; margin-top: 1.2rem; }

.field { display: block; margin-bottom: .85rem; }
.field > span { display: block; font-size: .78rem; font-weight: 500; color: var(--navy); margin-bottom: .3rem; }
.field > span b { color: var(--orange); }
.field > span small { font-weight: 400; color: var(--taupe); }
.field input, .field select, .field textarea {
  width: 100%; font-family: var(--font-sans); font-size: .9rem;
  padding: .6rem .75rem; border: 2px solid var(--taupe);
  border-radius: 9px; background: var(--card); color: var(--body-text);
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--orange); outline: none;
}
.field textarea { resize: vertical; min-height: 4.5rem; }
/* Stays in the DOM so the live region is registered before it ever has text.
   A role="alert" that is toggled with [hidden] announces unreliably. */
.field__error { color: var(--orange); font-size: .8rem; font-weight: 500; margin: .4rem 0 0; }
.field__error:empty { display: none; }
.hidden-field { position: absolute; left: -9999px; }

/* ==========================================================================
   Responsive
   ========================================================================== */

/* Tablet and down */
@media (max-width: 900px) {
  .hero__inner { align-items: flex-start; }
  .hero__stamp { width: 100px; }
  .wipe__pane--fixed { width: 260px; }
}

/* Mobile */
@media (max-width: 720px) {
  .nav { position: relative; }
  .nav__toggle { display: flex; order: 3; }
  .nav__links {
    order: 4; width: 100%;
    flex-direction: column; align-items: stretch; gap: .2rem;
    max-height: 0; overflow: hidden;
    /* Clipped is not hidden: without this the collapsed links stay in the tab
       order. visibility steps rather than interpolates, so the slide is unchanged. */
    visibility: hidden;
    transition: max-height .28s ease, padding .28s ease, visibility .28s;
  }
  .nav__links.is-open { max-height: 20rem; padding-top: .8rem; visibility: visible; }
  .nav__links a { padding: .7rem .2rem; border-bottom: 1px solid rgba(27,34,63,.12); }
  .nav__cta { text-align: center; margin-top: .5rem; border-bottom: var(--border) !important; }

  .hero { padding-top: 2rem; }
  .hero__inner { flex-direction: column; gap: 1.5rem; }
  .hero__copy { max-width: 100%; }
  .hero__stamp { width: 92px; align-self: flex-end; margin-top: -1rem; }
  .sparkle--star { top: auto; bottom: 12%; right: 4%; width: 20px; }
  /* No room beside the greeting at this width, and it lands on the text. */
  .sparkle--nav { display: none; }

  .about { flex-direction: column-reverse; align-items: center; }
  .polaroid { width: min(230px, 70vw); }
  .about__copy { width: 100%; }

  .vibe { flex-direction: column; }
  .vibe__list { width: 100%; }
  .vibe__phone { width: min(230px, 72vw); }
  .phone__screen { height: 330px; }

  .wipe { height: 262px; }
  .wipe__card { width: min(82%, 250px); padding: .75rem .85rem .9rem; }
  .wipe__url { font-size: .88rem; }
  .wipe__rows { font-size: .66rem; line-height: 1.85; }
  .wipe__label { font-size: .55rem; letter-spacing: 1px; top: 12px; }
  .wipe__label--before { left: 14px; }
  .wipe__label--after { right: 14px; }
  .wipe__btn { font-size: .64rem; padding: .35rem .8rem; }

  .note--right { text-align: left; }

  /* Straighten the tilts — they read as broken at narrow widths */
  .tilt-l, .tilt-r { transform: none; }
  .stat:nth-child(n) { transform: none; }
  .polaroid { transform: rotate(2deg); }

  .to-top { right: .8rem; bottom: .8rem; width: 42px; height: 42px; }

  /* Keep the footer clear of the floating back-to-top button. */
  .footer { flex-direction: column; align-items: flex-start; padding-bottom: 4.2rem; }
}

@media (max-width: 400px) {
  .stats { gap: .4rem; }
  .stat { padding: .5rem .7rem; }
  .btn { padding: .7rem 1.2rem; font-size: .85rem; }
  .cta__actions { flex-direction: column; }
  .cta__actions .btn { width: 100%; }
}

/* Wide desktop */
@media (min-width: 1200px) {
  .hero__copy { max-width: 38rem; }
  .hero__stamp { width: 140px; }
  .about__copy p { font-size: 1rem; }
}

/* Motion preferences */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .marquee__track, .stamp__spin { animation: none; }
}

/* Print */
@media print {
  .nav, .to-top, .marquee, .modal { display: none !important; }
  body { background: #fff; color: #000; }
}