/* ==========================================================================
   services.natashasworld.com — Direction 1a (Studio)
   Tokens follow the design handoff. Clay #874022 was chosen to pass WCAG AA
   against both paper and tint — do not lighten it in the light theme.
   ========================================================================== */

/* --- Webfonts ------------------------------------------------------------ */
/* These declare the families that --display and --mono reference. Without them
   the names resolve only on machines that happen to have the fonts installed
   locally, and every other visitor silently falls back to cursive/monospace. */

@font-face {
  font-family: 'Caveat';
  src: url('../fonts/Caveat-VariableFont_wght.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'JetBrains Mono';
  src: url('../fonts/JetBrainsMono-VariableFont_wght.ttf') format('truetype');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* --- Tokens -------------------------------------------------------------- */

:root {
  --paper:            #faf7f2;
  --paper-tint:       #f2ece3;
  --ink:              #191614;
  --ink-deep:         #141110;
  --ink-90:           #241f1b;
  --ink-80:           #3d3630;
  --body:             #4a423c;
  --body-muted:       #5d544d;
  --muted:            #6b6058;
  /* Handoff specified #8a7c72, which fails AA on paper (3.77) and tint (3.43).
     Darkened to the nearest value that clears 4.5 on both. */
  --muted-light:      #75675c;

  --clay:             #874022;  /* accent text, links, rules */
  --clay-fill:        #874022;  /* solid button background */
  --clay-fill-text:   #ffffff;
  --clay-tint:        #c9a58f;  /* eyebrow on dark surfaces */
  --cream:            #c3b8b0;  /* body copy on dark surfaces */

  --header-scrim:     #faf7f2eb;

  --hairline:         rgba(25, 22, 20, .10);
  --hairline-grid:    rgba(25, 22, 20, .12);
  --hairline-card:    rgba(25, 22, 20, .14);
  --hairline-strong:  rgba(25, 22, 20, .25);
  --rule-inactive:    rgba(25, 22, 20, .15);
  --tint-hover:       rgba(25, 22, 20, .07);

  /* Dark surfaces that appear inside the light theme (featured card, CTA band) */
  --band-dark:        #191614;
  --band-dark-text:   #faf7f2;
  --band-dark-rule:   rgba(250, 247, 242, .20);
  --band-dark-border: rgba(250, 247, 242, .40);

  --footer-bg:        #141110;
  --footer-text:      #8a7c72;  /* 4.66 on --footer-bg */
  --error:            #a32a1c;

  --sans: Arial, Helvetica, sans-serif;
  --display: 'Caveat', cursive;
  --mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;

  --pad-x: 56px;
  --header-h: 68px;
}

:root[data-theme="dark"] {
  --paper:            #17130f;
  --paper-tint:       #211c17;
  --ink:              #f7f2ec;
  --ink-deep:         #0f0c0a;
  --ink-90:           #ece4dc;
  --ink-80:           #ded4ca;
  --body:             #d6ccc3;
  --body-muted:       #c2b6ab;
  --muted:            #ab9d92;
  --muted-light:      #9b8d82;

  --clay:             #d98b60;
  --clay-fill:        #874022;
  --clay-fill-text:   #ffffff;
  --clay-tint:        #e0a183;
  --cream:            #c3b8b0;

  --header-scrim:     #17130feb;

  --hairline:         rgba(250, 247, 242, .12);
  --hairline-grid:    rgba(250, 247, 242, .14);
  --hairline-card:    rgba(250, 247, 242, .16);
  --hairline-strong:  rgba(250, 247, 242, .30);
  --rule-inactive:    rgba(250, 247, 242, .18);
  --tint-hover:       rgba(250, 247, 242, .08);

  /* The featured card and CTA band can't stay near-black on a dark page —
     they lift instead, keeping the same figure/ground relationship. No dark
     fill separates from the tint band at 3:1 without going grey and losing the
     warm character, so on dark the card boundary comes from a clay border
     instead (see .package--featured / .btn--clay below). */
  --band-dark:        #2e2721;
  --band-dark-text:   #f7f2ec;
  --band-dark-rule:   rgba(250, 247, 242, .22);
  --band-dark-border: rgba(250, 247, 242, .45);

  --footer-bg:        #0f0c0a;
  --footer-text:      #a4968b;
  --error:            #f0918a;
}

/* --- Base ---------------------------------------------------------------- */

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto;}

h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; }

/* Caveat is display-only. Never below 21px, never for body or UI. */
h1, h2 {
  font-family: var(--display);
  letter-spacing: -.02em;
}

h1 {
  font-weight: 600;
  font-size: 75px;
  line-height: 1.06;
  text-wrap: balance;
}

h2 {
  font-weight: 700;
  font-size: 50px;
  line-height: 1.15;
  letter-spacing: normal;
}

a { color: inherit; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Focus: 2px clay ring everywhere, per the handoff. */
:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--clay);
  border-radius: 3px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--ink);
  color: var(--paper);
  padding: 10px 16px;
  font-size: 13px;
  text-decoration: none;
}
.skip-link:focus {
  left: 0;
}
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--pad-x);
}

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid transparent;
  font: 600 13.5px/1.2 var(--sans);
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.btn--lg { padding: 15px 28px; font-size: 15px; }

.btn--clay {
  background: var(--clay-fill);
  color: var(--clay-fill-text);
}
.btn--clay:hover { background: color-mix(in srgb, var(--clay-fill) 88%, #000); }

/* On dark, the clay fill sits too close to the surfaces behind it to identify
   the control by fill alone (WCAG 1.4.11); a clay hairline supplies the edge. */
:root[data-theme="dark"] .btn--clay { border-color: var(--clay); }

.btn--ink {
  background: var(--ink);
  color: var(--paper);
}
.btn--ink:hover { background: color-mix(in srgb, var(--ink) 85%, var(--clay)); }

.btn--outline {
  border-color: var(--ink);
  color: var(--ink);
}
.btn--outline:hover { background: var(--tint-hover); }

.btn--outline-light {
  border-color: var(--band-dark-border);
  color: var(--band-dark-text);
}
.btn--outline-light:hover { background: rgba(250, 247, 242, .08); }

.link-clay {
  color: var(--clay);
  font-size: 14.5px;
  font-weight: 600;
  text-decoration: none;
}
.link-clay:hover { text-decoration: underline; }

/* --- Header -------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 16px var(--pad-x);
  background-color: var(--header-scrim);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--hairline);
}

.logo {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  text-decoration: none;
  color: var(--ink);
}
.logo__brace { 
  font: 700 20px/1 var(--sans); 
  color: var(--clay); 
}
.logo__name  { 
  font: 700 26px/1 var(--display); 
  margin: 0 5px;
}

.nav {
  display: flex;
  gap: 26px;
  font-size: 14px;
  color: var(--body);
}
.nav a { text-decoration: none; position: relative; }
.nav a:hover { color: var(--clay); text-decoration: underline; }
.nav a:focus-visible { padding: 2px 5px; }

/* Current section. Colour plus an underline bar, so the state is not carried by
   colour alone. The bar is absolutely positioned and the weight never changes,
   so nothing reflows as the highlight moves during scroll. */
.nav a.is-current { color: var(--clay); }
.nav a.is-current::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -7px;
  height: 2px;
  background: var(--clay);
  border-radius: 2px;
}

.header__actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: none;
  border: 1px solid var(--hairline-strong);
  color: var(--body);
  border-radius: 999px;
  padding: 8px 13px;
  font: 500 12.5px/1 var(--sans);
  cursor: pointer;
}
.theme-toggle:hover { background: var(--tint-hover); }

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: none;
  border: 1px solid var(--hairline-strong);
  border-radius: 999px;
  cursor: pointer;
}
.nav-toggle__bars {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 20px;
}
.nav-toggle__bars span {
  height: 2px;
  background: var(--ink);
}

/* --- Sections ------------------------------------------------------------ */

.section {
  padding: 60px var(--pad-x);
  border-top: 1px solid var(--hairline);
  scroll-margin-top: var(--header-h);
}
.section:first-child { border-top: 0; }

.section--tint { background: var(--paper-tint); }

.section__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 34px;
}

.section__note {
  font-size: 14px;
  color: var(--muted);
  max-width: 38ch;
  text-align: right;
}

.section__note,
.sections__overflow {
  font-size: 14px;
}

.sections__overflow {
  margin-top: 14px;
  line-height: 1.6;
  color: var(--muted-light);
}

.section > h2 { margin-bottom: 34px; }

.eyebrow {
  font: 500 12px/1 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--clay);
}

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

.hero {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 56px;
  align-items: center;
  padding: 78px var(--pad-x) 66px;
}

.hero .eyebrow { margin-bottom: 20px; }
.hero__title { margin-bottom: 22px; }
.hero__title em { font-style: italic; color: var(--clay); }

.hero__subhead {
  margin-bottom: 32px;
  font-size: 19px;
  line-height: 1.6;
  color: var(--body);
  max-width: 35ch;
  text-wrap: pretty;
}

.hero__actions {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
}

.hero__nudge {
  margin-top: 14px;
  font-size: 14.5px;
  color: var(--muted);
}
.hero__nudge a { color: var(--clay); font-weight: 600; }

.hero__trust {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 24px;
  font-size: 14px;
  color: var(--muted);
}
.stars { letter-spacing: .12em; color: var(--clay); }

.hero__portrait { position: relative; }

/* The frame peeks out bottom-right — keep the offset direction. */
.hero__frame {
  position: absolute;
  inset: 18px -18px -18px 18px;
  border: 1px solid color-mix(in srgb, var(--clay) 40%, transparent);
  border-radius: 6px;
}

.hero__portrait img {
  position: relative;
  width: 100%;
  object-fit: cover;
  object-position: top center;
  border-radius: 6px;
  display: block;
  filter: saturate(.95);
}

/* --- Services lattice ---------------------------------------------------- */

.section--services { padding: 56px var(--pad-x) 60px; }

.lattice {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--hairline-grid);
  border: 1px solid var(--hairline-grid);
}

.lattice__cell {
  background: var(--paper);
  padding: 26px 24px;
}
.lattice__cell h3 {
  margin-bottom: 9px;
  font: 600 16px/1.3 var(--sans);
}
.lattice__cell p {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--body-muted);
}

/* --- Tech chips ---------------------------------------------------------- */

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 30px;
  padding: 0;
  list-style: none;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 500 12px/1 var(--mono);
  padding: 9px 13px;
  border: 1px solid var(--hairline-strong);
  border-radius: 4px;
  color: var(--body-muted);
}
.chip__icon {
  width: 17px;
  height: 17px;
  flex: none;
  color: var(--clay);
}

.chips__overflow {
  margin-top: 14px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted-light);
}

/* --- Packages ------------------------------------------------------------ */

.packages {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  align-items: stretch;
}

.package {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--hairline-card);
  border-radius: 8px;
  padding: 30px 26px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.package__tier {
  margin-bottom: 6px;
  font: 500 12px/1 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted-light);
}

.package__price { font: 700 32px/1 var(--sans); }

.package__desc {
  margin-top: 8px;
  font-size: 14px;
  color: var(--body-muted);
}

.package__features {
  padding: 18px 25px 25px;
  list-style: square;
  display: flex;
  flex-direction: column;
  gap: 9px;
  font-size: 14.5px;
  color: var(--ink-80);
  border-top: 1px solid var(--hairline-grid);
}

/* margin-top:auto baseline-aligns all three CTAs */
.package__cta {
  margin-top: auto;
  width: 100%;
  padding: 13px;
  font-size: 14.5px;
}

.package--featured {
  background: var(--band-dark);
  color: var(--band-dark-text);
  border-color: var(--band-dark);
}
/* Dark theme: the lifted fill is only 1.15:1 against the tint band, so the
   card is delineated by a clay edge — same signal the featured quote uses. */
:root[data-theme="dark"] .package--featured { border-color: var(--clay); }
.package--featured .package__tier { color: var(--clay-tint); }
.package--featured .package__desc { color: var(--cream); }
.package--featured .package__features {
  color: var(--band-dark-text);
  border-top-color: var(--band-dark-rule);
}

.package__badge {
  position: absolute;
  top: -11px;
  left: 26px;
  background: var(--clay-fill);
  color: var(--clay-fill-text);
  font: 600 11px/1 var(--sans);
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 6px 11px;
  border-radius: 999px;
}

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

.process {
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 18px;
}

.process__step {
  border-top: 2px solid var(--rule-inactive);
  padding-top: 14px;
}
/* Step 01 is clay — it marks "start here". */
.process__step--current { border-top-color: var(--clay); }

.process__num {
  margin-bottom: 7px;
  font: 500 12px/1 var(--mono);
  color: var(--muted-light);
}
.process__step--current .process__num { color: var(--clay); }

.process__label { font-size: 14.5px; font-weight: 600; }

.process__detail {
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted);
}

/* --- Recent work --------------------------------------------------------- */

.work {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.work__item img {
  object-fit: cover;
  object-position: top;
  border-radius: 6px;
  border: 1px solid var(--hairline-grid);
  display: block;
}

.work__item figcaption { margin-top: 12px; }
.work__title { font-size: 15px; font-weight: 600; }
.work__desc {
  margin-top: 4px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
}

/* --- Testimonials -------------------------------------------------------- */

.quotes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* No star ratings here by design — the hero carries the only rating. */
.quote {
  padding: 28px;
  background: var(--paper);
  border: 1px solid var(--hairline-grid);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
}

.quote--featured { border-color: color-mix(in srgb, var(--clay) 35%, transparent); }

.quote__tag {
  align-self: flex-start;
  margin-bottom: 16px;
  font: 500 10.5px/1 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted-light);
  border: 1px solid var(--hairline-strong);
  border-radius: 999px;
  padding: 5px 9px;
}
.quote--featured .quote__tag {
  color: var(--clay);
  border-color: color-mix(in srgb, var(--clay) 40%, transparent);
}

.quote__body {
  margin-bottom: 16px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-90);
}

.quote footer {
  margin-top: auto;
  font-size: 14px;
  color: var(--muted);
}

/* --- FAQ + policies ------------------------------------------------------ */

/* Two-column band. Padding sits on the columns rather than on the section, so
   each column is its own scroll target: #faq lands on the top of the band,
   #contact-form lands on the form. Works the same stacked or side by side, so
   no JS branch is needed for mobile. Inner padding is halved on each side to
   keep the designed 48px gutter without a grid gap. */
.section--split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  padding: 0;
}

.section--split > * {
  padding-top: 60px;
  padding-bottom: 60px;
  scroll-margin-top: var(--header-h);
}

.section--split > *:first-child {
  padding-left: var(--pad-x);
  padding-right: 24px;
}

.section--split > *:last-child {
  padding-left: 24px;
  padding-right: var(--pad-x);
}

.section--split h2 { margin-bottom: 24px; }

.faq {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--hairline-card);
  border-top: 1px solid var(--hairline-card);
  border-bottom: 1px solid var(--hairline-card);
}

.faq__item {
  background: var(--paper-tint);
  padding: 16px 2px;
}

.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 15.5px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.faq__item summary::-webkit-details-marker { display: none; }

/* Own marker, since the native one is suppressed */
.faq__item summary::after {
  content: "+";
  font: 400 20px/1 var(--sans);
  color: var(--clay);
  flex: none;
}
.faq__item[open] summary::after { content: "–"; }

.faq__item p {
  margin-top: 10px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--body-muted);
}

.policies {
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--body-muted);
}

/* --- Contact form --------------------------------------------------------- */

.faq__item .policies { margin-top: 10px; }

.faq__more {
  margin-top: 12px;
  font-size: 14.5px;
  color: var(--body-muted);
}
.faq__more a { color: var(--clay); font-weight: 600; }

.form-panel__intro {
  margin: -12px 0 22px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--body-muted);
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}

.field label {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--body);
}

.field__req {
  font-weight: 400;
  color: var(--muted-light);
}

.field input,
.field textarea {
  width: 100%;
  padding: 11px 13px;
  font: 400 15px/1.5 var(--sans);
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--hairline-strong);
  border-radius: 6px;
}

.field textarea { resize: vertical; min-height: 120px; }

.field input:hover,
.field textarea:hover { border-color: var(--clay); }

/* Text fields always match :focus-visible, so the global clay ring applies. */

.form-panel__submit { margin-top: 4px; }

/* Bots fill this in; people never see it. */
.honeypot { display: none; }

.form-status {
  margin-top: 14px;
  padding: 11px 14px;
  font-size: 14px;
  line-height: 1.5;
  border-left: 3px solid var(--clay);
  background: var(--paper);
  color: var(--ink-90);
  border-radius: 0 6px 6px 0;
}
/* Empty on load - the element stays in the DOM so the live region works. */
.form-status:empty { display: none; }

/* Error is signalled by wording and border, not colour alone. */
.form-status--error {
  border-left-color: var(--error);
  color: var(--error);
}

/* --- Closing CTA --------------------------------------------------------- */

.section--cta {
  padding: 74px var(--pad-x);
  background: var(--band-dark);
  color: var(--band-dark-text);
  text-align: center;
  border-top: 0;
}

.section--cta h2 {
  margin-bottom: 14px;
  font-size: 55px;
  line-height: 1.1;
}

.cta__subhead {
  margin: 0 auto 30px;
  max-width: 46ch;
  font-size: 17px;
  line-height: 1.6;
  color: var(--cream);
}

.cta__actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

/* --- Footer -------------------------------------------------------------- */

.site-footer {
  margin-top: 30px;
  padding: 26px var(--pad-x);
  display: flex;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--footer-text);
  background: var(--footer-bg);
}
.site-footer__links { display: flex; gap: 18px; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }

/* --- Mobile sticky booking bar ------------------------------------------- */

.mobile-bar {
  display: none;
  position: sticky;
  bottom: 0;
  z-index: 4;
  padding: 14px 20px;
  background: var(--band-dark);
  color: var(--cream);
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
}

/* --- Legal page ----------------------------------------------------------- */

.legal {
  border-top: 0;
  padding-top: 56px;
}

.legal .eyebrow { margin-bottom: 16px; }

.legal h1 {
  font-size: 56px;
  margin-bottom: 18px;
}

.legal h2 {
  font-size: 32px;
  margin: 44px 0 12px;
}

.legal p,
.legal li {
  font-size: 16px;
  line-height: 1.7;
  color: var(--body-muted);
}

.legal__lede {
  font-size: 18px;
  color: var(--body);
}

.legal__meta {
  margin-top: 10px;
  font: 500 12px/1 var(--mono);
  letter-spacing: .06em;
  color: var(--muted);
}

.legal ul {
  margin: 12px 0 0;
  padding-left: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.legal p + p { margin-top: 12px; }

.legal strong { color: var(--ink); }

.legal a {
  color: var(--clay);
  font-weight: 600;
}

.legal__back {
  margin-top: 52px;
  padding-top: 24px;
  border-top: 1px solid var(--hairline);
}

@media (max-width: 560px) {
  .legal h1 { font-size: 40px; }
  .legal h2 { font-size: 27px; }
}

/* --- Responsive ---------------------------------------------------------- */

@media (max-width: 1080px) {
  :root { --pad-x: 40px; }
  h1 { font-size: 62px; }
  h2 { font-size: 44px; }
  .lattice { grid-template-columns: repeat(2, 1fr); }
  .process { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 860px) {
  .nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    padding: 8px var(--pad-x) 16px;
    background: var(--paper);
    border-bottom: 1px solid var(--hairline);
  }
  .site-header[data-nav-open="true"] .nav { display: flex; }
  .nav a {
    padding: 14px 0;
    border-bottom: 1px solid var(--hairline);
  }

  .nav a.is-current::after {
    left: -11px;
    right: auto;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
    width: 3px;
    height: 20px;
  }

  .nav-toggle { display: inline-flex; }
  .header__book { display: none; }
  .theme-toggle__label { display: none; }
  .theme-toggle { padding: 10px 12px; }

  .hero {
    grid-template-columns: 1fr;
    gap: 32px;
    padding-top: 48px;
  }
  .hero__subhead { max-width: none; }

  .packages,
  .work,
  .quotes { grid-template-columns: 1fr; }

  .section--split { grid-template-columns: 1fr; }
  .section--split > *:first-child { padding: 60px var(--pad-x) 32px; }
  .section--split > *:last-child  { padding: 32px var(--pad-x) 60px; }

  .section__head { flex-direction: column; align-items: flex-start; }
  .section__note { text-align: left; }

  .mobile-bar { display: flex; }
}

@media (max-width: 560px) {
  :root { --pad-x: 20px; }

  h1 { font-size: 48px; line-height: 1.05; }
  h2 { font-size: 31px; }
  .section--cta h2 { font-size: 34px; }

  .section { padding: 40px var(--pad-x); }
  .section--services { padding: 40px var(--pad-x); }
  .hero { padding: 34px var(--pad-x) 30px; }
  .section--cta { padding: 48px var(--pad-x); }

  .logo__name { font-size: 21px; }
  .logo__brace { font-size: 15px; }

  .hero__subhead { font-size: 16px; }
  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn { width: 100%; }

  .section--split > *:first-child { padding: 40px var(--pad-x) 24px; }
  .section--split > *:last-child  { padding: 24px var(--pad-x) 40px; }

  .lattice { grid-template-columns: 1fr; }
  .process { grid-template-columns: 1fr; }

  .cta__actions { flex-direction: column; }
  .site-footer { flex-direction: column; }
}

/* Keep tap targets comfortable on touch devices. */
@media (pointer: coarse) {
  .nav a, .btn, .theme-toggle, .faq__item summary { min-height: 44px; }
  .btn { padding-top: 13px; padding-bottom: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}