/* ===========================================================
   GrowMint Media — WARM edition
   Cream canvas, terracotta + sage, soft serif + humanist sans
   =========================================================== */

:root {
  /* Surfaces — warm paper */
  --bg:        #FAF2E5;
  --bg-soft:   #F1E6D4;
  --card:      #FFFBF4;
  --card-2:    #FAF1E3;
  --line:      rgba(74, 54, 34, 0.14);
  --line-2:    rgba(74, 54, 34, 0.24);

  /* Ink — warm near-black / taupe */
  --ink:       #2C2519;
  --ink-soft:  #4A4133;
  --muted:     #756957;
  --muted-2:   #877A66;

  /* Accents — brightened, warm-leaning */
  --terra:     #D55F2E;   /* terracotta — primary, juicier */
  --terra-deep:#A8461F;
  --terra-soft:#FADBC8;
  --sage:      #5E8A4E;   /* warm sage — the "grow" nod, greener */
  --sage-deep: #3E6234;
  --sage-soft: #DCEBCB;
  --gold:      #E9A22F;   /* warm highlight, sunnier */
  --gold-soft: #FBE7BE;
  --on-terra:  #FFF7F1;

  /* New supporting hues — same family, more life */
  --ocean:     #2E8FA6;   /* teal — cool counterpoint */
  --ocean-deep:#1F6B7E;
  --ocean-soft:#CBE8EC;
  --berry:     #C84B72;   /* raspberry — playful pop */
  --berry-deep:#A33356;
  --berry-soft:#FAD7E0;

  --shadow:    0 26px 50px -28px rgba(90, 58, 30, 0.34);
  --shadow-sm: 0 12px 26px -16px rgba(90, 58, 30, 0.28);
  --glow:      0 22px 48px -26px rgba(210, 104, 63, 0.40);

  --maxw: 1180px;
  --radius: 24px;
  --radius-sm: 16px;

  --font-display: "Newsreader", Georgia, serif;
  --font-body: "Hanken Grotesk", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  background-image:
    linear-gradient(165deg, #FCF5E9 0%, #FAF1E2 40%, #F7EFDD 72%, #F4ECD6 100%);
  background-attachment: fixed;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Warm ambient washes — livelier, gently drifting */
body::before {
  content: "";
  position: fixed;
  inset: -10%;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(720px 520px at 84% -4%, rgba(233, 162, 47, 0.24), transparent 60%),
    radial-gradient(660px 580px at 0% 8%, rgba(46, 143, 166, 0.16), transparent 58%),
    radial-gradient(580px 540px at 100% 62%, rgba(94, 138, 78, 0.18), transparent 58%),
    radial-gradient(540px 500px at 4% 98%, rgba(200, 75, 114, 0.14), transparent 58%);
  animation: washDrift 26s ease-in-out infinite alternate;
}
@keyframes washDrift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(0, -2.2%, 0) scale(1.06); }
}
@media (prefers-reduced-motion: reduce) { body::before { animation: none; } }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

::selection { background: var(--terra); color: var(--on-terra); }

/* ---------- A11y utilities ---------- */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--terra);
  outline-offset: 3px;
  border-radius: 6px;
}
.skip-link {
  position: fixed; top: 12px; left: 50%;
  transform: translateX(-50%) translateY(-160%);
  z-index: 200; background: var(--ink); color: var(--on-terra);
  padding: 12px 22px; border-radius: 999px; font-weight: 600; font-size: 14px;
  box-shadow: var(--shadow-sm); transition: transform .22s ease;
}
.skip-link:focus { transform: translateX(-50%) translateY(0); }
section[id], #main { scroll-margin-top: 94px; }
.nav-links a.active { color: var(--terra); }

/* ---------- Plans note ---------- */
.plans-note { max-width: 760px; margin: 30px auto 0; text-align: center; color: var(--muted); font-size: 15.5px; line-height: 1.6; }
.plans-note b { color: var(--terra); font-weight: 600; }

/* ---------- Sticky mobile call bar ---------- */
.mobile-cta {
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 60;
  display: none; gap: 10px; padding: 10px;
  background: rgba(251,245,236,0.92);
  backdrop-filter: blur(12px) saturate(1.1);
  -webkit-backdrop-filter: blur(12px) saturate(1.1);
  border: 1px solid var(--line-2); border-radius: 20px; box-shadow: var(--shadow);
  transform: translateY(150%); transition: transform .35s cubic-bezier(.5,.05,.2,1);
}
.mobile-cta.show { transform: none; }
.mobile-cta .btn { flex: 1; justify-content: center; }
.mobile-cta .btn-icon { flex: 0 0 auto; width: 52px; padding: 0; }
@media (max-width: 700px) { .mobile-cta { display: flex; } }

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }
section { position: relative; z-index: 1; }
.section-pad { padding: clamp(72px, 9vw, 138px) 0; }

/* ---------- Type ---------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.012em;
  margin: 0;
  color: var(--ink);
}
.eyebrow {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--terra-deep);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: "";
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--terra);
  box-shadow: 0 0 0 4px var(--terra-soft);
}
.h-hero { font-size: clamp(2.8rem, 7.4vw, 5.6rem); font-weight: 500; line-height: 1.02; }
.h-sec  { font-size: clamp(2.1rem, 4.6vw, 3.5rem); font-weight: 500; }
.lede   { font-size: clamp(1.06rem, 1.55vw, 1.32rem); color: var(--muted); max-width: 56ch; line-height: 1.6; }
.ital   { font-style: italic; }
.terra  { color: var(--terra); }
.sage   { color: var(--sage); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 26px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15.5px;
  border: 1px solid transparent;
  transition: transform .25s ease, background .25s ease, box-shadow .25s ease, border-color .25s ease, color .25s;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--terra); color: var(--on-terra); box-shadow: 0 14px 30px -14px rgba(210,104,63,0.6); }
.btn-primary:hover { background: var(--terra-deep); transform: translateY(-2px); box-shadow: 0 18px 36px -14px rgba(210,104,63,0.7); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn-ghost:hover { background: rgba(74,56,38,0.05); border-color: var(--terra); transform: translateY(-2px); }
.btn-arrow svg { transition: transform .25s ease; }
.btn:hover .btn-arrow svg { transform: translate(3px, -3px); }

/* ---------- Nav ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  transition: background .35s ease, border-color .35s ease, backdrop-filter .35s;
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: rgba(251,245,236,0.82);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  border-bottom: 1px solid var(--line);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 78px; }
.brand { display: flex; align-items: center; gap: 11px; font-family: var(--font-display); font-weight: 600; font-size: 1.34rem; letter-spacing: -0.02em; }
.brand .mark {
  width: 34px; height: 34px; border-radius: 50% 50% 50% 4px;
  background: linear-gradient(150deg, var(--sage), var(--sage-deep));
  display: grid; place-items: center;
  box-shadow: 0 8px 18px -8px rgba(95,123,87,0.7);
  transform: rotate(-8deg);
}
.brand .mark span { width: 12px; height: 12px; border-radius: 50% 50% 50% 3px; background: var(--on-terra); transform: rotate(45deg); }
.nav-links { display: flex; align-items: center; gap: 26px; }
.nav-links a { color: var(--ink-soft); font-size: 15.5px; font-weight: 500; transition: color .2s; }
.nav-links a:hover { color: var(--terra); }
.nav-cta { display: flex; align-items: center; gap: 14px; }
.nav-toggle { display: none; background: transparent; border: 1px solid var(--line-2); border-radius: 12px; width: 46px; height: 46px; align-items: center; justify-content: center; }
.nav-toggle span { display: block; width: 18px; height: 2px; background: var(--ink); position: relative; border-radius: 2px; }
.nav-toggle span::before, .nav-toggle span::after { content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: var(--ink); border-radius: 2px; }
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after { top: 6px; }

/* Mobile menu */
.mobile-menu {
  position: fixed; inset: 78px 0 auto 0; z-index: 49;
  background: rgba(251,245,236,0.98);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  transform: translateY(-112%);
  transition: transform .4s cubic-bezier(.5,.05,.2,1);
  padding: 18px 28px 30px;
}
.mobile-menu.open { transform: translateY(0); }
.mobile-menu a { display: block; padding: 14px 0; font-size: 1.3rem; font-family: var(--font-display); border-bottom: 1px solid var(--line); color: var(--ink); }
.mobile-menu .btn { width: 100%; justify-content: center; margin-top: 20px; }

/* ---------- Hero ---------- */
.hero { padding: clamp(132px, 17vh, 200px) 0 clamp(60px, 8vw, 110px); }
.hero-grid { display: grid; grid-template-columns: 1.08fr 0.92fr; gap: 60px; align-items: center; }
.hero h1 { margin: 22px 0 26px; }
.hero .lede { margin-bottom: 36px; }
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-meta { margin-top: 42px; display: flex; gap: 14px 36px; flex-wrap: wrap; }
.hero-meta .item { display: flex; align-items: center; gap: 10px; }
.hero-meta .item svg { color: var(--sage); flex: none; }
.hero-meta .lbl { font-size: 14.5px; color: var(--ink-soft); font-weight: 500; }

/* Hero visual — warm photo composition */
.hero-visual { position: relative; width: 100%; }
.hero-photo {
  display: block;
  position: relative;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  border-radius: 28px;
  box-shadow: var(--shadow);
  background: repeating-linear-gradient(135deg, var(--terra-soft) 0 22px, #F2D9C8 22px 44px);
  color: var(--terra-deep);
}
.hero-photo .ph-label {
  font-family: var(--font-body);
  font-size: 13px; font-weight: 600; letter-spacing: 0.04em;
  color: var(--terra-deep);
  background: rgba(255,252,246,0.85);
  border: 1px solid var(--line-2);
  padding: 10px 16px; border-radius: 999px;
  max-width: 76%;
}
.hero-chip {
  position: absolute;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 14px 18px;
  box-shadow: var(--shadow-sm);
  display: flex; align-items: center; gap: 12px;
}
.hero-chip .ic { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; flex: none; color: #fff; }
.hero-chip .tx b { display: block; font-family: var(--font-display); font-size: 1.05rem; line-height: 1.15; color: var(--ink); white-space: nowrap; }
.hero-chip .tx span { font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.hero-chip.c1 { top: 18px; left: -26px; }
.hero-chip.c1 .ic { background: var(--sage); }
.hero-chip.c2 { bottom: 26px; right: -22px; }
.hero-chip.c2 .ic { background: var(--terra); }

/* ---------- Marquee ---------- */
.marquee { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 24px 0; overflow: hidden; background: var(--bg-soft); }
.marquee-track { display: flex; gap: 50px; width: max-content; animation: slide 34s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track span { font-family: var(--font-display); font-style: italic; font-size: 1.4rem; font-weight: 400; color: var(--ink-soft); display: flex; align-items: center; gap: 50px; white-space: nowrap; }
.marquee-track span::after { content: "✺"; color: var(--terra); font-style: normal; font-size: 0.9rem; }
@keyframes slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- Section header ---------- */
.sec-head { max-width: 720px; margin-bottom: 56px; }
.sec-head h1, .sec-head h2 { margin: 18px 0 0; }
.sec-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.sec-head.center .eyebrow { justify-content: center; }

/* ---------- Services ---------- */
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-bottom: 22px; }
.pillar {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  padding: 32px 30px 34px;
  overflow: hidden;
  transition: transform .35s ease, box-shadow .35s ease;
  box-shadow: var(--shadow-sm);
}
.pillar:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.pillar .pn { font-family: var(--font-display); font-style: italic; font-size: 1.1rem; color: var(--terra); }
.pillar .picon { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; margin: 18px 0 20px; color: #fff; }
.pillar:nth-child(1) .picon { background: linear-gradient(150deg, var(--terra), var(--terra-deep)); }
.pillar:nth-child(2) .picon { background: linear-gradient(150deg, var(--sage), var(--sage-deep)); }
.pillar:nth-child(3) .picon { background: linear-gradient(150deg, var(--gold), #C77F2E); }
.pillar h3 { font-size: 1.65rem; margin-bottom: 12px; }
.pillar p { color: var(--muted); font-size: 15.5px; margin: 0 0 22px; }
.pillar ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pillar ul li { font-size: 13px; color: var(--ink-soft); padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg-soft); font-weight: 500; }

.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.svc-more { margin-top: 32px; }
.work-more { display: flex; align-items: center; justify-content: center; gap: 20px; flex-wrap: wrap; margin-top: 30px; }
.work-more-hand { font-size: 1.5rem; color: var(--terra); transform: rotate(-2deg); }
.svc {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--card);
  padding: 26px;
  transition: transform .3s ease, box-shadow .3s;
  box-shadow: var(--shadow-sm);
}
.svc:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.svc .sx { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.svc .sx .dot { width: 11px; height: 11px; border-radius: 50%; background: var(--terra); flex: none; }
.svc:nth-child(3n+2) .sx .dot { background: var(--sage); }
.svc:nth-child(3n) .sx .dot { background: var(--gold); }
.svc h4 { font-size: 1.28rem; }
.svc p { margin: 0; color: var(--muted); font-size: 14.5px; }

/* ---------- Stats ---------- */
.stats-band { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--sage-soft); }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }
.stat { padding: 8px 0; }
.stat .big { font-family: var(--font-display); font-size: clamp(2.6rem, 4.7vw, 3.7rem); font-weight: 500; line-height: 1; color: var(--ink); letter-spacing: -0.02em; }
.stat .big em { font-style: italic; color: var(--terra); }
.stat .cap { margin-top: 14px; color: var(--ink-soft); font-size: 14.5px; max-width: 24ch; }

/* ---------- Process ---------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.step { position: relative; padding-top: 30px; }
.step .line { position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--line); border-radius: 2px; }
.step .line::before { content: ""; position: absolute; left: 0; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--terra); }
.step .sn { font-family: var(--font-display); font-style: italic; color: var(--terra); font-size: 1.05rem; }
.step h4 { font-size: 1.45rem; margin: 14px 0 10px; }
.step p { margin: 0; color: var(--muted); font-size: 15px; }

/* ---------- About ---------- */
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
.values { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.value { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 24px; background: var(--card); box-shadow: var(--shadow-sm); }
.value .vi { width: 46px; height: 46px; border-radius: 13px; background: var(--terra-soft); color: var(--terra-deep); display: grid; place-items: center; margin-bottom: 16px; }
.value:nth-child(2) .vi, .value:nth-child(3) .vi { background: var(--sage-soft); color: var(--sage-deep); }
.value h4 { font-size: 1.22rem; margin-bottom: 8px; }
.value p { margin: 0; color: var(--muted); font-size: 14px; }
.about-copy p { color: var(--muted); }
.about-copy .big-q { font-family: var(--font-display); font-size: clamp(1.6rem, 2.8vw, 2.3rem); color: var(--ink); line-height: 1.28; letter-spacing: -0.01em; margin: 0 0 26px; font-weight: 500; }
.about-copy .big-q b { color: var(--terra); font-weight: 500; font-style: italic; }

/* ---------- Team ---------- */
.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.member {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  padding: 28px;
  transition: transform .35s ease, box-shadow .35s;
  box-shadow: var(--shadow-sm);
}
.member:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.member .mark-box {
  width: 100%; height: 160px; border-radius: 18px;
  position: relative; overflow: hidden; margin-bottom: 22px;
  display: grid; place-items: center;
}
.member:nth-child(1) .mark-box { background: linear-gradient(150deg, #F4D9C8, var(--terra-soft)); }
.member:nth-child(2) .mark-box { background: linear-gradient(150deg, #DDE6CF, var(--sage-soft)); }
.member:nth-child(3) .mark-box { background: linear-gradient(150deg, #F6E2C0, #F2EAD8); }
.member .glyph {
  width: 88px; height: 88px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 600; font-size: 2rem; color: var(--on-terra);
  box-shadow: 0 12px 26px -12px rgba(90,58,30,0.4);
}
.member:nth-child(1) .glyph { background: linear-gradient(150deg, var(--terra), var(--terra-deep)); border-radius: 50% 50% 50% 8px; transform: rotate(-6deg); }
.member:nth-child(2) .glyph { background: linear-gradient(150deg, var(--sage), var(--sage-deep)); border-radius: 50% 50% 8px 50%; transform: rotate(6deg); }
.member:nth-child(3) .glyph { background: linear-gradient(150deg, var(--gold), #C77F2E); border-radius: 50% 8px 50% 50%; transform: rotate(-4deg); }
.member .glyph span { transform: rotate(6deg); }
.member:nth-child(2) .glyph span { transform: rotate(-6deg); }
.member .role-tag { font-family: var(--font-body); font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--terra); }
.member:nth-child(2) .role-tag { color: var(--sage-deep); }
.member:nth-child(3) .role-tag { color: #B07E2C; }
.member h4 { font-size: 1.55rem; margin: 12px 0 6px; }
.member .who { color: var(--muted); font-size: 14px; font-style: italic; font-family: var(--font-display); margin-bottom: 14px; }
.member p { color: var(--muted); font-size: 14.5px; margin: 0 0 18px; }
.member .ln { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-size: 13.5px; font-weight: 600; border: 1px solid var(--line-2); padding: 9px 15px; border-radius: 999px; transition: border-color .25s, background .25s, color .25s; }
.member .ln:hover { border-color: var(--terra); background: var(--terra-soft); color: var(--terra-deep); }

/* ---------- Testimonials ---------- */
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.quote { border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); padding: 30px; display: flex; flex-direction: column; box-shadow: var(--shadow-sm); }
.quote .stars { color: var(--gold); letter-spacing: 3px; font-size: 14px; margin-bottom: 18px; }
.quote p { font-family: var(--font-display); font-size: 1.26rem; line-height: 1.42; color: var(--ink); margin: 0 0 24px; flex: 1; }
.quote .by { display: flex; align-items: center; gap: 12px; }
.quote .by .av { width: 42px; height: 42px; border-radius: 50% 50% 50% 6px; background: linear-gradient(150deg, var(--terra), var(--terra-deep)); display: grid; place-items: center; color: var(--on-terra); font-weight: 600; font-family: var(--font-display); font-size: 16px; flex: none; }
.quote:nth-child(2) .by .av { background: linear-gradient(150deg, var(--sage), var(--sage-deep)); border-radius: 50% 50% 6px 50%; }
.quote:nth-child(3) .by .av { background: linear-gradient(150deg, var(--gold), #C77F2E); border-radius: 50% 6px 50% 50%; }
.quote .by .meta b { display: block; font-weight: 600; font-size: 14.5px; }
.quote .by .meta span { color: var(--muted); font-size: 13px; }

/* ---------- FAQ ---------- */
.faq-grid { display: grid; grid-template-columns: 0.82fr 1.18fr; gap: 56px; align-items: start; }
.faq-list { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q { width: 100%; background: transparent; border: 0; color: var(--ink); text-align: left; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 24px 0; font-family: var(--font-display); font-size: 1.3rem; font-weight: 500; }
.faq-q .ic { flex: none; width: 32px; height: 32px; border: 1px solid var(--line-2); border-radius: 50%; display: grid; place-items: center; position: relative; transition: background .25s, border-color .25s; }
.faq-q .ic::before, .faq-q .ic::after { content: ""; position: absolute; background: var(--terra); border-radius: 2px; transition: transform .3s, opacity .3s; }
.faq-q .ic::before { width: 13px; height: 2px; }
.faq-q .ic::after { width: 2px; height: 13px; }
.faq-item.open .faq-q .ic { background: var(--terra); border-color: var(--terra); }
.faq-item.open .faq-q .ic::before, .faq-item.open .faq-q .ic::after { background: var(--on-terra); }
.faq-item.open .faq-q .ic::after { transform: scaleY(0); opacity: 0; }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .4s ease; }
.faq-a p { margin: 0; padding: 0 0 26px; color: var(--muted); font-size: 15.5px; max-width: 60ch; }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.contact-card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); padding: 34px; box-shadow: var(--shadow-sm); }
.contact-card h3 { font-size: 1.7rem; margin-bottom: 10px; }
.contact-card .sub { color: var(--muted); font-size: 15px; margin: 0 0 24px; }
.cal-wrap { margin-top: 24px; }
.cal-cta { display: flex; align-items: center; gap: 28px; border: 1px solid var(--line-2); border-radius: var(--radius); background: linear-gradient(135deg, var(--sage-soft), var(--card)); padding: 34px 36px; box-shadow: var(--shadow-sm); }
.cal-cta-icon { flex: none; width: 78px; height: 78px; border-radius: 20px; background: linear-gradient(150deg, var(--sage), var(--sage-deep)); display: grid; place-items: center; color: var(--on-terra); box-shadow: 0 14px 28px -12px rgba(92,120,83,0.65); }
.cal-cta-body { flex: 1; }
.cal-cta-body h3 { font-size: 1.7rem; margin-bottom: 8px; }
.cal-cta-body .sub { margin: 0 0 20px; max-width: 60ch; }
.cal-cta-actions { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.cal-hand { font-size: 1.55rem; transform: rotate(-4deg); color: var(--sage-deep); }
.talk-list { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-direction: column; gap: 13px; }
.talk-list li { display: flex; align-items: center; gap: 11px; color: var(--ink-soft); font-size: 15px; }
.talk-list li svg { color: var(--terra); flex: none; }
@media (max-width: 600px) { .cal-cta { flex-direction: column; align-items: flex-start; } }
form .field { margin-bottom: 16px; }
form label { display: block; font-size: 13px; font-weight: 600; letter-spacing: 0.02em; color: var(--ink-soft); margin-bottom: 8px; }
form input, form select, form textarea {
  width: 100%; padding: 14px 16px;
  background: var(--bg);
  border: 1px solid var(--line-2);
  border-radius: 13px;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
form input::placeholder, form textarea::placeholder { color: var(--muted-2); }
form input:focus, form select:focus, form textarea:focus { outline: none; border-color: var(--terra); background: var(--card); box-shadow: 0 0 0 3px rgba(210,104,63,0.14); }
form textarea { resize: vertical; min-height: 110px; }
form select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%23756957' stroke-width='2'%3E%3Cpath d='M3 5l4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
form .btn { width: 100%; justify-content: center; margin-top: 6px; }
.form-note { font-size: 13px; color: var(--muted); margin-top: 14px; text-align: center; }
.form-status { display: none; margin-top: 16px; padding: 14px 16px; border-radius: 13px; font-size: 14.5px; }
.form-status.ok { display: block; background: var(--sage-soft); border: 1px solid var(--line-2); color: var(--sage-deep); }
.form-status.err { display: block; background: #F8E0D8; border: 1px solid rgba(177,78,41,0.3); color: var(--terra-deep); }
.field-error input, .field-error textarea { border-color: rgba(177,78,41,0.6); background: #FCF3F0; }
.req { color: var(--terra-deep); font-weight: 700; }
.opt { color: var(--muted); font-weight: 400; font-size: .8em; }
.form-legend { margin: 4px 0 14px; font-size: .82rem; color: var(--muted); }
.form-legend .req { margin-right: 2px; }

.contact-other { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.contact-other a { display: inline-flex; align-items: center; gap: 9px; padding: 11px 16px; border: 1px solid var(--line); border-radius: 999px; font-size: 14px; color: var(--ink-soft); transition: border-color .25s, color .25s, background .25s; }
.contact-other a:hover { border-color: var(--terra); color: var(--terra-deep); background: var(--terra-soft); }
.contact-other a svg { color: var(--terra); }

/* ---------- Footer ---------- */
.footer { border-top: 1px solid var(--line); padding: 66px 0 40px; background: var(--bg-soft); }
.footer-top { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 40px; margin-bottom: 48px; }
.footer .brand { margin-bottom: 18px; }
.footer-tag { color: var(--muted); max-width: 36ch; font-size: 15px; }
.footer h5 { font-family: var(--font-body); font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted-2); margin: 0 0 18px; }
.footer-col a { display: block; color: var(--ink-soft); padding: 6px 0; font-size: 15px; transition: color .2s; }
.footer-col a:hover { color: var(--terra); }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 28px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.footer-bottom p { margin: 0; color: var(--muted); font-size: 13.5px; }
.footer-social { display: flex; gap: 12px; }
.footer-social a { width: 42px; height: 42px; border: 1px solid var(--line-2); border-radius: 13px; display: grid; place-items: center; color: var(--ink-soft); transition: border-color .25s, color .25s, transform .25s, background .25s; }
.footer-social a:hover { border-color: var(--terra); color: var(--terra-deep); background: var(--terra-soft); transform: translateY(-2px); }

/* ---------- Selected work gallery ---------- */
.work-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 210px; gap: 18px; }
.work-slot {
  display: block; width: 100%; height: auto; align-self: stretch;
  border-radius: 18px;
  box-shadow: var(--shadow-sm);
  background: repeating-linear-gradient(135deg, var(--terra-soft) 0 20px, #F2D9C8 20px 40px);
  color: var(--terra-deep);
}
.work-slot:nth-child(2n) { background: repeating-linear-gradient(135deg, var(--sage-soft) 0 20px, #DBE3CC 20px 40px); color: var(--sage-deep); }
.work-slot:nth-child(3n) { background: repeating-linear-gradient(135deg, #F7E6C9 0 20px, #F1E7D2 20px 40px); color: #A9772A; }
.work-slot.tall { grid-row: span 2; }
.work-slot.wide { grid-column: span 3; }
@media (max-width: 980px) {
  .work-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 200px; }
  .work-slot.tall { grid-row: span 2; }
  .work-slot.wide { grid-column: span 2; }
}
@media (max-width: 600px) {
  .work-grid { grid-template-columns: 1fr; grid-auto-rows: 230px; }
  .work-slot.tall, .work-slot.wide { grid-row: auto; grid-column: auto; }
}

/* ---------- Pain points ---------- */
.pain-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.pain-card {
  display: flex; gap: 16px; align-items: flex-start;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--card); padding: 24px 26px; box-shadow: var(--shadow-sm);
  transition: transform .3s ease, box-shadow .3s;
}
.pain-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.pain-card .qm { font-family: var(--font-display); font-size: 2.6rem; line-height: 0.7; color: var(--terra); flex: none; }
.pain-card:nth-child(2n) .qm { color: var(--sage); }
.pain-card p { margin: 0; font-family: var(--font-display); font-size: 1.18rem; line-height: 1.38; color: var(--ink); }

/* ---------- CTA band ---------- */
.cta-panel {
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--terra), var(--terra-deep));
  color: var(--on-terra);
  padding: clamp(44px, 6vw, 72px) clamp(28px, 5vw, 56px);
  box-shadow: var(--shadow);
  text-align: center;
  position: relative; overflow: hidden;
}
.cta-panel::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(420px 300px at 88% -20%, rgba(255,247,241,0.18), transparent 60%);
}
.cta-panel h2 { color: var(--on-terra); position: relative; }
.cta-panel .lede { color: rgba(255,247,241,0.88); margin: 18px auto 28px; max-width: 52ch; position: relative; }
.cta-promises { display: flex; gap: 12px 30px; justify-content: center; flex-wrap: wrap; margin-bottom: 32px; position: relative; }
.cta-promise { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; font-size: 15px; }
.cta-promise svg { flex: none; opacity: 0.95; }
.btn-cream { background: var(--on-terra); color: var(--terra-deep); position: relative; box-shadow: 0 14px 30px -14px rgba(0,0,0,0.35); }
.btn-cream:hover { background: #fff; transform: translateY(-2px); box-shadow: 0 18px 36px -14px rgba(0,0,0,0.45); }

@media (max-width: 600px) {
  .pain-grid { grid-template-columns: 1fr; }
}

/* ---------- Plans / how to work together ---------- */
.plan-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: stretch; }
.plan {
  display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--card); padding: 34px 30px;
  box-shadow: var(--shadow-sm);
  transition: transform .35s ease, box-shadow .35s;
}
.plan:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.plan.feature { background: linear-gradient(180deg, var(--sage-soft), var(--card)); border-color: var(--line-2); }
.plan .badge {
  align-self: flex-start; font-size: 11.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--sage-deep); background: rgba(92,120,83,0.14); border: 1px solid var(--line-2);
  padding: 5px 11px; border-radius: 999px; margin-bottom: 16px; white-space: nowrap;
}
.plan h3 { font-size: 1.55rem; }
.plan .pdesc { color: var(--muted); font-size: 15px; margin: 10px 0 22px; }
.plan ul { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.plan li { display: flex; align-items: flex-start; gap: 11px; font-size: 14.5px; color: var(--ink-soft); }
.plan li svg { flex: none; color: var(--terra); margin-top: 3px; }
.plan.feature li svg { color: var(--sage-deep); }
.plan .price-note { margin-top: auto; padding-top: 4px; }
.plan .price-note b { display: block; font-family: var(--font-display); font-style: italic; font-size: 1.15rem; color: var(--ink); }
.plan .price-note span { font-size: 13px; color: var(--muted); }
.plan .btn { width: 100%; justify-content: center; margin-top: 22px; }
@media (max-width: 900px) { .plan-grid { grid-template-columns: 1fr; } }

/* ---------- Pricing display + currency switch ----------
   Default (no attribute) = USD. Set data-currency="inr" on <html>
   (e.g. from your IP-detection script) to show INR everywhere. */
.cur-inr { display: none; }
[data-currency="inr"] .cur-usd { display: none; }
[data-currency="inr"] .cur-inr { display: inline; }

.plan-price { margin-top: auto; display: flex; align-items: baseline; gap: 8px; padding-top: 6px; flex-wrap: wrap; }
.plan-price .amt { font-family: var(--font-display); font-size: 2.15rem; font-weight: 600; color: var(--ink); letter-spacing: -0.02em; line-height: 1; white-space: nowrap; }
.plan-price .per { font-size: 13.5px; color: var(--muted); white-space: nowrap; }

.cur-toggle { display: inline-flex; border: 1px solid var(--line-2); border-radius: 999px; padding: 4px; margin-top: 24px; background: var(--card); }
.cur-toggle button { border: 0; background: transparent; color: var(--muted); font-family: var(--font-body); font-weight: 600; font-size: 14px; padding: 8px 18px; border-radius: 999px; transition: background .2s, color .2s; }
.cur-toggle button.active { background: var(--terra); color: var(--on-terra); }

/* ---------- Plans sub-sections / add-ons / enterprise ---------- */
.plans-subhead { font-family: var(--font-display); font-size: 1.55rem; font-weight: 500; color: var(--ink); margin: 56px 0 8px; letter-spacing: -0.01em; }
.plans-subhead.first { margin-top: 4px; }
.plans-sub-note { color: var(--muted); font-size: 15px; margin: 0 0 26px; }
.addon-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.addon { display: flex; flex-direction: column; gap: 8px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card); padding: 24px; box-shadow: var(--shadow-sm); transition: transform .3s ease, box-shadow .3s; }
.addon:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.addon h4 { font-size: 1.2rem; }
.addon p { margin: 0; color: var(--muted); font-size: 14px; flex: 1; }
.addon-price { font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; color: var(--ink); margin-top: 8px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.addon-price .cur { white-space: nowrap; }
.addon-price .per { font-family: var(--font-body); font-size: 12.5px; font-weight: 400; color: var(--muted); white-space: nowrap; }
.enterprise { margin-top: 18px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; border: 1px solid var(--line-2); border-radius: var(--radius); background: linear-gradient(135deg, var(--sage-soft), var(--card)); padding: 30px 34px; }
.enterprise h3 { font-size: 1.45rem; margin-bottom: 6px; }
.enterprise p { margin: 0; color: var(--muted); font-size: 15px; max-width: 62ch; }
.enterprise .btn { flex: none; }
@media (max-width: 980px) { .addon-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .addon-grid { grid-template-columns: 1fr; } .enterprise { flex-direction: column; align-items: flex-start; } }

/* ---------- Handwriting accents ---------- */
.handwriting { font-family: "Caveat", cursive; font-weight: 600; line-height: 1.05; }
.hero-hand-wrap { margin-top: 18px; }
.hero-hand { font-size: 1.7rem; color: var(--terra); transform: rotate(-2.5deg); display: inline-block; }
.plans-hand { font-size: 1.7rem; color: var(--sage-deep); transform: rotate(-1.5deg); margin: 14px 0 0; }
.cta-hand { font-size: 1.65rem; color: rgba(255,247,241,0.92); margin-top: 16px; transform: rotate(-2.5deg); }
.scribble-word { position: relative; display: inline-block; }
.scribble { position: absolute; left: -1%; bottom: -0.16em; width: 102%; height: 0.46em; overflow: visible; pointer-events: none; }
.scribble path { fill: none; stroke: var(--terra); stroke-width: 7; stroke-linecap: round; stroke-dasharray: 360; stroke-dashoffset: 360; }
.in-view .scribble path { animation: draw 0.95s cubic-bezier(.6,.1,.3,1) forwards 0.45s; }
.scribble-light path { stroke: #F4CE93; }

/* Full company-name lockup */
.brand .wordmark { white-space: nowrap; }
.brand-sub { font-family: var(--font-body); font-weight: 600; font-size: 0.56em; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-2); margin-left: 6px; }

/* Sub-page top spacing (clears fixed nav) */
.page-top { padding-top: clamp(118px, 15vh, 176px); }

/* Hand-drawn arrows (draw themselves on reveal) */
.hand-arrow { width: 30px; height: auto; color: var(--terra); overflow: visible; flex: none; }
.hand-arrow.ha-left { width: 44px; }
.hand-arrow .ha-stem, .hand-arrow .ha-tip { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.hand-arrow .ha-stem { stroke-dasharray: 130; stroke-dashoffset: 130; }
.hand-arrow .ha-tip { stroke-dasharray: 60; stroke-dashoffset: 60; }
.in-view .hand-arrow .ha-stem { animation: draw .7s ease forwards .45s; }
.in-view .hand-arrow .ha-tip { animation: draw .35s ease forwards 1.05s; }
.ha-light { color: #F4CE93; }

/* Accent placements */
.hero-hand-wrap { display: inline-flex; align-items: flex-start; gap: 5px; margin: 16px 0 0 26px; }
.hero-hand { font-size: 1.7rem; color: var(--terra); transform: rotate(-2deg); margin-top: 20px; }
.hand-note { display: inline-flex; align-items: center; gap: 7px; }
.cta-hand-wrap { display: flex; flex-direction: column; align-items: center; gap: 0; margin-top: 12px; }
.cta-hand { font-size: 1.65rem; color: rgba(255,247,241,0.94); margin-top: 0; transform: rotate(-2deg); }

/* More accents */
.svc-hand { text-align: center; font-size: 1.6rem; color: var(--sage-deep); margin: 32px 0 0; transform: rotate(-1deg); }
.work-hand { font-size: 1.6rem; color: var(--terra); transform: rotate(-1.5deg); margin: 12px 0 0; }
.form-hand { font-size: 1.45rem; color: var(--terra); transform: rotate(-1.5deg); margin: 14px 0 0; text-align: center; }

/* Extra micro-animations */
.handwriting { transition: transform .3s ease; }
.handwriting:hover { transform: rotate(2deg) scale(1.05); }
.work-slot { transition: transform .4s cubic-bezier(.3,.8,.3,1), box-shadow .4s; }
.work-slot:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.grow-hint { display: flex; flex-direction: column; align-items: center; width: -moz-fit-content; width: fit-content; margin: 8px auto -2px; }
.grow-hint .handwriting { font-size: 1.6rem; color: var(--sage-deep); transform: rotate(-2deg); }
.grow-hint .ha-down { color: var(--sage); margin-top: 2px; }
.team-hand { font-size: 1.65rem; color: var(--terra); transform: rotate(-1.5deg); margin: 12px 0 0; }

/* MOST POPULAR pulse + CTA breathing */
@media (prefers-reduced-motion: no-preference) {
  .plan.feature .badge { animation: badgePulse 2.6s ease-in-out infinite; }
  .cta-panel .btn-cream { animation: breathe 3.4s ease-in-out infinite; }
}
@keyframes badgePulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes breathe { 0%, 100% { box-shadow: 0 14px 30px -14px rgba(0,0,0,.35); } 50% { box-shadow: 0 16px 46px -8px rgba(0,0,0,.5); } }

/* Reveal slide-in variants */
.reveal.from-left.in-view { animation: revealLeft .75s cubic-bezier(.2,.7,.2,1); }
.reveal.from-right.in-view { animation: revealRight .75s cubic-bezier(.2,.7,.2,1); }
@keyframes revealLeft { from { opacity: 0; transform: translateX(-34px); } to { opacity: 1; transform: none; } }
@keyframes revealRight { from { opacity: 0; transform: translateX(34px); } to { opacity: 1; transform: none; } }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* ---------- Scroll progress ---------- */
.scroll-prog { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: linear-gradient(90deg, var(--terra), var(--gold)); z-index: 60; transition: width .12s linear; }

/* ---------- Nav underline ---------- */
.nav-links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -5px; height: 2px; background: var(--terra); transform: scaleX(0); transform-origin: left; transition: transform .28s ease; border-radius: 2px; }
.nav-links a:hover::after, .nav-links a.active::after { transform: scaleX(1); }

/* ---------- Button shine ---------- */
.btn-primary, .btn-cream { position: relative; overflow: hidden; }
.btn-primary::after, .btn-cream::after { content: ""; position: absolute; top: 0; left: -130%; width: 55%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,0.4), transparent); transform: skewX(-18deg); transition: left .65s ease; pointer-events: none; }
.btn-primary:hover::after, .btn-cream:hover::after { left: 150%; }

/* ---------- Hover micro-interactions ---------- */
.pillar .picon, .value .vi, .cal-cta-icon { transition: transform .4s cubic-bezier(.3,.8,.3,1); }
.pillar:hover .picon { transform: translateY(-3px) scale(1.07) rotate(-4deg); }
.value:hover .vi { transform: scale(1.08) rotate(-3deg); }
.cal-cta:hover .cal-cta-icon { transform: rotate(-5deg) scale(1.05); }
.svc:hover .dot { box-shadow: 0 0 0 5px var(--terra-soft); }
.member:hover .glyph { transform: scale(1.05) rotate(-4deg); }
.member .glyph { transition: transform .4s cubic-bezier(.3,.8,.3,1); }

/* ---------- Hero chip float ---------- */
@media (prefers-reduced-motion: no-preference) {
  .hero-chip.c1 { animation: floaty 5.5s ease-in-out infinite; }
  .hero-chip.c2 { animation: floaty 6.8s ease-in-out infinite reverse; }
  .brand:hover .mark { animation: nudge .5s ease; }
}
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes nudge { 0%,100% { transform: rotate(-8deg); } 50% { transform: rotate(2deg) scale(1.08); } }

/* ---------- Reveal variants ---------- */
.reveal.zoom.in-view { animation: revealZoom .75s cubic-bezier(.2,.7,.2,1); }
@keyframes revealZoom { from { opacity: 0; transform: scale(.94) translateY(20px); } to { opacity: 1; transform: none; } }

/* ---------- Reveal animation (visible base; entrance is enhancement) ---------- */
.reveal { opacity: 1; transform: none; }
.reveal.in-view { animation: revealIn .7s cubic-bezier(.2,.7,.2,1); }
.reveal.in-view.d1 { animation-delay: .08s; }
.reveal.in-view.d2 { animation-delay: .16s; }
.reveal.in-view.d3 { animation-delay: .24s; }
@keyframes revealIn {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal.in-view { animation: none; }
  .marquee-track { animation: none; }
  .scribble path { stroke-dashoffset: 0; }
  .hand-arrow .ha-stem, .hand-arrow .ha-tip { stroke-dashoffset: 0; }
  .btn-primary::after, .btn-cream::after { display: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .nav-links { display: none; }
  .nav-cta .btn-ghost { display: none; }
  .nav-toggle { display: flex; }
  .hero-grid { grid-template-columns: 1fr; gap: 52px; }
  .hero-visual { max-width: 460px; margin: 0 auto; }
  .pillars, .svc-grid, .team-grid, .quotes { grid-template-columns: 1fr 1fr; }
  .stats { grid-template-columns: 1fr 1fr; gap: 38px 30px; }
  .steps { grid-template-columns: 1fr 1fr; gap: 34px 22px; }
  .about-grid, .faq-grid, .contact-grid { grid-template-columns: 1fr; gap: 40px; }
  .footer-top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  body { font-size: 17px; }
  .wrap { padding: 0 20px; }
  .pillars, .svc-grid, .team-grid, .quotes, .stats, .steps, .values, .form-row { grid-template-columns: 1fr; }
  .hero-chip.c1 { left: 8px; }
  .hero-chip.c2 { right: 8px; }
  .footer-top { grid-template-columns: 1fr; gap: 32px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* ===========================================================
   COLORFUL & ALIVE — supplemental layer
   Keeps the warm soul; adds teal + raspberry pops, livelier
   gradients, multi-hue tags, and a touch more motion.
   =========================================================== */

/* Hero headline accent → warm gradient sweep */
.h-hero .terra {
  background: linear-gradient(96deg, var(--berry) 0%, var(--terra) 46%, var(--gold) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--terra);
}

/* Eyebrow dot cycles a little — feels less uniform */
.eyebrow::before { background: var(--terra); box-shadow: 0 0 0 4px var(--terra-soft); }

/* ---- Service pillars: colored crown + tinted wash ---- */
.pillar::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 5px;
  background: linear-gradient(90deg, var(--terra), var(--gold));
}
.pillar:nth-child(1) { background: linear-gradient(180deg, var(--terra-soft) -10%, var(--card) 34%); }
.pillar:nth-child(1)::before { background: linear-gradient(90deg, var(--terra), var(--gold)); }
.pillar:nth-child(2) { background: linear-gradient(180deg, var(--sage-soft) -10%, var(--card) 34%); }
.pillar:nth-child(2)::before { background: linear-gradient(90deg, var(--sage), var(--ocean)); }
.pillar:nth-child(3) { background: linear-gradient(180deg, var(--ocean-soft) -10%, var(--card) 34%); }
.pillar:nth-child(3)::before { background: linear-gradient(90deg, var(--ocean), var(--berry)); }

/* Service tag pills cycle through the full palette */
.pillar ul li:nth-child(5n+1) { background: var(--terra-soft); color: var(--terra-deep); border-color: transparent; }
.pillar ul li:nth-child(5n+2) { background: var(--sage-soft);  color: var(--sage-deep);  border-color: transparent; }
.pillar ul li:nth-child(5n+3) { background: var(--ocean-soft); color: var(--ocean-deep); border-color: transparent; }
.pillar ul li:nth-child(5n+4) { background: var(--gold-soft);  color: #9A6B16;           border-color: transparent; }
.pillar ul li:nth-child(5n+5) { background: var(--berry-soft); color: var(--berry-deep); border-color: transparent; }

/* ---- Pain cards: rotating accent quotes + colored left edge ---- */
.pain-card { border-left: 4px solid var(--terra); }
.pain-card:nth-child(4n+2) { border-left-color: var(--sage); }
.pain-card:nth-child(4n+2) .qm { color: var(--sage); }
.pain-card:nth-child(4n+3) { border-left-color: var(--ocean); }
.pain-card:nth-child(4n+3) .qm { color: var(--ocean); }
.pain-card:nth-child(4n+4) { border-left-color: var(--berry); }
.pain-card:nth-child(4n+4) .qm { color: var(--berry); }

/* ---- Marquee: tinted band + rotating star colors ---- */
.marquee { background: linear-gradient(90deg, var(--terra-soft), var(--sage-soft) 50%, var(--ocean-soft)); }
.marquee-track span:nth-child(4n+1)::after { color: var(--terra); }
.marquee-track span:nth-child(4n+2)::after { color: var(--sage); }
.marquee-track span:nth-child(4n+3)::after { color: var(--ocean); }
.marquee-track span:nth-child(4n+4)::after { color: var(--berry); }

/* ---- Hero chips get a livelier presence ---- */
.hero-chip.c1 .ic { background: linear-gradient(150deg, var(--sage), var(--ocean)); }
.hero-chip.c2 .ic { background: linear-gradient(150deg, var(--terra), var(--berry)); }

/* ---- Stats: number gradients ---- */
.stat:nth-child(1) .big em { color: var(--terra); }
.stat:nth-child(2) .big em { color: var(--sage-deep); }
.stat:nth-child(3) .big em { color: var(--ocean-deep); }
.stat:nth-child(4) .big em { color: var(--berry-deep); }

/* ---- Process steps: colored node dots ---- */
.step:nth-child(2) .line::before { background: var(--sage); }
.step:nth-child(3) .line::before { background: var(--ocean); }
.step:nth-child(4) .line::before { background: var(--berry); }
.step:nth-child(2) .sn { color: var(--sage-deep); }
.step:nth-child(3) .sn { color: var(--ocean-deep); }
.step:nth-child(4) .sn { color: var(--berry-deep); }

/* ---- Value cards: rotate icon tints ---- */
.value:nth-child(1) .vi { background: var(--terra-soft); color: var(--terra-deep); }
.value:nth-child(2) .vi { background: var(--ocean-soft); color: var(--ocean-deep); }
.value:nth-child(3) .vi { background: var(--berry-soft); color: var(--berry-deep); }
.value:nth-child(4) .vi { background: var(--sage-soft);  color: var(--sage-deep); }

/* ---- Testimonial avatars cycle hues ---- */
.quote:nth-child(1) .by .av { background: linear-gradient(150deg, var(--terra), var(--berry)); }
.quote:nth-child(3) .by .av { background: linear-gradient(150deg, var(--ocean), var(--sage)); }

/* ---- CTA panel: animated multi-hue warm gradient ---- */
.cta-panel {
  background: linear-gradient(120deg, var(--berry-deep) 0%, var(--terra) 52%, var(--terra-deep) 100%);
  background-size: 180% 180%;
  animation: ctaShift 14s ease-in-out infinite alternate;
}
@keyframes ctaShift {
  from { background-position: 0% 50%; }
  to   { background-position: 100% 50%; }
}
@media (prefers-reduced-motion: reduce) { .cta-panel { animation: none; } }

/* ---- Footer social + scroll progress get the fuller spectrum ---- */
.scroll-prog { background: linear-gradient(90deg, var(--berry), var(--terra) 40%, var(--gold) 70%, var(--sage)); }

/* ---- Pricing: feature plan glow + colored badges ---- */
.plan.feature { background: linear-gradient(180deg, var(--ocean-soft) -8%, var(--card) 30%); }
.plan:nth-child(1) .badge { color: var(--terra-deep); background: var(--terra-soft); }
.plan:nth-child(3) .badge { color: var(--berry-deep); background: var(--berry-soft); }

/* ---- Selected-work placeholder slots: spread the palette ---- */
.work-slot:nth-child(4n) { background: repeating-linear-gradient(135deg, var(--ocean-soft) 0 20px, #BFDFE4 20px 40px); color: var(--ocean-deep); }
.work-slot:nth-child(5n) { background: repeating-linear-gradient(135deg, var(--berry-soft) 0 20px, #F4C5D2 20px 40px); color: var(--berry-deep); }

/* ===========================================================
   LIVELY LAYER — site-wide warmth & color, no highlights
   =========================================================== */

/* Primary buttons → warm gradient with depth */
.btn-primary {
  background: linear-gradient(135deg, var(--gold) -28%, var(--terra) 42%, var(--berry) 130%);
  box-shadow: 0 14px 30px -14px rgba(210,104,63,0.65);
}
.btn-primary:hover {
  background: linear-gradient(135deg, #E2962A -28%, var(--terra-deep) 46%, var(--berry-deep) 132%);
  transform: translateY(-2px);
  box-shadow: 0 18px 38px -14px rgba(210,104,63,0.72);
}

/* Eyebrow dot → little gradient bead */
.eyebrow::before {
  background: linear-gradient(135deg, var(--terra), var(--gold));
  box-shadow: 0 0 0 4px var(--terra-soft);
}

/* Section headings get a short colored flourish underneath */
.sec-head h2::after,
.sec-head h1::after {
  content: "";
  display: block;
  width: 64px; height: 4px; margin-top: 22px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--terra), var(--gold) 55%, var(--berry));
}
.sec-head.center h2::after, .sec-head.center h1::after { margin-left: auto; margin-right: auto; }

/* Nav active/hover underline → gradient */
.nav-links a::after { background: linear-gradient(90deg, var(--terra), var(--gold)); }

/* Footer gets a colorful top edge + lively column heads */
.footer { border-top: 0; position: relative; }
.footer::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--berry), var(--terra) 32%, var(--gold) 62%, var(--sage));
}

/* Warm, colored lift on cards (varies by accent family) */
.pillar, .svc, .member, .quote, .value, .plan, .addon, .pain-card, .contact-card {
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.svc:hover, .member:hover, .quote:hover, .plan:hover, .addon:hover, .contact-card:hover {
  box-shadow: 0 24px 46px -24px rgba(210,104,63,0.40);
  border-color: var(--terra-soft);
}
.value:hover { box-shadow: 0 20px 40px -22px rgba(46,143,166,0.38); border-color: var(--ocean-soft); }
.pain-card:hover { box-shadow: 0 20px 40px -22px rgba(200,75,114,0.34); }

/* Testimonial stars + FAQ accents a touch livelier */
.quote .stars { color: var(--gold); text-shadow: 0 1px 0 rgba(218,154,64,0.25); }

/* Marquee gets a soft animated saturation pulse for life */
@media (prefers-reduced-motion: no-preference) {
  .marquee { background-size: 200% 100%; animation: marqueeHue 18s ease-in-out infinite alternate; }
}
@keyframes marqueeHue { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }

/* Brand mark: warmer two-tone bead */
.brand .mark { background: linear-gradient(150deg, var(--sage), var(--ocean-deep)); }



/* ============================================================
   DESIGN POLISH v2 — header two-tone, section rhythm, mobile
   ============================================================ */

/* 1) Header: uniform background at idle (was transparent over the
   page's color washes → looked two-toned until scroll). */
.nav {
  background: rgba(251, 245, 236, 0.55);
  backdrop-filter: blur(10px) saturate(1.05);
  -webkit-backdrop-filter: blur(10px) saturate(1.05);
}
.nav.scrolled {
  background: rgba(251, 245, 236, 0.88);
  backdrop-filter: blur(16px) saturate(1.1);
  -webkit-backdrop-filter: blur(16px) saturate(1.1);
}

/* 2) Tighter vertical rhythm — removes dead air between sections */
.section-pad { padding: clamp(60px, 7vw, 104px) 0; }

/* 3) No horizontal wiggle anywhere */
html, body { overflow-x: clip; }

/* 4) Mobile: header fit + fixed-bar clearance */
@media (max-width: 700px) {
  .nav-cta .btn-primary { display: none; }
  .nav-inner { gap: 12px; }
  body { padding-bottom: 96px; }
  .section-pad { padding: 52px 0; }
}
@media (max-width: 420px) {
  .brand-sub { display: none; }
  .nav-inner { gap: 10px; }
}

/* ── Audit fixes: audience strip, privacy links, reduced motion ── */
.hero-aud { margin-top: 18px; font-size: .92rem; color: var(--muted); letter-spacing: .01em; }
.form-privacy { margin-top: 10px; font-size: .85rem; color: var(--muted); }
.form-privacy a, .footer-privacy { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
}


/* ---------- Secondary CTA link on colored CTA bands (audit 1.3) ---------- */
.cta-second-link { display: inline-block; margin-top: 16px; color: #fff; opacity: .92;
  font-family: var(--font-body); font-weight: 600; font-size: .96rem;
  text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255,255,255,.5); }
.cta-second-link:hover { opacity: 1; text-decoration-color: #fff; }


/* ---------- Plan finder (audit 12 — which plan is right for me) ---------- */
.plan-finder { background: #fff; border: 1px solid var(--line); border-radius: 18px;
  padding: 34px 34px 30px; margin: 6px 0 44px; box-shadow: 0 18px 44px -30px rgba(0,0,0,.35); }
.pf-head .eyebrow { color: var(--terra-deep); }
.pf-title { font-family: var(--font-display); font-weight: 500; font-size: 1.72rem; margin: 8px 0 0; line-height: 1.15; }
.pf-body { margin-top: 24px; display: grid; gap: 22px; }
.pf-qlabel { display: flex; align-items: center; gap: 12px; font-weight: 600; font-size: 1.02rem; margin: 0 0 12px; }
.pf-step { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; background: var(--sage); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-size: .85rem; font-weight: 700; }
.pf-opts { display: flex; flex-wrap: wrap; gap: 10px; }
.pf-opts button { appearance: none; cursor: pointer; border: 1.5px solid var(--line); background: var(--bg-soft);
  color: var(--ink); font-family: var(--font-body); font-size: .95rem; font-weight: 500;
  padding: 10px 18px; border-radius: 999px; transition: background .18s ease, color .18s ease, border-color .18s ease; }
.pf-opts button:hover { border-color: var(--terra); color: var(--terra); }
.pf-opts button.sel { background: var(--terra); border-color: var(--terra); color: #fff; }
.pf-result { margin-top: 26px; border-top: 1px solid var(--line); padding-top: 24px; text-align: center; }
.pf-result-label { color: var(--muted); font-size: .95rem; margin: 0; }
.pf-plan { font-family: var(--font-display); font-style: italic; color: var(--terra); font-size: 2.2rem; font-weight: 500; margin: 4px 0 8px; }
.pf-why { color: var(--ink-soft); max-width: 48ch; margin: 0 auto 18px; }
.pf-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.pf-reset { display: inline-block; margin-top: 16px; background: none; border: none; cursor: pointer;
  color: var(--muted); font-family: var(--font-body); font-size: .88rem; text-decoration: underline; text-underline-offset: 3px; }
.pf-reset:hover { color: var(--terra); }
.plan.plan-rec { outline: 2.5px solid var(--terra); outline-offset: 3px; }
@media (max-width: 560px) { .pf-opts button { flex: 1 1 100%; } .plan-finder { padding: 26px 22px; } }

/* ---- Contact: inline Calendly + ladder framing ---- */
.cal-head { margin-bottom: 18px; }
.cal-title { font-family: var(--font-display); font-weight: 500; font-size: 1.5rem; margin: 8px 0 6px; }
.cal-head .sub { color: var(--muted); }
.cal-hand-inline { font-family: "Caveat", cursive; font-weight: 600; font-size: 1.15rem; color: var(--sage-deep); white-space: nowrap; }
.calendly-inline-widget { border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--card); box-shadow: var(--shadow-sm); }
@media (max-width: 700px){ .calendly-inline-widget { height: 620px !important; } }

/* ---- Email capture band (nurture path) ---- */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }
.subscribe-band { background: var(--sage-deep); color: #fff; }
.subscribe-inner { display:grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items:center; padding: clamp(44px,6vw,72px) clamp(20px,4vw,28px); }
.subscribe-band .eyebrow { color: var(--gold-soft); }
.subscribe-band .eyebrow::before { background: var(--gold); box-shadow: 0 0 0 4px rgba(233,162,47,.25); }
.subscribe-h { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.5rem,3vw,2.05rem); line-height:1.12; margin: 10px 0 0; }
.subscribe-sub { color: rgba(255,255,255,.82); margin-top: 12px; max-width: 520px; }
.subscribe-row { display:flex; gap:10px; flex-wrap:wrap; align-items:stretch; }
.subscribe-form input[type=email] { flex:1 1 240px; width:auto; min-width:0; padding: 14px 16px; border-radius: 12px; border:1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.10); color:#fff; font-size:1rem; }
.subscribe-form input[type=email]::placeholder { color: rgba(255,255,255,.6); }
.subscribe-form input[type=email]:focus { outline:2px solid var(--gold); outline-offset:2px; background: rgba(255,255,255,.16); }
.subscribe-form .btn-primary { white-space:nowrap; flex:0 0 auto; width:auto; }
.subscribe-status { margin-top:10px; font-size:.9rem; min-height:1.1em; }
.subscribe-status.ok { color: var(--sage-soft); }
.subscribe-status.err { color: #ffd9c9; }
@media (max-width: 760px){ .subscribe-inner { grid-template-columns:1fr; gap:22px; } .subscribe-row { flex-direction:column; } .subscribe-form input[type=email] { width:100%; flex:1 1 auto; } .subscribe-form .btn-primary { width:100%; justify-content:center; } }

/* ---- Spoke (service/industry) hero: two columns so the hero no longer
   leaves a large empty right side. Text left, a compact value card right.
   Stacks to one column on small screens. ---- */
.spoke-hero { display: grid; grid-template-columns: minmax(0, 1fr) 332px; gap: 52px; align-items: center; margin-bottom: 48px; }
.spoke-hero .sec-head { max-width: none; margin-bottom: 0; }
.spoke-aside { align-self: center; }
.spoke-card { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 26px 26px 22px; box-shadow: 0 26px 60px -38px rgba(74,50,28,0.5); }
.spoke-card-label { font-family: var(--font-body); font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--terra-deep); margin: 0 0 16px; }
.spoke-card-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 13px; }
.spoke-card-list li { display: flex; align-items: flex-start; gap: 11px; font-size: 15.5px; font-weight: 500; color: var(--ink); line-height: 1.4; }
.spoke-card-list svg { color: var(--sage); flex: none; margin-top: 1px; }
.spoke-card-foot { margin: 18px 0 0; padding-top: 15px; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--muted); }
@media (max-width: 900px) {
  .spoke-hero { grid-template-columns: 1fr; gap: 30px; }
  .spoke-aside { max-width: 440px; }
}

/* ---- Hub & spoke landing pages: card-style process steps ----
   Scoped to .steps-cards so they don't collide with the 4-step timeline
   (.steps with .sn / .line) used on the services hub. 3 across on desktop,
   stacking to one column on small screens. */
.steps-cards { grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: none; }
.steps-cards .step { display: flex; gap: 18px; align-items: flex-start; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 20px 22px; }
.steps-cards .step-n { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; background: var(--sage); color: #fff; display: grid; place-items: center; font-weight: 700; font-family: var(--font-display); }
.steps-cards .step h3 { font-size: 1.12rem; margin-bottom: 4px; }
.steps-cards .step p { color: var(--ink-soft); }
@media (max-width: 820px) { .steps-cards { grid-template-columns: 1fr; } }
.ind-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin-top: 38px; }
.ind-card { display: block; background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 28px 26px; text-decoration: none; color: var(--ink); transition: transform .25s, box-shadow .25s, border-color .25s; box-shadow: var(--shadow-sm); }
.ind-card:hover { transform: translateY(-4px); border-color: var(--terra); box-shadow: var(--shadow); }
.ind-card h3 { font-family: var(--font-display); font-weight: 500; font-size: 1.4rem; margin-bottom: 10px; }
.ind-card p { color: var(--ink-soft); margin-bottom: 16px; }
.ind-go { color: var(--terra); font-weight: 600; font-size: .95rem; }
.svc-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin-top: 32px; }
.svc-link { display: flex; align-items: center; justify-content: space-between; gap: 14px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 18px 22px; text-decoration: none; color: var(--ink); font-weight: 600; font-size: 1.08rem; transition: border-color .2s, transform .2s; }
.svc-link:hover { border-color: var(--terra); transform: translateX(3px); }
.rel-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-top: 30px; }
.rel-link { display: block; background: var(--bg-soft); border: 1px solid var(--line); border-radius: 12px; padding: 16px 20px; text-decoration: none; color: var(--ink); font-weight: 600; transition: border-color .2s, background .2s; }
.rel-link:hover { border-color: var(--terra); background: var(--card); }
.rel-link span { color: var(--terra); }
@media (max-width: 760px){ .step { padding: 16px 16px; } }

/* ---- Interim proof bar (honest) + testimonials-ready ---- */
.proofbar { background: var(--sage-deep); color: #fff; padding: 16px 0; }
.proofbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.proofbar-items { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.proof-item { display: inline-flex; align-items: center; gap: 8px; font-size: .9rem; font-weight: 500; color: rgba(255,255,255,.92); }
.proof-item svg { color: var(--gold); flex: 0 0 auto; }
.proof-ig { display: inline-flex; align-items: center; gap: 7px; color: #fff; font-weight: 600; font-size: .9rem; text-decoration: none; white-space: nowrap; border-bottom: 1px solid rgba(255,255,255,.4); padding-bottom: 2px; }
.proof-ig:hover { border-color: #fff; }
.quote-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin-top: 36px; }
.quote { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 28px 26px; box-shadow: var(--shadow-sm); margin: 0; }
.quote blockquote { font-family: var(--font-display); font-size: 1.2rem; line-height: 1.45; color: var(--ink); margin: 0 0 16px; }
.quote figcaption { color: var(--muted); font-weight: 600; font-size: .92rem; }
@media (max-width: 760px){ .proofbar-inner { justify-content: flex-start; } }

/* ---- Blog ---- */
.blog-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin-top: 36px; }
.blog-card { display: block; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 26px 24px; text-decoration: none; color: var(--ink); transition: transform .25s, box-shadow .25s, border-color .25s; box-shadow: var(--shadow-sm); }
.blog-card:hover { transform: translateY(-4px); border-color: var(--terra); box-shadow: var(--shadow); }
.blog-kick { display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--terra-deep); margin-bottom: 12px; }
.blog-card h3 { font-family: var(--font-display); font-weight: 500; font-size: 1.32rem; line-height: 1.2; margin-bottom: 10px; }
.blog-card p { color: var(--ink-soft); margin-bottom: 16px; font-size: .98rem; }
.blog-readmore { color: var(--terra); font-weight: 600; font-size: .9rem; }
.home-blog { padding-top: 0; }
/* post */
.blog-post .blog-back { color: var(--muted); font-weight: 600; text-decoration: none; font-size: .92rem; }
.blog-post .blog-back:hover { color: var(--terra); }
.blog-meta { color: var(--muted); font-size: .92rem; margin-top: 14px; }
.prose { margin-top: 30px; }
.prose h2 { font-family: var(--font-display); font-weight: 500; font-size: 1.55rem; margin: 38px 0 12px; line-height: 1.2; }
.prose p { color: var(--ink-soft); margin-bottom: 18px; font-size: 1.06rem; line-height: 1.75; }
.prose p b { color: var(--ink); }
.prose a { color: var(--terra); text-decoration: underline; text-underline-offset: 3px; }
.blog-cta { margin-top: 44px; background: var(--bg-soft); border: 1px solid var(--line); border-radius: 18px; padding: 30px 30px; }
.blog-cta h3 { font-family: var(--font-display); font-weight: 500; font-size: 1.4rem; margin-bottom: 8px; }
.blog-cta p { color: var(--ink-soft); }
.blog-author { display: flex; gap: 16px; align-items: center; margin-top: 36px; padding-top: 26px; border-top: 1px solid var(--line); color: var(--ink-soft); }
.blog-author .ba-mark { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 50%; background: var(--sage); color: #fff; display: grid; place-items: center; font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; }
.blog-author b { color: var(--ink); }
.blog-author .ba-role { color: var(--muted); font-size: .9rem; }
@media (max-width: 980px){ .nav-links { gap: 18px; } }

/* ---- Founding 5 offer ---- */
.founding-card { background: var(--sage-deep); color: #fff; border-radius: 22px; padding: clamp(30px,5vw,52px); box-shadow: var(--shadow); }
.founding-card .h-sec { color: #fff; }
.founding-card .lede { color: rgba(255,255,255,.86); }
.founding-badge { display: inline-flex; align-items: center; gap: 9px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25); color: #fff; font-size: .82rem; font-weight: 700; letter-spacing: .04em; padding: 7px 15px; border-radius: 999px; }
.founding-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px rgba(233,162,47,.3); }
.founding-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-top: 34px; }
.founding-col h3 { font-family: var(--font-display); font-weight: 500; font-size: 1.25rem; margin-bottom: 14px; color: var(--gold-soft); }
.founding-list { list-style: none; padding: 0; display: grid; gap: 12px; }
.founding-list li { position: relative; padding-left: 28px; color: rgba(255,255,255,.92); line-height: 1.5; }
.founding-list li::before { content: ""; position: absolute; left: 0; top: 6px; width: 16px; height: 16px; border-radius: 50%; background: var(--gold); }
.founding-list li::after { content: ""; position: absolute; left: 5px; top: 10px; width: 6px; height: 3px; border-left: 2px solid var(--sage-deep); border-bottom: 2px solid var(--sage-deep); transform: rotate(-45deg); }
.founding-cta { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 34px; }
.founding-note { color: rgba(255,255,255,.72); font-size: .9rem; }
@media (max-width: 700px){ .founding-grid { grid-template-columns: 1fr; gap: 22px; } }

/* ---- Case study metrics ---- */
.case-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 30px; }
.case-metric { background: var(--sage-soft); border: 1px solid rgba(62,98,52,.18); border-radius: 14px; padding: 22px 18px; text-align: center; }
.case-metric b { display: block; font-family: var(--font-display); font-size: 2rem; color: var(--sage-deep); line-height: 1; }
.case-metric span { display: block; margin-top: 8px; font-size: .9rem; color: var(--ink-soft); }
@media (max-width: 600px){ .case-metrics { grid-template-columns: 1fr; } }

/* ---- Certifications + teardown video (active once uncommented) ---- */
.cert-bar { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; margin-top: 30px; }
.cert-badge { height: 96px; width: auto; }
.video-wrap { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-sm); margin-top: 30px; background: var(--bg-soft); }
.video-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---- Lead magnet capture ---- */
.magnet-card { display: flex; gap: 24px; background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: clamp(26px,4vw,40px); box-shadow: var(--shadow-sm); }
.magnet-icon { flex: 0 0 auto; width: 56px; height: 56px; border-radius: 14px; background: var(--sage-soft); color: var(--sage-deep); display: grid; place-items: center; }
.magnet-row { display: flex; gap: 10px; margin-top: 18px; }
.magnet-form input[type=email] { flex: 1 1 240px; width: auto; min-width: 0; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg-soft); font-size: 1rem; color: var(--ink); }
.magnet-form input[type=email]:focus { outline: 2px solid var(--terra); outline-offset: 2px; }
.magnet-form .btn-primary { white-space: nowrap; flex: 0 0 auto; width: auto; }
.magnet-fine { margin-top: 12px; font-size: .85rem; color: var(--muted); }
@media (max-width: 680px){ .magnet-card { flex-direction: column; gap: 18px; } .magnet-row { flex-direction: column; } .magnet-form input[type=email] { width: 100%; flex: 1 1 auto; } .magnet-form .btn-primary { width: 100%; justify-content: center; } }

/* ---- Client logo bar (active once uncommented) ---- */
.logo-bar { padding: 30px 0; border-bottom: 1px solid var(--line); background: var(--bg-soft); }
.logo-bar-label { text-align: center; font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 16px; }
.logo-bar-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 34px; }
.logo-bar-row img { height: 34px; width: auto; opacity: .7; filter: grayscale(1); transition: opacity .2s, filter .2s; }
.logo-bar-row img:hover { opacity: 1; filter: none; }

/* ===========================================================
   LIVELIER — tasteful color + life (global, applies to all pages)
   Builds on the warm base: more living color in the canvas,
   richer component accents, and gentle section rhythm. Low
   saturation, harmonious with terra / sage / gold / teal / berry.
   =========================================================== */

/* ---- Living ambient mesh: more hue variety, soft + slow ---- */
body::before {
  background:
    radial-gradient(700px 520px at 86% -6%, rgba(233,162,47,0.30), transparent 60%),
    radial-gradient(640px 600px at -4% 6%, rgba(46,143,166,0.20), transparent 58%),
    radial-gradient(620px 560px at 102% 56%, rgba(94,138,78,0.22), transparent 58%),
    radial-gradient(560px 520px at 2% 100%, rgba(200,75,114,0.17), transparent 58%),
    radial-gradient(560px 520px at 52% 44%, rgba(213,95,46,0.07), transparent 64%);
}
/* second, counter-drifting wash for depth */
body::after {
  content: ""; position: fixed; inset: -12%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(560px 440px at 12% 32%, rgba(94,138,78,0.10), transparent 62%),
    radial-gradient(600px 460px at 90% 80%, rgba(233,162,47,0.12), transparent 62%),
    radial-gradient(520px 420px at 70% 8%, rgba(200,75,114,0.08), transparent 62%);
  animation: washDrift2 34s ease-in-out infinite alternate;
}
@keyframes washDrift2 {
  from { transform: translate3d(0, 0, 0) scale(1.05); }
  to   { transform: translate3d(1.8%, 2.6%, 0) scale(1); }
}
@media (prefers-reduced-motion: reduce) { body::after { animation: none; } }

/* ---- Eyebrow → soft tinted chip: a color pop on every section label ---- */
.eyebrow {
  background: linear-gradient(90deg, rgba(250,219,200,0.70), rgba(251,231,190,0.42));
  border: 1px solid rgba(213,95,46,0.18);
  padding: 5px 14px 5px 12px;
  border-radius: 999px;
}
.subscribe-band .eyebrow { background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.22); }

/* ---- Section rhythm: soft tinted bands (applied in homepage markup) ---- */
.band { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.band-warm { background:
    linear-gradient(180deg, rgba(250,222,205,0.55), rgba(251,238,222,0.34)); }
.band-mint { background:
    linear-gradient(180deg, rgba(220,236,203,0.55), rgba(206,232,236,0.30)); }
.home-blog.band-mint { padding-top: clamp(64px, 8vw, 120px); }

/* ---- Hero: a soft color halo behind the photo composition ---- */
.hero-visual { z-index: 1; }
.hero-visual::before {
  content: ""; position: absolute; inset: -14% -12%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(58% 58% at 72% 26%, rgba(94,138,78,0.26), transparent 70%),
    radial-gradient(56% 56% at 26% 82%, rgba(213,95,46,0.22), transparent 70%),
    radial-gradient(46% 46% at 88% 78%, rgba(233,162,47,0.20), transparent 72%);
  filter: blur(6px);
}

/* ---- Cards: livelier lift + a hue-cycling glow on hover ---- */
.blog-card, .ind-card, .svc, .addon, .value, .step, .pain-card, .member, .quote, .pillar {
  transition: transform .35s cubic-bezier(.3,.8,.3,1), box-shadow .35s ease, border-color .35s ease;
}
/* colored top-accent that wipes in on hover (cards with a clear top edge) */
.blog-card, .ind-card { position: relative; overflow: hidden; }
.blog-card::before, .ind-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--terra), var(--gold));
  transform: scaleX(0); transform-origin: left; transition: transform .4s cubic-bezier(.3,.8,.3,1);
}
.blog-card:hover::before, .ind-card:hover::before { transform: scaleX(1); }

/* hue-cycle the hover glow + accent across grid children */
.blog-grid .blog-card:hover, .ind-grid .ind-card:hover,
.svc-grid .svc:hover {
  box-shadow: 0 26px 50px -26px rgba(213,95,46,0.42); border-color: var(--terra);
}
.blog-grid .blog-card:nth-child(3n+2):hover, .ind-grid .ind-card:nth-child(3n+2):hover,
.svc-grid .svc:nth-child(3n+2):hover {
  box-shadow: 0 26px 50px -26px rgba(94,138,78,0.42); border-color: var(--sage);
}
.blog-grid .blog-card:nth-child(3n+3):hover, .ind-grid .ind-card:nth-child(3n+3):hover,
.svc-grid .svc:nth-child(3n+3):hover {
  box-shadow: 0 26px 50px -26px rgba(46,143,166,0.42); border-color: var(--ocean);
}
.blog-card:nth-child(3n+2)::before, .ind-card:nth-child(3n+2)::before { background: linear-gradient(90deg, var(--sage), var(--ocean)); }
.blog-card:nth-child(3n+3)::before, .ind-card:nth-child(3n+3)::before { background: linear-gradient(90deg, var(--ocean), var(--berry)); }

/* blog kicker + read-more pick up the card's hue family for warmth */
.ind-card:hover .ind-go, .blog-card:hover .blog-readmore { color: var(--terra-deep); }

/* ---- Nav: a faint colored underline once scrolled ----
   NOTE: keep this `fixed` — the nav must stay pinned on scroll. It was
   previously `relative` (to anchor the ::after underline), which broke the
   sticky header. A fixed element is already a containing block for ::after. */
.nav.scrolled { position: fixed; }
.nav.scrolled::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: linear-gradient(90deg, var(--terra), var(--gold) 38%, var(--sage) 72%, var(--ocean));
  opacity: 0.55;
}

/* ---- Footer: a thin full-spectrum cap rule ---- */
.footer { position: relative; }
.footer::before {
  content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--terra), var(--gold) 28%, var(--sage) 56%, var(--ocean) 80%, var(--berry));
}

/* ---- Marquee: a touch livelier on the warm band ---- */
.marquee-track span { color: var(--ink-soft); }

/* ---- Plan finder recommendation + feature card: warmer glow ---- */
.plan.feature { box-shadow: 0 30px 60px -34px rgba(46,143,166,0.40); }

/* ---- Reduced-motion safety for the new halo blur (perf on low-end) ---- */
@media (prefers-reduced-motion: reduce) {
  .hero-visual::before { filter: none; }
}

/* ===========================================================
   LIVELIER v2 — polish + a little more colour, still tasteful
   =========================================================== */

/* FIX: newsletter band crushed the email field at tablet widths —
   stack copy above the form earlier so the input keeps full width. */
@media (max-width: 980px) {
  .subscribe-inner { grid-template-columns: 1fr; gap: 24px; }
}

/* Blog posts: a small editorial colour bar above each heading (cycles hue).
   Adds life to long-form without touching readability. */
.prose h2 { position: relative; }
.prose h2::before {
  content: ""; display: block; width: 44px; height: 3px; border-radius: 3px;
  margin-bottom: 16px;
  background: linear-gradient(90deg, var(--terra), var(--gold));
}
.prose h2:nth-of-type(3n+2)::before { background: linear-gradient(90deg, var(--sage), var(--ocean)); }
.prose h2:nth-of-type(3n+3)::before { background: linear-gradient(90deg, var(--ocean), var(--berry)); }
.prose a { text-decoration-color: rgba(213,95,46,0.4); transition: text-decoration-color .2s, color .2s; }
.prose a:hover { text-decoration-color: var(--terra); }

/* Warm the end-of-content callouts so they don't read as flat grey */
.blog-cta { background: linear-gradient(135deg, var(--sage-soft), var(--card)); border-color: var(--line-2); }
.magnet-card { background: linear-gradient(135deg, var(--gold-soft), var(--card)); }

/* Section emphasis words (the scribble + accent spans) share a warm tint */
.h-sec .scribble-word, .h-hero .scribble-word { color: var(--terra-deep); }

/* Lift the hue on related/inline link chips */
.rel-link:hover, .svc-link:hover { box-shadow: 0 16px 30px -22px rgba(213,95,46,0.45); }

/* FAQ: open question glows warm so the active item reads clearly */
.faq-item.open .faq-q { color: var(--terra-deep); }

/* Process step numbers + nodes get a touch more presence */
.step .step-n { box-shadow: 0 8px 18px -10px rgba(94,138,78,0.6); }

/* Selected-work tiles: gentle colour-cycling on hover already exists; add a
   soft saturate so user photos feel a touch more vivid on hover */
.work-slot:hover { filter: saturate(1.06); }

/* ============================================================
   Handwritten notes — mobile tuning
   On phones the Caveat notes were rendering at full desktop size
   (1.45–1.7rem), so the longer rotated phrases wrapped awkwardly and
   the rotation could nudge past the viewport edge. Scale them down,
   keep them on-screen, and fix the one arrow that pointed wrong once
   the layout stacked to a single column.
   ============================================================ */
@media (max-width: 600px) {
  .handwriting { line-height: 1.12; }

  .hero-hand { font-size: 1.22rem; transform: rotate(-2deg); margin-top: 4px; }
  .hero-hand-wrap { margin: 12px 0 0 6px; gap: 4px; max-width: 100%; }
  .hero-hand-wrap .hand-arrow { width: 22px; }

  .cta-hand { font-size: 1.28rem; }
  .cta-hand-wrap .hand-arrow { width: 24px; }

  .plans-hand { font-size: 1.3rem; }
  .svc-hand   { font-size: 1.28rem; }
  .work-hand  { font-size: 1.28rem; }
  .work-more-hand { font-size: 1.18rem; }
  .team-hand  { font-size: 1.28rem; }
  .form-hand  { font-size: 1.2rem; }

  .cal-hand-inline { white-space: normal; font-size: 1.05rem; }

  /* "most brands pick this one ↓" is centred above a 3-column grid, so on
     desktop it points at the middle (Grow) card. On mobile the grid stacks
     to one column and the arrow would point at Launch instead — so hide it.
     No information is lost: the Grow card already shows a "Most popular" badge. */
  .grow-hint { display: none; }
}

/* ============================================================
   Fix: top eyebrow/badge hidden behind the fixed nav on inner pages
   The fixed header is ~78px tall. Inner pages clear it with .page-top,
   but two later .section-pad rules (the "tighter rhythm" one and the
   max-width:700px one) use the `padding` shorthand, which was resetting
   page-top's top clearance to ~60–104px (desktop) / 52px (mobile) — under
   the navbar, so the badge tucked behind it. Re-assert page-top AFTER
   those rules so it always wins. Home is unaffected (it uses .hero).
   ============================================================ */
.page-top { padding-top: clamp(112px, 14vh, 172px); }
@media (max-width: 700px) {
  .page-top { padding-top: 104px; }
}