/* ==========================================================================
   TBA Solutions — brand stylesheet
   Palette is taken directly from the logo:
     forest  #425949   orange  #F37C22   black  #010101   white  #FFFFFF
   Every other value below is a tint or shade of those four. No new hues.
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  --forest:      #425949;
  --forest-dk:   #2E3F34;
  --forest-dpr:  #1C2721;
  --forest-lt:   #5F7767;
  --orange:      #F37C22;
  --orange-dk:   #D4670F;
  --orange-lt:   #FDEEE0;
  --ink:         #0B100D;
  --paper:       #FFFFFF;
  --mist:        #F2F5F1;
  --mist-dp:     #E7ECE5;
  --line:        #DCE3DB;
  --muted:       #58665C;
  --faint:       #A4B2A8;

  --font-display: "Archivo", "Segoe UI", sans-serif;
  --font-body:    "IBM Plex Sans", "Segoe UI", sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, monospace;

  /* Radii step with scale — tighter on inner elements, softer on containers */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 22px;

  /* Shadows carry the forest hue instead of neutral black, and stay diffused */
  --shadow-sm: 0 1px 2px rgba(28,39,33,.04), 0 8px 24px -14px rgba(28,39,33,.20);
  --shadow-md: 0 2px 4px rgba(28,39,33,.04), 0 28px 60px -24px rgba(28,39,33,.30);

  /* One motion curve everywhere — weighted, never linear */
  --ease: cubic-bezier(.32,.72,0,1);

  --head-h: 78px;
  --pad-y: clamp(76px, 9vw, 136px);
}

/* Film grain over the whole page. Fixed and inert, so it never repaints on scroll. */
.grain {
  position: fixed;
  inset: 0;
  z-index: 95;
  pointer-events: none;
  opacity: .038;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- 2. Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--head-h) + 12px); -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: clamp(2.3rem, 5vw, 4.05rem); font-weight: 700; letter-spacing: -0.038em; line-height: 1.04; }
h2 { font-size: clamp(1.85rem, 3.4vw, 2.85rem); font-weight: 700; letter-spacing: -0.032em; line-height: 1.08; }
h3 { font-size: 1.16rem; }
h4 { font-size: 1.06rem; }
p  { margin: 0; text-wrap: pretty; }

:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 3px;
  border-radius: 3px;
}

.skip {
  position: absolute; left: 16px; top: -80px; z-index: 200;
  background: var(--forest); color: #fff;
  padding: 12px 18px; border-radius: var(--r-sm);
  transition: top .18s ease;
}
.skip:focus { top: 14px; }

.wrap { width: min(1200px, 100% - 44px); margin-inline: auto; }

/* ---------- 3. Shared type helpers ---------- */
/* A trailing hairline that fades out, rather than the same orange dash on every
   section. Keeps the orange reserved for things you can actually click. */
.eyebrow {
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 22px;
}
.eyebrow::after {
  content: "";
  height: 1px;
  flex: 1 1 auto;
  max-width: 96px;
  background: linear-gradient(90deg, var(--line), transparent);
}
.eyebrow-light { color: rgba(255,255,255,.62); }
.eyebrow-light::after { background: linear-gradient(90deg, rgba(255,255,255,.28), transparent); }

.lede { font-size: 1.09rem; color: var(--muted); max-width: 58ch; }

.ico { width: 24px; height: 24px; flex: none; }
.ico.sm { width: 17px; height: 17px; }

/* ---------- 4. Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 12px 22px;
  min-height: 46px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .95rem;
  cursor: pointer;
  transition: background-color .32s var(--ease), color .32s var(--ease),
              transform .32s var(--ease), box-shadow .32s var(--ease), border-color .32s var(--ease);
}
.btn-lg { padding: 15px 28px; min-height: 54px; font-size: 1rem; }
.btn:active { transform: scale(.975); }

.btn-primary { background: var(--orange); color: #fff; }
.btn-primary:hover { background: var(--orange-dk); box-shadow: 0 16px 34px -12px rgba(212,103,15,.58); }

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

.btn .ico { transition: transform .32s var(--ease); }
.btn:hover .ico { transform: translateX(3px); }

/* The trailing arrow never sits naked next to the label — it gets its own
   circle, set flush against the button's right inner padding. */
.btn-primary:has(.ico) { padding-right: 8px; }
.btn-primary.btn-lg:has(.ico) { padding-right: 10px; }
.btn-primary .ico {
  width: 30px; height: 30px;
  padding: 7px;
  border-radius: 999px;
  background: rgba(255,255,255,.18);
  transition: transform .32s var(--ease), background-color .32s var(--ease);
}
.btn-primary.btn-lg .ico { width: 34px; height: 34px; padding: 8.5px; }
.btn-primary:hover .ico { background: rgba(255,255,255,.3); transform: translate(2px, -1px) scale(1.05); }

/* ---------- 5. Header ---------- */
.site-head {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.site-head.is-stuck { box-shadow: 0 6px 24px rgba(11,16,13,.07); }

.head-inner {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: var(--head-h);
}

.brand { display: flex; align-items: center; gap: 12px; margin-right: auto; }
.brand img { width: 52px; height: auto; }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.22rem;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.brand-name em { font-style: normal; font-weight: 500; color: var(--forest); }
.brand-sub {
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--orange);
  margin-top: 3px;
}

.nav-list { display: flex; align-items: center; gap: 30px; }
.nav-list a {
  position: relative;
  font-size: .95rem;
  font-weight: 500;
  color: var(--muted);
  padding: 6px 0;
  transition: color .18s ease;
}
.nav-list a::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: 2px;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .22s ease;
}
.nav-list a:hover { color: var(--ink); }
.nav-list a:hover::after { transform: scaleX(1); }

/* Which section you are currently reading */
.nav-list a[aria-current="true"] { color: var(--ink); font-weight: 600; }
.nav-list a[aria-current="true"]::after { transform: scaleX(1); }

.nav-foot { display: none; }
.head-cta { flex: none; }

.burger {
  display: none;
  width: 46px; height: 46px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--paper);
  padding: 0;
  cursor: pointer;
  position: relative;
  z-index: 101;   /* stays tappable above the open panel, so it doubles as the close button */
}
.burger span {
  position: absolute;
  left: 13px;
  width: 20px; height: 2px;
  background: var(--forest);
  border-radius: 2px;
  transition: transform .25s ease, opacity .2s ease;
}
.burger span:nth-child(1) { top: 16px; }
.burger span:nth-child(2) { top: 22px; }
.burger span:nth-child(3) { top: 28px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.nav-veil {
  position: fixed; inset: 0;
  background: rgba(28,39,33,.5);
  z-index: 98;
  opacity: 0;
  transition: opacity .25s ease;
}
.nav-veil.is-on { opacity: 1; }

/* ---------- 6. Hero ---------- */
.hero {
  position: relative;
  padding: clamp(56px, 7vw, 96px) 0 clamp(64px, 8vw, 104px);
  background:
    radial-gradient(900px 460px at 88% 8%, rgba(243,124,34,.09), transparent 62%),
    radial-gradient(760px 520px at 4% 96%, rgba(66,89,73,.10), transparent 64%),
    var(--paper);
  overflow: hidden;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.06fr .94fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.hero h1 { margin-bottom: 22px; }
.hero h1 em { font-style: normal; color: var(--forest); }
.hero .lede { margin-bottom: 32px; }

.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 38px; }

.hero-facts { display: grid; gap: 12px; }
.hero-facts li {
  display: flex; align-items: center; gap: 11px;
  font-size: .94rem;
  color: var(--muted);
}
.hero-facts .ico { color: var(--orange); }

/* Signature element: the logo's blade orbit, encircling what the company does */
.hero-art { display: grid; place-items: center; }
.orbit {
  position: relative;
  width: min(100%, 560px);
  aspect-ratio: 1 / .70;
  display: grid;
  place-items: center;
}
.orbit-blade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  animation: blade-in 1.1s cubic-bezier(.22,.9,.3,1) both;
}
@keyframes blade-in {
  from { opacity: 0; transform: scale(.86) rotate(-7deg); }
  to   { opacity: 1; transform: none; }
}

.orbit-core {
  position: relative;
  display: grid;
  gap: 9px;
  width: min(56%, 258px);
}
.orbit-core li {
  background: rgba(255,255,255,.9);
  border: 1px solid rgba(220,227,219,.85);
  border-radius: var(--r-md);
  padding: 13px 17px;
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.9);
  animation: core-in .7s var(--ease) both;
}
.orbit-core li:nth-child(1) { animation-delay: .45s; }
.orbit-core li:nth-child(2) { animation-delay: .60s; transform: translateX(12px); }
.orbit-core li:nth-child(3) { animation-delay: .75s; }
@keyframes core-in {
  from { opacity: 0; transform: translateY(10px); }
}
@keyframes core-in-mid {
  from { opacity: 0; transform: translate(12px, 10px); }
  to   { opacity: 1; transform: translateX(12px); }
}
.orbit-core li:nth-child(2) { animation-name: core-in-mid; }
.orbit-core .oc-k {
  display: block;
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--forest);
}
.orbit-core .oc-v {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .92rem;
  color: var(--ink);
  letter-spacing: -0.01em;
}

/* ---------- 7. Industry strip ---------- */
.strip { background: var(--forest); color: #fff; padding: 22px 0; }
.strip-inner { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.strip-lead {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255,255,255,.78);
}
.strip-list { display: flex; flex-wrap: wrap; gap: 12px 28px; }
.strip-list li {
  font-family: var(--font-display);
  font-size: .98rem;
  font-weight: 500;
  color: #fff;
  position: relative;
  padding-left: 18px;
}
.strip-list li::before {
  content: "";
  position: absolute; left: 0; top: 50%;
  width: 7px; height: 7px;
  margin-top: -3.5px;
  background: var(--orange);
  border-radius: 50%;
}

/* ---------- 8. Section shell ---------- */
.section { padding: var(--pad-y) 0; }
.section-mist { background: var(--mist); }

.sec-head { max-width: 720px; margin-bottom: clamp(40px, 5vw, 62px); }
.sec-head h2 { margin-bottom: 16px; }
.sec-lede { color: var(--muted); font-size: 1.05rem; }

/* ---------- 9. Services ---------- */
.svc-group {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: clamp(28px, 4vw, 56px);
  padding-top: 40px;
  margin-top: 40px;
  border-top: 1px solid var(--line);
}
.svc-group:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }

.svc-label { position: sticky; top: calc(var(--head-h) + 34px); align-self: start; }
.svc-label h3 {
  font-size: clamp(2rem, 3vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  margin-bottom: 12px;
  color: var(--forest);
}
.svc-label p { color: var(--muted); font-size: .94rem; max-width: 30ch; }

/* Services read as a ruled editorial index, not a grid of boxes. Each row is a
   single hit target: the title carries a stretched link over the whole row. */
.svc-list { border-top: 1px solid var(--line); }

.svc-item {
  position: relative;
  display: grid;
  grid-template-columns: 46px 44px 1fr 34px;
  align-items: start;
  column-gap: 18px;
  padding: 26px 20px;
  margin-inline: -20px;          /* the hover wash bleeds past the text edge */
  border-bottom: 1px solid var(--line);
  transition: background-color .32s var(--ease);
}
.svc-item::before {
  content: "";
  position: absolute;
  left: 0; top: -1px; bottom: -1px;
  width: 2px;
  background: var(--orange);
  transform: scaleY(0);
  transform-origin: center top;
  transition: transform .32s var(--ease);
}
.svc-item:hover, .svc-item:focus-within { background: var(--mist); }
.svc-item:hover::before, .svc-item:focus-within::before { transform: scaleY(1); }

.svc-ix {
  font-family: var(--font-mono);
  font-size: .74rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: .1em;
  color: var(--faint);
  padding-top: 7px;
  transition: color .32s var(--ease);
}
.svc-item:hover .svc-ix, .svc-item:focus-within .svc-ix { color: var(--orange); }

.svc-ico { color: var(--forest-lt); padding-top: 1px; transition: color .32s var(--ease); }
.svc-ico .ico { width: 32px; height: 32px; stroke-width: 1.35; }
.svc-item:hover .svc-ico, .svc-item:focus-within .svc-ico { color: var(--forest); }

.svc-body h4 { font-size: 1.15rem; letter-spacing: -0.025em; margin-bottom: 7px; }
.svc-link { transition: color .32s var(--ease); }
.svc-link::after { content: ""; position: absolute; inset: 0; }
.svc-item:hover .svc-link { color: var(--forest); }
.svc-body p { color: var(--muted); font-size: .94rem; line-height: 1.62; max-width: 60ch; }

.svc-go {
  align-self: center;
  justify-self: end;
  color: var(--orange);
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity .32s var(--ease), transform .32s var(--ease);
}
.svc-item:hover .svc-go, .svc-item:focus-within .svc-go { opacity: 1; transform: none; }

/* Touch devices never fire :hover, so keep the affordance visible there. */
@media (hover: none) {
  .svc-go { opacity: .55; transform: none; }
}

/* ---------- 10. Why us ---------- */
.why-grid {
  display: grid;
  grid-template-columns: .92fr 1.08fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.why-copy h2 { margin-bottom: 16px; }
.why-copy .sec-lede { margin-bottom: 28px; }

/* Separated by hairlines and spacing rather than a stack of bordered boxes —
   these are points in an argument, not four things to compare side by side. */
.why-list { display: grid; }
.why-list li {
  display: flex;
  gap: 20px;
  padding: 24px 0;
  border-top: 1px solid var(--line);
}
.why-list li:first-child { border-top: 0; padding-top: 0; }
.why-list li:last-child { padding-bottom: 0; }
.why-ico { flex: none; color: var(--forest); padding-top: 3px; }
.why-ico .ico { width: 26px; height: 26px; stroke-width: 1.4; }
.why-list h3 { font-size: 1.05rem; margin-bottom: 6px; letter-spacing: -0.024em; }
.why-list p { color: var(--muted); font-size: .93rem; line-height: 1.62; }

/* ---------- 11. Process ---------- */
/* A descending staircase, not four equal columns — the offset carries the
   sequence, so the layout says "in this order" before you read a word. */
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: clamp(20px, 3vw, 40px);
}
.step {
  position: relative;
  padding-left: clamp(18px, 2vw, 28px);
  border-left: 1px solid var(--line);
}
.step:nth-child(2) { margin-top: 36px; }
.step:nth-child(3) { margin-top: 72px; }
.step:nth-child(4) { margin-top: 108px; }
.step::before {
  content: "";
  position: absolute;
  left: -1px; top: 0;
  width: 1px; height: 52px;
  background: var(--orange);
}
.step-no {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 4vw, 3.4rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.055em;
  line-height: 1;
  color: #86938A;      /* quiet, but still clears 3:1 at this size */
  margin-bottom: 18px;
}
.step h3 { margin-bottom: 9px; font-size: 1.22rem; letter-spacing: -0.028em; }
.step p { color: var(--muted); font-size: .93rem; line-height: 1.62; }

/* ---------- 12. Support & AMC ---------- */
.support {
  position: relative;
  background: var(--forest-dk);
  color: #fff;
  overflow: hidden;
}
.support-mark {
  position: absolute;
  right: -170px; top: 50%;
  width: 700px;
  transform: translateY(-50%);
  opacity: .09;
  pointer-events: none;
}
.support-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
.support h2 { margin-bottom: 16px; }
.support-copy > p { color: rgba(255,255,255,.78); margin-bottom: 30px; max-width: 52ch; }

.sla {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--r-lg);
  padding: 30px 28px;
  backdrop-filter: blur(4px);
}
.sla-h {
  font-family: var(--font-mono);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 18px;
}
.sla-list { display: grid; gap: 13px; }
.sla-list li {
  display: flex; align-items: flex-start; gap: 12px;
  font-size: .96rem;
  color: rgba(255,255,255,.9);
}
.sla-list .ico { color: var(--orange); margin-top: 4px; }

/* ---------- 12c. FAQ ---------- */
.faq-grid {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
.faq-head { margin-bottom: 0; position: sticky; top: calc(var(--head-h) + 34px); }
.faq-list { display: grid; }
.faq-item {
  padding: 26px 0;
  border-top: 1px solid var(--line);
}
.faq-item:first-child { border-top: 0; padding-top: 0; }
.faq-item:last-child { padding-bottom: 0; }
.faq-item h3 {
  font-size: 1.12rem;
  letter-spacing: -0.024em;
  margin-bottom: 9px;
  color: var(--forest);
}
.faq-item p { color: var(--muted); font-size: .95rem; line-height: 1.68; max-width: 66ch; }

/* ---------- 13. Contact ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: clamp(32px, 4.5vw, 64px);
  align-items: start;
}
.contact-aside h2 { margin-bottom: 16px; }
.contact-aside .sec-lede { margin-bottom: 30px; }

.contact-list { display: grid; gap: 16px; }
.contact-list li { display: flex; gap: 15px; align-items: flex-start; }
.contact-ico {
  width: 42px; height: 42px; flex: none;
  display: grid; place-items: center;
  border-radius: 10px;
  background: var(--paper);
  border: 1px solid var(--line);
  color: var(--forest);
}
.cl-k {
  display: block;
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}
.contact-list a, .contact-list div > span:not(.cl-k) {
  font-weight: 500;
  color: var(--ink);
  font-size: .98rem;
}
.contact-list a:hover { color: var(--orange-dk); }

.contact-form-wrap {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(24px, 3vw, 38px);
  box-shadow: var(--shadow-sm);
}

.alert {
  display: flex;
  gap: 14px;
  padding: 16px 18px;
  border-radius: var(--r-md);
  margin-bottom: 24px;
}
.alert strong { font-family: var(--font-display); display: block; margin-bottom: 3px; }
.alert p { font-size: .93rem; }
.alert a { text-decoration: underline; font-weight: 600; }
.alert-ok { background: var(--mist); border: 1px solid var(--forest-lt); color: var(--forest-dk); }
.alert-ok .alert-ico { color: var(--forest); }
.alert-err { background: var(--orange-lt); border: 1px solid var(--orange); color: #8A3F03; }

.form { display: grid; gap: 18px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: grid; gap: 7px; }
.field label {
  font-size: .84rem;
  font-weight: 600;
  color: var(--forest-dk);
  letter-spacing: .01em;
}
.req { color: var(--orange-dk); }

.field input, .field select, .field textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: .97rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 13px 15px;
  min-height: 50px;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.field textarea { min-height: 130px; resize: vertical; line-height: 1.6; }
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2358665C' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 18px;
  padding-right: 42px;
}
.field input::placeholder, .field textarea::placeholder { color: #93A096; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(243,124,34,.18);
}
.field [aria-invalid="true"] { border-color: var(--orange-dk); background: #FFFBF7; }

.err { font-size: .84rem; color: #A64C05; font-weight: 500; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 4px; }
.form-note { font-size: .84rem; color: var(--muted); flex: 1; min-width: 220px; }

/* ---------- 14. Footer ---------- */
.site-foot {
  background: var(--forest-dpr);
  color: rgba(255,255,255,.72);
  padding: clamp(52px, 6vw, 78px) 0 28px;
}
/* Three columns, not a five-column link farm — main paths and legal only. */
.foot-grid {
  display: grid;
  grid-template-columns: 1.7fr 1.15fr 1fr;
  gap: 44px clamp(30px, 5vw, 72px);
}
.brand-foot .brand-name { color: #fff; }
.brand-foot .brand-name em { color: rgba(255,255,255,.72); }
.brand-foot img { background: #fff; border-radius: 8px; padding: 3px; }

.foot-note { font-size: .92rem; margin: 18px 0 20px; max-width: 38ch; line-height: 1.65; }

.social { display: flex; flex-wrap: wrap; gap: 8px; }
.social a {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 8px 13px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 999px;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.social a:hover { background: var(--orange); border-color: var(--orange); color: #fff; }

.foot-h {
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 16px;
}
.foot-links { display: grid; gap: 14px; }
.foot-links a, .foot-links span { font-size: .92rem; line-height: 1.5; }
.foot-links a { transition: color .24s var(--ease); }
.foot-links a:hover { color: #fff; }
.foot-links .foot-sub {
  display: block;
  font-size: .8rem;
  line-height: 1.5;
  color: rgba(255,255,255,.55);
  margin-top: 4px;
  max-width: 32ch;
}
.foot-links .foot-strong {
  font-family: var(--font-display);
  font-size: 1.08rem;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: #fff;
}

.foot-base {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 26px;
  justify-content: space-between;
  align-items: center;
  margin-top: clamp(36px, 4vw, 54px);
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.14);
  font-size: .87rem;
}
.foot-base-links { display: flex; flex-wrap: wrap; gap: 22px; }
.foot-base-links a:hover { color: #fff; }

/* ---------- 14b. Not found ---------- */
.lost { padding-top: clamp(56px, 7vw, 92px); }
.lost-grid {
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  gap: clamp(32px, 5vw, 76px);
  align-items: start;
}
.lost h1 { margin-bottom: 20px; }
.lost .lede { margin-bottom: 34px; }

.lost-h {
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}
.lost-links ul { display: grid; }
.lost-links li { border-bottom: 1px solid var(--line); }
.lost-links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.02rem;
  letter-spacing: -0.02em;
  transition: color .32s var(--ease);
}
.lost-links a .ico { color: var(--faint); transition: transform .32s var(--ease), color .32s var(--ease); }
.lost-links a:hover { color: var(--forest); }
.lost-links a:hover .ico { color: var(--orange); transform: translateX(4px); }

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

/* ---------- 13b. Coverage tiers ----------
   Three cards, ranked. The first is the strongest promise, so it carries the
   accent; the others step back rather than competing with it. */
.tiers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 26px);
}
.tier {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(26px, 2.8vw, 36px);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  transition: border-color .32s var(--ease), transform .32s var(--ease);
}
.tier:hover { border-color: var(--forest-lt); transform: translateY(-3px); }
.tier:first-child { border-top: 3px solid var(--orange); }

.tier-ix {
  position: absolute;
  top: clamp(24px, 2.6vw, 32px);
  right: clamp(24px, 2.6vw, 32px);
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--faint);
}
.tier-ico {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border-radius: 12px;
  background: var(--mist);
  border: 1px solid var(--line);
  color: var(--forest);
  margin-bottom: 20px;
}
.tier:first-child .tier-ico { background: var(--orange-lt); border-color: #F6D8BC; color: var(--orange-dk); }
.tier h3 {
  font-family: var(--font-display);
  font-size: clamp(1.16rem, 1.8vw, 1.38rem);
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin-bottom: 5px;
}
.tier-scope {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--orange-dk);
  margin-bottom: 16px;
}
.tier-text {
  font-size: .93rem;
  color: var(--muted);
  line-height: 1.68;
  margin-bottom: 22px;
}
/* Pushed to the bottom so the three cards' lists line up regardless of copy length */
.tier-list {
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.tier-list li {
  font-size: .83rem;
  font-weight: 500;
  color: var(--forest-dk);
  background: var(--mist);
  border-radius: 999px;
  padding: 5px 12px;
}
.tier:first-child .tier-list li { background: var(--orange-lt); color: #8A3F03; }

.tier-foot {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: clamp(24px, 3vw, 36px);
  font-size: .93rem;
  color: var(--muted);
}
.tier-foot .ico { flex: none; color: var(--forest); margin-top: 3px; }
.tier-foot a { font-weight: 600; color: var(--forest); text-decoration: underline; text-underline-offset: 3px; }
.tier-foot a:hover { color: var(--orange-dk); }

/* ---------- 14b2. Founder ----------
   A face and a name against the claims. The monogram stands in until a
   headshot is set in config, so the block is never half-built. */
.founder-grid {
  display: grid;
  grid-template-columns: .62fr 1.38fr;
  gap: clamp(32px, 4.5vw, 70px);
  align-items: center;
}
.founder-media {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--mist);
  border: 1px solid var(--line);
}
.founder-media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
.founder-monogram {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 5;
  font-family: var(--font-display);
  font-size: clamp(3.4rem, 7vw, 5.2rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--forest);
  background:
    radial-gradient(120% 90% at 20% 10%, rgba(243,124,34,.10), transparent 60%),
    var(--mist-dp);
}
.founder-media figcaption {
  display: grid;
  gap: 2px;
  padding: 16px 20px;
  border-top: 1px solid var(--line);
  background: var(--paper);
}
.fm-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.fm-role {
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}

.founder-copy h2 { margin-bottom: 20px; }
.founder-copy .sec-lede + .sec-lede { margin-top: 14px; }
.founder-h {
  font-family: var(--font-mono);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 30px 0 14px;
}
.founder-tags { display: flex; flex-wrap: wrap; gap: 9px; }
.founder-tags li {
  font-size: .86rem;
  font-weight: 500;
  color: var(--forest-dk);
  background: var(--mist);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 14px;
}
.founder-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

/* Compact version, used in the contact page aside */
.founder-mini {
  display: flex;
  gap: 15px;
  align-items: flex-start;
  margin-top: 30px;
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--orange);
  border-radius: var(--r-md);
  background: var(--paper);
}
.founder-mini img, .founder-mini-mono {
  width: 52px; height: 52px; flex: none;
  border-radius: 50%;
  object-fit: cover;
}
.founder-mini-mono {
  display: grid;
  place-items: center;
  background: var(--mist-dp);
  color: var(--forest);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
}
.fmini-quote { font-size: .94rem; color: var(--ink); line-height: 1.6; margin-bottom: 8px; }
.fmini-by { display: grid; gap: 1px; }
.fmini-by a { font-weight: 600; font-size: .9rem; color: var(--forest); }
.fmini-by a:hover { color: var(--orange-dk); }
.fmini-by span {
  font-family: var(--font-mono);
  font-size: .66rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- 14c. Contact page ----------
   The form has its own URL, so the page needs a head of its own — and the home
   page keeps a band that carries the address without carrying the form. */
.page-head {
  padding: clamp(34px, 4.5vw, 58px) 0 clamp(30px, 4vw, 46px);
  border-bottom: 1px solid var(--line);
}
.page-head h1 { margin-bottom: 18px; }
.page-head .lede { max-width: 60ch; }

.crumbs { margin-bottom: 22px; }
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.crumbs li {
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.crumbs li + li::before { content: "/"; margin-right: 8px; color: var(--faint); }
.crumbs a:hover { color: var(--orange-dk); }
.crumbs [aria-current] { color: var(--forest); font-weight: 600; }

.contact-page { padding-top: clamp(44px, 5vw, 72px); }
.aside-h { font-size: clamp(1.3rem, 2.2vw, 1.6rem); margin-bottom: 12px; }

.aside-card {
  margin-top: 30px;
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--mist);
}
.aside-card-h {
  font-family: var(--font-mono);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 14px;
}
.aside-areas {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}
.aside-areas li {
  font-size: .85rem;
  font-weight: 500;
  color: var(--forest-dk);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 12px;
}
.aside-card-lead {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: .9rem;
  color: var(--forest-dk);
  line-height: 1.6;
  margin-bottom: 12px;
}
.aside-card-lead .ico { flex: none; color: var(--orange); margin-top: 3px; }
.aside-card-lead strong { font-weight: 600; }
.aside-card-note { font-size: .86rem; color: var(--muted); line-height: 1.6; }
.aside-card-note a { font-weight: 600; color: var(--forest); text-decoration: underline; text-underline-offset: 3px; }
.aside-card-note a:hover { color: var(--orange-dk); }

.form-h { font-size: clamp(1.2rem, 2vw, 1.45rem); margin-bottom: 6px; }
.form-sub { font-size: .92rem; color: var(--muted); margin-bottom: 26px; }

.faq-more { margin-top: 18px; }

/* ---------- HubSpot form ----------
   The embed brings its own markup and its own default look, which is a stock
   HubSpot form on a page that is not a stock HubSpot page. These rules pull it
   back onto the site's type, spacing, colours and radii so it reads as part of
   the card it sits in rather than something pasted into it.

   If the form renders inside an <iframe> — HubSpot does that for some account
   settings — none of this can reach it, and the styling has to be set in
   HubSpot's own form editor instead. Everything below is written to degrade
   quietly in that case rather than half-apply. */
.hs-form-frame { min-height: 120px; }

.hs-form-frame form { display: grid; gap: 18px; }

.hs-form-frame .hs-form-field { display: grid; gap: 7px; }
.hs-form-frame .hs-form-field > label {
  font-family: var(--font-body);
  font-size: .84rem;
  font-weight: 600;
  color: var(--forest-dk);
  letter-spacing: .01em;
}
.hs-form-frame .hs-form-required { color: var(--orange-dk); }

/* HubSpot's help text sits under the label and is usually noise */
.hs-form-frame .hs-field-desc { font-size: .82rem; color: var(--muted); }

.hs-form-frame input[type="text"],
.hs-form-frame input[type="email"],
.hs-form-frame input[type="tel"],
.hs-form-frame input[type="number"],
.hs-form-frame select,
.hs-form-frame textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: .97rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 13px 15px;
  min-height: 50px;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.hs-form-frame textarea { min-height: 130px; resize: vertical; line-height: 1.6; }
.hs-form-frame input:focus,
.hs-form-frame select:focus,
.hs-form-frame textarea:focus {
  outline: none;
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(243,124,34,.18);
}

/* Validation messages, in the site's error colour rather than browser red */
.hs-form-frame .hs-error-msg,
.hs-form-frame .hs-error-msgs label {
  font-size: .84rem;
  font-weight: 500;
  color: #A64C05;
}
.hs-form-frame .hs-error-msgs { list-style: none; padding: 0; margin: 0; }

/* The submit button, matched to .btn-primary */
.hs-form-frame input[type="submit"],
.hs-form-frame .hs-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 15px 28px;
  min-height: 54px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--orange);
  color: #fff;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color .32s var(--ease), box-shadow .32s var(--ease), transform .32s var(--ease);
}
.hs-form-frame input[type="submit"]:hover,
.hs-form-frame .hs-button:hover {
  background: var(--orange-dk);
  box-shadow: 0 16px 34px -12px rgba(212,103,15,.58);
}
.hs-form-frame input[type="submit"]:active,
.hs-form-frame .hs-button:active { transform: scale(.975); }

/* HubSpot's consent and legal text */
.hs-form-frame .legal-consent-container,
.hs-form-frame .hs-richtext {
  font-size: .84rem;
  color: var(--muted);
  line-height: 1.6;
}
.hs-form-frame .legal-consent-container a,
.hs-form-frame .hs-richtext a {
  color: var(--forest);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Confirmation shown in place of the form when no redirect is configured */
.hs-form-frame .submitted-message {
  padding: 16px 18px;
  border-radius: var(--r-md);
  background: var(--mist);
  border: 1px solid var(--forest-lt);
  color: var(--forest-dk);
}

/* Two-column rows on wider screens, matching .field-row */
@media (min-width: 641px) {
  .hs-form-frame .hs-form-field.hs-fieldtype-text,
  .hs-form-frame .hs-form-field.hs-fieldtype-phonenumber { min-width: 0; }
}

/* What happens next — numbered, because the order is the point */
.next-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(20px, 2.6vw, 34px);
  counter-reset: none;
}
.next-steps li {
  padding-top: 20px;
  border-top: 2px solid var(--mist-dp);
}
.next-steps li:first-child { border-top-color: var(--orange); }
.ns-no {
  display: block;
  font-family: var(--font-mono);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .16em;
  color: var(--orange-dk);
  margin-bottom: 12px;
}
.next-steps h3 {
  font-family: var(--font-display);
  font-size: 1.04rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--forest-dk);
  margin-bottom: 8px;
}
.next-steps p { font-size: .92rem; color: var(--muted); line-height: 1.66; }

/* Home page band that replaced the form */
.cta-grid {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: clamp(32px, 4.5vw, 64px);
  align-items: center;
}
.cta-copy h2 { margin-bottom: 16px; }
.cta-copy .sec-lede { margin-bottom: 30px; }
.cta-list { display: grid; gap: 16px; }
.cta-list li { display: flex; gap: 15px; align-items: flex-start; }
.cta-list a, .cta-list div > span:not(.cl-k) {
  font-weight: 500;
  color: var(--ink);
  font-size: .98rem;
}
.cta-list a:hover { color: var(--orange-dk); }

/* ---------- 14d. Thank you ---------- */
.thanks { padding-top: clamp(56px, 7vw, 96px); }
.thanks-inner { max-width: 720px; }
.thanks-mark {
  display: grid;
  place-items: center;
  width: 58px; height: 58px;
  border-radius: 50%;
  background: var(--forest);
  color: #fff;
  margin-bottom: 26px;
}
.thanks-mark .ico { width: 30px; height: 30px; stroke-width: 2; }
.thanks h1 { margin-bottom: 18px; }
.thanks .lede { margin-bottom: 34px; }

.thanks-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 40px;
  padding: 22px 26px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--mist);
  margin-bottom: 20px;
}
.thanks-meta dt {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}
.thanks-meta dd { font-weight: 500; color: var(--ink); font-size: .98rem; }
.thanks-meta .ref {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--forest-dk);
  letter-spacing: .02em;
}
.thanks-note {
  font-size: .9rem;
  color: var(--muted);
  line-height: 1.68;
  max-width: 62ch;
  margin-bottom: 34px;
}

.thanks-links { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.thanks-links a {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 4px 16px;
  padding: 20px 22px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  transition: border-color .32s var(--ease), transform .32s var(--ease);
}
.thanks-links a:hover { border-color: var(--forest-lt); transform: translateY(-2px); }
.thanks-links a .ico { grid-row: span 2; color: var(--faint); transition: transform .32s var(--ease), color .32s var(--ease); }
.thanks-links a:hover .ico { color: var(--orange); transform: translateX(4px); }
.tl-k {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.04rem;
  letter-spacing: -0.02em;
  color: var(--forest-dk);
}
.tl-v { font-size: .89rem; color: var(--muted); line-height: 1.6; }

/* ---------- 15. Back to top ---------- */
.to-top {
  position: fixed;
  right: 22px; bottom: 22px;
  z-index: 90;
  width: 48px; height: 48px;
  display: grid; place-items: center;
  background: var(--orange);
  color: #fff;
  border-radius: 50%;
  box-shadow: 0 8px 22px rgba(212,103,15,.34);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s, background-color .2s ease;
}
.to-top .ico { transform: rotate(-90deg); }
.to-top.is-on { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--orange-dk); }

/* ---------- 16. Scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }

/* ==========================================================================
   17. Responsive
   ========================================================================== */

/* Tablet landscape and below */
@media (max-width: 1080px) {
  .foot-grid { grid-template-columns: 1.4fr 1fr 1fr; }
  .foot-contact { grid-column: span 1; }
}

@media (max-width: 980px) {
  :root { --head-h: 68px; }

  /* Mobile navigation */
  .head-cta { display: none; }
  .burger { display: block; }

  .nav {
    position: fixed;
    top: 0; right: 0;
    z-index: 99;
    width: min(360px, 87vw);
    height: 100dvh;
    background: var(--paper);
    border-left: 1px solid var(--line);
    padding: calc(var(--head-h) + 20px) 26px 32px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transform: translateX(102%);
    transition: transform .3s cubic-bezier(.4,0,.2,1);
    overflow-y: auto;
  }
  .nav.is-open { transform: none; }

  /* Fallback when main.js did not load. The burger would be a dead button, so
     the menu is laid out plainly instead and the button is removed. Ugly beats
     unreachable. */
  .no-js .nav {
    position: static;
    width: auto;
    height: auto;
    padding: 0 0 18px;
    border-left: 0;
    transform: none;
    overflow: visible;
  }
  .no-js .burger { display: none; }
  .no-js .head-inner { flex-wrap: wrap; }

  .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-list li + li { border-top: 1px solid var(--line); }
  .nav-list a {
    display: block;
    padding: 16px 2px;
    font-size: 1.05rem;
    font-family: var(--font-display);
    font-weight: 500;
    color: var(--ink);
  }
  .nav-list a::after { display: none; }

  .nav-foot { display: grid; gap: 14px; margin-top: 28px; }
  .nav-call {
    display: flex; align-items: center; gap: 10px;
    font-weight: 600;
    color: var(--forest);
  }
  .nav-call .ico { color: var(--orange); }

  /* Layout collapse */
  .hero-grid { grid-template-columns: 1fr; }
  .orbit { width: 100%; aspect-ratio: auto; }
  .orbit-blade { display: none; }          /* the arcs need room they do not have here */
  .orbit-core { width: 100%; grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .orbit-core li { transform: none !important; animation: none; }

  .svc-group { grid-template-columns: 1fr; }
  .svc-label { position: static; }
  .svc-label p { max-width: 60ch; }
  .why-grid, .support-grid, .contact-grid,
  .faq-grid, .cta-grid { grid-template-columns: 1fr; }

  /* Portrait above the copy, and not full-bleed tall */
  .founder-grid { grid-template-columns: 1fr; }
  .founder-media { max-width: 320px; }

  /* Three tiers do not fit side by side below this */
  .tiers { grid-template-columns: 1fr; }
  .tier-list { margin-top: 0; }
  .faq-head { position: static; margin-bottom: 8px; }

  /* Two-up before it goes single file, so the steps stay scannable */
  .next-steps { grid-template-columns: repeat(2, 1fr); }

  /* Two-up: keep a stagger, but a shallower one */
  .steps { grid-template-columns: repeat(2, 1fr); row-gap: 40px; }
  .step:nth-child(2) { margin-top: 36px; }
  .step:nth-child(3) { margin-top: 0; }
  .step:nth-child(4) { margin-top: 36px; }

  .support-mark { right: -220px; opacity: .05; }
}

/* Phones */
@media (max-width: 640px) {
  body { font-size: 16px; }
  .wrap { width: min(1200px, 100% - 34px); }

  h1 { font-size: clamp(1.95rem, 8vw, 2.5rem); }
  .lede, .sec-lede { font-size: 1rem; }

  .brand img { width: 42px; }
  .brand-name { font-size: 1.06rem; }
  .brand-sub { font-size: .56rem; }

  .hero { padding-top: 40px; }
  .hero-actions { gap: 10px; }
  .hero-actions .btn { flex: 1 1 100%; }
  .orbit-core { grid-template-columns: 1fr; gap: 10px; }
  .orbit-core li { padding: 12px 15px; }

  .strip-inner { gap: 14px; }
  .strip-list { gap: 8px 20px; }

  /* Drop the index column and the arrow — the row itself is the tap target */
  .svc-item {
    grid-template-columns: 34px 1fr;
    column-gap: 14px;
    padding: 22px 16px;
    margin-inline: -16px;
  }
  .svc-ix, .svc-go { display: none; }
  .svc-ico .ico { width: 26px; height: 26px; }
  .svc-body h4 { font-size: 1.08rem; }

  .areas-list { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; row-gap: 30px; }
  .step:nth-child(2), .step:nth-child(3), .step:nth-child(4) { margin-top: 0; }
  .step-no { font-size: 2.4rem; margin-bottom: 12px; }
  .field-row { grid-template-columns: 1fr; }
  .form-foot .btn { width: 100%; }

  .next-steps { grid-template-columns: 1fr; gap: 24px; }
  .thanks-links { grid-template-columns: 1fr; }
  .thanks-meta { flex-direction: column; gap: 16px; padding: 20px; }
  .contact-form-wrap { padding: 22px 18px; }

  .foot-grid { grid-template-columns: 1fr 1fr; gap: 32px 22px; }
  .foot-brand { grid-column: 1 / -1; }
  .foot-base { justify-content: flex-start; }

  .to-top { right: 16px; bottom: 16px; width: 44px; height: 44px; }
}

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

/* ---------- 18. Motion & print ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

@media print {
  .site-head, .to-top, .nav-veil, .hero-art, .support-mark { display: none !important; }
  body { color: #000; }
  .section { padding: 24px 0; }
}