/* =====================================================================
   All Med Canada — allmedcanada.ca
   Front-end stylesheet. Hand-written, no framework, no build step.

   Contents
     01  Tokens + theme
     02  Reset + base
     03  Layout rails, grid lines, utilities
     04  Header + overlay menu
     05  Hero
     06  Split heading + item grid
     07  Horizontal step panels
     08  Generic sections (rich text, cards, stats, faq, banner, form)
     09  Call to action
     10  Footer
     11  Search + 404 + setup
     12  Motion + reveal
     13  Responsive
     14  Inline editor chrome (admin preview only)
   ===================================================================== */

/* ---------- 01  Tokens ------------------------------------------- */
:root{
  --ink:#0a0a0a;
  --ink-soft:#4e4e4e;
  --ink-mute:#7a7a76;
  --paper:#ffffff;
  --paper-2:#f5f4f1;
  --paper-3:#eceae5;
  --line:#dcd9d3;
  --line-strong:#c4c0b8;
  --accent:#e51b20;
  --dark:#0b0b0b;
  --dark-2:#151515;
  --on-dark:#f4f2ee;
  --on-dark-mute:#a0a09b;

  --rail:76px;
  --gutter:clamp(20px,4vw,64px);
  --maxw:1680px;

  --f-sans:"Plus Jakarta Sans","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;

  --t-fast:180ms cubic-bezier(.4,0,.2,1);
  --t-mid:420ms cubic-bezier(.22,1,.36,1);
  --t-slow:900ms cubic-bezier(.16,1,.3,1);

  --radius-pill:999px;

  /* One vertical rhythm for every section. Previously services, generic
     sections and the CTA each had their own near-identical value, which
     read as inconsistent spacing down the page. */
  --sec-y:clamp(68px,9.5vh,128px);
  --sec-y-tight:clamp(52px,7.5vh,96px);
  color-scheme:light;
}

html[data-theme="dark"]{
  --ink:#f2f0ec;
  --ink-soft:#c3c1bc;
  --ink-mute:#8d8d88;
  --paper:#0b0b0b;
  --paper-2:#111111;
  --paper-3:#181818;
  --line:#2a2a2a;
  --line-strong:#3a3a3a;
  --dark:#f2f0ec;
  --on-dark:#0b0b0b;
  --on-dark-mute:#4a4a4a;
  color-scheme:dark;
}

/* ---------- 02  Reset + base -------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-sans);
  font-size:16px;
  line-height:1.6;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:clip;
  transition:background-color var(--t-mid),color var(--t-mid);
}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,textarea,select{font:inherit;color:inherit}
h1,h2,h3,h4,p,figure,blockquote{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--ink);color:var(--paper);padding:12px 18px;border-radius:0 0 8px 0}
.skip-link:focus{left:0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- 03  Layout -------------------------------------------- */
.shell{width:100%;max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter)}
.shell--rails{padding-left:calc(var(--rail) + var(--gutter));padding-right:calc(var(--rail) + var(--gutter))}

.hairline{height:1px;background:var(--line);border:0;margin:0}

.label{
  font-size:.8125rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink);display:block
}
.label--muted{color:var(--ink-mute)}
.lede{color:var(--ink-soft);font-size:1rem;line-height:1.68}

/* vertical grid lines behind the hero */
.gridlines{position:absolute;inset:0;pointer-events:none;z-index:0}
.gridlines span{position:absolute;top:0;bottom:0;width:1px;background:var(--line);opacity:.85}
.gridlines span:nth-child(1){left:16%}
.gridlines span:nth-child(2){left:36%}
.gridlines span:nth-child(3){left:56%}
.gridlines span:nth-child(4){left:76%}
.gridlines span:nth-child(5){left:94%}

/* buttons */
.btn{
  display:inline-flex;align-items:center;gap:.6em;
  padding:.95em 1.6em;border-radius:var(--radius-pill);
  font-size:.9375rem;font-weight:700;letter-spacing:-.01em;
  background:var(--ink);color:var(--paper);
  transition:transform var(--t-fast),background-color var(--t-fast),opacity var(--t-fast);
  will-change:transform;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn--ghost{background:transparent;color:var(--ink);border:1px solid var(--line-strong)}
.btn--ghost:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn__arrow{transition:transform var(--t-fast)}
.btn:hover .btn__arrow{transform:translateX(4px)}

/* underline-on-hover text link */
.tlink{
  display:inline-block;font-weight:700;font-size:.9375rem;position:relative;padding-bottom:2px;
}
.tlink::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:currentColor;
  transform-origin:right;transform:scaleX(0);transition:transform var(--t-mid);
}
.tlink:hover::after{transform-origin:left;transform:scaleX(1)}
.tlink--shown::after{transform:scaleX(1)}

/* fixed side rails */
.rail{position:fixed;z-index:60;top:0;bottom:0;width:var(--rail);pointer-events:none}
.rail--left{left:0}
.rail--right{right:0}
.rail > *{pointer-events:auto}

.rail-scrolltop,.rail-social{transition:color var(--t-fast)}

.theme-toggle{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  display:flex;flex-direction:column;align-items:center;gap:10px;
  padding:16px 8px;border-radius:var(--radius-pill);background:var(--paper-2);
  border:1px solid var(--line);
}
.theme-toggle span{writing-mode:vertical-rl;font-size:.6875rem;letter-spacing:.05em;color:var(--ink-mute);transition:color var(--t-fast)}
.theme-toggle .is-on{color:var(--ink);font-weight:600}
.theme-toggle svg{width:15px;height:15px}

.rail-scrolltop{
  position:absolute;left:50%;bottom:190px;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:14px;
  opacity:0;visibility:hidden;transition:opacity var(--t-mid),visibility var(--t-mid);
}
.rail-scrolltop.is-on{opacity:1;visibility:visible}
/* The rails float over both the light page and the dark footer. Blend modes
   do not work here (the fixed rail is its own stacking context with an empty
   backdrop, so white stays white). Script marks the rail when it is over a
   dark band instead. */
.rail-scrolltop{color:var(--ink)}
.rail.is-on-dark .rail-scrolltop{color:var(--on-dark)}
.rail-scrolltop span{writing-mode:vertical-rl;transform:rotate(180deg);font-size:.75rem;font-weight:600;letter-spacing:.02em}
.rail-scrolltop i{display:block;width:1px;height:96px;background:currentColor;opacity:.55}

.rail-social{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  display:flex;flex-direction:column-reverse;align-items:center;gap:20px;
  font-size:.75rem;font-weight:700;letter-spacing:.02em;
}
.rail-social > *{writing-mode:vertical-rl}
.rail-social .rail-social__label{font-weight:500;opacity:.65;display:flex;flex-direction:column;align-items:center;gap:14px}
.rail-social .rail-social__label::after{content:"";width:26px;height:1px;background:currentColor;opacity:.6}
.rail-social{color:var(--ink)}
.rail.is-on-dark .rail-social{color:var(--on-dark)}
.rail.is-on-dark .rail-social .rail-social__label{opacity:.7}
.rail-social a{transition:opacity var(--t-fast)}
.rail-social a:hover{opacity:.55}

.dock{position:fixed;left:20px;bottom:20px;z-index:65;display:flex;align-items:center;gap:12px}
.dock__search{
  width:52px;height:52px;border-radius:50%;background:var(--paper);border:1px solid var(--line);
  display:grid;place-items:center;transition:background-color var(--t-fast),color var(--t-fast),transform var(--t-fast);
}
.dock__search:hover{background:var(--ink);color:var(--paper);transform:translateY(-2px)}
.dock__cta{padding:.85em 1.35em;font-size:.8125rem;letter-spacing:.02em;text-transform:uppercase}
.dock__cta .dot{width:14px;height:14px;border-radius:50%;border:3px solid var(--accent);display:inline-block}

/* ---------- 04  Header -------------------------------------------- */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:80;
  display:flex;align-items:center;gap:24px;
  padding:22px var(--gutter) 22px 18px;
  transition:transform var(--t-mid),background-color var(--t-mid),box-shadow var(--t-mid);
}
.site-header.is-stuck{background:color-mix(in srgb,var(--paper) 88%,transparent);backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line)}
.site-header.is-hidden{transform:translateY(-110%)}

.burger{
  width:56px;height:56px;border-radius:50%;background:var(--paper-2);border:1px solid var(--line);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  flex:0 0 auto;transition:background-color var(--t-fast),border-color var(--t-fast);
}
.burger:hover{background:var(--ink);border-color:var(--ink)}
.burger:hover i{background:var(--paper)}
/* Two bars, identical. Integer height only: a fractional height lands on
   different sub-pixel rows and renders one bar heavier than the other. */
.burger i{
  display:block;width:20px;height:2px;background:var(--ink);border-radius:1px;
  transition:transform var(--t-fast),background-color var(--t-fast);
}

/* Brand lockup: the mark, then the two line wordmark.
   Everything is sized in em off .brand, so one font-size change scales the
   whole lockup and the mark can never drift out of step with the words.
   The proportions are the ones measured off the supplied artwork: the mark
   is 1.9 times the wordmark line size, the gap is 0.35 of that. */
.brand{
  display:flex;align-items:flex-start;gap:.35em;margin-left:14px;flex:0 0 auto;
  font-size:1.375rem;
}
.brand__mark{flex:0 0 auto;width:1.9em;height:1.9em;display:block;margin-top:.02em}
.brand__mark .lm{display:none}
.brand__mark .lm img{width:100%;height:100%;display:block}
/* The supplied mark is raster, so the theme picks a file rather than a fill:
   the black tile on light grounds, the white tile on dark ones. */
.brand__mark .lm--light{display:block}
html[data-theme="dark"] .brand__mark .lm--light{display:none}
html[data-theme="dark"] .brand__mark .lm--dark{display:block}
.brand__word{font-size:1em;font-weight:800;line-height:.98;letter-spacing:-.035em}
/* The typeface draws a square full stop; the artwork ends on a round dot. */
.brand__dot{
  display:inline-block;width:.176em;height:.176em;border-radius:50%;
  background:var(--accent);margin-left:.02em;
}
.brand__badge{
  font-size:.4545em;font-weight:700;letter-spacing:.02em;
  border:1px solid var(--ink);border-radius:var(--radius-pill);padding:1px 7px;margin-top:2px;
}

.nav{flex:1 1 auto;display:flex;justify-content:center;gap:clamp(14px,2.4vw,40px)}
.nav__item{position:relative;padding-top:14px}
.nav__num{position:absolute;top:0;right:0;font-size:.625rem;font-weight:600;color:var(--ink-mute)}
.nav__link{font-size:1.0625rem;font-weight:500;letter-spacing:-.01em;position:relative;display:inline-block}
.nav__link::after{content:"";position:absolute;left:0;bottom:-3px;height:1px;width:100%;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform var(--t-mid)}
.nav__link:hover::after,.nav__item.is-current .nav__link::after{transform:scaleX(1);transform-origin:left}
.nav__item.is-current .nav__link{font-weight:700}

.header__cta{flex:0 0 auto}

/* full-screen menu ------------------------------------------------- */
.ovl{
  position:fixed;inset:0;z-index:90;
  background:rgba(10,10,10,.982);color:#fff;
  -webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(88px,11vh,120px) var(--gutter) clamp(28px,5vh,52px);
  opacity:0;visibility:hidden;
  clip-path:inset(0 0 100% 0);
  transition:opacity .32s ease,visibility .32s,clip-path .62s cubic-bezier(.16,1,.3,1);
  overflow-y:auto;overscroll-behavior:contain;
}
.ovl.is-open{opacity:1;visibility:visible;clip-path:inset(0 0 0 0)}

.ovl__close{
  position:absolute;top:22px;left:18px;width:56px;height:56px;border-radius:50%;
  border:1px solid rgba(255,255,255,.22);color:#fff;display:grid;place-items:center;
  transition:border-color var(--t-fast),background-color var(--t-fast),transform var(--t-fast);
}
.ovl__close:hover{border-color:var(--accent);color:var(--accent);transform:rotate(90deg)}

.ovl__nav{width:100%;max-width:var(--maxw);margin:0 auto}
.ovl__list{max-width:min(560px,46vw);--lbl:clamp(1.9rem,3.3vw,3.25rem)}

.ovl__item{
  display:grid;grid-template-columns:34px 1fr auto;align-items:start;column-gap:6px;
  opacity:0;transform:translateY(26px);
  transition:opacity .5s ease,transform .6s cubic-bezier(.16,1,.3,1);
  transition-delay:calc(var(--i,1) * 55ms);
}
.ovl.is-open .ovl__item{opacity:1;transform:none}

/* sit the number near the cap-height of the label, at any label size */
.ovl__num{font-size:.75rem;font-weight:600;color:rgba(255,255,255,.42);letter-spacing:.02em;
  padding-top:calc(var(--lbl) * .30)}
.ovl__link{
  display:inline-block;padding:.09em 0;
  font-size:var(--lbl);font-weight:800;line-height:1.18;letter-spacing:-.035em;
  transition:color var(--t-fast),transform var(--t-mid);
}
.ovl__link:hover{color:var(--accent)}
.ovl__plus{
  width:34px;height:34px;position:relative;color:rgba(255,255,255,.55);
  transition:color var(--t-fast),transform var(--t-mid);
  margin-top:calc(var(--lbl) * .18);
}
.ovl__plus:hover{color:#fff}
.ovl__plus i::before,.ovl__plus i::after{
  content:"";position:absolute;left:50%;top:50%;background:currentColor;
  transition:transform var(--t-mid);
}
.ovl__plus i::before{width:15px;height:1.5px;transform:translate(-50%,-50%)}
.ovl__plus i::after{width:1.5px;height:15px;transform:translate(-50%,-50%)}
.ovl__plus[aria-expanded="true"]{transform:rotate(90deg);color:var(--accent)}
.ovl__plus[aria-expanded="true"] i::after{transform:translate(-50%,-50%) scaleY(0)}

.ovl__sub{overflow:hidden;height:0;transition:height var(--t-mid)}
.ovl__sub ul{padding:2px 0 12px 48px;display:flex;flex-direction:column;gap:9px}
.ovl__sub a{font-size:1rem;color:rgba(255,255,255,.66);transition:color var(--t-fast)}
.ovl__sub a:hover{color:#fff}

.ovl__foot{
  width:100%;max-width:var(--maxw);margin:auto auto 0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;
  padding-top:clamp(30px,5vh,54px);
  opacity:0;transform:translateY(18px);
  transition:opacity .5s ease .34s,transform .6s cubic-bezier(.16,1,.3,1) .34s;
}
.ovl.is-open .ovl__foot{opacity:1;transform:none}
.ovl__col h3{font-size:.9375rem;font-weight:800;margin-bottom:10px}
.ovl__col p{font-size:.9375rem;line-height:1.6;color:rgba(255,255,255,.6)}
.ovl__col a{color:rgba(255,255,255,.85);transition:color var(--t-fast)}
.ovl__col a:hover{color:var(--accent)}
.ovl__col--social ul{display:flex;gap:18px;font-weight:700;font-size:.9375rem}

/* ---------- 05  Hero ---------------------------------------------- */
.hero{
  position:relative;min-height:100svh;display:flex;align-items:stretch;
  padding-top:120px;padding-bottom:56px;overflow:hidden;
  /* The banner artwork is blended into this section rather than cut out, so
     the section needs an opaque ground of its own and its own blending
     group. Without both, the artwork has nothing to blend against. */
  background:var(--paper);isolation:isolate;
}
/* No z-index here on purpose: a stacking context would cut the artwork off
   from the grid rules painted behind it, and the blend would have nothing to
   act on. Positioned and later in the source, it still paints above them. */
.hero__inner{position:relative;width:100%;max-width:var(--maxw);margin:0 auto;
  padding-left:calc(var(--rail) + var(--gutter) * .5);padding-right:calc(var(--rail) + var(--gutter) * .5);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;align-items:center}
.hero__copy{display:flex;flex-direction:column;justify-content:center;padding-block:24px}
.hero__eyebrow{font-size:.9375rem;font-weight:700;line-height:1.45;margin-bottom:clamp(24px,4vh,46px);max-width:26ch}
.hero__title{
  font-size:clamp(2.6rem,6.6vw,7.5rem);
  font-weight:800;line-height:.92;letter-spacing:-.045em;
  overflow-wrap:normal;hyphens:none;
  margin-bottom:clamp(26px,4.5vh,54px);
}
/* Each line is masked ONLY while it slides up. Once the reveal is done the
   mask is released, because a mask sized to the line-height (0.92em) clips
   the descender of letters like g, y and p. */
.hero__title .ln{display:block}
.hero__title .ln > span{display:block}

html.js .hero__title .ln{overflow:hidden}
html.js .hero__title .ln > span{transform:translateY(105%);transition:transform 1s cubic-bezier(.16,1,.3,1)}
html.js .is-ready .hero__title .ln > span{transform:translateY(0)}
html.js .hero__title.is-done .ln{overflow:visible}
.hero__title .ln:nth-child(2) > span{transition-delay:.09s}
.hero__title .ln:nth-child(3) > span{transition-delay:.18s}
.hero__title .ln:nth-child(4) > span{transition-delay:.27s}

.hero__media{position:relative;display:flex;align-items:center;justify-content:center;min-height:44vh}
.hero__media img{width:100%;max-width:660px;transform:scale(.94);opacity:0;transition:transform 1.4s cubic-bezier(.16,1,.3,1),opacity 1s ease}
.is-ready .hero__media img{transform:scale(1);opacity:1}
/* The banner form is the supplied artwork, raster, opaque on its own ground.
   It is blended in rather than masked: multiply drops the white ground on a
   light page, screen drops the black ground on a dark one. That keeps the
   grid rules running through the form the way the reference does, and costs
   about 30 kB instead of the several hundred an alpha channel would. */
.hero__media .hf{display:none;width:100%;max-width:660px}
.hero__media .hf--light{display:block;mix-blend-mode:multiply}
html[data-theme="dark"] .hero__media .hf--light{display:none}
html[data-theme="dark"] .hero__media .hf--dark{display:block;mix-blend-mode:screen}
.hero__feature{position:absolute;left:clamp(0px,2vw,32px);bottom:14%;max-width:22ch;z-index:2}
.hero__feature .cap{font-size:.9375rem;color:var(--ink-soft);margin-bottom:8px}
.hero__feature .ttl{font-size:1.0625rem;font-weight:700;line-height:1.35;letter-spacing:-.01em}
.hero__feature a:hover .ttl{color:var(--accent)}

/* ---------- 06  Split heading + item grid -------------------------- */
.services{padding:var(--sec-y) 0;background:var(--paper-2)}
.services__grid{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);gap:clamp(40px,6vw,110px);
  max-width:var(--maxw);margin:0 auto;
  padding-left:calc(var(--rail) + var(--gutter) * .5);padding-right:calc(var(--rail) + var(--gutter) * .5)}
.services__head .label{margin-bottom:14px}
.services__head .hairline{margin-bottom:clamp(26px,4vw,44px)}
.services__title{font-size:clamp(1.9rem,4.1vw,3.55rem);font-weight:800;line-height:1.08;letter-spacing:-.033em;max-width:15ch}
.services__items{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(32px,4.4vw,64px) clamp(28px,3.4vw,56px)}
.svc .label{margin-bottom:12px}
.svc .hairline{margin-bottom:20px}
.svc__title{font-size:clamp(1.0625rem,1.42vw,1.375rem);font-weight:800;line-height:1.28;letter-spacing:-.018em;margin-bottom:16px;white-space:pre-line}
.svc__body{font-size:.9375rem;line-height:1.62;color:var(--ink-soft);max-width:34ch}
.svc a.svc__hit{display:block}
.svc a.svc__hit:hover .svc__title{color:var(--accent)}

/* ---------- 07  Horizontal step panels ----------------------------- */
.steps{position:relative;background:var(--paper)}
.steps__sticky{position:sticky;top:0;height:100svh;display:flex;align-items:center;overflow:hidden}
.steps__track{display:flex;gap:0;will-change:transform;padding-left:calc(var(--rail) + var(--gutter) * .5)}
.step{
  flex:0 0 clamp(320px,42vw,760px);padding-right:clamp(24px,3vw,56px);
  display:flex;flex-direction:column;height:82svh;
}
.step__label{font-size:.8125rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;margin-bottom:10px}
.step .hairline{margin-bottom:22px;order:-1}
.step__head{display:flex;flex-direction:column}
.step__title{font-size:clamp(1.35rem,2.3vw,2.15rem);font-weight:800;line-height:1.16;letter-spacing:-.03em;margin-bottom:18px;white-space:pre-line}
.step__body{font-size:.9375rem;line-height:1.66;color:var(--ink-soft);max-width:46ch;margin-bottom:clamp(20px,3vh,40px)}
.step__body strong{color:var(--ink)}
.step__media{flex:1 1 auto;min-height:0;overflow:hidden;background:var(--paper-3)}
.step__media img{width:100%;height:100%;object-fit:cover}

/* ---------- 08  Generic sections ----------------------------------- */
.sec{padding:var(--sec-y) 0}
.sec--tint{background:var(--paper-2)}
.sec__inner{max-width:var(--maxw);margin:0 auto;
  padding-left:calc(var(--rail) + var(--gutter) * .5);padding-right:calc(var(--rail) + var(--gutter) * .5)}
.sec__head{margin-bottom:clamp(28px,4vw,52px);max-width:60ch}
.sec__title{font-size:clamp(1.6rem,3.4vw,2.85rem);font-weight:800;line-height:1.1;letter-spacing:-.03em;white-space:pre-line}
.sec__title + .lede{margin-top:16px}

.prose{max-width:68ch;font-size:1.0625rem;line-height:1.72;color:var(--ink-soft)}
.prose--wide{max-width:88ch}
.prose--full{max-width:none}
.prose p + p{margin-top:1.15em}
.prose h2{font-size:1.6rem;font-weight:800;letter-spacing:-.02em;color:var(--ink);margin:1.6em 0 .5em}
.prose h3{font-size:1.25rem;font-weight:800;color:var(--ink);margin:1.4em 0 .4em}
.prose ul{list-style:none;margin:1em 0}
.prose li{position:relative;padding-left:22px;margin-bottom:.5em}
.prose li::before{content:"";position:absolute;left:0;top:.72em;width:8px;height:1px;background:var(--accent)}
.prose a{border-bottom:1px solid var(--line-strong)}
.prose a:hover{border-color:var(--accent);color:var(--accent)}
.prose strong{color:var(--ink)}

.cards{display:grid;gap:clamp(24px,3vw,44px)}
.cards[data-cols="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}
.cards[data-cols="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}
.cards[data-cols="4"]{grid-template-columns:repeat(4,minmax(0,1fr))}
.card__media{aspect-ratio:4/3;overflow:hidden;background:var(--paper-3);margin-bottom:18px}
.card__media img{width:100%;height:100%;object-fit:cover;transition:transform var(--t-slow)}
.card:hover .card__media img{transform:scale(1.045)}
.card__title{font-size:1.125rem;font-weight:800;letter-spacing:-.02em;margin-bottom:10px}
.card__body{font-size:.9375rem;color:var(--ink-soft);line-height:1.62}

.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:clamp(24px,3vw,48px)}
.stat__value{font-size:clamp(2.2rem,4.4vw,3.6rem);font-weight:800;letter-spacing:-.04em;line-height:1}
.stat__label{margin-top:10px;font-size:.875rem;color:var(--ink-soft);max-width:22ch}

.faq__item{border-top:1px solid var(--line)}
.faq__item:last-child{border-bottom:1px solid var(--line)}
.faq__q{width:100%;display:flex;justify-content:space-between;align-items:flex-start;gap:24px;
  padding:22px 0;text-align:left;font-size:1.0625rem;font-weight:700;letter-spacing:-.015em}
.faq__q i{flex:0 0 auto;width:14px;height:14px;position:relative;margin-top:6px}
.faq__q i::before,.faq__q i::after{content:"";position:absolute;background:currentColor;transition:transform var(--t-mid)}
.faq__q i::before{left:0;top:6px;width:14px;height:1.5px}
.faq__q i::after{left:6px;top:0;width:1.5px;height:14px}
.faq__item.is-open .faq__q i::after{transform:scaleY(0)}
.faq__a{overflow:hidden;height:0;transition:height var(--t-mid)}
.faq__a > div{padding:0 0 24px;color:var(--ink-soft);max-width:70ch;font-size:.9688rem;line-height:1.68}

.banner{position:relative;min-height:62svh;display:grid;place-items:center;overflow:hidden;text-align:center}
.banner__bg{position:absolute;inset:0}
.banner__bg img{width:100%;height:100%;object-fit:cover}
.banner__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.15),rgba(0,0,0,.5))}
.banner__body{position:relative;z-index:1;padding:clamp(40px,8vw,90px);max-width:44ch}
.banner--light{color:#fff}
.banner--dark{color:var(--ink)}
.banner--dark .banner__bg::after{background:linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,.55))}
.banner h2{font-size:clamp(1.9rem,4.6vw,3.4rem);font-weight:800;letter-spacing:-.035em;line-height:1.06;white-space:pre-line}
.banner p{margin-top:16px;font-size:1.0625rem;opacity:.92}
.banner .btn{margin-top:26px}

/* forms */
.form{display:grid;gap:18px;max-width:640px}
.form__row{display:grid;gap:18px;grid-template-columns:repeat(2,minmax(0,1fr))}
.field label{display:block;font-size:.75rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-mute);margin-bottom:8px}
.field input,.field textarea,.field select{
  width:100%;padding:14px 16px;background:var(--paper);border:1px solid var(--line);border-radius:10px;
  transition:border-color var(--t-fast),box-shadow var(--t-fast)
}
.field textarea{min-height:150px;resize:vertical}
.field input:focus,.field textarea:focus{border-color:var(--ink);box-shadow:0 0 0 3px color-mix(in srgb,var(--ink) 8%,transparent);outline:none}
.field .err{color:var(--accent);font-size:.8125rem;margin-top:6px}
.form__note{font-size:.8125rem;color:var(--ink-mute)}
.hp{position:absolute;left:-9999px}

.alert{padding:14px 18px;border-radius:10px;font-size:.9375rem;margin-bottom:20px;border:1px solid}
.alert--ok{background:color-mix(in srgb,#1a7f37 8%,transparent);border-color:color-mix(in srgb,#1a7f37 30%,transparent);color:#14652c}
.alert--error{background:color-mix(in srgb,var(--accent) 8%,transparent);border-color:color-mix(in srgb,var(--accent) 30%,transparent);color:var(--accent)}
html[data-theme="dark"] .alert--ok{color:#7fd39b}

/* ---------- 08b  Added content blocks ---------------------------------
   Additive only, reusing the existing tokens and section rhythm. */
.sec--tight{padding:var(--sec-y-tight) 0}

/* ---------- 08c  Editorial blocks -------------------------------------
   Built for the About page: oversized statement type, small contextual
   labels, thin rules, asymmetric grids and a lot of air. Every selector below
   is new; nothing above is altered. The rhythm is deliberately looser than
   the rest of the site, which is what makes the page read as editorial.

   The reference this follows uses a licensed serif display face. We use the
   site's own Plus Jakarta Sans at its heaviest weight instead, so the page
   stays on-brand and adds no font payload.
   --------------------------------------------------------------------- */
:root{
  --ed-y:clamp(64px,10.5vw,160px);      /* between major sections */
  --ed-y-in:clamp(40px,6vw,120px);      /* inside a section */
  --ed-maxw:1360px;
}
.ed{padding:var(--ed-y) 0}
.ed--tint{background:var(--paper-2)}
.ed__inner{
  width:100%;max-width:var(--ed-maxw);margin:0 auto;
  padding-inline:clamp(20px,5vw,72px);
}

/* small contextual label */
.ed__label{
  font-size:.8125rem;font-weight:600;letter-spacing:.02em;color:var(--ink);
  margin-bottom:clamp(18px,2.4vw,34px);
}

/* the statement itself is the visual */
.ed__display{
  font-size:clamp(2.75rem,6.2vw,6.25rem);
  font-weight:800;line-height:.98;letter-spacing:-.042em;
  max-width:17ch;
}
.ed__line{display:block}
.ed__display--mid{font-size:clamp(2rem,4.4vw,4rem);line-height:1.02;max-width:22ch}
.ed__display--cta{font-size:clamp(2.4rem,5.4vw,5.25rem);line-height:1;max-width:16ch}
.ed--hero{padding-top:clamp(96px,11vw,190px)}

/* Banner background for the editorial header. Both devices are borrowed
   from the home page banner rather than invented: the same five grid rules
   at the same percentages, and a gradient form in the same palette, set in
   the open space beside the statement. Everything here is decorative and
   sits behind the words, which keep their existing colour on flat paper. */
.ed--hero-bg{position:relative;overflow:hidden;background:var(--paper);isolation:isolate}
.ed--hero-bg .ed__inner{position:relative;z-index:1}
.ed__field{
  position:absolute;right:clamp(0px,3vw,64px);top:50%;transform:translateY(-50%);
  width:min(38%,540px);aspect-ratio:590/695;
  background:url(../img/hero-field.webp) center / contain no-repeat;
  mix-blend-mode:multiply;
  pointer-events:none;z-index:0;
}
html[data-theme="dark"] .ed__field{
  background-image:url(../img/hero-field-dark.webp);
  mix-blend-mode:screen;
}
.ed--cta{background:var(--paper-2)}

.ed__heading{
  font-size:clamp(1.85rem,3.4vw,3.15rem);
  font-weight:800;line-height:1.06;letter-spacing:-.034em;max-width:15ch;
}
.ed__lede{color:var(--ink-soft);font-size:1.0625rem;line-height:1.7;max-width:52ch;
  margin-top:clamp(22px,3vw,38px)}
.ed__body{color:var(--ink-soft);font-size:.9375rem;line-height:1.72;max-width:44ch}
.ed__body--wide{max-width:50ch}
.ed__lead{font-weight:700;color:var(--ink);font-size:1rem;line-height:1.6;max-width:50ch;
  margin-top:clamp(22px,3vw,36px)}
.ed__lead + .ed__body{margin-top:14px}

/* aside on the left, content on the right */
.ed__split{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.55fr);
  gap:clamp(36px,5vw,96px)}
.ed__aside{align-self:start}

/* numbered blocks, each opened by a thin rule */
.ed__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(34px,4.4vw,72px) clamp(28px,3.4vw,56px);list-style:none}
.ed__cell{border-left:1px solid var(--line);padding-left:clamp(20px,2.2vw,34px)}
.ed__num{display:block;font-size:.8125rem;font-weight:600;color:var(--ink);margin-bottom:12px}
.ed__cellTitle{font-size:clamp(1.0625rem,1.5vw,1.375rem);font-weight:800;line-height:1.22;
  letter-spacing:-.02em;margin-bottom:14px}

/* statements standing in for figures */
.ed__grid--stats{grid-template-columns:repeat(2,minmax(0,1fr))}
.ed__cell--stat{border-left:0;padding-left:0}
.ed__figure{font-size:clamp(2.25rem,4.2vw,3.75rem);font-weight:800;line-height:1;
  letter-spacing:-.04em;margin-bottom:16px}
.ed__figureCap{font-weight:800;font-size:.9375rem;line-height:1.35;margin-bottom:12px;max-width:26ch}

/* two tall panels, the second dropped to create the overlap */
.ed__split--visual{align-items:start}
.ed__panels{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(16px,2vw,32px);align-items:start}
.ed__panel{margin:0;overflow:hidden;background:var(--paper-3)}
.ed__panel img{width:100%;height:auto;display:block}
.ed__panel--b{margin-top:clamp(32px,6vw,96px)}

/* principle rows */
.ed__rows{display:block}
.ed__row{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.6fr);
  gap:clamp(16px,3vw,48px);
  border-top:1px solid var(--line);padding:clamp(22px,2.6vw,34px) 0}
.ed__row:last-child{border-bottom:1px solid var(--line)}
.ed__rowName{font-size:.8125rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.ed__row dd{margin:0}

/* values */
.ed__secondary{font-size:clamp(1.25rem,2.1vw,1.85rem);font-weight:800;line-height:1.24;
  letter-spacing:-.024em;color:var(--ink-soft);max-width:30ch;
  margin-top:clamp(22px,2.6vw,38px)}
.ed__cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(28px,3.4vw,56px);margin-top:var(--ed-y-in);list-style:none}
.ed__col{border-top:1px solid var(--line);padding-top:clamp(18px,2vw,28px)}
.ed__colTitle{font-size:1.125rem;font-weight:800;letter-spacing:-.02em;margin-bottom:12px}

.ed__actions{display:flex;align-items:center;gap:clamp(18px,2.4vw,34px);flex-wrap:wrap;
  margin-top:clamp(28px,3.4vw,48px)}
.ed__second{font-weight:700}

/* Tablet band. A viewport-width clamp alone lands the headline near 52px at
   834, below the size this composition needs, so the band is set explicitly
   rather than left to the curve. */
@media (min-width:721px) and (max-width:1024px){
  :root{--ed-y:104px;--ed-y-in:76px}
  .ed__display{font-size:clamp(3.9rem,8vw,4.75rem)}
  .ed__display--mid{font-size:clamp(2.4rem,5vw,3rem)}
  .ed__display--cta{font-size:clamp(3.2rem,7vw,4rem)}
  .ed__heading{font-size:clamp(2.1rem,4.2vw,2.6rem)}
}

/* ---- responsive: a clean single editorial column, not a shrunk desktop --- */
@media (max-width:1024px){
  .ed__split{grid-template-columns:1fr;gap:clamp(30px,5vw,52px)}
  .ed__heading,.ed__display{max-width:20ch}
  .ed__row{grid-template-columns:1fr;gap:10px}
}
@media (max-width:720px){
  .ed__grid,.ed__grid--stats,.ed__cols{grid-template-columns:1fr}
  .ed__panels{grid-template-columns:1fr;gap:16px}
  .ed__panel--b{margin-top:0}          /* overlap is dropped rather than squeezed */
  .ed__cell{border-left:0;border-top:1px solid var(--line);padding-left:0;padding-top:22px}
  .ed__display,.ed__heading,.ed__display--mid,.ed__display--cta{max-width:none}
  .ed__body,.ed__lede,.ed__lead,.ed__secondary{max-width:none}
}

/* ---------- 09  Call to action ------------------------------------- */
.cta{padding:var(--sec-y) 0 var(--sec-y-tight);background:var(--paper-2)}
.cta__inner{max-width:var(--maxw);margin:0 auto;
  padding-left:calc(var(--rail) + var(--gutter) * .5);padding-right:calc(var(--rail) + var(--gutter) * .5)}
.cta__top{display:flex;justify-content:space-between;align-items:flex-start;gap:32px}
.cta__label{margin-bottom:14px}
.cta__title{font-size:clamp(2rem,5vw,4rem);font-weight:800;line-height:1.02;letter-spacing:-.042em;white-space:pre-line}
.cta .hairline{margin:clamp(30px,4.4vw,52px) 0 clamp(24px,3vw,36px)}
.cta__body{font-size:1.0625rem;line-height:1.66;color:var(--ink-soft);max-width:62ch}
.cta__body strong{color:var(--ink);font-weight:700}

/* ---------- 10  Footer --------------------------------------------- */
.site-footer{background:var(--dark);color:var(--on-dark);padding:var(--sec-y-tight) 0 28px}
.site-footer__inner{max-width:var(--maxw);margin:0 auto;
  padding-left:calc(var(--rail) + var(--gutter) * .5);padding-right:calc(var(--rail) + var(--gutter) * .5)}
.foot-dot{width:26px;height:26px;border-radius:50%;border:2px solid var(--accent);display:grid;place-items:center;margin-bottom:clamp(34px,5vw,56px)}
.foot-dot i{width:9px;height:9px;border-radius:50%;background:var(--accent)}
.foot-grid{display:grid;grid-template-columns:1.15fr 1fr 1fr 1.25fr;gap:clamp(28px,3.4vw,56px)}
.foot-brand .brand__word{color:var(--on-dark)}
.foot-brand .brand__badge{border-color:var(--on-dark)}
/* The footer band is dark in both themes, so the mark inverts against it
   rather than against the page. */
.foot-brand .brand__mark .lm--light{display:none}
.foot-brand .brand__mark .lm--dark{display:block}
html[data-theme="dark"] .foot-brand .brand__mark .lm--light{display:block}
html[data-theme="dark"] .foot-brand .brand__mark .lm--dark{display:none}
.foot-social{display:flex;gap:14px;margin-top:clamp(24px,3vw,42px);font-weight:700;font-size:.875rem}
.foot-social a{position:relative}
.foot-social a:hover{color:var(--accent)}
.foot-social li:not(:last-child)::after{content:"/";margin-left:14px;color:var(--on-dark-mute)}
.foot-social li{display:flex}
.foot-col h2,.foot-col h3{font-size:.9375rem;font-weight:800;margin-bottom:14px}
.foot-col address{font-style:normal;color:var(--on-dark-mute);font-size:.9375rem;line-height:1.65;white-space:pre-line}
.foot-col address strong{color:var(--on-dark);font-weight:700}
.foot-col + .foot-col{margin-top:0}
.foot-block{margin-bottom:clamp(24px,3vw,38px)}
.foot-block p{color:var(--on-dark-mute);font-size:.9375rem;margin-bottom:6px}
.foot-block a{font-weight:700;border-bottom:1px solid transparent;transition:border-color var(--t-fast)}
.foot-block a:hover{border-color:currentColor}
.foot-links li{margin-bottom:8px}
.foot-links a{color:var(--on-dark-mute);font-size:.9375rem;transition:color var(--t-fast)}
.foot-links a:hover{color:var(--on-dark)}
.foot-legal-line{color:var(--on-dark-mute);font-size:.875rem;line-height:1.65;max-width:88ch;margin-top:clamp(28px,3vw,44px)}

.news h2,.news h3{font-size:.9375rem;font-weight:800;margin-bottom:16px}
.news__row{display:flex;align-items:center;gap:8px;background:var(--dark-2);border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:3px 4px 3px 16px}
html[data-theme="dark"] .news__row{background:#e8e6e1;border-color:rgba(0,0,0,.12)}
.news__row input{flex:1 1 auto;background:none;border:0;padding:11px 0;font-size:.9375rem;color:var(--on-dark)}
.news__row input::placeholder{color:var(--on-dark-mute)}
.news__row input:focus{outline:none}
.news__row button{font-weight:700;font-size:.9375rem;padding:10px 14px;border-radius:6px;transition:opacity var(--t-fast)}
.news__row button:hover{opacity:.65}
.news__consent{display:flex;gap:10px;margin-top:14px;font-size:.8125rem;color:var(--on-dark-mute);line-height:1.55;align-items:flex-start}
.news__consent input{margin-top:3px;accent-color:var(--accent)}
.news__msg{margin-top:12px;font-size:.8125rem}

.foot-bottom{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;padding-left:clamp(0px,calc(var(--rail) + 56px),140px);
  margin-top:clamp(40px,6vw,72px);padding-top:22px;border-top:1px solid rgba(255,255,255,.13);
  font-size:.8125rem;color:var(--on-dark-mute)}
html[data-theme="dark"] .foot-bottom{border-top-color:rgba(0,0,0,.14)}
.foot-bottom ul{display:flex;gap:14px;flex-wrap:wrap}
.foot-bottom a:hover{color:var(--on-dark)}

/* ---------- 11  Search / 404 / setup -------------------------------- */
.search-panel{position:fixed;inset:0;z-index:95;background:var(--paper);display:flex;flex-direction:column;
  padding:clamp(80px,12vh,150px) var(--gutter);opacity:0;visibility:hidden;transition:opacity var(--t-mid),visibility var(--t-mid)}
.search-panel.is-open{opacity:1;visibility:visible}
.search-panel form{max-width:900px;margin:0 auto;width:100%;border-bottom:2px solid var(--ink);display:flex;gap:16px;align-items:center}
.search-panel input{flex:1 1 auto;border:0;background:none;font-size:clamp(1.4rem,4vw,2.6rem);font-weight:700;letter-spacing:-.03em;padding:14px 0}
.search-panel input:focus{outline:none}
.search-panel .hint{max-width:900px;margin:18px auto 0;width:100%;color:var(--ink-mute);font-size:.875rem}
.search-panel__close{position:absolute;top:26px;right:var(--gutter);width:48px;height:48px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center}

.results{display:grid;gap:2px;margin-top:32px}
.result{border-top:1px solid var(--line);padding:26px 0;display:block;transition:padding-left var(--t-mid)}
.result:hover{padding-left:14px}
.result:last-child{border-bottom:1px solid var(--line)}
.result h2{font-size:clamp(1.15rem,2vw,1.6rem);font-weight:800;letter-spacing:-.025em}
.result p{color:var(--ink-soft);margin-top:8px;font-size:.9375rem;max-width:76ch}
.result span{font-size:.75rem;color:var(--ink-mute);letter-spacing:.05em;text-transform:uppercase}
mark{background:color-mix(in srgb,var(--accent) 18%,transparent);color:inherit;padding:0 2px}

.stage{min-height:78svh;display:grid;place-items:center;text-align:center;padding:140px var(--gutter) 90px}
.stage h1{font-size:clamp(3rem,12vw,9rem);font-weight:800;letter-spacing:-.05em;line-height:.92}
.stage p{margin-top:18px;color:var(--ink-soft);max-width:46ch;margin-inline:auto}
.stage .btn{margin-top:30px}

.setup{max-width:720px;margin:0 auto;padding:14vh 24px;font-family:var(--f-sans)}
.setup h1{font-size:1.75rem;font-weight:800;letter-spacing:-.03em;margin-bottom:14px}
.setup p{color:#4e4e4e;margin-bottom:14px}
.setup code{background:#f2f1ee;padding:2px 6px;border-radius:5px;font-size:.9em}
.setup ol{list-style:decimal;padding-left:22px;color:#4e4e4e}
.setup li{margin-bottom:8px}

/* ---------- 12  Motion + reveal ------------------------------------ */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .85s cubic-bezier(.16,1,.3,1),transform .85s cubic-bezier(.16,1,.3,1)}
.reveal.is-in{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.08s}
.reveal[data-d="2"]{transition-delay:.16s}
.reveal[data-d="3"]{transition-delay:.24s}
.reveal[data-d="4"]{transition-delay:.32s}

@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .hero__title .ln > span{transform:none}
  .hero__media img{opacity:1;transform:none}
  *{transition-duration:.01ms !important;animation-duration:.01ms !important}
}

/* ---------- 12b  Keyboard focus ---------------------------------------
   Three rules above set outline:none on :focus, and two of them offer no
   replacement, so a keyboard user had no visible focus on the newsletter and
   search inputs. Restored for :focus-visible only, which means pointer users
   see exactly what they saw before and nothing moves: an outline is drawn
   outside the box and does not affect layout. */
.news__row input:focus-visible,
.search-panel input:focus-visible,
.field input:focus-visible,
.field textarea:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}
/* The dark footer needs a ring that is visible against it. */
.site-footer .news__row input:focus-visible{outline-color:var(--on-dark)}

/* main carries tabindex="-1" purely so the skip link can move focus into it.
   It is not interactive and never appears in the tab order, so the ring the
   browser would draw around the entire content area on that programmatic
   focus is noise. This suppresses that one ring and nothing else: no
   interactive element loses its indicator, and no pixel moves. */
main#main:focus{outline:none}

/* ---------- 13  Responsive ------------------------------------------ */
@media (max-width:1280px){
  :root{--rail:60px}
  .nav{gap:clamp(10px,1.8vw,26px)}
  .nav__link{font-size:.9375rem}
}
@media (max-width:1080px){
  :root{--rail:0px}
  .rail,.dock__cta{display:none}
  .hero__inner,.services__grid,.sec__inner,.cta__inner,.site-footer__inner,.steps__track{
    padding-left:var(--gutter);padding-right:var(--gutter)}
  .nav{display:none}
  .site-header{padding-left:var(--gutter);gap:12px}
  .brand{margin-left:0;order:-1}
  .burger{order:2;margin-left:auto;width:48px;height:48px}
  .header__cta{order:1}
  .ovl{justify-content:flex-start;padding-top:104px}
  .ovl__list{max-width:none}
  .ovl__foot{grid-template-columns:1fr;gap:22px;margin-top:40px}
  .foot-grid{grid-template-columns:1fr 1fr}
  .dock{left:16px;bottom:16px}
}
@media (max-width:900px){
  .hero{min-height:auto;padding-top:104px}
  .hero__inner{grid-template-columns:1fr;gap:36px}
  .hero__media{order:2;min-height:auto;flex-direction:column;align-items:flex-start;gap:24px}
  .hero__media img{max-width:520px;margin-inline:auto}
  .hero__media .hf{max-width:520px;margin-inline:auto}
  .hero__feature{position:static;max-width:none;margin-top:26px}
  .gridlines{display:none}
  /* The statement takes the full width from here down, so the gradient
     stops sitting behind it and stacks underneath instead, which is what
     the home page banner does at the same breakpoint. */
  .ed--hero-bg{display:flex;flex-direction:column}
  .ed--hero-bg .ed__inner{order:1}
  .ed__field{
    order:2;position:static;transform:none;
    width:min(100%,460px);margin-inline:auto;
    margin-top:clamp(30px,6vw,56px);
  }
  .services__grid{grid-template-columns:1fr;gap:40px}
  .services__title{max-width:none}
  .cards[data-cols="3"],.cards[data-cols="4"]{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cta__top{flex-direction:column;align-items:flex-start;gap:22px}
}
@media (max-width:720px){
  .services__items{grid-template-columns:1fr;gap:34px}
  .cards[data-cols="2"],.cards[data-cols="3"],.cards[data-cols="4"]{grid-template-columns:1fr}
  .form__row{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .foot-bottom{flex-direction:column;align-items:flex-start;gap:12px}
  .hero__title{font-size:clamp(3rem,15.5vw,5.2rem)}
  .ed__field{width:min(100%,340px);margin-top:clamp(24px,6vw,36px)}
  .stage{padding-top:120px}
  .header__cta .btn{padding:.8em 1.15em;font-size:.8125rem}
  .brand{font-size:1.15rem}
}

/* No-JS / reduced-motion fallback for the sideways panels:
   they become a normal horizontal scroller, then a vertical stack. */
.steps.is-static .steps__sticky{position:static;height:auto;padding-block:clamp(56px,8vh,96px)}
.steps.is-static .steps__track{overflow-x:auto;scroll-snap-type:x mandatory;transform:none !important;
  padding-bottom:18px;-webkit-overflow-scrolling:touch}
.steps.is-static .step{scroll-snap-align:start;height:auto}
.steps.is-static .step__media{aspect-ratio:4/3;flex:0 0 auto}
@media (max-width:900px){
  .steps__sticky{position:static;height:auto;padding-block:clamp(48px,7vh,80px)}
  .steps__track{flex-direction:column;transform:none !important;gap:52px;overflow:visible}
  .step{flex:1 1 auto;height:auto;padding-right:0}
  .step__media{aspect-ratio:4/3;flex:0 0 auto}
}

/* ---------- 14  Inline editor chrome -------------------------------- */
body.is-editing [data-section]{position:relative;outline:1px dashed transparent;transition:outline-color var(--t-fast)}
body.is-editing [data-section]:hover{outline-color:var(--accent)}
body.is-editing .amc-edit{
  position:absolute;top:10px;right:10px;z-index:70;display:none;gap:6px;
}
body.is-editing [data-section]:hover .amc-edit{display:flex}
body.is-editing .amc-edit button{
  background:var(--accent);color:#fff;font-size:11px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;padding:7px 11px;border-radius:6px;box-shadow:0 4px 14px rgba(0,0,0,.18)
}
body.is-editing [contenteditable="true"]{outline:1px dotted color-mix(in srgb,var(--accent) 60%,transparent);outline-offset:3px;min-width:1ch}
body.is-editing [contenteditable="true"]:focus{outline:2px solid var(--accent)}