/* ============================================================
   Self-hosted webfonts.

   Previously loaded from fonts.googleapis.com, which put a
   render-blocking request to a third-party origin on the critical
   path of every page while the rest of the site sat on Cloudflare's
   edge. These are the same files Google serves, committed to the
   repo and served from our own origin.

   All three are VARIABLE fonts, so one file covers the whole weight
   range — hence `font-weight: <min> <max>` rather than a separate
   face per weight. Only the latin and latin-ext subsets are shipped;
   that covers English and French, including every accented character
   in the French tutoring copy.

   Regenerate: see scripts/fetch-fonts.mjs
   ============================================================ */

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/assets/fonts/fraunces-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/assets/fonts/fraunces-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('/assets/fonts/jetbrains-mono-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('/assets/fonts/jetbrains-mono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================
   Cayley Burton — site styles
   Palette: coral + white + deep teal
   Type:    Fraunces (display) / Inter (body)
   ============================================================ */

:root {
  /* The token names predate a palette change and no longer match their
     values — --terracotta is coral, --cream is white, --green is teal.
     Renaming them would mean touching every rule here plus the palette
     fields in Sanity, so the values below are the source of truth. */
  --terracotta: #E26A4F;          /* warm coral */
  --terracotta-deep: #C24A30;     /* deeper coral */
  --terracotta-soft: #F8C5B3;     /* coral tint */
  --cream: #FFFFFF;               /* clean white */
  --cream-deep: #F4F7F8;          /* cool ice */
  --ink: #1F2D3A;                 /* deep navy-charcoal */
  --ink-soft: #4A5B6B;            /* slate */
  --ink-mute: #8497A6;            /* mute slate */
  --green: #1F7A8C;               /* deep teal */
  --green-deep: #14535F;           /* darker teal */
  --green-soft: #BFE0E6;           /* mint */
  --line: #E1E8EC;                /* cool hairline */
  --gold: #E8A317;                /* sunshine */
  --maxw: 1200px;
  --radius: 8px;
  --shadow-sm: 0 1px 3px rgba(45, 42, 38, 0.07);
  --shadow-md: 0 8px 26px -10px rgba(142, 58, 38, 0.22);
  --shadow-lg: 0 26px 60px -22px rgba(30, 74, 69, 0.28);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: var(--ink);
  margin: 0 0 0.5em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.2rem, 4.6vw, 3.6rem); font-weight: 450; }
h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); }
h3 { font-size: clamp(1.2rem, 1.8vw, 1.45rem); }
h4 { font-size: 1.05rem; }

p { margin: 0 0 1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a {
  color: var(--terracotta-deep);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 120ms ease;
}
a:hover { color: var(--green-deep); }

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

hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 3rem 0;
}

ul, ol { padding-left: 1.2rem; margin: 0 0 1em; }
li { margin-bottom: 0.4em; }

blockquote {
  margin: 1.5rem 0;
  padding: 0 0 0 1.25rem;
  border-left: 3px solid var(--terracotta);
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 1.15rem;
  color: var(--ink-soft);
}

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

.container {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 1.5rem;
}

.container--narrow { max-width: 780px; }
.container--wide { max-width: 1320px; }

section { padding: 4rem 0; }

@media (min-width: 768px) {
  section { padding: 5.5rem 0; }
}

.eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--terracotta-deep);
  margin-bottom: 0.75rem;
}

.eyebrow--green { color: var(--green-deep); }

/* The "first consultation is FREE" pill above a page heading. Block, so it
   keeps its own line — as an inline-block it sat on the same line as the
   eyebrow underneath it and the two ran together. */
.free-badge {
  display: block;
  width: fit-content;
  background: var(--terracotta);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.4rem 0.9rem;
  border-radius: 100px;
  margin-bottom: 1rem;
}

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

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1.5rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.98rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  border-radius: var(--radius);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: all 140ms ease;
  white-space: nowrap;
}

.btn--primary {
  background: var(--terracotta);
  color: #fff;
  border-color: var(--terracotta);
  box-shadow: var(--shadow-sm);
}
.btn--primary:hover {
  background: var(--terracotta-deep);
  border-color: var(--terracotta-deep);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.btn--secondary {
  background: transparent;
  color: var(--green-deep);
  border-color: var(--green-deep);
}
.btn--secondary:hover {
  background: var(--green-deep);
  color: var(--cream);
}

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}
.btn--ghost:hover { border-color: var(--ink); }

.btn--lg { padding: 1.05rem 2rem; font-size: 1.05rem; }

.btn--block { width: 100%; justify-content: center; }

.btn-arrow { transition: transform 140ms ease; }
.btn:hover .btn-arrow { transform: translateX(3px); }

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

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header .brand,
.site-header .brand-text { color: var(--ink); }
.site-header .brand-text small { color: var(--ink-mute); }
.site-header .nav > a,
.site-header .nav > .nav-group > button { color: var(--ink); }
.site-header .nav > a:hover,
.site-header .nav > .nav-group > button:hover,
.site-header .nav > a.is-active,
.site-header .nav > .nav-group.is-active > button { color: var(--terracotta-deep); border-bottom-color: var(--terracotta); }
.site-header .nav-group .dropdown { background: #fff; }
.site-header .nav-group .dropdown a { color: var(--ink); }
.site-header .nav-group .dropdown a:hover { background: var(--cream-deep); color: var(--terracotta-deep); }
.site-header .menu-toggle { border-color: var(--line); }
.site-header .menu-toggle span { background: var(--ink); }
.site-header .btn--primary { background: var(--terracotta); border-color: var(--terracotta); color: #fff; }
.site-header .btn--primary:hover { background: var(--terracotta-deep); border-color: var(--terracotta-deep); }

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0.9rem 1.5rem;
  max-width: var(--maxw);
  margin: 0 auto;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  color: var(--ink);
}

.brand-mark {
  width: 48px;
  height: 48px;
  border-radius: 0;
  background: transparent;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  overflow: visible;
}
.brand-mark img { width: 100%; height: 100%; object-fit: contain; display: block; }
.footer-brand .brand-mark { background: transparent; border-radius: 0; padding: 0 !important; }

.brand-text {
  font-family: 'Fraunces', serif;
  font-size: 1.15rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.1;
}
.brand-text small {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-top: 2px;
}

.nav {
  display: none;
  align-items: center;
  gap: 1.75rem;
}
.nav > a, .nav > .nav-group > button {
  color: var(--ink);
  font-size: 0.95rem;
  font-weight: 500;
  font-family: inherit;
  text-decoration: none;
  padding: 0.4rem 0;
  border: 0;
  background: transparent;
  border-bottom: 1.5px solid transparent;
  transition: border-color 120ms ease, color 120ms ease;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.nav > a:hover, .nav > .nav-group > button:hover { color: var(--terracotta-deep); border-bottom-color: var(--terracotta); }
.nav > a.is-active, .nav > .nav-group.is-active > button { color: var(--terracotta-deep); border-bottom-color: var(--terracotta); }

.nav-group { position: relative; }
.nav-group > button .caret { font-size: 0.7rem; opacity: 0.6; }
.nav-group .dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  min-width: 220px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: 0.5rem;
  display: grid;
  gap: 2px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 140ms ease, visibility 0s linear 140ms, transform 140ms ease;
  z-index: 60;
}
.nav-group:hover .dropdown,
.nav-group:focus-within .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  transition-delay: 0s, 0s, 0s;
}
.nav-group .dropdown a {
  display: block;
  padding: 0.55rem 0.85rem;
  font-size: 0.92rem;
  text-decoration: none;
  color: var(--ink);
  border-radius: 3px;
  border: 0;
}
.nav-group .dropdown a:hover { background: var(--cream); color: var(--terracotta-deep); }

@media (min-width: 1000px) {
  .nav { display: flex; }
}

.header-cta { display: flex; align-items: center; gap: 0.75rem; }

.menu-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 36px;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: transparent;
  cursor: pointer;
  padding: 0 8px;
}
.menu-toggle span {
  display: block;
  height: 1.5px;
  background: var(--ink);
  transition: transform 160ms ease, opacity 160ms ease;
}
@media (min-width: 1000px) { .menu-toggle { display: none; } }

.mobile-nav {
  display: none;
  border-top: 1px solid var(--line);
  background: var(--cream);
}
.mobile-nav.is-open { display: block; }
.mobile-nav ul {
  list-style: none;
  padding: 0.5rem 1.5rem 1.25rem;
  margin: 0 auto;
  max-width: var(--maxw);
}
.mobile-nav a {
  display: block;
  padding: 0.65rem 0;
  text-decoration: none;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
}

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

.site-footer {
  background: var(--green-deep);
  color: var(--cream);
  padding: 4rem 0 2rem;
}
.site-footer a { color: var(--cream); text-decoration: none; }
.site-footer a:hover { color: var(--terracotta-soft); }

.footer-grid {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: 1fr;
}
@media (min-width: 720px) {
  .footer-grid { grid-template-columns: 1.3fr 1fr 1fr 1fr; }
}

.footer-brand p {
  color: var(--cream);
  opacity: 0.78;
  font-size: 0.92rem;
  line-height: 1.6;
  margin-top: 1rem;
}

.footer-col h4 {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--terracotta-soft);
  margin-bottom: 1rem;
}
.footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.55rem;
}
.footer-col li { margin: 0; }
.footer-col a { font-size: 0.93rem; }

.footer-social { display: flex; gap: 0.6rem; margin-top: 1rem; }
.footer-social a {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border: 1px solid rgba(250, 244, 236, 0.25);
  border-radius: 50%;
  color: var(--cream);
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}
.footer-social a svg { width: 17px; height: 17px; display: block; }
.footer-social a:hover {
  background: rgba(250, 244, 236, 0.12);
  border-color: rgba(250, 244, 236, 0.5);
}

.land-ack-foot {
  border-top: 1px solid rgba(250, 244, 236, 0.18);
  margin-top: 3rem;
  padding-top: 2rem;
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
  font-size: 0.88rem;
  opacity: 0.85;
}
@media (min-width: 720px) {
  .land-ack-foot { grid-template-columns: 2fr 1fr; align-items: end; }
}
.land-ack-foot p { margin: 0; line-height: 1.55; }

.copyright {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(250, 244, 236, 0.12);
  font-size: 0.82rem;
  opacity: 0.65;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}

/* ---------- Image placeholders (for missing assets) ---------- */

.img-ph {
  position: relative;
  display: block;
  width: 100%;
  background:
    repeating-linear-gradient(
      135deg,
      var(--cream-deep) 0,
      var(--cream-deep) 12px,
      var(--cream) 12px,
      var(--cream) 24px
    );
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.img-ph::after {
  content: attr(data-label);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 1rem;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  color: var(--ink-mute);
  background: rgba(250, 244, 236, 0.7);
  text-transform: uppercase;
}
.img-ph[data-aspect="4-5"] { aspect-ratio: 4 / 5; }
.img-ph[data-aspect="3-4"] { aspect-ratio: 3 / 4; }
.img-ph[data-aspect="1-1"] { aspect-ratio: 1 / 1; }
.img-ph[data-aspect="16-9"] { aspect-ratio: 16 / 9; }
.img-ph[data-aspect="3-2"] { aspect-ratio: 3 / 2; }
.img-ph[data-aspect="5-4"] { aspect-ratio: 5 / 4; }

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

.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.75rem;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}
.card:hover {
  border-color: var(--terracotta-soft);
  box-shadow: var(--shadow-md);
}

.card-link {
  text-decoration: none;
  color: inherit;
  display: block;
}

/* ---------- Trust strip ---------- */

.trust-strip {
  background: #fff;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 1.5rem 0;
}
.trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2.25rem;
  justify-content: center;
  align-items: center;
}
.trust-item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--ink-soft);
}
.trust-item svg { color: var(--terracotta); flex-shrink: 0; }

/* ---------- CTA banner / blocks ---------- */

.cta-banner {
  background: var(--green-deep);
  color: var(--cream);
  text-align: center;
  padding: 4rem 1.5rem;
}
.cta-banner h2 { color: var(--cream); margin-bottom: 0.5rem; }
.cta-banner p { color: var(--cream); opacity: 0.85; max-width: 540px; margin: 0 auto 1.5rem; }
.cta-banner .btn--primary { background: var(--terracotta); border-color: var(--terracotta); }
.cta-banner .btn--primary:hover { background: #fff; color: var(--green-deep); border-color: #fff; }

.cta-block {
  background: var(--cream-deep);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 2.5rem;
  display: grid;
  gap: 1.5rem;
  align-items: center;
  margin: 3rem 0 0;
}
@media (min-width: 720px) {
  .cta-block { grid-template-columns: 1fr auto; }
}
.cta-block h3 { margin-bottom: 0.25rem; }
.cta-block .ribbon {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--terracotta-deep);
  margin-bottom: 0.5rem;
}

/* ---------- Stars / ratings ---------- */

.stars {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ink-soft);
}
.stars-glyphs {
  color: var(--gold);
  letter-spacing: 0.06em;
  font-size: 1rem;
}

.rating-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: #fff;
  padding: 0.55rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 100px;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
}
.rating-badge:hover { border-color: var(--gold); }

/* ---------- Page hero ---------- */

.page-hero {
  padding: 4rem 0 3rem;
  background: var(--green-deep);
  color: var(--cream);
  border-bottom: 0;
}
.page-hero .eyebrow { color: #F8B8A3; }
.page-hero h1 { color: var(--cream); }
.page-hero .lede { color: rgba(255,255,255,0.95); }
.page-hero .rating-badge { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.25); color: var(--cream); }
.page-hero .rating-badge strong { color: var(--cream); }
.page-hero .btn--ghost { color: var(--cream); border-color: rgba(255,255,255,0.3); }
.page-hero .btn--ghost:hover { border-color: var(--cream); }
.page-hero .eyebrow { margin-bottom: 1rem; }
.page-hero h1 { margin-bottom: 0.75rem; }
.page-hero .lede {
  font-family: 'Fraunces', serif;
  font-size: 1.25rem;
  line-height: 1.5;
  color: rgba(255,255,255,0.95);
  max-width: 640px;
}

/* ---------- Recent posts ---------- */

.posts-row {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
}
@media (min-width: 720px) {
  .posts-row { grid-template-columns: repeat(3, 1fr); }
}
.post-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem;
  text-decoration: none;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  transition: transform 140ms ease, box-shadow 140ms ease;
}
.post-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.post-card .cat {
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--terracotta-deep);
}
.post-card h3 {
  font-size: 1.15rem;
  margin: 0;
}
.post-card .meta {
  font-size: 0.82rem;
  color: var(--ink-mute);
  margin-top: auto;
}

/* ---------- Forms ---------- */

.form {
  display: grid;
  gap: 1.1rem;
}
.form-row {
  display: grid;
  gap: 1.1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 600px) {
  .form-row { grid-template-columns: 1fr 1fr; }
}
.field { display: grid; gap: 0.4rem; }
.field label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink);
}
.field label .req { color: var(--terracotta-deep); }
.field .hint { font-size: 0.8rem; color: var(--ink-mute); }
/* Grid items default to min-width:auto, so a control wider than its track –
   e.g. the workshops "Queer circle time (2SLGBTQIA+ picture books)" option –
   stretches the track instead of shrinking. That overflowed the viewport on
   mobile and made the 1fr 1fr columns uneven on desktop. Let them shrink. */
.form-row > *,
.field {
  min-width: 0;
}
.field input,
.field select,
.field textarea {
  font-family: inherit;
  font-size: 1rem;
  padding: 0.7rem 0.85rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
  transition: border-color 140ms ease, box-shadow 140ms ease;
  width: 100%;
  min-width: 0;
  max-width: 100%;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--terracotta);
  box-shadow: 0 0 0 3px rgba(198, 106, 74, 0.15);
}
.field textarea { min-height: 130px; resize: vertical; }
.field-conditional { display: none; }
.field-conditional.is-on { display: grid; }

.form-success {
  background: var(--green-soft);
  border: 1px solid var(--green);
  border-radius: var(--radius);
  padding: 1.5rem;
  color: var(--green-deep);
  display: none;
}
.form-success.is-on { display: block; }

/* ---------- Pricing tables ---------- */

.price-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.price-table th, .price-table td {
  padding: 0.85rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--line);
  font-size: 0.95rem;
}
.price-table th {
  background: var(--cream-deep);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.price-table tr:last-child td { border-bottom: 0; }
.price-table td:last-child { font-weight: 600; color: var(--terracotta-deep); white-space: nowrap; }

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

.testimonial {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 2rem;
}
.testimonial blockquote {
  margin: 0 0 1rem;
  border: 0;
  padding: 0;
  font-style: normal;
  color: var(--ink);
  font-size: 1.1rem;
  line-height: 1.55;
}
.testimonial blockquote::before {
  content: "“";
  display: block;
  font-family: 'Fraunces', serif;
  font-size: 3rem;
  line-height: 0.7;
  color: var(--terracotta);
  margin-bottom: 0.5rem;
}
.testimonial cite {
  display: block;
  font-style: normal;
  font-size: 0.9rem;
  color: var(--ink-soft);
  font-weight: 500;
}
.testimonial cite strong {
  color: var(--ink);
  font-weight: 600;
  display: block;
}

.testi-row {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
}
@media (min-width: 720px) { .testi-row { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .testi-row.row-3 { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Two column ---------- */

.two-col {
  display: grid;
  gap: 3rem;
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 900px) {
  .two-col { grid-template-columns: 1fr 1fr; gap: 4rem; }
  .two-col--split { grid-template-columns: 1.2fr 1fr; }
  .two-col--media-first { grid-template-columns: 1fr 1.2fr; }
}

/* ---------- Google review markers ---------- */

.gr-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 0.85rem;
  margin-bottom: 0.9rem;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--ink-mute);
}
.gr-meta .gr-stars {
  color: var(--gold);
  letter-spacing: 0.08em;
  font-size: 0.95rem;
}
.gr-meta .gr-label {
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: 600;
  font-size: 0.7rem;
  color: var(--ink-soft);
}
.gr-meta .gr-dot {
  width: 3px; height: 3px; border-radius: 50%;
  background: var(--ink-mute); opacity: 0.6;
}
.gr-meta .gr-guide {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--green-deep);
}
.gr-meta .gr-guide::before {
  content: "";
  width: 6px; height: 6px;
  background: var(--green); border-radius: 50%;
}

.testimonial.testimonial--google {
  border-left: 3px solid var(--gold);
}
.testimonial--google cite small {
  display: block;
  font-size: 0.78rem;
  color: var(--ink-mute);
  font-weight: 400;
  margin-top: 0.25rem;
  letter-spacing: 0.02em;
}

/* The one pulled-out review above the advocacy sections. */

.advocacy-feature {
  padding: 2.5rem 0;
  background: #fff;
  border-bottom: 1px solid var(--line);
}
.testimonial--feature {
  border: 0;
  padding: 0;
  text-align: center;
}
.testimonial--feature .gr-meta { justify-content: center; }
.testimonial--feature blockquote { font-size: 1.15rem; }

.reviews-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 2rem;
}
.reviews-toolbar button {
  background: #fff;
  border: 1px solid var(--line);
  color: var(--ink-soft);
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 500;
  padding: 0.5rem 0.9rem;
  border-radius: 100px;
  cursor: pointer;
  transition: all 140ms ease;
}
.reviews-toolbar button:hover { border-color: var(--ink-mute); color: var(--ink); }
.reviews-toolbar button.is-active {
  background: var(--ink);
  color: var(--cream);
  border-color: var(--ink);
}

.reviews-section + .reviews-section { margin-top: 4rem; }
.reviews-section .section-label {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--line);
}
.reviews-section .section-label h2 { margin: 0; font-size: clamp(1.4rem, 2.2vw, 1.8rem); }
.reviews-section .section-label .count {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.78rem;
  color: var(--ink-mute);
  letter-spacing: 0.08em;
}

/* ---------- Utility ---------- */

.text-center { text-align: center; }
.muted { color: var(--ink-mute); }
.mt-0 { margin-top: 0; }
.mt-2 { margin-top: 2rem; }
.mb-0 { margin-bottom: 0; }
.mb-2 { margin-bottom: 2rem; }
.mb-3 { margin-bottom: 3rem; }
.flex-row { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
.gap-1 { gap: 0.75rem; }
.gap-2 { gap: 1.5rem; }

/* ---------- Section header ---------- */

.section-head {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 3rem;
}
.section-head .eyebrow { margin-bottom: 0.75rem; }
.section-head p { color: var(--ink-soft); }

/* ---------- Service cards (home) ---------- */

.service-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
}
@media (min-width: 720px) { .service-grid { grid-template-columns: repeat(3, 1fr); } }

.service-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  transition: transform 160ms ease, box-shadow 160ms ease;
}
.service-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.service-card .card-body { padding: 1.75rem; flex: 1; display: flex; flex-direction: column; }
.service-card h3 { margin-bottom: 0.5rem; }
.service-card p { color: var(--ink-soft); margin-bottom: 1.25rem; }
.service-card .card-cta {
  margin-top: auto;
  font-weight: 600;
  font-size: 0.93rem;
  color: var(--terracotta-deep);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

/* ---------- Hero (home) ---------- */

.hero {
  padding: 3.5rem 0 4rem;
  background: var(--green-deep);
  color: var(--cream);
  border-bottom: 0;
}
.hero h1, .hero h2 { color: var(--cream); }
.hero .lede { color: rgba(255,255,255,0.95); }
.hero .eyebrow { color: #F8B8A3; }
.hero .rating-badge { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.25); color: var(--cream); }
.hero .rating-badge strong { color: var(--cream); }
.hero-inner {
  display: grid;
  gap: 3rem;
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 900px) {
  .hero-inner { grid-template-columns: 1.05fr 1fr; gap: 4rem; }
}
.hero h1 { margin-bottom: 1rem; }
.hero .lede {
  font-size: 1.2rem;
  color: rgba(255,255,255,0.95);
  margin-bottom: 2rem;
  max-width: 540px;
}
.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  margin-bottom: 2rem;
}
.hero-cta { display: flex; flex-wrap: wrap; gap: 0.85rem; }

/* ---------- Difference / philosophy ---------- */

.pillars {
  display: grid;
  gap: 1.75rem;
  grid-template-columns: 1fr;
}
@media (min-width: 720px) { .pillars { grid-template-columns: repeat(3, 1fr); } }
.pillar {
  background: var(--cream);
  border-left: 3px solid var(--terracotta);
  padding: 1.25rem 1.5rem;
}
.pillar h3 { font-size: 1.15rem; margin-bottom: 0.4rem; }
.pillar p { font-size: 0.95rem; color: var(--ink-soft); margin: 0; }

/* ---------- Lead magnet ---------- */

.lead-magnet {
  background: var(--terracotta);
  color: #fff;
  border-radius: var(--radius);
  padding: 2.5rem;
  display: grid;
  gap: 2rem;
  align-items: center;
}
@media (min-width: 720px) { .lead-magnet { grid-template-columns: 1fr 1fr; } }
.lead-magnet h3 { color: #fff; }
.lead-magnet p { color: rgba(255,255,255,0.9); margin-bottom: 1.25rem; }
.lead-magnet .form-row { gap: 0.6rem; }
.lead-magnet input {
  flex: 1;
  padding: 0.85rem 1rem;
  border-radius: var(--radius);
  border: 0;
  font-family: inherit;
  font-size: 1rem;
}
.lead-magnet .btn--primary {
  background: var(--green-deep);
  border-color: var(--green-deep);
}
.lead-magnet .btn--primary:hover {
  background: var(--ink);
  border-color: var(--ink);
}

/* ---------- Photos ---------- */

/* Images inside a blog post body. */
.post-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  margin: 1.5rem 0;
  background-color: var(--cream-deep);
  background-size: cover;
  background-position: center;
}


/* Every content photo on the site. Each one sets its own --ratio, which
   reserves the right amount of space before the file arrives so nothing on the
   page shifts as images load. */
.ph-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--ratio, 3 / 2);
  object-fit: cover;
  border-radius: var(--radius);
  background-color: var(--cream-deep);
  background-size: cover;
  background-position: center;
}

/* ---------- Image gallery ---------- */

.img-gallery {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 600px) { .img-gallery { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .img-gallery--3 { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Anchor for sticky header offset ---------- */
[id] { scroll-margin-top: 90px; }

/* ---------- Print-y / accessibility ---------- */
:focus-visible {
  outline: 3px solid var(--terracotta);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ---------- Mobile header fix (phones) ---------- */
/* The full-text "Book Free Consultation" button needs ~485px of header width
   to sit beside the brand + hamburger; every common phone is narrower. Below
   560px we hide it and rely on the hamburger, which now surfaces a prominent
   booking CTA at the top of the drawer (.mobile-nav-cta below). */
@media (max-width: 559.98px) {
  .site-header .header-cta .btn--primary { display: none; }

  /* Buttons default to `white-space: nowrap`, so long CTA labels (e.g.
     "Book your free 30-min consultation →") stay on one line and grow wider
     than a phone viewport, overflowing horizontally. On phones, let labels
     wrap and center instead. */
  .btn { white-space: normal; text-align: center; }
}

/* Prominent booking CTA at the top of the mobile drawer. Overrides the generic
   `.mobile-nav a` link styling so it renders as a filled button, not a row. */
.mobile-nav .mobile-nav-cta {
  /* `.btn--block` is width:100%, which here resolved to the full 375px viewport
     *plus* these 1.5rem side margins — so opening the drawer pushed the page
     24px wider and introduced horizontal scroll. Going block-level with an auto
     width makes the margins subtract instead of add. */
  display: flex;
  width: auto;
  margin: 0.9rem 1.5rem 0.25rem;
  padding: 0.8rem 1rem;
  color: #fff;
  border-bottom: 0;
}
.mobile-nav .mobile-nav-cta:hover { color: #fff; }