/* ==========================================================================
   Growlan — growlan.com
   Design source: "Growlan Home v7.dc.html" (Claude Design project 38ca87d3).
   Mobile first. One column on phones, more air on desktop.
   ========================================================================== */

:root {
  /* Brand */
  --green-900: #1F3D33; /* hero / CTA ground, primary buttons */
  --green-700: #2F6B54; /* accent, links, focus, active borders */
  --green-500: #7FA893;
  --green-400: #A5C7B4;
  --green-300: #BBD6C7;
  --green-250: #CFE3D7;
  --green-200: #D6E5DB;
  --green-100: #EDF3EF;
  --green-050: #EEF4F0;
  --green-line: #4A6A5D; /* hairlines on dark ground */
  --green-select: #DDEBE2;

  /* Surfaces */
  --cream: #FBFAF6; /* page ground */
  --sand: #F1EFE7; /* alternating section ground */
  --paper: #F4F1E9; /* text + buttons on dark ground */
  --white: #FFFFFF;
  --panel-sand: #F5F2E9;

  /* Lines */
  --line: #EAE7DE;
  --line-strong: #D5D0C3;
  --line-tab: #DFDACB;

  /* Ink */
  --ink: #14201C;
  --ink-2: #3A443F;
  --ink-3: #4A554E;
  --gold: #6F5417;

  /* Type */
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Rhythm */
  --shell: 1120px;
  --gutter: clamp(20px, 4vw, 40px);
  --section-y: clamp(48px, 7vw, 88px);
  --tap: 48px;
}

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

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

html {
  scroll-behavior: smooth;
  /* Anchor targets clear the sticky bar and sit comfortably. */
  scroll-padding-top: 16px;
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Room for the sticky bar so it never covers the last line of the footer. */
  padding-bottom: env(safe-area-inset-bottom);
}

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

a { color: var(--green-700); text-decoration: none; }
a:hover { color: var(--green-900); }

button { font: inherit; color: inherit; }

*:focus-visible {
  outline: 3px solid var(--green-700);
  outline-offset: 3px;
  border-radius: 4px;
}

/* On the dark ground the green focus ring disappears — use paper instead. */
.on-dark *:focus-visible { outline-color: var(--paper); }

::selection { background: var(--green-select); }

input[type="range"] { accent-color: var(--green-700); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--paper);
  color: var(--green-900);
  padding: 14px 20px;
  border-radius: 0 0 12px 0;
  font-weight: 600;
}
.skip-link:focus { left: 0; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

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

.shell {
  max-width: var(--shell);
  margin: 0 auto;
  padding: var(--section-y) var(--gutter);
}

.section--sand { background: var(--sand); border-top: 1px solid var(--line); }
.section--cream { background: var(--cream); border-top: 1px solid var(--line); }

.section-head { text-align: center; margin-bottom: 32px; }

.eyebrow {
  display: inline-flex;
  margin: 0 0 20px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 9px 18px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.on-dark .eyebrow { border-color: var(--green-line); color: var(--green-250); }

h1, h2, h3, h4, h5, h6 { letter-spacing: -.01em; }

h1, h2, h3 { font-family: var(--serif); font-weight: 500; }

.h2 {
  margin: 0 auto 16px;
  font-size: clamp(32px, 5.2vw, 50px);
  line-height: 1.08;
  max-width: 24ch;
}

.section-sub {
  margin: 0 auto;
  font-size: 18px;
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 46ch;
}
.on-dark .section-sub { color: var(--green-200); }

.label {
  margin: 0 0 14px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.label--gold { color: var(--gold); }
.label--green { color: var(--green-700); }

/* Auto-fit grids. min-width:0 keeps long words from blowing out a track. */
.grid { display: grid; gap: 12px; }
.grid > * { min-width: 0; }
.grid--220 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.grid--240 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.grid--280 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid--300 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.grid--320 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; align-items: start; }

.stack { display: flex; flex-direction: column; gap: 10px; }

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  padding: 16px 28px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}

/* Paper button on the dark ground — the primary CTA. */
.btn--paper { background: var(--paper); color: var(--green-900); }
.btn--paper:hover { background: var(--white); color: var(--green-900); }

/* Outline button on the dark ground. */
.btn--ghost { border-color: var(--green-500); color: var(--paper); }
.btn--ghost:hover { border-color: var(--paper); color: var(--paper); }

/* Dark button on a light ground — the sticky bar. */
.btn--dark { background: var(--green-900); color: var(--paper); }
.btn--dark:hover { background: var(--green-700); color: var(--paper); }

.btn--nav { min-height: var(--tap); padding: 0 20px; font-size: 16px; white-space: nowrap; }
.btn--full { display: flex; width: 100%; }

/* Below ~480px the logo, language pill and nav CTA cannot share one row
   without the CTA wrapping to three lines. Drop it there: the hero's two
   buttons sit just below the fold, and the sticky bar takes over from the
   moment the visitor scrolls past the hero. */
@media (max-width: 479px) {
  .btn--nav { display: none; }
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

/* --------------------------------------------------------------------------
   Header + hero
   -------------------------------------------------------------------------- */

.hero {
  background: var(--green-900);
  color: var(--paper);
  /* svh, not vh: on mobile browsers vh counts the area behind the collapsing
     address bar, so 100vh overflows the visible screen and pushes the CTA out
     of sight on first paint. vh stays as the fallback for older engines. */
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
}

.hero__shell {
  max-width: var(--shell);
  margin: 0 auto;
  width: 100%;
  padding: 16px clamp(16px, 4vw, 40px) clamp(44px, 6vw, 72px);
  /* Nav pinned top, proof cards pinned bottom, the pitch centred between them.
     On phones the content is taller than the viewport anyway, so this only
     distributes the spare room on larger screens. */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 64px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--paper);
  min-height: var(--tap);
}
.logo:hover { color: var(--white); }

.logo__mark {
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 50%;
  border: 1.5px solid var(--green-400);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1;
}

.logo__word {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 27px;
  letter-spacing: -0.01em;
}

.topbar__end { display: flex; align-items: center; gap: 8px; }

/* Language switch. Two real links — each language is its own indexable URL. */
.langswitch {
  display: flex;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--green-line);
  border-radius: 999px;
  /* 2px rather than 4px so each button clears 44px inside a 48px pill. */
  padding: 2px;
  min-height: var(--tap);
}

.langswitch__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 46px;
  min-height: 44px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--green-300);
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 180ms ease, color 180ms ease;
}
.langswitch__btn:hover { color: var(--paper); }
.langswitch__btn[aria-current="true"] {
  background: var(--paper);
  color: var(--green-900);
}
.langswitch__btn[aria-current="true"]:hover { color: var(--green-900); }

.hero__body { text-align: center; margin-top: clamp(28px, 5vw, 52px); }

.hero__title {
  margin: 0 auto 20px;
  font-size: clamp(40px, 7.4vw, 68px);
  line-height: 1.05;
  max-width: 20ch;
}

.hero__sub {
  margin: 0 auto 28px;
  font-size: 19px;
  line-height: 1.6;
  color: var(--green-200);
  max-width: 50ch;
}

.hero__note {
  margin: 20px auto 0;
  font-size: 16px;
  line-height: 1.5;
  color: var(--green-400);
  max-width: 44ch;
}

.proof {
  margin-top: clamp(36px, 5vw, 56px);
}

.proof__card {
  border: 1px solid var(--green-line);
  border-radius: 20px;
  padding: 22px;
}

.proof__n {
  margin: 0 0 6px;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 30px;
  line-height: 1;
  color: var(--paper);
}

.proof__t {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  color: var(--green-200);
}

/* --------------------------------------------------------------------------
   Accordions (pains + FAQ)
   -------------------------------------------------------------------------- */

.acc {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 22px;
  transition: border-color 180ms ease;
}
.acc[data-open="true"] { border-color: var(--green-700); }

.acc__head {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  text-align: left;
  width: 100%;
  padding: 24px;
  min-height: 56px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: var(--sans);
}

.acc__q { flex: 1; }

.acc__q--serif {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(20px, 2.6vw, 26px);
  line-height: 1.25;
  color: var(--ink);
}

.acc__q--sans {
  font-size: 19px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
}

.acc__icon {
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  line-height: 1;
  font-weight: 400;
  background: var(--sand);
  color: var(--green-900);
  transition: background-color 180ms ease, color 180ms ease;
}
.acc[data-open="true"] .acc__icon {
  background: var(--green-900);
  color: var(--paper);
}

.acc__panel[hidden] { display: none; }

.acc__body { padding: 0 24px 24px; }

.acc__cost {
  margin: 0 0 16px;
  font-size: 18px;
  line-height: 1.65;
  color: var(--ink-2);
}

.acc__fixbox {
  background: var(--green-050);
  border-radius: 18px;
  padding: 20px;
}

.acc__fix {
  margin: 0;
  font-size: 18px;
  line-height: 1.6;
  color: var(--ink);
}

.acc__answer {
  margin: 0;
  padding: 0 24px 24px;
  font-size: 18px;
  line-height: 1.65;
  color: var(--ink-2);
}

/* --------------------------------------------------------------------------
   Services tabs
   -------------------------------------------------------------------------- */

.tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  margin-bottom: 16px;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.tab {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
  min-height: var(--tap);
  padding: 0 18px 0 8px;
  border-radius: 999px;
  border: 1px solid var(--line-tab);
  background: var(--white);
  color: var(--ink-2);
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}
.tab[aria-selected="true"] {
  background: var(--green-900);
  border-color: var(--green-900);
  color: var(--paper);
}

.tab__n {
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: 17px;
  background: var(--sand);
  color: var(--ink-2);
  transition: background-color 180ms ease, color 180ms ease;
}
.tab[aria-selected="true"] .tab__n {
  background: var(--paper);
  color: var(--green-900);
}

.svc-card {
  background: var(--white);
  border-radius: 24px;
  padding: clamp(24px, 3.6vw, 36px);
}

.svc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(24px, 3vw, 40px);
}
.svc-grid > * { min-width: 0; }

.svc__title {
  margin: 0 0 14px;
  font-size: clamp(26px, 3.4vw, 34px);
  line-height: 1.15;
}

.svc__body {
  margin: 0 0 20px;
  font-size: 18px;
  line-height: 1.65;
  color: var(--ink-2);
}

.svc__resultbox {
  background: var(--panel-sand);
  border-radius: 18px;
  padding: 20px;
}

.svc__result { margin: 0; font-size: 18px; line-height: 1.6; }

.checklist { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }

.checklist li { display: flex; gap: 12px; align-items: flex-start; }

.checklist svg { flex: none; margin-top: 2px; }

.checklist p { margin: 0; font-size: 18px; line-height: 1.55; }

.svc-panel[hidden] { display: none; }

/* --------------------------------------------------------------------------
   Value calculator
   -------------------------------------------------------------------------- */

.calc-inputs {
  background: var(--white);
  border-radius: 24px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.field__label {
  display: block;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 2px;
}

.field__value {
  margin: 0 0 6px;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 34px;
  line-height: 1.1;
  color: var(--green-900);
}

.field__note {
  margin: 12px 0 0;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink-3);
}

/* 48px tall track keeps the thumb a comfortable target on a phone. */
.field input[type="range"] {
  width: 100%;
  height: 48px;
  cursor: pointer;
}

.calc-out {
  background: var(--green-900);
  color: var(--paper);
  border-radius: 24px;
  padding: 28px;
}

.calc-out__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 20px;
}
.calc-out__grid > * { min-width: 0; }

.calc-out__label {
  margin: 0 0 4px;
  font-size: 15px;
  color: var(--green-300);
}

.calc-out__n {
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 40px;
  line-height: 1;
  overflow-wrap: break-word;
}

.ramp {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--green-line);
}

.ramp__bars {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 100px;
}

.ramp__bar { flex: 1; border-radius: 999px; }
.ramp__bar--low { background: var(--green-line); height: 30%; }
.ramp__bar--mid { background: var(--green-500); height: 60%; }
.ramp__bar--full { background: var(--paper); height: 100%; }

.ramp__scale {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
}
.ramp__scale p { margin: 0; font-size: 15px; color: var(--green-300); }

.calc-out .btn { margin-top: 24px; }

.calc__disclaimer {
  margin: 14px 0 0;
  font-size: 16px;
  line-height: 1.55;
  color: var(--green-200);
}

/* --------------------------------------------------------------------------
   How we work
   -------------------------------------------------------------------------- */

.step {
  background: var(--white);
  border-radius: 22px;
  padding: 24px;
}

.step__n {
  display: flex;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: var(--green-900);
  color: var(--paper);
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: 20px;
  margin-bottom: 14px;
}

.step__title { margin: 0 0 8px; font-size: 24px; line-height: 1.2; }

.step__body { margin: 0 0 10px; font-size: 17px; line-height: 1.6; color: var(--ink-2); }

.step__when { margin: 0; font-size: 15px; font-weight: 600; color: var(--green-700); }

.pact {
  border-radius: 24px;
  padding: 28px;
}
.pact--dark { background: var(--green-900); color: var(--paper); }
.pact--light { background: var(--white); }

.pact .label { margin-bottom: 18px; }
.pact--dark .label { color: var(--green-300); }

.pact__list {
  display: flex;
  flex-direction: column;
  gap: 13px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pact__list li { margin: 0; font-size: 18px; line-height: 1.6; }
.pact--dark .pact__list li { color: var(--green-100); }
.pact--light .pact__list li { color: var(--ink); }

/* --------------------------------------------------------------------------
   Team
   -------------------------------------------------------------------------- */

.person {
  background: var(--white);
  border-radius: 24px;
  padding: 12px;
}

.person__frame {
  position: relative;
  width: 100%;
  height: clamp(240px, 26vw, 300px);
  border-radius: 18px;
  overflow: hidden;
  background: var(--sand);
}

.person__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Shown until a real photo is dropped into public/img/. */
.person__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  text-align: center;
  font-size: 16px;
  color: var(--ink-3);
}

.person__meta { padding: 20px 16px 12px; }

.person__name { margin: 0 0 4px; font-size: 28px; line-height: 1.15; }

.person__bio { margin: 0; font-size: 17px; line-height: 1.6; color: var(--ink-2); }

.team__quote {
  margin: 22px auto 0;
  text-align: center;
  font-family: var(--serif);
  font-size: clamp(21px, 2.6vw, 28px);
  line-height: 1.35;
  color: var(--green-900);
  max-width: 36ch;
}

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

.cta {
  background: var(--green-900);
  color: var(--paper);
}

.cta__title {
  margin: 0 auto 16px;
  font-size: clamp(32px, 5.2vw, 52px);
  line-height: 1.06;
  max-width: 22ch;
}

.cta__sub {
  margin: 0 auto 28px;
  font-size: 19px;
  line-height: 1.6;
  color: var(--green-200);
  max-width: 50ch;
}

.cta__note { margin: 16px auto 0; font-size: 16px; color: var(--green-400); }

.footer {
  margin-top: clamp(40px, 6vw, 64px);
  padding-top: 32px;
  border-top: 1px solid var(--green-line);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 28px;
}
.footer > * { min-width: 0; }

.footer__logo { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }

.footer__about {
  margin: 0;
  font-size: 17px;
  line-height: 1.6;
  color: var(--green-300);
  max-width: 36ch;
}

.footer__col { display: flex; flex-direction: column; }

.footer__heading {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green-400);
}

.footer__link {
  display: flex;
  align-items: center;
  min-height: 44px;
  font-size: 17px;
  color: var(--green-200);
}
.footer__link:hover { color: var(--paper); }

.footer__note { margin: 0; font-size: 17px; line-height: 1.5; color: var(--green-300); }

/* 96px of tail clears the sticky bar on a phone. */
.copyright { margin: 32px 0 96px; font-size: 15px; color: var(--green-400); }

/* --------------------------------------------------------------------------
   Sticky CTA
   -------------------------------------------------------------------------- */

.sticky {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 70;
  padding: 10px clamp(12px, 4vw, 40px) calc(14px + env(safe-area-inset-bottom));
  transform: translateY(120%);
  opacity: 0;
  visibility: hidden;
  transition: transform 220ms ease, opacity 220ms ease, visibility 220ms;
}
.sticky[data-show="true"] {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
}

.sticky__inner {
  max-width: var(--shell);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 8px 8px 20px;
  box-shadow: 0 6px 24px rgba(20, 32, 28, 0.10);
}

.sticky__label {
  margin: 0;
  flex: 1;
  min-width: 0;
  font-size: 16px;
  line-height: 1.3;
  color: var(--ink-2);
}

.sticky .btn {
  flex: none;
  min-height: 52px;
  padding: 0 24px;
}

/* --------------------------------------------------------------------------
   Motion
   -------------------------------------------------------------------------- */

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

/* --------------------------------------------------------------------------
   No-JS fallback — the page must stay usable and readable without scripts.
   -------------------------------------------------------------------------- */

.no-js .acc__panel[hidden] { display: block; }
.no-js .acc__icon { display: none; }
.no-js .svc-panel[hidden] { display: block; }
.no-js .svc-panel + .svc-panel { margin-top: 16px; }
.no-js .tabs { display: none; }
.no-js .calc-js { display: none; }

/* ==========================================================================
   Motion system
   Four durations, two curves, one rule: motion explains a change, it never
   announces itself. All of it is off under prefers-reduced-motion.
   ========================================================================== */

:root {
  --dur-micro: 150ms;    /* state change on a control  */
  --dur-element: 250ms;  /* one thing appearing        */
  --dur-section: 400ms;  /* a block entering the page  */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* Report status — text always accompanies the colour. */
  --status-strong: #2F6B54;
  --status-attention: #9A5221;  /* darkened from #B4632A: that failed AA
                                   (4.41 on white, 3.96 on the green panel) */
  --status-opportunity: #6F5417;
}

/* Scroll reveal. The hidden state is scoped to .js, which site.js adds, so
   with JavaScript off nothing is ever invisible — the commonest way a reveal
   effect silently breaks a page for the people least able to work around it. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--dur-section) var(--ease-out),
              transform var(--dur-section) var(--ease-out);
}
.js [data-reveal].is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ==========================================================================
   Report form — the primary conversion element
   ========================================================================== */

.rform {
  margin: 0 auto;
  max-width: 560px;
  text-align: left;
}

.rform__label {
  display: block;
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--ink-2);
}
.rform--dark .rform__label { color: var(--green-200); }

.rform__row {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.rform__field { display: block; }

.rform__input {
  width: 100%;
  min-height: 58px;
  padding: 16px 18px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: var(--white);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.3;
  transition: border-color var(--dur-micro) var(--ease-out),
              box-shadow var(--dur-micro) var(--ease-out);
}
.rform__input::placeholder { color: var(--ink-3); opacity: 1; }
.rform__input:focus {
  border-color: var(--green-700);
  box-shadow: 0 0 0 3px var(--green-050);
  outline: none;
}
.rform--dark .rform__input { border-color: transparent; }
.rform--dark .rform__input:focus { box-shadow: 0 0 0 3px var(--green-line); }

.rform__input[aria-invalid="true"] { border-color: var(--status-attention); }

.rform__submit { width: 100%; }

.rform__hint,
.rform__error {
  margin: 10px 0 0;
  font-size: 15px;
  line-height: 1.45;
}
.rform__hint { color: var(--ink-3); }
.rform--dark .rform__hint { color: var(--green-400); }

.rform__error { color: var(--status-attention); font-weight: 600; }
.rform--dark .rform__error { color: #F0B48A; }
.rform__error[hidden] { display: none; }

.rform.is-sending .rform__submit { opacity: 0.7; pointer-events: none; }

/* From 560px the field and the button share a row — one gesture, not two. */
@media (min-width: 560px) {
  .rform__row { flex-direction: row; align-items: stretch; }
  .rform__field { flex: 1; min-width: 0; }
  .rform__submit { width: auto; flex: none; }
}

.hero__secondary { margin: 12px 0 0; font-size: 17px; }
.hero__secondary a {
  /* inline-flex with a 44px box: an underlined inline link is only ~23px tall,
     which is under the minimum touch target on the phones most of our
     visitors use. The rule sits on the text, the target is the box. */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 4px;
  color: var(--green-200);
  box-shadow: inset 0 -1px 0 var(--green-line);
  transition: color var(--dur-micro) var(--ease-out),
              box-shadow var(--dur-micro) var(--ease-out);
}
.hero__secondary a:hover { box-shadow: inset 0 -1px 0 var(--paper); }

.cta__alt { margin: 22px 0 0; font-size: 17px; }
.cta__alt a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: var(--green-200);
}
.cta__alt a:hover { color: var(--paper); }

/* ==========================================================================
   Opportunity Report preview
   ========================================================================== */

.report-grid { align-items: start; }

.repcard {
  margin: 0;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: clamp(20px, 3vw, 28px);
}

.repcard__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding-bottom: 16px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--line);
}

.repcard__tag {
  flex: none;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--sand);
  color: var(--ink-3);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.repcard__biz { font-size: 16px; color: var(--ink-2); }

.repcard__found {
  margin: 0 0 20px;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(24px, 3.4vw, 30px);
  line-height: 1.2;
  color: var(--green-900);
}

.signals { list-style: none; margin: 0 0 22px; padding: 0; }

.signal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 0;
  border-top: 1px solid var(--line);
  font-size: 17px;
}
.signal:last-child { border-bottom: 1px solid var(--line); }

.signal__label { color: var(--ink-2); }

.signal__status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: none;
  font-weight: 600;
  text-align: right;
}

.signal__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

.signal__status--strong { color: var(--status-strong); }
.signal__status--attention { color: var(--status-attention); }
.signal__status--opportunity { color: var(--status-opportunity); }

.repcard__big {
  background: var(--green-050);
  border-radius: 16px;
  padding: 20px;
}

.repcard__bigtitle {
  margin: 0 0 8px;
  font-size: clamp(20px, 2.6vw, 24px);
  line-height: 1.25;
}

.repcard__bigbody {
  margin: 0 0 18px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-2);
}

.rank__query {
  margin: 0 0 10px;
  font-size: 15px;
  color: var(--ink-3);
  font-style: italic;
}

.rank { list-style: none; margin: 0; padding: 0; }

.rank__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 12px;
  padding: 9px 0;
  border-top: 1px solid #D7E5DC;
  font-size: 16px;
}
.rank__row:first-child { border-top: none; }

.rank__name { min-width: 0; overflow-wrap: break-word; }

.rank__pos { font-weight: 600; text-align: right; white-space: nowrap; }

.rank__row--you { font-weight: 600; color: var(--status-attention); }

.rank__you {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--status-attention);
  color: var(--white);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  vertical-align: 1px;
}

/* Decorative length bar. The meaning lives in .rank__pos, so this is hidden
   from assistive tech and nothing is lost if it is never seen. */
.rank__bar {
  grid-column: 1 / -1;
  height: 4px;
  border-radius: 999px;
  background: #D7E5DC;
  overflow: hidden;
}
.rank__bar i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--green-500);
  transition: width var(--dur-section) var(--ease-out);
}
.rank__row--you .rank__bar i { background: var(--status-attention); }

.report-side .rform { margin-top: 24px; max-width: none; }
.report-side .checklist { margin-bottom: 4px; }

.repcard__disclaimer {
  margin: 16px 0 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-3);
}

/* ==========================================================================
   Print
   ========================================================================== */

.repcard__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 4px;
  font-weight: 600;
  box-shadow: inset 0 -1px 0 currentColor;
}

/* ==========================================================================
   Report landing (/opportunity-report)
   ========================================================================== */

/* The landing's hero is a header, not a full screen: the reason to scroll is
   right underneath it. */
.hero--short { min-height: 0; }
.hero--short .hero__shell { padding-bottom: clamp(36px, 5vw, 56px); }

.lwhats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.lwhat {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 22px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 18px;
}
.lwhat svg { flex: none; margin-top: 4px; }
.lwhat h3 { margin: 0 0 6px; font-size: 21px; line-height: 1.2; }
.lwhat p { margin: 0; font-size: 17px; line-height: 1.55; color: var(--ink-2); }

.lsteps { list-style: none; margin: 0; padding: 0; }
.lsteps .step { list-style: none; }

.lprivacy {
  margin: 22px auto 0;
  max-width: 56ch;
  font-size: 15px;
  line-height: 1.55;
  color: var(--green-300);
}
.lprivacy strong { color: var(--green-200); }

/* Step 2 of the report form: the email, shown once the website is accepted. */
.rform__step2[hidden], .rform__done[hidden] { display: none; }
.rform__step2 { margin-top: 4px; }

.rform__consent {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 14px 0 0;
  min-height: 44px;
  font-size: 16px;
  line-height: 1.45;
  color: var(--ink-2);
  cursor: pointer;
}
.rform--dark .rform__consent { color: var(--green-200); }
.rform__consent input {
  flex: none;
  width: 22px;
  height: 22px;
  margin: 2px 0 0;
  accent-color: var(--green-700);
}
.rform--dark .rform__consent input { accent-color: var(--paper); }

.rform__done {
  margin: 12px 0 0;
  padding: 16px 18px;
  border-radius: 12px;
  background: var(--green-050);
  color: var(--green-900);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.5;
}
.rform--dark .rform__done { background: var(--paper); }

/* ==========================================================================
   v3 design language (growlan-mockup-home-v3.html, 2026-09-05)
   Gold as the action colour, three bands (dark / mid / light + sand), a
   sticky header, the report preview inside the hero. Rules here override the
   earlier ones by cascade; older components keep working where still used.
   ========================================================================== */

:root {
  --header-h: 64px;
  /* Solid tag grounds so the contrast gate can measure them. */
  --tag-attention-bg: #F5EAE3;
  --tag-strong-bg: #E4EEE9;
  --tag-opportunity-bg: #F0EADD;
}

/* ---- bands ---- */
.band { padding: clamp(48px, 7vw, 80px) 0; }
.band--dark { background: var(--green-900); color: var(--paper); }
.band--mid { background: var(--green-700); color: var(--paper); }
.band--light { background: var(--cream); color: var(--ink); }
.band--sand { background: var(--sand); color: var(--ink); }
.band--tight { padding-top: 8px; }
.band .shell { padding-top: 0; padding-bottom: 0; }
.narrow { max-width: 680px; }
.shell.narrow { max-width: calc(680px + 2 * var(--gutter)); }

/* ---- type ---- */
.h2--left { text-align: left; margin-left: 0; margin-right: 0; max-width: 26ch; }
.lede { margin: 0 0 18px; font-size: 18px; line-height: 1.6; color: var(--ink-2); max-width: 48ch; }
.band--dark .lede { color: var(--green-200); }
.band--mid .lede { color: var(--green-100); }
.micro { margin: 12px 0 0; font-size: 14px; line-height: 1.5; color: var(--ink-3); }
.band--dark .micro, .band--mid .micro { color: var(--green-300); }
.accent { color: var(--gold); font-weight: 600; }
.band--dark .accent, .band--mid .accent { color: #E2C98C; }

/* Eyebrow: a dot and a line of text, no pill. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  padding: 0;
  border: none;
  border-radius: 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: none;
  color: var(--gold);
}
.eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.on-dark .eyebrow, .band--dark .eyebrow { border: none; color: var(--green-300); }
.band--mid .eyebrow { color: var(--green-100); }

/* ---- buttons ---- */
.btn--gold { background: var(--gold); color: var(--white); border-radius: 10px; }
.btn--gold:hover { background: #5E4612; color: var(--white); }
.btn--outline { background: transparent; border: 1.5px solid var(--line-strong); color: inherit; border-radius: 10px; }
.band--dark .btn--outline, .band--mid .btn--outline, .on-dark .btn--outline { border-color: rgba(244, 241, 233, 0.4); color: var(--paper); }
.btn--outline:hover { border-color: var(--gold); }
.rform .btn { border-radius: 10px; }

/* ---- sticky header ---- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: var(--header-h);
  padding: 8px var(--gutter);
  background: var(--green-900);
  border-bottom: 1px solid rgba(244, 241, 233, 0.12);
}
.site-nav { display: none; gap: 26px; font-size: 15px; }
.site-nav a { color: var(--green-200); min-height: 44px; display: inline-flex; align-items: center; }
.site-nav a:hover { color: var(--paper); }
@media (min-width: 900px) { .site-nav { display: flex; } }
.site-header__end { display: flex; align-items: center; gap: 8px; }
.btn-wa {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--paper);
  color: var(--green-900);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}
.btn-wa:hover { background: var(--white); color: var(--green-900); }
.btn-wa__label { display: none; }
@media (min-width: 480px) { .btn-wa__label { display: inline; } }
@media (max-width: 479px) { .btn-wa { width: 44px; justify-content: center; padding: 0; } }
html { scroll-padding-top: calc(var(--header-h) + 12px); }

/* ---- hero ---- */
.hero-v3 { min-height: calc(100svh - var(--header-h)); display: flex; align-items: center; }
.hero-grid { display: grid; gap: 34px; align-items: center; width: 100%; }
@media (min-width: 900px) { .hero-grid { grid-template-columns: 1.05fr 1fr; gap: 64px; } }
.hero-v3 .hero__title { margin: 0 0 16px; font-size: clamp(30px, 6.4vw, 52px); line-height: 1.1; max-width: 16ch; }
.hero-v3 .lede { color: var(--green-200); }

.chain { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin: 0 0 20px; font-size: 15px; }
.chain--hero { color: var(--green-200); }
.chain--ink { color: var(--ink-3); margin: 6px 0 22px; }
.chain__arrow { color: var(--gold); }
.band--dark .chain__arrow { color: #E2C98C; }

.rform--boxed { max-width: none; background: var(--white); padding: 6px; border-radius: 12px; }
.rform--boxed .rform__row { gap: 6px; }
.rform--boxed .rform__input { min-height: 50px; border: none; box-shadow: none; padding: 12px 12px; }
.rform--boxed .rform__input:focus { box-shadow: inset 0 0 0 2px var(--green-050); }
.rform--boxed .rform__submit { min-height: 50px; padding: 12px 18px; font-size: 15px; }
.rform--boxed .rform__error { margin: 8px 8px 6px; }
.rform--boxed .rform__step2 { padding: 8px 8px 6px; }
.rform--boxed .rform__step2 .rform__label { color: var(--ink-2); }
.rform--boxed .rform__step2 .rform__hint { color: var(--ink-3); }
.rform--boxed .rform__consent { color: var(--ink-2); }
.rform--boxed .rform__consent input { accent-color: var(--gold); }
.rform--boxed .rform__done { margin: 8px; }
.hero-alt { margin: 14px 0 0; font-size: 14px; color: var(--green-200); }
.hero-alt a { color: var(--green-300); display: inline-flex; align-items: center; min-height: 44px; box-shadow: inset 0 -1px 0 var(--green-line); }
.hero-alt a:hover { color: var(--paper); }

/* Report preview card in the hero. */
.rp {
  background: var(--white);
  color: var(--ink);
  border-radius: 20px;
  padding: 26px 24px;
  max-width: 420px;
  margin: 0 auto;
  box-shadow: 0 24px 50px -20px rgba(0, 0, 0, 0.35);
}
@media (min-width: 900px) { .rp { margin: 0; } }
.rp__top { margin: 0 0 16px; font-size: 12px; text-align: center; letter-spacing: 0.02em; color: var(--ink-3); }
.rp__biz { margin: 0 0 4px; font-size: 14px; color: var(--ink-3); }
.rp__headline { margin: 0 0 18px; font-family: var(--serif); font-weight: 500; font-size: 22px; line-height: 1.25; }
.rp__rows { list-style: none; margin: 0 0 16px; padding: 0; border-top: 1px solid var(--line); }
.rp__row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 14px; color: var(--ink-2); }
.rp__block { background: var(--panel-sand); border-radius: 12px; padding: 14px 16px; margin-bottom: 16px; }
.rp__block strong { display: block; margin-bottom: 4px; font-size: 14px; color: var(--ink); }
.rp__block p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-3); }
.rp__cta { display: flex; justify-content: center; align-items: center; min-height: 44px; font-size: 14px; font-weight: 600; color: var(--gold); }
.rp__cta:hover { color: #5E4612; }

.tag { font-size: 12px; font-weight: 600; padding: 5px 11px; border-radius: 999px; white-space: nowrap; }
.tag--attention { background: var(--tag-attention-bg); color: var(--status-attention); }
.tag--strong { background: var(--tag-strong-bg); color: var(--status-strong); }
.tag--opportunity { background: var(--tag-opportunity-bg); color: var(--status-opportunity); }

/* ---- trust ---- */
.trust-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
@media (min-width: 760px) { .trust-grid { grid-template-columns: repeat(3, 1fr); } }
.trust-card { background: var(--white); border: 1px solid var(--line); border-radius: 16px; padding: 20px; }
.trust-card__num { margin: 0 0 4px; font-family: var(--serif); font-size: 28px; line-height: 1.1; color: var(--gold); }
.trust-card__label { margin: 0 0 4px; font-size: 16px; font-weight: 600; }
.trust-card__body { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink-3); }
.sector-line { margin: 18px auto 0; text-align: center; font-size: 14px; line-height: 1.5; color: var(--ink-3); max-width: 70ch; }

/* ---- founders ---- */
.founders { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 16px; }
@media (min-width: 760px) { .founders { grid-template-columns: 1fr 1fr; } }
.founder { background: var(--white); color: var(--ink); border: 1px solid var(--line); border-radius: 16px; padding: 20px; }
.founder__photo { position: relative; width: 72px; height: 72px; border-radius: 50%; background: var(--green-100); border: 1.5px dashed var(--green-300); overflow: hidden; margin-bottom: 12px; }
.founder__initial { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-size: 26px; color: var(--green-700); }
.founder__photo img { position: relative; width: 100%; height: 100%; object-fit: cover; }
.founder__name { margin: 0 0 8px; font-size: 24px; line-height: 1.15; }
.founder__bio { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink-3); }

/* ---- tabs (v3 look) ---- */
.tabs { margin-top: 22px; }
.tab-buttons { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.tab-btn {
  min-height: 44px;
  padding: 9px 15px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--ink-3);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out);
}
.band--dark .tab-btn, .band--mid .tab-btn { border-color: rgba(244, 241, 233, 0.3); color: var(--green-200); }
.tab-btn[aria-selected="true"] { background: var(--gold); border-color: var(--gold); color: var(--white); }
.tab-panel[hidden] { display: none; }
.tab-panel__title { margin: 0 0 8px; font-size: 22px; line-height: 1.2; }
.tab-panel__body { margin: 0; font-size: 17px; line-height: 1.6; }
.band--dark .tab-panel__body, .band--mid .tab-panel__body { color: var(--green-100); }
.tab-panel__list { margin: 0; padding-left: 20px; font-size: 16px; line-height: 1.55; }
.tab-panel__list li { margin-bottom: 10px; }
.band--mid .tab-panel__list { color: var(--green-100); }
.no-js .tab-buttons { display: none; }
.no-js .tab-panel[hidden] { display: block; }
.no-js .tab-panel + .tab-panel { margin-top: 16px; }

/* ---- calculator (v3) ---- */
.calc-grid { display: grid; gap: 22px; margin-top: 20px; }
@media (min-width: 900px) { .calc-grid { grid-template-columns: 1.1fr 0.9fr; align-items: start; } }
.calc-card { background: var(--green-900); border-radius: 16px; padding: 22px; }
.calc-row { margin-bottom: 20px; }
.calc-row--last { margin-bottom: 0; }
.calc-row label { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; line-height: 1.4; color: var(--green-200); margin-bottom: 10px; }
.calc-val { color: #E2C98C; font-weight: 600; white-space: nowrap; }
.calc-card input[type="range"] { width: 100%; height: 44px; accent-color: var(--gold); cursor: pointer; }
.calc-out { background: var(--white); color: var(--ink); border-radius: 16px; padding: 24px; text-align: center; }
.calc-out__big { margin: 0; font-family: var(--serif); font-weight: 500; font-size: 40px; line-height: 1.1; color: var(--green-700); }
.calc-out__note { margin: 6px 0 0; font-size: 14px; color: var(--ink-3); }
.calc-out__disclaimer { margin: 14px 0 0; font-size: 13px; line-height: 1.5; color: var(--ink-3); }

/* ---- compare ---- */
.compare-grid { display: grid; gap: 16px; margin-top: 22px; }
@media (min-width: 760px) { .compare-grid { grid-template-columns: 1fr 1fr; } }
.compare-card { border-radius: 16px; padding: 22px; border: 1.5px solid var(--line-strong); }
.compare-card--bad { background: var(--panel-sand); }
.compare-card--good { background: var(--white); border-color: var(--gold); }
.compare-card h3 { margin: 0 0 12px; font-size: 20px; }
.compare-card__list { list-style: none; margin: 0; padding: 0; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.compare-card__list li { position: relative; padding-left: 24px; margin-bottom: 10px; }
.compare-card__list li::before { position: absolute; left: 0; top: 0; }
.compare-card--bad .compare-card__list li::before { content: "–"; color: var(--ink-3); }
.compare-card--good .compare-card__list li::before { content: "✓"; color: var(--gold); font-weight: 700; }

/* ---- packages ---- */
.pkg-grid { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 16px; }
@media (min-width: 760px) { .pkg-grid { grid-template-columns: 1fr 1fr; } }
.pkg-card { position: relative; background: var(--white); border: 1.5px solid var(--line-strong); border-radius: 20px; padding: 24px; }
.pkg-card--reco { border-color: var(--gold); }
.pkg-badge { position: absolute; top: -12px; left: 22px; background: var(--gold); color: var(--white); font-size: 12px; font-weight: 700; padding: 4px 12px; border-radius: 999px; }
.pkg-name { margin: 0 0 4px; font-size: 22px; }
.pkg-price { margin: 0 0 2px; font-size: 28px; font-weight: 700; color: var(--gold); }
.pkg-price span { font-size: 14px; font-weight: 500; color: var(--ink-3); }
.pkg-for { margin: 0 0 14px; font-size: 15px; color: var(--ink-3); }
.pkg-list { margin: 0; padding-left: 18px; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.pkg-list li { margin-bottom: 6px; }

/* ---- final CTA ---- */
.cta-grid { display: grid; gap: 28px; }
@media (min-width: 900px) { .cta-grid { grid-template-columns: 1.2fr 1fr; align-items: start; } }
#contact .rform { max-width: 560px; margin: 0; }
#contact .cta__alt { margin: 12px 0 0; }
.scarcity { margin-top: 26px; background: rgba(244, 241, 233, 0.06); border: 1px solid rgba(244, 241, 233, 0.18); border-radius: 16px; padding: 20px 22px; }
.scarcity__top { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; color: var(--green-200); margin-bottom: 10px; }
.scarcity__top strong { color: #E2C98C; }
.progress { height: 8px; border-radius: 999px; background: rgba(244, 241, 233, 0.15); overflow: hidden; }
.progress i { display: block; height: 100%; background: var(--gold); border-radius: 999px; }
.cta-checklist { background: rgba(244, 241, 233, 0.06); border: 1px solid rgba(244, 241, 233, 0.18); border-radius: 16px; padding: 22px; }
.cta-checklist h3 { margin: 0 0 14px; font-size: 20px; color: var(--paper); }
.cta-checklist ul { list-style: none; margin: 0; padding: 0; color: var(--green-200); font-size: 15px; line-height: 1.5; }
.cta-checklist li { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 10px; }
.cta-checklist svg { flex: none; margin-top: 2px; color: #E2C98C; }

/* ---- footer (v3) ---- */
.site-footer { background: var(--green-900); color: var(--green-200); padding: clamp(40px, 6vw, 56px) 0 100px; }
.footer-grid { display: grid; gap: 30px; }
@media (min-width: 900px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.footer-brand .logo { margin-bottom: 12px; }
.footer-brand p { margin: 0; font-size: 15px; line-height: 1.55; max-width: 32ch; }
.footer-col h4 { margin: 0 0 8px; font-family: var(--sans); font-size: 12px; text-transform: uppercase; color: var(--green-300); }
.footer-col a, .footer-col p { display: flex; align-items: center; min-height: 44px; margin: 0; font-size: 15px; color: var(--green-200); }
.footer-col a:hover { color: var(--paper); }
.footer-bottom { border-top: 1px solid rgba(244, 241, 233, 0.15); margin-top: 34px; padding-top: 18px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; font-size: 13px; color: var(--green-300); }

/* Sticky bar in the v3 look. */
.sticky__inner { background: var(--green-900); border-color: rgba(244, 241, 233, 0.18); }
.sticky__label { color: var(--green-200); }
@media (min-width: 900px) { .sticky { display: none; } }

/* ---- v3 fidelity: the mockup's type scale, widths and details ---- */
.band .shell { max-width: calc(1180px + 2 * var(--gutter)); }
.band .h2 { font-size: clamp(24px, 5.5vw, 36px); line-height: 1.16; margin-bottom: 14px; }
.band .lede { font-size: 17px; color: var(--ink-3); }
.band--dark .lede, .hero-v3 .lede { color: var(--green-200); }
.band--mid .lede { color: var(--green-100); }
.band .eyebrow { font-weight: 500; letter-spacing: 0; }
.founder__photo { width: 64px; height: 64px; }
.founder__initial { font-size: 22px; }

/* Accordion in the mockup's style: a lined list, a "+" that turns into a cross. */
.acc-lined { gap: 0; border-top: 1px solid var(--line-strong); }
.acc-lined .acc { background: transparent; border: none; border-bottom: 1px solid var(--line-strong); border-radius: 0; }
.acc-lined .acc[data-open="true"] { border-color: var(--line-strong); }
.acc-lined .acc__head { padding: 18px 2px; gap: 16px; align-items: center; min-height: 56px; }
.acc-lined .acc__q--sans { font-size: 16px; }
.acc-lined .acc__icon {
  width: 28px; height: 28px; background: none; color: var(--green-700);
  font-family: var(--serif); font-size: 22px; line-height: 1;
  transition: transform var(--dur-micro) var(--ease-out);
}
.acc-lined .acc[data-open="true"] .acc__icon { background: none; color: var(--green-700); transform: rotate(45deg); }
.acc-lined .acc__answer { padding: 0 2px 18px; font-size: 15px; line-height: 1.55; color: var(--ink-3); }

/* Final CTA: two buttons, full width on phones, inline from 900px. */
.cta-buttons { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.cta-buttons .btn { width: 100%; }
@media (min-width: 900px) { .cta-buttons .btn { width: auto; } }

@media print {
  .sticky, .rform, .langswitch, .btn--nav, .skip-link, .site-header { display: none !important; }
  .hero, .hero-v3 { min-height: 0; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* ==========================================================================
   Growlan — v4: site navigation, page templates (pillar, hub, article,
   about, contact) and the home's new blocks. Appended to site.css at build.
   Same tokens, same type scale, same bands.
   ========================================================================== */

/* ---- header: full navigation, collapsible on phones ----
   The <details> holds only the toggle; the <nav> is its sibling, so the
   desktop layout never depends on the details being open, and the phone
   menu is pure CSS on [open]. */
.site-header { gap: 12px; }
.site-menu { order: 3; }
.site-menu__toggle {
  list-style: none; cursor: pointer; display: flex; flex-direction: column; justify-content: center; gap: 5px;
  width: var(--tap); height: var(--tap); padding: 12px; border-radius: 10px;
}
.site-menu__toggle::-webkit-details-marker { display: none; }
.site-menu__toggle span { display: block; height: 2px; background: var(--paper); border-radius: 2px; transition: transform var(--dur-micro) var(--ease-out), opacity var(--dur-micro); }
.site-menu[open] .site-menu__toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-menu[open] .site-menu__toggle span:nth-child(2) { opacity: 0; }
.site-menu[open] .site-menu__toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.site-menu__toggle:focus-visible { outline: 2px solid var(--paper); outline-offset: 2px; }
.site-header__end { order: 2; margin-left: auto; }
.btn--nav-analyze { display: none; }
@media (max-width: 899px) {
  /* The logo, the language pair, WhatsApp and the toggle have to share one
     row inside 375px. At the desktop sizes they overflow it by 8px, so the
     three flexible parts give up a little width here. */
  .site-header { flex-wrap: nowrap; gap: 8px; }
  .site-header .logo__word { font-size: 22px; }
  .site-header .logo__mark { width: 30px; height: 30px; font-size: 17px; }
  .site-header .langswitch__btn { padding: 0 10px; }
  .site-header .btn-wa__label { display: none; }
  .site-header .btn-wa { width: 44px; justify-content: center; padding: 0; }
  .site-nav { display: none; }
  .site-menu[open] + .site-nav {
    display: flex; flex-direction: column; gap: 2px;
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--green-900); border-top: 1px solid var(--green-line); border-bottom: 1px solid var(--green-line);
    padding: 10px var(--gutter) 16px; box-shadow: 0 24px 40px -20px rgba(0, 0, 0, 0.5);
  }
  .site-nav a { display: flex; align-items: center; min-height: var(--tap); padding: 0 6px; font-size: 16px; color: var(--green-200); border-radius: 8px; }
  .site-nav a[aria-current="page"] { color: var(--paper); box-shadow: inset 3px 0 0 var(--gold); padding-left: 12px; }
  .site-nav__analyze { margin-top: 8px; background: var(--gold); color: var(--white) !important; justify-content: center; font-weight: 600; }
}
@media (min-width: 900px) {
  .site-menu { display: none; }
  .site-nav { display: flex; flex: 1 1 auto; justify-content: center; flex-wrap: wrap; gap: 2px; }
  .site-nav a { font-size: 14px; padding: 0 10px; min-height: 40px; white-space: nowrap; }
  .site-nav a[aria-current="page"] { color: var(--paper); box-shadow: inset 0 -2px 0 var(--gold); }
  .site-nav .site-nav__analyze { display: none; }
  .site-header__end { margin-left: 0; }
}
@media (min-width: 1180px) {
  .btn--nav-analyze { display: inline-flex; min-height: 40px; padding: 8px 16px; font-size: 14px; }
}

/* ---- the reading column ------------------------------------------------
   site.css sets `.band .shell` to the 1180px content width; `.shell.narrow`
   has the same specificity and loses on source order, which silently made
   every "narrow" section full width (157-character accordion answers). This
   wins on specificity, so a narrow section is a reading column again. */
.band .shell.narrow { max-width: calc(680px + 2 * var(--gutter)); }
/* An accordion answer is prose and needs a prose measure, not the width of
   the row it opens under. */
.acc-lined .acc__answer { max-width: 560px; }

/* ---- breadcrumbs ---- */
.crumbs { margin: 0 0 18px; font-size: 13px; }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.crumbs li { display: flex; align-items: center; gap: 6px; color: var(--green-300); }
.crumbs li + li::before { content: "/"; color: var(--green-line); }
.crumbs a { color: var(--green-300); display: inline-flex; align-items: center; min-height: var(--tap); }
.crumbs a:hover { color: var(--paper); }
.crumbs [aria-current] { color: var(--green-200); display: inline-flex; align-items: center; min-height: var(--tap); }

/* ---- heroes for inner pages ---- */
.hero-pillar { min-height: 0; padding-top: 28px; }
.hero-pillar .hero-grid { align-items: start; }
.hero-deliverables { margin-top: 22px; }
.hero-deliverables > p { margin: 0 0 10px; color: var(--green-200); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.hero-deliverables ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.hero-deliverables li { position: relative; padding-left: 24px; color: var(--paper); line-height: 1.45; }
.hero-deliverables li::before { content: "✓"; position: absolute; left: 0; color: var(--green-200); font-weight: 700; }
.hero-short { min-height: 0; padding-top: 28px; padding-bottom: clamp(40px, 6vw, 64px); }
.hero-copy--wide { max-width: 760px; }
.hero-short .hero__title, .hero-pillar .hero__title { font-size: clamp(28px, 5.2vw, 44px); max-width: 22ch; }
.byline { margin: 14px 0 0; font-size: 14px; color: var(--green-300); }

/* Demand card in the pillar hero. */
.rp--demand .rp__row { font-size: 14px; }
.rp--method { margin-top: 42px; }
.rp--method .rp__top { margin: 0; color: var(--green-700); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.rp__method-title { margin: 18px 0 22px; color: var(--ink); font-family: var(--serif); font-size: 27px; font-weight: 500; line-height: 1.2; }
.rp__method-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.rp__method-steps li { display: flex; align-items: flex-start; gap: 12px; }
.rp__method-steps li > span { flex: 0 0 26px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--green-900); color: var(--paper); font-family: var(--serif); }
.rp--method .rp__method-steps p { margin: 2px 0 0; color: var(--ink-2); line-height: 1.45; }
.rp--method .rp__method-foot { border-top: 1px solid var(--line); margin: 20px 0 0; padding-top: 16px; color: var(--ink-2); font-size: 14px; line-height: 1.5; }
@media (max-width: 900px) { .rp--method { margin: 30px 0 0; max-width: none; } }
.rp__num { font-family: var(--serif); font-size: 18px; color: var(--ink); white-space: nowrap; }
.rp__num small { font-family: var(--sans); font-size: 12px; color: var(--ink-3); margin-left: 2px; }
.rp__foot { margin: 0; font-size: 12px; line-height: 1.5; color: var(--ink-3); }
.rp--paper { box-shadow: none; border: 1px solid var(--line); }

/* ---- demand table ---- */
.demand { margin-top: 22px; overflow-x: auto; }
.demand__table { width: 100%; border-collapse: collapse; background: var(--white); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; font-size: 15px; }
.demand__table th, .demand__table td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: middle; }
.demand__table thead th { font-family: var(--sans); font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3); background: var(--panel-sand); font-weight: 600; }
.demand__table tbody th { font-weight: 500; color: var(--ink); }
.demand__table td { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.demand__table tr:last-child th, .demand__table tr:last-child td { border-bottom: none; }
.kd { display: inline-block; min-width: 34px; text-align: center; padding: 3px 8px; border-radius: 999px; font-size: 13px; font-weight: 600; background: var(--sand); color: var(--ink-2); }
.kd--easy { background: var(--tag-strong-bg); color: var(--status-strong); }
.kd--mid { background: var(--tag-opportunity-bg); color: var(--status-opportunity); }
.kd--hard { background: var(--tag-attention-bg); color: var(--status-attention); }

/* ---- lists ---- */
.ticks { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 12px; max-width: 680px; }
.ticks li { position: relative; padding-left: 28px; font-size: 16px; line-height: 1.55; color: var(--green-100); }
.ticks li::before { content: ""; position: absolute; left: 0; top: 9px; width: 14px; height: 14px; border-radius: 50%; background: #E2C98C; }
.ticks li strong { color: var(--paper); font-weight: 600; }
.ticks li a { color: var(--green-300); box-shadow: inset 0 -1px 0 var(--green-line); }
.ticks li a:hover { color: var(--paper); }
.ticks--ink li { display: flex; align-items: flex-start; gap: 10px; padding-left: 0; color: var(--ink-2); }
.ticks--ink li::before { display: none; }
.ticks--ink svg { color: var(--green-700); flex: none; margin-top: 2px; }
.band--light .ticks li, .band--sand .ticks li { color: var(--ink-2); }
.band--light .ticks li::before, .band--sand .ticks li::before { background: var(--gold); }
.band--light .ticks li strong, .band--sand .ticks li strong { color: var(--ink); }

.steps { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 14px; counter-reset: step; }
.steps--grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.band--mid .step { background: rgba(244, 241, 233, 0.08); border: 1px solid rgba(244, 241, 233, 0.18); border-radius: 16px; padding: 20px; }
.band--mid .step__n { background: #E2C98C; color: var(--green-900); }
.band--mid .step__title { color: var(--paper); }
.band--mid .step__body { color: var(--green-100); }
.band--light .step, .band--sand .step { background: var(--white); border: 1px solid var(--line); border-radius: 16px; padding: 20px; }

/* "What we look at" — a collapsed checklist. */
.analyze { margin-top: 22px; border-top: 1px solid rgba(244, 241, 233, 0.25); padding-top: 14px; }
.analyze summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: var(--tap); flex-wrap: wrap; }
.analyze summary::-webkit-details-marker { display: none; }
.analyze summary .eyebrow { margin: 0; }
.analyze__toggle { font-size: 14px; color: var(--green-100); box-shadow: inset 0 -1px 0 rgba(244, 241, 233, 0.4); }
.analyze[open] .analyze__toggle { opacity: 0.6; }
.analyze__list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; columns: 1; }
@media (min-width: 760px) { .analyze__list { grid-template-columns: 1fr 1fr; gap: 8px 28px; } }
.analyze__list li { position: relative; padding-left: 18px; font-size: 15px; line-height: 1.5; color: var(--green-100); }
.analyze__list li::before { content: "·"; position: absolute; left: 4px; color: #E2C98C; font-weight: 700; }

/* ---- proof + founders strip ---- */
.proof-grid { display: grid; gap: 28px; align-items: center; }
@media (min-width: 900px) { .proof-grid { grid-template-columns: 1.1fr 1fr; gap: 56px; } }
.founders-strip { display: grid; gap: 28px; align-items: center; }
@media (min-width: 900px) { .founders-strip { grid-template-columns: 1.1fr 1fr; gap: 56px; } }
.founders--compact { margin-top: 0; }
.trust-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.trust-list li { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; background: var(--white); border: 1px solid var(--line); border-radius: 10px; color: var(--ink); line-height: 1.5; }
.trust-list svg { width: 20px; height: 20px; flex: 0 0 20px; fill: none; stroke: var(--green-700); stroke-width: 2; stroke-linecap: round; }
.link-arrow { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--gold); }
.link-arrow:hover { color: #5E4612; }
.band--mid .link-arrow, .band--dark .link-arrow, .link-arrow--paper { color: #E2C98C; }
.band--mid .link-arrow:hover, .band--dark .link-arrow:hover { color: var(--paper); }
.band-link { margin: 18px 0 0; }

/* ---- cards (hubs, related) ---- */
.cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
/* Column count follows the item count so the last row is never a single
   orphan: eight services fill four columns, five steps fill three. */
.cards--4 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.cards--3 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.cards--2 { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.card { display: flex; }
.card__link {
  display: flex; flex-direction: column; gap: 6px; width: 100%;
  background: var(--white); border: 1px solid var(--line); border-radius: 16px; padding: 20px 20px 16px;
  color: var(--ink); transition: border-color var(--dur-micro), transform var(--dur-micro) var(--ease-out);
}
.card__link:hover { border-color: var(--green-700); transform: translateY(-2px); }
.card__kicker { font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--gold); }
.card__title { margin: 0; font-family: var(--serif); font-size: 21px; line-height: 1.2; font-weight: 500; }
.card__body { font-size: 15px; line-height: 1.5; color: var(--ink-3); }
.card__more { margin-top: auto; padding-top: 8px; font-size: 14px; font-weight: 600; color: var(--green-700); }

/* ---- article ----
   `minmax(0, 1fr)` on the single-column case: without it the grid column is
   sized to max-content and the table of contents pushes the page sideways
   on a phone. */
.article-grid { display: grid; gap: 32px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1000px) { .article-grid { grid-template-columns: 240px minmax(0, 1fr); gap: 56px; align-items: start; } .toc { position: sticky; top: calc(var(--header-h) + 20px); } }
.toc { background: var(--white); border: 1px solid var(--line); border-radius: 14px; padding: 18px; }
.toc .eyebrow { margin-bottom: 8px; }
.toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.toc li { counter-increment: toc; }
.toc a { display: flex; gap: 10px; align-items: center; min-height: var(--tap); padding: 6px 0; font-size: 14px; line-height: 1.4; color: var(--ink-2); border-bottom: 1px solid var(--line); }
.toc li:last-child a { border-bottom: none; }
.toc a::before { content: counter(toc); font-family: var(--serif); color: var(--gold); flex: none; width: 16px; }
.toc a:hover { color: var(--green-700); }

/* The article column is wide so tables and the calculator can use it; the
   text inside is capped at a readable measure of roughly 72 characters. */
.prose { font-size: 17px; line-height: 1.65; color: var(--ink-2); }
.prose > p, .prose > ul, .prose > ol, .prose > h2, .prose > h3, .prose > .callout, .prose > .micro { max-width: 620px; }
.prose > * + * { margin-top: 1em; }
.prose h2 { font-family: var(--serif); font-weight: 500; font-size: clamp(24px, 4vw, 30px); line-height: 1.2; color: var(--ink); margin: 2em 0 0.6em; scroll-margin-top: calc(var(--header-h) + 16px); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-family: var(--serif); font-weight: 500; font-size: 22px; line-height: 1.25; color: var(--ink); margin: 1.6em 0 0.4em; }
.prose p { margin: 0; }
.prose p + p { margin-top: 1em; }
.prose strong { color: var(--ink); font-weight: 600; }
.prose a { color: var(--green-700); box-shadow: inset 0 -1px 0 var(--green-300); }
.prose a:hover { color: var(--green-900); box-shadow: inset 0 -2px 0 var(--green-700); }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li { margin: 0.5em 0; }
.prose li::marker { color: var(--gold); }
.table-wrap { overflow-x: auto; margin: 1.4em 0; }
.prose-table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 15px; background: var(--white); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.prose-table th, .prose-table td { padding: 11px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); line-height: 1.5; }
.prose-table thead th { font-family: var(--sans); font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3); background: var(--panel-sand); }
.prose-table tbody th { font-weight: 500; color: var(--ink); }
.prose-table tr:last-child th, .prose-table tr:last-child td { border-bottom: none; }
.callout { margin: 1.6em 0; background: var(--panel-sand); border-left: 4px solid var(--gold); border-radius: 0 14px 14px 0; padding: 18px 20px; }
.callout strong { display: block; margin-bottom: 6px; color: var(--ink); }
.callout p { margin: 0; font-size: 16px; }
.prose-calc { margin: 1.6em 0; }
.prose-calc .calc-grid { margin-top: 0; }
.prose-cta { margin-top: 2em; }
.band--light .prose .calc-card { border: 1px solid var(--line); }

/* ---- home v4 ---- */
.finding-grid { display: grid; gap: 28px; align-items: center; }
@media (min-width: 900px) { .finding-grid { grid-template-columns: 1fr 1fr; gap: 56px; } }
.finding { background: var(--white); border: 1px solid var(--line); border-radius: 20px; padding: 24px; max-width: 460px; }
.finding__query { margin: 0 0 14px; font-family: var(--serif); font-size: 22px; color: var(--ink); }
.finding__rows { list-style: none; margin: 0 0 16px; padding: 0; border-top: 1px solid var(--line); }
.finding__row { display: flex; align-items: center; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 15px; color: var(--ink-2); }
.finding__pos { font-family: var(--serif); font-size: 18px; color: var(--ink-3); width: 36px; flex: none; }
.finding__row--you { color: var(--ink); font-weight: 600; }
.finding__row--you .finding__pos { color: var(--status-attention); }
.finding__note { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ink-3); }
.tab-panel__more { margin: 14px 0 0; }
.tab-panel__more a { color: #E2C98C; font-weight: 600; display: inline-flex; align-items: center; min-height: 44px; }
.tab-panel__more a:hover { color: var(--paper); }
.pkg-card .pkg-for { min-height: 0; }

/* ---- about ---- */
.thesis { margin: 26px 0 0; padding: 18px 22px; border-left: 4px solid var(--gold); font-family: var(--serif); font-size: clamp(20px, 3vw, 26px); line-height: 1.3; color: var(--ink); }
.people { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
@media (min-width: 760px) { .people { grid-template-columns: 1fr 1fr; } }
.person-card { background: var(--white); border: 1px solid var(--line); border-radius: 18px; padding: 24px; }
.founder__photo--lg { width: 120px; height: 120px; }
.founder__photo--lg .founder__initial { font-size: 40px; }
.person-card__role { margin: -4px 0 10px; font-size: 14px; font-weight: 600; color: var(--gold); }
.principles { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.principle { background: var(--white); border: 1px solid var(--line); border-radius: 16px; padding: 20px; }
.principle h3 { margin: 0 0 6px; font-size: 20px; line-height: 1.2; }
.principle p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink-3); }

/* ---- contact ---- */
.contact-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
@media (min-width: 760px) { .contact-grid { grid-template-columns: 1fr 1fr; } }
.contact-card { background: var(--white); border: 1px solid var(--line); border-radius: 18px; padding: 24px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.contact-card h2 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 24px; }
.contact-card p { margin: 0; color: var(--ink-3); font-size: 15px; line-height: 1.55; }
.contact-card .btn--outline { border-color: var(--green-900); color: var(--green-900); }
#report .rform { max-width: 560px; }

/* ---- footer with five columns ---- */
@media (min-width: 900px) { .footer-grid--5 { grid-template-columns: 1.6fr repeat(4, 1fr); } }
.footer-brand h3 { margin: 18px 0 6px; font-family: var(--sans); font-size: 12px; font-weight: 600; text-transform: uppercase; color: var(--green-300); }
.footer-col h3 { margin: 0 0 8px; font-family: var(--sans); font-size: 12px; font-weight: 600; text-transform: uppercase; color: var(--green-300); }
.footer-brand a { display: flex; align-items: center; min-height: 40px; font-size: 15px; color: var(--green-200); }
.footer-brand a:hover { color: var(--paper); }
.footer-legal { margin: 14px 0 0; font-size: 12px; line-height: 1.5; color: var(--green-400); max-width: 80ch; }

/* ---- landing bits that moved onto bands ---- */
.example-note { background: var(--sand); border-bottom: 1px solid var(--line); padding: 18px 0; }
.example-note .narrow { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
.example-note strong { color: var(--ink); font-size: 14px; }
.example-note p { color: var(--ink-2); font-size: 14px; line-height: 1.5; margin: 0; }
.band .lwhats { margin-top: 8px; }
.band .lwhat h3 { color: var(--ink); }
.band .lprivacy { color: var(--green-300); font-size: 13px; margin-top: 14px; }
.band .lprivacy strong { color: var(--green-200); }

@media print {
  .site-menu, .btn--nav-analyze, .toc, .crumbs { display: none !important; }
}

/* ==========================================================================
   Growlan — the home from Growlan_Homepage_Redesign_v3_matched.html, plus the
   chrome it changes site-wide: header, footer, sticky bar, the report form and
   the Opportunity Report modal.

   Loaded after site.css and pages.css, so where a selector is shared this file
   is the one that wins. Tokens are unchanged; the mockup was built on them.
   ========================================================================== */

:root { --rl: 22px; --shadow: 0 24px 50px -20px rgba(20, 32, 28, .30); --gold-light: #E2C98C; }

/* ---- container and bands ---- */
.wrap { width: min(var(--shell), calc(100% - 2 * var(--gutter))); margin-inline: auto; }
.section { padding: clamp(48px, 7vw, 88px) 0; }
.band--white { background: var(--white); }
.section.band--dark, .final.band--dark, .hero.band--dark { color: var(--paper); }
.band--dark .lede, .band--dark p { color: var(--green-200); }
.band--dark .micro { color: var(--green-300); }

/* Type. Scoped to the home's own sections so the inner-page scale, which is
   class-based, is left alone. */
.hero h1, .section h2, .final h2, .invest h2, .modal h2 {
  font-family: var(--serif); font-weight: 500; margin: 0; line-height: 1.1;
}
.hero h1 { font-size: clamp(38px, 6vw, 64px); max-width: 19ch; }
.section h2, .final h2 { font-size: clamp(28px, 4.4vw, 44px); max-width: 20ch; }
.hero .lede, .section .lede, .final .lede { font-size: 19px; line-height: 1.6; color: var(--ink-2); max-width: 48ch; margin: 14px 0 0; }
.band--dark .lede { color: var(--green-200); }
.section .micro, .final .micro { font-size: 14px; color: var(--ink-3); margin: 12px 0 0; }
.stack > * + * { margin-top: 20px; }
.stack2 > * + * { margin-top: 30px; }
.head { max-width: 720px; }

.check { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; flex: none; }
.check svg { width: 100%; height: 100%; stroke: var(--green-700); stroke-width: 2.2; fill: none; stroke-linecap: round; }
.band--dark .check svg { stroke: var(--gold-light); }

/* ---- buttons: modifiers that ride on site.css's .btn base ---- */
.btn.primary { background: var(--gold); color: #fff; border-color: transparent; border-radius: 10px; }
.btn.primary:hover { background: #5E4612; color: #fff; }
.btn.secondary { background: transparent; border: 1px solid var(--line-strong); color: var(--ink); border-radius: 10px; }
.btn.secondary:hover { border-color: var(--gold); color: var(--ink); }
.band--dark .btn.secondary, .final .btn.secondary { border-color: rgba(244, 241, 233, .4); color: var(--paper); }
.band--dark .btn.secondary:hover { border-color: var(--gold-light); color: var(--paper); }
.btn.ghost { background: transparent; border: none; color: var(--green-700); padding-inline: 0; font-weight: 600; min-height: 44px; }
.btn.ghost:hover { color: var(--green-900); }
.btn.primary svg { flex: none; }

/* Mid-green bands (the pillar process and founders strips) put small text on
   green-700, where green-300 only reaches 4.04. */
.band--mid .lede { color: var(--green-100); }
.band--mid .micro { color: var(--green-100); }
.band--mid .formCard .micro, .band--mid .gform .privacy { color: var(--ink-3); }

/* ---- the closing CTA -----------------------------------------------------
   The hero, the report band and the footer are all deep green, so a green CTA
   between them made a fourth green block and the page read as one saturated
   field. A strong colour did not fix it either: it only moved the intensity.
   The band that asks for the business is sand instead, and the weight comes
   from the white form card and the gold button standing on it rather than
   from the ground.

   The hairline on top is doing real work: this band follows cream on some
   templates and sand on others, and without it the two would merge. Below it
   the footer's green-900 does the separating. */
.band--cta { background: var(--sand); color: var(--ink); border-top: 1px solid var(--line-strong); }
.band--cta .lede, .final.band--cta .lede { color: var(--ink-2); }
.band--cta .proof span { color: var(--ink-2); }
.band--cta .micro, .section.band--cta .micro, .final.band--cta .micro { color: var(--ink-3); }
.band--cta .check svg { stroke: var(--green-700); }
.band--cta .hero-alt { color: var(--ink-3); }
.band--cta .hero-alt a { color: var(--green-700); box-shadow: inset 0 -1px 0 var(--green-300); }
.band--cta .hero-alt a:hover { color: var(--green-900); box-shadow: inset 0 -2px 0 var(--green-700); }
.band--cta .btn.secondary, .band--cta .btn--outline { border-color: var(--line-strong); color: var(--ink); }
.band--cta .btn.secondary:hover, .band--cta .btn--outline:hover { border-color: var(--gold); }
/* The card carries the band: on a light ground it needs an edge, not a
   drop shadow, to sit apart from it. */
.band--cta .gform, .band--cta .formCard {
  border: 1px solid var(--line); box-shadow: 0 18px 40px -24px rgba(20, 32, 28, .30);
}

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  position: sticky; top: 0; z-index: 50; display: block; padding: 0;
  background: var(--green-900); border-bottom: 1px solid rgba(244, 241, 233, .12);
  min-height: var(--header-h);
}
.site-header .nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: var(--header-h); }
.brand { display: flex; align-items: center; gap: 10px; color: var(--paper); font-family: var(--serif); font-size: 24px; font-weight: 500; }
.brand:hover { color: var(--paper); }
.mark { width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--green-400); display: grid; place-items: center; font-size: 17px; flex: none; }
.links { display: flex; gap: 22px; }
.links a { font-size: 14px; color: var(--green-200); font-weight: 500; display: inline-flex; align-items: center; min-height: 40px; white-space: nowrap; }
.links a:hover, .links a[aria-current="page"] { color: var(--paper); }
.links a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--gold); }
/* The in-nav CTA is the phone menu's button; on desktop the header has its
   own. Needs the same specificity as `.links a` to beat it. */
.links .links__cta { display: none; }
.navright { display: flex; align-items: center; gap: 10px; }
.lang { display: flex; gap: 2px; border: 1px solid var(--green-line); border-radius: 999px; padding: 2px; }
.lang__btn {
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--green-300); font-weight: 600; font-size: 13px; border-radius: 999px;
  min-width: 36px; min-height: 32px;
}
.lang__btn:hover { color: var(--paper); }
.lang__btn.is-active { background: var(--paper); color: var(--green-900); }
.lang__btn.is-active:hover { color: var(--green-900); }
.btn-wa {
  display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 13px;
  border-radius: 999px; background: var(--paper); color: var(--green-900); font-size: 14px; font-weight: 600; white-space: nowrap;
}
.btn-wa:hover { background: var(--white); color: var(--green-900); }
.btn--nav { min-height: 40px; padding: 0 18px; font-size: 14px; }
.site-menu { display: none; }
.hamb {
  list-style: none; cursor: pointer; width: 44px; height: 44px; border: 1px solid var(--green-line);
  border-radius: 10px; display: flex; flex-direction: column; justify-content: center; gap: 5px; padding: 12px;
}
.hamb::-webkit-details-marker { display: none; }
.hamb span { display: block; height: 2px; background: var(--paper); border-radius: 2px; transition: transform .18s ease, opacity .18s; }
.site-menu[open] .hamb span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-menu[open] .hamb span:nth-child(2) { opacity: 0; }
.site-menu[open] .hamb span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.hamb:focus-visible { outline: 2px solid var(--paper); outline-offset: 2px; }

/* 1150, not the mockup's 960: "Opportunity Report" and "Analyze my business"
   are longer than the mockup's placeholder labels, and between 960 and 1150
   the header wrapped onto two lines. */
@media (max-width: 1150px) {
  .site-menu { display: block; order: 3; }
  .btn--nav { display: none; }
  .btn-wa__label { display: none; }
  .btn-wa { width: 44px; justify-content: center; padding: 0; }
  .links { display: none; }
  .site-menu[open] + .links {
    display: flex; flex-direction: column; gap: 0;
    position: absolute; z-index: 90; top: var(--header-h); left: 0; right: 0;
    background: var(--green-900); border-bottom: 1px solid var(--green-line);
    padding: 14px var(--gutter) 22px; box-shadow: var(--shadow);
  }
  .site-menu[open] + .links a { display: flex; min-height: 48px; border-bottom: 1px solid var(--green-line); font-size: 16px; }
  .site-menu[open] + .links .links__cta {
    display: flex; align-items: center; justify-content: center; margin-top: 14px; min-height: 52px;
    background: var(--gold); color: #fff; border-radius: 10px; font-weight: 600; border-bottom: 0;
  }
}
@media (max-width: 420px) {
  .site-header .nav { gap: 8px; }
  .brand { font-size: 20px; }
  .mark { width: 26px; height: 26px; font-size: 15px; }
  .lang__btn { min-width: 32px; }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero { padding: 44px 0 60px; min-height: 0; display: block; }
.heroGrid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.hero .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.proof { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 22px; }
.proof span { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--green-200); font-weight: 500; }

.rp { background: var(--white); color: var(--ink); border-radius: 20px; padding: 26px 24px; box-shadow: var(--shadow); max-width: 440px; margin-left: auto; }
.rp__top { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.rp__brand { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.rp__pill { font-size: 11px; font-weight: 700; background: var(--sand); color: var(--ink-2); border-radius: 999px; padding: 5px 10px; white-space: nowrap; }
.rp__biz { font-size: 13px; color: var(--ink-3); margin: 16px 0 4px; }
.rp__headline { font-family: var(--serif); font-weight: 500; font-size: 22px; line-height: 1.25; margin: 0 0 16px; max-width: none; }
.rp__rows { list-style: none; margin: 0 0 16px; padding: 0; border-top: 1px solid var(--line); }
.rp__row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 14px; color: var(--ink-2); }
.rp .tag { font-size: 11px; font-weight: 700; padding: 5px 10px; border-radius: 999px; white-space: nowrap; }
.rp__block { background: var(--panel-sand); border-radius: 14px; padding: 16px 18px; }
.tag--gold { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gold); }
.rp__block strong { display: block; font-family: var(--serif); font-weight: 500; font-size: 17px; margin: 6px 0 8px; color: var(--ink); }
.bars { display: grid; gap: 8px; }
.bar { display: grid; grid-template-columns: 82px 1fr 34px; gap: 8px; align-items: center; font-size: 11px; color: var(--ink-3); }
.track { height: 7px; background: #D7E5DC; border-radius: 999px; overflow: hidden; }
.fill { height: 100%; background: var(--green-700); border-radius: 999px; }
.bar.you .fill { background: var(--status-attention); }
.bar.you span, .bar.you b { color: var(--status-attention); font-weight: 700; }
.caption { font-size: 13px; color: var(--ink-3); margin-top: 14px; text-align: center; }
.band--dark .caption { color: var(--green-300); }

/* ---- platform chips ---- */
.sources { padding: 26px 0; border-top: 1px solid var(--line); }
.sourceLabel { font-size: 12px; font-weight: 600; letter-spacing: .06em; color: var(--ink-3); text-align: center; margin: 0 0 18px; }
.chipRow { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.chip { display: flex; align-items: center; gap: 9px; border: 1px solid var(--line-strong); border-radius: 999px; padding: 9px 16px 9px 12px; background: var(--white); }
.chip__ic { width: 22px; height: 22px; flex: none; display: grid; place-items: center; color: var(--green-700); }
.chip__ic svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.chip span { font-size: 14px; font-weight: 600; color: var(--ink-2); }

/* ==========================================================================
   What we find
   ========================================================================== */
.split { display: grid; grid-template-columns: .85fr 1.15fr; gap: 64px; }
.sticky-col { position: sticky; top: calc(var(--header-h) + 40px); align-self: start; }
.evidenceList { display: grid; gap: 14px; }
.evidence { background: var(--white); border: 1px solid var(--line); border-radius: var(--rl); padding: 22px; display: grid; grid-template-columns: 48px 1fr; gap: 16px; }
.ico { width: 48px; height: 48px; border-radius: 14px; background: var(--green-050); color: var(--green-700); display: grid; place-items: center; }
.ico svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.evidence h3 { font-family: var(--serif); font-weight: 500; font-size: 20px; line-height: 1.15; margin: 0; }
.evidence p { margin: 8px 0 0; color: var(--ink-2); font-size: 16px; }

/* ==========================================================================
   Opportunity Report band + the form
   ========================================================================== */
.reportGrid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 54px; align-items: start; }
.reportPoints { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.rpItem { border: 1px solid var(--green-line); background: rgba(244, 241, 233, .05); border-radius: 14px; padding: 16px; display: flex; gap: 10px; align-items: flex-start; }
.rpIco { width: 20px; height: 20px; flex: none; margin-top: 2px; color: var(--gold-light); }
.rpIco svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.rpItem b { display: block; font-size: 15px; color: var(--paper); }
.rpItem span:not(.rpIco) { display: block; font-size: 12.5px; color: var(--green-300); margin-top: 3px; }

.formCard { background: var(--white); color: var(--ink); padding: 28px; border-radius: var(--rl); box-shadow: var(--shadow); }
.formCard h3 { font-family: var(--serif); font-weight: 500; font-size: 24px; line-height: 1.15; margin: 6px 0 0; }
.formCard .micro { color: var(--ink-3); }
.formCard .eyebrow { margin-bottom: 0; }

/* The form itself is a white card wherever it is not already inside one. */
.gform { display: grid; gap: 13px; background: var(--white); color: var(--ink); border-radius: var(--rl); padding: 24px; }
.formCard .gform, .modal .gform { background: none; padding: 0; border-radius: 0; box-shadow: none; }
.gform .field label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.gform .input {
  height: 56px; width: 100%; border: 1px solid var(--line-strong); background: var(--white);
  border-radius: 10px; padding: 0 14px; outline: none; color: var(--ink); font-size: 16px;
}
.gform .input::placeholder { color: var(--ink-3); opacity: .75; }
.gform .input:focus { border-color: var(--green-700); box-shadow: 0 0 0 3px var(--green-050); }
.gform .input[aria-invalid="true"] { border-color: var(--status-attention); }
.gform .btn { width: 100%; }
.gform .privacy { font-size: 12px; color: var(--ink-3); line-height: 1.5; margin: 0; }
.gform__error { margin: 0; font-size: 14px; font-weight: 600; color: var(--status-attention); }
.gform__error[hidden] { display: none; }
.gform__done { margin: 0; display: grid; gap: 8px; font-size: 15px; color: var(--green-900); background: var(--green-050); border-radius: 12px; padding: 16px 18px; }
.gform__done[hidden] { display: none; }
.gform.is-sending .btn { opacity: .7; pointer-events: none; }
/* On a dark band the standalone form keeps its own white card, so the text
   inside must stay dark whatever the band says. */
.band--dark .gform .privacy, .band--dark .gform .field label { color: var(--ink-3); }
.band--dark .gform .field label { color: var(--ink-2); }

/* ==========================================================================
   Sample finding
   ========================================================================== */
.diag { display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; }
.chartCard { background: var(--white); border: 1px solid var(--line); border-radius: 20px; padding: clamp(20px, 3vw, 28px); }
.chartHead { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; padding-bottom: 16px; margin-bottom: 18px; border-bottom: 1px solid var(--line); }
.tinylabel { font-size: 11px; font-weight: 700; letter-spacing: .06em; color: var(--ink-3); }
.chartHead h3 { font-family: var(--serif); font-size: 20px; margin: 6px 0 0; font-weight: 500; line-height: 1.15; }
.metricTag { font-size: 12px; font-weight: 600; padding: 5px 11px; border-radius: 999px; background: var(--panel-sand); color: var(--ink-3); white-space: nowrap; }
.compare { display: grid; gap: 16px; }
.crow { display: grid; gap: 6px; }
.crow .toprow { display: flex; justify-content: space-between; font-size: 14px; }
.crow b { font-weight: 600; color: var(--ink); }
.crow span { font-weight: 700; color: var(--ink-2); }
.ctrack { height: 10px; background: #EDE9DC; border-radius: 999px; overflow: hidden; }
.cfill { height: 100%; background: var(--green-500); border-radius: 999px; }
.crow.you .cfill { background: var(--status-attention); }
.crow.you b, .crow.you span { color: var(--status-attention); }
.chartCard .callout { margin-top: 18px; background: var(--panel-sand); border-left: 3px solid var(--gold); border-radius: 0 14px 14px 0; padding: 16px 18px; }
.chartCard .callout strong { display: block; font-family: var(--serif); font-weight: 500; font-size: 17px; color: var(--ink); margin: 0; }
.chartCard .callout p { margin: 6px 0 0; color: var(--ink-3); font-size: 14px; line-height: 1.55; }
.points { display: grid; gap: 14px; }
.pnt { display: flex; gap: 12px; }
.pnt .num { min-width: 26px; width: 26px; height: 26px; border-radius: 50%; background: var(--green-900); color: var(--paper); display: grid; place-items: center; font-family: var(--serif); font-size: 13px; flex: none; }
.pnt b { font-size: 16px; }
.pnt p { margin: 3px 0 0; font-size: 14.5px; color: var(--ink-3); }

/* ==========================================================================
   The four layers · the method
   ========================================================================== */
.cards4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 40px; }
.feature { border-top: 1px solid var(--line-strong); padding-top: 20px; }
.num-label { font-size: 12px; color: var(--gold); font-weight: 700; letter-spacing: .06em; }
.feature h3 { margin: 12px 0 0; font-family: var(--serif); font-weight: 500; font-size: 21px; line-height: 1.15; }
.feature h3 a { color: inherit; }
.feature h3 a:hover { color: var(--green-700); }
.feature p { margin: 10px 0 0; font-size: 14.5px; color: var(--ink-3); }
.feature .feature__deliverable { border-top: 1px solid var(--line); margin-top: 18px; padding-top: 14px; color: var(--ink-2); }
.feature__deliverable strong { display: block; color: var(--ink); margin-bottom: 4px; }
.trustGrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 80px); align-items: center; }
.trustGrid .founderList { margin: 0; }
@media (max-width: 760px) { .trustGrid { grid-template-columns: 1fr; } }

.method { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 40px; }
.step { background: var(--white); border: 1px solid var(--line); border-radius: var(--rl); padding: 22px; }
.step .dot { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--green-900); color: var(--paper); font-family: var(--serif); font-size: 18px; margin-bottom: 16px; }
.step h3 { font-family: var(--serif); font-weight: 500; font-size: 22px; line-height: 1.15; margin: 0; }
.step p { font-size: 14.5px; color: var(--ink-3); margin: 8px 0 0; }

/* ==========================================================================
   Founders
   ========================================================================== */
.founders { display: grid; grid-template-columns: .9fr 1.1fr; gap: 55px; align-items: center; }
.photos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.photo { border-radius: 20px; overflow: hidden; background: var(--green-100); border: 1px solid var(--line); position: relative; min-height: 340px; }
.photo img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.photo__initial { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--serif); font-size: 64px; color: var(--green-500); }
.photo:nth-child(2) { margin-top: 32px; }
.pcap { position: absolute; left: 12px; right: 12px; bottom: 12px; background: rgba(255, 255, 255, .94); border-radius: 12px; padding: 10px 12px; font-size: 12px; color: var(--ink-3); }
.pcap b { display: block; font-size: 14px; font-family: var(--serif); font-weight: 500; color: var(--ink); }
.founderList { display: grid; gap: 12px; }
.fitem { display: flex; gap: 12px; }
.fitem b { font-size: 15.5px; }
.fitem p { margin: 3px 0 0; font-size: 14px; color: var(--ink-3); }

/* ==========================================================================
   Investment · insights
   ========================================================================== */
.invest-band { padding: 48px 0; }
.invest { padding: 30px 32px; background: var(--white); border: 1px solid var(--line); border-radius: var(--rl); display: flex; justify-content: space-between; gap: 30px; align-items: center; flex-wrap: wrap; }
.invest h2 { font-size: 23px; max-width: 22ch; }
.invest .micro { max-width: 640px; }
.price { text-align: right; white-space: nowrap; }
.price strong { display: block; font-family: var(--serif); font-weight: 500; font-size: 28px; color: var(--gold); }
.price span { font-size: 12px; color: var(--ink-3); }

.insights { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 38px; }
.insight { min-height: 250px; padding: 22px; border: 1px solid var(--line); border-radius: var(--rl); background: var(--white); display: flex; flex-direction: column; }
.itype { font-size: 11px; font-weight: 700; color: var(--gold); letter-spacing: .06em; }
.insight h3 { margin: 14px 0 0; font-family: var(--serif); font-weight: 500; font-size: 20px; line-height: 1.2; }
.insight h3 a { color: inherit; }
.insight h3 a::after { content: ""; position: absolute; inset: 0; }
.insight { position: relative; }
.insight:hover { border-color: var(--green-700); }
.insight p { font-size: 14px; color: var(--ink-3); margin: 10px 0 0; }
.ilink { margin-top: auto; padding-top: 20px; font-size: 14px; font-weight: 600; color: var(--green-700); }

/* ==========================================================================
   Final CTA
   ========================================================================== */
.final { padding: 74px 0; }
.finalGrid { display: grid; grid-template-columns: 1fr .9fr; gap: 46px; align-items: center; }
.final .formCard .micro { margin-top: 14px; }

/* ==========================================================================
   Footer
   ========================================================================== */
footer { background: var(--green-900); color: var(--green-200); padding: 44px 0 28px; }
/* `.footer` in site.css is the old design's whole footer block: it carries a
   top border, a clamped top margin of up to 64px and 32px of padding. Here the
   class is only the column grid, so all three have to go — the border was
   landing as a stray rule across the top of the footer, and the spacing was
   nearly 100px of dead air above the columns. */
.footer {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px;
  margin-top: 0; padding-top: 0; border-top: 0;
}
footer .brand { margin-bottom: 12px; }
.footcopy { font-size: 14px; color: var(--green-300); max-width: 32ch; margin: 0; }
.footwa { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; min-height: 44px; font-size: 14px; font-weight: 600; color: var(--paper); }
.footwa:hover { color: var(--gold-light); }
footer .col h3 { font-size: 12px; text-transform: uppercase; color: var(--green-400); margin: 0 0 10px; font-family: var(--sans); font-weight: 600; }
footer .col a { display: flex; align-items: center; min-height: 44px; font-size: 14px; color: var(--green-200); }
footer .col a:hover { color: var(--paper); }
.bottom { margin-top: 24px; padding-top: 16px; border-top: 1px solid rgba(244, 241, 233, .15); display: flex; justify-content: space-between; gap: 8px 20px; flex-wrap: wrap; font-size: 12px; color: var(--green-400); }
.footlegal { margin: 10px 0 0; font-size: 12px; line-height: 1.5; color: var(--green-400); max-width: 80ch; }

/* ==========================================================================
   Sticky bar · modal
   ========================================================================== */
.stickybar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  padding: 10px 16px calc(14px + env(safe-area-inset-bottom));
  transform: translateY(120%); opacity: 0; transition: transform .22s ease, opacity .22s ease;
}
.stickybar[data-show="true"] { transform: translateY(0); opacity: 1; }
.stickybar__inner {
  max-width: var(--shell); margin: 0 auto; display: flex; align-items: center; gap: 10px;
  background: var(--green-900); border: 1px solid rgba(244, 241, 233, .18); border-radius: 999px;
  padding: 8px 8px 8px 18px; box-shadow: var(--shadow);
}
.stickybar__label { margin: 0; flex: 1; font-size: 14px; color: var(--green-200); }
.stickybar .btn { flex: none; min-height: 46px; padding: 0 20px; }
@media (min-width: 900px) { .stickybar { display: none; } }

.backdrop { position: fixed; inset: 0; z-index: 100; background: rgba(20, 32, 28, .62); padding: 18px; align-items: center; justify-content: center; display: flex; }
.backdrop[hidden] { display: none; }
.modal { background: var(--white); color: var(--ink); width: min(540px, 100%); max-height: calc(100vh - 36px); overflow: auto; border-radius: var(--rl); padding: 26px; box-shadow: var(--shadow); }
.mhead { display: flex; justify-content: space-between; gap: 15px; margin-bottom: 20px; }
.mhead h2 { font-size: 28px; margin-top: 6px; max-width: 18ch; }
.close { width: 44px; height: 44px; flex: none; border: 1px solid var(--line); border-radius: 10px; background: transparent; font-size: 22px; color: var(--ink-2); cursor: pointer; }
.close:hover { border-color: var(--gold); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 960px) {
  .heroGrid, .split, .reportGrid, .diag, .founders, .finalGrid { grid-template-columns: 1fr; gap: 36px; }
  .sticky-col { position: static; }
  .rp { margin-left: 0; max-width: none; }
  .cards4, .method, .insights { grid-template-columns: 1fr 1fr; }
  .footer { grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 24px; }
}
@media (max-width: 640px) {
  .section { padding: 56px 0; }
  .hero { padding: 32px 0 44px; }
  .hero h1 { font-size: 36px; }
  .section h2, .final h2 { font-size: 29px; }
  .hero .lede, .section .lede, .final .lede { font-size: 17px; }
  .hero .actions { display: grid; }
  .hero .actions .btn { width: 100%; }
  .proof { display: grid; gap: 8px; }
  .reportPoints { grid-template-columns: 1fr; }
  .cards4, .method, .insights { grid-template-columns: 1fr; }
  .photos { gap: 10px; }
  .photo { min-height: 260px; }
  .photo:nth-child(2) { margin-top: 24px; }
  .invest { display: grid; padding: 22px; }
  .price { text-align: left; }
  .footer { grid-template-columns: 1fr 1fr; }
  .footer > div:first-child { grid-column: 1 / -1; }
  .chipRow { gap: 8px; }
  .chip { padding: 8px 12px 8px 10px; }
  .chip span { font-size: 13px; }
  .final { padding: 56px 0; }
  .formCard { padding: 22px; }
  .gform { padding: 20px; }
}

@media print {
  .stickybar, .backdrop, .site-header, .skip-link { display: none !important; }
}

/* ==========================================================================
   Opportunity Report landing
   ========================================================================== */

/* Six promises in three columns, not four with two orphans on the second row,
   and one icon per promise instead of six identical check marks. */
.lwhats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 26px; }
.lwhat { padding: 22px; gap: 16px; }
/* flex: none — .lwhat is a flex row, and without it the tile is squeezed to
   about half its width by the text beside it. */
.lwhat .ico { flex: none; width: 44px; height: 44px; border-radius: 12px; }
.lwhat .ico svg { width: 21px; height: 21px; }
.lwhat h3 { font-family: var(--serif); font-weight: 500; font-size: 19px; line-height: 1.2; margin: 2px 0 6px; }
.lwhat p { font-size: 15px; line-height: 1.55; color: var(--ink-3); }
@media (max-width: 960px) { .lwhats { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .lwhats { grid-template-columns: 1fr; } }

/* The hero holds one card and it is the form: it is the only thing this page
   asks for, so it gets the whole right column and nothing competes with it. */
@media (min-width: 900px) {
  .hero-grid--form { grid-template-columns: 1fr minmax(420px, 480px); gap: 56px; align-items: center; }
}
.hero-grid--form .caption { text-align: left; margin-top: 12px; }

/* The evidence band is dark so the white cards are the brightest things on
   it: the report card for the shape, the chart for one section in detail. */
.evidence-grid { display: grid; gap: 28px; align-items: start; margin-top: 30px; }
@media (min-width: 900px) { .evidence-grid { grid-template-columns: minmax(0, 440px) minmax(0, 1fr); gap: 40px; } }
.evidence-grid .rp { margin: 0; max-width: none; }
.evidence-grid .caption { text-align: left; }
.points--row { margin-top: 34px; }
@media (min-width: 760px) { .points--row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } }
.evidence-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin: 30px 0 0; }
.evidence-cta .micro { margin: 0; }
.band--dark .points .num { background: var(--paper); color: var(--green-900); }
.band--dark .points b { color: var(--paper); }
.band--dark .points p { color: var(--green-200); }
.band--dark .chartCard { border-color: transparent; box-shadow: var(--shadow); }

/* ---- accordion as cards -------------------------------------------------
   The lined variant reads as a bare list of links on a page that is otherwise
   made of cards. Same behaviour, same markup, given the page's own shape. */
.acc-cards { gap: 10px; display: grid; }
.acc-cards .acc {
  background: var(--white); border: 1px solid var(--line); border-radius: 16px;
  transition: border-color var(--dur-micro) var(--ease-out);
}
.acc-cards .acc:hover { border-color: var(--line-strong); }
.acc-cards .acc[data-open="true"] { border-color: var(--green-700); }
.acc-cards .acc__head { padding: 18px 20px; gap: 16px; align-items: center; min-height: 60px; }
.acc-cards .acc__q--sans { font-size: 17px; font-weight: 600; color: var(--ink); }
.acc-cards .acc__icon {
  width: 28px; height: 28px; flex: none; background: none; color: var(--green-700);
  font-family: var(--serif); font-size: 24px; line-height: 1;
  transition: transform var(--dur-micro) var(--ease-out);
}
.acc-cards .acc[data-open="true"] .acc__icon { background: none; color: var(--green-700); transform: rotate(45deg); }
.acc-cards .acc__answer { padding: 0 20px 20px; margin: 0; max-width: 62ch; font-size: 15.5px; line-height: 1.6; color: var(--ink-3); }

/* ---- the sequence hub ---------------------------------------------------
   /how-we-help/ argues an order, so the order has to be visible. A card grid
   says the opposite of the page: five equal tiles, no dependency between
   them, and an orphan on the last row. */

/* .actions is written for the home's hero; the section heroes need it too. */
.hero-v3 .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

/* .hero-v3 is a flex container, so its .shell sizes to its content instead of
   to the 1180 grid: on every hub hero the copy was centred in the viewport
   and sat a good 50px inside the header's own gutter. */
.hero-v3 > .shell { width: 100%; }

/* The track: the whole system on one line, above the fold, with every node a
   way in. Labels only — the descriptions are the ladder's job, and repeating
   them here would make the hero a second copy of the section below it. */
.hrail {
  position: relative; list-style: none; padding: 0;
  margin: clamp(32px, 4vw, 46px) 0 0;
  display: grid; gap: 12px; grid-template-columns: repeat(5, minmax(0, 1fr));
}
/* One rule draws the rail: with five equal columns, 10% in from each edge is
   exactly the centre of the first node and of the last. */
.hrail::before {
  content: ""; position: absolute; top: 17px; left: 10%; right: 10%; height: 2px;
  background: rgba(244, 241, 233, .16);
}
.hrail__a { display: block; }
.hrail__n {
  position: relative; z-index: 1; display: grid; place-items: center;
  width: 36px; height: 36px; border-radius: 999px;
  border: 1.5px solid var(--green-500); background: var(--green-900);
  color: var(--green-200); font-family: var(--serif); font-size: 16px;
  transition: border-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out);
}
.hrail__l {
  display: block; margin-top: 11px; padding-right: 12px;
  font-size: 14px; line-height: 1.35; color: var(--green-200);
  transition: color var(--dur-micro) var(--ease-out);
}
.hrail__a:hover .hrail__n { border-color: var(--gold-light); color: var(--paper); }
.hrail__a:hover .hrail__l { color: var(--paper); }
/* Five columns stop fitting long before the labels do, and stacked it is no
   longer a diagram — just the same five links the ladder gives you one screen
   later, costing 186px of a 812px phone. It earns its place wide, so it only
   appears wide. */
@media (max-width: 860px) { .hrail { display: none; } }

.systemgrid { display: grid; gap: 8px; }
@media (min-width: 1000px) {
  .systemgrid { grid-template-columns: minmax(0, 350px) minmax(0, 1fr); gap: 56px; align-items: start; }
  /* The heading follows the reader down the rail, so step four still has the
     question it answers on screen next to it. */
  .systemgrid__head { position: sticky; top: calc(var(--header-h) + 28px); }
  .systemgrid .ladder { margin-top: 4px; }
}
.systemgrid__head .lede { margin-bottom: 0; }

.ladder { list-style: none; margin: 30px 0 0; padding: 0; }
.lstep { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 18px; padding-bottom: 16px; }
.lstep:last-child { padding-bottom: 0; }
/* The rail. It is the component: without it these are five loose cards. */
.lstep::before {
  content: ""; position: absolute; left: 21px; top: 48px; bottom: 0; width: 2px;
  background: var(--line-strong);
}
.lstep:last-child::before { display: none; }
.lstep__n {
  width: 44px; height: 44px; border-radius: 999px; background: var(--green-900);
  color: var(--paper); display: grid; place-items: center;
  font-family: var(--serif); font-size: 19px; margin-top: 2px;
}
.lstep__link {
  display: flex; flex-direction: column; gap: 7px;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--rl);
  padding: 18px 20px;
  transition: border-color var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}
.lstep__link:hover { border-color: var(--green-700); transform: translateY(-2px); }
.lstep__title { margin: 0; font-family: var(--serif); font-weight: 500; font-size: 22px; line-height: 1.2; color: var(--ink); }
.lstep__body { font-size: 15.5px; line-height: 1.55; color: var(--ink-2); }
/* The line the reader recognises himself in. Set apart from the description
   so it can be scanned down the page on its own. */
.lstep__note {
  font-size: 14.5px; line-height: 1.5; color: var(--ink-3);
  border-left: 2px solid var(--line-strong); padding-left: 11px;
}
.lstep__more { margin-top: 2px; font-size: 14px; font-weight: 600; color: var(--green-700); }
/* On a phone the rail is paying for itself in space the card needs. */
@media (max-width: 600px) {
  .lstep { grid-template-columns: 34px minmax(0, 1fr); gap: 12px; }
  .lstep::before { left: 16px; top: 38px; }
  .lstep__n { width: 34px; height: 34px; font-size: 16px; }
  .lstep__link { padding: 16px 17px; }
  .lstep__title { font-size: 20px; }
}

/* ---- the two orders ----------------------------------------------------- */
.orders { display: grid; gap: 14px; margin-top: 28px; }
@media (min-width: 860px) { .orders { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } }
.order { border: 1px solid rgba(244, 241, 233, .18); border-radius: var(--rl); padding: 22px; }
.order--good { border-color: rgba(226, 201, 140, .45); background: rgba(244, 241, 233, .06); }
.order__tag {
  display: inline-block; margin-bottom: 12px; font-size: 12px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase;
}
.order--bad .order__tag { color: var(--green-300); }
.order--good .order__tag { color: var(--gold-light); }
.order .chain { margin: 0; }
/* The wrong order ends nowhere, and the last link says so. */
.band--dark .order--bad .chain__arrow { color: var(--green-500); }
.band--dark .order--bad .accent { color: var(--green-300); text-decoration: line-through; }

/* ---- the services hub ---------------------------------------------------
   Eight channels in one flat grid ask the visitor to diagnose themselves out
   of names that are ours, not theirs. Each group is headed by the problem in
   the owner's own words; the services under it are the answer. */
.sgroup { display: grid; gap: 18px; }
.sgroup + .sgroup { margin-top: clamp(44px, 6vw, 72px); }
@media (min-width: 1000px) {
  .sgroup { grid-template-columns: minmax(0, 350px) minmax(0, 1fr); gap: 56px; align-items: start; }
  /* The complaint stays on screen while the reader works through the answers
     to it. Same idiom as the system rail on /how-we-help/. */
  .sgroup__head { position: sticky; top: calc(var(--header-h) + 28px); }
}
.sgroup__head .lede { margin-bottom: 0; }
/* The complaint above is the pain; this is the other half of the sale. */
.sgroup__gain {
  margin: 16px 0 0; padding-left: 12px; border-left: 2px solid var(--gold);
  font-size: 15px; line-height: 1.5; font-weight: 600; color: var(--ink);
}

.svcs { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.svc__a {
  display: flex; gap: 16px; align-items: flex-start;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--rl);
  padding: 20px;
  transition: border-color var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}
.svc__a:hover { border-color: var(--green-700); transform: translateY(-2px); }
.svc__a .ico { flex: none; width: 44px; height: 44px; border-radius: 12px; }
.svc__a .ico svg { width: 21px; height: 21px; }
.svc__main { display: block; min-width: 0; }
/* The promise leads and the channel name rides beside it: the owner who says
   "nobody finds me" and the one who already buys ads both get their word. */
.svc__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; }
.svc__t {
  margin: 0; font-family: var(--serif); font-weight: 500; font-size: 21px;
  line-height: 1.2; color: var(--ink);
}
.svc__tag {
  font-size: 12px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase;
  color: var(--gold); border: 1px solid var(--line-strong); border-radius: 999px;
  padding: 3px 9px; max-width: 100%; overflow-wrap: anywhere;
}
.svc__b { display: block; margin-top: 7px; font-size: 15.5px; line-height: 1.55; color: var(--ink-2); }
.svc__more { display: block; margin-top: 9px; font-size: 14px; font-weight: 600; color: var(--green-700); }
@media (max-width: 600px) {
  .svc__a { gap: 13px; padding: 17px; }
  .svc__a .ico { width: 38px; height: 38px; border-radius: 11px; }
  .svc__t { font-size: 19px; }
}

/* ---- /about/ ------------------------------------------------------------ */

/* Four facts wrap to two lines on a phone; .proof is a single row by default. */
.proof--wrap { flex-wrap: wrap; row-gap: 10px; margin-top: 22px; }
.hero-v3 .proof--wrap + .actions { margin-top: 22px; }

/* What each of them holds of yours, under the bio. */
.person-card__does { list-style: none; margin: 16px 0 0; padding: 16px 0 0; border-top: 1px solid var(--line); display: grid; gap: 9px; }
.person-card__does li { display: flex; align-items: flex-start; gap: 9px; font-size: 15px; line-height: 1.45; color: var(--ink-2); }
.person-card__does .check { width: 17px; height: 17px; margin-top: 2px; }

/* Principles get the icon every other card block on the site has. */
.principle .ico { width: 40px; height: 40px; border-radius: 11px; margin-bottom: 14px; }
.principle .ico svg { width: 20px; height: 20px; }

/* The two halves of the deal, side by side rather than one behind a tab. */
.pacts { display: grid; gap: 16px; margin-top: 28px; }
@media (min-width: 900px) { .pacts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } }
.band--mid .pact--light .eyebrow { color: var(--gold); }
.pact--dark .eyebrow { color: var(--gold-light); }
.pact__list { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 12px; }
.pact--light .pact__list li { color: var(--ink-2); font-size: 16.5px; }
.pact--dark .pact__list li { color: var(--green-100); font-size: 16.5px; }

/* The four states as a row of chips: the paragraph above used to list them in
   prose, which is a worse way to show four short names. */
.ticks--row { display: flex; flex-wrap: wrap; gap: 10px 18px; max-width: none; margin-top: 18px; }
.ticks--row li { font-size: 15px; font-weight: 600; color: var(--ink); }

/* ---- the ask -------------------------------------------------------------
   Every page ends in one button. The site used to end in a three-field form;
   a contractor with one hand free taps a button and does not fill in a form,
   and the fields were only ever telling us what the conversation would. */
.talk { display: grid; gap: 16px; justify-items: start; }
.talk .btn { gap: 10px; }
.btn--lg { min-height: 56px; padding: 0 26px; font-size: 17px; }
.talk__proof { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.talk__proof li { display: flex; align-items: flex-start; gap: 9px; font-size: 15px; line-height: 1.45; color: var(--ink-2); }
.talk__proof .check { width: 18px; height: 18px; margin-top: 1px; }
.band--dark .talk__proof li, .band--mid .talk__proof li { color: var(--green-100); }
/* Dark-band text must not bleed into a white CTA card. */
.band--dark .formCard .talk__proof li,
.band--mid .formCard .talk__proof li,
.band--cta .formCard .talk__proof li { color: var(--ink-2); }
.formCard .talk__proof .check svg { stroke: var(--green-700); }
.talk-wrap { margin-top: 26px; }
/* Inside the white card on the home, the card already supplies the padding. */
.formCard .talk { gap: 18px; }
.formCard--talk { display: grid; align-content: center; gap: 14px; }

/* ---- the offer card ------------------------------------------------------
   What sits beside the headline. It replaced a sample of the free report: the
   page sells the work now, so the card is the work. */
.ocard {
  background: var(--white); color: var(--ink); border-radius: var(--rl);
  padding: 24px; box-shadow: var(--shadow);
}
.ocard__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ocard__brand { font-family: var(--serif); font-size: 19px; font-weight: 500; }
.ocard__pill {
  font-size: 11px; font-weight: 700; letter-spacing: .08em; color: var(--gold);
  border: 1px solid var(--line-strong); border-radius: 999px; padding: 4px 10px;
}
.ocard__title {
  margin: 16px 0 14px; font-family: var(--serif); font-weight: 500;
  font-size: 22px; line-height: 1.2; color: var(--ink);
}
.ocard__rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ocard__row { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px; align-items: start; }
.ocard__n {
  width: 26px; height: 26px; border-radius: 999px; background: var(--green-900);
  color: var(--paper); display: grid; place-items: center;
  font-family: var(--serif); font-size: 13px;
}
.ocard__row b { display: block; font-size: 15.5px; }
.ocard__row span span { display: block; margin-top: 2px; font-size: 14px; line-height: 1.45; color: var(--ink-3); }
.ocard__foot {
  margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--line);
  font-size: 14px; line-height: 1.5; color: var(--ink-2); font-weight: 600;
}
.band--dark .ocard__title { color: var(--ink); }
.band--dark .ocard__foot { color: var(--ink-2); }
.section.band--dark .micro { color: var(--green-100); }

/* Cards on dark bands have their own light surface and need dark copy. */
.section.band--dark .formCard .eyebrow,
.section.band--mid .formCard .eyebrow { color: var(--green-700); }
.section.band--dark .formCard :is(.micro, .lede, p),
.section.band--mid .formCard :is(.micro, .lede, p) { color: var(--ink-2); }

/* Visual funnel. Scoped so detailed service pages keep their own layout. */
.funnel-home { --f-ink: #17372b; --f-muted: #526158; --f-lime: #d7f76a; --f-paper: #fafbf6; --f-line: #dde4d8; --header-h: 82px; background: var(--f-paper); color: var(--f-ink); }
.funnel-home .site-header { background: rgba(250,251,246,.96); border-bottom: 1px solid var(--f-line); }
.funnel-home .brand, .funnel-home .links a, .funnel-home .lang__btn { color: var(--f-ink); }
.funnel-home .brand { font-size: 29px; }
.funnel-home .lang__btn.is-active { background: var(--f-ink); color: white; }
.funnel-home .btn-wa { background: var(--f-ink); color: white; }
.funnel-home .btn.primary { background: var(--f-ink); color: white; border-radius: 999px; }
.funnel-home .hamb { color: var(--f-ink); border-color: var(--f-line); }
.funnel-home .hamb span { background: var(--f-ink); }
.funnel-home .hamb:focus-visible { outline-color: var(--f-ink); }
.funnel-home .navright .btn-wa { display: none; }
.funnel-home .nav { min-height: 82px; }
.funnel-home .wrap { width: min(1200px, calc(100% - 64px)); }
.funnel { overflow: clip; }
.funnel-shell { width: min(1200px, calc(100% - 64px)); margin-inline: auto; }
.funnel h1, .funnel h2, .funnel h3 { font-family: var(--sans); color: var(--f-ink); font-weight: 600; margin: 0; }
.funnel h2 { font-size: clamp(34px,4vw,52px); line-height: 1.07; }
.funnel p { margin: 0; }
.funnel .funnel-kicker { display: flex; align-items: center; gap: 10px; color: var(--f-muted); font-size: 11px; line-height: 1.5; font-weight: 600; letter-spacing: .12em; }
.funnel-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--f-ink); box-shadow: 0 0 0 4px #e5ecdc; }
.funnel-button { display: inline-flex; justify-content: center; align-items: center; gap: 18px; min-height: 58px; padding: 14px 24px; border-radius: 999px; background: var(--f-lime); color: var(--f-ink); font-size: 16px; font-weight: 600; line-height: 1.35; transition: background .18s, transform .18s; }
.funnel-button:hover { background: #c7ec4b; color: var(--f-ink); transform: translateY(-2px); }
.funnel-button svg { flex: none; }
.funnel-button--dark { background: var(--f-ink); color: white; }
.funnel-button--dark:hover { background: #2e513e; color: white; }
.funnel-secondary { display: flex; width: fit-content; gap: 8px; align-items: center; font-size: 14px; color: var(--f-ink); min-height: 44px; margin-top: 6px; }
.funnel-secondary:hover { text-decoration: underline; }
.funnel-hero { padding: 68px 0 58px; }
.funnel-hero__grid { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 40px; }
.funnel-hero h1 { font-size: clamp(46px,5.1vw,72px); line-height: 1.01; margin: 26px 0 22px; }
.funnel-hero h1 > span { color: #61795c; }
.funnel-intro { font-size: 18px; line-height: 1.65; color: var(--f-muted); max-width: 43ch; margin-bottom: 27px !important; }
.funnel-reassurance { color: var(--f-muted); font-size: 12px; line-height: 1.6; margin-top: 18px !important; max-width: 42ch; }

/* The graphic is a schematic, with no fabricated client names or metrics. */
.growth-scene { margin: 0; min-width: 0; }
.growth-scene__canvas { position: relative; width: 100%; aspect-ratio: 600 / 580; min-height: 440px; background: #eef2e7; border-radius: 34% 34% 10% 10%; }
.growth-route { position: absolute; width: 100%; height: 100%; inset: 0; }
.growth-route__dash { animation: route-travel 15s linear infinite; }
.scene-search, .scene-message, .scene-booking { position: absolute; box-shadow: 0 16px 45px -24px #17372b55; }
.scene-search { top: 8%; left: 3%; width: 65%; padding: 20px; border-radius: 16px; background: white; transform: rotate(-5deg); border: 1px solid #e1e6da; animation: scene-enter .8s .1s both; }
.scene-step { font-size: 10px; font-weight: 600; line-height: 1.4; letter-spacing: .04em; display: block; }
.scene-search .scene-step { color: #557048; margin-bottom: 14px; }
.scene-search__query { background: #f2f4ed; color: #53604c; display: flex; gap: 9px; align-items: center; padding: 9px 12px; border-radius: 7px; font-size: 11px; }
.scene-search__query svg { width: 16px; height: 16px; flex: none; }
.scene-result { display: flex; gap: 12px; align-items: center; margin-top: 17px; }
.scene-logo { width: 38px; height: 38px; display: grid; place-items: center; background: var(--f-ink); color: var(--f-lime); border-radius: 11px; font: 28px var(--serif); }
.scene-result > div { flex: 1; }
.scene-result b { color: var(--f-ink); font-size: 14px; font-weight: 600; }
.scene-lines { display: grid; gap: 5px; margin-top: 7px; }
.scene-lines i { width: 85%; height: 4px; background: #e7ebdf; border-radius: 4px; }
.scene-lines i + i { width: 55%; }
.scene-check { color: #486237; }
.scene-message { top: 38%; right: 0; width: 63%; background: var(--f-ink); color: #fff; border-radius: 16px; padding: 20px; transform: rotate(4deg); animation: scene-enter .8s .25s both; }
.scene-message .scene-step { color: #d7e4ce; margin-bottom: 13px; }
.scene-bubble { display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 91%; background: #31523f; padding: 11px 13px; border-radius: 10px 10px 10px 2px; font-size: 14px; }
.scene-bubble--reply { background: var(--f-lime); color: var(--f-ink); margin: 9px 0 0 auto; width: 73%; border-radius: 10px 10px 2px 10px; }
.scene-bubble--reply svg { width: 17px; height: 17px; }
.scene-booking { left: 6%; bottom: 4%; width: 68%; display: flex; align-items: center; gap: 14px; padding: 18px 20px; background: var(--f-lime); color: var(--f-ink); border-radius: 14px; transform: rotate(-3deg); animation: scene-enter .8s .4s both; }
.scene-booking__icon { display: grid; place-items: center; width: 39px; height: 39px; flex: none; border-radius: 50%; border: 1px solid #81993a; }
.scene-booking b { display: block; font-size: 15px; font-weight: 600; margin-top: 5px; }
.scene-spark { position: absolute; line-height: 1; font-size: 70px; color: var(--f-ink); }
.scene-spark--one { right: 9%; top: 9%; transform: rotate(12deg); }
.scene-spark--two { left: 8%; top: 52%; color: #8ba779; font-size: 45px; }
.growth-scene figcaption { display: flex; justify-content: space-between; padding: 22px 14px 0; font-size: 11px; color: var(--f-muted); }
.growth-scene figcaption span { font-size: 18px; }

.funnel-sectors { border-top: 1px solid var(--f-line); border-bottom: 1px solid var(--f-line); padding: 23px 0; }
.funnel-sectors .funnel-shell { display: flex; gap: 28px; align-items: center; }
.funnel-sectors .funnel-shell > span { font-size: 11px; color: var(--f-muted); max-width: 18ch; line-height: 1.5; }
.funnel-sectors ul { list-style: none; padding: 0; margin: 0; display: flex; flex: 1; justify-content: space-between; gap: 20px; }
.funnel-sectors li { font-size: 14px; font-weight: 500; color: var(--f-ink); }
.funnel-picker { padding: 88px 0 96px; scroll-margin-top: 0; }
.funnel-section-head { margin-bottom: 42px; }
.funnel-section-head h2 { margin: 13px 0 16px; }
.funnel-section-head > p:last-child { font-size: 17px; color: var(--f-muted); }
.funnel-picker__grid { display: grid; grid-template-columns: 1fr 1.08fr; gap: 72px; align-items: center; }
.funnel-choices { display: grid; }
.funnel-choice { display: flex; align-items: center; gap: 18px; padding: 25px 20px; border-bottom: 1px solid var(--f-line); color: var(--f-ink); font-size: 18px; line-height: 1.4; font-weight: 500; }
.funnel-choice:hover { color: var(--f-ink); background: #edf1e5; }
.funnel-choice[aria-selected="true"] { background: var(--f-ink); color: white; border-radius: 13px; border-color: transparent; }
.funnel-choice__icon { width: 42px; height: 42px; flex: none; display: grid; place-items: center; }
.funnel-choice[aria-selected="true"] .funnel-choice__icon { color: var(--f-lime); }
.funnel-choice__arrow { margin-left: auto; font-size: 22px; font-weight: 400; }
.funnel-picker__note { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--f-muted); margin-top: 23px !important; }
.funnel-results { min-width: 0; }
.funnel-result { background: #eef2e4; padding: 30px 34px; border: 1px solid #e2e8d6; border-radius: 22px; scroll-margin-top: 100px; }
.funnel-result + .funnel-result { margin-top: 22px; }
.funnel-ready .funnel-result { margin: 0; animation: result-enter .28s ease-out; }
.funnel-result[hidden] { display: none; }
.funnel-result__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; height: 115px; }
.funnel-result__top .funnel-kicker { padding-top: 8px; }
.solution-art { height: 133px; width: 190px; color: #587348; margin-top: -14px; }
.art-fill { fill: #fafbf6; }
.art-solid { fill: #17372b; stroke: #17372b; }
.art-pointer { fill: #d7f76a; stroke: #17372b; }
.art-check { stroke: #d7f76a; stroke-width: 3; }
.funnel-result h3 { font-size: 36px; line-height: 1.08; max-width: 16ch; }
.funnel-result__body { font-size: 16px; line-height: 1.65; color: var(--f-muted); margin-top: 17px !important; max-width: 45ch; }
.funnel-deliverables { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 7px; }
.funnel-deliverables li { display: flex; gap: 9px; align-items: center; font-size: 14px; line-height: 1.45; }
.funnel-deliverables svg { width: 16px; height: 16px; flex: none; color: #446c37; }
.funnel-tech { font-size: 10px; color: #56694e; line-height: 1.7; margin: 19px 0 22px !important; }
.funnel-result .funnel-button { width: 100%; }
.funnel-detail { display: flex; justify-content: center; align-items: center; gap: 9px; min-height: 44px; margin-top: 4px; font-size: 12px; color: var(--f-ink); }
.funnel-detail:hover { text-decoration: underline; }

.home-examples { padding: 66px 0 48px; background: #eef2e7; border-top: 1px solid var(--f-line); }
.home-examples .funnel-section-head h2 { max-width: 24ch; }
.home-examples__grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 32px; }
.home-example { display: flex; flex-direction: column; min-width: 0; border-top: 1px solid #c5d0bd; padding-top: 24px; }
.home-example__icon { display: grid; place-items: center; width: 48px; height: 48px; background: var(--f-ink); color: var(--f-lime); border-radius: 50%; margin-bottom: 20px; }
.home-example .home-example__sector { font-size: 11px; color: var(--f-muted); line-height: 1.5; margin-bottom: 12px; }
.home-example h3 { font-size: 29px; line-height: 1.12; max-width: 19ch; }
.home-example .home-example__body { font-size: 15px; line-height: 1.65; color: var(--f-muted); margin: 15px 0 24px; }
.home-example__steps { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; list-style: none; padding: 0; margin: auto 0 0; font-size: 11px; line-height: 1.5; color: var(--f-ink); }
.home-example__steps li { display: flex; align-items: center; gap: 7px; }
.home-example__steps li + li::before { content: "→"; color: #61795c; }
.home-example__steps li:last-child { font-weight: 600; }
.home-automation { display: flex; align-items: center; gap: 20px; margin-top: 42px; padding-top: 28px; border-top: 1px solid #c5d0bd; }
.home-automation__symbol { color: var(--f-ink); font-size: 38px; flex: none; }
.home-automation h3 { font-size: 22px; }
.home-automation p { font-size: 14px; color: var(--f-muted); line-height: 1.6; margin-top: 7px; max-width: 62ch; }
.home-automation a { display: inline-flex; align-items: center; gap: 10px; color: var(--f-ink); font-size: 13px; min-height: 44px; margin-left: auto; flex: none; }
.home-automation a:hover { text-decoration: underline; }
.home-conversation { width: fit-content; max-width: 100%; margin: 0 auto 27px; padding: 22px 28px; border: 1px solid var(--f-line); border-radius: 16px; text-align: left; }
.home-conversation h3 { font-size: 16px; }
.home-conversation ul { display: grid; gap: 9px; list-style: none; padding: 0; margin: 15px 0 0; }
.home-conversation li { display: flex; align-items: center; gap: 10px; font-size: 14px; line-height: 1.5; color: var(--f-muted); }
.home-conversation svg { width: 17px; height: 17px; flex: none; color: #446c37; }
.funnel-method { background: var(--f-ink); color: #f6f8ef; padding: 74px 0 0; scroll-margin-top: 0; }
.funnel-method .funnel-kicker { color: #b8ccb2; }
.funnel-method h2, .funnel-method h3 { color: #f6f8ef; }
.funnel-method h2 { margin-top: 16px; max-width: 19ch; }
.funnel-method__steps { padding: 0; margin: 48px 0 55px; list-style: none; display: grid; grid-template-columns: repeat(3,1fr); gap: 40px; }
.funnel-method__steps li { position: relative; padding-top: 28px; border-top: 1px solid #69805f; }
.funnel-method__steps li::before { content: ""; position: absolute; width: 8px; height: 8px; background: var(--f-lime); border-radius: 50%; top: -5px; left: 0; }
.method-number { font-size: 12px; color: #bbd1b3; letter-spacing: .1em; }
.funnel-method__steps h3 { font-size: 29px; margin: 7px 0 10px; }
.funnel-method__steps p { color: #c1d1b9; font-size: 16px; max-width: 27ch; line-height: 1.6; }
.funnel-ownership { display: flex; align-items: center; gap: 20px; border-top: 1px solid #496141; padding: 28px 0; }
.ownership-symbol { width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid #8eaa74; border-radius: 50%; color: var(--f-lime); flex: none; }
.funnel-ownership h3 { font-size: 20px; }
.funnel-ownership p { font-size: 13px; color: #c1d1b9; margin-top: 5px; }
.funnel-ownership a { margin-left: auto; color: #f6f8ef; display: inline-flex; gap: 14px; align-items: center; font-size: 13px; min-height: 44px; flex: none; }
.funnel-close { padding: 78px 0 84px; text-align: center; }
.funnel-close__star { font-size: 58px; line-height: 1; color: #6a8658; display: block; margin-bottom: 20px; }
.funnel-close h2 { max-width: 17ch; margin-inline: auto; font-size: clamp(40px,5vw,66px); }
.funnel-close p { font-size: 17px; color: var(--f-muted); max-width: 43ch; margin: 20px auto 27px; }
.funnel-close small { display: block; color: var(--f-muted); margin-top: 18px; font-size: 11px; }
.funnel-home footer { background: var(--f-paper); border-top: 1px solid var(--f-line); padding: 28px 0; color: var(--f-muted); }
.funnel-footer { display: flex; gap: 22px; justify-content: space-between; align-items: center; flex-wrap: wrap; }
.funnel-footer .brand { color: var(--f-ink); }
.funnel-footer nav { display: flex; gap: 25px; flex-wrap: wrap; }
.funnel-footer nav a { font-size: 13px; color: var(--f-ink); display: inline-flex; align-items: center; min-height: 44px; }
.funnel-footer small { font-size: 11px; }

@keyframes route-travel { to { stroke-dashoffset: -170; } }
@keyframes scene-enter { from { translate: 0 14px; } to { translate: 0 0; } }
@keyframes result-enter { from { translate: 0 8px; } to { translate: 0 0; } }
@media (max-width: 1150px) {
  .funnel-home .site-menu[open] + .links { background: var(--f-paper); border-color: var(--f-line); }
  .funnel-home .site-menu[open] + .links .links__cta { color: white; background: var(--f-ink); }
  .funnel-home .navright .btn-wa { display: inline-flex; }
}
@media (max-width: 1000px) {
  .funnel-hero__grid { gap: 24px; }
  .funnel-hero h1 { font-size: 52px; }
  .funnel-picker__grid { gap: 32px; }
  .funnel-choice { padding: 22px 14px; font-size: 16px; gap: 10px; }
  .scene-search, .scene-message { padding: 16px; }
  .scene-booking { padding: 13px; }
  .scene-booking b { font-size: 12px; }
  .scene-booking__icon { width: 30px; height: 30px; }
  .funnel-sectors ul { flex-wrap: wrap; justify-content: flex-start; gap: 8px 24px; }
}
@media (max-width: 760px) {
  .funnel-home { --header-h: 66px; }
  .funnel-home .wrap, .funnel-shell { width: calc(100% - 40px); }
  .funnel-home .nav { min-height: 66px; }
  .funnel-home .site-menu[open] + .links { background: var(--f-paper); border-color: var(--f-line); }
  .funnel-home .site-menu[open] + .links .links__cta { color: white; background: var(--f-ink); }
  .funnel-home .navright .btn-wa { display: inline-flex; }
  .funnel-hero { padding: 43px 0 30px; }
  .funnel-hero__grid { grid-template-columns: 1fr; gap: 34px; }
  .funnel-hero h1 { font-size: clamp(43px,8.8vw,62px); margin: 21px 0 19px; max-width: 16ch; }
  .funnel-intro { font-size: 16px; max-width: 42ch; margin-bottom: 23px !important; }
  .funnel-hero .funnel-button { min-height: 56px; }
  .funnel-reassurance { font-size: 11px; margin-top: 10px !important; }
  .growth-scene { max-width: 500px; width: 100%; justify-self: center; }
  .growth-scene__canvas { aspect-ratio: 600 / 640; }
  .growth-scene figcaption { padding-top: 17px; font-size: 10px; }
  .scene-step { font-size: 9px; }
  .scene-search__query { font-size: 10px; padding: 7px 8px; }
  .scene-search .scene-step { margin-bottom: 9px; }
  .scene-result { margin-top: 12px; gap: 8px; }
  .scene-logo { width: 31px; height: 31px; font-size: 23px; }
  .scene-result b { font-size: 12px; }
  .scene-bubble { font-size: 12px; padding: 8px 10px; }
  .scene-message { top: 42%; padding: 14px; }
  .scene-message .scene-step { margin-bottom: 9px; }
  .scene-spark--one { font-size: 51px; }
  .scene-spark--two { font-size: 34px; }
  .scene-booking { bottom: 1%; width: 76%; }
  .funnel-sectors { padding: 22px 0; }
  .funnel-sectors .funnel-shell { display: block; }
  .funnel-sectors .funnel-shell > span { display: block; max-width: none; margin-bottom: 14px; }
  .funnel-sectors ul { gap: 9px 18px; }
  .funnel-sectors li { font-size: 12px; }
  .funnel-picker { padding: 51px 0 55px; scroll-margin-top: 0; }
  .funnel-section-head { margin-bottom: 25px; }
  .funnel-section-head h2 { max-width: 16ch; }
  .funnel-section-head > p:last-child { font-size: 15px; }
  .funnel-picker__grid { grid-template-columns: 1fr; gap: 22px; }
  .funnel-choices { grid-template-columns: 1fr 1fr; gap: 8px; }
  .funnel-choice { border: 1px solid var(--f-line); border-radius: 12px; padding: 14px; display: grid; grid-template-columns: 1fr auto; align-content: start; gap: 8px; font-size: 13px; min-height: 113px; }
  .funnel-choice__icon { width: 24px; height: 24px; }
  .funnel-choice > span:nth-child(2) { grid-row: 2; grid-column: 1 / -1; }
  .funnel-choice__arrow { grid-row: 1; grid-column: 2; font-size: 18px; }
  .funnel-picker__note { font-size: 11px; margin-top: 15px !important; }
  .funnel-result { padding: 23px; border-radius: 17px; }
  .funnel-result h3 { font-size: 33px; }
  .funnel-result__body { font-size: 15px; }
  .funnel-result__top { height: 100px; }
  .solution-art { width: 148px; height: 109px; }
  .funnel-result .funnel-kicker { font-size: 10px; }
  .home-examples { padding: 46px 0 34px; }
  .home-examples .funnel-section-head h2 { max-width: 20ch; }
  .home-examples__grid { grid-template-columns: 1fr; gap: 27px; }
  .home-example { display: grid; grid-template-columns: 42px minmax(0,1fr); column-gap: 16px; padding-top: 22px; }
  .home-example__icon { grid-row: 1 / 5; width: 42px; height: 42px; margin: 0; }
  .home-example > :not(.home-example__icon) { grid-column: 2; }
  .home-example h3 { font-size: 26px; }
  .home-example .home-example__body { font-size: 14px; margin: 11px 0 16px; }
  .home-example .home-example__sector { font-size: 10px; margin-bottom: 8px; }
  .home-example__steps { font-size: 10px; gap: 5px; }
  .home-example__steps li { gap: 5px; }
  .home-automation { display: grid; grid-template-columns: 42px minmax(0,1fr); gap: 10px 16px; margin-top: 28px; }
  .home-automation h3 { font-size: 21px; }
  .home-automation a { grid-column: 2; margin-left: 0; font-size: 12px; }
  .home-conversation { padding: 20px; }
  .home-conversation li { font-size: 13px; }
  .funnel-method { padding: 48px 0 0; }
  .funnel-method__steps { grid-template-columns: 1fr; gap: 24px; margin: 35px 0; }
  .funnel-method__steps li { border-top: none; border-left: 1px solid #69805f; padding: 0 0 0 24px; display: grid; grid-template-columns: 30px 1fr; column-gap: 16px; }
  .funnel-method__steps li::before { top: 10px; left: -4px; }
  .method-number { grid-row: 1 / 3; padding-top: 6px; }
  .funnel-method__steps h3 { margin: 0 0 5px; font-size: 24px; }
  .funnel-method__steps p { font-size: 14px; max-width: 30ch; }
  .funnel-ownership { gap: 14px; flex-wrap: wrap; }
  .funnel-ownership > div { flex: 1; }
  .funnel-ownership h3 { font-size: 18px; }
  .funnel-ownership p { font-size: 12px; }
  .funnel-ownership a { margin: 0 0 0 62px; }
  .funnel-close { padding: 50px 0 58px; }
  .funnel-close p { font-size: 15px; }
  .funnel-footer { gap: 12px; }
  .funnel-footer nav { gap: 18px; }
  .funnel-footer small { width: 100%; }
}
@media (max-width: 420px) { .funnel-home .brand { font-size: 24px; } }
@media (max-width: 360px) { .funnel-home .navright .btn-wa { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .funnel *, .funnel *::before, .funnel *::after { animation: none !important; transition: none !important; scroll-behavior: auto; }
}

/* Shared visual language for every public page. */
.funnel-home { --green-900:#17372b; --green-700:#3d6549; --cream:#fafbf6; --sand:#eef2e4; --gold:#3d6549; --ink:#17372b; --ink-2:#526158; --ink-3:#526158; --line:#dde4d8; }
.inner-page .crumbs { margin:0 0 42px; color:var(--f-muted); font-size:12px; }
.inner-page .crumbs a, .inner-page .crumbs span { color:var(--f-muted); }
.inner-hero { padding:28px 0 70px; border-bottom:1px solid var(--f-line); }
.inner-hero__grid { display:grid; grid-template-columns:1.15fr 1fr; gap:65px; align-items:center; }
.inner-hero h1 { font-size:clamp(38px,4.7vw,65px); line-height:1.05; max-width:19ch; margin:18px 0 24px; }
.inner-lede { color:var(--f-muted); font-size:18px; line-height:1.65; max-width:52ch; }
.inner-actions { display:flex; align-items:center; gap:14px 24px; flex-wrap:wrap; margin-top:29px; }
.inner-text-link { color:var(--f-ink); font-size:14px; min-height:44px; display:inline-flex; align-items:center; gap:12px; text-decoration:underline; text-underline-offset:5px; }
.inner-note { color:var(--f-muted); font-size:12px; line-height:1.6; margin-top:20px!important; }
.inner-visual { position:relative; isolation:isolate; display:grid; place-items:center; margin:0; min-width:0; aspect-ratio:1.1; background:#eef2e4; border-radius:48% 48% 22px 22px; padding:32px; }
.inner-visual__orbit { position:absolute; width:76%; aspect-ratio:1; border:1px solid #d0dbc4; border-radius:50%; z-index:-1; }
.inner-visual__orbit::before { content:''; position:absolute; inset:25px; border:1px dashed #9db58b; border-radius:50%; animation:inner-orbit 60s linear infinite; }
.inner-visual__spark { position:absolute; top:12%; right:9%; font-size:55px; line-height:1; color:#59734c; }
.inner-visual__art { width:90%; transform:rotate(-5deg); }
.inner-visual .solution-art { width:100%; height:auto; margin:0; }
.inner-visual figcaption { display:flex; align-items:center; gap:13px; background:var(--f-lime); padding:20px 25px; border-radius:12px; font-weight:600; font-size:16px; line-height:1.35; width:100%; transform:rotate(-3deg); }
.inner-visual__check { width:34px; height:34px; border:1px solid #839c47; border-radius:50%; flex:none; display:grid; place-items:center; }
.inner-section { padding:72px 0; }
.inner-section--tint { background:#eef2e4; }
.inner-section-head { display:flex; align-items:end; justify-content:space-between; gap:24px; }
.inner-section-head>p { color:var(--f-muted); font-size:15px; max-width:32ch; }
.inner-section h2 { max-width:24ch; }
.delivery-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px; list-style:none; padding:0; margin:38px 0 0; }
.delivery-grid li { border-top:1px solid #b8c9ab; padding-top:22px; }
.delivery-number { color:#486538; font-size:12px; font-weight:600; letter-spacing:.1em; }
.delivery-grid h3 { font-size:25px; line-height:1.2; margin:18px 0 14px; }
.delivery-grid p { font-size:16px; color:var(--f-muted); line-height:1.65; }
.inner-split { display:grid; grid-template-columns:1fr 1.25fr; gap:75px; align-items:start; }
.inner-faqs details, .inner-disclosure { border-bottom:1px solid #cbd6c2; }
.inner-faqs summary, .inner-disclosure summary { display:flex; align-items:center; justify-content:space-between; gap:25px; list-style:none; cursor:pointer; padding:22px 0; color:var(--f-ink); font-size:17px; font-weight:500; line-height:1.45; }
.inner-faqs summary::-webkit-details-marker,.inner-disclosure summary::-webkit-details-marker { display:none; }
.inner-faqs summary>span,.inner-disclosure summary>span { font-size:24px; flex:none; transition:transform .2s; }
.inner-faqs details[open] summary>span,.inner-disclosure[open] summary>span { transform:rotate(45deg); }
.inner-faqs details>div { color:var(--f-muted); font-size:16px; line-height:1.75; padding:0 0 24px; }
.inner-faqs details:first-child summary { padding-top:0; }
.inner-disclosure { margin-top:32px; border-top:1px solid #cbd6c2; }
.inner-disclosure ul { max-width:80ch; color:var(--f-muted); font-size:16px; padding:0 0 20px 22px; }
.inner-disclosure li+li { margin-top:16px; }
.inner-cards { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; margin-top:34px; }
.inner-card { display:flex; flex-direction:column; padding:28px 32px; border:1px solid var(--f-line); border-radius:20px; background:#fff; color:var(--f-ink); min-width:0; transition:transform .2s,border-color .2s; }
.inner-card:hover { transform:translateY(-4px); border-color:#90ad79; color:var(--f-ink); }
.inner-card__top { display:flex; align-items:center; justify-content:space-between; height:116px; gap:20px; }
.inner-card__top .solution-art { width:160px; height:110px; margin:0; }
.inner-card h3 { font-size:29px; line-height:1.15; margin:16px 0; }
.inner-card p { color:var(--f-muted); font-size:16px; line-height:1.65; margin-bottom:22px; }
.inner-card__link { display:flex; align-items:center; justify-content:space-between; gap:16px; font-size:13px; font-weight:600; margin-top:auto; min-height:44px; border-top:1px solid var(--f-line); padding-top:12px; }
.inner-card__link>span { font-size:24px; }
.inner-cards--compact { grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); }
.inner-cards--compact .inner-card__top { height:80px; }
.inner-cards--compact .solution-art { width:120px; height:83px; }
.inner-cards--compact h3 { font-size:24px; }
.inner-service-group { display:grid; grid-template-columns:1fr 2fr; gap:45px; padding:48px 0; border-top:1px solid var(--f-line); }
.inner-service-group:first-child { border:0; padding-top:0; }
.inner-service-group:last-child { padding-bottom:0; }
.inner-service-group__head { padding-top:16px; }
.inner-service-group__head h2 { font-size:34px; margin:16px 0; }
.inner-service-group__head>p:last-child { color:var(--f-muted); font-size:16px; line-height:1.65; }
.inner-service-group .inner-cards { margin:0; }
.inner-people { display:grid; grid-template-columns:1fr 1fr; gap:40px; list-style:none; margin:38px 0 0; padding:0; }
.inner-person { display:flex; align-items:start; gap:24px; }
.inner-person__portrait { width:120px; height:150px; flex:none; border-radius:60px 60px 18px 18px; background:#e4ebd8; display:grid; place-items:center; overflow:hidden; }
.inner-person__portrait>span { font:70px var(--serif); color:#3d6549; }
.inner-person__portrait img { width:100%; height:100%; object-fit:cover; }
.inner-person h3 { font-size:30px; margin:8px 0; }
.inner-person__role { color:#3d6549!important; font-size:13px!important; margin-bottom:15px!important; font-weight:600; }
.inner-person p { font-size:16px; color:var(--f-muted); line-height:1.65; }
.inner-contact-options { display:grid; grid-template-columns:1fr 1fr; gap:60px; }
.inner-contact-options h2 { font-size:32px; margin-bottom:22px; }
.inner-contact-options p { font-size:18px; color:var(--f-muted); margin-bottom:22px; }
.inner-email { color:var(--f-ink); font-size:clamp(20px,3vw,36px); letter-spacing:-.04em; overflow-wrap:anywhere; text-decoration:underline; text-underline-offset:7px; }
.inner-article-head { max-width:940px; }
.inner-article-head h1 { max-width:25ch; font-size:clamp(36px,4.6vw,60px); }
.inner-article-head .funnel-button { margin-top:25px; }
.inner-article .prose h2 { font-size:34px; margin:48px 0 20px; max-width:none; }
.inner-article .prose h2:first-child { margin-top:0; }
.inner-article .prose h3 { font-size:26px; margin:30px 0 14px; }
.inner-article .prose p,.inner-article .prose ul,.inner-article .prose ol { font-size:17px; line-height:1.8; margin:0 0 24px; color:var(--f-muted); }
.inner-article .prose a { text-decoration:underline; text-underline-offset:3px; }
.inner-article .prose .btn { text-decoration:none; border-radius:999px; background:var(--f-ink); color:white; }
.inner-article .toc { top:110px; background:transparent; border-left:1px solid var(--f-line); border-radius:0; }
.inner-article .toc a { color:var(--f-muted); font-size:13px; }
.inner-article .toc a:hover { color:var(--f-ink); }
.inner-article .callout { background:#eef2e4; border-color:#8aa473; border-radius:0 16px 16px 0; }
.inner-article .callout strong { font-family:var(--sans); color:var(--f-ink); }
.guide-summary { background:#eef2e4; }
.guide-summary h2 { font-size:30px; }
.guide-summary .delivery-grid { margin-top:28px; }
.inner-article .prose-table caption { text-align:left; color:var(--f-ink); font-weight:600; padding:0 0 16px; font-size:17px; max-width:calc(100vw - 64px); }
.inner-article .prose-table thead th { background:#e4ecd8; }
.inner-article .calc-grid { display:grid; grid-template-columns:1fr; gap:0; border:1px solid #cbd6c2; border-radius:20px; overflow:hidden; }
.inner-article .calc-card { background:#eef2e4; border:0; border-radius:0; padding:28px; }
.inner-article .calc-row label { color:var(--f-ink); font-size:15px; gap:16px; }
.inner-article .calc-val { color:var(--f-ink); font-family:var(--sans); font-size:24px; }
.inner-article .calc-out { background:var(--f-ink); color:#fff; border-radius:0; padding:30px; text-align:left; }
.inner-article .prose .calc-out__big { color:var(--f-lime); font-size:clamp(40px,7vw,60px); font-weight:600; letter-spacing:-.045em; line-height:1.1; margin:0 0 12px; font-family:var(--sans); }
.inner-article .prose .calc-out__note { color:#f6f8ef; font-size:16px; margin:0 0 20px; }
.inner-article .prose .calc-out__disclaimer { color:#c1d1b9; font-size:13px; line-height:1.6; margin:0; }
.inner-article .calc-noscript { padding:24px; }
.inner-article input[type="range"] { accent-color:var(--f-ink); min-height:32px; }
.inner-article input[type="range"]:focus-visible { outline:3px solid #527b39; outline-offset:4px; }
.funnel-footer { gap:18px; }
.funnel-footer nav { gap:18px; }
.funnel-footer small { margin-left:auto; }
.funnel :focus-visible { outline:3px solid #527b39; outline-offset:5px; }
.funnel-method :focus-visible { outline-color:var(--f-lime); }
@keyframes inner-orbit { to { transform:rotate(360deg); } }
@media(max-width:1050px) {
  .inner-hero__grid { gap:30px; }
  .inner-service-group { grid-template-columns:1fr; gap:25px; }
  .inner-service-group__head { max-width:55ch; }
  .inner-person { flex-direction:column; }
  .inner-split { gap:40px; }
}
@media(max-width:760px) {
  .inner-hero { padding:22px 0 40px; }
  .inner-page .crumbs { margin-bottom:30px; font-size:11px; }
  .inner-page .crumbs ol { flex-wrap:wrap; }
  .inner-hero__grid { grid-template-columns:1fr; gap:36px; }
  .inner-hero h1 { font-size:clamp(37px,8.5vw,55px); max-width:21ch; }
  .inner-lede { font-size:16px; }
  .inner-visual { width:100%; max-width:430px; justify-self:center; padding:26px; }
  .inner-visual figcaption { font-size:14px; padding:16px; }
  .inner-section { padding:46px 0; }
  .inner-section-head { display:block; }
  .inner-section-head>p { margin-top:16px; max-width:none; }
  .delivery-grid { grid-template-columns:1fr; gap:24px; margin-top:28px; }
  .delivery-grid li { display:grid; grid-template-columns:28px 1fr; column-gap:18px; padding-top:20px; }
  .delivery-number { padding-top:5px; }
  .delivery-grid h3 { font-size:24px; margin:0 0 12px; }
  .delivery-grid p { grid-column:2; font-size:15px; }
  .inner-split { grid-template-columns:1fr; gap:32px; }
  .inner-cards { grid-template-columns:1fr; gap:16px; }
  .inner-card { padding:22px; }
  .inner-card h3 { font-size:27px; }
  .inner-card__top { height:90px; }
  .inner-card p { font-size:15px; }
  .inner-card__top .solution-art { width:130px; height:90px; }
  .inner-people { grid-template-columns:1fr; gap:34px; }
  .inner-person { flex-direction:row; gap:18px; }
  .inner-person__portrait { width:82px; height:110px; }
  .inner-person__portrait>span { font-size:55px; }
  .inner-person h3 { font-size:28px; }
  .inner-person p { font-size:15px; }
  .inner-contact-options { grid-template-columns:1fr; gap:38px; }
  .inner-article .prose h2 { font-size:29px; }
  .inner-article .prose p,.inner-article .prose ul,.inner-article .prose ol { font-size:16px; }
  .inner-article .toc { position:static; }
  .funnel-footer small { margin-left:0; }
}
@media(prefers-reduced-motion:reduce) { .inner-visual__orbit::before { animation:none; } }