/* ==========================================================================
   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; }

/* Several elements (.btn, .contact-mini, flex containers) set their own
   display, which otherwise beats the UA default for [hidden] outright. */
[hidden] { display: none !important; }

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, 4rem); }
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; }
/* Passes through on desktop so the flex context above applies straight to the
   <a> tags; only the mobile media query gives this its own layout. */
.nav__links-inner { display: contents; }
.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); border: none; box-shadow: none; }
.nav__cta:hover { transform: translateY(-1px); }

.nav__toggle {
  display: none; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  min-width: 44px; min-height: 44px;
  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); } }

/* ---------- Divider ---------- */
/* A quiet stitch-line instead of a scrolling ticker: the pill badges in the
   hero already say "Websites / Automation / Less admin," so this doesn't
   need to repeat them — it just marks the seam between sections. */

.stitch {
  position: relative; height: 1px;
  margin: 0 clamp(1.25rem, 5vw, 3rem);
  border-top: 2px dashed var(--taupe);
}
.stitch__mark {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%) rotate(-6deg);
  background: var(--cream); padding: 0 .9rem;
  font-size: 1.6rem; color: var(--orange); line-height: 1;
}

/* ---------- 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: .6875rem; }
.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; }
/* Light text on a dark fill needs a touch more weight and tracking to read
   as crisply as the same text on a light card — color alone isn't enough. */
.card--brown p, .card--navy p { font-weight: 500; letter-spacing: .01em; }

.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: .6875rem; padding: .2rem .6rem; border-radius: 12px; }
.tags__open { background: transparent !important; border: 1px dashed var(--taupe); color: var(--brown) !important; }

/* ---------- Work: folder grid + project modal ---------- */

.work-desk { background: var(--sand); border-radius: var(--radius); padding: clamp(1.2rem, 3vw, 1.8rem); margin-top: 1.5rem; }
.work-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; }

.folder {
  background: var(--card); border: var(--border); border-radius: 12px;
  padding: 1.1rem 1rem; cursor: pointer; box-shadow: 4px 4px 0 var(--ink);
  transition: transform .16s ease, box-shadow .16s ease;
  display: flex; flex-direction: column; gap: .5rem; min-height: 108px; justify-content: flex-end;
  text-align: left; width: 100%; font-family: var(--font-sans);
}
.folder:hover { transform: translate(-2px, -2px) rotate(-1deg); box-shadow: 5px 5px 0 var(--ink); }
/* Pressing a folder should read as picking it up off the desk, not just a
   flat click — the same compress-on-press the hard-shadow buttons already
   use elsewhere, so opening a project feels tactile before the modal even
   appears. */
.folder:active { transform: translate(1px, 1px) rotate(0); box-shadow: 2px 2px 0 var(--ink); }
.folder .tag { font-size: .6875rem; font-weight: 700; letter-spacing: .06em; color: var(--taupe); }
.folder h3 { font-size: 1.02rem; margin: 0; }
.folder .status { font-size: .6875rem; font-weight: 600; color: var(--orange); }

.status-pill {
  display: inline-block; font-size: .72rem; font-weight: 700;
  padding: .3rem .7rem; border-radius: 14px; border: 2px dashed var(--taupe);
  color: var(--taupe); margin-bottom: .8rem;
}

.modal__box--wide { max-width: 42rem; }

/* Build Anatomy: toggle between the live site and the system behind it. */
.anatomy { border: 1px solid rgba(27,34,63,.15); border-radius: 10px; overflow: hidden; margin-top: 1.1rem; }
.anatomy__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .75rem 1rem; background: var(--sand); flex-wrap: wrap;
}
.anatomy__title { font-family: var(--font-serif); font-size: .95rem; color: var(--navy); }
.toggle { display: inline-flex; background: var(--card); border: var(--border); border-radius: 20px; padding: 3px; gap: 2px; }
.toggle button {
  font-family: var(--font-sans); font-size: .74rem; font-weight: 600; border: none; background: transparent;
  color: var(--body-text); padding: .38rem .8rem; border-radius: 16px; cursor: pointer;
  min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
  transition: background .18s ease, color .18s ease;
}
.toggle button[aria-pressed="true"] { background: var(--navy); color: var(--cream); }

.anatomy__stage { background: var(--card); }
.anatomy__view { padding: 1rem clamp(.9rem, 3vw, 1.3rem) 1.2rem; }
.anatomy__caption { padding: .7rem 1rem 1rem; font-size: .72rem; color: var(--taupe); }

.system { background: var(--navy); border-radius: 8px; padding: 1.2rem clamp(.8rem, 3vw, 1.5rem) 1.4rem; color: var(--cream); }
.system svg { display: block; margin: 0 auto; width: 100%; max-width: 480px; height: auto; }
.system text { fill: var(--cream); font-family: var(--font-sans); }
.system .node-bg { fill: #232B4E; stroke: var(--cream); stroke-width: 1.5; cursor: pointer; transition: fill .15s ease; }
.system .node-bg:hover, .system .node-bg.is-active { fill: var(--orange); stroke: var(--orange); }
.system .edge { stroke: var(--cream); stroke-width: 1.4; opacity: .55; fill: none; }
.system .edge-label { fill: var(--sand); font-size: 10.5px; }
.sysnote {
  margin-top: 1rem; padding: .8rem .95rem; background: #232B4E; border-radius: 8px;
  font-size: .82rem; min-height: 2.6em; border-left: 3px solid var(--orange);
}
.sysnote b { color: var(--sand); }

/* Mini browser-chrome (three dots read as a browser window). */
.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;
}
.anatomy__view .wipe__bar,
.anatomy__view .wipe__url { padding: 0 .1rem; }
.anatomy__shot { border-radius: 8px; overflow: hidden; border: 1px solid rgba(27,34,63,.15); }
.anatomy__shot img { width: 100%; height: auto; display: block; }

/* ---------- 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; font-weight: 500; letter-spacing: .01em; opacity: .9; margin-bottom: 1.4rem; }
.cta__actions { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; align-items: flex-start; }
/* Lowers the friction of the first click itself: seeing the time
   commitment before opening the form, not after, so "Start a project"
   doesn't read as an open-ended ask for a visitor who's still deciding
   whether this is worth five minutes of their day. */
.cta__option { display: flex; flex-direction: column; align-items: center; gap: .3rem; }
.cta__option-hint { font-size: 1rem; color: var(--sand); }
.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;
}

/* A true shared-element morph (the folder/button visually becoming the
   modal) turned out not to work with native <dialog> elements in any
   browser — dialogs render in the browser's "top layer," which blocks the
   position/size interpolation the effect needs; only a content cross-fade
   is possible, confirmed by testing at an exaggerated 2s duration and
   seeing zero movement. This is the fallback that actually works
   everywhere: the box itself settles into place with a quick scale + fade
   as it appears, with no dependency on the trigger element at all. */
@keyframes modalEntrance {
  from { opacity: 0; transform: scale(.96) translateY(6px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
dialog.modal[open] .modal__box {
  animation: modalEntrance .28s cubic-bezier(0.16, 1, 0.3, 1);
}
.modal__x {
  position: absolute; top: .1rem; right: .3rem;
  background: none; border: none; font-size: 1.6rem;
  line-height: 1; color: var(--navy); cursor: pointer;
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
}
.modal__x:hover { color: var(--orange); }
.modal__title { margin-bottom: .3rem; }
.modal__lede { font-size: .88rem; margin-bottom: 1.2rem; }

.btn:disabled { opacity: .35; cursor: not-allowed; box-shadow: none !important; transform: none !important; }

/* ---------- Adaptive inquiry ---------- */

.inquiry-progress { display: flex; gap: .35rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.inquiry-progress button {
  font-family: var(--font-sans); font-size: .6875rem; font-weight: 700; letter-spacing: .04em;
  background: var(--card); border: 1.5px solid var(--taupe); color: var(--taupe);
  padding: .35rem .6rem; border-radius: 14px; cursor: not-allowed;
  position: relative; transition: background .15s ease, color .15s ease, border-color .15s ease;
}
/* Keeps the pill visually compact while still meeting the 44px tap-target
   floor — an invisible hit area rather than a bigger pill. */
.inquiry-progress button::after { content: ''; position: absolute; inset: -11px; }
.inquiry-progress button.is-done { cursor: pointer; background: var(--sand); border-color: var(--taupe); color: var(--body-text); }
.inquiry-progress button.is-current { cursor: default; background: var(--navy); border-color: var(--navy); color: var(--cream); }

/* Each step arrives with a small settle rather than snapping into place —
   the one authored motion moment in this flow, since it's the interaction
   visitors repeat six times in a row. JS toggles .is-entering right after
   unhiding the step; the reduced-motion block below neutralizes it same as
   every other animation on the page. */
@keyframes stepIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.inquiry-step.is-entering { animation: stepIn .32s cubic-bezier(0.16, 1, 0.3, 1); }

.inquiry-q { font-size: 1.25rem; margin-bottom: .2rem; }
.inquiry-sub { font-size: .82rem; color: var(--taupe); margin-bottom: 1.1rem; }

.option-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: .55rem; }
.option-card {
  text-align: left; font-family: var(--font-sans); font-size: .84rem; font-weight: 600; color: var(--body-text);
  background: var(--card); border: 2px solid var(--taupe); border-radius: 10px; padding: .75rem .85rem;
  cursor: pointer; transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.option-card:hover { border-color: var(--navy); }
.option-card.is-selected { background: var(--navy); color: var(--cream); border-color: var(--navy); }

.inquiry-textarea {
  width: 100%; min-height: 6rem; 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); resize: vertical;
}
.inquiry-textarea:focus { outline: none; border-color: var(--orange); }
.inquiry-counter { font-size: .74rem; color: var(--taupe); text-align: right; margin: .3rem 0 0; }
.inquiry-counter.is-near-limit { color: var(--orange); }

.inquiry-actions { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 1.4rem; flex-wrap: wrap; }

.summary-card { padding: 1.2rem 1.3rem; }
.summary-card .eyebrow-mini { font-size: .6875rem; letter-spacing: .1em; font-weight: 700; color: var(--sand); margin-bottom: .7rem; display: block; }
.summary-card p { font-size: .92rem; margin: 0 0 .8rem; }
.summary-card p:last-of-type { margin-bottom: 0; }
.summary-close { color: var(--orange); margin-top: 1rem; font-size: 1.15rem; }

.contact-mini { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1.1rem; }
.contact-mini input {
  flex: 1 1 160px; font-family: var(--font-sans); font-size: .86rem;
  padding: .6rem .75rem; border: 2px solid var(--taupe); border-radius: 9px; background: var(--card); color: var(--body-text);
}
.contact-mini input:focus { outline: none; border-color: var(--orange); }
.contact-mini__error { font-size: .8rem; margin-top: .5rem; }

.modal-confirm {
  position: absolute; inset: 0; z-index: 10; border-radius: var(--radius);
  background: rgba(243,215,186,.97);
  display: flex; align-items: center; justify-content: center; padding: 1.5rem;
}
.modal-confirm__box { text-align: center; max-width: 22rem; }
.modal-confirm__box p { font-size: 1rem; margin-bottom: 1.1rem; color: var(--body-text); }
.modal-confirm__actions { display: flex; justify-content: center; gap: .8rem; flex-wrap: wrap; }

.thanks-inline { text-align: center; padding: 1.2rem .5rem; }

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

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

/* Mobile */
@media (max-width: 720px) {
  .nav { position: relative; }
  .nav__toggle { display: flex; order: 3; }
  .nav__links {
    order: 4; width: 100%;
    display: grid; grid-template-rows: 0fr;
    /* grid-template-rows animates on the compositor instead of triggering
       layout on every frame the way max-height/padding did. */
    transition: grid-template-rows .28s ease, visibility .28s;
    /* 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;
  }
  .nav__links.is-open { grid-template-rows: 1fr; visibility: visible; }
  .nav__links-inner {
    display: flex; flex-direction: column; align-items: stretch; gap: .2rem;
    overflow: hidden; min-height: 0;
  }
  .nav__links.is-open .nav__links-inner { padding-top: .8rem; }
  .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%; }

  .wipe__url { font-size: .88rem; }
  .work-grid { grid-template-columns: 1fr; }

  .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; }

  /* The system diagram sits inside three nested padded boxes (dialog,
     modal__box, anatomy__view); on a phone that stack eats most of the
     width the SVG has to scale into, shrinking its text and node hit
     areas. Trimming just these two inner paddings claws back real room
     without touching modal__box's padding, which the rest of the modal's
     text still needs. */
  .anatomy__view { padding-left: .5rem; padding-right: .5rem; }
  .system { padding-left: .5rem; padding-right: .5rem; }

  /* 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%; }
}

/* The hero h1's clamp() hits its 4rem ceiling once the viewport crosses
   ~914px (7vw = 4rem). Below that, the underlined second line always fit
   its column; above it, the column needs to widen at the same point or the
   now-fixed-size headline outgrows the still-narrow .hero__copy and wraps
   mid-phrase, orphaning "not" under a full-width swoosh underline. */
@media (min-width: 900px) {
  .hero__copy { max-width: 38rem; }
}

/* Wide desktop */
@media (min-width: 1200px) {
  .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;
  }
  .stamp__spin { animation: none; }
}

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