/* =========================================================
   ZELOS MARKETING — Obsidian Atelier
   Midnight navy canvas · oxblood signature · ivory type
   ========================================================= */

/* ---------- 1. TOKENS ---------- */
:root{
  /* brand */
  --oxblood:#7A0F1F;
  --burgundy:#B52436;
  /* #B52436 is only 3.03:1 on --bg: fine for fills, borders, icons and large
     display accents (3:1), but it fails AA for body-size text. --burgundy-ink
     is the same accent lifted to 5.16:1 over --bg and 4.98:1 over --card, for
     small labels and numerals only. Do not use it for surfaces or borders. */
  --burgundy-ink:#DE5468;
  --navy:#0A0D12;
  --navy-2:#111620;
  --ivory:#F5F5F3;
  --rose:#C08A76;

  /* derived surfaces */
  --bg:var(--navy);
  --bg-2:#0C1016;
  --card:#0E121A;
  --card-2:#10151E;

  /* ink */
  --ink:var(--ivory);
  --ink-70:rgba(245,245,243,.70);
  --ink-52:rgba(245,245,243,.52);
  /* Quietest ink that still clears WCAG AA (4.5:1) for body-size text, measured
     on both surfaces it ever sits on: 4.98:1 over --bg, 4.97:1 over --card.
     On a ground this dark AA needs >=47% ivory, so this is the floor of the
     scale — the former --ink-38 (3.34:1) and --ink-22 (1.87:1) both failed and
     have been folded into this token. Nothing fainter may carry text. */
  --ink-quiet:rgba(245,245,243,.50);

  /* lines */
  --line:rgba(245,245,243,.09);
  --line-2:rgba(245,245,243,.14);
  --line-red:rgba(181,36,54,.32);
  --line-red-soft:rgba(181,36,54,.16);

  /* type */
  --f-dis:'Archivo',ui-sans-serif,system-ui,sans-serif;
  --f-body:'Instrument Sans','Archivo',ui-sans-serif,system-ui,sans-serif;

  /* rhythm */
  --gutter:clamp(20px,5vw,64px);
  --maxw:1320px;
  --sect-y:clamp(88px,11vw,168px);

  /* motion */
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-2:cubic-bezier(.65,.05,.36,1);
}

/* ---------- 2. RESET ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:96px;overflow-x:clip}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:clamp(15.5px,.42vw + 14px,17px);
  line-height:1.62;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:clip;
  overflow-wrap:break-word;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,p{margin:0}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
hr{border:0;margin:0}
::selection{background:var(--burgundy);color:var(--ivory)}
:focus-visible{outline:2px solid var(--rose);outline-offset:3px}

.skip{
  position:fixed;top:-100px;left:16px;z-index:200;
  background:var(--burgundy);color:#fff;padding:12px 18px;
  font-size:13px;letter-spacing:.14em;text-transform:uppercase;
  transition:top .25s var(--ease);
}
.skip:focus{top:16px}
.sprite{position:absolute;width:0;height:0;overflow:hidden}

/* ---------- 3. ATMOSPHERE ---------- */
.grain{
  position:fixed;inset:0;z-index:90;pointer-events:none;
  opacity:.16;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:200px 200px;
}
/* architectural hairline columns */
.rulers{
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  display:grid;grid-template-columns:repeat(4,1fr);
  max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);
}
.rulers span{border-left:1px solid rgba(245,245,243,.035)}
.rulers span:first-child{border-left-color:rgba(181,36,54,.22)}
.rulers span:last-child{border-right:1px solid rgba(245,245,243,.035);grid-column:4}
/* scoped copy for full-bleed coloured sections: same grid, light hairlines */
.rulers--in{position:absolute;z-index:0}
.rulers--in span{border-left-color:rgba(255,255,255,.10)}
.rulers--in span:first-child{border-left-color:rgba(255,255,255,.20)}
.rulers--in span:last-child{border-right-color:rgba(255,255,255,.20)}
@media (max-width:860px){.rulers{display:none}}

.progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:120;pointer-events:none}
.progress i{
  display:block;height:100%;width:0%;
  background:linear-gradient(90deg,var(--oxblood),var(--burgundy) 60%,var(--rose));
  box-shadow:0 0 14px rgba(181,36,54,.6);
  transition:width .12s linear;
}

/* ---------- 4. LAYOUT ---------- */
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);position:relative;z-index:2}
.sect{padding:var(--sect-y) 0;position:relative}
.grid-12{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(24px,4vw,56px)}
.col-4{grid-column:span 4;min-width:0}
.col-8{grid-column:span 8;min-width:0}
@media (max-width:900px){
  .grid-12{grid-template-columns:minmax(0,1fr);gap:clamp(26px,4vw,40px)}
  .col-4,.col-8{grid-column:auto}
}
/* grid and flex children must be allowed to shrink below their min-content */
.cards>*,.why__grid>*,.steps>*,.intro__stats>*,
.ftr__top>*,.ftr__nav li{min-width:0}

.rule{
  height:1px;
  background:linear-gradient(90deg,transparent,var(--line-red) 18%,var(--line-red) 82%,transparent);
  opacity:.9;
}

/* ---------- 5. TYPE SYSTEM ---------- */
.h2{
  font-family:var(--f-dis);
  font-variation-settings:'wdth' 108,'wght' 600;
  font-weight:600;
  font-size:clamp(2.1rem,4.4vw,3.9rem);
  line-height:1.03;
  letter-spacing:-.022em;
}
.h2 em{font-style:normal;color:var(--burgundy)}

.eyebrow{
  display:flex;align-items:center;gap:.65em;
  font-family:var(--f-dis);
  font-variation-settings:'wdth' 100,'wght' 500;
  font-size:.72rem;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--ink-52);
  margin-bottom:clamp(20px,2.4vw,30px);
}
.eyebrow .num{color:var(--burgundy-ink);font-variation-settings:'wght' 600}
.eyebrow .ico{width:11px;height:11px;color:var(--burgundy);flex:none}

.sect__head{max-width:60ch;margin-bottom:clamp(48px,6vw,88px)}
.sect__head--split{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(28px,5vw,72px);
  max-width:none;align-items:end;
}
.sect__lede{color:var(--ink-52);max-width:44ch;font-size:1.02rem;margin-top:1.2em}
.sect__head--split .sect__lede{margin-top:0;padding-bottom:.4em}
@media (max-width:860px){.sect__head--split{grid-template-columns:1fr;align-items:start}}

/* ---------- 6. BUTTONS ---------- */
.btn{
  --bh:#C92B3F;
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  gap:.6em;overflow:hidden;
  padding:1.05em 2.1em;
  background:var(--burgundy);
  color:var(--ivory);
  border:1px solid var(--burgundy);
  border-radius:2px;
  font-family:var(--f-dis);
  font-variation-settings:'wdth' 100,'wght' 600;
  font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;line-height:1;
  transition:background .4s var(--ease),border-color .4s var(--ease),transform .4s var(--ease),box-shadow .4s var(--ease);
}
.btn::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.28),transparent 70%);
  transform:translateX(-130%);
}
.btn:hover{background:var(--bh);border-color:var(--bh);transform:translateY(-2px);box-shadow:0 14px 40px -18px rgba(181,36,54,.9)}
.btn:hover::after{transform:translateX(130%);transition:transform .85s var(--ease)}
.btn:active{transform:translateY(0)}
.btn--ghost{
  background:transparent;color:var(--ink);
  border-color:var(--line-2);
}
.btn--ghost:hover{background:rgba(181,36,54,.10);border-color:var(--burgundy);box-shadow:none}
/* the base .btn computes to ~42px tall; hold it at the 44px touch minimum.
   .btn--lg already clears it; .btn--sm is the desktop header chip, left as-is. */
.btn:not(.btn--sm){min-height:44px}
.btn--sm{padding:.85em 1.5em;font-size:.7rem;letter-spacing:.14em}
.btn--lg{padding:1.25em 2.6em;font-size:.85rem}

/* ---------- 7. LOGO LOCKUP ---------- */
.lockup{display:inline-flex;align-items:center;gap:.85rem}
.lockup__star{width:24px;height:24px;flex:none;transition:transform 1.1s var(--ease)}
.lockup:hover .lockup__star{transform:rotate(90deg)}
.lockup__type{display:flex;flex-direction:column;gap:5px}
.lockup__word{width:118px;height:auto;color:var(--ivory)}
.lockup__sub{
  display:flex;align-items:center;gap:.5em;
  font-family:var(--f-dis);
  font-variation-settings:'wdth' 100,'wght' 500;
  font-size:.5rem;letter-spacing:.44em;text-transform:uppercase;
  color:var(--burgundy);padding-left:.06em;
}
.lockup__sub i{display:block;width:10px;height:1px;background:var(--burgundy);opacity:.85}

/* ---------- 8. HEADER ---------- */
.hdr{
  position:fixed;top:0;left:0;right:0;z-index:100;
  transition:background .5s var(--ease),border-color .5s var(--ease),backdrop-filter .5s var(--ease);
  border-bottom:1px solid transparent;
}
.hdr.is-stuck{
  background:rgba(10,13,18,.82);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border-bottom-color:var(--line-red-soft);
}
.hdr.is-hidden{transform:translateY(-102%);transition:transform .5s var(--ease),background .5s var(--ease)}
.hdr__in{
  max-width:var(--maxw);margin:0 auto;padding:clamp(16px,1.6vw,22px) var(--gutter);
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.nav{display:flex;align-items:center;gap:clamp(18px,2.2vw,34px)}
.nav a:not(.btn){
  position:relative;
  font-family:var(--f-dis);
  font-variation-settings:'wdth' 100,'wght' 500;
  font-size:.74rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink-70);transition:color .3s var(--ease);
}
.nav a:not(.btn)::after{
  content:"";position:absolute;left:0;bottom:-6px;height:1px;width:100%;
  background:var(--burgundy);transform:scaleX(0);transform-origin:right;
  transition:transform .45s var(--ease);
}
.nav a:not(.btn):hover,.nav a:not(.btn).is-current{color:var(--ivory)}
.nav a:not(.btn):hover::after{transform:scaleX(1);transform-origin:left}

/* ---- Services dropdown ----
   Opens on hover, focus-within and click. The panel's own padding-top bridges the
   gap below the trigger, so the pointer never crosses dead space on its way in. */
.nav__group{position:relative;display:flex;align-items:center}
.nav__toggle{
  display:inline-flex;align-items:center;gap:.5em;
  padding:0;background:none;border:0;cursor:pointer;
  font-family:var(--f-dis);font-variation-settings:'wdth' 100,'wght' 500;
  font-size:.74rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink-70);transition:color .3s var(--ease);
  position:relative;
}
.nav__toggle::after{
  content:"";position:absolute;left:0;bottom:-6px;height:1px;width:100%;
  background:var(--burgundy);transform:scaleX(0);transform-origin:right;
  transition:transform .45s var(--ease);
}
.nav__group:hover .nav__toggle,
.nav__group.is-open .nav__toggle,
.nav__group.is-current .nav__toggle{color:var(--ivory)}
.nav__group:hover .nav__toggle::after,
.nav__group.is-open .nav__toggle::after,
.nav__group.is-current .nav__toggle::after{transform:scaleX(1);transform-origin:left}
.nav__toggle:focus-visible{outline:2px solid var(--rose);outline-offset:6px}
.nav__chev{width:9px;height:6px;flex:none;color:var(--burgundy);transition:transform .35s var(--ease)}
.nav__group:hover .nav__chev,
.nav__group.is-open .nav__chev{transform:rotate(180deg)}

.nav__menu{
  position:absolute;top:100%;left:50%;translate:-50% 0;
  padding-top:18px;                 /* the hover bridge - part of the menu box */
  min-width:190px;
  opacity:0;visibility:hidden;
  transition:opacity .28s var(--ease),visibility .28s var(--ease),translate .28s var(--ease);
  z-index:20;
}
.nav__group:hover .nav__menu,
.nav__group.is-open .nav__menu,
.nav__menu:focus-within{opacity:1;visibility:visible;translate:-50% 0}
.nav__menu > a{
  display:block;padding:.85em 1.15em;
  background:rgba(12,16,22,.97);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border:1px solid var(--line);border-bottom:0;
  font-family:var(--f-dis);font-variation-settings:'wdth' 100,'wght' 500;
  font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;
  color:var(--ink-70);
  transition:color .3s var(--ease),background .3s var(--ease);
}
.nav__menu > a:first-child{border-radius:2px 2px 0 0}
.nav__menu > a:last-child{border-bottom:1px solid var(--line);border-radius:0 0 2px 2px}
.nav__menu > a:hover{color:var(--ivory);background:rgba(181,36,54,.14)}
.nav__menu > a[aria-current="page"]{color:var(--ivory);box-shadow:inset 2px 0 0 var(--burgundy)}

/* ---- inside the burger menu: an inline disclosure, no hover ---- */
@media (max-width:1240px){
  .nav__group{display:block;width:100%}
  .nav__toggle{
    width:100%;justify-content:space-between;min-height:44px;
    font-size:clamp(1.4rem,7vw,2.1rem);letter-spacing:.02em;text-transform:none;
    font-variation-settings:'wdth' 108,'wght' 600;color:var(--ivory);
  }
  .nav__toggle::after{display:none}
  .nav__chev{width:14px;height:10px}
  .nav__menu{
    position:static;translate:none;padding-top:0;min-width:0;
    display:grid;overflow:hidden;
    max-height:0;opacity:1;visibility:visible;
    transition:max-height .4s var(--ease),margin .4s var(--ease);
    margin-top:0;
  }
  /* hover must not open it on touch - only the explicit toggle state does */
  .nav__group:hover .nav__menu{max-height:0}
  /* the desktop rules re-apply translate:-50% when open; inside the burger the
     panel is a static block and must not be shifted */
  .nav__group.is-open .nav__menu,
  .nav__menu:focus-within{translate:none}
  .nav__group.is-open .nav__menu{max-height:260px;margin-top:10px}
  .nav__group.is-open:hover .nav__menu{max-height:260px}
  .nav__menu > a{
    display:flex;align-items:center;min-height:44px;
    background:none;border:0;border-left:1px solid var(--line);
    padding:.55em 0 .55em 1.1em;margin-left:.2em;
    font-size:1rem;letter-spacing:.06em;text-transform:none;
  }
  .nav__menu > a:first-child,.nav__menu > a:last-child{border-radius:0;border-bottom:0}
  .nav__menu > a[aria-current="page"]{box-shadow:none;border-left-color:var(--burgundy);color:var(--ivory)}
  .nav__menu > a:hover{background:none;color:var(--rose)}
}

/* 44px box so the primary mobile control meets the touch-target minimum; the
   bars keep their original 22px length and 7px gap, just re-centred. */
.burger{display:none;width:44px;height:44px;position:relative}
.burger span{
  position:absolute;left:11px;right:11px;height:1.5px;background:var(--ivory);
  transition:transform .45s var(--ease),opacity .3s var(--ease);
}
.burger span:first-child{top:18px}
.burger span:last-child{top:25px}
.burger[aria-expanded="true"] span:first-child{transform:translateY(3.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}

/* The nav is About / Services / Process / Pricing plus the CTA. The 1240px
   switch to the burger was set when a sixth item (Results) was present and the
   lockup and nav crowded to 24px apart; it is kept as-is because the dropdown
   still needs room, but it could be lowered if the nav stays this short. */
@media (max-width:1240px){
  .burger{display:block;z-index:3}
  .hdr__in .lockup{position:relative;z-index:3}
  .nav{
    position:fixed;inset:0;
    background:rgba(10,13,18,.97);
    backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
    flex-direction:column;align-items:flex-start;justify-content:center;
    gap:clamp(18px,3.4vh,30px);
    padding:0 var(--gutter);
    clip-path:inset(0 0 100% 0);
    transition:clip-path .7s var(--ease);
    pointer-events:none;
  }
  .nav.is-open{clip-path:inset(0 0 0 0);pointer-events:auto}
  .nav a:not(.btn){font-size:clamp(1.4rem,7vw,2.1rem);letter-spacing:.02em;text-transform:none;
    font-variation-settings:'wdth' 108,'wght' 600;color:var(--ivory)}
  .nav a:not(.btn)::after{bottom:-2px}
  .nav .btn{margin-top:12px;min-height:44px}
  .nav::before{
    content:"";position:absolute;top:0;left:var(--gutter);right:var(--gutter);height:1px;
    background:var(--line-red);opacity:0;transition:opacity .6s .2s var(--ease);
  }
  .nav.is-open::before{opacity:1}
}

/* ---------- 9. HERO ---------- */
.hero{
  position:relative;min-height:100svh;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:clamp(120px,16vh,180px) 0 clamp(28px,4vh,44px);
  overflow:hidden;
  isolation:isolate;
}
.hero__atmos{position:absolute;inset:0;z-index:0;pointer-events:none}
.hero__glow{
  position:absolute;top:-22%;right:-12%;width:min(76vw,880px);aspect-ratio:1;
  background:radial-gradient(circle at 50% 50%,rgba(122,15,31,.55),rgba(122,15,31,.15) 42%,transparent 68%);
  filter:blur(12px);
}
.hero__star{
  position:absolute;top:50%;right:3%;
  width:clamp(150px,20vw,320px);height:auto;
  transform:translateY(-50%);
  opacity:.88;
  filter:drop-shadow(0 30px 80px rgba(181,36,54,.35));
  animation:starDrift 26s var(--ease-2) infinite;
}
@keyframes starDrift{
  0%,100%{transform:translateY(-50%) rotate(0deg) scale(1)}
  50%{transform:translateY(-46%) rotate(12deg) scale(1.035)}
}
.hero__orbit{position:absolute;top:50%;right:2%;transform:translate(50%,-56%);pointer-events:none}
.hero__orbit span{
  position:absolute;top:0;left:0;border-radius:50%;
  border:1px solid var(--line-red-soft);
  transform:translate(-50%,-50%);
}
.hero__orbit span:first-child{
  width:clamp(300px,40vw,620px);aspect-ratio:1;
  border-top-color:rgba(192,138,118,.42);
  animation:spin 44s linear infinite;
}
.hero__orbit span:last-child{
  width:clamp(420px,56vw,860px);aspect-ratio:1;
  border-color:rgba(245,245,243,.05);
  border-left-color:rgba(181,36,54,.4);
  animation:spin 90s linear infinite reverse;
}
@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}}

.hero__in{position:relative;z-index:3}
.hero__h1{
  font-family:var(--f-dis);
  font-variation-settings:'wdth' 112,'wght' 600;
  font-weight:600;
  font-size:clamp(min(10.2vw,2.9rem),8vw,7rem);
  line-height:.95;
  letter-spacing:-.012em;
  font-kerning:normal;
  margin:0 0 clamp(22px,2.6vw,34px);
  max-width:18ch;
}
.hero__h1 em{font-style:normal;color:var(--burgundy)}
/* "For Brands That" measures 8.04em at these settings (the widest of the two lines).
   Two constraints govern the size:
     - narrow screens: the line must clear the container at 320px -> floor min(10.2vw,2.9rem)
     - wide screens:   the line must stop ~70px short of .hero__star -> 8vw, capped 7rem
   Star position/size and this cap are a matched pair; changing one needs the other
   re-checked at 1280/1366/1440. Measure em width in the rendered page, not a probe file. */

/* body sets overflow-wrap:break-word so long strings can't overflow narrow screens,
   but on a display headline that chopped the slogan mid-word (e.g. "Refuse Secon" /
   "d.") once it outgrew the container. Headlines opt out and keep each word whole. */
.hero__h1,.cta__h2{overflow-wrap:normal;word-break:normal;hyphens:none}
.word{white-space:nowrap}

/* Archivo's lowercase f carries almost no sidebearing, so "rf" and "fo" close up
   at display sizes while every other pair sits around 0.08em. Space that one
   glyph on both sides so the word reads evenly. Applied via .kern-f in the markup. */
.kern-f{margin-left:var(--kf-l,.072em);letter-spacing:var(--kf-r,.052em)}
.hero__h1 .line{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.hero__h1 .line__i{
  display:block;
  transform:translateY(108%);
  transition:transform 1.2s var(--ease);
  transition-delay:var(--d,0s);
}
.hero__h1 .line.is-in .line__i{transform:translateY(0)}
.hero__lede{
  max-width:34ch;color:var(--ink-70);
  font-size:clamp(1.02rem,1.35vw,1.32rem);line-height:1.55;
}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(30px,3.4vw,44px)}
.hero__marks{
  display:flex;flex-wrap:wrap;gap:0 clamp(18px,2.4vw,34px);
  margin-top:clamp(38px,4.6vw,64px);
  padding-top:clamp(18px,2vw,26px);
  border-top:1px solid var(--line);
  font-family:var(--f-dis);
  font-variation-settings:'wdth' 100,'wght' 500;
  font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-quiet);
}
.hero__marks li{display:flex;align-items:center;gap:clamp(18px,2.4vw,34px);padding:6px 0}
.hero__marks li:not(:last-child)::after{content:"";width:4px;height:4px;background:var(--burgundy);transform:rotate(45deg)}

.hero__offer{margin-top:clamp(20px,2.2vw,28px)}
.hero__offer a{
  display:inline-flex;align-items:center;gap:.7em;flex-wrap:wrap;
  padding:.85em 1.25em;
  border:1px solid var(--line-red);border-radius:2px;
  background:rgba(181,36,54,.07);
  font-family:var(--f-dis);font-variation-settings:'wdth' 100,'wght' 500;
  font-size:.74rem;letter-spacing:.1em;color:var(--ink-70);
  transition:border-color .4s var(--ease),background .4s var(--ease),color .4s var(--ease);
}
.hero__offer a:hover{border-color:var(--rose);background:rgba(181,36,54,.14);color:var(--ivory)}
.hero__offer a span{transition:transform .4s var(--ease);display:inline-block}
.hero__offer a:hover span{transform:translateX(4px)}
.hero__offer .ico{width:11px;height:11px;color:var(--rose);flex:none}

.hero__foot{
  position:relative;z-index:3;
  max-width:var(--maxw);margin:clamp(40px,6vh,72px) auto 0;padding:0 var(--gutter);
  display:flex;justify-content:space-between;align-items:center;gap:20px;
  font-family:var(--f-dis);font-size:.66rem;letter-spacing:.26em;text-transform:uppercase;color:var(--ink-quiet);
}
.scrollcue{display:flex;align-items:center;gap:.9em}
.scrollcue i{display:block;width:52px;height:1px;background:var(--line-2);position:relative;overflow:hidden}
.scrollcue i::after{
  content:"";position:absolute;inset:0;background:var(--burgundy);
  transform:translateX(-100%);animation:cue 2.6s var(--ease) infinite;
}
@keyframes cue{0%{transform:translateX(-100%)}55%{transform:translateX(0)}100%{transform:translateX(100%)}}
.hero__tag{color:var(--ink-quiet)}
@media (max-width:700px){
  .hero__tag{display:none}
  .hero__star{right:-14%;opacity:.42;width:clamp(210px,60vw,320px)}
  .hero__orbit{right:-14%}
}

/* ---------- 10. INTRO ---------- */
.intro__label .eyebrow{margin-bottom:0;position:sticky;top:120px}
.intro__body{margin-top:clamp(26px,3vw,40px);display:grid;gap:1.15em;max-width:56ch}
.intro__body p{color:var(--ink-70);font-size:clamp(1rem,1.2vw,1.16rem)}
.intro__more{margin-top:clamp(24px,2.6vw,32px)}
.intro__more a{
  display:inline-flex;align-items:center;gap:.6em;min-height:44px;
  font-family:var(--f-dis);font-variation-settings:'wdth' 100,'wght' 600;
  font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-70);
  transition:color .35s var(--ease);
}
.intro__more a span{transition:transform .4s var(--ease);display:inline-block}
.intro__more a:hover{color:var(--rose)}
.intro__more a:hover span{transform:translateX(5px)}
.intro__stats{
  margin-top:clamp(38px,4.4vw,60px);
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);
}
.intro__stats div{background:var(--bg);padding:clamp(18px,2vw,26px) clamp(16px,1.8vw,24px)}
.intro__stats .k{
  display:block;font-family:var(--f-dis);font-variation-settings:'wdth' 100,'wght' 600;
  font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:var(--burgundy-ink);margin-bottom:.6em;
}
.intro__stats .v{display:block;font-size:.92rem;color:var(--ink-52);line-height:1.45}
@media (max-width:700px){.intro__stats{grid-template-columns:1fr}.intro__label .eyebrow{position:static}}

/* ---------- 11. SERVICE CARDS ---------- */
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,1.6vw,22px)}
@media (max-width:1000px){.cards{grid-template-columns:1fr}}

.card{
  position:relative;isolation:isolate;overflow:hidden;
  background:linear-gradient(175deg,var(--card-2),var(--card) 62%);
  border:1px solid var(--line);
  border-radius:2px;
  padding:clamp(28px,2.6vw,40px) clamp(24px,2.2vw,36px) clamp(26px,2.4vw,34px);
  display:flex;flex-direction:column;
  transition:border-color .55s var(--ease),transform .55s var(--ease),background .55s var(--ease);
}
.card::before{
  content:"";position:absolute;inset:0;z-index:-1;opacity:0;
  background:radial-gradient(120% 90% at 50% 0%,rgba(122,15,31,.42),transparent 62%);
  transition:opacity .6s var(--ease);
}
.card::after{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--burgundy),var(--rose),transparent);
  transform:scaleX(0);transform-origin:left;
  transition:transform .8s var(--ease);
}
.card:hover{border-color:rgba(181,36,54,.34);transform:translateY(-4px)}
.card:hover::before{opacity:1}
.card:hover::after{transform:scaleX(1)}

.card__idx{
  position:absolute;top:clamp(18px,2vw,26px);right:clamp(20px,2vw,28px);
  font-family:var(--f-dis);font-variation-settings:'wdth' 110,'wght' 700;
  font-size:clamp(2.6rem,4.4vw,3.6rem);line-height:1;
  color:transparent;-webkit-text-stroke:1px rgba(245,245,243,.10);
  transition:-webkit-text-stroke-color .6s var(--ease),transform .6s var(--ease);
  pointer-events:none;
}
.card:hover .card__idx{-webkit-text-stroke-color:rgba(181,36,54,.5);transform:translateY(-3px)}

.card__top{display:flex;flex-direction:column;gap:clamp(20px,2.2vw,30px);margin-bottom:clamp(18px,2vw,24px)}
.card__star{width:18px;height:18px;color:var(--burgundy);transition:transform .8s var(--ease),color .5s var(--ease)}
.card:hover .card__star{transform:rotate(180deg);color:var(--rose)}
.card__title{
  font-family:var(--f-dis);font-variation-settings:'wdth' 106,'wght' 600;font-weight:600;
  font-size:clamp(1.55rem,2.2vw,2rem);line-height:1.02;letter-spacing:-.02em;
}
.card__copy{color:var(--ink-52);font-size:.98rem;max-width:34ch}
.card__list{
  margin:clamp(22px,2.4vw,30px) 0 0;
  padding-top:clamp(18px,2vw,24px);
  border-top:1px solid var(--line);
  display:grid;gap:.62em;
}
.card__list li{
  position:relative;padding-left:1.35em;
  font-size:.88rem;letter-spacing:.015em;color:var(--ink-70);
}
.card__list li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:5px;height:5px;background:var(--burgundy);transform:rotate(45deg);
  transition:background .4s var(--ease);
}
.card:hover .card__list li::before{background:var(--rose)}
.card__foot{
  margin-top:auto;padding-top:clamp(24px,2.6vw,32px);
  display:flex;align-items:baseline;justify-content:space-between;gap:1em;flex-wrap:wrap;
}
.card__price{
  font-family:var(--f-dis);font-variation-settings:'wdth' 106,'wght' 600;
  font-size:1.05rem;letter-spacing:-.01em;color:var(--ivory);white-space:nowrap;
}
.card__cta{
  display:inline-flex;align-items:center;gap:.6em;
  font-family:var(--f-dis);font-variation-settings:'wdth' 100,'wght' 600;
  font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-70);
  transition:color .35s var(--ease);
}
.card__cta span{transition:transform .45s var(--ease);display:inline-block}
.card__cta:hover{color:var(--ivory)}
.card__cta:hover span{transform:translateX(6px)}

/* ---------- 12. WHY ZELOS ---------- */
.why__grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px;background:var(--line);border:1px solid var(--line);
}
.why__item{
  background:var(--bg);
  padding:clamp(32px,3.6vw,58px) clamp(24px,3vw,52px) clamp(36px,4vw,64px);
  position:relative;overflow:hidden;
  transition:background .5s var(--ease);
}
.why__item::after{
  content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:linear-gradient(180deg,var(--burgundy),var(--oxblood));
  transform:scaleY(0);transform-origin:top;transition:transform .7s var(--ease);
}
.why__item:hover{background:var(--bg-2)}
.why__item:hover::after{transform:scaleY(1)}
.why__n{
  display:block;
  font-family:var(--f-dis);font-variation-settings:'wdth' 96,'wght' 500;
  font-size:.78rem;letter-spacing:.32em;color:var(--burgundy-ink);
  margin-bottom:clamp(26px,3vw,44px);
}
.why__item h3{
  font-family:var(--f-dis);font-variation-settings:'wdth' 106,'wght' 600;font-weight:600;
  font-size:clamp(1.28rem,2vw,1.75rem);line-height:1.1;letter-spacing:-.018em;
  margin-bottom:.7em;
}
.why__item p{color:var(--ink-52);max-width:38ch;font-size:.98rem}
@media (max-width:800px){.why__grid{grid-template-columns:1fr}}

/* ---------- 13. PROCESS ---------- */
.steps{
  position:relative;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(20px,2.4vw,34px);
  padding-top:64px;
}
.steps__line{
  position:absolute;top:0;left:0;right:0;height:1px;
  background:var(--line);overflow:hidden;
}
.steps__line i{
  display:block;height:100%;width:0%;
  background:linear-gradient(90deg,var(--oxblood),var(--burgundy),var(--rose));
  transition:width 1.6s var(--ease);
}
.steps__line.is-in i{width:100%}
.step{position:relative;padding-right:clamp(8px,1.4vw,20px)}
.step__num{
  display:block;
  font-family:var(--f-dis);font-variation-settings:'wdth' 112,'wght' 700;
  font-size:clamp(2.6rem,4.6vw,4.1rem);line-height:1;letter-spacing:-.03em;
  color:transparent;-webkit-text-stroke:1px rgba(181,36,54,.42);
  margin-bottom:.4em;
}
.step__dot{
  position:absolute;top:-64px;left:0;
  width:16px;height:16px;display:grid;place-items:center;
  transform:translateY(-8px);
}
.step__dot svg{width:13px;height:13px;color:var(--burgundy)}
.step__title{
  font-family:var(--f-dis);font-variation-settings:'wdth' 106,'wght' 600;font-weight:600;
  font-size:clamp(1.25rem,1.9vw,1.6rem);letter-spacing:-.015em;margin-bottom:.55em;
}
.step__copy{color:var(--ink-52);font-size:.94rem;max-width:26ch}
@media (max-width:900px){
  .steps{grid-template-columns:1fr;gap:0;padding-top:0;padding-left:34px}
  .steps__line{top:8px;bottom:8px;left:0;right:auto;width:1px;height:auto}
  .steps__line i{width:100%;height:0;transition:height 1.8s var(--ease)}
  .steps__line.is-in i{height:100%}
  .step{padding:26px 0 30px}
  .step:not(:last-of-type){border-bottom:1px solid var(--line)}
  .step__dot{top:34px;left:-34px;transform:translateX(-8px)}
  .step__num{font-size:2.4rem;margin-bottom:.2em}
  .step__copy{max-width:44ch}
}

/* ---------- 14. PRICING ---------- */
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,1.6vw,22px)}
.plans>*{min-width:0}
@media (max-width:940px){.plans{grid-template-columns:1fr}}

.plan{
  position:relative;display:flex;flex-direction:column;
  background:linear-gradient(175deg,var(--card-2),var(--card) 62%);
  border:1px solid var(--line);border-radius:2px;
  padding:clamp(26px,2.4vw,36px) clamp(22px,2vw,32px) clamp(24px,2.2vw,32px);
  transition:border-color .55s var(--ease),transform .55s var(--ease);
}
.plan:hover{border-color:rgba(181,36,54,.3);transform:translateY(-3px)}
.plan__head{padding-bottom:clamp(18px,2vw,24px);border-bottom:1px solid var(--line)}
.plan__name{
  font-family:var(--f-dis);font-variation-settings:'wdth' 100,'wght' 600;
  font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:var(--burgundy-ink);
  margin-bottom:clamp(16px,1.8vw,22px);
}
.plan__price{
  font-family:var(--f-dis);font-variation-settings:'wdth' 108,'wght' 600;
  font-size:clamp(2.6rem,4vw,3.4rem);line-height:1;letter-spacing:-.03em;color:var(--ivory);
  display:flex;align-items:baseline;
}
.plan__cur{font-size:.5em;font-variation-settings:'wdth' 100,'wght' 500;margin-right:.12em;color:var(--ink-52)}
.plan__mo{
  font-size:.3em;letter-spacing:.1em;color:var(--ink-quiet);
  font-variation-settings:'wdth' 100,'wght' 500;margin-left:.25em;
}
.plan__per{
  margin-top:.9em;
  font-family:var(--f-dis);font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-quiet);
}
.plan__note{margin-top:clamp(18px,2vw,24px);color:var(--ink-52);font-size:.94rem}
.plan__list{margin:clamp(20px,2.2vw,26px) 0 clamp(26px,2.8vw,34px);display:grid;gap:.6em}
.plan__list li{position:relative;padding-left:1.35em;font-size:.88rem;color:var(--ink-70)}
.plan__list li::before{
  content:"";position:absolute;left:0;top:.6em;width:5px;height:5px;
  background:var(--burgundy);transform:rotate(45deg);
}
/* margin-top:auto pins the button to the card foot so all three align,
   whatever length each feature list is */
.plan__cta{margin-top:auto;align-self:flex-start}

/* ---- the bundle: framed in burgundy so it reads as the headline offer ---- */
.bundle{
  position:relative;isolation:isolate;overflow:hidden;
  margin-top:clamp(20px,2.4vw,30px);
  border-radius:2px;
  padding:clamp(30px,3.4vw,56px) clamp(24px,3vw,52px);
  background:linear-gradient(160deg,#141922 0%,#0D1119 55%,#120A0F 100%);
  display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.9fr);
  gap:clamp(28px,3.6vw,60px);align-items:center;
}
/* 2px gradient frame without a wrapper element */
.bundle::before{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:2px;padding:2px;
  background:linear-gradient(140deg,var(--burgundy),var(--oxblood) 40%,var(--rose) 78%,var(--burgundy));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;
}
.bundle::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(75% 90% at 78% 8%,rgba(122,15,31,.55),transparent 62%);
}
.bundle__mark{
  position:absolute;right:-4%;bottom:-22%;width:clamp(180px,22vw,330px);height:auto;
  opacity:.10;z-index:-1;animation:starSlow 60s linear infinite;
}
.bundle__tag{
  position:absolute;top:0;left:clamp(24px,3vw,52px);
  display:inline-flex;align-items:center;gap:.6em;
  padding:.62em 1.15em;
  background:linear-gradient(100deg,var(--rose),#D8A692);
  color:#2A0B10;border-radius:0 0 2px 2px;
  font-family:var(--f-dis);font-variation-settings:'wdth' 100,'wght' 700;
  font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;
}
.bundle__tag svg{width:10px;height:10px;color:#2A0B10}
.bundle__main{padding-top:clamp(18px,2vw,26px)}
.bundle__name{
  font-family:var(--f-dis);font-variation-settings:'wdth' 108,'wght' 600;font-weight:600;
  font-size:clamp(1.9rem,3.4vw,2.9rem);line-height:1.02;letter-spacing:-.025em;
}
.bundle__sub{margin-top:.9em;color:var(--ink-70);max-width:46ch;font-size:1rem}

.bundle__price{
  display:flex;align-items:flex-end;flex-wrap:wrap;gap:clamp(14px,1.8vw,26px);
  margin:clamp(26px,3vw,38px) 0 clamp(24px,2.6vw,32px);
  padding-bottom:clamp(22px,2.4vw,30px);
  border-bottom:1px solid var(--line-red);
}
.bundle__price-a{display:flex;flex-direction:column;gap:.5em}
.bundle__amt{
  font-family:var(--f-dis);font-variation-settings:'wdth' 110,'wght' 600;
  font-size:clamp(2.4rem,4.2vw,3.6rem);line-height:1;letter-spacing:-.035em;color:var(--ivory);
  display:flex;align-items:baseline;
}
.bundle__lbl{
  font-family:var(--f-dis);font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-quiet);
}
.bundle__plus{
  font-family:var(--f-dis);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--burgundy-ink);padding-bottom:1.9em;
}
.bundle__list{display:grid;gap:.62em;margin-bottom:clamp(28px,3vw,38px)}
.bundle__list li{position:relative;padding-left:1.5em;font-size:.94rem;color:var(--ink-70)}
.bundle__list li::before{
  content:"";position:absolute;left:0;top:.42em;width:7px;height:7px;
  background:linear-gradient(135deg,var(--rose),var(--burgundy));transform:rotate(45deg);
}
.bundle__cta{width:fit-content}

/* ---- the savings panel ---- */
.save{
  border:1px solid rgba(192,138,118,.34);border-radius:2px;
  background:rgba(10,13,18,.55);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  padding:clamp(24px,2.6vw,36px);
}
.save__k{
  font-family:var(--f-dis);font-variation-settings:'wdth' 100,'wght' 600;
  font-size:.64rem;letter-spacing:.28em;text-transform:uppercase;color:var(--rose);
}
.save__v{
  font-family:var(--f-dis);font-variation-settings:'wdth' 112,'wght' 700;
  font-size:clamp(3.2rem,6.4vw,4.8rem);line-height:.92;letter-spacing:-.04em;
  margin:.18em 0 .1em;
  background:linear-gradient(100deg,#F0D3C5,var(--rose) 45%,var(--burgundy));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.save__sub{color:var(--ink-70);font-size:.94rem;line-height:1.5}
.save__sub strong{color:var(--ivory);font-weight:600}
.save__rows{margin:clamp(22px,2.4vw,30px) 0 0;padding-top:clamp(20px,2.2vw,26px);border-top:1px solid var(--line)}
.save__row{display:flex;flex-direction:column;gap:.3em;padding:.75em 0}
.save__row+.save__row{border-top:1px solid var(--line)}
.save__row dt{
  font-family:var(--f-dis);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-quiet);
}
.save__row dd{
  margin:0;display:flex;align-items:baseline;justify-content:space-between;gap:1em;
  font-size:.88rem;color:var(--ink-52);
}
.save__row dd b{
  font-family:var(--f-dis);font-variation-settings:'wdth' 106,'wght' 600;
  font-size:1.02rem;color:var(--ink-70);letter-spacing:-.01em;white-space:nowrap;
}
.save__row--win dt{color:var(--rose)}
.save__row--win dd{color:var(--ink-70)}
.save__row--win dd b{color:var(--ivory)}
.save__fine{
  margin-top:clamp(20px,2.2vw,26px);padding-top:clamp(16px,1.8vw,22px);
  border-top:1px solid var(--line);
  font-size:.82rem;line-height:1.6;color:var(--ink-quiet);
}
.save__fine strong{color:var(--rose);font-weight:600}

.pricing__foot{
  margin-top:clamp(24px,2.6vw,34px);
  font-size:.82rem;color:var(--ink-quiet);letter-spacing:.02em;max-width:70ch;
}

@media (max-width:980px){
  .bundle{grid-template-columns:minmax(0,1fr);gap:clamp(28px,4vw,40px)}
  .bundle__mark{right:-18%;bottom:-8%;opacity:.07}
}
@media (max-width:560px){
  .bundle__price{gap:18px}
  .bundle__plus{padding-bottom:0;width:100%}
}

/* Touch targets: the payment CTAs are the highest-cost mis-tap on the site, so on
   touch devices (and any narrow layout) they get the 44px minimum from the WCAG /
   iOS guidance. .btn is already inline-flex + centred, so min-height only grows the
   box - the label stays centred and nothing else about the styling changes. */
@media (max-width:940px), (pointer:coarse){
  .plan__cta,.bundle__cta{min-height:44px}
  /* only the small ghost buttons need more breathing room; .btn--lg already
     clears 44px on its own padding and must not be shrunk to meet it */
  .plan__cta.btn--sm{padding-top:1.05em;padding-bottom:1.05em}
}

/* --- standalone plan: "From" prefix and qualifying lines --- */
.plan__from{
  font-size:.32em;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-quiet);
  font-variation-settings:'wdth' 100,'wght' 500;margin-right:.5em;
  align-self:center;
}
.plan__qual{
  margin-top:.85em;font-size:.8rem;line-height:1.55;color:var(--ink-quiet);
}
/* the ad-spend flag must not read as small print */
.plan__qual--flag{
  display:inline-flex;align-items:center;gap:.55em;
  color:var(--rose);font-size:.82rem;
}
.plan__qual--flag::before{
  content:"";width:5px;height:5px;flex:none;
  background:var(--rose);transform:rotate(45deg);
}

/* ---- packages ---- */
.packages{margin-top:clamp(56px,7vw,104px);padding-top:clamp(48px,6vw,84px);border-top:1px solid var(--line-red-soft)}
.packages__head{max-width:62ch;margin-bottom:clamp(34px,4vw,56px)}
.packages__h{
  font-family:var(--f-dis);font-variation-settings:'wdth' 106,'wght' 600;font-weight:600;
  font-size:clamp(1.6rem,3vw,2.5rem);line-height:1.08;letter-spacing:-.022em;
}
.packages__lede{margin-top:.9em;color:var(--ink-52);max-width:52ch;font-size:1rem;line-height:1.65}

.pkgs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,1.6vw,22px);align-items:stretch}
@media (max-width:1100px){.pkgs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.pkgs{grid-template-columns:minmax(0,1fr)}}

.pkg{
  position:relative;display:flex;flex-direction:column;min-width:0;
  background:linear-gradient(175deg,var(--card-2),var(--card) 62%);
  border:1px solid var(--line);border-radius:2px;
  padding:clamp(26px,2.4vw,36px) clamp(22px,2vw,30px) clamp(24px,2.2vw,32px);
  transition:border-color .55s var(--ease),transform .55s var(--ease);
}
.pkg:hover{border-color:rgba(181,36,54,.3);transform:translateY(-3px)}

/* the all-in-one option: a burgundy edge and a hairline, nothing louder */
.pkg--featured{border-color:rgba(181,36,54,.42);overflow:hidden}
.pkg--featured::after{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--burgundy),var(--rose),transparent);
}
.pkg--featured .pkg__cat{color:var(--rose)}

.pkg__cat{
  font-family:var(--f-dis);font-variation-settings:'wdth' 100,'wght' 600;
  font-size:.6rem;letter-spacing:.26em;text-transform:uppercase;color:var(--burgundy-ink);
  margin-bottom:clamp(14px,1.6vw,18px);
}
.pkg__name{
  font-family:var(--f-dis);font-variation-settings:'wdth' 106,'wght' 600;font-weight:600;
  font-size:clamp(1.4rem,2vw,1.75rem);line-height:1.06;letter-spacing:-.02em;
}
.pkg__pos{margin-top:.55em;color:var(--ink-52);font-size:.94rem;line-height:1.55}

.pkg__price{
  display:flex;align-items:baseline;flex-wrap:wrap;gap:.15em .5em;
  margin-top:clamp(18px,2vw,24px);
  font-family:var(--f-dis);font-variation-settings:'wdth' 108,'wght' 600;
  color:var(--ivory);letter-spacing:-.025em;
}
.pkg__amt{display:inline-flex;align-items:baseline;font-size:clamp(1.9rem,2.8vw,2.5rem);line-height:1}
.pkg__unit{
  font-size:.34em;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-quiet);
  font-variation-settings:'wdth' 100,'wght' 500;margin-left:.4em;
}
.pkg__plus{font-size:1.05rem;color:var(--burgundy-ink);font-variation-settings:'wdth' 100,'wght' 600}

.pkg__adspend{
  display:inline-flex;align-items:center;gap:.55em;
  margin-top:.75em;font-size:.82rem;color:var(--rose);
}
.pkg__adspend::before{content:"";width:5px;height:5px;flex:none;background:var(--rose);transform:rotate(45deg)}

.pkg__body{
  margin-top:clamp(22px,2.4vw,28px);padding-top:clamp(20px,2.2vw,26px);
  border-top:1px solid var(--line);
  display:grid;gap:clamp(18px,2vw,24px);
}
.pkg__group-h{
  font-family:var(--f-dis);font-variation-settings:'wdth' 100,'wght' 600;
  font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-52);
  margin-bottom:.85em;
}
.pkg__list{display:grid;gap:.55em}
.pkg__list li{position:relative;padding-left:1.4em;font-size:.86rem;line-height:1.55;color:var(--ink-70)}
.pkg__list li::before{
  content:"";position:absolute;left:0;top:.55em;width:5px;height:5px;
  background:var(--burgundy);transform:rotate(45deg);
}
.pkg--featured .pkg__list li::before{background:linear-gradient(135deg,var(--rose),var(--burgundy))}

.pkg__revs{
  margin-top:.9em;padding-top:.85em;
  border-top:1px dashed var(--line-2);
  font-size:.8rem;line-height:1.5;
}
.pkg__revs a{
  display:inline-flex;align-items:baseline;gap:.5em;
  color:var(--ink-52);
  transition:color .3s var(--ease);
}
.pkg__revs a::before{content:"";width:4px;height:4px;flex:none;background:var(--rose);transform:rotate(45deg);align-self:center}
.pkg__revs a:hover,.pkg__revs a:focus-visible{color:var(--rose)}
.pkg--featured .pkg__revs a{color:var(--ink-70)}

.pkg__note{
  margin-top:clamp(22px,2.4vw,28px);padding-top:clamp(18px,2vw,24px);
  border-top:1px solid var(--line);
  font-size:.88rem;line-height:1.62;color:var(--ink-52);
}
/* margin-top:auto pins every CTA to the card foot so the row stays even,
   whatever length each package's feature list is */
.pkg__cta{margin-top:auto;align-self:flex-start}
.pkg__note{margin-bottom:clamp(24px,2.6vw,32px)}

@media (max-width:940px), (pointer:coarse){
  .pkg__cta{min-height:44px}
  .pkg__cta.btn--sm{padding-top:1.05em;padding-bottom:1.05em}
}

/* ---------- 15. BRAND PHILOSOPHY ---------- */
.philos{
  position:relative;overflow:hidden;isolation:isolate;
  padding:clamp(96px,13vw,190px) 0;
  background:linear-gradient(165deg,#8E1425 0%,var(--oxblood) 38%,#4E0813 100%);
  text-align:center;
}
.philos__atmos{
  position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(60% 55% at 50% 8%,rgba(255,255,255,.14),transparent 60%),
    radial-gradient(80% 60% at 50% 100%,rgba(0,0,0,.38),transparent 62%);
}
.philos__in{display:flex;flex-direction:column;align-items:center}
.philos__star{
  width:clamp(30px,4vw,52px);height:auto;
  margin-bottom:clamp(28px,3.4vw,46px);
  filter:drop-shadow(0 8px 26px rgba(0,0,0,.45));
  animation:starSlow 30s linear infinite;
}
@keyframes starSlow{to{transform:rotate(360deg)}}
.philos__word{
  width:min(82vw,860px);height:auto;color:var(--ivory);
  filter:drop-shadow(0 22px 60px rgba(0,0,0,.42));
}
.philos__tag{
  margin-top:clamp(26px,3vw,40px);
  font-family:var(--f-dis);font-variation-settings:'wdth' 100,'wght' 500;
  font-size:clamp(.72rem,1.1vw,.88rem);letter-spacing:.3em;text-transform:uppercase;
  color:rgba(255,255,255,.9);
}
.philos__rule{
  width:clamp(60px,10vw,120px);height:1px;margin:clamp(34px,4vw,54px) 0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
}
.philos__copy{
  max-width:58ch;color:rgba(255,255,255,.86);
  font-size:clamp(1.02rem,1.35vw,1.25rem);line-height:1.68;
}
.philos__copy em{font-style:italic;color:#F6D9CF}
.philos__copy--sm{
  margin-top:1.4em;max-width:48ch;
  font-size:clamp(.9rem,1.1vw,1rem);color:rgba(255,255,255,.62);
}

/* ---------- 16. FINAL CTA ---------- */
.cta{
  position:relative;overflow:hidden;isolation:isolate;
  padding:clamp(96px,13vw,180px) 0;
  background:linear-gradient(180deg,#12080C,#0C1016 26%,var(--navy-2) 62%,#080B10);
  text-align:center;
}
.cta__glow{
  position:absolute;left:50%;top:0;translate:-50% 0;z-index:-1;
  width:min(150vw,1600px);aspect-ratio:2.2/1;
  background:radial-gradient(ellipse at 50% 0%,rgba(122,15,31,.46),rgba(122,15,31,.20) 34%,transparent 66%);
}
.cta__in{display:flex;flex-direction:column;align-items:center}
.cta .eyebrow{justify-content:center}
.cta__h2{
  font-family:var(--f-dis);font-variation-settings:'wdth' 110,'wght' 600;font-weight:600;
  font-size:clamp(2.2rem,6.2vw,5.2rem);line-height:1;letter-spacing:-.014em;font-kerning:normal;
}
.cta__lede{margin-top:clamp(20px,2.4vw,30px);color:var(--ink-52);max-width:40ch;font-size:clamp(1rem,1.3vw,1.2rem)}
.cta__row{display:flex;flex-direction:column;align-items:center;gap:clamp(20px,2.4vw,28px);margin-top:clamp(34px,4vw,50px)}
.cta__mail{
  position:relative;
  font-family:var(--f-dis);font-variation-settings:'wdth' 100,'wght' 500;
  font-size:.82rem;letter-spacing:.16em;color:var(--ink-52);
  padding-bottom:5px;
}
.cta__mail::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--rose);
  transform:scaleX(.35);transform-origin:left;transition:transform .55s var(--ease);
}
.cta__mail:hover{color:var(--rose)}
.cta__mail:hover::after{transform:scaleX(1)}

/* ---------- 17. FOOTER ---------- */
.ftr{
  background:var(--bg);
  border-top:1px solid var(--line-red-soft);
  padding:clamp(56px,7vw,96px) 0 clamp(26px,3vw,38px);
}
.ftr__top{
  display:grid;grid-template-columns:1.5fr minmax(0,1fr) minmax(0,1fr);
  gap:clamp(36px,5vw,72px);
  padding-bottom:clamp(44px,5vw,72px);
}
.lockup--ftr .lockup__word{width:148px}
.lockup--ftr .lockup__star{width:29px;height:29px}
.ftr__tag{
  margin-top:clamp(22px,2.4vw,30px);
  color:var(--ink-quiet);font-size:.92rem;line-height:1.7;max-width:30ch;
}
.ftr__h{
  font-family:var(--f-dis);font-variation-settings:'wdth' 100,'wght' 600;
  font-size:.64rem;letter-spacing:.28em;text-transform:uppercase;color:var(--burgundy-ink);
  margin-bottom:clamp(18px,2vw,26px);
}
.ftr__nav ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75em 1.5em}
.ftr__nav a{
  position:relative;font-size:.9rem;color:var(--ink-52);
  transition:color .3s var(--ease),padding-left .35s var(--ease);
}
.ftr__nav a:hover{color:var(--ivory)}
.ftr__mail{
  display:inline-block;
  font-family:var(--f-dis);font-variation-settings:'wdth' 100,'wght' 500;
  font-size:.95rem;letter-spacing:.04em;color:var(--ink-70);
  border-bottom:1px solid var(--line-red);padding-bottom:6px;
  transition:color .35s var(--ease),border-color .35s var(--ease);
}
.ftr__mail:hover{color:var(--rose);border-color:var(--rose)}

.ftr__bar{
  border-top:1px solid var(--line);
  padding-top:clamp(22px,2.4vw,30px);
  display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  font-size:.76rem;letter-spacing:.06em;color:var(--ink-quiet);
}
.ftr__meta{color:var(--ink-quiet)}
@media (max-width:860px){
  .ftr__top{grid-template-columns:1fr;gap:44px}
  .ftr__bar{flex-direction:column;align-items:flex-start;gap:8px}
}

/* ---------- 18. THANK YOU PAGE ---------- */
/* Built entirely from existing components (.wrap .eyebrow .h2 .steps .btn .ftr);
   only the confirmation banner and a 3-column timeline variant are new. */
.thanks{
  position:relative;overflow:hidden;isolation:isolate;
  display:flex;align-items:center;
  padding:clamp(128px,17vh,196px) 0 clamp(64px,8vw,110px);
  text-align:center;
}
.thanks__atmos{position:absolute;inset:0;z-index:-1;pointer-events:none}
.thanks__glow{
  position:absolute;left:50%;top:-14%;translate:-50% 0;
  width:min(132vw,1180px);aspect-ratio:1.55/1;
  background:radial-gradient(ellipse at 50% 42%,rgba(122,15,31,.52),rgba(122,15,31,.16) 42%,transparent 68%);
}
/* in normal flow above the eyebrow, so it can never collide with the copy
   the way an absolutely positioned mark would at short viewport heights */
.thanks__star{
  width:clamp(44px,5.6vw,74px);height:auto;
  margin-bottom:clamp(26px,3.2vw,44px);
  filter:drop-shadow(0 18px 46px rgba(181,36,54,.45));
  animation:starSlow 48s linear infinite;
}
.thanks__in{display:flex;flex-direction:column;align-items:center}
.thanks .eyebrow{justify-content:center}
.thanks__h1{
  font-family:var(--f-dis);font-variation-settings:'wdth' 110,'wght' 600;font-weight:600;
  font-size:clamp(min(15vw,2.9rem),8.6vw,6.6rem);
  line-height:.95;letter-spacing:-.028em;font-kerning:normal;
}
.thanks__h1 em{font-style:normal;color:var(--burgundy)}
.thanks__sub{
  margin-top:clamp(18px,2.2vw,28px);
  font-family:var(--f-dis);font-variation-settings:'wdth' 100,'wght' 500;
  font-size:clamp(1rem,1.5vw,1.3rem);letter-spacing:.015em;color:var(--ivory);
}
.thanks__copy{
  margin-top:1.15em;max-width:54ch;
  color:var(--ink-52);font-size:clamp(.98rem,1.2vw,1.08rem);line-height:1.62;
}
/* three-step variant of the process timeline */
.steps--3{grid-template-columns:repeat(3,minmax(0,1fr))}
/* step 2's title wraps to two lines; reserve the space so all three bodies align */
@media (min-width:901px){.steps--3 .step__title{min-height:3.3em}}
@media (max-width:900px){.steps--3{grid-template-columns:1fr}}

.thanks-cta{padding:0 0 clamp(80px,10vw,140px);text-align:center}
.thanks-cta__in{display:flex;flex-direction:column;align-items:center;gap:clamp(20px,2.4vw,28px)}
.thanks-cta .btn{min-height:44px}

/* slim footer for secondary pages */
.ftr--slim{padding-top:clamp(44px,5vw,64px)}
.ftr--slim .ftr__head{
  display:flex;flex-direction:column;align-items:center;gap:clamp(18px,2vw,24px);
  padding-bottom:clamp(34px,4vw,50px);text-align:center;
}
.ftr--slim .ftr__tag{margin-top:0;max-width:none}
.ftr--slim .ftr__bar{justify-content:center;text-align:center;gap:6px 20px}
.ftr__bar a{color:var(--ink-52);transition:color .3s var(--ease)}
.ftr__bar a:hover{color:var(--ivory)}

/* ---------- 19. ENQUIRY FORM ---------- */
.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;
}

.enq{
  display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:clamp(36px,5vw,86px);align-items:start;
}
@media (max-width:940px){.enq{grid-template-columns:minmax(0,1fr);gap:clamp(32px,5vw,48px)}}

.enq__intro{position:sticky;top:120px}
@media (max-width:940px){.enq__intro{position:static}}
.enq__lede{
  margin-top:clamp(20px,2.4vw,30px);
  color:var(--ink-52);max-width:40ch;
  font-size:clamp(1rem,1.2vw,1.1rem);line-height:1.62;
}

/* --- form shell --- */
.enq__form{
  background:linear-gradient(175deg,var(--card-2),var(--card) 62%);
  border:1px solid var(--line);border-radius:2px;
  padding:clamp(26px,3vw,44px);
  display:grid;gap:clamp(20px,2.2vw,26px);
}
.enq__row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,1.8vw,22px)}
@media (max-width:620px){.enq__row{grid-template-columns:minmax(0,1fr)}}

/* --- fields --- */
.field{display:flex;flex-direction:column;gap:.6em;min-width:0}
.field__label{
  display:flex;align-items:baseline;gap:.6em;
  font-family:var(--f-dis);font-variation-settings:'wdth' 100,'wght' 500;
  font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-70);
}
.field__req{color:var(--burgundy-ink)}
.field__opt{
  font-size:.58rem;letter-spacing:.16em;color:var(--ink-quiet);
  text-transform:uppercase;font-variation-settings:'wdth' 100,'wght' 400;
}
.field__input{
  width:100%;min-height:54px;                 /* comfortably over the 44px target */
  padding:.85em 1.05em;
  background:rgba(245,245,243,.025);
  border:1px solid var(--line);border-radius:2px;
  color:var(--ivory);
  font-family:var(--f-body);font-size:1rem;line-height:1.5;
  transition:border-color .35s var(--ease),background .35s var(--ease),box-shadow .35s var(--ease);
  -webkit-appearance:none;appearance:none;
}
.field__input::placeholder{color:var(--ink-quiet)}
.field__input:hover{border-color:var(--line-2)}
.field__input:focus{
  outline:none;
  border-color:var(--burgundy);
  background:rgba(245,245,243,.045);
  box-shadow:0 0 0 3px rgba(181,36,54,.22);
}
.field__area{min-height:132px;resize:vertical;padding-top:.95em}
/* below 16px iOS zooms the viewport on focus; keep inputs at 16px on small screens */
@media (max-width:620px){.field__input{font-size:16px}}

/* native select, restyled to match the inputs */
.field__selwrap{position:relative;display:block}
.field__select{padding-right:2.8em;cursor:pointer;color:var(--ivory)}
.field__select:invalid{color:var(--ink-quiet)}          /* while the prompt is still selected */
.field__select option{background:var(--navy-2);color:var(--ivory)}
.field__chev{
  position:absolute;right:1.1em;top:50%;translate:0 -50%;
  width:12px;height:8px;color:var(--burgundy);pointer-events:none;
}

/* --- accessible errors --- */
.field__err{
  display:flex;align-items:center;gap:.55em;
  font-size:.82rem;color:#E4677A;letter-spacing:.01em;
}
/* display:flex would otherwise beat the UA's [hidden]{display:none} and leak
   every error message onto the page before the visitor has touched the form */
.field__err[hidden]{display:none}
.field__err::before{content:"";width:5px;height:5px;background:currentColor;transform:rotate(45deg);flex:none}
.field__input[aria-invalid="true"]{border-color:#C0304A;background:rgba(181,36,54,.07)}
.field__input[aria-invalid="true"]:focus{box-shadow:0 0 0 3px rgba(181,36,54,.28)}

/* --- marketing consent --- */
.check{display:flex;align-items:flex-start;gap:.9em;padding-top:.2em}
.check__input{
  flex:none;appearance:none;-webkit-appearance:none;
  width:22px;height:22px;margin:0;
  /* the 22px box is the visual; the label extends the hit area well past 44px */
  border:1px solid var(--line-2);border-radius:2px;
  background:rgba(245,245,243,.025);cursor:pointer;
  transition:border-color .3s var(--ease),background .3s var(--ease),box-shadow .3s var(--ease);
  position:relative;top:2px;
}
.check__input:hover{border-color:var(--burgundy)}
.check__input:focus-visible{outline:none;border-color:var(--burgundy);box-shadow:0 0 0 3px rgba(181,36,54,.22)}
.check__input:checked{background:var(--burgundy);border-color:var(--burgundy)}
.check__input:checked::after{
  content:"";position:absolute;left:7px;top:3px;
  width:5px;height:10px;border:solid var(--ivory);border-width:0 2px 2px 0;transform:rotate(45deg);
}
.check__label{
  font-size:.88rem;line-height:1.6;color:var(--ink-52);cursor:pointer;
  min-height:44px;display:flex;align-items:center;   /* keeps the tap target tall */
}

.enq__privacy{font-size:.8rem;line-height:1.65;color:var(--ink-quiet);max-width:62ch}
.enq__privacy a{color:var(--ink-70);border-bottom:1px solid var(--line-red);padding-bottom:1px;transition:color .3s var(--ease),border-color .3s var(--ease)}
.enq__privacy a:hover{color:var(--rose);border-color:var(--rose)}

/* honeypot: off-screen rather than display:none, which some bots skip */
.enq__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* --- submit + status --- */
.enq__foot{
  display:flex;flex-wrap:wrap;align-items:center;gap:clamp(14px,2vw,22px);
  padding-top:clamp(6px,1vw,10px);
  border-top:1px solid var(--line);margin-top:clamp(4px,1vw,8px);padding-top:clamp(22px,2.4vw,30px);
}
.enq__submit{min-height:52px}
.enq__submit[disabled]{opacity:.6;cursor:progress}
.enq__status{font-size:.88rem;line-height:1.55;color:var(--ink-52);max-width:44ch}
.enq__status:empty{display:none}
.enq__status.is-ok{color:var(--rose)}
.enq__status.is-err{color:#E4677A}
.enq__status a{color:inherit;border-bottom:1px solid currentColor}

/* ---------- 20. LEGAL / POLICY PAGES ---------- */
/* Readability first: a constrained measure, generous leading, and body copy at
   --ink-70 (about 8.4:1 on the navy) rather than the fainter marketing greys. */
.legal-head{
  position:relative;overflow:hidden;isolation:isolate;
  padding:clamp(140px,20vh,210px) 0 clamp(46px,6vw,72px);
}
.legal-head__glow{
  position:absolute;left:50%;top:-18%;translate:-50% 0;z-index:-1;
  width:min(130vw,1180px);aspect-ratio:1.7/1;
  background:radial-gradient(ellipse at 50% 42%,rgba(122,15,31,.40),rgba(122,15,31,.12) 44%,transparent 70%);
}
.legal-head__h1{
  font-family:var(--f-dis);font-variation-settings:'wdth' 108,'wght' 600;font-weight:600;
  font-size:clamp(min(11vw,2.6rem),6.4vw,4.6rem);
  line-height:1;letter-spacing:-.028em;font-kerning:normal;
}
.legal-head__h1 em{font-style:normal;color:var(--burgundy)}
.legal-head__intro{
  margin-top:clamp(20px,2.4vw,30px);max-width:62ch;
  color:var(--ink-70);font-size:clamp(1.02rem,1.25vw,1.16rem);line-height:1.68;
}
.legal-head__meta{
  margin-top:clamp(24px,2.8vw,34px);
  padding-top:clamp(18px,2vw,24px);border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:.6em 1.6em;
  font-family:var(--f-dis);font-variation-settings:'wdth' 100,'wght' 500;
  font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-quiet);
}
.legal-head__meta b{color:var(--ink-70);font-variation-settings:'wdth' 100,'wght' 600}

.legal{
  display:grid;grid-template-columns:minmax(0,.3fr) minmax(0,.7fr);
  gap:clamp(32px,5vw,80px);align-items:start;
  padding-bottom:clamp(70px,9vw,120px);
}
@media (max-width:940px){.legal{grid-template-columns:minmax(0,1fr);gap:clamp(30px,4vw,42px)}}

/* ---- contents rail ----
   The 17 links stand ~811px tall, which is taller than most viewports once the
   86px fixed header is accounted for. The rail therefore sticks below the header,
   is capped to the remaining viewport height, and scrolls its own list. */
.legal{--toc-top:104px}

.legal__toc{
  position:sticky;
  top:var(--toc-top);
}
.legal__toc-h{
  flex:none;
  font-family:var(--f-dis);font-variation-settings:'wdth' 100,'wght' 600;
  font-size:.62rem;letter-spacing:.28em;text-transform:uppercase;color:var(--burgundy-ink);
  margin-bottom:clamp(14px,1.8vw,20px);
}
/* the <details> wrapper only behaves as a disclosure on narrow screens */
.legal__toc-sum{display:none}

.legal__toc ol{
  display:grid;gap:.1em;
  /* the list itself carries the cap: --toc-top clears the header, 28px keeps it
     off the viewport floor, 44px accounts for the "Contents" label above it */
  max-height:calc(100vh - var(--toc-top) - 28px - 44px);
  max-height:calc(100dvh - var(--toc-top) - 28px - 44px);
  overflow-y:auto;
  overscroll-behavior:contain;          /* don't chain the scroll to the page */
  padding-right:8px;                    /* keeps text clear of the scrollbar */
  scrollbar-width:thin;
  scrollbar-color:rgba(181,36,54,.5) transparent;
}
.legal__toc ol::-webkit-scrollbar{width:6px}
.legal__toc ol::-webkit-scrollbar-track{background:transparent}
.legal__toc ol::-webkit-scrollbar-thumb{background:rgba(181,36,54,.38);border-radius:3px}
.legal__toc ol:hover::-webkit-scrollbar-thumb{background:rgba(181,36,54,.65)}

.legal__toc a{
  display:flex;align-items:center;min-height:44px;   /* comfortable tap target */
  padding:.45em 0 .45em .9em;margin-left:-.9em;
  font-size:.86rem;line-height:1.45;color:var(--ink-52);
  border-left:1px solid transparent;
  transition:color .3s var(--ease),border-color .3s var(--ease);
}
.legal__toc a:hover,.legal__toc a:focus-visible{color:var(--ivory);border-left-color:var(--burgundy)}
/* current section, set by the scroll-spy in main.js */
.legal__toc a[aria-current="location"]{color:var(--ivory);border-left-color:var(--burgundy)}

/* ---- narrow screens: a compact collapsible panel instead of a tall rail ---- */
@media (max-width:940px){
  .legal__toc{
    position:static;
    border:1px solid var(--line);border-radius:2px;
  }
  .legal__toc-h{display:none}                 /* the summary carries the label here */
  .legal__toc-sum{
    display:flex;align-items:center;justify-content:space-between;gap:1em;
    min-height:52px;padding:0 clamp(16px,3vw,22px);
    cursor:pointer;list-style:none;
    font-family:var(--f-dis);font-variation-settings:'wdth' 100,'wght' 600;
    font-size:.66rem;letter-spacing:.26em;text-transform:uppercase;color:var(--burgundy-ink);
    transition:color .3s var(--ease),background .3s var(--ease);
  }
  .legal__toc-sum::-webkit-details-marker{display:none}
  .legal__toc-sum::marker{content:""}
  .legal__toc-sum:hover{background:rgba(181,36,54,.06)}
  .legal__toc-sum:focus-visible{outline:2px solid var(--rose);outline-offset:-2px}
  .legal__toc-chev{
    width:12px;height:8px;flex:none;color:var(--burgundy);
    transition:transform .35s var(--ease);
  }
  .legal__toc-d[open] .legal__toc-chev{transform:rotate(180deg)}
  .legal__toc-d[open] .legal__toc-sum{border-bottom:1px solid var(--line)}
  .legal__toc ol{
    max-height:min(56vh,430px);
    padding:clamp(8px,2vw,12px) clamp(16px,3vw,22px);
  }
  .legal__toc a{margin-left:0;padding-left:.9em}
}

/* body */
.legal__body{max-width:70ch;min-width:0}
/* stacks with html{scroll-padding-top:96px} for ~114px total, which clears the
   86px fixed header by ~28px without leaving a large gap above the heading */
.legal__sec{padding-top:clamp(40px,4.6vw,62px);scroll-margin-top:18px}
.legal__sec:first-child{padding-top:0}
.legal__sec + .legal__sec{border-top:1px solid var(--line);margin-top:clamp(40px,4.6vw,62px);padding-top:clamp(40px,4.6vw,62px)}
.legal__sec h2{
  display:flex;gap:.7em;align-items:baseline;
  font-family:var(--f-dis);font-variation-settings:'wdth' 104,'wght' 600;font-weight:600;
  font-size:clamp(1.3rem,2vw,1.72rem);line-height:1.15;letter-spacing:-.018em;
  margin-bottom:clamp(16px,1.8vw,24px);
}
.legal__num{
  flex:none;color:var(--burgundy-ink);
  font-size:.62em;letter-spacing:.1em;font-variation-settings:'wdth' 100,'wght' 600;
  position:relative;top:-.15em;
}
.legal__sec h3{
  font-family:var(--f-dis);font-variation-settings:'wdth' 100,'wght' 600;font-weight:600;
  font-size:1rem;letter-spacing:.01em;color:var(--ivory);
  margin:clamp(24px,2.6vw,32px) 0 .55em;
}
.legal__sec p{
  color:var(--ink-70);font-size:1rem;line-height:1.78;
  margin-bottom:1.05em;
}
.legal__sec p:last-child{margin-bottom:0}
.legal__sec strong{color:var(--ivory);font-weight:600}
.legal__sec ul{display:grid;gap:.6em;margin:0 0 1.25em}
.legal__sec li{
  position:relative;padding-left:1.5em;
  color:var(--ink-70);font-size:1rem;line-height:1.7;
}
.legal__sec li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:5px;height:5px;background:var(--burgundy);transform:rotate(45deg);
}
.legal__sec a{
  color:var(--ivory);
  border-bottom:1px solid var(--line-red);
  padding-bottom:1px;
  transition:color .3s var(--ease),border-color .3s var(--ease);
}
.legal__sec a:hover,.legal__sec a:focus-visible{color:var(--rose);border-bottom-color:var(--rose)}

/* pulled-out statement for the key declarations */
.legal__note{
  border:1px solid var(--line-red);border-left-width:2px;border-radius:2px;
  background:rgba(181,36,54,.06);
  padding:clamp(18px,2.2vw,26px) clamp(18px,2.2vw,28px);
  margin:clamp(6px,1vw,10px) 0 1.25em;
}
.legal__note p{color:var(--ivory);margin-bottom:0;font-size:.98rem;line-height:1.7}

/* ---------- 21. SERVICE PAGES ---------- */
/* Built from the existing system: .why__grid, .steps, .plan, .cta and .btn are all
   reused as-is. Only the hero, the 4-up grid modifier, the pricing aside, the
   cross-sell band and the FAQ accordion are new. */

.svc-hero{
  position:relative;overflow:hidden;isolation:isolate;
  padding:clamp(140px,20vh,215px) 0 clamp(56px,7vw,96px);
}
.svc-hero__atmos{position:absolute;inset:0;z-index:-1;pointer-events:none}
.svc-hero__glow{
  position:absolute;left:50%;top:-24%;translate:-50% 0;
  width:min(126vw,1160px);aspect-ratio:1.5/1;
  background:radial-gradient(ellipse at 50% 44%,rgba(122,15,31,.46),rgba(122,15,31,.14) 44%,transparent 70%);
}
/* offset and clipped at the edge, so the page reads as its own thing rather than
   a second copy of the homepage hero */
.svc-hero__star{
  position:absolute;right:-6%;top:44%;translate:0 -50%;
  width:clamp(150px,22vw,330px);height:auto;opacity:.16;
  animation:starSlow 70s linear infinite;
}
.svc-hero__h1{
  font-family:var(--f-dis);font-variation-settings:'wdth' 110,'wght' 600;font-weight:600;
  font-size:clamp(min(10.4vw,2.9rem),7vw,5.6rem);
  line-height:.98;letter-spacing:-.028em;font-kerning:normal;
  max-width:18ch;
}
.svc-hero__h1 em{font-style:normal;color:var(--burgundy)}
.svc-hero__lede{
  margin-top:clamp(20px,2.4vw,30px);max-width:52ch;
  color:var(--ink-70);font-size:clamp(1.02rem,1.3vw,1.22rem);line-height:1.6;
}
.svc-hero__cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(30px,3.4vw,44px)}
@media (max-width:700px){.svc-hero__star{right:-22%;opacity:.1}}

/* 4-up variant of the existing hairline grid, for longer feature sets */
.why__grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.why__grid--4 .why__item{padding:clamp(26px,2.6vw,40px) clamp(20px,2vw,30px) clamp(30px,3vw,44px)}
.why__grid--4 .why__item h3{font-size:clamp(1.05rem,1.35vw,1.2rem);line-height:1.25}
.why__grid--4 .why__item p{font-size:.9rem}
@media (max-width:1100px){.why__grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.why__grid--4{grid-template-columns:minmax(0,1fr)}}

.steps__note{
  margin-top:clamp(34px,4vw,52px);padding-top:clamp(20px,2.2vw,26px);
  border-top:1px solid var(--line);
  font-size:.88rem;color:var(--ink-quiet);max-width:62ch;
}

/* pricing: the base package beside what is deliberately not in it */
.solo{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(18px,2vw,26px);align-items:start}
@media (max-width:860px){.solo{grid-template-columns:minmax(0,1fr)}}
.solo__aside{
  border:1px solid var(--line);border-radius:2px;
  padding:clamp(26px,2.6vw,38px) clamp(22px,2.2vw,32px);
}
.solo__h{
  font-family:var(--f-dis);font-variation-settings:'wdth' 100,'wght' 600;
  font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--rose);
  margin-bottom:clamp(18px,2vw,24px);
}
.solo__list{display:grid;gap:.62em}
.solo__list li{position:relative;padding-left:1.5em;font-size:.92rem;line-height:1.6;color:var(--ink-70)}
.solo__list li::before{content:"";position:absolute;left:0;top:.6em;width:5px;height:5px;background:var(--rose);transform:rotate(45deg)}
.solo__note{
  margin-top:clamp(22px,2.4vw,30px);padding-top:clamp(18px,2vw,24px);
  border-top:1px solid var(--line);font-size:.86rem;line-height:1.6;color:var(--ink-quiet);
}

/* revisions policy — sits under the pricing cards, same hairline language */
.revs{
  margin-top:clamp(18px,2vw,26px);
  border:1px solid var(--line);border-radius:2px;
  padding:clamp(26px,2.8vw,40px) clamp(22px,2.4vw,36px);
}
.revs__top{max-width:74ch;margin-bottom:clamp(26px,3vw,38px)}
.revs__eyebrow{
  font-family:var(--f-dis);font-variation-settings:'wdth' 100,'wght' 600;
  font-size:.62rem;letter-spacing:.26em;text-transform:uppercase;color:var(--burgundy-ink);
  margin-bottom:clamp(12px,1.4vw,16px);
}
.revs__h{
  font-family:var(--f-dis);font-variation-settings:'wdth' 106,'wght' 600;font-weight:600;
  font-size:clamp(1.25rem,2vw,1.65rem);line-height:1.12;letter-spacing:-.018em;
}
.revs__lede{margin-top:.85em;color:var(--ink-70);font-size:.98rem;line-height:1.7}
.revs__lede strong{color:var(--ivory);font-weight:600}

.revs__grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px;background:var(--line);border:1px solid var(--line);
}
@media (max-width:860px){.revs__grid{grid-template-columns:minmax(0,1fr)}}
.revs__item{background:var(--card);padding:clamp(22px,2.2vw,30px) clamp(18px,2vw,26px)}
.revs__k{
  font-family:var(--f-dis);font-variation-settings:'wdth' 100,'wght' 500;
  font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-quiet);
  margin-bottom:.9em;
}
.revs__v{
  font-family:var(--f-dis);font-variation-settings:'wdth' 106,'wght' 600;
  font-size:clamp(1.35rem,1.9vw,1.6rem);line-height:1;letter-spacing:-.02em;color:var(--ivory);
  display:flex;align-items:baseline;
}
.revs__unit{font-size:.5em;letter-spacing:.1em;color:var(--ink-quiet);font-variation-settings:'wdth' 100,'wght' 500;margin-left:.2em}
.revs__d{margin-top:1em;font-size:.88rem;line-height:1.65;color:var(--ink-52)}
.revs__d strong{color:var(--ivory);font-weight:600}
/* the free-of-charge column is the reassuring one, so it carries the rose accent */
.revs__item--free .revs__k{color:var(--rose)}
.revs__item--free .revs__v{color:var(--rose)}

.revs__note{
  margin-top:clamp(22px,2.4vw,30px);padding-top:clamp(18px,2vw,24px);
  border-top:1px solid var(--line);
  font-size:.85rem;line-height:1.65;color:var(--ink-quiet);max-width:88ch;
}

/* cross-sell band */
.xsell{padding:clamp(64px,8vw,110px) 0;background:linear-gradient(160deg,#141922 0%,#0D1119 58%,#120A0F 100%);position:relative;overflow:hidden}
.xsell::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(70% 90% at 82% 10%,rgba(122,15,31,.34),transparent 62%)}
.xsell__in{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(28px,4vw,64px);align-items:center}
@media (max-width:860px){.xsell__in{grid-template-columns:minmax(0,1fr)}}
.xsell__h{
  font-family:var(--f-dis);font-variation-settings:'wdth' 106,'wght' 600;font-weight:600;
  font-size:clamp(1.6rem,3vw,2.5rem);line-height:1.06;letter-spacing:-.022em;
}
.xsell__lede{margin-top:1em;color:var(--ink-70);max-width:54ch;font-size:1rem;line-height:1.68}
.xsell__lede strong{color:var(--ivory);font-weight:600}
.xsell__offer{border:1px solid var(--line-red);border-radius:2px;padding:clamp(24px,2.6vw,34px);background:rgba(10,13,18,.5)}
.xsell__what{
  font-family:var(--f-dis);font-variation-settings:'wdth' 100,'wght' 600;
  font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--burgundy-ink);margin-bottom:1em;
}
.xsell__price{
  display:flex;align-items:baseline;flex-wrap:wrap;gap:.15em .5em;
  font-family:var(--f-dis);font-variation-settings:'wdth' 108,'wght' 600;
  color:var(--ivory);letter-spacing:-.025em;margin-bottom:clamp(22px,2.4vw,28px);
}
.xsell__cta{width:fit-content}

/* FAQ accordion */
.faq{border-top:1px solid var(--line)}
.faq__item{border-bottom:1px solid var(--line)}
.faq__q{
  display:flex;align-items:center;justify-content:space-between;gap:1.5em;
  min-height:64px;padding:clamp(18px,2vw,24px) 0;
  cursor:pointer;list-style:none;
  font-family:var(--f-dis);font-variation-settings:'wdth' 104,'wght' 600;font-weight:600;
  font-size:clamp(1rem,1.35vw,1.16rem);letter-spacing:-.01em;color:var(--ivory);
  transition:color .3s var(--ease);
}
.faq__q::-webkit-details-marker{display:none}
.faq__q::marker{content:""}
.faq__q:hover{color:var(--rose)}
.faq__q:focus-visible{outline:2px solid var(--rose);outline-offset:4px}
.faq__chev{width:12px;height:8px;flex:none;color:var(--burgundy);transition:transform .35s var(--ease)}
.faq__item[open] .faq__chev{transform:rotate(180deg)}
.faq__a{padding:0 0 clamp(22px,2.4vw,30px);max-width:74ch}
.faq__a p{color:var(--ink-70);font-size:.98rem;line-height:1.75}
.faq__a a{color:var(--ivory);border-bottom:1px solid var(--line-red);transition:color .3s var(--ease),border-color .3s var(--ease)}
.faq__a a:hover{color:var(--rose);border-color:var(--rose)}

@media (max-width:940px), (pointer:coarse){
  .svc-hero__cta .btn{min-height:44px}
  .xsell__cta{min-height:44px}
  .solo .plan__cta{min-height:44px}
}

/* ---- Meta Ads page ----
   Same system, different temperature: the hero motif is campaign geometry
   (reach narrowing to conversion) rather than the Web Design star field. */
.mhero{
  position:relative;overflow:hidden;isolation:isolate;
  padding:clamp(140px,20vh,215px) 0 clamp(56px,7vw,96px);
}
.mhero__atmos{position:absolute;inset:0;z-index:-1;pointer-events:none;color:var(--burgundy)}
.mhero__glow{
  position:absolute;left:58%;top:-30%;translate:-50% 0;
  width:min(120vw,1080px);aspect-ratio:1.35/1;
  background:radial-gradient(ellipse at 50% 46%,rgba(122,15,31,.42),rgba(122,15,31,.12) 46%,transparent 70%);
}
.mhero__flow{
  position:absolute;right:2%;top:50%;translate:0 -50%;
  width:clamp(300px,40vw,560px);height:auto;opacity:.55;
}
.mhero__pulse{animation:mpulse 4.5s var(--ease-2) infinite}
@keyframes mpulse{0%,100%{opacity:.25}50%{opacity:.9}}
.mhero__star{
  position:absolute;right:calc(2% + clamp(300px,40vw,560px)/2 - 9px);top:50%;
  translate:0 -50%;width:18px;height:auto;opacity:.9;
}
.mhero__h1{
  font-family:var(--f-dis);font-variation-settings:'wdth' 110,'wght' 600;font-weight:600;
  font-size:clamp(min(10.4vw,2.9rem),7vw,5.6rem);
  line-height:.98;letter-spacing:-.028em;font-kerning:normal;max-width:16ch;
}
.mhero__h1 em{font-style:normal;color:var(--burgundy)}
.mhero__lede{
  margin-top:clamp(20px,2.4vw,30px);max-width:50ch;
  color:var(--ink-70);font-size:clamp(1.02rem,1.3vw,1.22rem);line-height:1.6;
}
.mhero__cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(30px,3.4vw,44px)}
@media (max-width:900px){
  .mhero__flow{right:-14%;opacity:.3}
  .mhero__star{display:none}
}

/* 3-up variant of the hairline grid */
.why__grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.why__grid--3 .why__item{padding:clamp(26px,2.6vw,40px) clamp(20px,2vw,30px) clamp(30px,3vw,44px)}
.why__grid--3 .why__item h3{font-size:clamp(1.05rem,1.4vw,1.25rem);line-height:1.25}
.why__grid--3 .why__item p{font-size:.9rem}
@media (max-width:900px){.why__grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.why__grid--3{grid-template-columns:minmax(0,1fr)}}

/* honest qualifier under a grid */
.fitnote{
  margin-top:clamp(28px,3vw,40px);padding:clamp(18px,2vw,24px) clamp(18px,2vw,26px);
  border:1px solid var(--line-red);border-left-width:2px;border-radius:2px;
  background:rgba(181,36,54,.05);
  font-size:.92rem;line-height:1.7;color:var(--ink-70);max-width:88ch;
}
.fitnote strong{color:var(--ivory);font-weight:600}

/* management fee vs ad spend */
.fee{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);margin-bottom:clamp(20px,2.2vw,26px)}
.fee__item{background:var(--card);padding:clamp(18px,2vw,24px)}
.fee__k{
  font-family:var(--f-dis);font-variation-settings:'wdth' 100,'wght' 500;
  font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-quiet);margin-bottom:.7em;
}
.fee__v{
  font-family:var(--f-dis);font-variation-settings:'wdth' 106,'wght' 600;
  font-size:clamp(1.3rem,1.8vw,1.55rem);line-height:1;letter-spacing:-.02em;color:var(--ivory);
  display:flex;align-items:baseline;
}
.fee__u{font-size:.46em;letter-spacing:.1em;color:var(--ink-quiet);font-variation-settings:'wdth' 100,'wght' 500;margin-left:.25em}
.fee__d{margin-top:.85em;font-size:.86rem;line-height:1.6;color:var(--ink-52)}
.fee__item--spend .fee__k,.fee__item--spend .fee__v{color:var(--rose)}

/* you provide / we provide */
.duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,1.8vw,22px)}
@media (max-width:800px){.duo{grid-template-columns:minmax(0,1fr)}}
.duo__col{
  background:linear-gradient(175deg,var(--card-2),var(--card) 62%);
  border:1px solid var(--line);border-radius:2px;
  padding:clamp(26px,2.6vw,38px) clamp(22px,2.2vw,32px);
}
.duo__col--zelos{border-color:rgba(181,36,54,.3)}
.duo__h{
  font-family:var(--f-dis);font-variation-settings:'wdth' 100,'wght' 600;
  font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--burgundy-ink);
  margin-bottom:clamp(18px,2vw,24px);
}
.duo__col--zelos .duo__h{color:var(--rose)}
.duo__list{display:grid;gap:.62em}
.duo__list li{position:relative;padding-left:1.5em;font-size:.93rem;line-height:1.6;color:var(--ink-70)}
.duo__list li::before{content:"";position:absolute;left:0;top:.6em;width:5px;height:5px;background:var(--burgundy);transform:rotate(45deg)}
.duo__col--zelos .duo__list li::before{background:var(--rose)}
.duo__note{
  margin-top:clamp(20px,2.2vw,28px);padding-top:clamp(16px,1.8vw,22px);
  border-top:1px solid var(--line);font-size:.86rem;line-height:1.65;color:var(--ink-quiet);
}

/* secure account access — reassurance panel under "what we need from you" */
.access{
  margin-top:clamp(18px,2vw,26px);
  display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
  gap:1px;background:var(--line);border:1px solid var(--line-red);border-radius:2px;
  overflow:hidden;
}
@media (max-width:860px){.access{grid-template-columns:minmax(0,1fr)}}
.access__main,.access__aside{background:var(--card);padding:clamp(24px,2.6vw,36px) clamp(22px,2.2vw,32px)}
.access__aside{background:rgba(181,36,54,.05)}
.access__k{
  font-family:var(--f-dis);font-variation-settings:'wdth' 100,'wght' 600;
  font-size:.62rem;letter-spacing:.26em;text-transform:uppercase;color:var(--rose);
  margin-bottom:clamp(12px,1.4vw,16px);
}
.access__k--alt{color:var(--burgundy-ink)}
.access__h{
  font-family:var(--f-dis);font-variation-settings:'wdth' 106,'wght' 600;font-weight:600;
  font-size:clamp(1.2rem,1.9vw,1.5rem);line-height:1.14;letter-spacing:-.018em;
}
.access__d{margin-top:.9em;color:var(--ink-70);font-size:.96rem;line-height:1.72;max-width:60ch}
.access__points{
  display:grid;gap:.6em;
  margin-top:clamp(20px,2.2vw,26px);padding-top:clamp(18px,2vw,22px);
  border-top:1px solid var(--line);
}
.access__points li{position:relative;padding-left:1.5em;font-size:.9rem;line-height:1.6;color:var(--ink-52)}
.access__points li::before{content:"";position:absolute;left:0;top:.58em;width:5px;height:5px;background:var(--rose);transform:rotate(45deg)}
.access__list{display:grid;gap:.55em}
.access__list li{position:relative;padding-left:1.4em;font-size:.9rem;line-height:1.55;color:var(--ink-70)}
.access__list li::before{content:"";position:absolute;left:0;top:.55em;width:5px;height:5px;background:var(--burgundy);transform:rotate(45deg)}
.access__note{
  margin-top:clamp(18px,2vw,24px);padding-top:clamp(14px,1.6vw,18px);
  border-top:1px solid var(--line);font-size:.84rem;line-height:1.62;color:var(--ink-quiet);
}

/* tracking */
.track{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(28px,4vw,64px);align-items:start}
@media (max-width:900px){.track{grid-template-columns:minmax(0,1fr)}}
.track__h{
  font-family:var(--f-dis);font-variation-settings:'wdth' 106,'wght' 600;font-weight:600;
  font-size:clamp(1.5rem,2.6vw,2.2rem);line-height:1.1;letter-spacing:-.022em;
}
.track__lede{margin-top:1em;color:var(--ink-70);font-size:1rem;line-height:1.7;max-width:48ch}
.track__panel{border:1px solid var(--line);border-radius:2px;padding:clamp(24px,2.6vw,34px)}
.track__k{
  font-family:var(--f-dis);font-variation-settings:'wdth' 100,'wght' 600;
  font-size:.64rem;letter-spacing:.22em;text-transform:uppercase;color:var(--rose);margin-bottom:1em;
}
.track__d{font-size:.92rem;line-height:1.7;color:var(--ink-52)}
.track__d--sm{margin-top:1.1em;padding-top:1.1em;border-top:1px solid var(--line);font-size:.85rem;color:var(--ink-quiet)}
.track__d a{color:var(--ink-70);border-bottom:1px solid var(--line-red);transition:color .3s var(--ease),border-color .3s var(--ease)}
.track__d a:hover{color:var(--rose);border-color:var(--rose)}

/* secondary cross-sell strip */
.sect--tight{padding-top:clamp(46px,5vw,70px);padding-bottom:clamp(46px,5vw,70px)}
.xsell2{
  display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:clamp(20px,3vw,44px);align-items:center;
  border:1px solid var(--line);border-radius:2px;padding:clamp(22px,2.4vw,32px) clamp(22px,2.4vw,34px);
}
@media (max-width:900px){.xsell2{grid-template-columns:minmax(0,1fr);gap:18px}}
.xsell2__h{
  font-family:var(--f-dis);font-variation-settings:'wdth' 104,'wght' 600;font-weight:600;
  font-size:clamp(1.1rem,1.6vw,1.3rem);letter-spacing:-.015em;color:var(--ivory);
}
.xsell2__d{margin-top:.45em;font-size:.92rem;color:var(--ink-52)}
.xsell2__price{
  display:flex;align-items:baseline;flex-wrap:wrap;gap:.15em .45em;
  font-family:var(--f-dis);font-variation-settings:'wdth' 106,'wght' 600;
  color:var(--ivory);letter-spacing:-.02em;
}
.xsell2__price .pkg__amt{font-size:clamp(1.3rem,1.8vw,1.6rem)}
.xsell2__ads{flex-basis:100%;font-family:var(--f-body);font-size:.76rem;letter-spacing:0;color:var(--rose);font-variation-settings:normal}
.xsell2__cta{
  display:inline-flex;align-items:center;gap:.6em;white-space:nowrap;
  font-family:var(--f-dis);font-variation-settings:'wdth' 100,'wght' 600;
  font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-70);
  transition:color .35s var(--ease);
}
.xsell2__cta span{transition:transform .45s var(--ease);display:inline-block}
.xsell2__cta:hover{color:var(--rose)}
.xsell2__cta:hover span{transform:translateX(5px)}

@media (max-width:940px), (pointer:coarse){
  .mhero__cta .btn{min-height:44px}
  .xsell2__cta{min-height:44px}
}

/* ---- SEO page ----
   Discovery rather than construction: separate queries converging on one
   destination, with the Zelos mark as the point they arrive at. */
.shero{
  position:relative;overflow:hidden;isolation:isolate;
  padding:clamp(140px,20vh,215px) 0 clamp(56px,7vw,96px);
}
.shero__atmos{position:absolute;inset:0;z-index:-1;pointer-events:none;color:var(--burgundy)}
.shero__glow{
  position:absolute;left:66%;top:-26%;translate:-50% 0;
  width:min(118vw,1040px);aspect-ratio:1.4/1;
  background:radial-gradient(ellipse at 50% 48%,rgba(122,15,31,.40),rgba(122,15,31,.11) 46%,transparent 70%);
}
.shero__map{
  position:absolute;right:1%;top:50%;translate:0 -50%;
  width:clamp(320px,42vw,580px);height:auto;opacity:.6;
}
.shero__ping{transform-origin:430px 190px;animation:sping 5s var(--ease-2) infinite}
@keyframes sping{0%,100%{transform:scale(.72);opacity:.16}50%{transform:scale(1.12);opacity:.5}}
.shero__star{
  position:absolute;right:calc(1% + clamp(320px,42vw,580px)*0.232 - 8px);
  top:calc(50% + clamp(320px,42vw,580px)*0.0);
  translate:0 -50%;width:16px;height:auto;opacity:.95;
}
.shero__h1{
  font-family:var(--f-dis);font-variation-settings:'wdth' 110,'wght' 600;font-weight:600;
  font-size:clamp(min(10.4vw,2.9rem),7vw,5.6rem);
  line-height:.98;letter-spacing:-.028em;font-kerning:normal;max-width:15ch;
}
.shero__h1 em{font-style:normal;color:var(--burgundy)}
.shero__lede{
  margin-top:clamp(20px,2.4vw,30px);max-width:50ch;
  color:var(--ink-70);font-size:clamp(1.02rem,1.3vw,1.22rem);line-height:1.6;
}
.shero__cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(30px,3.4vw,44px)}
@media (max-width:900px){
  .shero__map{right:-18%;opacity:.28}
  .shero__star{display:none}
}

/* local SEO gets a faint warm ground so it reads as its own chapter */
.local{position:relative;isolation:isolate}
.local__atmos{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(70% 60% at 78% 12%,rgba(122,15,31,.22),transparent 62%);
}

.scope__d{color:var(--ink-70);font-size:.94rem;line-height:1.7;margin-bottom:1.1em}
.scope__d strong{color:var(--ivory);font-weight:600}

@media (max-width:940px), (pointer:coarse){
  .shero__cta .btn{min-height:44px}
}

/* ---- Packages page ----
   Motif is progression: three ascending steps rather than a field or a funnel. */
.phero{
  position:relative;overflow:hidden;isolation:isolate;
  padding:clamp(140px,20vh,215px) 0 clamp(56px,7vw,96px);
}
.phero__atmos{position:absolute;inset:0;z-index:-1;pointer-events:none;color:var(--burgundy)}
.phero__glow{
  position:absolute;left:62%;top:-28%;translate:-50% 0;
  width:min(120vw,1080px);aspect-ratio:1.4/1;
  background:radial-gradient(ellipse at 50% 46%,rgba(122,15,31,.42),rgba(122,15,31,.12) 46%,transparent 70%);
}
.phero__steps{
  position:absolute;right:2%;bottom:12%;
  width:clamp(290px,38vw,520px);height:auto;opacity:.55;
}
.phero__star{
  position:absolute;right:calc(2% + clamp(290px,38vw,520px)*0.055);
  bottom:calc(12% + clamp(290px,38vw,520px)*0.575);
  width:17px;height:auto;opacity:.95;
}
.phero__h1{
  font-family:var(--f-dis);font-variation-settings:'wdth' 110,'wght' 600;font-weight:600;
  font-size:clamp(min(9.4vw,2.7rem),6.2vw,5rem);
  line-height:1;letter-spacing:-.028em;font-kerning:normal;max-width:17ch;
}
.phero__h1 em{font-style:normal;color:var(--burgundy)}
.phero__lede{
  margin-top:clamp(20px,2.4vw,30px);max-width:54ch;
  color:var(--ink-70);font-size:clamp(1.02rem,1.3vw,1.22rem);line-height:1.6;
}
.phero__cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(30px,3.4vw,44px)}
@media (max-width:900px){
  .phero__steps{right:-16%;opacity:.26}
  .phero__star{display:none}
}

/* package cards need to clear the fixed header when deep-linked */
.pkg[id]{scroll-margin-top:112px}

/* ---- comparison table ---- */
.cmp{margin-top:clamp(40px,5vw,64px)}
.cmp__h{
  font-family:var(--f-dis);font-variation-settings:'wdth' 100,'wght' 600;
  font-size:.64rem;letter-spacing:.26em;text-transform:uppercase;color:var(--burgundy-ink);
  margin-bottom:clamp(16px,2vw,22px);
}
/* the table keeps its semantics and scrolls sideways on narrow screens rather
   than being crushed into unreadable columns */
.cmp__scroll{
  overflow-x:auto;overscroll-behavior-x:contain;
  border:1px solid var(--line);border-radius:2px;
  scrollbar-width:thin;scrollbar-color:rgba(181,36,54,.5) transparent;
}
.cmp__scroll::-webkit-scrollbar{height:6px}
.cmp__scroll::-webkit-scrollbar-track{background:transparent}
.cmp__scroll::-webkit-scrollbar-thumb{background:rgba(181,36,54,.4);border-radius:3px}
.cmp__scroll:focus-visible{outline:2px solid var(--rose);outline-offset:2px}
.cmp__table{width:100%;min-width:640px;border-collapse:collapse;background:var(--card)}
.cmp__table th,.cmp__table td{
  padding:clamp(13px,1.5vw,18px) clamp(14px,1.6vw,22px);
  text-align:left;font-size:.9rem;line-height:1.45;
  border-bottom:1px solid var(--line);
}
.cmp__table thead th{
  font-family:var(--f-dis);font-variation-settings:'wdth' 100,'wght' 600;
  font-size:.64rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-52);
  background:rgba(245,245,243,.03);white-space:nowrap;
}
.cmp__table thead th:last-child{color:var(--rose)}
.cmp__table tbody th{
  font-weight:500;color:var(--ivory);width:34%;
  border-right:1px solid var(--line);
}
.cmp__table tbody td{color:var(--ink-70)}
.cmp__table tbody tr:last-child th,.cmp__table tbody tr:last-child td{border-bottom:0}
.cmp__table tbody tr:hover td,.cmp__table tbody tr:hover th{background:rgba(245,245,243,.02)}
.cmp__table td:last-child{background:rgba(181,36,54,.05)}
.cmp__y{color:var(--rose);font-size:1.05rem;line-height:1}
.cmp__n{color:var(--ink-quiet)}
.cmp__hint{
  margin-top:.9em;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-quiet);font-family:var(--f-dis);
}
@media (min-width:761px){.cmp__hint{display:none}}

/* ---- decision picker ---- */
.pick{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,1.8vw,22px)}
@media (max-width:900px){.pick{grid-template-columns:minmax(0,1fr)}}
.pick__card{
  display:flex;flex-direction:column;min-height:44px;
  background:linear-gradient(175deg,var(--card-2),var(--card) 62%);
  border:1px solid var(--line);border-radius:2px;
  padding:clamp(26px,2.6vw,38px) clamp(22px,2.2vw,30px);
  transition:border-color .5s var(--ease),transform .5s var(--ease);
}
.pick__card:hover{border-color:rgba(181,36,54,.34);transform:translateY(-3px)}
.pick__card--full{border-color:rgba(181,36,54,.3)}
.pick__q{
  font-size:.92rem;line-height:1.5;color:var(--ink-52);
  padding-bottom:clamp(16px,1.8vw,22px);margin-bottom:clamp(16px,1.8vw,22px);
  border-bottom:1px solid var(--line);
}
.pick__a{
  font-family:var(--f-dis);font-variation-settings:'wdth' 106,'wght' 600;font-weight:600;
  font-size:clamp(1.25rem,1.9vw,1.55rem);line-height:1.08;letter-spacing:-.02em;color:var(--ivory);
}
.pick__card--full .pick__a{color:var(--rose)}
.pick__why{margin-top:.7em;font-size:.9rem;line-height:1.6;color:var(--ink-52)}
.pick__go{
  margin-top:auto;padding-top:clamp(20px,2.2vw,28px);
  font-family:var(--f-dis);font-variation-settings:'wdth' 100,'wght' 600;
  font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-quiet);
  transition:color .35s var(--ease);
}
.pick__card:hover .pick__go{color:var(--rose)}

@media (max-width:940px), (pointer:coarse){
  .phero__cta .btn{min-height:44px}
}

/* ---- About page ----
   Editorial rather than modular: typography carries the page, the star is used
   at scale, and the Greek influence stays geometric rather than literal. */
.ahero{
  position:relative;overflow:hidden;isolation:isolate;
  padding:clamp(150px,22vh,240px) 0 clamp(60px,8vw,110px);
}
.ahero__atmos{position:absolute;inset:0;z-index:-1;pointer-events:none;color:var(--burgundy)}
.ahero__glow{
  position:absolute;left:64%;top:-30%;translate:-50% 0;
  width:min(124vw,1140px);aspect-ratio:1.35/1;
  background:radial-gradient(ellipse at 50% 46%,rgba(122,15,31,.44),rgba(122,15,31,.12) 46%,transparent 70%);
}
.ahero__geo{
  position:absolute;right:4%;top:50%;translate:0 -50%;
  width:clamp(300px,36vw,470px);height:auto;
  animation:spin 150s linear infinite;
}
.ahero__star{
  position:absolute;right:calc(4% + clamp(300px,36vw,470px)/2 - clamp(38px,5vw,66px)/2);
  top:50%;translate:0 -50%;
  width:clamp(38px,5vw,66px);height:auto;opacity:.95;
  filter:drop-shadow(0 16px 44px rgba(181,36,54,.45));
}
.ahero__h1{
  font-family:var(--f-dis);font-variation-settings:'wdth' 110,'wght' 600;font-weight:600;
  font-size:clamp(min(10vw,2.8rem),6.6vw,5.4rem);
  line-height:.98;letter-spacing:-.028em;font-kerning:normal;max-width:16ch;
}
.ahero__h1 em{font-style:normal;color:var(--burgundy)}
.ahero__lede{
  margin-top:clamp(20px,2.4vw,30px);max-width:52ch;
  color:var(--ink-70);font-size:clamp(1.04rem,1.35vw,1.26rem);line-height:1.62;
}
.ahero__cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(30px,3.4vw,44px)}
@media (max-width:900px){.ahero__geo{right:-22%;opacity:.5}.ahero__star{display:none}}

/* brand origin: editorial two-column, oversized mark */
.origin{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(30px,5vw,80px);align-items:center}
@media (max-width:900px){.origin{grid-template-columns:minmax(0,1fr)}}
.origin__h{
  font-family:var(--f-dis);font-variation-settings:'wdth' 106,'wght' 600;font-weight:600;
  font-size:clamp(1.8rem,3.6vw,3rem);line-height:1.04;letter-spacing:-.025em;
}
.origin__d{margin-top:1.1em;color:var(--ink-70);font-size:clamp(1rem,1.25vw,1.14rem);line-height:1.75;max-width:56ch}
.origin__d em{font-style:italic;color:var(--ivory)}
.origin__mark{display:grid;place-items:center}
.origin__star{width:clamp(120px,18vw,230px);height:auto;opacity:.9;animation:starSlow 80s linear infinite}
@media (max-width:900px){.origin__mark{display:none}}

/* the slogan moment */
.creed{
  position:relative;overflow:hidden;isolation:isolate;
  margin-top:clamp(56px,7vw,96px);
  padding:clamp(50px,7vw,88px) 0;
  background:linear-gradient(165deg,#8E1425 0%,var(--oxblood) 40%,#4E0813 100%);
  text-align:center;
}
.creed__atmos{
  position:absolute;inset:0;z-index:-1;
  background:radial-gradient(60% 60% at 50% 6%,rgba(255,255,255,.13),transparent 62%),
             radial-gradient(80% 60% at 50% 100%,rgba(0,0,0,.4),transparent 62%);
}
.creed__k{
  font-family:var(--f-dis);font-variation-settings:'wdth' 100,'wght' 500;
  font-size:.66rem;letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.72);
  margin-bottom:clamp(18px,2.2vw,26px);
}
.creed__slogan{
  font-family:var(--f-dis);font-variation-settings:'wdth' 108,'wght' 600;font-weight:600;
  font-size:clamp(min(8.6vw,2.3rem),5vw,4rem);
  line-height:1.02;letter-spacing:-.025em;color:var(--ivory);font-kerning:normal;
}
.creed__slogan em{font-style:normal;color:#F6D9CF}

/* numbered editorial principles - deliberately not cards */
.tenets{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(32px,5vw,80px);counter-reset:t}
@media (max-width:820px){.tenets{grid-template-columns:minmax(0,1fr)}}
.tenet{
  display:flex;gap:clamp(16px,2vw,26px);align-items:flex-start;
  padding:clamp(26px,3vw,40px) 0;border-top:1px solid var(--line);
}
.tenets--tight .tenet{padding:clamp(22px,2.4vw,32px) 0}
.tenet__n{
  flex:none;
  font-family:var(--f-dis);font-variation-settings:'wdth' 100,'wght' 600;
  font-size:.68rem;letter-spacing:.2em;color:var(--burgundy-ink);padding-top:.35em;
}
.tenet__body h3{
  font-family:var(--f-dis);font-variation-settings:'wdth' 104,'wght' 600;font-weight:600;
  font-size:clamp(1.15rem,1.7vw,1.4rem);line-height:1.14;letter-spacing:-.018em;margin-bottom:.6em;
}
.tenet__body p{color:var(--ink-52);font-size:.96rem;line-height:1.68;max-width:46ch}

/* three disciplines */
.disc{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
@media (max-width:860px){.disc{grid-template-columns:minmax(0,1fr)}}
.disc__item{
  display:flex;flex-direction:column;background:var(--bg);
  padding:clamp(30px,3.4vw,52px) clamp(22px,2.4vw,38px) clamp(28px,3vw,44px);
  transition:background .5s var(--ease);
}
.disc__item:hover{background:var(--bg-2)}
.disc__n{
  font-family:var(--f-dis);font-variation-settings:'wdth' 96,'wght' 500;
  font-size:.72rem;letter-spacing:.3em;color:var(--burgundy-ink);margin-bottom:clamp(24px,3vw,40px);
}
.disc__h{
  font-family:var(--f-dis);font-variation-settings:'wdth' 106,'wght' 600;font-weight:600;
  font-size:clamp(1.5rem,2.4vw,2.05rem);line-height:1.02;letter-spacing:-.022em;
}
.disc__lead{margin-top:.5em;color:var(--rose);font-size:.98rem}
.disc__d{margin-top:1em;color:var(--ink-52);font-size:.94rem;line-height:1.66;max-width:34ch}
.disc__go{
  margin-top:auto;padding-top:clamp(26px,3vw,40px);
  font-family:var(--f-dis);font-variation-settings:'wdth' 100,'wght' 600;
  font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-quiet);
  transition:color .35s var(--ease);
}
.disc__item:hover .disc__go{color:var(--rose)}
.disc__more{margin-top:clamp(26px,3vw,38px)}
.disc__more a{
  display:inline-flex;align-items:center;gap:.6em;min-height:44px;
  font-family:var(--f-dis);font-variation-settings:'wdth' 100,'wght' 600;
  font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-70);
  transition:color .35s var(--ease);
}
.disc__more a span{transition:transform .4s var(--ease);display:inline-block}
.disc__more a:hover{color:var(--rose)}
.disc__more a:hover span{transform:translateX(5px)}

/* approach sequence */
.seq{
  display:flex;flex-wrap:wrap;align-items:center;gap:clamp(10px,1.4vw,18px);
  padding-top:clamp(30px,3.4vw,46px);border-top:1px solid var(--line);
}
.seq__i{
  display:inline-flex;align-items:center;gap:.7em;
  font-family:var(--f-dis);font-variation-settings:'wdth' 100,'wght' 600;
  font-size:clamp(.72rem,1vw,.84rem);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-70);
}
.seq__i::after{content:"";width:clamp(14px,2.2vw,34px);height:1px;background:var(--line-red);margin-left:.5em}
.seq__i--last{color:var(--rose)}
.seq__i--last::after{display:none}
.seq__d{width:5px;height:5px;flex:none;background:var(--burgundy);transform:rotate(45deg)}
.seq__i--last .seq__d{background:var(--rose)}

/* standards / traits: definition rows, not cards */
.stds{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
@media (max-width:900px){.stds{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.stds{grid-template-columns:minmax(0,1fr)}}
.std{background:var(--bg);padding:clamp(26px,2.8vw,40px) clamp(20px,2.2vw,32px)}
.std dt{
  font-family:var(--f-dis);font-variation-settings:'wdth' 104,'wght' 600;font-weight:600;
  font-size:clamp(1rem,1.35vw,1.14rem);letter-spacing:-.012em;color:var(--ivory);margin-bottom:.7em;
}
.std dd{margin:0;color:var(--ink-52);font-size:.92rem;line-height:1.66}

/* connected system */
.system{position:relative;isolation:isolate;padding:clamp(70px,9vw,120px) 0;overflow:hidden}
.system__atmos{
  position:absolute;inset:0;z-index:-1;
  background:radial-gradient(65% 60% at 50% 0%,rgba(122,15,31,.3),transparent 64%);
}
.trio{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:stretch;gap:0}
@media (max-width:860px){.trio{grid-template-columns:minmax(0,1fr);gap:1px;background:var(--line)}}
.trio__i{
  background:linear-gradient(175deg,var(--card-2),var(--card) 62%);
  border:1px solid var(--line);border-radius:2px;
  padding:clamp(26px,2.8vw,40px) clamp(22px,2.2vw,32px);
}
.trio__h{
  font-family:var(--f-dis);font-variation-settings:'wdth' 106,'wght' 600;font-weight:600;
  font-size:clamp(1.2rem,1.8vw,1.5rem);letter-spacing:-.018em;color:var(--ivory);
}
.trio__d{margin-top:.6em;color:var(--ink-52);font-size:.94rem;line-height:1.6}
.trio__link{align-self:center;width:clamp(20px,3vw,52px);height:1px;background:var(--line-red)}
@media (max-width:860px){.trio__link{display:none}}
.system__d{
  margin-top:clamp(30px,3.4vw,46px);max-width:78ch;
  color:var(--ink-70);font-size:clamp(1rem,1.2vw,1.1rem);line-height:1.75;
}

@media (max-width:940px), (pointer:coarse){
  .ahero__cta .btn{min-height:44px}
}

/* ---- Contact page ----
   Calm and low-friction: the form is the priority, the motif is several routes
   converging on one point, and decoration stays out of the way. */
.chero{
  position:relative;overflow:hidden;isolation:isolate;
  padding:clamp(140px,19vh,205px) 0 clamp(50px,6vw,84px);
}
.chero__atmos{position:absolute;inset:0;z-index:-1;pointer-events:none;color:var(--burgundy)}
.chero__glow{
  position:absolute;left:64%;top:-26%;translate:-50% 0;
  width:min(118vw,1020px);aspect-ratio:1.4/1;
  background:radial-gradient(ellipse at 50% 46%,rgba(122,15,31,.38),rgba(122,15,31,.1) 46%,transparent 70%);
}
.chero__lines{position:absolute;right:2%;top:52%;translate:0 -50%;width:clamp(280px,34vw,470px);height:auto;opacity:.5}
.chero__star{
  position:absolute;right:calc(2% + clamp(280px,34vw,470px)*0.217 - 8px);
  top:52%;translate:0 -50%;width:16px;height:auto;opacity:.95;
}
.chero__h1{
  font-family:var(--f-dis);font-variation-settings:'wdth' 110,'wght' 600;font-weight:600;
  font-size:clamp(min(9.6vw,2.8rem),6.4vw,5.2rem);
  line-height:1;letter-spacing:-.028em;font-kerning:normal;max-width:16ch;
}
.chero__h1 em{font-style:normal;color:var(--burgundy)}
.chero__lede{margin-top:clamp(20px,2.4vw,30px);max-width:54ch;color:var(--ink-70);font-size:clamp(1.02rem,1.3vw,1.2rem);line-height:1.62}
.chero__note{margin-top:1em;max-width:54ch;color:var(--ink-quiet);font-size:.92rem;line-height:1.6}
.chero__cta{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(16px,2.4vw,28px);margin-top:clamp(28px,3.2vw,40px)}
.chero__mail{min-height:44px;display:inline-flex;align-items:center}
.chero__cta .btn{min-height:44px}
@media (max-width:900px){.chero__lines{right:-18%;opacity:.26}.chero__star{display:none}}

/* quick service selection */
.qs__h{
  font-family:var(--f-dis);font-variation-settings:'wdth' 104,'wght' 600;font-weight:600;
  font-size:clamp(1.05rem,1.5vw,1.28rem);letter-spacing:-.012em;color:var(--ivory);
  margin-bottom:clamp(18px,2.2vw,26px);
}
.qs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
@media (max-width:860px){.qs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.qs{grid-template-columns:minmax(0,1fr)}}
.qs__i{
  display:flex;flex-direction:column;gap:.4em;min-height:44px;
  background:var(--bg);padding:clamp(18px,2vw,26px) clamp(16px,1.8vw,24px);
  transition:background .35s var(--ease);
}
.qs__i:hover,.qs__i:focus-visible{background:rgba(181,36,54,.08)}
.qs__n{
  font-family:var(--f-dis);font-variation-settings:'wdth' 104,'wght' 600;
  font-size:.98rem;letter-spacing:-.01em;color:var(--ivory);
}
.qs__d{font-size:.86rem;line-height:1.5;color:var(--ink-52)}
.qs__i:hover .qs__n{color:var(--rose)}

/* direct contact / security pair */
.direct__h{
  font-family:var(--f-dis);font-variation-settings:'wdth' 106,'wght' 600;font-weight:600;
  font-size:clamp(1.3rem,2vw,1.7rem);line-height:1.1;letter-spacing:-.02em;
  margin-bottom:.8em;
}
.direct__mail{
  display:inline-flex;align-items:center;min-height:44px;margin-top:.6em;
  font-family:var(--f-dis);font-variation-settings:'wdth' 100,'wght' 500;
  font-size:clamp(.98rem,1.3vw,1.14rem);letter-spacing:.02em;color:var(--ivory);
  border-bottom:1px solid var(--line-red);
  transition:color .35s var(--ease),border-color .35s var(--ease);
}
.direct__mail:hover{color:var(--rose);border-color:var(--rose)}
.duo__note a{color:var(--ink-70);border-bottom:1px solid var(--line-red);transition:color .3s var(--ease),border-color .3s var(--ease)}
.duo__note a:hover{color:var(--rose);border-color:var(--rose)}

/* the form carries the page - give it room on its own */
.contact .enq{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}

/* ---------- 22. 404 PAGE ---------- */
/* Built from the existing system: .wrap .eyebrow .btn .hdr .ftr are reused as-is.
   Only the off-route mark is new — a hairline geometric route with the Zelos star
   sitting beside it, laid over an outlined editorial numeral. */
.err{
  position:relative;overflow:hidden;isolation:isolate;
  display:flex;align-items:center;
  min-height:86vh;
  min-height:86svh;
  padding:clamp(132px,18vh,200px) 0 clamp(72px,9vw,120px);
}
.err__atmos{position:absolute;inset:0;z-index:-1;pointer-events:none}
.err__glow{
  position:absolute;left:50%;top:-22%;translate:-50% 0;
  width:min(128vw,1180px);aspect-ratio:1.5/1;
  background:radial-gradient(ellipse at 50% 44%,rgba(122,15,31,.44),rgba(122,15,31,.13) 44%,transparent 70%);
}
.err__in{
  width:100%;
  display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
  gap:clamp(40px,6vw,92px);align-items:center;
}
.err__body{min-width:0;max-width:44ch}
.err__h1{
  font-family:var(--f-dis);font-variation-settings:'wdth' 110,'wght' 600;font-weight:600;
  font-size:clamp(min(11vw,2.7rem),6.4vw,5rem);
  line-height:.99;letter-spacing:-.028em;font-kerning:normal;
}
.err__h1 em{font-style:normal;color:var(--burgundy)}
.err__copy{
  margin-top:clamp(20px,2.4vw,30px);max-width:46ch;
  color:var(--ink-70);font-size:clamp(1.02rem,1.3vw,1.18rem);line-height:1.6;
}
.err__ctas{display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(30px,3.4vw,44px)}
.err__ctas .btn{min-height:48px}
.err__more{margin-top:clamp(22px,2.4vw,30px)}
.err__more a{
  display:inline-flex;align-items:center;gap:.6em;min-height:44px;
  font-family:var(--f-dis);font-variation-settings:'wdth' 100,'wght' 600;
  font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-70);
  transition:color .35s var(--ease);
}
.err__more a span{display:inline-block;transition:transform .4s var(--ease)}
.err__more a:hover{color:var(--rose)}
.err__more a:hover span{transform:translateX(5px)}

/* the mark: outlined numeral, hairline route, star off the route */
.err__mark{
  position:relative;justify-self:end;
  width:100%;max-width:520px;aspect-ratio:520/340;
}
.err__num{
  position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--f-dis);font-variation-settings:'wdth' 118,'wght' 700;font-weight:700;
  font-size:clamp(5.6rem,16vw,15rem);line-height:.8;letter-spacing:-.05em;
  color:rgba(245,245,243,.055);
  -webkit-user-select:none;user-select:none;
}
@supports (-webkit-text-stroke:1px red){
  .err__num{color:transparent;-webkit-text-stroke:1px rgba(245,245,243,.14)}
}
.err__route{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.err__route .rt{
  fill:none;stroke:var(--burgundy);stroke-width:1.6;stroke-linecap:round;
  stroke-dasharray:760;
  animation:errDraw 1.9s var(--ease) .35s both;
}
.err__route .rt--ghost{stroke:rgba(245,245,243,.16);stroke-dasharray:1 9;animation:none}
.err__route .node{fill:var(--rose)}
.err__star{
  position:absolute;left:87%;top:67%;translate:-50% -50%;
  width:11%;min-width:36px;height:auto;
  filter:drop-shadow(0 14px 34px rgba(181,36,54,.5));
  animation:starSlow 64s linear infinite;
}
@keyframes errDraw{from{stroke-dashoffset:760}to{stroke-dashoffset:0}}

@media (max-width:1000px){
  .err__in{grid-template-columns:minmax(0,1fr);gap:clamp(44px,7vw,64px)}
  .err__body{max-width:52ch}
  .err__mark{justify-self:center;max-width:min(100%,460px)}
}
@media (max-width:520px){
  .err{min-height:0}
  .err__ctas{flex-direction:column;align-items:stretch}
  .err__ctas .btn{width:100%}
  .err__mark{justify-self:center;max-width:100%}
}

/* ---------- 23. SCROLL REVEALS ---------- */
[data-reveal]{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .9s var(--ease),transform 1.05s var(--ease);
  transition-delay:var(--d,0s);
  will-change:opacity,transform;
}
[data-reveal].is-in{opacity:1;transform:none}
/* the headline masks itself: the wrapper stays put, the inner line slides up */
.hero__h1 .line[data-reveal]{opacity:1;transform:none;transition:none}

/* ---------- 24. REDUCED MOTION ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  [data-reveal]{opacity:1;transform:none}
  .hero__h1 .line__i{transform:none}
  .steps__line i{width:100%}
}

/* ---------- 25. PRINT ---------- */
@media print{
  .grain,.rulers,.progress,.hdr,.hero__atmos{display:none}
  body{background:#fff;color:#000}
}