/* Heritage Care Partners — shared styles */
:root{
  --cream:#f8f3ea; --blush:#f5e7d9; --blue:#e7eef5; --sage:#e9efe7;
  --navy:#0e2236; --navy-soft:#16324c;
  --gold:#c2924f; --gold-bright:#e8b24a; --gold-deep:#946326;
  --ink:#16293a; --ink-soft:#5c6b78;
  --light:#f8f3ea; --light-soft:#c8bda9;
  --line:#e8dccb;
  --maxw:1180px; --ease:cubic-bezier(.22,.61,.36,1);
  --w1:clamp(16px,5.2vw,100px); /* width 1: gutter from screen edge */
}
*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; font-size:112.5%; }
body{ font-family:"Hanken Grotesk",system-ui,sans-serif; color:var(--ink); background:var(--cream); -webkit-font-smoothing:antialiased; line-height:1.62; }
img{ max-width:100%; display:block; }
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:clamp(1.25rem,4vw,2.5rem); }

/* type */
.eyebrow{ font-size:.78rem; letter-spacing:.2em; text-transform:uppercase; font-weight:700; color:var(--gold-deep); }
.eyebrow::after{ content:""; display:block; width:40px; height:2px; margin:.8rem 0 0; border-radius:2px; background:linear-gradient(90deg,var(--gold),var(--gold-bright)); }
.center .eyebrow::after{ margin-inline:auto; }
.hero .eyebrow::after{ display:none; }
h1,h2,h3{ font-family:"Hanken Grotesk",sans-serif; font-weight:800; line-height:1.1; letter-spacing:-.02em; color:var(--ink); }
h1{ font-size:clamp(2.4rem,5.2vw,4rem); line-height:1.07; }
h2{ font-size:clamp(2rem,3.8vw,2.9rem); }
h3{ font-size:1.15rem; }
.lead{ font-size:clamp(1.06rem,1.4vw,1.24rem); color:var(--ink-soft); }
p{ color:var(--ink-soft); }
.serif{ font-family:"Spectral",Georgia,serif; font-weight:600; font-style:italic; color:var(--gold); }
.center{ text-align:center; }
.center .lead{ margin-inline:auto; }

/* buttons */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem; font-weight:600; font-size:.9rem; letter-spacing:.04em; text-decoration:none; padding:1.05rem 2.1rem; border-radius:8px; cursor:pointer; border:none; position:relative; overflow:hidden; isolation:isolate;
  background:var(--navy); color:#fff; transition:transform .35s var(--ease), box-shadow .35s ease; box-shadow:0 4px 16px -10px rgba(14,34,54,.45); }
.btn::before{ content:""; position:absolute; inset:0; z-index:-1; background:var(--gold); clip-path:circle(0% at 0% 100%); transition:clip-path .6s cubic-bezier(.22,1,.36,1); }
.btn:hover{ transform:translateY(-2px); box-shadow:0 16px 30px -16px rgba(14,34,54,.45); }
.btn:hover::before{ clip-path:circle(150% at 0% 100%); }
/* gold buttons sit on dark sections: subtle fade to navy, white text */
.btn.gold{ background:var(--gold); color:#fff; box-shadow:0 6px 16px -12px rgba(14,34,54,.4); transition:transform .35s var(--ease), box-shadow .35s ease; }
.btn.gold::before{ display:block; background:linear-gradient(115deg, transparent 38%, rgba(255,255,255,.32) 50%, transparent 62%); clip-path:none; transform:translateX(-130%); transition:transform .7s ease; }
.btn.gold:hover{ transform:translateY(-2px); box-shadow:0 14px 28px -14px rgba(14,34,54,.4); }
.btn.gold:hover::before{ transform:translateX(130%); clip-path:none; }
/* large button variant: gold fill + H reveal; symmetric padding keeps the text centred */
.btn.has-h{ padding-inline:3rem; }
.btn.has-h::after{ content:""; position:absolute; right:16px; top:50%; width:28px; height:30px; z-index:-1; background:url("assets/heritage-h-mark.png") center/contain no-repeat; filter:brightness(0) invert(1); opacity:0; transform:translateY(-50%) scale(.7); transition:opacity .12s ease, transform .12s ease; pointer-events:none; }
.btn.has-h:hover::after{ opacity:.8; transform:translateY(-50%) scale(1); transition:opacity .2s ease .32s, transform .2s ease .32s; }
.text-link{ color:var(--ink); text-decoration:none; font-weight:700; font-size:.97rem; border-bottom:2px solid rgba(194,146,79,.55); padding-bottom:3px; transition:border-color .3s; }
.text-link:hover{ border-color:var(--gold); }
.playlink{ display:inline-flex; align-items:center; gap:.6rem; color:var(--ink); text-decoration:none; font-weight:700; font-size:.95rem; }
.playlink .pp{ width:38px; height:38px; border-radius:50%; background:#fff; box-shadow:0 8px 20px -10px rgba(14,34,54,.5); display:grid; place-items:center; transition:transform .3s var(--ease); }
.playlink:hover .pp{ transform:scale(1.08); }

/* nav / header ------------------------------------------------------------ */
header.nav{ position:sticky; top:0; z-index:60; background:transparent; border-bottom:1px solid transparent;
  will-change:transform; transform:translate3d(0,0,0); backface-visibility:hidden;
  transition:background .3s var(--ease), border-color .3s, box-shadow .3s, transform .32s var(--ease); }
header.nav.scrolled{ background:rgba(248,243,234,.9); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border-color:var(--line); box-shadow:0 6px 22px -18px rgba(14,34,54,.5); }
header.nav.hide{ transform:translate3d(0,-100%,0); }
.nav .wrap{ display:flex; align-items:center; justify-content:space-between; min-height:84px; padding-block:.4rem; }

.brand{ display:flex; align-items:center; gap:.7rem; text-decoration:none; }
.brand img{ height:44px; width:auto; border-radius:8px; transition:height .35s var(--ease), transform .3s var(--ease); }
header.nav.scrolled .brand img{ height:38px; }
.brand:hover img{ transform:translateY(-2px); }
.brand .name{ font-family:"Spectral",serif; color:var(--navy); font-size:1rem; letter-spacing:.15em; text-transform:uppercase; font-weight:600; }

.navlinks{ display:flex; align-items:center; gap:2rem; flex:1; min-width:0; padding-left:2rem; }
/* three balanced zones: brand left, links centred in the open middle, CTA on
   the right edge. The paired auto margins centre the link group between the
   brand and the button; the padding-left mirrors the flex gap that sits
   before the button so both sides of the link group breathe equally. */
.navlinks > a[data-nav="index"]{ margin-left:auto; }
.navlinks > .btn{ margin-left:auto; white-space:nowrap; }
.navlinks a:not(.btn){ position:relative; color:var(--ink); text-decoration:none; font-size:.95rem; font-weight:600; transition:color .25s; }
.navlinks a:not(.btn)::after{ content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px; background:var(--gold); border-radius:2px; transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease); }
.navlinks a:not(.btn):hover{ color:var(--gold-deep); }
.navlinks a:not(.btn):hover::after,.navlinks a.active::after{ transform:scaleX(1); }

/* services dropdown */
.has-drop{ position:relative; display:flex; align-items:center; }
.has-drop::after{ content:""; position:absolute; top:100%; left:-14px; right:-14px; height:18px; }
.drop-trigger{ display:inline-flex; align-items:center; gap:.35rem; }
.drop-trigger .caret{ width:12px; height:12px; color:var(--gold-deep); transition:transform .3s var(--ease); }
.has-drop:hover .caret,.has-drop:focus-within .caret{ transform:rotate(180deg); }
.drop-panel{ position:absolute; top:calc(100% + 14px); left:50%; transform:translateX(-50%) translateY(8px);
  min-width:330px; background:#fff; border:1px solid var(--line); border-radius:18px;
  box-shadow:0 34px 70px -34px rgba(14,34,54,.45); padding:.5rem; display:flex; flex-direction:column;
  opacity:0; visibility:hidden; transition:opacity .22s var(--ease), transform .22s var(--ease); }
.has-drop:hover .drop-panel,.has-drop:focus-within .drop-panel{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
.drop-panel a{ display:flex; flex-direction:column; gap:.15rem; padding:.72rem .9rem; border-radius:12px; text-decoration:none; transition:background .2s; }
.drop-panel a::after{ display:none; }
.drop-panel a:hover{ background:var(--cream); }
.drop-panel .dp-t{ color:var(--ink); font-weight:700; font-size:.95rem; }
.drop-panel .dp-d{ color:var(--ink-soft); font-size:.82rem; font-weight:500; }
.drop-panel .dp-overview{ border-bottom:1px solid var(--line); margin-bottom:.25rem; padding-bottom:.8rem; }
.drop-panel .dp-overview .dp-t{ color:var(--gold-deep); }
/* services dropdown: two offers side by side, guide underneath, so Websites reads as an
   equal offer and is not drowned out. Left column = filling beds; right = the website product. */
.drop-panel.dp-duo{ width:640px; min-width:640px; padding:.65rem; }
.dp-duo .dp-cols{ display:grid; grid-template-columns:1fr 1fr; gap:0 .9rem; }
.dp-duo .dp-col{ display:flex; flex-direction:column; }
.dp-duo .dp-label{ padding:.5rem .9rem .4rem; font-size:.68rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-deep); }
.dp-duo .dp-col-site{ border-left:1px solid var(--line); padding-left:.9rem; }
.dp-duo .dp-site-card{ flex:1; display:flex; flex-direction:column; gap:.3rem; padding:1rem .95rem; border-radius:14px; background:radial-gradient(140% 140% at 0% 0%, var(--blush), var(--cream)); border:1px solid rgba(194,146,79,.42); transition:background .25s var(--ease), border-color .25s var(--ease); }
.dp-duo .dp-site-card:hover{ background:radial-gradient(140% 140% at 0% 0%, #f1dfc9, var(--blush)); border-color:var(--gold); }
.dp-duo .dp-site-card .dp-t{ color:var(--gold-deep); font-size:1rem; }
.dp-duo .dp-more{ margin-top:auto; padding-top:.7rem; font-size:.8rem; font-weight:700; color:var(--ink); }
.dp-duo .dp-more::after{ content:" \2192"; color:var(--gold-deep); }
.dp-duo .dp-guide{ margin-top:.5rem; border-top:1px solid var(--line); padding-top:.55rem; }
/* back-to-services return prompt (deep-dive pages) */
.svc-return{ display:flex; flex-direction:column; align-items:center; gap:.9rem; text-align:center; margin-top:calc(-1 * clamp(2.5rem,6vh,5rem)); padding-bottom:clamp(2.8rem,6vw,4.5rem); }
.svc-return p{ color:var(--ink-soft); font-size:1rem; margin:0; }
.svc-return-link{ display:inline-flex; align-items:center; gap:.5rem; color:var(--gold-deep); font-weight:700; text-decoration:none; border:1px solid var(--line); border-radius:999px; padding:.65rem 1.3rem; transition:background .25s var(--ease), border-color .25s var(--ease); }
.svc-return-link:hover{ background:var(--cream); border-color:var(--gold); }
.drop-panel .dp-guide{ border-top:1px solid var(--line); margin-top:.25rem; padding-top:.8rem; }

/* burger + mobile menu */
.burger{ display:none; width:42px; height:42px; border:none; background:none; cursor:pointer; padding:0; flex-direction:column; justify-content:center; gap:5px; }
.burger span{ display:block; width:22px; height:2px; margin:0 auto; background:var(--navy); border-radius:2px; transition:transform .3s var(--ease), opacity .2s; }
.burger.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger.open span:nth-child(2){ opacity:0; }
.burger.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
.mobile-menu{ display:none; }
/* lock the page behind the mobile menu WITHOUT destroying the scroll position.
   The body is pinned in place (script.js sets body.style.top to -scrollY and
   restores it on close), and the header is pinned to the viewport top so the
   menu always drops from a visible header, wherever the visitor was on the
   page. The old html/body overflow+height lock clipped the page and stranded
   the menu off-screen on tablets. */
html.nav-open{ overflow:hidden; }
html.nav-open body{ position:fixed; left:0; right:0; width:100%; overflow:hidden; }
html.nav-open header.nav{ position:fixed; top:0; left:0; right:0; transform:none;
  background:rgba(248,243,234,.98); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border-color:var(--line); }

@media(max-width:860px){
  .navlinks{ display:none; }
  .burger{ display:flex; }
  .mobile-menu{ display:flex; position:absolute; top:100%; left:0; right:0; flex-direction:column;
    background:rgba(248,243,234,.98); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border-bottom:1px solid var(--line);
    box-shadow:0 34px 50px -30px rgba(14,34,54,.4); padding:.6rem var(--w1) 1.6rem;
    max-height:0; overflow:hidden; opacity:0; visibility:hidden;
    transition:max-height .42s var(--ease), opacity .3s, visibility .3s; }
  .mobile-menu.open{ max-height:calc(100vh - 80px); max-height:calc(100dvh - 80px); opacity:1; visibility:visible; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; padding-bottom:max(1.6rem, calc(1.2rem + env(safe-area-inset-bottom))); }
  /* browsers without backdrop blur: go fully opaque so the page never ghosts through the open menu */
  @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
    .mobile-menu{ background:var(--cream); }
  }
  /* phones: keep the menu short. The service deep-dive links live on the
     services page itself, so hide them here (the websites offer link stays). */
  .mobile-menu a.mm-sub:not(.mm-feature){ display:none; }
  .mobile-menu a{ padding:.9rem .2rem; color:var(--ink); text-decoration:none; font-size:1.08rem; font-weight:700; border-bottom:1px solid var(--line); }
  .mobile-menu a.mm-sub{ padding-left:1.3rem; font-size:.98rem; font-weight:600; color:var(--ink-soft); }
  .mobile-menu .mm-label{ padding:1rem .2rem .3rem; font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; font-weight:800; color:var(--gold-deep); }
  .mobile-menu a.mm-feature{ color:var(--ink); font-weight:700; padding-left:.2rem; }
  .mobile-menu a.mm-cta{ margin-top:1.1rem; border-bottom:none; text-align:center; color:#fff; }
  .mobile-menu.open a{ animation:mmIn .4s var(--ease) both; }
  .mobile-menu.open a:nth-child(1){ animation-delay:.03s } .mobile-menu.open a:nth-child(2){ animation-delay:.06s }
  .mobile-menu.open a:nth-child(3){ animation-delay:.09s } .mobile-menu.open a:nth-child(4){ animation-delay:.12s }
  .mobile-menu.open a:nth-child(5){ animation-delay:.15s } .mobile-menu.open a:nth-child(6){ animation-delay:.18s }
  .mobile-menu.open a:nth-child(7){ animation-delay:.21s } .mobile-menu.open a:nth-child(8){ animation-delay:.24s }
}
@keyframes mmIn{ from{ opacity:0; transform:translateY(8px) } to{ opacity:1; transform:none } }
@media(max-width:520px){ .brand .name{ display:none; } }
@media(prefers-reduced-motion:reduce){
  header.nav,.nav .wrap,.brand img,.navlinks a:not(.btn)::after,.drop-panel,.drop-trigger .caret,.burger span,.mobile-menu,.mobile-menu.open a{ transition:none !important; animation:none !important; }
  header.nav.hide{ transform:none; }
}

/* sections */
.section{ padding-block:clamp(4.5rem,10vh,7.5rem); }
.section.blush{ background:radial-gradient(130% 90% at 50% 0%, #faf0e3 0%, var(--blush) 58%); }
.section.sage{ background:var(--sage); }
.section.tight{ padding-block:clamp(3.5rem,7vh,5.5rem); }
.section-head{ max-width:640px; }
.section-head.center{ margin-inline:auto; }
.section-head h2{ margin-top:.7rem; }
.section-head p{ margin-top:1rem; font-size:1.08rem; }

/* hero */
.hero{ position:relative; overflow:hidden; padding-block:clamp(5rem,9vh,7rem) clamp(3rem,6vh,4.5rem); text-align:center; background:
   radial-gradient(110% 80% at 85% 0%, #fbeede 0%, rgba(251,238,222,0) 55%),
   radial-gradient(90% 70% at 5% 10%, #eef2ee 0%, rgba(238,242,238,0) 60%), var(--cream); }
.hero .inner{ max-width:1120px; margin-inline:auto; }
.hero h1{ margin-top:1.1rem; }
.hero .lead{ margin:1.4rem auto 0; max-width:46ch; }
.hero .cta-row{ margin-top:2rem; display:flex; gap:1.4rem; align-items:center; justify-content:center; flex-wrap:wrap; }
.reveal-load{ opacity:0; transform:translateY(18px); animation:rise .8s var(--ease) forwards; }
.dl1{ animation-delay:.08s; } .dl2{ animation-delay:.2s; } .dl3{ animation-delay:.34s; } .dl4{ animation-delay:.46s; }
@keyframes rise{ to{ opacity:1; transform:none; } }

/* typed emphasis + swoosh */
.type-wrap{ display:inline-block; position:relative; }
.hero-line2{ white-space:nowrap; }
@media(max-width:640px){ .hero h1 br{ display:none; } .hero-line2{ white-space:normal; } }
.typed{ font-family:"Spectral",Georgia,serif; font-style:italic; font-weight:600; color:var(--gold); }
.cursor{ display:inline-block; width:2px; height:.9em; background:var(--gold); margin-left:2px; transform:translateY(.1em); animation:blink 1s steps(1) infinite; }
@keyframes blink{ 50%{ opacity:0; } }
.swoosh{ display:block; margin:.1rem auto 0; width:min(360px,68%); height:18px; }
.swoosh path{ stroke:var(--gold); stroke-width:4; fill:none; stroke-linecap:round; stroke-dasharray:420; stroke-dashoffset:420; animation:draw 1.1s var(--ease) 1.1s forwards; }
@keyframes draw{ to{ stroke-dashoffset:0; } }

/* hero card gallery */
.wrap.hero-bleed{ max-width:none; padding-inline:var(--w1); }
.gallery{ display:grid; grid-template-columns:1fr 1.28fr 1fr; gap:1.4rem; align-items:end; margin-top:clamp(2.5rem,5vw,3.6rem); }
.card{ position:relative; border-radius:28px; overflow:hidden; }
.card.c1{ background:#f0e1d2; height:clamp(300px,32vw,500px); } .card.c2{ background:#f6ecda; height:clamp(340px,38vw,580px); } .card.c3{ background:#e7eef5; height:clamp(300px,32vw,500px); }
.card svg{ position:absolute; bottom:0; left:50%; transform:translateX(-50%); width:96%; height:auto; }
.browserbar{ position:absolute; top:14px; left:16px; display:flex; gap:6px; z-index:2; }
.browserbar i{ width:9px; height:9px; border-radius:50%; background:rgba(14,34,54,.18); }
.chip{ position:absolute; z-index:3; background:#fff; border-radius:14px; box-shadow:0 16px 34px -20px rgba(14,34,54,.5); display:flex; align-items:center; gap:.5rem; padding:.5rem .75rem; font-weight:700; font-size:.82rem; color:var(--ink); }
.chip .ic{ width:24px; height:24px; border-radius:50%; display:grid; place-items:center; flex:none; color:#fff; font-size:.78rem; }
.chip.t1{ top:16px; left:-10px; animation:float 5.5s ease-in-out infinite; }
.chip.t2{ bottom:24px; right:-12px; animation:float 6.4s ease-in-out infinite .5s; }
.avatars{ position:absolute; top:14px; right:14px; z-index:3; display:flex; }
.avatars span{ width:34px; height:34px; border-radius:50%; border:2.5px solid #fff; margin-left:-10px; box-shadow:0 6px 14px -8px rgba(0,0,0,.4); }
@keyframes float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-9px); } }
@media(max-width:820px){ .gallery{ grid-template-columns:1fr 1fr; } .card.c3{ display:none; } }
@media(max-width:540px){ .gallery{ grid-template-columns:1fr; } .card.c2{ height:320px; } .chip{ display:none; } }

/* two-column feature */
.feature-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2.5rem,6vw,5rem); align-items:center; }
.feature-grid.flip .imgcard{ order:2; }
@media(max-width:900px){ .feature-grid{ grid-template-columns:1fr; } .feature-grid.flip .imgcard{ order:0; } }
.feature h2{ margin-top:.6rem; max-width:18ch; }
.feature p.body{ margin-top:1.3rem; max-width:46ch; font-size:1.06rem; }
.imgcard{ border-radius:28px; overflow:hidden; background:radial-gradient(120% 100% at 50% 0%, #fbf3e6, #f1e3cf); position:relative; min-height:380px; box-shadow:0 44px 90px -56px rgba(14,34,54,.55); }
.imgcard::after{ content:""; position:absolute; inset:0; border-radius:28px; box-shadow:inset 0 0 0 1px rgba(194,146,79,.22); pointer-events:none; }
.imgcard.blue{ background:radial-gradient(120% 100% at 50% 0%, #eef4fa, #dfe9f2); } .imgcard.sage{ background:radial-gradient(120% 100% at 50% 0%, #eff4ec, #e1e9df); }
.imgcard svg{ position:absolute; bottom:0; left:50%; transform:translateX(-50%); width:92%; }
.imgcard.photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.imgcard.tall{ min-height:clamp(380px,33vw,480px); }
.feature-grid.img-lead{ grid-template-columns:minmax(300px,30rem) 1fr; }
@media(max-width:900px){ .feature-grid.img-lead{ grid-template-columns:1fr; } }
/* about "why we do this": photo stretches to match the copy height */
.why-grid{ align-items:stretch; grid-template-columns:minmax(0,26rem) 1fr; gap:clamp(2.5rem,5vw,5rem); }
.why-grid .imgcard{ min-height:clamp(440px,42vw,620px); align-self:stretch; }
@media(max-width:900px){ .why-grid{ align-items:center; grid-template-columns:1fr; } .why-grid .imgcard{ min-height:360px; } }

/* ===== how it works: full-width navy journey ===== */
.hiw{ background:var(--navy); color:var(--light); padding-block:clamp(4.5rem,9vh,7.5rem) clamp(8.5rem,16vh,13rem); }
.hiw .wrap{ max-width:none; padding-inline:var(--w1); }
.hiw .eyebrow{ color:var(--gold-bright); }
.hiw h2{ color:var(--light); }
.hiw .section-head p{ color:var(--light-soft); }
.hiw-steps{ position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(1.6rem,3vw,3.2rem); margin-top:clamp(3rem,5vw,4.6rem); }
.hiw-thread{ position:absolute; top:37px; left:12.5%; right:12.5%; height:2px; background:repeating-linear-gradient(90deg,var(--gold) 0 8px,transparent 8px 18px); opacity:.45; }
.hiw-step{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; text-align:center; }
.hiw-num{ display:grid; place-items:center; width:74px; height:74px; border-radius:50%; background:var(--navy); border:1.5px solid rgba(232,178,74,.45); font-family:"Spectral",Georgia,serif; font-style:italic; font-weight:600; font-size:1.7rem; color:var(--gold-bright); box-shadow:0 0 0 10px var(--navy); }
.hiw-step h3{ color:var(--light); font-size:clamp(1.2rem,1.5vw,1.45rem); margin-top:1.5rem; }
.hiw-step p{ color:var(--light-soft); margin-top:.65rem; font-size:1.02rem; max-width:30ch; }
@media(max-width:820px){ .hiw-steps{ grid-template-columns:1fr 1fr; gap:2.8rem 2rem; } .hiw-thread{ display:none; } }
@media(max-width:520px){ .hiw-steps{ grid-template-columns:1fr; max-width:440px; margin-inline:auto; } }
/* soft rounded top so section colours curve into each other */
.soft-top{ position:relative; z-index:2; border-radius:clamp(28px,4vw,52px) clamp(28px,4vw,52px) 0 0; margin-top:calc(-1 * clamp(1.8rem,3.5vw,3.5rem)); box-shadow:0 -22px 46px -30px rgba(14,34,54,.28); }

/* about page: single centred testimonial */
.about-quote{ max-width:840px; margin:clamp(2.4rem,4vw,3.4rem) auto 0; text-align:center; }
.about-quote .stars-lg{ display:block; margin-bottom:1.4rem; }
.about-quote p{ font-family:"Spectral",Georgia,serif; font-style:italic; font-weight:500; font-size:clamp(1.4rem,2.4vw,2.05rem); line-height:1.42; color:var(--ink); margin:0; }
.about-quote .mark{ color:var(--gold); font-style:normal; }
.about-quote footer{ display:flex; align-items:center; justify-content:center; gap:1rem; margin-top:2rem; text-align:left; }
.about-quote footer strong{ display:block; color:var(--ink); font-weight:800; }
.about-quote footer span{ display:block; color:var(--ink-soft); font-size:.92rem; margin-top:.1rem; }
@media(max-width:900px){ .imgcard.tall{ min-height:360px; } }
/* three editorial points beneath a feature image */
.three-points{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.8rem,3.4vw,3.4rem); margin-top:clamp(2.8rem,4vw,3.8rem); }
.tp-num{ display:block; font-family:"Spectral",Georgia,serif; font-style:italic; font-weight:600; color:var(--gold); font-size:1.8rem; line-height:1; }
.tp h3{ margin-top:.55rem; font-size:1.22rem; }
.tp p{ margin-top:.45rem; color:var(--ink-soft); }
@media(max-width:760px){ .three-points{ grid-template-columns:1fr; max-width:480px; margin-inline:auto; gap:1.8rem; } }

/* pillars */
.pillars{ margin-top:2rem; display:flex; flex-direction:column; gap:1.3rem; }
.pillar{ display:flex; gap:1rem; align-items:flex-start; }
.pillar .dot{ flex:none; width:44px; height:44px; border-radius:14px; display:grid; place-items:center; background:#fff; box-shadow:0 10px 24px -14px rgba(14,34,54,.4); }
.pillar h3{ font-size:1.1rem; }
.pillar p{ font-size:.98rem; margin-top:.1rem; }

/* steps */
.steps{ margin-top:3rem; display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem; }
@media(max-width:860px){ .steps{ grid-template-columns:1fr 1fr; } }
@media(max-width:520px){ .steps{ grid-template-columns:1fr; } }
.step{ background:#fff; border-radius:22px; padding:1.7rem 1.5rem; box-shadow:0 24px 48px -34px rgba(14,34,54,.5); position:relative; }
.step .num{ font-family:"Spectral",serif; font-style:italic; font-weight:600; font-size:1.5rem; color:var(--gold); }
.step h3{ margin-top:.6rem; font-size:1.08rem; }
.step p{ margin-top:.5rem; font-size:.97rem; }

/* why columns */
.duo{ display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; margin-top:2.6rem; }
@media(max-width:760px){ .duo{ grid-template-columns:1fr; } }
.duo .pane{ border-radius:24px; padding:2rem; }
.duo .google{ background:#fff; border:1px solid var(--line); }
.duo .meta{ background:var(--navy); color:var(--light); }
.duo .pane h3{ font-size:1.25rem; } .duo .meta h3{ color:var(--light); }
.duo .pane p{ margin-top:.7rem; } .duo .meta p{ color:var(--light-soft); }
.duo .tag{ font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; font-weight:700; }
.duo .google .tag{ color:var(--ink-soft); } .duo .meta .tag{ color:var(--gold-bright); }

/* fit list */
.fitlist{ margin-top:2rem; display:grid; grid-template-columns:1fr 1fr; gap:1rem 2rem; }
@media(max-width:680px){ .fitlist{ grid-template-columns:1fr; } }
.fititem{ display:flex; gap:.8rem; align-items:flex-start; font-weight:600; color:var(--ink); }
.fititem svg{ flex:none; margin-top:3px; }

/* offer band */
.offer{ background:var(--navy); color:var(--light); border-radius:32px; padding:clamp(2.5rem,5vw,4rem); position:relative; overflow:hidden; }
.offer::before{ content:""; position:absolute; top:-30%; right:-8%; width:42vw; height:42vw; max-width:520px; max-height:520px; background:radial-gradient(circle,rgba(194,146,79,.22),transparent 62%); }
.offer h2{ color:var(--light); position:relative; max-width:20ch; }
.offer .serif{ color:var(--gold-bright); }
.offer p{ color:var(--light-soft); position:relative; margin-top:1.1rem; max-width:52ch; font-size:1.08rem; }
.offer .cta-row{ position:relative; margin-top:1.8rem; display:flex; gap:1.2rem; flex-wrap:wrap; }

/* faq */
.faq-section .wrap{ max-width:none; padding-inline:var(--w1); }
.faq-grid{ display:grid; grid-template-columns:0.85fr 1.5fr 0.85fr; gap:clamp(3rem,9vw,140px); align-items:center; margin-top:clamp(2.5rem,4vw,3.5rem); }
.faq-aside{ display:flex; flex-direction:column; align-items:flex-start; gap:1.2rem; }
.faq-aside.left{ align-items:flex-end; text-align:right; }
.faq-illo{ width:clamp(180px,15vw,250px); height:auto; }
.faq-illo.small{ width:clamp(160px,13vw,215px); }
.faq-aside p{ color:var(--ink-soft); font-size:1rem; max-width:30ch; margin:0; }
.faq-aside p a{ color:var(--gold-deep); font-weight:700; text-decoration:underline; }
.faq{ display:flex; flex-direction:column; gap:.9rem; }
.qa{ background:#fff; border:1px solid var(--line); border-radius:14px; transition:border-color .3s, box-shadow .3s; }
.qa.open{ border-color:rgba(194,146,79,.55); box-shadow:0 18px 40px -32px rgba(14,34,54,.4); }
.qa button{ width:100%; text-align:left; background:none; border:none; cursor:pointer; padding:1.25rem 1.5rem; display:flex; justify-content:space-between; gap:1.25rem; align-items:center; font-family:inherit; font-size:1.04rem; font-weight:700; color:var(--ink); }
.qa button .pm{ flex:none; width:27px; height:27px; border-radius:50%; border:1.5px solid var(--gold); position:relative; transition:background .3s, border-color .3s; }
.qa.open button .pm{ background:var(--navy); border-color:var(--navy); }
.qa button .pm::before,.qa button .pm::after{ content:""; position:absolute; background:var(--gold-deep); border-radius:2px; transition:transform .3s var(--ease), background .3s; }
.qa button .pm::before{ inset:12px 6.5px; height:2.5px; }
.qa button .pm::after{ inset:6.5px 12px; width:2.5px; }
.qa.open button .pm::before,.qa.open button .pm::after{ background:#fff; }
.qa.open button .pm::after{ transform:scaleY(0); }
.qa .ans{ overflow:hidden; max-height:0; transition:max-height .4s var(--ease); }
.qa .ans p{ padding:0 1.5rem 1.3rem; font-size:1rem; color:var(--ink-soft); }
@media(max-width:980px){ .faq-grid{ grid-template-columns:1fr; max-width:680px; margin-inline:auto; gap:2rem; } .faq{ order:-1; } .faq-aside, .faq-aside.left{ align-items:center; text-align:center; } .faq-aside p{ max-width:none; } }

/* ribbon */
.ribbon{ background:var(--navy); color:var(--light); position:relative; overflow:hidden; }
.ribbon::before{ display:none; }
.ribbon .wrap{ position:relative; padding-block:clamp(3rem,7vh,4.5rem); display:flex; align-items:center; justify-content:space-between; gap:2rem; flex-wrap:wrap; }
.ribbon h2{ color:var(--light); max-width:18ch; } .ribbon .serif{ color:var(--gold-bright); }

/* footer */
footer.foot{ background:var(--navy-soft); color:var(--light-soft); padding-block:clamp(3.5rem,7vh,5.5rem) 2rem; position:relative; overflow:hidden; }
footer.foot::after{ content:""; position:absolute; right:-2%; bottom:-16%; width:min(320px,40vw); height:min(320px,40vw); background:url(assets/heritage-h-mark.png) no-repeat center/contain; opacity:.05; pointer-events:none; }
.foot-top{ position:relative; z-index:1; display:grid; grid-template-columns:1.1fr 3fr; gap:clamp(2.4rem,5vw,5rem); align-items:start; max-width:none; padding-inline:var(--w1); }
.foot-cols{ display:grid; grid-template-columns:repeat(4,1fr); gap:2rem 1.4rem; }
@media(max-width:900px){ .foot-top{ grid-template-columns:1fr; gap:2.6rem; } }
@media(max-width:560px){ .foot-cols{ grid-template-columns:1fr 1fr; } }
footer .brand .name{ color:var(--light); }
.foot-brand .brand img{ height:50px; }
.foot-trust{ display:flex; flex-wrap:wrap; gap:.55rem .6rem; margin-top:1.5rem; }
.foot-trust span{ display:inline-flex; align-items:center; gap:.45rem; font-size:.8rem; font-weight:600; color:var(--light-soft); border:1px solid rgba(255,255,255,.14); border-radius:999px; padding:.4rem .85rem; }
.foot-trust span::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--gold-bright); flex:none; }
footer .fcol{ display:flex; flex-direction:column; align-items:flex-start; }
footer .fcol h4{ color:var(--light); font-size:.8rem; letter-spacing:.16em; text-transform:uppercase; font-weight:700; margin-bottom:.9rem; }
footer .fcol a{ position:relative; display:inline-block; color:var(--light-soft); text-decoration:none; font-size:.96rem; padding:.28rem 0; }
footer .fcol a::after{ content:""; position:absolute; left:0; bottom:.14rem; width:100%; height:1.5px; background:var(--gold-bright); transform:scaleX(0); transform-origin:left; transition:transform .28s var(--ease); }
footer .fcol a:hover{ color:var(--gold-bright); }
footer .fcol a:hover::after{ transform:scaleX(1); }
footer .fcol .floc{ display:block; color:var(--light-soft); font-size:.96rem; padding:.28rem 0; }
footer .tag{ margin-top:1rem; font-size:.95rem; max-width:34ch; }
footer .legal{ position:relative; z-index:1; max-width:none; padding-inline:var(--w1); margin-top:clamp(2.5rem,5vw,3.5rem); padding-top:1.5rem; border-top:1px solid rgba(255,255,255,.1); font-size:.85rem; display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
footer .legal a{ color:inherit; text-decoration:none; opacity:.8; transition:opacity .2s ease; }
footer .legal a:hover{ opacity:1; text-decoration:underline; }

/* ---- footer newsletter subscribe band ---- */
.foot-sub{ position:relative; z-index:1; display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(1.6rem,4vw,4.5rem); align-items:center; max-width:none; padding-inline:var(--w1); padding-bottom:clamp(2.4rem,4.5vw,3.4rem); margin-bottom:clamp(2.4rem,4.5vw,3.4rem); border-bottom:1px solid rgba(255,255,255,.12); scroll-margin-top:100px; }
.foot-sub .fs-eyebrow{ display:block; font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; font-weight:700; color:var(--gold-bright); margin-bottom:.6rem; }
.foot-sub h3{ color:var(--light); font-size:clamp(1.35rem,2.5vw,1.75rem); line-height:1.18; }
.foot-sub .fs-copy p{ color:var(--light-soft); font-size:.98rem; margin-top:.6rem; max-width:44ch; }
.fs-form{ width:100%; }
.fs-fields{ display:flex; gap:.7rem; flex-wrap:wrap; align-items:stretch; }
.fs-fields .fs-in{ flex:1 1 150px; min-width:0; font-family:inherit; font-size:1rem; color:var(--light); background:rgba(255,255,255,.06); border:1.5px solid rgba(255,255,255,.18); border-radius:12px; padding:.85rem 1rem; transition:border-color .2s, box-shadow .2s, background .2s; }
.fs-fields .fs-in::placeholder{ color:rgba(255,255,255,.5); }
.fs-fields .fs-in:focus{ outline:none; border-color:var(--gold-bright); background:rgba(255,255,255,.1); box-shadow:0 0 0 3px rgba(232,178,74,.18); }
.fs-fields .btn{ flex:0 0 auto; white-space:nowrap; }
.fs-hp{ position:absolute !important; left:-9999px !important; top:auto; width:1px; height:1px; overflow:hidden; opacity:0; pointer-events:none; }
.fs-note{ color:var(--light-soft); font-size:.82rem; margin-top:.75rem; opacity:.85; }
.fs-note a{ color:var(--gold-bright); text-decoration:underline; text-underline-offset:2px; }
.fs-msg{ font-size:.92rem; margin-top:.6rem; min-height:1.1em; line-height:1.4; }
.fs-msg.ok{ color:var(--gold-bright); }
.fs-msg.err{ color:#ffb4a2; }
.fs-form.is-done .fs-fields, .fs-form.is-done .fs-note{ display:none; }
.fs-form.is-done .fs-msg{ font-size:1rem; }
@media(max-width:900px){ .foot-sub{ grid-template-columns:1fr; gap:1.3rem; } .foot-sub .fs-copy p{ max-width:52ch; } }
@media(max-width:560px){ .fs-fields{ flex-direction:column; align-items:stretch; } .fs-fields .fs-in{ flex:1 1 auto; } .fs-fields .btn{ width:100%; } }
/* nav Subscribe link on mobile menu */
.mobile-menu .mm-sub{ }
@media(prefers-reduced-motion:reduce){ footer .fcol a::after{ transition:none; } }

/* reveal on scroll */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.08s; } .reveal.d2{ transition-delay:.16s; } .reveal.d3{ transition-delay:.26s; } .reveal.d4{ transition-delay:.36s; }

/* included / deliverables grid */
.included{ margin-top:2.8rem; display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; }
@media(max-width:860px){ .included{ grid-template-columns:1fr 1fr; } }
@media(max-width:520px){ .included{ grid-template-columns:1fr; } }
.inc{ background:#fff; border-radius:20px; padding:1.6rem; box-shadow:0 22px 46px -34px rgba(14,34,54,.5); }
.inc .ico{ width:46px; height:46px; border-radius:13px; background:var(--cream); display:grid; place-items:center; margin-bottom:1rem; }
.inc h3{ font-size:1.06rem; } .inc p{ font-size:.96rem; margin-top:.4rem; }

/* testimonial / story */
.story-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(2rem,5vw,3.5rem); align-items:center; }
@media(max-width:900px){ .story-grid{ grid-template-columns:1fr; } }
.videowrap{ position:relative; border-radius:24px; overflow:hidden; background:var(--navy); box-shadow:0 40px 80px -44px rgba(14,34,54,.7); aspect-ratio:16/9; }
.videowrap iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.quote{ font-family:"Spectral",Georgia,serif; font-weight:500; font-style:italic; font-size:clamp(1.5rem,2.6vw,2rem); line-height:1.32; color:var(--ink); }
.quote .mark{ color:var(--gold); }
.quote-who{ margin-top:1.2rem; font-family:"Hanken Grotesk",sans-serif; font-style:normal; font-weight:700; font-size:.95rem; color:var(--ink-soft); letter-spacing:.02em; }
.story-note{ margin-top:1.4rem; font-size:1.05rem; }

/* founders */
.founders{ margin-top:2.8rem; display:grid; grid-template-columns:1fr 1fr; gap:1.4rem; }
@media(max-width:760px){ .founders{ grid-template-columns:1fr; } }
.founder{ background:#fff; border-radius:24px; box-shadow:0 24px 50px -36px rgba(14,34,54,.5); display:flex; flex-direction:column; overflow:hidden; }
.founder .pic{ flex:none; width:100%; aspect-ratio:1/1; border-radius:0; overflow:hidden; background:var(--cream); position:relative; }
.founder .pic svg,.founder .pic img{ width:100%; height:100%; object-fit:cover; }
.founder .pic img{ position:static; transform:none; width:100%; height:100%; object-fit:cover; object-position:50% 30%; }
.founder>div:not(.pic){ padding:1.5rem 1.7rem 1.9rem; }
.founder h3{ font-size:1.35rem; } .founder .role{ color:var(--gold-deep); font-weight:700; font-size:.85rem; letter-spacing:.04em; margin-top:.15rem; }
.founder p{ margin-top:.7rem; font-size:.98rem; }

/* contact form */
.contact-grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(2rem,5vw,4rem); align-items:start; }
@media(max-width:880px){ .contact-grid{ grid-template-columns:1fr; } }
.contact-aside h2{ margin-top:.6rem; }
.contact-aside p{ margin-top:1.1rem; font-size:1.06rem; }
.reassure{ margin-top:1.8rem; display:flex; flex-direction:column; gap:.9rem; }
.reassure div{ display:flex; gap:.7rem; align-items:center; font-weight:600; color:var(--ink); font-size:.98rem; }
.form-card{ background:#fff; border-radius:26px; padding:clamp(1.6rem,3vw,2.4rem); box-shadow:0 30px 60px -40px rgba(14,34,54,.55); }
.field{ margin-bottom:1.1rem; }
.field label{ display:block; font-weight:700; font-size:.9rem; margin-bottom:.45rem; color:var(--ink); }
.field input,.field select,.field textarea{ width:100%; font-family:inherit; font-size:1rem; color:var(--ink); background:var(--cream); border:1.5px solid var(--line); border-radius:12px; padding:.8rem .95rem; transition:border-color .2s, box-shadow .2s; }
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(194,146,79,.18); }
.field textarea{ min-height:110px; resize:vertical; }
.row2{ display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; }
@media(max-width:520px){ .row2{ grid-template-columns:1fr; } }
.form-card .btn{ width:100%; justify-content:center; margin-top:.4rem; }
.form-note{ margin-top:.9rem; font-size:.85rem; color:var(--ink-soft); text-align:center; }
.form-success{ display:none; text-align:center; padding:2rem 1rem; }
.form-success.show{ display:block; }
.form-success .tick{ width:64px; height:64px; border-radius:50%; background:var(--sage); display:grid; place-items:center; margin:0 auto 1.1rem; }
.form-success h3{ font-size:1.4rem; } .form-success p{ margin-top:.6rem; }
form.sent .form-body{ display:none; }

/* ===== peel-up section transition (sticky stack) ===== */
.peel-pair{ position:relative; }
.peel-top{ position:sticky; top:0; }
.peel-up{ position:relative; z-index:2; background:var(--cream); border-radius:46px 46px 0 0; margin-top:-2.6rem; box-shadow:0 -30px 60px -28px rgba(14,34,54,.4); }
.peel-up.blush{ background:var(--blush); }
.peel-up.sage{ background:var(--sage); }

/* ===== ethos: results + care, with side stat cards ===== */
.ethos{ position:relative; z-index:2; background:#fff; border-radius:clamp(40px,5vw,64px) clamp(40px,5vw,64px) 0 0; margin-top:calc(-1 * clamp(2.5rem,5vw,5rem)); padding-block:clamp(4rem,6vw,6rem) clamp(4rem,8vh,6rem); box-shadow:0 -30px 70px -42px rgba(14,34,54,.45); }
.ethos-panel{ padding-inline:calc(var(--w1) * 2); }
.ethos-top{ display:grid; grid-template-columns:minmax(300px,25rem) 1fr; gap:clamp(2.5rem,5vw,5rem); align-items:center; }
.ethos-copy h2{ margin-top:1.15rem; max-width:15ch; }
.ethos-copy p.body{ margin-top:1.3rem; color:var(--ink-soft); font-size:1.07rem; max-width:42ch; }
.ethos-copy .text-link{ margin-top:1.7rem; display:inline-flex; align-items:center; gap:.5rem; }
.ethos-photo{ min-height:clamp(420px,44vw,600px); }
.ethos-facts{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4.5rem); margin-top:clamp(2.8rem,4.5vw,4rem); padding-top:clamp(2.4rem,4vw,3rem); border-top:1px solid var(--line); }
.fact-num{ font-weight:800; font-size:clamp(2.4rem,4vw,3.4rem); line-height:1; letter-spacing:-.02em; color:var(--gold-deep); }
.fact p{ margin-top:.9rem; color:var(--ink-soft); font-size:1.02rem; max-width:40ch; }
.stats{ display:flex; flex-direction:column; gap:1.3rem; }
.stat{ border-radius:24px; padding:1.9rem; }
.stat.navy{ background:var(--navy); color:var(--light); box-shadow:0 30px 60px -40px rgba(14,34,54,.6); }
.stat.cream{ background:var(--cream); border:1px solid var(--line); box-shadow:0 24px 50px -40px rgba(14,34,54,.35); }
.stat .num{ font-weight:800; font-size:clamp(2.6rem,4vw,3.4rem); line-height:1; letter-spacing:-.02em; }
.stat.navy .num{ color:var(--gold-bright); }
.stat.cream .num{ color:var(--gold-deep); }
.stat p{ margin-top:.8rem; font-size:.99rem; }
.stat.navy p{ color:var(--light-soft); }
.stat.cream p{ color:var(--ink-soft); }
@media(max-width:1000px){
  .ethos-top{ grid-template-columns:1fr; text-align:center; gap:2.4rem; max-width:640px; margin-inline:auto; }
  .ethos-copy h2,.ethos-copy p.body{ max-width:none; margin-inline:auto; }
  .ethos-copy .eyebrow::after{ margin-inline:auto; }
  .ethos-photo{ min-height:360px; }
  .stats{ flex-direction:row; text-align:left; }
}
@media(max-width:560px){ .stats{ flex-direction:column; } .ethos-facts{ grid-template-columns:1fr; gap:1.8rem; } }

/* ===== expanding boxes (horizontal accordion) ===== */
.solutions{ color:var(--light); padding-block:clamp(1.5rem,4vh,3rem) 0; }
.solutions.peel-top{ position:sticky; top:0; }
.solutions .wrap{ position:relative; max-width:none; padding-inline:var(--w1); }
.sol-panel{ position:relative; overflow:hidden; background:var(--navy); border-radius:44px; padding:clamp(3.2rem,5vw,4.6rem) var(--w1) clamp(4rem,7vw,6rem); text-align:center; min-height:1060px; display:flex; flex-direction:column; justify-content:flex-start; }
.sol-panel::before{ display:none; }
.sol-panel > *{ position:relative; }
.sol-cta{ display:flex; gap:1.3rem; align-items:center; justify-content:center; flex-wrap:wrap; margin-top:1.8rem; }
.sol-link{ position:relative; color:var(--light); text-decoration:none; font-weight:700; font-size:.96rem; padding-bottom:5px; }
.sol-link::after{ content:""; position:absolute; left:0; bottom:0; width:100%; height:2px; background:var(--gold-bright); transform:scaleX(0); transform-origin:right; transition:transform .4s var(--ease); }
.sol-link:hover::after{ transform:scaleX(1); transform-origin:left; }
.sol-row{ display:flex; justify-content:center; align-items:flex-start; gap:2rem; margin-top:3rem; text-align:left; flex-wrap:wrap; }
.sol-item{ display:flex; flex-direction:column; }
.sol-label{ font-weight:800; color:var(--light); font-size:1.04rem; margin-bottom:.9rem; padding-left:.15rem; white-space:nowrap; }
.sol-body{ display:flex; align-items:stretch; }
.sol-card{ width:240px; height:240px; border-radius:22px; border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.03); cursor:pointer; display:grid; place-items:center; transition:background .35s var(--ease), border-color .35s; flex:none; padding:.7rem; overflow:hidden; }
.sol-card:hover{ border-color:rgba(255,255,255,.32); }
.sol-card:focus-visible{ outline:2px solid var(--gold-bright); outline-offset:3px; }
.sol-item.active .sol-card{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.24); }
.sol-card svg{ width:92%; height:auto; max-height:88%; }
.sol-card img.sol-ico{ width:92%; height:92%; object-fit:contain; }
/* Per-icon scale + nudge: the funnel art fills its canvas; the others have
   uneven transparent margin baked in, so we scale them up to match and shift
   them to sit centred in the box. Tweak the translate values to re-centre. */
.sol-card img[src$="icon-film.png"]{ transform:translate(10px,-20px) scale(1.7); }
.sol-card img[src$="icon-meta.png"]{ transform:translate(0,-18px) scale(1.4); }
.sol-card img[src$="icon-reporting.png"]{ transform:translate(10px,-20px) scale(1.6); }
.sol-desc{ width:0; overflow:hidden; opacity:0; transition:width .55s var(--ease), opacity .4s var(--ease), padding .4s; display:flex; flex-direction:column; justify-content:center; }
.sol-desc > div{ width:clamp(290px,21vw,410px); flex:none; padding-left:1.9rem; }
.sol-item.active .sol-desc{ width:clamp(290px,21vw,410px); opacity:1; }
.sol-desc p{ color:var(--light); font-size:1.02rem; line-height:1.55; }
.sol-desc .sol-more{ color:var(--gold-bright); }
.sol-more{ display:inline-block; margin-top:1rem; color:var(--gold-bright); font-weight:700; text-decoration:none; font-size:.92rem; white-space:nowrap; }
@media(max-width:980px){ .sol-row{ flex-wrap:wrap; } }
@media(max-width:760px){
  .sol-row{ flex-direction:column; gap:1.6rem; align-items:stretch; }
  .sol-body{ flex-direction:row; align-items:center; }
  .sol-card{ width:120px; height:120px; }
  .sol-desc{ width:auto; opacity:1; padding:0 0 0 1.2rem; }
}

/* ===== families: left accordion + right illustration ===== */
.families{ padding-block:clamp(4.5rem,9vh,7.5rem); }
.families .wrap{ max-width:none; padding-inline:calc(var(--w1) * 2); }
.fam-head{ text-align:center; max-width:640px; margin:0 auto clamp(2.6rem,5vw,3.6rem); }
.fam-head h2{ margin-top:.7rem; }
.fam-grid{ display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
.fam-acc{ display:flex; flex-direction:column; gap:1.1rem; }
.acc{ background:#fff; border:1px solid var(--line); border-radius:20px; box-shadow:0 18px 44px -34px rgba(14,34,54,.45); overflow:hidden; transition:border-color .3s, box-shadow .3s; }
.acc.open{ border-color:rgba(194,146,79,.55); box-shadow:0 26px 54px -32px rgba(14,34,54,.42); }
.acc-btn{ width:100%; text-align:left; background:none; border:none; cursor:pointer; padding:1.35rem 1.6rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; font-family:inherit; font-size:clamp(1.1rem,1.5vw,1.25rem); font-weight:800; color:var(--ink); }
.acc-ico{ flex:none; width:30px; height:30px; border-radius:50%; display:grid; place-items:center; background:var(--cream); position:relative; transition:background .3s; }
.acc.open .acc-ico{ background:var(--navy); }
.acc-ico::before,.acc-ico::after{ content:""; position:absolute; background:var(--gold-deep); border-radius:2px; transition:transform .3s, background .3s; }
.acc-ico::before{ width:12px; height:2.4px; }
.acc-ico::after{ width:2.4px; height:12px; }
.acc.open .acc-ico::before,.acc.open .acc-ico::after{ background:#fff; }
.acc.open .acc-ico::after{ transform:scaleY(0); }
.acc-body{ overflow:hidden; max-height:0; transition:max-height .45s var(--ease); }
.acc-body p{ padding:0 1.6rem 1.5rem; color:var(--ink-soft); font-size:1.01rem; max-width:48ch; }
.fam-illo{ display:grid; place-items:center; }
.fam-illo svg{ width:100%; max-width:800px; height:auto; }

/* ===== logo strip: channels we work across ===== */
.logos{ padding-block:clamp(3.5rem,6vh,5.5rem); }
.logos .wrap{ max-width:min(1520px,94vw); }
.logos-label{ text-align:center; color:var(--ink-soft); font-weight:600; font-size:1rem; max-width:46ch; margin:0 auto clamp(2rem,3.5vw,3rem); }
.logo-row{ display:flex; align-items:center; justify-content:center; flex-wrap:nowrap; }
.logo-item{ flex:1 1 0; min-width:0; max-width:500px; height:190px; display:flex; align-items:center; justify-content:center; padding:0 2rem; }
.logo-item + .logo-item{ border-left:1px solid var(--line); }
.logo-item img{ max-height:160px; max-width:92%; width:auto; height:auto; }
@media(max-width:680px){ .logo-row{ flex-wrap:wrap; } .logo-item{ flex:1 1 44%; max-width:none; height:110px; padding:0 .8rem; } .logo-item + .logo-item{ border-left:none; } .logo-item img{ max-height:84px; } }

/* ===== reviews: two text testimonials ===== */
.reviews{ padding-block:clamp(4.5rem,9vh,7.5rem) clamp(8.5rem,16vh,13rem); }
.reviews .wrap{ max-width:none; padding-inline:calc(var(--w1) * 2); }
.reviews-head{ margin-bottom:clamp(2.8rem,5vw,4.2rem); }
.stars{ color:var(--gold); letter-spacing:4px; font-size:1.05rem; line-height:1; white-space:nowrap; }
.stars-lg{ font-size:1.5rem; letter-spacing:6px; margin-bottom:1.1rem; }
.reviews-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,700px)); justify-content:center; }
.review{ margin:0; min-height:300px; padding:0 clamp(2rem,3.2vw,3.6rem); display:flex; flex-direction:column; }
.review + .review{ border-left:1px solid var(--line); }
.review-top{ display:flex; align-items:center; gap:1rem; margin-bottom:1.3rem; }
.pill{ border:1.5px solid var(--gold); color:var(--gold-deep); border-radius:999px; padding:.34rem 1rem; font-size:.8rem; font-weight:700; }
.review p{ font-size:clamp(1rem,1.25vw,1.1rem); line-height:1.6; color:var(--ink); margin:0; }
.review p .mark{ color:var(--gold); font-weight:600; }
.review footer{ display:flex; align-items:center; gap:1rem; margin-top:auto; padding-top:1.8rem; }
.who-avatar{ flex:none; position:relative; overflow:hidden; width:56px; height:56px; border-radius:50%; background:var(--navy); color:var(--gold-bright); display:grid; place-items:center; font-family:"Spectral",serif; font-size:1.4rem; font-weight:600; }
.who-avatar img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.review footer strong{ display:block; font-size:1.05rem; color:var(--ink); font-weight:800; }
.review footer span{ display:block; color:var(--ink-soft); font-size:.92rem; margin-top:.1rem; }
@media(max-width:820px){ .reviews-grid{ grid-template-columns:1fr; gap:2.4rem; } .review{ min-height:0; padding:0; } .review + .review{ border-left:none; border-top:1px solid var(--line); padding-top:2.4rem; } }

/* ===== closer: two trust cards + final CTA ===== */
.closer{ position:relative; z-index:1; background:var(--navy-soft); padding-block:clamp(40px,6vw,90px) 180px; }
.closer + .foot{ padding-top:0; }
.closer-wave{ position:absolute; left:0; top:0; width:100%; height:clamp(200px,24vw,330px); display:block; z-index:0; }
.closer-wave path{ fill:var(--blush); }
.closer-inner{ position:relative; z-index:2; max-width:1200px; margin:0 auto; padding-inline:clamp(1.25rem,4vw,2rem); }
.closer-top{ display:grid; grid-template-columns:1fr 1fr; gap:1.25rem; }
.closer-card{ background:var(--navy); border:1px solid rgba(255,255,255,.08); border-radius:26px; min-height:450px; padding:clamp(2rem,3vw,2.8rem); color:var(--light); display:flex; flex-direction:column; }
.closer-card .ctop{ font-size:clamp(1.05rem,1.4vw,1.18rem); line-height:1.55; color:var(--light); max-width:32ch; margin:0; }
.closer-card .cbottom{ margin-top:auto; padding-top:2rem; }
.chip-row{ display:flex; flex-wrap:wrap; gap:.6rem; }
.chip-mini{ display:inline-flex; align-items:center; gap:.45rem; border:1px solid rgba(255,255,255,.16); border-radius:999px; padding:.45rem .95rem; font-size:.85rem; font-weight:600; color:var(--light-soft); }
.closer-card.proof{ align-items:center; justify-content:center; text-align:center; }
.closer-card.proof .bigstars{ font-size:clamp(2.2rem,4vw,2.8rem); color:var(--gold); letter-spacing:8px; line-height:1; }
.closer-card.proof p{ color:var(--light-soft); font-size:1.06rem; margin-top:1.3rem; max-width:24ch; }
.closer-cta{ margin-top:110px; background:var(--cream); border-radius:34px; min-height:535px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:clamp(2.5rem,5vw,4rem); }
.closer-cta .cta-illo{ width:clamp(150px,17vw,210px); height:auto; margin-bottom:1.4rem; }
.closer-cta h2{ max-width:18ch; }
.closer-cta .sub{ margin-top:1.1rem; font-size:1.1rem; color:var(--ink-soft); max-width:44ch; }
.closer-cta .btn{ margin-top:2rem; }
.closer-cta .note{ margin-top:1.1rem; font-size:.9rem; color:var(--ink-soft); }
@media(max-width:820px){ .closer-top{ grid-template-columns:1fr; } .closer-card{ min-height:0; } .closer-cta{ min-height:0; } }
@media(max-width:900px){ .fam-grid{ grid-template-columns:1fr; } .fam-illo{ order:-1; } }

@media(prefers-reduced-motion:reduce){ *{ animation:none!important; transition:none!important; } .reveal,.reveal-load{ opacity:1; transform:none; } .swoosh path{ stroke-dashoffset:0; } .peel-top{ position:relative; } }

/* ===== service directory: editorial index ===== */
.svc-index{ list-style:none; margin:clamp(2.4rem,4vw,3.4rem) auto 0; max-width:940px; }
.svc-entry{ border-top:1px solid var(--line); }
.svc-entry:last-child{ border-bottom:1px solid var(--line); }
.svc-entry a{ display:flex; align-items:center; gap:clamp(1.1rem,2.6vw,2.2rem); padding:clamp(1.5rem,2.5vw,2.3rem) clamp(.3rem,1.4vw,1.2rem); text-decoration:none; color:var(--ink); transition:padding-left .4s var(--ease); }
.svc-num{ flex:none; font-family:"Spectral",Georgia,serif; font-style:italic; font-weight:600; font-size:clamp(1.5rem,2.4vw,2.2rem); color:var(--gold); line-height:1; min-width:1.8ch; }
.svc-text{ flex:1 1 auto; min-width:0; }
.svc-name{ display:block; font-family:"Hanken Grotesk",sans-serif; font-weight:800; font-size:clamp(1.3rem,2.1vw,1.85rem); letter-spacing:-.02em; line-height:1.12; color:var(--ink); transition:color .3s; }
.svc-line{ display:block; margin-top:.45rem; color:var(--ink-soft); font-size:1.02rem; max-width:54ch; }
.svc-go{ flex:none; width:50px; height:50px; border-radius:50%; border:1.5px solid var(--line); display:grid; place-items:center; color:var(--gold-deep); transition:background .35s var(--ease), border-color .35s, color .35s, transform .35s var(--ease); }
.svc-entry a:hover{ padding-left:clamp(.8rem,2.2vw,1.8rem); }
.svc-entry a:hover .svc-name{ color:var(--gold-deep); }
.svc-entry a:hover .svc-go{ background:var(--navy); border-color:var(--navy); color:#fff; transform:translateX(5px); }
.svc-entry a:focus-visible{ outline:2px solid var(--gold); outline-offset:4px; border-radius:6px; }
@media(max-width:560px){
  .svc-entry a{ gap:.9rem; padding-block:1.3rem; }
  .svc-num{ font-size:1.35rem; }
  .svc-go{ width:40px; height:40px; }
}

/* ===== service detail pages (shared) ===== */
.svc-back{ display:inline-flex; align-items:center; gap:.5rem; color:var(--ink-soft); text-decoration:none; font-weight:700; font-size:.92rem; margin-bottom:1.4rem; transition:color .25s; }
.svc-back:hover{ color:var(--gold-deep); }
.svc-back svg{ transition:transform .3s var(--ease); }
.svc-back:hover svg{ transform:translateX(-3px); }
.incl-list{ margin:clamp(2rem,3vw,2.8rem) auto 0; max-width:760px; display:grid; grid-template-columns:1fr 1fr; gap:1rem 2.4rem; }
@media(max-width:640px){ .incl-list{ grid-template-columns:1fr; } }
.incl-item{ display:flex; gap:.85rem; align-items:flex-start; font-weight:600; color:var(--ink); border-top:1px solid var(--line); padding-top:1rem; }
.incl-item svg{ flex:none; margin-top:3px; }

/* ===== what you get: three themes, two parts each ===== */
.yget .wrap{ max-width:none; padding-inline:calc(var(--w1) * 2); }
.w3 .wrap{ max-width:none; padding-inline:max(16px, calc(var(--w1) * 2 - 100px)); }
.w2 .wrap{ max-width:none; padding-inline:calc(var(--w1) * 2); }
/* The truth: large image feature, text scaled up, no centre void */
.truth .feature-grid{ grid-template-columns:minmax(360px,33rem) 1fr; gap:clamp(2.5rem,4.5vw,5.5rem); align-items:center; }
.truth .imgcard{ min-height:clamp(440px,42vw,640px); }
.truth .feature h2{ font-size:clamp(2.4rem,3.6vw,3.5rem); max-width:none; line-height:1.05; }
.truth .feature .body{ font-size:clamp(1.12rem,1.3vw,1.38rem); max-width:none; margin-top:1.7rem; }
@media(max-width:900px){ .truth .feature-grid{ grid-template-columns:1fr; } .truth .imgcard{ min-height:340px; } }
/* trust bar under the testimonials */
.trust-bar{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem 2.2rem; max-width:1040px; margin:clamp(3rem,5vw,4.4rem) auto 0; padding-top:clamp(2.6rem,4vw,3.4rem); border-top:1px solid rgba(194,146,79,.3); }
.trust-item{ display:flex; gap:.7rem; align-items:flex-start; font-weight:600; color:var(--ink); font-size:.98rem; line-height:1.42; }
.trust-item svg{ flex:none; margin-top:2px; }
@media(max-width:820px){ .trust-bar{ grid-template-columns:1fr 1fr; max-width:620px; gap:1.4rem 2rem; } }
@media(max-width:480px){ .trust-bar{ grid-template-columns:1fr; max-width:360px; } }
/* full-width photo band */
.photo-band{ position:relative; border-radius:clamp(20px,3vw,34px); overflow:hidden; height:clamp(360px,46vw,700px); box-shadow:0 44px 90px -58px rgba(14,34,54,.55); }
.photo-band img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.photo-band::after{ content:""; position:absolute; inset:0; border-radius:inherit; box-shadow:inset 0 0 0 1px rgba(194,146,79,.22); pointer-events:none; }
.photo-band.sm{ height:clamp(280px,32vw,440px); }
.photo-band.hero-photo{ height:clamp(360px,44vw,640px); margin-top:clamp(2.8rem,5vw,4.2rem); }
.offer-themes{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.6rem,3vw,3rem); margin-top:clamp(2.6rem,4vw,3.8rem); align-items:start; }
.offer-theme{ display:flex; flex-direction:column; }
.ot-head{ text-align:center; padding:0 .4rem 1.6rem; min-height:232px; }
.ot-num{ display:block; font-family:"Spectral",Georgia,serif; font-style:italic; font-weight:600; color:var(--gold); font-size:1.6rem; line-height:1; }
.ot-head h3{ font-size:clamp(1.3rem,1.6vw,1.55rem); margin-top:.45rem; }
.ot-head p{ color:var(--ink-soft); font-size:1rem; margin-top:.55rem; max-width:30ch; margin-inline:auto; }
.ot-head .text-link{ margin-top:1rem; display:inline-block; font-size:.92rem; }
.ot-cards{ display:flex; flex-direction:column; gap:1.2rem; }
.ot-card{ background:#fff; border:1px solid var(--line); border-radius:20px; padding:1.7rem 1.8rem; box-shadow:0 26px 52px -38px rgba(14,34,54,.5); min-height:200px; }
.ot-card .ico{ width:50px; height:50px; border-radius:14px; background:var(--cream); display:grid; place-items:center; margin-bottom:1rem; }
.ot-card .ico svg{ width:26px; height:26px; }
.ot-card h4{ font-size:1.12rem; font-weight:800; letter-spacing:-.01em; }
.ot-card p{ color:var(--ink-soft); font-size:.98rem; margin-top:.35rem; }
@media(max-width:900px){ .offer-themes{ grid-template-columns:1fr; max-width:560px; margin-inline:auto; gap:2rem; } .ot-head{ min-height:0; padding-bottom:1.1rem; } .ot-card{ min-height:0; } }

/* =====================================================================
   MOBILE LAYER — a designed-for-phone experience (additive only)
   Nothing above this line has been changed. Main phone breakpoint 720px,
   with finer tweaks at 430px and 380px. Targeted !important is used only
   where inline style="" attributes or page-level <style> blocks would
   otherwise win the cascade.
   ===================================================================== */
@media (max-width:720px){
  :root{ --mg:clamp(1.25rem,5vw,1.75rem); } /* one calm phone gutter */

  /* ---- global guards & rhythm ---- */
  html, body{ overflow-x:clip; }
  .wrap{ padding-inline:var(--mg); }
  /* normalise the inline "width-2" wrappers on the deep-dive/guide pages */
  .wrap[style]{ max-width:none !important; padding-inline:var(--mg) !important; }
  .wrap.hero-bleed, .hiw .wrap, .faq-section .wrap, .solutions .wrap,
  .ethos-panel, .families .wrap, .reviews .wrap,
  .yget .wrap, .w2 .wrap, .w3 .wrap,
  .foot-top, footer .legal{ padding-inline:var(--mg); }
  .section{ padding-block:clamp(3.6rem,9vh,5rem); }
  .section.tight{ padding-block:clamp(3rem,7vh,4rem); }
  h2{ font-size:clamp(1.8rem,6vw,2.25rem); text-wrap:balance; }
  .section-head p{ font-size:1.03rem; }
  .lead{ font-size:1.05rem; }

  /* ---- header ---- */
  .nav .wrap{ min-height:70px; }
  .brand img{ height:38px; }
  header.nav.scrolled .brand img{ height:34px; }

  /* ---- hero: typed line may wrap, never overflow ---- */
  .hero{ padding-block:clamp(3rem,6vh,4rem) clamp(2.2rem,5vh,3rem); }
  .hero h1{ font-size:clamp(2.05rem,8vw,2.6rem); }
  .hero h1 br{ display:none; }
  .hero-line2{ white-space:normal; }
  .hero .lead{ margin-top:1.1rem; }
  .swoosh{ height:14px; }
  .svc-back{ margin-bottom:1rem; }
  /* CTA rows stack into one clear full-width action */
  .cta-row{ flex-direction:column; align-items:center; gap:1.05rem; }
  .hero .cta-row{ margin-top:1.6rem; }
  .cta-row .btn{ width:100%; max-width:420px; }
  .btn{ padding:1rem 1.7rem; }
  .btn.has-h{ padding-inline:2.2rem; }
  /* photos keep a fixed friendly ratio instead of viewport-tied heights */
  .photo-band, .photo-band.sm{ height:auto; aspect-ratio:1/1; }
  .photo-band.hero-photo{ height:auto; aspect-ratio:4/5; margin-top:2rem; }

  /* ---- services hero film ---- */
  .wrap.hero-film{ padding-inline:var(--mg) !important; }
  .film-after{ flex-direction:column; align-items:center; gap:1.1rem; }
  .film-after .btn{ width:100%; max-width:420px; }

  /* ---- feature grids: image-led, stacked, ratio-sized ---- */
  .feature-grid{ gap:1.6rem; }
  .feature-grid .imgcard, .feature-grid.flip .imgcard{ order:-1; }
  .feature-grid .imgcard, .why-grid .imgcard, .truth .imgcard, .imgcard.tall{
    min-height:0 !important; height:auto; aspect-ratio:4/3; }
  .feature h2{ max-width:none; }
  .feature p.body{ max-width:none; font-size:1.03rem; margin-top:1rem; }
  .truth .feature h2{ font-size:clamp(1.9rem,6.6vw,2.35rem); }
  .truth .feature .body{ font-size:1.06rem; margin-top:1.1rem; }

  /* ---- ethos (results + care) ---- */
  .ethos{ border-radius:30px 30px 0 0; padding-block:3rem 3.2rem; }
  .ethos-top{ gap:1.8rem; }
  .ethos-photo{ min-height:0; aspect-ratio:3/2; }
  .ethos-facts{ margin-top:2.4rem; padding-top:2rem; }
  .stats{ gap:1rem; }
  .stat{ padding:1.6rem 1.4rem; }

  /* ---- solutions panel: premium vertical accordion (large icons + titles, spaced, no dividers) ---- */
  .solutions .wrap{ padding-inline:clamp(.8rem,2.6vw,1.1rem); }
  .sol-panel{ display:block; min-height:0; border-radius:26px; padding:2.8rem 1.3rem 3rem; }
  .sol-cta{ flex-direction:column; gap:1.1rem; margin-top:1.6rem; }
  .sol-cta .btn{ width:100%; max-width:420px; }
  .sol-row{ flex-direction:column; gap:1.5rem; margin-top:2rem; align-items:stretch; justify-content:flex-start; min-height:0 !important; text-align:left; }
  .sol-item{ position:relative; display:block; padding:0; cursor:pointer; }
  .sol-body{ display:block; }
  /* larger icon chip pinned to the row; whole row is the tap target */
  .sol-card{ position:absolute; top:0; left:0; width:86px; height:86px; border-radius:22px; padding:.35rem; pointer-events:none; background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.16); }
  .sol-card img.sol-ico{ width:100%; height:100%; object-fit:contain; }
  /* per-icon scale so each art fills the chip evenly and sits centred (the source PNGs carry uneven transparent margins) */
  .sol-card img[src$="icon-funnel.png"]{ transform:none; }
  .sol-card img[src$="icon-meta.png"]{ transform:scale(1.08); }
  .sol-card img[src$="icon-reporting.png"]{ transform:translateY(-2%) scale(1.32); }
  .sol-card img[src$="icon-film.png"]{ transform:translateY(-4%) scale(1.5); }
  /* larger title beside the icon */
  .sol-label{ display:flex; align-items:center; min-height:86px; margin:0; padding:0 52px 0 106px; font-size:1.3rem; font-weight:800; white-space:normal; line-height:1.2; }
  /* circular +/- toggle, centred on the row, fills gold when open */
  .sol-item::after{ content:'+'; position:absolute; top:24px; right:0; width:38px; height:38px; border-radius:50%; border:1px solid rgba(255,255,255,.28); display:grid; place-items:center; color:var(--gold-bright); font-size:1.5rem; line-height:1; font-weight:400; transition:background .3s, color .3s, border-color .3s; }
  .sol-item.active::after{ content:'\2212'; background:var(--gold-bright); color:var(--navy); border-color:var(--gold-bright); }
  /* description drops below the row, collapsed until the item is open */
  .sol-desc{ display:none !important; width:auto; opacity:1; padding:0; margin:0; }
  .sol-item.active .sol-desc{ display:block !important; margin-top:1.1rem; }
  .sol-desc > div{ width:auto; padding:0; }
  .sol-desc p{ font-size:1.02rem; line-height:1.6; padding-left:0; }
  .sol-more{ margin-top:.75rem; }

  /* ---- families accordion ---- */
  .families{ padding-block:clamp(3.6rem,9vh,5rem); }
  .fam-grid{ gap:1.6rem; }
  .fam-illo svg{ max-width:400px; }
  .acc-btn{ padding:1.15rem 1.25rem; font-size:1.06rem; }
  .acc-body p{ padding:0 1.25rem 1.25rem; }

  /* ---- logo strip ---- */
  .logos{ padding-block:2.8rem; }
  .logo-item{ height:92px; }
  .logo-item img{ max-height:64px; }

  /* ---- reviews ---- */
  .reviews{ padding-block:clamp(3.6rem,9vh,5rem) clamp(6rem,12vh,7.5rem); }
  .reviews-head{ margin-bottom:2.2rem; }
  .review p{ font-size:1rem; }

  /* ---- how it works (navy journey) ---- */
  .hiw{ padding-block:clamp(3.6rem,8vh,5rem) clamp(5rem,10vh,6.5rem); }
  .hiw-steps{ margin-top:2.4rem; }
  .hiw-num{ width:64px; height:64px; font-size:1.5rem; }
  .hiw-step p{ font-size:.97rem; }

  /* ---- card grids go single-column with a comfortable cap ---- */
  .steps{ grid-template-columns:1fr; max-width:480px; margin-inline:auto; margin-top:2.4rem; }
  .included{ grid-template-columns:1fr; max-width:520px; margin-inline:auto; }
  .incl-list{ grid-template-columns:1fr; gap:.9rem; }
  .fitlist{ grid-template-columns:1fr; gap:.9rem; }
  .three-points{ gap:1.5rem; margin-top:2.2rem; }

  /* ---- duo comparison stacks into two clear cards ---- */
  .duo{ gap:1rem; }
  .duo .pane{ padding:1.7rem 1.4rem; }

  /* ---- services "what you get" ---- */
  .offer-themes{ gap:2.4rem; }
  .ot-head{ padding-bottom:1rem; }
  .ot-cards{ gap:1rem; }
  .ot-card{ padding:1.4rem 1.35rem; }

  /* ---- guide mini-cards stack vertically on phones ---- */
  .mini-cards{ display:flex !important; flex-direction:column !important; gap:1rem !important; }
  .mini-card{ width:auto; }

  /* ---- long-form article pages ---- */
  .article h2{ font-size:1.55rem !important; }
  .article h3{ font-size:1.15rem !important; margin-top:1.9rem !important; }

  /* ---- faq ---- */
  .faq-grid{ gap:1.6rem; margin-top:2rem; }
  .faq-illo{ width:130px; }
  .faq-illo.small{ width:112px; }
  .faq-aside p{ font-size:.95rem; }
  .faq-aside p a{ overflow-wrap:anywhere; }
  .qa button{ padding:1.05rem 1.15rem; font-size:.99rem; gap:.9rem; }
  .qa .ans p{ padding:0 1.15rem 1.1rem; font-size:.96rem; }

  /* ---- founders / quotes ---- */
  .founders{ gap:1.1rem; }
  .founder{ padding:0; gap:0; }
  .founder .pic{ width:100%; height:auto; aspect-ratio:1/1; }
  .about-quote p{ font-size:clamp(1.25rem,5.4vw,1.5rem); }
  .about-quote footer{ margin-top:1.5rem; }

  /* ---- contact ---- */
  .section[style*="padding-top"]{ padding-top:clamp(5.5rem,11vh,7rem) !important; }
  .contact-grid{ gap:2.2rem; }
  .form-card{ border-radius:22px; }
  .row2{ grid-template-columns:1fr; gap:0; }
  .reassure{ margin-top:1.4rem; }

  /* ---- closer + ribbon + return link ---- */
  .closer{ padding-block:clamp(32px,5vw,60px) 90px; }
  .closer-top{ gap:1rem; }
  .closer-card{ padding:1.8rem 1.5rem; }
  .closer-cta{ margin-top:56px; padding:2.6rem 1.4rem; border-radius:28px; }
  .closer-cta .btn{ width:100%; max-width:420px; }
  .ribbon .wrap{ flex-direction:column; align-items:center; text-align:center; gap:1.5rem; padding-block:clamp(3rem,7vh,4rem); }
  .ribbon h2{ max-width:none; }
  .ribbon .btn{ width:100%; max-width:420px; }
  .svc-return{ margin-top:-1.6rem; padding-bottom:2.6rem; }

  /* ---- footer: tidy two-column restack ---- */
  .foot-top{ gap:2.2rem; }
  .foot-cols{ grid-template-columns:1fr 1fr; gap:1.9rem 1.4rem; }
  .foot-cols .fcol:last-child{ grid-column:1 / -1; }
  footer .fcol a{ padding:.4rem 0; overflow-wrap:anywhere; }
  .foot-brand .brand img{ height:44px; }
  footer .legal{ flex-direction:column; gap:.3rem; margin-top:2.2rem; }
}

/* ---- finer phone tweaks ---- */
@media (max-width:430px){
  .hero h1{ font-size:2rem; }
  h2{ font-size:1.75rem; }
  .truth .feature h2{ font-size:1.85rem; }
  .sol-card{ width:80px; height:80px; }
  .sol-label{ min-height:80px; padding-left:100px; }
  .step{ padding:1.5rem 1.3rem; }
  .inc{ padding:1.4rem 1.3rem; }
  .duo .pane{ padding:1.5rem 1.25rem; }
  .closer-card.proof .bigstars{ font-size:2rem; letter-spacing:6px; }
  .foot-cols{ gap:1.7rem 1.2rem; }
}
@media (max-width:380px){
  .hero h1{ font-size:1.85rem; }
  h2{ font-size:1.6rem; }
  .btn{ padding:.95rem 1.3rem; font-size:.86rem; }
  .sol-desc p{ font-size:.93rem; }
  .qa button{ font-size:.95rem; }
}

/* ---- tablet (721-1024): premium accordion, larger, spaced, no dividers ---- */
@media (min-width:721px) and (max-width:1024px){
  .sol-panel{ min-height:0; }
  .sol-row{ flex-direction:column; gap:1.8rem; margin-top:2.8rem; align-items:stretch; justify-content:flex-start; min-height:0 !important; max-width:700px; margin-inline:auto; text-align:left; }
  .sol-item{ position:relative; display:block; padding:0; cursor:pointer; }
  .sol-body{ display:block; }
  .sol-card{ position:absolute; top:0; left:0; width:92px; height:92px; border-radius:22px; padding:.55rem; pointer-events:none; background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.16); }
  .sol-card img.sol-ico{ transform:scale(1.12) !important; width:92%; height:92%; }
  .sol-label{ display:flex; align-items:center; min-height:92px; margin:0; padding:0 62px 0 118px; font-size:1.55rem; font-weight:800; white-space:normal; line-height:1.2; }
  .sol-item::after{ content:'+'; position:absolute; top:24px; right:0; width:44px; height:44px; border-radius:50%; border:1px solid rgba(255,255,255,.28); display:grid; place-items:center; color:var(--gold-bright); font-size:1.7rem; line-height:1; font-weight:400; transition:background .3s, color .3s, border-color .3s; }
  .sol-item.active::after{ content:'\2212'; background:var(--gold-bright); color:var(--navy); border-color:var(--gold-bright); }
  .sol-desc{ display:none !important; width:auto; opacity:1; padding:0; margin:0; }
  .sol-item.active .sol-desc{ display:block !important; width:auto; margin-top:1.2rem; max-width:600px; }
  .sol-desc > div{ width:auto; padding:0; }
  .sol-desc p{ font-size:1.08rem; line-height:1.6; padding-left:0; }
  .sol-more{ margin-top:.8rem; }
}

/* ---- everything below desktop (phone, tablet, laptop): drop the sticky peel so the section scrolls like a normal page ---- */
@media (max-width:1819px){
  .peel-top, .solutions.peel-top{ position:static; }
}

/* =====================================================================
   TABLET LAYER (721–1024) — the middle zone between the phone layer and
   full desktop. The desktop CSS is tuned for ~1920px, so through this
   range multi-column layouts get cramped. Strategy: editorial single
   column for image+text features (image on top, ratio-sized), two
   columns for card grids, calmer rhythm. The .sol-* accordion and the
   peel un-stick above are deliberately untouched. !important is used
   ONLY to beat inline style="" attributes.
   ===================================================================== */
@media (min-width:721px) and (max-width:1024px){

  /* ---- rhythm & type: tablet-sized, not desktop-huge ---- */
  .section{ padding-block:clamp(3.8rem,8vh,5.5rem); }
  .section.tight{ padding-block:clamp(3.2rem,6vh,4.5rem); }
  h1{ font-size:clamp(2.3rem,5vw,3.4rem); }
  .hero{ padding-block:clamp(3.6rem,7vh,5rem) clamp(2.6rem,5vh,3.6rem); }

  /* ---- header: keep the full nav airy but compact so it fits 861–1024 ---- */
  .navlinks{ gap:1.3rem; padding-left:1.3rem; }
  .navlinks .btn.has-h{ padding-inline:1.7rem; padding-block:.9rem; }
  .navlinks .btn.has-h::after{ display:none; } /* H-mark reveal needs the wide padding; hide it here */
  .brand .name{ font-size:.85rem; }

  /* ---- "width 2" wrappers: soften the double gutter to 1.4x ---- */
  .yget .wrap, .w2 .wrap, .reviews .wrap, .families .wrap, .ethos-panel{ padding-inline:calc(var(--w1) * 1.4); }
  .hero .wrap.hero-film{ padding-inline:calc(var(--w1) * 1.4); }
  /* guide pages set the same double gutter inline — beat it with !important */
  .wrap[style*="(--w1) * 2"]{ padding-inline:calc(var(--w1) * 1.4) !important; }

  /* ---- feature grids (image + text): stack, image on top, capped column ---- */
  .feature-grid, .feature-grid.flip, .feature-grid.img-lead, .why-grid, .truth .feature-grid{ grid-template-columns:1fr; }
  .wrap.feature-grid, .w2 .wrap.feature-grid, .w3 .wrap.feature-grid{ max-width:740px; margin-inline:auto; gap:1.9rem; }
  .wrap.feature-grid[style*="(--w1) * 2"]{ max-width:740px !important; padding-inline:calc(var(--w1) * 1.4) !important; }
  .feature-grid .imgcard, .feature-grid.flip .imgcard{ order:-1; }
  .feature-grid .imgcard, .why-grid .imgcard, .truth .imgcard, .imgcard.tall{
    min-height:0 !important; height:auto; aspect-ratio:3/2; } /* !important beats inline min-height on guide pages */
  .feature h2{ max-width:none; }
  .feature p.body{ max-width:56ch; }

  /* ---- ethos: extend the stacked/centered state through 1001–1024 ---- */
  .ethos-top{ grid-template-columns:1fr; text-align:center; gap:2.2rem; max-width:640px; margin-inline:auto; }
  .ethos-copy h2, .ethos-copy p.body{ max-width:none; margin-inline:auto; }
  .ethos-copy .eyebrow::after{ margin-inline:auto; }
  .ethos-photo{ min-height:0; height:auto; aspect-ratio:3/2; }
  .stats{ flex-direction:row; text-align:left; }

  /* ---- how it works: 2x2 through the whole tablet range ---- */
  .hiw{ padding-block:clamp(4rem,8vh,5.5rem) clamp(6rem,11vh,8rem); }
  .hiw-steps{ grid-template-columns:1fr 1fr; gap:2.6rem 2rem; }
  .hiw-thread{ display:none; }

  /* ---- card grids: two comfortable columns ---- */
  .steps{ grid-template-columns:1fr 1fr; }
  .included{ grid-template-columns:1fr 1fr; }
  .trust-bar{ grid-template-columns:1fr 1fr; max-width:640px; gap:1.4rem 2rem; }
  /* guide mini-cards live in page <style> blocks — higher specificity wins there */
  .wrap .mini-cards{ grid-template-columns:1fr 1fr; }
  .wrap .mini-cards > :last-child:nth-child(odd){ grid-column:1 / -1; }

  /* ---- services "what you get": one theme per row, like the 900px state ---- */
  .offer-themes{ grid-template-columns:1fr; max-width:560px; margin-inline:auto; gap:2.2rem; }
  .ot-head{ min-height:0; padding-bottom:1.1rem; }
  .ot-card{ min-height:0; }

  /* ---- reviews: stack the two testimonials, keep the divider ---- */
  .reviews{ padding-block:clamp(4rem,8vh,5.5rem) clamp(6rem,11vh,8rem); }
  .reviews-grid{ grid-template-columns:1fr; gap:2.4rem; max-width:660px; margin-inline:auto; }
  .review{ min-height:0; padding:0; }
  .review + .review{ border-left:none; border-top:1px solid var(--line); padding-top:2.4rem; }

  /* ---- faq: single centred column through 981–1024 too ---- */
  .faq-grid{ grid-template-columns:1fr; max-width:680px; margin-inline:auto; gap:2.2rem; }
  .faq{ order:-1; }
  .faq-aside, .faq-aside.left{ align-items:center; text-align:center; }
  .faq-aside p{ max-width:none; }

  /* ---- story / video sections stack ---- */
  .story-grid{ grid-template-columns:1fr; max-width:720px; margin-inline:auto; }

  /* ---- logos: slightly smaller strip ---- */
  .logo-item{ height:150px; }
  .logo-item img{ max-height:112px; }

  /* ---- closer: trim the big fixed desktop spacing ---- */
  .closer{ padding-block:clamp(36px,5vw,64px) 130px; }
  .closer-cta{ margin-top:80px; }

  /* ---- footer: 2x2 link columns everywhere in this range ---- */
  .foot-cols{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:2rem 2.4rem; }
}

/* ---- narrower tablet (721–900): pairs that still feel squeezed go single column ---- */
@media (min-width:721px) and (max-width:900px){
  .duo{ grid-template-columns:1fr; max-width:620px; margin-inline:auto; }
  .three-points{ grid-template-columns:1fr; max-width:480px; margin-inline:auto; gap:1.8rem; }
  .founders{ grid-template-columns:1fr; max-width:620px; margin-inline:auto; }
  .fam-illo svg{ max-width:540px; }
}

/* =====================================================================
   LAPTOP LAYER (1025–1600) — light tightening for ~1280/1440/1536
   screens. The base desktop CSS is tuned for ~1920: at these widths the
   horizontal "what we handle" accordion no longer fits on one row
   (4 x 240px cards + the open description exceed the content width and
   the active item wraps), so it is scaled fluidly to fit. Everything
   else is a gentle trim, not a redesign.
   ===================================================================== */
@media (min-width:1025px) and (max-width:1819px){

  /* ---- solutions: horizontal cards only fit at ~1820px+, so on laptops and
     standard monitors use the premium accordion, scaled up for the bigger
     screen. The peel is dropped below desktop (see the peel un-stick). ---- */
  .sol-panel{ min-height:0; }
  .sol-row{ flex-direction:column; gap:2.4rem; margin-top:3rem; align-items:stretch; justify-content:flex-start; min-height:0 !important; max-width:920px; margin-inline:auto; text-align:left; }
  .sol-item{ position:relative; display:block; padding:0; cursor:pointer; }
  .sol-body{ display:block; }
  .sol-card{ position:absolute; top:0; left:0; width:112px; height:112px; border-radius:26px; padding:.6rem; pointer-events:none; background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.16); }
  .sol-card img.sol-ico{ transform:scale(1.12) !important; width:92%; height:92%; }
  .sol-label{ display:flex; align-items:center; min-height:112px; margin:0; padding:0 76px 0 144px; font-size:1.9rem; font-weight:800; white-space:normal; line-height:1.18; }
  .sol-item::after{ content:'+'; position:absolute; top:32px; right:2px; width:48px; height:48px; border-radius:50%; border:1px solid rgba(255,255,255,.28); display:grid; place-items:center; color:var(--gold-bright); font-size:2rem; line-height:1; font-weight:300; transition:background .3s, color .3s, border-color .3s; }
  .sol-item.active::after{ content:'\2212'; background:var(--gold-bright); color:var(--navy); border-color:var(--gold-bright); }
  .sol-desc{ display:none !important; width:auto; opacity:1; padding:0; margin:0; }
  .sol-item.active .sol-desc{ display:block !important; width:auto; margin-top:1.4rem; max-width:660px; }
  .sol-desc > div{ width:auto; padding:0; }
  .sol-desc p{ font-size:1.18rem; line-height:1.65; padding-left:0; }
  .sol-more{ margin-top:.9rem; font-size:1.02rem; }

  /* ---- logos: slightly smaller strip so it doesn't dominate ---- */
  .logo-item{ height:160px; }
  .logo-item img{ max-height:128px; }
}

/* =====================================================================
   Tablet landscape (1025–1280, e.g. iPad Air / Pro on their side):
   these widths used to get the full desktop nav, which left the
   Start-a-conversation button oversized and the links cramped.
   Same treatment as tablet portrait: compact button, tighter gaps.
   ===================================================================== */
@media (min-width:1025px) and (max-width:1280px){
  .navlinks{ gap:1.5rem; padding-left:1.5rem; }
  .navlinks .btn.has-h{ padding-inline:2rem; padding-block:.95rem; }
  .navlinks .btn.has-h::after{ display:none; }
  .brand .name{ font-size:.9rem; }
}

/* =====================================================================
   services "what you get": lock the three columns to the same rhythm.
   The heads and the two card rows previously relied on fixed min-heights
   (232px / 200px), so a heading that wrapped to three lines pushed its
   column out of step with the other two. Subgrid makes every row size to
   its tallest member across all three columns, whatever the copy does.
   Desktop only: below 1025px the section is already a single column.
   ===================================================================== */
@media (min-width:1025px){
  /* auto for the head row, then two equal 1fr rows so all six cards
     match each other, not just their own row */
  .offer-themes{ grid-template-rows:auto 1fr 1fr; align-items:stretch;
    column-gap:clamp(1.6rem,3vw,3rem); row-gap:1.2rem; }
  .offer-theme{ display:grid; grid-row:1 / span 3; grid-template-rows:subgrid; }
  .ot-head{ min-height:0; padding-bottom:1.6rem; display:flex; flex-direction:column; }
  /* the third heading wraps to two lines, so pin the links to the bottom
     of the (now equal-height) head box and they sit on one line */
  .ot-head .text-link{ margin-top:auto; align-self:center; }
  .ot-cards{ display:grid; grid-row:2 / span 2; grid-template-rows:subgrid; row-gap:1.2rem; }
  .ot-card{ min-height:0; }

  /* older engines without subgrid keep the previous fixed-height behaviour */
  @supports not (grid-template-rows:subgrid){
    .offer-theme{ display:flex; flex-direction:column; }
    .ot-head{ min-height:232px; }
    .ot-cards{ display:flex; flex-direction:column; gap:1.2rem; }
    .ot-card{ min-height:200px; }
  }
}