/* ==========================================================================
   LoopLogic Studio
   Concept: "the line that never lifts" — one continuous drawn line, always
   mid-draw. Every accent on this page is a stroke, not a fill, except where
   something is genuinely active.
   Palette derived from the mark: navy #002060 body, gold #F8B800 strand,
   both taken from the mark itself, Pantone-matched.
   ========================================================================== */

:root{
  /* ---- motion: six durations, two curves. Nothing deviates. ---- */
  --m-press:90ms;
  --m-fast:150ms;
  --m-base:240ms;
  --m-slow:340ms;
  --m-reveal:420ms;
  --e-out:cubic-bezier(.2,.7,.3,1);
  --e-inout:cubic-bezier(.6,0,.3,1);
  --ease:var(--e-out);

  /* ---- surfaces ---- */
  --paper:#F4F2EC;
  --paper-2:#FAF9F5;
  --paper-3:#FFFFFF;
  --cream:#FDE7D6;
  --cream-2:#F9D5BC;
  --navy:#002060;
  --navy-2:#001642;
  --navy-3:#052F7A;

  /* ---- ink: three tones, and nothing else ---- */
  --t1:#071630;                 /* headings */
  --t2:#3A4A66;                 /* body      */
  --t3:#5E6A88;                 /* labels    */
  --line:rgba(7,22,48,.14);
  --line-2:rgba(7,22,48,.07);

  /* ---- ink on navy ---- */
  --n1:#F4F2EC;
  --n2:#B8C6E4;
  --n3:#8FA1C8;
  --n-line:rgba(244,242,236,.17);

  /* ---- the accent, straight off the mark: Pantone orange on Pantone navy.
         It is a stroke or a fill. Never small text on paper — that is --brand-ink. ---- */
  --brand:#FF7420;             /* the CTA face. Navy on this is 6.51:1 */
  --brand-hi:#FF8A42;          /* the fill that arrives on hover, 7.51:1 */
  --brand-deep:#E85D0C;        /* shadows and the pressed state */
  --brand-ink:#A83C00;         /* the accent when it has to be text on paper, 5.67:1 */
  /* the seam: a hairline that fades out before it reaches either gutter,
     so the rule reads as drawn rather than as a border */
  --foil:linear-gradient(90deg,transparent,rgba(255,116,32,.62) 19%,
    rgba(255,116,32,.62) 81%,transparent);
  --foil-lit:linear-gradient(90deg,transparent,rgba(255,116,32,.5) 14%,
    #FF8A42 50%,rgba(255,116,32,.5) 86%,transparent);

  /* ---- cursor, repainted per surface by JS ---- */
  --cur:#002060;
  --cur-ink:#F4F2EC;

  /* ---- type ---- */
  --display:"Bricolage Grotesque","Helvetica Neue",Arial,sans-serif;
  --body:"Newsreader","Iowan Old Style",Georgia,"Times New Roman",serif;
  --serif:"Newsreader","Iowan Old Style",Georgia,"Times New Roman",serif;
  --ui:"Bricolage Grotesque","Helvetica Neue",Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  /* a real scale. the old four names stay as aliases so nothing breaks. */
  --fs-100:.75rem;
  --fs-200:.8125rem;
  --fs-300:.9375rem;
  --fs-400:1rem;
  --fs-500:1.09rem;
  --fs-600:clamp(1.16rem,1.5vw,1.3rem);
  --fs-700:clamp(1.34rem,2.1vw,1.62rem);
  --fs-800:clamp(1.62rem,3vw,2.3rem);
  --fs-900:clamp(2.1rem,4.6vw,3.4rem);
  --fs-1000:clamp(2.6rem,6.4vw,4.9rem);

  --fs-xs:var(--fs-100);
  --fs-sm:var(--fs-200);
  --fs-md:var(--fs-300);
  --fs-lg:var(--fs-500);
  --tr-wide:.14em;
  --tr-mid:.08em;

  /* ---- layout ---- */
  /* spacing: a 4px base, and section rhythm that is set once */
  --s-1:.25rem; --s-2:.5rem;  --s-3:.75rem; --s-4:1rem;   --s-5:1.5rem;
  --s-6:2rem;   --s-7:3rem;   --s-8:4rem;   --s-9:6rem;   --s-10:8rem;
  --sp-sec:clamp(3.4rem,8.5vw,6.5rem);
  --sp-sec-lg:clamp(4.5rem,11vw,9rem);
  --stack:clamp(.9rem,2vw,1.35rem);

  --gutter:clamp(1.1rem,4.5vw,3.5rem);
  --maxw:1280px;
  --hdr-h:clamp(58px,7vw,74px);
}

/* ==========================================================================
   reset + base
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--hdr-h) + 12px)}
body{
  margin:0;background:var(--paper);color:var(--t2);
  font-family:var(--body);font-size:var(--fs-500);line-height:1.68;
  font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
picture{display:block}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4,p,ul,ol,figure,blockquote{margin:0}
ul,ol{list-style:none;padding:0}
a{color:inherit}
:focus-visible{outline:2.5px solid var(--brand-ink);outline-offset:3px;border-radius:3px}
[data-surface="navy"] :focus-visible{outline-color:var(--brand)}
::selection{background:var(--brand);color:var(--navy-2)}

.wrap{width:min(100% - var(--gutter)*2,var(--maxw));margin-inline:auto}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.skip{
  position:fixed;left:-9999px;top:10px;z-index:400;
  background:var(--brand);color:var(--navy-2);padding:.7rem 1.1rem;border-radius:999px;
  font-family:var(--mono);font-size:var(--fs-sm);letter-spacing:var(--tr-mid);text-decoration:none;
}
.skip:focus{left:10px}

/* ---- headings ---- */
h1,h2,h3{
  font-family:var(--display);color:var(--t1);
  font-weight:800;font-variation-settings:"opsz" 72;
  letter-spacing:-.035em;line-height:.96;
}
/* the headline carries the head term now, so it is a longer line: let the browser
   even out the rag rather than hard-coding breaks that only hold at one width */
h1{font-size:clamp(2rem,4.55vw,4rem);font-variation-settings:"opsz" 72;letter-spacing:-.042em;
  text-wrap:balance}
h2{font-size:clamp(2.05rem,5.4vw,3.85rem)}
h3{font-size:clamp(1.3rem,2.6vw,1.75rem);font-variation-settings:"opsz" 14}

h1 .ac,h2 .ac,h2 em,h3 em{
  font-family:var(--serif);font-style:italic;font-weight:400;
  font-variation-settings:normal;letter-spacing:-.012em;
  color:var(--brand-ink);
}
[data-surface="navy"] h1 .ac,
[data-surface="navy"] h2 .ac,
[data-surface="navy"] h2 em{color:var(--brand)}

/* the rule drawn under the accent word, AFTER the word lands */
h1 .ac,h2 .ac{position:relative;display:inline-block}
h1 .ac::after,h2 .ac::after{
  content:"";position:absolute;left:.02em;right:.06em;bottom:.14em;height:.055em;
  border-radius:99px;background:var(--brand);
  transform:scaleX(var(--u,0));transform-origin:0 50%;
  /* --rule-delay is written per headline by the reveal code, so the rule starts
     drawing exactly as the last word lands rather than at a fixed offset */
  transition:transform var(--m-reveal) var(--rule-delay,var(--m-reveal)) var(--ease);
}
body.ready .rw.now .ac{--u:1}

.lede{color:var(--t2);font-size:clamp(1.05rem,1.55vw,1.22rem);line-height:1.62;max-width:56ch}
[data-surface="navy"] .lede{color:var(--n2)}

/* the one label tone */
.eyebrow{
  display:flex;align-items:center;gap:.7rem;
  font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:var(--tr-wide);
  text-transform:uppercase;font-weight:500;color:var(--t3);margin-bottom:1.1rem;
}
.eyebrow i{display:block;width:clamp(18px,3vw,34px);height:1.5px;background:var(--brand);flex:none;border-radius:2px}
[data-surface="navy"] .eyebrow{color:var(--n3)}

/* ==========================================================================
   atmosphere — the glow and the grain field
   ========================================================================== */
.glow{
  position:fixed;left:0;top:0;width:52vmax;height:52vmax;z-index:0;pointer-events:none;
  margin:-26vmax 0 0 -26vmax;opacity:0;
  background:radial-gradient(circle,
    rgba(255,255,255,.95) 0%,
    rgba(255,243,214,.62) 28%,
    rgba(255,116,32,.14) 52%,
    rgba(255,116,32,0) 72%);
  filter:blur(56px);
  transition:opacity 760ms var(--e-out);will-change:transform;
}
body.glow-on .glow{opacity:1}

.grain{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:0;
  transition:opacity 900ms var(--e-out)}
.grain.on{opacity:1}

/* the glow follows a cursor, so it stays desktop-only. The dot field now
   runs everywhere — it has its own ambient motion and needs no pointer. */
@media (pointer:coarse),(hover:none){.glow{display:none!important}}

/* content rides above the atmosphere */
.hdr,main,.ft,.rail,.wa,.scrim{position:relative;z-index:1}
.hdr{z-index:150}

/* ==========================================================================
   the cursor — ring leads, dot chases
   ========================================================================== */
@media (pointer:fine){body.cursor-on,body.cursor-on *{cursor:none}}

.cur__ring{
  position:fixed;left:0;top:0;z-index:200;pointer-events:none;width:38px;height:38px;
  border:1.5px solid var(--cur);border-radius:50%;transform:translate(-50%,-50%);
  transition:width var(--m-slow) var(--ease),height var(--m-slow) var(--ease),
             background-color var(--m-base),border-color var(--m-base),opacity var(--m-base);
  will-change:transform;
}
.cur__dot{
  position:fixed;left:0;top:0;z-index:201;pointer-events:none;
  width:6px;height:6px;border-radius:50%;background:var(--cur);transform:translate(-50%,-50%);
  transition:opacity var(--m-base),background-color var(--m-base);will-change:transform;
}
.cur__label{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.86);
  font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:var(--tr-mid);
  text-transform:uppercase;font-weight:500;color:var(--cur-ink);opacity:0;white-space:nowrap;
  transition:opacity var(--m-base),transform var(--m-base) var(--ease);
}
body.cur-hot .cur__ring{width:82px;height:82px;background:var(--cur);border-color:var(--cur)}
body.cur-hot .cur__dot{opacity:0}
body.cur-hot .cur__label{opacity:1;transform:translate(-50%,-50%) scale(1)}
body.cur-down .cur__ring{width:28px;height:28px}

.cur__trail{position:fixed;inset:0;z-index:199;pointer-events:none}
@media (pointer:coarse),(hover:none){.cur__ring,.cur__dot,.cur__trail{display:none!important}}

/* ==========================================================================
   the rail — a drawn strand, not a bar
   ========================================================================== */
.rail{
  position:fixed;right:calc(var(--gutter)*.32);top:0;height:100vh;width:28px;z-index:60;
  pointer-events:none;opacity:0;transition:opacity 700ms var(--e-out) 500ms;
}
body.ready .rail{opacity:1}
.rail svg{height:100%;width:100%;overflow:visible}
.rail__track{stroke:var(--line-2);stroke-width:1;fill:none}
/* kept in the DOM only so the dot has a path to ride — never drawn */
.rail__prog{stroke:none;fill:none}
/* one soft dot. No glow: this sits beside body copy on every page. */
.rail__dot{fill:var(--brand);opacity:.55}
.rail__pct{
  position:absolute;bottom:1.2rem;right:0;writing-mode:vertical-rl;
  font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:.2em;color:var(--t3);
  font-variant-numeric:tabular-nums;
}
.rail__pct{opacity:.7}
.rail__pct b{color:var(--t3);font-weight:400}
@media (max-width:1000px){.rail{display:none}}

/* ==========================================================================
   header
   ========================================================================== */
.hdr{
  position:fixed;inset:0 0 auto 0;display:flex;align-items:center;justify-content:space-between;
  gap:1rem;padding:clamp(.6rem,1.5vw,1rem) var(--gutter);
  transition:background-color var(--m-slow),backdrop-filter var(--m-slow),box-shadow var(--m-slow);
}
body.scrolled .hdr{
  background:rgba(244,242,236,.76);
  -webkit-backdrop-filter:blur(16px) saturate(1.5);backdrop-filter:blur(16px) saturate(1.5);
  box-shadow:0 1px 0 rgba(255,116,32,.38),0 12px 28px -26px rgba(7,22,48,.5);
}
.hdr__logo{display:block;width:clamp(122px,13vw,168px);transition:transform var(--m-reveal) var(--ease)}
.hdr__logo img{width:100%}
.hdr__logo:hover{transform:translateY(-2px) rotate(-.7deg)}
.hdr__right{display:flex;align-items:center;gap:.6rem}
.hdr .hdr__cta{display:none}
@media (min-width:780px){.hdr .hdr__cta{display:inline-flex}}

/* ---- the nav pod: one pill that grows into the panel ---- */
.navpod{position:relative}
.pod__btn{
  position:relative;z-index:2;display:inline-flex;align-items:center;gap:.6rem;
  min-height:44px;padding:.55rem .95rem .55rem .9rem;border-radius:999px;cursor:pointer;
  border:1px solid var(--line);background:var(--paper-3);color:var(--t1);
  font-family:var(--mono);font-size:var(--fs-sm);letter-spacing:var(--tr-mid);
  text-transform:uppercase;font-weight:500;
  box-shadow:0 2px 10px -6px rgba(7,22,48,.5);
  transition:border-color var(--m-base),background-color var(--m-base),
             transform var(--m-slow) var(--ease),box-shadow var(--m-base);
}
.pod__btn:hover{border-color:var(--brand);box-shadow:0 6px 18px -10px rgba(7,22,48,.55)}
.pod__bars{display:grid;gap:4px;width:16px}
.pod__bars i{display:block;height:1.7px;background:var(--navy);border-radius:2px;
  transition:transform var(--m-slow) var(--ease),width var(--m-slow) var(--ease),
             background-color var(--m-base)}
.pod__bars i:nth-child(1){width:16px}
.pod__bars i:nth-child(2){width:9px;justify-self:end}
body.menu-open .pod__bars i{background:var(--brand)}
body.menu-open .pod__bars i:nth-child(1){transform:translateY(2.85px) rotate(45deg)}
body.menu-open .pod__bars i:nth-child(2){width:16px;transform:translateY(-2.85px) rotate(-45deg)}
.pod__word{display:inline-grid;place-items:start}
.pod__word > span{grid-area:1/1}
.t-close{opacity:0;transform:translateY(-4px);transition:opacity var(--m-fast),transform var(--m-base) var(--ease)}
.t-open{transition:opacity var(--m-fast),transform var(--m-base) var(--ease)}
body.menu-open .t-open{opacity:0;transform:translateY(4px)}
body.menu-open .t-close{opacity:1;transform:none}

/* the panel grows out of the pill's top-right corner */
.menu{
  position:absolute;z-index:1;top:-6px;right:-6px;
  width:min(304px,calc(100vw - var(--gutter)*2));
  padding:calc(44px + 14px) .5rem .5rem;
  background:linear-gradient(180deg,var(--paper-3),var(--paper-2));
  border:1px solid var(--line);border-radius:22px;
  box-shadow:0 34px 70px -28px rgba(7,22,48,.45),0 0 0 1px rgba(255,116,32,.1);
  opacity:0;visibility:hidden;transform:scale(.9);transform-origin:100% 0;
  transition:opacity var(--m-base) var(--ease),transform var(--m-slow) var(--ease),
             visibility var(--m-slow);
}
body.menu-open .menu{opacity:1;visibility:visible;transform:none}

.menu__list{display:grid;gap:1px}
.menu__item a{
  display:flex;align-items:center;gap:.8rem;text-decoration:none;
  padding:.62rem .75rem;border-radius:13px;min-height:44px;
  font-family:var(--display);font-weight:650;font-variation-settings:"opsz" 14;
  font-size:1.08rem;letter-spacing:-.018em;color:var(--t1);
  opacity:0;transform:translateY(8px);
  transition:background-color var(--m-base),color var(--m-base),
             opacity var(--m-base) var(--ease),transform var(--m-slow) var(--ease);
}
body.menu-open .menu__item a{opacity:1;transform:none}
body.menu-open .menu__item:nth-child(1) a{transition-delay:60ms}
body.menu-open .menu__item:nth-child(2) a{transition-delay:100ms}
body.menu-open .menu__item:nth-child(3) a{transition-delay:140ms}
body.menu-open .menu__item:nth-child(4) a{transition-delay:180ms}
body.menu-open .menu__item:nth-child(5) a{transition-delay:220ms}
.menu__item a:hover,.menu__item a:focus-visible{background:rgba(255,116,32,.16);color:var(--navy)}
.menu__dot{width:.42em;height:.42em;border-radius:50%;background:transparent;margin-left:auto;flex:none}
.menu__item a[aria-current="true"] .menu__dot{background:var(--brand);animation:ping 2.4s var(--ease) infinite}
@keyframes ping{
  0%{box-shadow:0 0 0 0 rgba(255,116,32,.6)}
  70%{box-shadow:0 0 0 9px rgba(255,116,32,0)}
  100%{box-shadow:0 0 0 0 rgba(255,116,32,0)}
}

/* rolling text — the one thing lifted from the reference's behaviour */
.roll{display:inline-grid;overflow:hidden;line-height:1.28}
.roll b{grid-area:1/1;font-weight:inherit;transition:transform var(--m-slow) var(--ease)}
.roll b:last-child{transform:translateY(100%)}
a:hover .roll b:first-child,a:focus-visible .roll b:first-child{transform:translateY(-100%)}
a:hover .roll b:last-child,a:focus-visible .roll b:last-child{transform:none}

.menu__foot{
  display:flex;align-items:center;justify-content:space-between;gap:.6rem;
  margin-top:.5rem;padding:.7rem .75rem 0;border-top:1px solid var(--line-2);
  font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:var(--tr-mid);color:var(--t3);
}
.menu__clock{display:inline-flex;align-items:center;gap:.45rem;font-variant-numeric:tabular-nums}
.menu__clock i{width:5px;height:5px;border-radius:50%;background:var(--brand);
  animation:blink 2s var(--ease) infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}
.menu__soc{display:flex;gap:.4rem;padding:.55rem .75rem .1rem}
.menu__soc a{
  display:grid;place-items:center;width:40px;height:40px;border-radius:11px;
  border:1px solid var(--line);color:var(--t3);
  transition:color var(--m-base),border-color var(--m-base),
             transform var(--m-slow) var(--ease),background-color var(--m-base);
}
.menu__soc a:hover{color:var(--navy);border-color:var(--brand);background:rgba(255,116,32,.14);transform:translateY(-2px)}
.menu__soc svg{width:16px;height:16px}

.menu__fox{
  position:absolute;right:10px;top:calc(100% - 20px);width:74px;pointer-events:none;
  opacity:0;transform:translateY(-40%) rotate(-6deg);transform-origin:50% 0;
  filter:drop-shadow(0 18px 20px rgba(7,22,48,.3));
  transition:opacity var(--m-slow) var(--m-fast) var(--ease),
             transform var(--m-reveal) var(--m-fast) var(--ease);
}
body.menu-open .menu__fox{opacity:1;transform:none}
@media (max-width:520px),(max-height:620px){.menu__fox{display:none}}

.scrim{
  position:fixed;inset:0;z-index:148;background:rgba(7,22,48,.28);
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
  opacity:0;visibility:hidden;transition:opacity var(--m-slow),visibility var(--m-slow);
}
body.menu-open .scrim{opacity:1;visibility:visible}

/* ==========================================================================
   buttons — directional fill, arrow displacement, 90ms press
   ========================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;border:0;
  text-decoration:none;cursor:pointer;position:relative;overflow:hidden;
  font-family:var(--mono);font-size:var(--fs-md);letter-spacing:var(--tr-mid);
  text-transform:uppercase;font-weight:500;
  padding:1rem 1.6rem;min-height:48px;border-radius:999px;
  transition:transform var(--m-slow) var(--ease),color var(--m-base),box-shadow var(--m-slow);
  will-change:transform;
}
.btn > span,.btn__arrow{position:relative;z-index:1}
.btn__arrow{transition:transform var(--m-slow) var(--ease)}
.btn:hover .btn__arrow{transform:translateX(5px)}
.btn--sm{padding:.66rem 1.1rem;min-height:44px;font-size:var(--fs-sm)}
.btn--wide{width:100%}

/* the fill enters from whichever edge the pointer crossed */
.btn::before{
  content:"";position:absolute;inset:-1px;
  transform:translate(var(--fx,0%),var(--fy,101%));
  transition:transform var(--m-slow) var(--ease);
}
.btn:hover::before,.btn:focus-visible::before{transform:none}

.btn--primary{background:var(--brand);color:var(--navy-2);
  box-shadow:0 12px 30px -16px rgba(232,93,12,.95)}
.btn--primary::before{background:var(--brand-hi)}
.btn--primary:hover{box-shadow:0 20px 44px -16px rgba(232,93,12,.9)}

/* kept its name: it is the same CTA, on navy rather than paper */
.btn--brand{background:var(--brand);color:var(--navy-2);
  box-shadow:0 12px 30px -16px rgba(232,93,12,.9)}
.btn--brand::before{background:var(--brand-hi)}
.btn--brand:hover{box-shadow:0 20px 44px -16px rgba(232,93,12,.95)}

.btn--ghost{background:transparent;color:var(--t1);box-shadow:inset 0 0 0 1px var(--line)}
.btn--ghost::before{background:rgba(255,116,32,.16)}
.btn--ghost:hover{box-shadow:inset 0 0 0 1px var(--brand);color:var(--navy)}

.btn:active,.glass:active,.pod__btn:active,.again:active,.dial__pin:active{
  transform:scale(.972);transition-duration:var(--m-press)}
.btn--primary:active{box-shadow:0 4px 14px -10px rgba(232,93,12,.9)}
.ft__soc a:active,.menu__soc a:active,.ct__ways a:active{transform:scale(.94);transition-duration:var(--m-press)}
.wa:active{transform:scale(.93);transition-duration:var(--m-press)}

.btn:disabled{opacity:.45;box-shadow:none;cursor:not-allowed}
#send[disabled]{cursor:wait;opacity:.78}

/* ==========================================================================
   hero
   ========================================================================== */
.home{padding:calc(var(--hdr-h) + clamp(2.2rem,7vh,5rem)) 0 clamp(3rem,8vh,5rem);position:relative}
.home__grid{
  display:grid;grid-template-columns:minmax(0,1.44fr) minmax(0,.56fr);
  gap:clamp(1rem,3.4vw,2.6rem);align-items:center;min-height:min(68vh,640px);
}
.home__copy{max-width:none}
.home h1{margin:0 0 clamp(1.1rem,2.6vw,1.6rem)}
.home__sub{color:var(--t2);font-size:clamp(1.02rem,1.5vw,1.2rem);max-width:52ch;margin-bottom:clamp(1.5rem,3vw,2rem)}
.home__sub .rot{display:inline-grid;vertical-align:bottom;font-weight:750;color:var(--t1);
  font-variation-settings:"opsz" 14}
.home__sub .rot span{
  grid-area:1/1;opacity:0;transform:translateY(.42em) rotateX(-58deg);transform-origin:50% 0;
  backface-visibility:hidden;
  transition:opacity var(--m-slow),transform var(--m-reveal) var(--ease);
}
.home__sub .rot span.on{opacity:1;transform:none}

.home__ctas{display:flex;flex-wrap:wrap;gap:.7rem;margin-bottom:clamp(1.6rem,3vw,2.2rem)}

.trust{display:flex;flex-wrap:wrap;gap:.45rem 1.35rem;
  font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:var(--tr-mid);color:var(--t3)}
.trust li{display:flex;align-items:center;gap:.5rem}
.trust li::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--brand);flex:none}

.home__fox{position:relative;justify-self:center;width:clamp(196px,25vw,350px);will-change:transform;
  filter:drop-shadow(0 46px 44px rgba(7,22,48,.24))}
.home__fox img{animation:float 7s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-13px)}}

.home__cue{position:absolute;left:var(--gutter);bottom:clamp(1rem,3vh,2rem)}
.glass{
  position:relative;display:inline-flex;align-items:center;gap:.7rem;min-height:44px;
  padding:.72rem 1.15rem;border-radius:999px;border:0;text-decoration:none;
  font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:var(--tr-mid);
  text-transform:uppercase;font-weight:500;color:var(--t1);
  background:
    linear-gradient(145deg,rgba(255,255,255,.95) 0%,rgba(255,255,255,0) 44%),
    linear-gradient(235deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,0) 48%),
    rgba(255,255,255,.4);
  -webkit-backdrop-filter:blur(18px) saturate(1.6);backdrop-filter:blur(18px) saturate(1.6);
  box-shadow:
    0 12px 32px -18px rgba(7,22,48,.55),
    inset 0 0 0 1px rgba(7,22,48,.1),
    inset 0 1px 1px 0 rgba(255,255,255,.95),
    inset 0 -1px 1px 0 rgba(7,22,48,.06);
  transition:box-shadow var(--m-base),background-color var(--m-base),transform var(--m-slow) var(--ease);
}
.glass:hover{
  background:
    linear-gradient(145deg,rgba(255,255,255,1) 0%,rgba(255,255,255,0) 44%),
    linear-gradient(235deg,rgba(255,116,32,.3) 0%,rgba(255,116,32,0) 48%),
    rgba(255,251,240,.62);
  box-shadow:
    0 18px 40px -18px rgba(7,22,48,.6),
    inset 0 0 0 1px rgba(255,116,32,.62),
    inset 0 1px 1px 0 rgba(255,255,255,1),
    inset 0 -1px 1px 0 rgba(7,22,48,.06);
}
.glass__ring{width:21px;height:21px;flex:none;border-radius:50%;border:1.4px solid var(--brand-deep);
  display:grid;place-items:center}
.glass__ring::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--brand-deep);
  animation:bob 1.9s var(--ease) infinite}
@keyframes bob{0%,100%{transform:translateY(-3px);opacity:.35}50%{transform:translateY(3px);opacity:1}}

/* ==========================================================================
   marquee
   ========================================================================== */
.mq{
  border-block:1px solid var(--line);overflow:hidden;position:relative;
  background:linear-gradient(180deg,var(--paper-2),rgba(255,255,255,.55));
  padding:clamp(1rem,2.2vw,1.5rem) 0 clamp(.7rem,1.4vw,1rem);
}
.mq::before,.mq::after{content:"";position:absolute;top:0;bottom:0;width:clamp(38px,9vw,140px);
  z-index:2;pointer-events:none}
.mq::before{left:0;background:linear-gradient(90deg,var(--paper),transparent)}
.mq::after{right:0;background:linear-gradient(270deg,var(--paper),transparent)}
.mq__row{display:flex;width:max-content;will-change:transform}
.mq__row--b{margin-top:.55rem}
.mq__set{display:flex;align-items:center;gap:clamp(1.4rem,3.2vw,2.8rem);padding-right:clamp(1.4rem,3.2vw,2.8rem)}
.mq__brand{display:inline-flex;align-items:center;gap:.55rem;white-space:nowrap;
  font-family:var(--mono);font-size:var(--fs-sm);letter-spacing:var(--tr-mid);color:var(--t2);
  opacity:.72;transition:opacity var(--m-base),transform var(--m-slow) var(--ease),color var(--m-base)}
.mq__brand img{width:18px;height:18px;filter:grayscale(1) contrast(.35) brightness(.9);
  transition:filter var(--m-slow)}
.mq__row:hover .mq__brand{opacity:.3}
.mq__brand:hover{opacity:1;transform:translateY(-2px);color:var(--t1)}
.mq__brand:hover img{filter:none}
.mq__cap{white-space:nowrap;font-family:var(--display);font-weight:700;
  font-variation-settings:"opsz" 14;font-size:clamp(1rem,1.8vw,1.35rem);
  letter-spacing:-.02em;color:var(--t3);opacity:.6;
  transition:color var(--m-base),opacity var(--m-base)}
.mq__cap i{font-style:normal;color:var(--brand);margin-right:.5rem}
.mq__row:hover .mq__cap{opacity:.3}
.mq__cap:hover{color:var(--brand-ink);opacity:1}
.mq__note{margin-top:clamp(.7rem,1.4vw,1rem);font-family:var(--mono);font-size:var(--fs-xs);
  letter-spacing:var(--tr-mid);color:var(--t3);opacity:.7;position:relative;z-index:3}

/* ==========================================================================
   reveals
   ========================================================================== */
.rv{opacity:1;transform:none}
body.ready .rv.pending{opacity:0;transform:translateY(26px)}
body.ready .rv{transition:opacity var(--m-reveal) var(--ease),transform var(--m-reveal) var(--ease)}

.rw{display:inline-block;overflow:hidden;vertical-align:bottom;line-height:1.26;margin-block:-.18em;white-space:nowrap}
.rw > i{display:inline-block;font-style:inherit;line-height:inherit;
  transform:translateY(116%);transition:transform var(--m-reveal) var(--ease)}
.rw > i.ac{font-style:italic}
body.ready .rw.now > i{transform:none}

/* ==========================================================================
   about — the method, taught by one annotated diagram
   ========================================================================== */
.about{padding:clamp(4rem,10vh,7rem) 0;
  border-top:1px solid rgba(255,116,32,.4);border-image:var(--foil) 1}
.about__head{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(1.5rem,5vw,4rem);align-items:end;margin-bottom:clamp(2.2rem,5vw,3.4rem)}
.about h2{margin-bottom:1.2rem}
.about__kicker{color:var(--t3);font-size:var(--fs-md);max-width:42ch}

/* ---- the diagram ---- */
.dgm{margin:0}
.dgm__stage{
  position:relative;width:min(100%,780px);margin-inline:auto;aspect-ratio:200/130;
  margin-block:clamp(1.6rem,3.4vw,2.6rem);
}
.dgm__stage svg{width:100%;height:100%;overflow:visible;display:block}

/* the track was 14% navy — a watermark. It is the subject of this section now. */
.dgm__track{fill:none;stroke:rgba(7,22,48,.22);stroke-width:1.6;stroke-linejoin:round}
.dgm__live{fill:none;stroke:var(--brand);stroke-width:2.4;stroke-linecap:round;
  stroke-dasharray:16 84;animation:inf-tail 6s linear infinite;
  filter:drop-shadow(0 0 4px rgba(255,116,32,.75))}
.dgm__cross{fill:var(--paper);stroke:var(--brand-deep);stroke-width:1.4}

/* the two lobes, named inside their own holes */
.dgm__lobe{
  position:absolute;top:50%;translate:0 -50%;width:max-content;
  font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:var(--tr-mid);
  text-transform:uppercase;color:var(--t3);opacity:.75;pointer-events:none;
}
.dgm__lobe--l{left:36%;translate:-50% -50%}
.dgm__lobe--r{left:68.5%;translate:-50% -50%}

.dgm__xlab{
  position:absolute;left:52.5%;top:50%;translate:-50% 26px;width:max-content;
  font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:var(--tr-mid);
  text-transform:uppercase;color:var(--brand-ink);pointer-events:none;
}

/* the four moves, sitting on the path at the positions the dial computes */
.dgm__nodes{position:absolute;inset:0;pointer-events:none}
.dgm__n{
  position:absolute;translate:-50% -50%;display:flex;flex-direction:column;align-items:center;
  gap:.4rem;width:max-content;
}
.dgm__n[data-pos="top"]{flex-direction:column-reverse}
.dgm__n b{
  width:clamp(30px,4.4vw,40px);height:clamp(30px,4.4vw,40px);border-radius:50%;
  display:grid;place-items:center;background:var(--navy);color:var(--paper);
  font-family:var(--mono);font-size:var(--fs-sm);font-weight:500;
  box-shadow:0 0 0 5px var(--paper),0 8px 20px -10px rgba(7,22,48,.65);
}
.dgm__n em{
  font-style:normal;font-family:var(--mono);font-size:var(--fs-xs);
  letter-spacing:var(--tr-mid);text-transform:uppercase;color:var(--t2);
  background:var(--paper);padding:.1rem .35rem;border-radius:4px;
}
.dgm__cap{
  max-width:64ch;margin:clamp(.6rem,2vw,1.2rem) auto 0;text-align:center;
  color:var(--t3);font-size:var(--fs-md);line-height:1.7;
}
.dgm__cap b{color:var(--t1);font-weight:650}

/* ---- the legend: the four moves in order, under the figure ---- */
.beats{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(.6rem,1.4vw,.9rem);
  margin-top:clamp(2rem,4.5vw,3rem);
}
.beats li{position:relative;overflow:hidden;border-radius:16px;
  padding:clamp(1rem,2.2vw,1.4rem) clamp(.9rem,1.8vw,1.2rem);
  /* a band below the copy so the loop has somewhere to be seen — without it
     the graphic either hides in a corner or runs through the text */
  min-height:clamp(10rem,15vw,12rem);
  transition:transform var(--m-base) var(--e-out)}
.beats li:hover{transform:translateY(-3px)}
.beats li::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--brand);
  transform:scaleX(0);transform-origin:0 50%;transition:transform var(--m-reveal) var(--ease)}
.beats li.lit::before{transform:none}
.beats b{display:flex;align-items:baseline;gap:.55rem;
  font-family:var(--display);font-weight:800;font-variation-settings:"opsz" 14;
  font-size:clamp(1.05rem,1.9vw,1.3rem);letter-spacing:-.025em;color:var(--t1);margin-bottom:.4rem}
.beats b i{font-style:normal;font-family:var(--mono);font-weight:500;font-size:var(--fs-xs);
  letter-spacing:var(--tr-mid);color:var(--brand-ink);font-variant-numeric:tabular-nums}
.beats span{color:var(--t2);font-size:var(--fs-md);line-height:1.6}

@media (max-width:1100px){
  .dgm__lobe{display:none}
  .dgm__n em{display:none}
}
@media (max-width:820px){
  .about__head{grid-template-columns:1fr;align-items:start}
  .beats{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:520px){
  .beats{grid-template-columns:1fr}
  .dgm__xlab{display:none}
}

/* ==========================================================================
   the loop — pinned dial
   ========================================================================== */
.loop{
  background:
    radial-gradient(90% 70% at 18% 12%,rgba(255,116,32,.11),transparent 58%),
    linear-gradient(180deg,var(--paper-2),var(--paper));
  border-block:1px solid rgba(255,116,32,.4);
  border-image:var(--foil) 1;
}
.loop__track{position:relative}
.loop__stage{display:block;padding:clamp(3.5rem,8vh,5.5rem) 0}
.loop__head{margin-bottom:clamp(1.8rem,4vw,2.8rem)}
.loop__head h2{margin-top:.2rem}
.loop__grid{display:none}
.dial__lobe{display:none}

@media (min-width:901px){
  .loop__track{height:430vh}
  .loop__stage{position:sticky;top:0;height:100svh;display:flex;align-items:center;overflow:hidden;
    padding:0}
  .loop__grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
    gap:clamp(1.5rem,5vw,4.5rem);align-items:center;width:100%}
  .loop .spine,.loop .loop__close{display:none}
  .loop__head{margin-bottom:clamp(1.2rem,2.6vw,2rem)}
}

.dial{position:relative;width:min(100%,520px);margin-inline:auto}
.dial__stage{position:relative;aspect-ratio:200/130}
.dial__stage svg{width:100%;height:100%;overflow:visible}
.dial__track{fill:none;stroke:var(--line);stroke-width:1;stroke-linejoin:round}
.dial__live{fill:none;stroke:var(--brand);stroke-width:2;stroke-linecap:round;
  stroke-dasharray:0 100;stroke-dashoffset:-12.5;filter:drop-shadow(0 0 4px rgba(255,116,32,.8))}
.dial__cross{fill:var(--t3);opacity:.35}
.dial__head{fill:var(--brand);filter:drop-shadow(0 0 6px rgba(255,116,32,1))}
.dial__halo{fill:none;stroke:var(--brand);stroke-width:1.1;
  transform-box:fill-box;transform-origin:50% 50%;animation:halo 2.2s var(--ease) infinite}
@keyframes halo{0%{transform:scale(.6);opacity:.65}75%,100%{transform:scale(2.9);opacity:0}}

.dial__lobe{position:absolute;top:50%;translate:0 -50%;font-family:var(--mono);font-size:var(--fs-xs);
  letter-spacing:var(--tr-wide);text-transform:uppercase;color:var(--t3);opacity:.45;
  writing-mode:vertical-rl;pointer-events:none}
.dial__lobe--l{left:-.4rem;rotate:180deg}
.dial__lobe--r{right:-.4rem}
@media (min-width:1181px){.dial__lobe{display:block}}

.dial__pins{position:absolute;inset:0;pointer-events:none}
.dial__pin{
  position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;
  align-items:center;gap:.4rem;width:clamp(74px,13vw,102px);text-align:center;
  background:none;border:0;padding:0;cursor:pointer;pointer-events:auto;
}
.dial__pin[data-pos="top"]{flex-direction:column-reverse}
.dial__bub{
  width:clamp(38px,6.6vw,46px);height:clamp(38px,6.6vw,46px);border-radius:50%;
  display:grid;place-items:center;background:var(--paper-3);border:1px solid var(--line);
  color:var(--t3);font-family:var(--mono);font-size:var(--fs-sm);font-weight:500;
  transition:background-color var(--m-slow),border-color var(--m-slow),color var(--m-slow),
             transform var(--m-slow) var(--ease),box-shadow var(--m-slow);
}
.dial__pin:hover .dial__bub{border-color:var(--brand);color:var(--t1)}
.dial__pin[aria-selected="true"] .dial__bub{
  background:var(--brand);border-color:var(--brand);color:var(--navy-2);transform:scale(1.16);
  box-shadow:0 0 0 7px rgba(255,116,32,.18),0 12px 26px -12px rgba(232,93,12,.9);
}
.dial__cap{font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:var(--tr-mid);
  text-transform:uppercase;color:var(--t3);opacity:.7;
  transition:color var(--m-slow),opacity var(--m-slow)}
.dial__pin[aria-selected="true"] .dial__cap{color:var(--brand-ink);opacity:1}

.dial__read{display:flex;align-items:center;justify-content:center;gap:.8rem;
  margin-top:clamp(.9rem,2vw,1.4rem)}
.dial__read b{font-family:var(--display);font-weight:800;font-variation-settings:"opsz" 72;
  font-size:clamp(1.55rem,3vw,2.2rem);line-height:1;letter-spacing:-.045em;color:var(--t1);
  font-variant-numeric:tabular-nums}
.dial__read i{display:block;flex:0 1 128px;height:2px;border-radius:2px;background:var(--line);
  position:relative;overflow:hidden}
.dial__read i::after{content:"";position:absolute;inset:0;background:var(--brand);
  transform:scaleX(var(--lp,0));transform-origin:0 50%;transition:transform var(--m-base) linear}
.dial__read span{font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:var(--tr-mid);
  text-transform:uppercase;color:var(--t3)}

.phase__no{display:flex;align-items:center;gap:.7rem;color:var(--brand-ink);margin-bottom:.8rem;
  font-family:var(--mono);font-size:var(--fs-sm);letter-spacing:var(--tr-wide);text-transform:uppercase}
.phase__no i{display:block;width:26px;height:1.5px;background:var(--brand);border-radius:2px}
/* a <p>, not a heading: it is the live label of a tabpanel, and the same four
   move names are already headings on the spine and in services */
.phase__t{font-family:var(--display);color:var(--t1);
  font-size:clamp(1.9rem,4.4vw,3.2rem);font-weight:800;font-variation-settings:"opsz" 72;
  letter-spacing:-.04em;line-height:.98;margin-bottom:.8rem}
.phase__lead{font-family:var(--display);font-weight:700;font-variation-settings:"opsz" 14;
  color:var(--t1);margin-bottom:.55rem;max-width:44ch;letter-spacing:-.005em;
  font-size:clamp(1.08rem,1.9vw,1.32rem);line-height:1.3}
.phase__d{color:var(--t2);margin-bottom:1.15rem;max-width:52ch;font-size:var(--fs-lg)}
.phase__list{display:grid;gap:.5rem;margin-bottom:1.3rem}
.phase__list li{display:flex;gap:.7rem;align-items:baseline;color:var(--t1);font-size:var(--fs-md)}
.phase__list li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--t3);
  flex:none;translate:0 -2px}
.phase__out{display:inline-flex;align-items:baseline;gap:.5rem;border:1px dashed var(--line);
  border-radius:11px;padding:.6rem .9rem;color:var(--t3);
  font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:var(--tr-mid);text-transform:uppercase}
.phase__out b{color:var(--brand-ink);font-weight:600;white-space:nowrap}
.phase__out i{font-style:italic}
.spine .phase__lead{font-size:1.02rem;margin-bottom:.45rem}
.phase.swap{animation:swap .55s var(--ease)}
@keyframes swap{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.loop__hint{display:flex;align-items:center;gap:.6rem;margin-top:1.3rem;
  font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:var(--tr-mid);color:var(--t3)}
.loop__hint i{display:block;width:44px;height:2px;background:var(--line);border-radius:2px;
  overflow:hidden;position:relative;flex:none}
.loop__hint i::after{content:"";position:absolute;inset:0;background:var(--brand);
  transform:scaleX(var(--lp,0));transform-origin:0 50%;transition:transform var(--m-base) linear}

/* ---- the linear alternative ---- */
.spine{position:relative;padding-left:clamp(2.7rem,9vw,3.5rem);margin-top:clamp(1.5rem,4vw,2rem)}
.spine::before{content:"";position:absolute;left:clamp(1.15rem,4vw,1.55rem);top:.7rem;bottom:2.6rem;
  width:2px;border-radius:2px;
  background:linear-gradient(180deg,var(--brand) 0%,var(--brand) var(--fill,0%),var(--line) var(--fill,0%))}
.spine > li{position:relative;padding:0 0 clamp(1.6rem,3.6vw,2.2rem)}
.spine > li::before{
  content:attr(data-n);position:absolute;left:calc(clamp(2.7rem,9vw,3.5rem) * -1);top:-.15rem;
  width:clamp(2.3rem,8vw,3rem);height:clamp(2.3rem,8vw,3rem);border-radius:50%;
  display:grid;place-items:center;background:var(--paper-3);border:1px solid var(--line);
  color:var(--t3);font-family:var(--mono);font-size:var(--fs-sm);font-weight:500;
  transition:background-color var(--m-slow),color var(--m-slow),border-color var(--m-slow),
             transform var(--m-slow) var(--ease);
}
.spine > li.lit::before{background:var(--brand);border-color:var(--brand);color:var(--navy-2);transform:scale(1.07)}
.spine h3{margin-bottom:.4rem}
.spine p{color:var(--t2);font-size:var(--fs-md);margin-bottom:.7rem;max-width:56ch}
.spine ul{display:grid;gap:.35rem;margin-bottom:.8rem}
.spine ul li{display:flex;gap:.6rem;align-items:baseline;color:var(--t1);font-size:var(--fs-md)}
.spine ul li::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--t3);flex:none;translate:0 -2px}
.spine .phase__out{font-size:var(--fs-xs)}

.loop__close{margin-left:clamp(2.7rem,9vw,3.5rem);display:flex;align-items:center;gap:.8rem;
  color:var(--brand-ink);border-top:1px dashed var(--line);padding-top:1.1rem;
  font-family:var(--mono);font-size:var(--fs-sm);letter-spacing:var(--tr-mid)}
.loop__close svg{width:46px;height:25px;flex:none;overflow:visible}
.loop__inf-t{fill:none;stroke:var(--line);stroke-width:7;stroke-linejoin:round}
.loop__inf-c{fill:none;stroke:var(--brand);stroke-width:7.5;stroke-linecap:round;
  stroke-dasharray:14 86;animation:inf-tail 3.4s linear infinite;
  filter:drop-shadow(0 0 3px rgba(255,116,32,.9))}

/* ==========================================================================
   services — grouped by the move they belong to, so the loop figure appears
   once per move instead of three identical times across six cards
   ========================================================================== */
.sec__head{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
  gap:clamp(1.2rem,4vw,3rem);align-items:end;margin-bottom:clamp(2rem,4.5vw,3rem)}
.sec__aside{color:var(--t3);font-size:var(--fs-md);max-width:44ch}
.svc{padding:clamp(4rem,10vh,7rem) 0}

.svc__groups{display:grid;gap:clamp(2.2rem,5vw,3.4rem)}

.grp{display:grid;gap:clamp(1rem,2.2vw,1.4rem)}
.grp__head{
  display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:.9rem;
  padding-bottom:.9rem;border-bottom:1px solid var(--line);
}
.grp__loop{width:clamp(44px,5vw,58px);height:auto;flex:none;overflow:visible}
.grp__loop-t{fill:none;stroke:var(--line);stroke-width:7;stroke-linejoin:round}
.grp__loop-a{fill:none;stroke:var(--brand);stroke-width:8.5;stroke-linecap:round;
  stroke-dasharray:25 75;filter:drop-shadow(0 0 3px rgba(255,116,32,.6))}
.grp__t{display:flex;align-items:baseline;gap:.65rem;margin:0;
  font-size:clamp(1.15rem,2.2vw,1.55rem);letter-spacing:-.028em}
.grp__t i{font-style:normal;font-family:var(--mono);font-weight:500;font-size:var(--fs-xs);
  letter-spacing:var(--tr-wide);text-transform:uppercase;color:var(--brand-ink)}
.grp__out{justify-self:end;text-align:right;
  font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:var(--tr-mid);
  text-transform:uppercase;color:var(--t3)}

.grp__items{display:grid;gap:1px;background:var(--line);
  border:1px solid rgba(255,116,32,.3);border-radius:16px;overflow:hidden}
.grp__items[data-n="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}

.svc__c{position:relative;background:var(--paper-2);padding:clamp(1.2rem,2.4vw,1.6rem);
  overflow:hidden;transition:background-color var(--m-slow)}
.svc__c::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),rgba(255,116,32,.18),transparent 70%);
  transition:opacity var(--m-base)}
.svc__c:hover{background:var(--paper-3)}
.svc__c:hover::before{opacity:1}
.svc__c > *{position:relative}
.svc__c h4{margin:0 0 .5rem;font-family:var(--display);color:var(--t1);
  font-weight:800;font-variation-settings:"opsz" 14;
  font-size:clamp(1.05rem,1.9vw,1.3rem);letter-spacing:-.025em;line-height:1.16}
.svc__c p{color:var(--t2);font-size:var(--fs-md)}

/* ---- the output plates: what each service actually hands over ---- */
/* the plate is a fixed-size artifact, not a stretchy banner — a lone service in
   its own group would otherwise scale it to half the page */
.svc__mk{margin-bottom:1.1rem;border:1px solid var(--line-2);border-radius:12px;
  background:var(--paper-3);overflow:hidden;width:100%;max-width:320px}

/* a group holding one service reads better side by side than stacked */
.grp__items[data-n="1"] .svc__c{
  display:grid;grid-template-columns:minmax(0,280px) minmax(0,1fr);
  gap:clamp(1.2rem,3vw,2.2rem);align-items:center;
  padding:clamp(1.3rem,2.6vw,1.9rem)}
.grp__items[data-n="1"] .svc__mk{margin-bottom:0;max-width:none}
.grp__items[data-n="1"] .svc__c > div:last-child{min-width:0}
@media (max-width:680px){
  .grp__items[data-n="1"] .svc__c{grid-template-columns:1fr}
  .grp__items[data-n="1"] .svc__mk{max-width:320px;margin-bottom:1.1rem}
}
.mk{display:block;width:100%;height:auto}
.mk__f{fill:none;stroke:var(--line);stroke-width:1.4}
.mk__l{fill:none;stroke:rgba(7,22,48,.26);stroke-width:1.6;stroke-linecap:round}
.mk__d{fill:rgba(7,22,48,.26)}
.mk__g{fill:none;stroke:var(--brand);stroke-width:2.2;stroke-linecap:round;
  transition:stroke-width var(--m-slow) var(--ease)}
.mk__gd{fill:var(--brand)}
.svc__c:hover .mk__g{stroke-width:3}
.svc__c:hover .mk__gd{filter:drop-shadow(0 0 4px rgba(255,116,32,.85))}

@media (max-width:900px){
  .grp__head{grid-template-columns:auto 1fr}
  .grp__out{grid-column:1/-1;justify-self:start;text-align:left}
  .grp__items[data-n="3"]{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:600px){
  .grp__items[data-n="3"]{grid-template-columns:1fr}
}

/* ==========================================================================
   why — the navy inversion
   ========================================================================== */
.why{
  background:
    radial-gradient(85% 80% at 88% 4%,rgba(255,116,32,.16),transparent 56%),
    linear-gradient(160deg,var(--navy) 0%,var(--navy-2) 100%);
  color:var(--n2);padding:clamp(4rem,10vh,7rem) 0;position:relative;overflow:hidden;
}
.why::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.55;
  background-image:radial-gradient(rgba(255,116,32,.22) 1px,transparent 1px);background-size:20px 20px;
}
.why > *{position:relative}
/* Cropped by the section, sitting in the space the headline leaves on its
   trailing side. Only drawn once the stats column has stacked below and that
   space actually exists — above that width the stats already fill it. */
.why__mark{position:absolute;right:-6%;top:-14%;width:clamp(15rem,34vw,26rem);height:auto;
  color:var(--brand-hi);opacity:.14;pointer-events:none;z-index:0;display:none}
@media (max-width:900px){ .why__mark{display:block} }
@media (max-width:560px){ .why__mark{right:-22%;top:-8%;width:17rem;opacity:.11} }
.why h2{color:var(--n1);margin-bottom:1.2rem}
.why__grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(2rem,6vw,4.5rem);align-items:start}
.why .lede{margin-bottom:clamp(1.6rem,3vw,2.2rem)}

.stats{display:grid;gap:1px;background:var(--n-line);border:1px solid var(--n-line);
  border-radius:18px;overflow:hidden}
.stats li{background:rgba(255,255,255,.035);padding:clamp(1.2rem,2.4vw,1.6rem);
  display:grid;gap:.35rem;transition:background-color var(--m-base)}
.stats li:hover{background:rgba(255,255,255,.07)}
.stats b{font-family:var(--display);font-weight:800;font-variation-settings:"opsz" 72;
  font-size:clamp(2.6rem,6vw,3.8rem);line-height:.92;letter-spacing:-.05em;color:var(--brand);
  font-variant-numeric:tabular-nums}
@supports ((background-clip:text) or (-webkit-background-clip:text)){
  .stats b{background-image:linear-gradient(168deg,#FFA86B 4%,var(--brand) 42%,var(--brand-deep) 98%);
    -webkit-background-clip:text;background-clip:text;
    color:transparent;-webkit-text-fill-color:transparent}
}
.stats__word{font-size:clamp(2rem,4.4vw,2.8rem)!important;letter-spacing:-.02em!important}
.stats li > span{color:var(--n2);font-size:var(--fs-md)}

/* ==========================================================================
   mark panel
   ========================================================================== */
.mark{
  background:
    radial-gradient(120% 130% at 90% 110%,rgba(0,32,96,.22),transparent 56%),
    linear-gradient(150deg,var(--cream) 0%,var(--cream-2) 100%);
  color:var(--navy-2);padding:clamp(3.2rem,8vh,5.5rem) 0;position:relative;overflow:hidden;
  border-block:1px solid rgba(168,60,0,.34);
}
.mark::before{
  content:"";position:absolute;inset:0;opacity:.55;pointer-events:none;
  background-image:radial-gradient(rgba(0,32,96,.11) 1px,transparent 1px);background-size:19px 19px;
}
.mark__inf{position:absolute;right:-5%;top:50%;translate:0 -50%;width:min(44%,320px);
  opacity:.14;pointer-events:none}
.mark__inf path{fill:none;stroke:var(--navy);stroke-width:5;stroke-linecap:round}
@media (max-width:860px){.mark__inf{display:none}}
.mark__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(1.6rem,5vw,4rem);align-items:center;position:relative}
.mark__logo{width:min(100%,480px);opacity:0;transform:translateY(16px);
  transition:opacity var(--m-reveal) var(--ease),transform var(--m-reveal) var(--ease)}
.mark__logo.lit{opacity:1;transform:none}
.mark__say{font-family:var(--display);font-weight:800;font-variation-settings:"opsz" 14;
  font-size:clamp(1.15rem,2.2vw,1.65rem);letter-spacing:-.028em;line-height:1.24;
  color:var(--navy-2);margin-bottom:.8rem}
.mark__sub{color:#5C4A24;font-size:var(--fs-md);max-width:46ch}

/* ==========================================================================
   contact + form
   ========================================================================== */
.ct{padding:clamp(4rem,10vh,7rem) 0 clamp(3rem,7vh,4.5rem);overflow:hidden;
  background:radial-gradient(105% 80% at 82% 6%,rgba(255,116,32,.17),transparent 56%)}
.ct__grid{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  gap:clamp(2rem,5vw,4rem);align-items:start}
.ct__ways{display:grid;gap:.6rem;margin-bottom:1.2rem}
.ct__ways a{display:flex;align-items:center;gap:.8rem;text-decoration:none;color:var(--t2);
  border:1px solid var(--line);border-radius:13px;padding:.85rem 1rem;min-height:56px;
  background:var(--paper-3);
  transition:border-color var(--m-base),color var(--m-base),
             transform var(--m-slow) var(--ease),background-color var(--m-base),
             box-shadow var(--m-base)}
.ct__ways a:hover{border-color:var(--brand);color:var(--t1);transform:translateX(4px);
  background:rgba(255,251,240,1);box-shadow:0 10px 24px -18px rgba(7,22,48,.7)}
.ct__ways svg{width:18px;height:18px;color:var(--brand-ink);flex:none}
.ct__ways b{font-weight:600;color:var(--t1);display:block;font-size:var(--fs-sm);
  font-family:var(--mono);letter-spacing:var(--tr-mid);text-transform:uppercase}
.ct__ways span{font-size:var(--fs-md)}
.ct__note{color:var(--t3);font-size:var(--fs-md);max-width:40ch}
.ct__fox{width:clamp(132px,15vw,210px);margin:clamp(1rem,3vw,2rem) 0 0 calc(var(--gutter)*-.22);
  pointer-events:none;filter:drop-shadow(0 34px 34px rgba(7,22,48,.22))}

.form{display:grid;gap:.85rem;background:var(--paper-3);border:1px solid rgba(255,116,32,.38);
  border-radius:22px;padding:clamp(1.2rem,3vw,1.9rem);
  box-shadow:0 0 0 5px rgba(255,116,32,.075),0 40px 80px -60px rgba(7,22,48,.75)}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:.85rem}
.field{display:grid;gap:.38rem}
.field label{color:var(--t3);font-family:var(--mono);font-size:var(--fs-sm);
  letter-spacing:var(--tr-mid);text-transform:uppercase;font-weight:500}
.field label .req{color:var(--t3)}
.opt{color:var(--t3);text-transform:none;letter-spacing:0;font-family:var(--body);
  font-size:var(--fs-md);opacity:.85}

.field input,.field textarea,.field select{
  font-family:var(--body);font-size:1rem;color:var(--t1);
  background:var(--paper-2);border:1px solid var(--line);border-radius:12px;
  padding:.85rem 1rem;width:100%;min-height:48px;
  transition:border-color var(--m-base),background-color var(--m-base),box-shadow var(--m-base);
}
.field textarea{min-height:118px;resize:vertical}
.field input:hover,.field textarea:hover,.field select:hover{border-color:rgba(7,22,48,.3)}
.field input:focus,.field textarea:focus,.field select:focus{
  border-color:var(--brand-deep);outline:none;background:var(--paper-3);
  box-shadow:0 0 0 3px rgba(255,116,32,.24)}
.field input::placeholder,.field textarea::placeholder{color:rgba(94,106,136,.62)}
.field.ok input,.field.ok textarea,.field.ok select{border-color:#3E9E63}
.field.bad input,.field.bad textarea{border-color:#C4341A}

.field select{appearance:none;-webkit-appearance:none;padding-right:2.3rem;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%235E6A88' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6.5 8 10.5 12 6.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .85rem center;background-size:15px}
.phone{display:grid;grid-template-columns:minmax(0,164px) minmax(0,1fr);gap:.5rem}
/* the country name has to fit, and 16px keeps iOS from zooming the page on focus */
.phone select{padding-inline:.75rem;font-family:var(--body);
  padding-right:1.7rem;background-position:right .55rem center;background-size:13px;
  text-overflow:ellipsis}

.err{color:#A82A12;font-family:var(--mono);font-size:var(--fs-sm);letter-spacing:.04em;
  min-height:1.2em;display:flex;align-items:center;gap:.4rem;line-height:1.3}
.err:not(:empty)::before{content:"!";display:grid;place-items:center;width:14px;height:14px;
  border-radius:50%;background:#A82A12;color:var(--paper-3);font-size:10px;font-weight:700;flex:none}

.consent{display:flex;gap:.7rem;align-items:flex-start;color:var(--t2);
  font-size:var(--fs-md);line-height:1.5;text-transform:none;letter-spacing:0;
  font-family:var(--body);padding:.55rem .15rem;margin:-.55rem -.15rem;
  border-radius:10px;cursor:pointer;transition:background-color var(--m-fast)}
.consent:hover{background:rgba(7,22,48,.04)}
.consent input{width:22px;height:22px;flex:none;margin:0;accent-color:var(--brand-deep);cursor:pointer}

.form__note{display:grid;gap:.3rem;color:var(--t3);border:1px dashed var(--line);border-radius:12px;
  padding:.85rem 1rem;font-family:var(--mono);font-size:var(--fs-sm);letter-spacing:.03em;
  line-height:1.65}
.form__note b{color:var(--brand-ink);font-weight:500}
.form__note.good{border-style:solid;border-color:var(--brand-deep);background:rgba(255,116,32,.08)}
.form__note.bad{border-style:solid;border-color:#C4341A;background:rgba(196,52,26,.05)}
.form__note a{color:var(--brand-ink);text-underline-offset:3px}
.form__note code{background:rgba(7,22,48,.08);border-radius:4px;padding:.1em .4em;font-size:.94em}

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

.form[data-state="sending"] #sendTxt::after{
  content:"";display:inline-block;width:.65em;height:.65em;margin-left:.55em;
  border:2px solid currentColor;border-right-color:transparent;border-radius:50%;
  vertical-align:-1px;animation:spin 700ms linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.form[data-state="sent"] #send{background:#1C7A45;color:#EAF7EF}
.form[data-state="sent"] #send::before{background:#1C7A45}
.form[data-state="sent"] .btn__arrow{transform:none}

/* ==========================================================================
   footer
   ========================================================================== */
.ft{background:linear-gradient(180deg,var(--navy) 0%,var(--navy-2) 100%);color:var(--n2);
  padding:clamp(2.5rem,6vw,4rem) 0 clamp(1.3rem,3vw,2rem);position:relative;overflow:hidden}
.ft::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:radial-gradient(rgba(255,116,32,.18) 1px,transparent 1px);background-size:22px 22px}
.ft::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;
  pointer-events:none;background:var(--foil-lit)}
.ft > *{position:relative}
.ft__top{display:grid;grid-template-columns:minmax(0,1.25fr) repeat(3,minmax(0,.5fr));
  gap:clamp(1.8rem,4vw,3rem);padding-bottom:clamp(1.8rem,4vw,2.6rem);border-bottom:1px solid var(--n-line)}
/* The mark is never recoloured to suit a surface. On navy it gets its own
   paper plaque, which is what a brand manual asks for when there is no
   approved reverse artwork. */
.ft__logo{display:inline-block;width:clamp(168px,17vw,212px);margin-bottom:1.1rem;
  background:var(--paper);border-radius:14px;padding:.8rem 1rem;
  box-shadow:0 14px 34px -22px rgba(0,0,0,.85);
  transition:transform var(--m-reveal) var(--ease),box-shadow var(--m-slow)}
.ft__logo img{width:100%;display:block}
.ft__logo:hover{transform:translateY(-2px);box-shadow:0 20px 44px -22px rgba(0,0,0,.9)}
.ft__blurb{color:var(--n2);font-size:var(--fs-md);max-width:42ch;margin-bottom:1.2rem}
.ft__soc{display:flex;gap:.5rem}
.ft__soc a{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;
  border:1px solid var(--n-line);color:var(--n3);
  transition:color var(--m-base),border-color var(--m-base),
             transform var(--m-slow) var(--ease),background-color var(--m-base)}
.ft__soc a:hover{color:var(--brand);border-color:var(--brand);transform:translateY(-3px);
  background:rgba(255,116,32,.1)}
.ft__soc svg{width:17px;height:17px}
.ft__h{font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:var(--tr-wide);
  text-transform:uppercase;font-weight:500;color:var(--n3);margin-bottom:.7rem}
.ft ul{display:grid}
.ft ul a,.ft__ck{display:flex;align-items:center;min-height:44px;padding-block:.4rem;text-decoration:none;
  color:var(--n2);font-size:var(--fs-md);transition:color var(--m-base)}
.ft ul a:hover,.ft__ck:hover{color:var(--brand)}
.ft__ck{background:none;border:0;padding-inline:0;cursor:pointer;font-family:inherit;text-align:left}
.ft__bot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;
  padding-top:clamp(1.2rem,3vw,1.8rem)}
.ft__bot p{font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:var(--tr-mid);color:var(--n3)}

/* ---- go round again ---- */
.again{display:inline-flex;align-items:center;gap:.85rem;text-decoration:none;color:var(--n1);
  border:1px solid var(--n-line);border-radius:999px;padding:.6rem 1.3rem .6rem .6rem;cursor:pointer;
  background:transparent;font-family:var(--mono);font-size:var(--fs-sm);
  letter-spacing:var(--tr-mid);text-transform:uppercase;min-height:48px;
  transition:border-color var(--m-slow),color var(--m-slow),background-color var(--m-slow),
             transform var(--m-slow) var(--ease)}
.again:hover{border-color:var(--brand);color:var(--brand);background:rgba(255,116,32,.08);
  transform:translateY(-2px)}
.again__txt{display:grid;text-align:left}
.again__txt b{font-weight:500}
.again__txt em{font-style:normal;color:var(--n3);font-size:var(--fs-xs);letter-spacing:var(--tr-mid);
  margin-top:.15rem}
.again__spin{width:56px;height:31px;flex:none;display:grid;place-items:center}
.again__spin svg{width:100%;height:100%;overflow:visible;transition:transform var(--m-slow) var(--ease)}
.again:hover .again__spin svg{transform:scale(1.09)}
.again__track{fill:none;stroke:var(--n-line);stroke-width:6;stroke-linejoin:round;
  transition:stroke var(--m-slow)}
.again:hover .again__track{stroke:rgba(255,116,32,.32)}
.again__tail{fill:none;stroke:var(--brand);stroke-width:6;stroke-linecap:round;opacity:.4;
  stroke-dasharray:22 78;animation:inf-tail 3.2s linear infinite}
.again__head{fill:none;stroke:var(--brand);stroke-width:6.5;stroke-linecap:round;
  stroke-dasharray:6 94;animation:inf-head 3.2s linear infinite;
  filter:drop-shadow(0 0 3.5px rgba(255,116,32,.95))}
@keyframes inf-tail{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
@keyframes inf-head{from{stroke-dashoffset:80}to{stroke-dashoffset:-20}}
.again:hover .again__tail,.again:hover .again__head{animation-duration:1.05s}
.again.go .again__tail,.again.go .again__head{animation-duration:.5s}
.again.go .again__track{stroke:rgba(255,116,32,.5)}

/* ---- floating whatsapp ---- */
.wa{position:fixed;text-decoration:none;z-index:140;
  right:clamp(1rem,2.5vw,1.8rem);bottom:clamp(1rem,2.5vw,1.8rem);
  width:54px;height:54px;border-radius:50%;display:grid;place-items:center;border:0;cursor:pointer;
  /* WhatsApp's own lockup: the official mark, white, on brand green. Recognising it
     instantly is the entire point of this control, so it does not take the site palette. */
  background:linear-gradient(160deg,#25D366,#12A150);color:#fff;
  box-shadow:0 12px 30px -8px rgba(18,161,80,.55),inset 0 1px 1px rgba(255,255,255,.35);
  opacity:0;transform:translateY(18px) scale(.85);pointer-events:none;
  transition:opacity var(--m-slow) var(--e-out),transform var(--m-slow) var(--e-out),
             box-shadow var(--m-base)}
.wa.up{opacity:1;transform:none;pointer-events:auto}
.wa:hover{box-shadow:0 18px 40px -8px rgba(18,161,80,.7),inset 0 1px 1px rgba(255,255,255,.35)}
.wa svg{width:26px;height:26px}
.wa__pulse{position:absolute;inset:0;border-radius:50%;border:1.5px solid rgba(37,211,102,.8);
  animation:wapulse 2.6s var(--e-out) infinite}
@keyframes wapulse{0%{transform:scale(1);opacity:.65}70%,100%{transform:scale(1.7);opacity:0}}
.wa__tip{position:absolute;right:calc(100% + .6rem);top:50%;translate:0 -50%;white-space:nowrap;
  background:var(--paper-3);color:var(--t1);border:1px solid var(--line);border-radius:9px;
  padding:.42rem .7rem;font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:var(--tr-mid);
  box-shadow:0 10px 24px -14px rgba(7,22,48,.7);
  opacity:0;transform:translateX(6px);pointer-events:none;
  transition:opacity var(--m-fast),transform var(--m-base) var(--e-out)}
.wa:hover .wa__tip{opacity:1;transform:none}

/* ==========================================================================
   breakpoints
   ========================================================================== */
@media (max-width:1180px){
  .home__grid{grid-template-columns:minmax(0,1.46fr) minmax(0,.54fr)}
}
@media (max-width:1080px) and (min-width:901px){
  .loop__grid{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:2rem}
  .dial{max-width:340px}
}
@media (max-width:900px){
  .why__grid{grid-template-columns:1fr}
  .sec__head{grid-template-columns:1fr;align-items:start}
  .wa{width:50px;height:50px}
  .wa__tip{display:none}
}
@media (max-width:880px){
  .home{padding-top:calc(var(--hdr-h) + 1.2rem)}
  .home__grid{display:block;min-height:0}
  .home__copy{max-width:none}
  .home__fox{width:min(56vw,250px);margin:0 0 .4rem auto}
  .home__cue{position:static;margin-top:1.6rem;display:block}
  .home__cue .glass{width:100%;justify-content:center}
  .trust{gap:.4rem .9rem}
}
@media (max-width:520px){
  /* keep the dial code readable without squeezing the number out of its own field */
  .phone{grid-template-columns:minmax(0,148px) minmax(0,1fr)}
}
@media (max-width:820px){
  .ct__grid{grid-template-columns:1fr}
  .ct__left{order:1}
  .form{order:2}
  .form__row{grid-template-columns:1fr}
  .mark__grid{grid-template-columns:1fr}
  .ct__fox{width:34vw;margin-left:0;justify-self:end}
}
@media (max-width:760px){
  .ft__top{grid-template-columns:1fr 1fr}
  .ft__top > :first-child{grid-column:1/-1}
  .ft__bot{flex-direction:column;align-items:flex-start}
}



/* ==========================================================================
   FAQ — real <details>, so the answers are in the DOM for crawlers that do
   not run JavaScript, and keyboard-operable without a line of script
   ========================================================================== */
:root{ interpolate-size:allow-keywords }

.faq{padding:clamp(3.5rem,9vh,6rem) 0}
.faq__list{border-top:1px solid var(--line)}
.faq__i{border-bottom:1px solid var(--line);position:relative}
.faq__i::after{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;background:var(--brand);
  transform:scaleX(0);transform-origin:0 50%;transition:transform var(--m-reveal) var(--ease)}
.faq__i[open]::after{transform:none}

.faq__i summary{
  display:flex;align-items:flex-start;justify-content:space-between;gap:1.5rem;
  padding:clamp(1rem,2.2vw,1.35rem) 0;cursor:pointer;list-style:none;
  transition:color var(--m-base);
}
.faq__i summary::-webkit-details-marker{display:none}
.faq__i summary:hover{color:var(--navy)}
.faq__i summary:focus-visible{outline:2.5px solid var(--brand-ink);outline-offset:4px;border-radius:4px}
.faq__i summary h3{
  font-size:clamp(1.05rem,2vw,1.4rem);font-variation-settings:"opsz" 14;
  letter-spacing:-.024em;line-height:1.24;margin:0;color:inherit;font-weight:750;
}
.faq__i[open] summary h3{color:var(--navy)}

/* the marker is a plus that rotates into a minus — one element, two lines */
.faq__x{position:relative;width:20px;height:20px;flex:none;translate:0 .2em;
  transition:transform var(--m-slow) var(--ease)}
.faq__x::before,.faq__x::after{content:"";position:absolute;left:50%;top:50%;
  background:var(--brand-deep);border-radius:2px;
  transition:transform var(--m-slow) var(--ease),background-color var(--m-base)}
.faq__x::before{width:15px;height:1.8px;transform:translate(-50%,-50%)}
.faq__x::after{width:1.8px;height:15px;transform:translate(-50%,-50%)}
.faq__i[open] .faq__x{transform:rotate(180deg)}
.faq__i[open] .faq__x::after{transform:translate(-50%,-50%) scaleY(0)}
.faq__i summary:hover .faq__x::before,.faq__i summary:hover .faq__x::after{background:var(--brand)}

.faq__a{padding:0 clamp(2rem,6vw,4rem) clamp(1.1rem,2.4vw,1.5rem) 0;max-width:72ch}
.faq__a p{color:var(--t2);font-size:var(--fs-lg);line-height:1.68}

/* animates where the engine supports it, snaps cleanly where it does not */
.faq__i::details-content{
  block-size:0;overflow:hidden;
  transition:block-size var(--m-slow) var(--ease),
             content-visibility var(--m-slow) allow-discrete;
}
.faq__i[open]::details-content{block-size:auto}

@media (prefers-reduced-motion:reduce){
  .faq__i::details-content{transition:none}
  .faq__i::after{transform:scaleX(1)}
}

/* ==========================================================================
   the legal pages
   ========================================================================== */
.lg{padding:calc(var(--hdr-h) + clamp(2rem,6vh,3.5rem)) 0 clamp(3rem,8vh,5rem)}
.lg__head{max-width:62ch;margin-bottom:clamp(2.2rem,5vw,3.4rem)}
.lg__head .eyebrow a{text-decoration:none;color:inherit;transition:color var(--m-base)}
.lg__head .eyebrow a:hover{color:var(--brand-ink)}
.lg h1{font-size:clamp(2.2rem,5.4vw,4rem);margin-bottom:1rem}
.lg__sub{color:var(--t2);font-size:clamp(1.02rem,1.5vw,1.18rem);line-height:1.6;margin-bottom:1.3rem}
.lg__meta{display:flex;flex-wrap:wrap;gap:.35rem 1.6rem;
  font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:var(--tr-mid);color:var(--t3)}
.lg__meta b{color:var(--brand-ink);font-weight:500;text-transform:uppercase;letter-spacing:var(--tr-wide)}
.lg__note{margin-top:1.2rem;padding:.85rem 1rem;border:1px dashed var(--line);border-radius:12px;
  color:var(--t3);font-size:var(--fs-md);max-width:60ch;background:rgba(255,255,255,.5)}
.lg__note strong{color:var(--t1);font-weight:650}

.lg__grid{display:grid;grid-template-columns:minmax(0,.3fr) minmax(0,.7fr);
  gap:clamp(2rem,5vw,4.5rem);align-items:start}

/* ---- the contents rail ---- */
.lg__toc{position:sticky;top:calc(var(--hdr-h) + 1.4rem);
  border-left:1px solid var(--line);padding-left:clamp(1rem,2vw,1.4rem)}
.lg__toc-h{font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:var(--tr-wide);
  text-transform:uppercase;color:var(--t3);margin-bottom:.7rem}
.lg__toc-h--2{margin-top:1.6rem;padding-top:1.2rem;border-top:1px solid var(--line-2)}
.lg__toc ol,.lg__toc-alt{display:grid;gap:1px}
.lg__toc a,.lg__ck{display:flex;align-items:baseline;gap:.6rem;text-decoration:none;
  min-width:0;overflow-wrap:anywhere;
  color:var(--t2);font-size:var(--fs-md);line-height:1.35;padding:.42rem .5rem;border-radius:9px;
  transition:color var(--m-base),background-color var(--m-base),transform var(--m-slow) var(--ease)}
.lg__toc a:hover,.lg__ck:hover{color:var(--navy);background:rgba(255,116,32,.16);transform:translateX(3px)}
.lg__toc a i{font-style:normal;font-family:var(--mono);font-size:var(--fs-xs);
  color:var(--t3);flex:none;font-variant-numeric:tabular-nums}
.lg__toc a[aria-current="true"]{color:var(--navy);font-weight:650}
.lg__toc a[aria-current="true"] i{color:var(--brand-ink)}
.lg__toc-alt a,.lg__ck{font-family:var(--mono);font-size:var(--fs-xs);
  letter-spacing:var(--tr-mid);text-transform:uppercase;color:var(--t3)}
.lg__ck{background:none;border:0;cursor:pointer;width:100%;text-align:left;font-family:var(--mono)}

/* ---- the clauses ---- */
.lg__body{max-width:68ch}
.lg__c{padding-bottom:clamp(1.8rem,3.6vw,2.6rem);margin-bottom:clamp(1.8rem,3.6vw,2.6rem);
  border-bottom:1px solid var(--line-2);scroll-margin-top:calc(var(--hdr-h) + 1.4rem)}
.lg__c:last-of-type{border-bottom:0}
.lg__c h2{display:flex;align-items:baseline;gap:.8rem;
  font-size:clamp(1.25rem,2.4vw,1.7rem);letter-spacing:-.028em;line-height:1.14;margin-bottom:1rem}
.lg__c h2 i{font-style:normal;font-family:var(--mono);font-weight:500;
  font-size:var(--fs-sm);letter-spacing:var(--tr-mid);color:var(--brand-ink);flex:none;
  font-variant-numeric:tabular-nums;translate:0 -.1em}
.lg__prose{display:grid;gap:.95rem}
.lg__prose p{color:var(--t2);font-size:var(--fs-lg);line-height:1.68}
.lg__prose strong{color:var(--t1);font-weight:650}
.lg__prose em{font-family:var(--serif);font-style:italic;font-size:1.06em}
.lg__prose a{color:var(--brand-ink);text-underline-offset:3px;text-decoration-thickness:1px;
  transition:color var(--m-base)}
.lg__prose a:hover{color:var(--navy)}
.lg__prose code{font-family:var(--mono);font-size:.88em;background:rgba(7,22,48,.07);
  border-radius:5px;padding:.14em .42em;color:var(--t1)}
/* Same trap as .lg__grid: an implicit auto track sizes to the min-content of
   a flex li, which on a narrow screen is wider than the page. Pin the track
   and let the items shrink. */
.lg__list{display:grid;gap:.6rem;grid-template-columns:minmax(0,1fr)}
/* Block, not flex. A flex li turns every inline child into a flex item that
   will not shrink below its own min-content, so a bold lead-in like
   "Cost plus management fee" pushed the whole list past a phone viewport.
   The bullet is positioned instead, which is what .sp-fit__col already does. */
.lg__list li{position:relative;padding-left:1.15rem;color:var(--t2);
  font-size:var(--fs-lg);line-height:1.62}
.lg__list li::before{content:"";position:absolute;left:0;top:.66em;
  width:5px;height:5px;border-radius:50%;background:var(--brand)}

.lg__tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:14px;background:var(--paper-3)}
.lg__table{border-collapse:collapse;width:100%;min-width:min(100%,460px);font-size:var(--fs-md)}
.lg__table th,.lg__table td{text-align:left;vertical-align:top;padding:.8rem .95rem;
  border-bottom:1px solid var(--line-2)}
.lg__table thead th{font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:var(--tr-mid);
  text-transform:uppercase;color:var(--t3);font-weight:500;
  background:var(--paper-2);border-bottom:1px solid var(--line);white-space:nowrap}
.lg__table tbody th{color:var(--t1);font-weight:650;white-space:nowrap}
.lg__table td{color:var(--t2)}
.lg__table tr:last-child th,.lg__table tr:last-child td{border-bottom:0}
.lg__table tbody tr{transition:background-color var(--m-base)}
.lg__table tbody tr:hover{background:rgba(255,116,32,.07)}

.lg__foot-note{margin-top:clamp(1.6rem,3vw,2.2rem);padding-top:1.3rem;border-top:1px solid var(--line);
  color:var(--t3);font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:var(--tr-mid);
  line-height:1.9}
.lg__foot-note a{color:var(--brand-ink)}

@media (max-width:940px){
  /* minmax(0,…) not a bare 1fr: 1fr means minmax(auto,1fr), so one wide child's
     min-content size blows the track out past the container. The desktop rule
     above already guards this; the mobile override had dropped it. */
  .lg__grid{grid-template-columns:minmax(0,1fr)}
  .lg__toc{position:static;border-left:0;padding-left:0;padding-bottom:1.6rem;
    border-bottom:1px solid var(--line);margin-bottom:.6rem}
  .lg__toc ol{grid-template-columns:1fr 1fr;display:grid;gap:1px}
  .lg__body{max-width:none}
}
@media (max-width:560px){ .lg__toc ol{grid-template-columns:1fr} }

/* ==========================================================================
   cookie consent — non-modal, does not trap focus, does not block the page
   ========================================================================== */
.ck{position:fixed;z-index:160;left:clamp(1rem,2.5vw,1.8rem);bottom:clamp(1rem,2.5vw,1.8rem);
  width:min(440px,calc(100vw - clamp(2rem,5vw,3.6rem)));
  opacity:0;visibility:hidden;transform:translateY(14px) scale(.98);
  transition:opacity var(--m-base) var(--ease),transform var(--m-slow) var(--ease),
             visibility var(--m-slow)}
.ck.up{opacity:1;visibility:visible;transform:none}
.ck__in{position:relative;background:var(--paper-3);border:1px solid var(--line);border-radius:18px;
  padding:clamp(1rem,2.4vw,1.3rem);
  box-shadow:0 30px 64px -30px rgba(7,22,48,.55),0 0 0 1px rgba(255,116,32,.09)}
.ck__t{font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:var(--tr-wide);
  text-transform:uppercase;color:var(--brand-ink);margin-bottom:.45rem}
.ck__d{color:var(--t2);font-size:var(--fs-md);line-height:1.6;max-width:44ch}
.ck__d a{color:var(--brand-ink);text-underline-offset:3px}
.ck__d a:hover{color:var(--navy)}
/* both choices are the same size and the same distance away */
.ck__row{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1rem}
.ck__row .btn{flex:1 1 auto;min-width:148px}
.ck__x{position:absolute;top:.5rem;right:.5rem;width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;border:0;background:none;color:var(--t3);cursor:pointer;
  transition:color var(--m-base),background-color var(--m-base)}
.ck__x:hover{color:var(--t1);background:rgba(7,22,48,.06)}
.ck__x svg{width:14px;height:14px}
/* it must never sit under the floating control */
@media (max-width:620px){
  .ck{left:clamp(.75rem,3vw,1.2rem);right:clamp(.75rem,3vw,1.2rem);width:auto;
    bottom:calc(clamp(1rem,2.5vw,1.8rem) + 62px)}
  .ck__row .btn{flex:1 1 100%}
}

/* ==========================================================================
   reduced motion — a second design, not a disabled first one
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  .glow,.grain{display:none!important}
  .wa__pulse,.menu__clock i{animation:none}
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  body.ready .rv.pending{opacity:1;transform:none}
  .rw > i{transform:none!important}
  .cur__trail{display:none}
  .home__fox img{animation:none}
  h1 .ac::after,h2 .ac::after{transform:scaleX(1)}
  .beats li::before{transform:none}
  .mark__logo{opacity:1;transform:none}
  html{scroll-behavior:auto}
  /* the pin is abandoned: the linear spine is the design */
  .loop__track{height:auto!important}
  .loop__stage{position:static!important;height:auto!important;display:block!important;
    padding:clamp(3.5rem,8vh,5.5rem) 0!important}
  .loop__grid{display:none!important}
  .spine,.loop__close{display:block!important}
  .loop__close{display:flex!important}
}

/* ==========================================================================
   services page — the catalogue. Four categories, one card per service.
   The loop stays the narrative; this is only how the work is bought.
   ========================================================================== */
.sv-hero{padding:calc(var(--hdr-h) + clamp(2rem,6vh,3.6rem)) 0 clamp(2rem,5vh,3rem);position:relative}
.sv-hero h1{font-size:clamp(2.4rem,6vw,4.2rem);margin:.3rem 0 1rem}
.sv-hero .lede{margin-bottom:0}
/* the rail leads the catalogue now, so it carries the gap the hero used to */
.sv-catalogue > .sv-jump{margin-top:clamp(1.6rem,4vh,2.4rem)}

/* breadcrumb — also emitted as BreadcrumbList in the page schema */
.crumb{margin-bottom:clamp(1rem,2.5vw,1.6rem)}
.crumb ol{display:flex;flex-wrap:wrap;gap:.45rem;margin:0;padding:0;list-style:none;
  font-family:var(--mono);font-size:var(--fs-sm);color:var(--t3)}
.crumb li+li::before{content:"/";margin-right:.45rem;color:var(--line)}
.crumb a{color:var(--t3);text-decoration:none;border-bottom:1px solid transparent;
  transition:color var(--m-base),border-color var(--m-base)}
.crumb a:hover{color:var(--t1);border-bottom-color:var(--brand)}

/* jump list — four targets, each carrying its own count */
/* sticky, so the four categories stay reachable through a 16-service page */
.sv-jump{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.7rem;
  position:sticky;top:calc(var(--hdr-h) + .5rem);z-index:40;
  padding:.45rem;margin:0 -.45rem;border-radius:18px;
  background:color-mix(in srgb,var(--paper) 78%,transparent);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4)}
@supports not (background:color-mix(in srgb,red 50%,transparent)){
  .sv-jump{background:rgba(244,242,236,.85)}
}
.sv-jump a{display:flex;align-items:baseline;gap:.5rem;text-decoration:none;
  padding:.85rem 1rem;border:1px solid var(--line);border-radius:14px;
  background:var(--paper-2);color:var(--t1);font-weight:600;font-size:var(--fs-md);
  transition:border-color var(--m-base),background-color var(--m-base),transform var(--m-base)}
.sv-jump a{transition:border-color .35s cubic-bezier(.23,1,.32,1),
  background-color .35s cubic-bezier(.23,1,.32,1),
  transform .35s cubic-bezier(.23,1,.32,1),color .4s ease}
.sv-jump a:hover{border-color:var(--brand);background:var(--paper-3);transform:translateY(-2px)}

/* one lit at a time, the way the vertical-tab component steps */
.sv-jump a.is-on{border-color:var(--brand);background:var(--paper-3);
  box-shadow:0 8px 22px -14px rgba(232,93,12,.9)}
.sv-jump a.is-on b{color:var(--brand)}
.sv-jump a.is-on::after{transform:scaleX(1)}
.sv-jump a{position:relative;overflow:hidden}
.sv-jump a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--brand);transform:scaleX(0);transform-origin:0 50%;
  transition:transform .45s cubic-bezier(.23,1,.32,1)}
@media (prefers-reduced-motion:reduce){
  .sv-jump a,.sv-jump a::after{transition:none}
}
.sv-jump b{font-family:var(--mono);font-size:var(--fs-sm);color:var(--brand-ink);font-weight:500}
.sv-jump span{margin-left:auto;font-family:var(--mono);font-size:var(--fs-sm);color:var(--t3)}

/* a category */
.cat{padding:clamp(2.6rem,6vh,4rem) 0;border-top:1px solid rgba(255,116,32,.4);
  border-image:var(--foil) 1;scroll-margin-top:calc(var(--hdr-h) + 1rem)}
.cat__top{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(1.2rem,3vw,2.4rem);
  align-items:center;margin-bottom:clamp(1.4rem,3vw,2rem)}
.cat__head{max-width:62ch}
.cat__fig{display:none}

/* the plate earns its place only once there is room beside the text */
@media (min-width:840px){
  .cat__top{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr)}
  .cat__fig{display:block;justify-self:end;width:min(100%,290px)}
  .cat__plate{width:100%;height:auto;display:block}
  /* the lit stroke answers the category it sits beside */
  .cat:hover .cat__plate .mk__g{stroke-width:3}
  .cat:hover .cat__plate .mk__gd{filter:drop-shadow(0 0 4px rgba(255,116,32,.85))}
}
.cat__head h2{font-size:clamp(1.9rem,4.6vw,3.1rem);margin:.2rem 0 .8rem}
.cat__problem{color:var(--t2);font-size:clamp(1rem,1.5vw,1.16rem);line-height:1.6}
.cat__meta{display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;margin-top:1.1rem;
  font-family:var(--mono);font-size:var(--fs-sm);letter-spacing:var(--tr-mid);
  text-transform:uppercase;color:var(--t3)}
.cat__move b{color:var(--brand-ink);font-weight:500}
.cat__out{padding-left:1.4rem;border-left:1px solid var(--line)}

/* Stacked, a sticky rail of four rows would hold a third of a phone screen
   for the whole page. Below the width that fits four across it becomes one
   scrolling row instead — about 56px, and still reachable. */
@media (max-width:860px){
  .sv-jump{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:max-content;
    overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;
    -webkit-overflow-scrolling:touch;scroll-padding-inline:.45rem}
  .sv-jump::-webkit-scrollbar{display:none}
  .sv-jump a{white-space:nowrap;scroll-snap-align:start}
  .sv-jump span{margin-left:.6rem}
}
@media (max-width:520px){
  .cat__out{padding-left:0;border-left:0}
}

/* ---- homepage: the four categories, handing off to services.html -------- */
.svc__cats{display:grid;gap:clamp(.9rem,2vw,1.2rem);list-style:none;margin:0;padding:0;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,268px),1fr))}
.svc__cat a{display:grid;gap:.5rem;height:100%;text-decoration:none;
  padding:clamp(1.15rem,2.4vw,1.55rem);border:1px solid var(--line);border-radius:18px;
  background:var(--paper-2);position:relative;overflow:hidden;
  transition:border-color var(--m-base),background-color var(--m-base),transform var(--m-base)}
.svc__cat a::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:var(--foil);opacity:0;transition:opacity var(--m-base)}
.svc__cat a:hover{border-color:var(--brand);background:var(--paper-3);transform:translateY(-3px)}
.svc__cat a:hover::after{opacity:1}
.svc__cat-n{margin:0;font-family:var(--mono);font-size:var(--fs-sm);color:var(--brand-ink)}
.svc__cat h3{margin:0;font-family:var(--display);color:var(--t1);font-weight:800;
  font-variation-settings:"opsz" 14;font-size:clamp(1.22rem,2.2vw,1.5rem);line-height:1.18}
.svc__cat-d{margin:0;color:var(--t2);font-size:var(--fs-md);line-height:1.5}
.svc__cat-m{margin:auto 0 0;padding-top:.7rem;border-top:1px solid var(--line-2);
  display:flex;flex-wrap:wrap;gap:.4rem .8rem;
  font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:var(--tr-mid);
  text-transform:uppercase;color:var(--t3)}
.svc__cat-m b{color:var(--brand-ink);font-weight:500}
.svc__cat-m span{margin-left:auto}

.svc__all{margin-top:clamp(1.2rem,2.6vw,1.7rem)}
.svc__all a{display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;
  font-family:var(--mono);font-size:var(--fs-md);letter-spacing:var(--tr-mid);
  text-transform:uppercase;color:var(--t1);
  padding-bottom:.25rem;border-bottom:1.5px solid var(--brand);
  transition:gap var(--m-base),color var(--m-base)}
.svc__all a:hover{gap:.9rem;color:var(--brand-ink)}

/* ---- about page -------------------------------------------------------- */
.ab{max-width:68ch;margin-inline:auto;padding-block:clamp(1rem,3vw,2rem)}
.ab__s{padding-block:clamp(1.5rem,3.5vw,2.4rem);border-top:1px solid rgba(255,116,32,.4);
  border-image:var(--foil) 1}
.ab__s:first-child{border-top:0}
.ab__s h2{font-size:clamp(1.5rem,3.4vw,2.2rem);margin-bottom:.9rem}
.ab__s p{color:var(--t2);font-size:clamp(1rem,1.5vw,1.1rem);line-height:1.66;max-width:64ch}
.ab__s p + p{margin-top:.9rem}
.ab__s b{color:var(--t1);font-weight:600}

/* the facts block: what a payment gateway, a buyer and a crawler all want */
.ab__card{margin:clamp(1.8rem,4vw,2.6rem) 0 clamp(2.5rem,6vw,4rem);
  background:var(--paper-2);border:1px solid rgba(255,116,32,.3);border-radius:18px;
  padding:clamp(1.3rem,3vw,1.9rem)}
.ab__card h2{font-size:clamp(1.2rem,2.4vw,1.5rem);margin-bottom:1.1rem}
.ab__dl{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:12px;overflow:hidden;margin:0}
.ab__dl > div{background:var(--paper-3);padding:.85rem 1rem;display:grid;
  grid-template-columns:minmax(0,1fr);gap:.25rem}
.ab__dl dt{font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:var(--tr-mid);
  text-transform:uppercase;color:var(--t3)}
.ab__dl dd{margin:0;color:var(--t1);font-size:var(--fs-md);line-height:1.5}
.ab__dl a{color:var(--t1);text-decoration:none;border-bottom:1.5px solid var(--brand)}
.ab__dl a:hover{color:var(--brand-ink)}
@media (min-width:620px){
  .ab__dl > div{grid-template-columns:minmax(0,.42fr) minmax(0,1fr);gap:1rem;align-items:baseline}
}

/* the price line on the services page */
.sv-price{margin-top:clamp(1.2rem,3vw,1.8rem);padding:1.1rem 1.3rem;
  background:var(--paper-2);border:1px solid rgba(255,116,32,.3);border-radius:14px;
  display:flex;flex-wrap:wrap;gap:.5rem 1.6rem;align-items:baseline}
.sv-price b{font-family:var(--display);font-weight:800;color:var(--t1);
  font-size:clamp(1.05rem,2vw,1.25rem)}
.sv-price span{color:var(--t2);font-size:var(--fs-md)}
.sv-price em{font-style:normal;font-family:var(--mono);font-size:var(--fs-sm);
  color:var(--brand-ink);margin-left:auto}

/* ==========================================================================
   pricing page — three cards, then the full comparison
   ========================================================================== */
.pr__grid{list-style:none;margin:0 0 clamp(2rem,5vw,3rem);padding:0;display:grid;
  gap:clamp(.9rem,2vw,1.2rem);grid-template-columns:repeat(auto-fit,minmax(min(100%,262px),1fr))}
.pr__c{position:relative;display:grid;gap:.55rem;align-content:start;
  background:var(--paper-2);border:1px solid var(--line);border-radius:18px;
  padding:clamp(1.2rem,2.6vw,1.7rem);transition:border-color var(--m-base),transform var(--m-base)}
.pr__c:hover{border-color:var(--brand);transform:translateY(-3px)}
/* the chosen one is lifted by weight, not by a louder colour */
.pr__c--pop{border-color:var(--brand);border-width:2px;
  box-shadow:0 18px 44px -28px rgba(232,93,12,.85)}
.pr__flag{position:absolute;top:-11px;left:clamp(1.2rem,2.6vw,1.7rem);margin:0;
  background:var(--brand);color:var(--navy-2);border-radius:99px;padding:.22rem .7rem;
  font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:var(--tr-mid);
  text-transform:uppercase;font-weight:500}
.pr__c h2{font-family:var(--display);font-weight:800;font-variation-settings:"opsz" 14;
  font-size:clamp(1.12rem,2.1vw,1.32rem);margin:0}
.pr__p{margin:0}
.pr__p span{font-family:var(--display);font-weight:800;font-variation-settings:"opsz" 72;
  font-size:clamp(2rem,4.6vw,2.7rem);line-height:1;letter-spacing:-.035em;color:var(--t1);
  font-variant-numeric:tabular-nums}
.pr__best{margin:.1rem 0 0;color:var(--brand-ink);font-size:var(--fs-md);font-weight:600;line-height:1.4}
.pr__blurb{margin:.35rem 0 .9rem;color:var(--t2);font-size:var(--fs-md);line-height:1.55}
.pr__c .btn{margin-top:auto}

/* the table: wide tables get their own scroller so the page never does */
.pr__tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;
  border:1px solid rgba(255,116,32,.3);border-radius:16px;background:var(--paper-2)}
.pr__t{width:100%;border-collapse:collapse;font-size:var(--fs-md);min-width:560px}
.pr__cap{caption-side:top;text-align:left;padding:1rem 1.1rem .4rem;
  font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:var(--tr-mid);
  text-transform:uppercase;color:var(--t3)}
.pr__t thead th{text-align:left;padding:.8rem 1.1rem;border-bottom:1px solid var(--line);
  color:var(--t1);font-family:var(--display);font-weight:800;font-size:var(--fs-md);
  vertical-align:bottom}
.pr__t thead th b{display:block;font-family:var(--mono);font-weight:500;color:var(--brand-ink);
  font-size:var(--fs-sm);margin-top:.15rem;font-variant-numeric:tabular-nums}
.pr__g th{background:var(--sunken,var(--paper-3));padding:.6rem 1.1rem;
  font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:var(--tr-mid);
  text-transform:uppercase;color:var(--t3);text-align:left;
  border-block:1px solid var(--line-2)}
.pr__t tbody th[scope="row"]{text-align:left;font-weight:500;color:var(--t2);
  padding:.7rem 1.1rem;border-bottom:1px solid var(--line-2)}
.pr__t td{padding:.7rem 1.1rem;border-bottom:1px solid var(--line-2);color:var(--t1);
  text-align:center;width:19%}
.pr__y{color:var(--brand);font-weight:700}
.pr__n{color:var(--t3)}

.pr__notes{list-style:none;margin:clamp(1.4rem,3vw,2rem) 0 clamp(2.5rem,6vw,4rem);padding:0;
  display:grid;gap:.75rem;max-width:72ch}
.pr__notes li{position:relative;padding-left:1.4rem;color:var(--t2);
  font-size:var(--fs-md);line-height:1.6}
.pr__notes li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;
  border-radius:50%;background:var(--brand)}
.pr__notes b{color:var(--t1);font-weight:600}

/* stacked on a phone: each cell announces which package it belongs to */
@media (max-width:620px){
  .pr__t{min-width:0}
  .pr__t thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .pr__t tbody th[scope="row"]{display:block;padding-bottom:.25rem;color:var(--t1);font-weight:600}
  .pr__t td{display:flex;justify-content:space-between;gap:1rem;text-align:right;width:auto;
    padding:.35rem 1.1rem;border-bottom:0}
  .pr__t td::before{content:attr(data-l);font-family:var(--mono);font-size:var(--fs-xs);
    letter-spacing:var(--tr-mid);text-transform:uppercase;color:var(--t3);text-align:left}
  .pr__t tbody tr:not(.pr__g){display:block;padding-block:.5rem;border-bottom:1px solid var(--line-2)}
}

/* ---- pricing: the e-commerce section ----------------------------------- */
.pr__ec{padding-top:clamp(2.2rem,5vw,3.4rem);margin-top:clamp(2rem,5vw,3rem);
  border-top:1px solid rgba(255,116,32,.4);border-image:var(--foil) 1}
.pr__ec h2{font-size:clamp(1.7rem,4vw,2.6rem);margin:.2rem 0 .9rem}
.pr__lead{color:var(--t1);font-size:clamp(1.02rem,1.7vw,1.2rem);line-height:1.6;
  max-width:62ch;font-weight:500}
.pr__sub{color:var(--t2);font-size:var(--fs-md);line-height:1.6;max-width:62ch;
  margin:.7rem 0 clamp(1.4rem,3vw,2rem)}

/* what is included, and what is not — side by side so the split is unmissable */
.pr__two{display:grid;gap:clamp(.9rem,2vw,1.2rem);margin-top:clamp(1.4rem,3vw,2rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
.pr__inc{background:var(--paper-2);border:1px solid var(--line);border-radius:16px;
  padding:clamp(1.1rem,2.4vw,1.5rem)}
.pr__inc h3{margin:0 0 .8rem;font-family:var(--display);font-weight:800;
  font-variation-settings:"opsz" 14;font-size:var(--fs-md);color:var(--t1)}
.pr__inc ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.pr__inc li{position:relative;padding-left:1.35rem;color:var(--t2);font-size:var(--fs-md);
  line-height:1.45}
.pr__inc li::before{content:"✓";position:absolute;left:0;color:var(--brand);font-weight:700}
.pr__inc--not{background:var(--paper-3)}
.pr__inc--not li::before{content:"–";color:var(--t3)}
.pr__inc p{margin:.9rem 0 0;color:var(--t3);font-size:var(--fs-sm);line-height:1.5}

/* ==========================================================================
   pricing: the three offers as editorial blocks
   Brief §08 asks explicitly for something other than a three-card grid, and
   §18 warns against making every section a rectangular card grid. So each
   offer is a full-width block with its own seam, read top to bottom.
   ========================================================================== */
.of__list{display:grid;gap:0}
.of{padding-block:clamp(2rem,5vw,3.2rem);
  border-top:1px solid rgba(255,116,32,.4);border-image:var(--foil) 1}
.of:first-child{border-top:0}
.of__head{max-width:62ch}
.of__n{margin:0 0 .5rem;display:flex;flex-wrap:wrap;align-items:center;gap:.7rem;
  font-family:var(--mono);font-size:var(--fs-sm);color:var(--t3)}
.of__tag{background:var(--brand);color:var(--navy-2);border-radius:99px;padding:.18rem .6rem;
  font-size:var(--fs-xs);letter-spacing:var(--tr-mid);text-transform:uppercase;font-weight:500}
.of h2{font-family:var(--display);font-weight:800;font-variation-settings:"opsz" 72;
  font-size:clamp(1.9rem,4.6vw,3rem);line-height:1;letter-spacing:-.03em;margin:0}
.of__price{margin:.5rem 0 0;font-family:var(--mono);font-size:clamp(1rem,1.8vw,1.15rem);
  color:var(--brand-ink);font-weight:500;font-variant-numeric:tabular-nums}
.of__promise{margin:.9rem 0 .5rem;color:var(--t1);font-weight:600;
  font-size:clamp(1.05rem,1.9vw,1.25rem);line-height:1.4}
.of__blurb{margin:0;color:var(--t2);font-size:var(--fs-md);line-height:1.62;max-width:60ch}

.of__cols{display:grid;gap:clamp(1rem,2.5vw,2rem);margin:clamp(1.4rem,3vw,2rem) 0;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
.of__col h3{margin:0 0 .7rem;font-family:var(--mono);font-size:var(--fs-xs);
  letter-spacing:var(--tr-mid);text-transform:uppercase;color:var(--t3);font-weight:500}
.of__inc,.of__for{list-style:none;margin:0;padding:0;display:grid;gap:.45rem}
.of__inc li,.of__for li{position:relative;padding-left:1.4rem;color:var(--t2);
  font-size:var(--fs-md);line-height:1.5}
.of__inc li::before{content:"✓";position:absolute;left:0;color:var(--brand);font-weight:700}
.of__for li::before{content:"";position:absolute;left:.2rem;top:.62em;width:5px;height:5px;
  border-radius:50%;background:var(--t3)}
.of__after{margin-top:1.4rem;padding-top:1.1rem;border-top:1px solid var(--line-2)}
.of__after p{margin:0;color:var(--t2);font-size:var(--fs-md);line-height:1.55}
.of__mo{margin-top:.5rem!important;color:var(--t3)!important;font-size:var(--fs-sm)!important}
.of__mo b{color:var(--brand-ink);font-weight:600}

/* ---- recurring services ------------------------------------------------ */
.rec{padding-block:clamp(2rem,5vw,3rem);
  border-top:1px solid rgba(255,116,32,.4);border-image:var(--foil) 1}
.rec h2{font-size:clamp(1.6rem,3.6vw,2.4rem);margin:.2rem 0 .8rem}
.rec__lead{color:var(--t2);font-size:var(--fs-md);line-height:1.6;max-width:60ch;margin:0}
.rec__grid{list-style:none;margin:clamp(1.3rem,3vw,1.9rem) 0 0;padding:0;display:grid;
  gap:1px;background:var(--line);border:1px solid rgba(255,116,32,.3);border-radius:16px;
  overflow:hidden;grid-template-columns:minmax(0,1fr)}
@media (min-width:520px){.rec__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1000px){.rec__grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.rec__grid li{background:var(--paper-2);padding:clamp(1.05rem,2.2vw,1.4rem);display:grid;gap:.3rem}
.rec__grid h3{margin:0;font-family:var(--display);font-weight:800;
  font-variation-settings:"opsz" 14;font-size:var(--fs-md);color:var(--t1);
  letter-spacing:var(--tr-mid);text-transform:uppercase}
.rec__grid p{margin:0;color:var(--t2);font-size:var(--fs-md);line-height:1.5}
.rec__note{margin:1rem 0 0;color:var(--t3);font-size:var(--fs-sm);line-height:1.5;max-width:60ch}

.pr__ecline{margin:clamp(1.4rem,3vw,2rem) 0 clamp(2.5rem,6vw,4rem);padding:1.1rem 1.3rem;
  background:var(--paper-2);border:1px solid var(--line);border-radius:14px;
  color:var(--t2);font-size:var(--fs-md);line-height:1.6;max-width:70ch}
.pr__ecline a{color:var(--t1);text-decoration:none;border-bottom:1.5px solid var(--brand);
  transition:color var(--m-base)}
.pr__ecline a:hover{color:var(--brand-ink)}

/* ---- the problem (§43) — plain English before the philosophy ----------- */
.prob{padding:clamp(3rem,8vh,5rem) 0;position:relative}
.prob h2{font-size:clamp(1.9rem,5vw,3.4rem);margin:.2rem 0 clamp(1.2rem,3vw,1.8rem);max-width:20ch}
.prob__body{max-width:60ch;display:grid;gap:1rem}
.prob__body p{color:var(--t2);font-size:clamp(1.02rem,1.7vw,1.2rem);line-height:1.62;margin:0}
.prob__body b{color:var(--t1);font-weight:600}

/* ==========================================================================
   §46 who we help — five verticals, then the line that lets everyone else in
   ========================================================================== */
.who{padding:clamp(3rem,8vh,5rem) 0;border-top:1px solid rgba(255,116,32,.4);
  border-image:var(--foil) 1}
.who h2{font-size:clamp(1.9rem,5vw,3.2rem);margin:.2rem 0 .8rem}
.who .lede{margin-bottom:clamp(1.4rem,3vw,2rem)}
.who__grid{list-style:none;margin:0;padding:0;display:grid;
  gap:clamp(.7rem,1.5vw,1rem);grid-template-columns:minmax(0,1fr)}
/* Five verticals, and five divides badly. auto-fit cannot help because it
   never knows the item count, so the tracks are set explicitly and the odd
   ones are told to stretch. Wide screens get 3 on top and 2 below by giving
   the row six tracks: the first three span 2 each, the last two span 3 each. */
@media (min-width:560px){.who__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:920px){.who__grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.who__c{background:var(--paper-2);padding:clamp(1.1rem,2.4vw,1.5rem);display:grid;gap:.35rem;
  align-content:start;
  transition:background-color var(--m-slow)}
.who__c:hover{background:var(--paper-3)}
.who__c h3{margin:0;font-family:var(--display);font-weight:800;font-variation-settings:"opsz" 14;
  font-size:var(--fs-md);color:var(--t1);letter-spacing:var(--tr-mid);text-transform:uppercase}
.who__c p{margin:0;color:var(--t2);font-size:var(--fs-md);line-height:1.5}
/* the closing line is load-bearing (§46) — given weight, not tucked away */
.who__close{margin:clamp(1.2rem,3vw,1.7rem) 0 0;padding:1.05rem 1.25rem;max-width:64ch;
  background:var(--paper-2);border-left:3px solid var(--brand);border-radius:0 12px 12px 0;
  color:var(--t2);font-size:clamp(1rem,1.6vw,1.12rem);line-height:1.58}
.who__close b{color:var(--t1);font-weight:600}

/* ==========================================================================
   §48 packages — a summary, not the pricing page. Three lines, then out.
   ========================================================================== */
.pk{padding:clamp(3rem,8vh,5rem) 0;border-top:1px solid rgba(255,116,32,.4);
  border-image:var(--foil) 1}
.pk h2{font-size:clamp(1.9rem,5vw,3.2rem);margin:.2rem 0 .8rem}
.pk .lede{margin-bottom:clamp(1.4rem,3vw,2rem)}
.pk__grid{list-style:none;margin:0;padding:0;display:grid;gap:clamp(.85rem,2vw,1.15rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,256px),1fr))}
.pk__c{background:var(--paper-2);border:1px solid var(--line);border-radius:16px;
  padding:clamp(1.15rem,2.5vw,1.6rem);display:grid;gap:.4rem;align-content:start;
  transition:border-color var(--m-base),transform var(--m-base)}
.pk__c:hover{border-color:var(--brand);transform:translateY(-3px)}
.pk__c--pop{border-color:var(--brand);border-width:2px}
.pk__c h3{margin:0;font-family:var(--display);font-weight:800;font-variation-settings:"opsz" 72;
  font-size:clamp(1.15rem,2.2vw,1.42rem);letter-spacing:-.01em}
.pk__c h3 a{color:var(--t1);text-decoration:none}
.pk__c h3 a:hover{color:var(--brand-ink)}
.pk__p{margin:0;font-family:var(--mono);font-size:var(--fs-md);color:var(--brand-ink);
  font-weight:500;font-variant-numeric:tabular-nums}
.pk__l{margin:.2rem 0 0;color:var(--t2);font-size:var(--fs-md);line-height:1.5}
.pk__mo{margin:clamp(1rem,2.4vw,1.4rem) 0 0;color:var(--t3);font-size:var(--fs-md);
  line-height:1.55;max-width:62ch}
/* the e-commerce route. It is a separate tier of work, so it gets a separate
   surface rather than a sentence at the bottom of the website packages. */
.pk__ec{display:grid;gap:var(--s-5);align-items:center;text-decoration:none;
  margin:clamp(1.4rem,3vw,2rem) 0 0;padding:clamp(1.3rem,3vw,1.9rem) clamp(1.3rem,3vw,2rem);
  background:var(--navy);border:1px solid var(--navy-3);border-radius:18px;
  transition:transform var(--m-base),border-color var(--m-base),box-shadow var(--m-base)}
@media (min-width:760px){
  .pk__ec{grid-template-columns:minmax(0,1fr) auto;gap:var(--s-6)}
}
.pk__ec:hover{transform:translateY(-3px);border-color:var(--brand);
  box-shadow:0 14px 34px -18px rgba(0,32,96,.55)}
.pk__ec:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
.pk__ec-txt{display:grid;gap:.4rem}
.pk__ec-eye{font-family:var(--mono);font-size:var(--fs-100);color:var(--brand-hi);
  letter-spacing:var(--tr-wide);text-transform:uppercase}
.pk__ec-h{font-family:var(--display);font-weight:700;color:var(--n1);
  font-size:var(--fs-700);letter-spacing:-.015em;font-variation-settings:"opsz" 40;line-height:1.15}
.pk__ec-d{color:var(--n2);font-size:var(--fs-500);line-height:1.55;max-width:52ch}
.pk__ec-d b{color:var(--brand-hi);font-weight:600;font-variant-numeric:tabular-nums}
.pk__ec-go{display:inline-flex;align-items:center;gap:.6rem;white-space:nowrap;
  font-family:var(--ui);font-weight:600;font-size:var(--fs-300);color:var(--navy);
  background:var(--brand);padding:.78rem 1.25rem;border-radius:999px;
  letter-spacing:var(--tr-mid);text-transform:uppercase;
  transition:background-color var(--m-base)}
.pk__ec:hover .pk__ec-go{background:var(--brand-hi)}
.pk__ec-go i{font-style:normal;transition:transform var(--m-base)}
.pk__ec:hover .pk__ec-go i{transform:translateX(3px)}

/* ==========================================================================
   §50 seo + ads — where "monthly" stops being abstract
   ========================================================================== */
.seo{padding:clamp(3rem,8vh,5rem) 0;border-top:1px solid rgba(255,116,32,.4);
  border-image:var(--foil) 1}
.seo h2{font-size:clamp(1.9rem,5vw,3.2rem);margin:.2rem 0 .8rem}
.seo .lede{margin-bottom:clamp(1.4rem,3vw,2rem)}
.seo__grid{list-style:none;margin:0;padding:0;display:grid;
  gap:clamp(.7rem,1.5vw,1rem);grid-template-columns:minmax(0,1fr)}
/* Six tiles, so 1 / 2 / 3 columns all fill the last row exactly — the same
   shape as who__grid, deliberately. No span rules needed. */
@media (min-width:560px){.seo__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:920px){.seo__grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.seo__grid li{background:var(--paper-2);padding:clamp(1.05rem,2.3vw,1.4rem);display:grid;gap:.32rem;
  align-content:start}
.seo__grid h3{margin:0;font-family:var(--display);font-weight:800;
  font-variation-settings:"opsz" 14;font-size:var(--fs-md);color:var(--t1);
  letter-spacing:var(--tr-mid);text-transform:uppercase}
.seo__grid p{margin:0;color:var(--t2);font-size:var(--fs-md);line-height:1.5}
.seo__close{margin:clamp(1.2rem,3vw,1.7rem) 0 0;max-width:64ch;color:var(--t2);
  font-size:clamp(1rem,1.6vw,1.12rem);line-height:1.6}
.seo__close b{color:var(--t1);font-weight:600}
.seo__close a{display:inline-block;margin-left:.4rem;font-family:var(--ui);font-weight:600;
  font-size:var(--fs-300);color:var(--t1);text-decoration:none;
  border-bottom:2px solid var(--brand);padding-bottom:1px}
.seo__close a:hover{color:var(--brand-ink)}

/* ==========================================================================
   v2 — UI type. Anything you click, scan or ignore is set in the grotesque.
   Anything you read is set in the serif. That split is the whole system.
   ========================================================================== */
.btn,.btn span,.pod__btn,.pod__word,.nav a,.hdr a,.crumb,.eyebrow,
.faq__x,.ct__ways,.ft a,.ft p,.sec__aside,.tag,label,input,select,textarea,
button{font-family:var(--ui)}
h1,h2,h3,h4,h5,h6{font-family:var(--display);font-optical-sizing:auto}
.lede,p,li{font-optical-sizing:auto}

/* ==========================================================================
   v2 — service pages.

   Deliberately not the homepage's rhythm. A service page is read to decide
   something, so it is built like a document: one narrow measure for prose,
   hairline rows for the spec, a surface change where money is discussed.
   ========================================================================== */

/* ---- hero: content left, a spec panel right ---------------------------- */
.sp-hero{padding:calc(var(--hdr-h) + var(--s-7)) 0 var(--sp-sec)}
.sp-hero .crumb{margin-bottom:var(--s-6)}
.sp-hero__grid{display:grid;gap:clamp(1.6rem,4vw,3.5rem);align-items:start;
  grid-template-columns:minmax(0,1fr)}
@media (min-width:920px){.sp-hero__grid{grid-template-columns:minmax(0,1fr) 19rem}}
.sp-hero h1{font-size:var(--fs-1000);line-height:1.02;letter-spacing:-.025em;
  margin:.15em 0 0;color:var(--t1);text-wrap:balance;
  font-variation-settings:"opsz" 72;font-weight:700}
.sp-hero__lede{margin:var(--s-5) 0 0;max-width:46ch;color:var(--t2);
  font-size:var(--fs-700);line-height:1.45}
.sp-hero__cta{display:flex;flex-wrap:wrap;gap:var(--s-3);margin-top:var(--s-6)}

.sp-hero__meta{background:var(--paper-2);border:1px solid var(--line);border-radius:18px;
  padding:var(--s-5) var(--s-5) var(--s-4)}
.sp-hero__meta dl{margin:0;display:grid}
.sp-hero__meta dl>div{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-4);
  padding:.72rem 0;border-bottom:1px solid var(--line-2)}
.sp-hero__meta dl>div:last-child{border-bottom:0}
.sp-hero__meta dt{font-family:var(--mono);font-size:var(--fs-100);color:var(--t3);
  letter-spacing:var(--tr-mid);text-transform:uppercase;margin:0}
.sp-hero__meta dd{margin:0;font-family:var(--ui);font-weight:600;font-size:var(--fs-300);
  color:var(--t1);text-align:right}
.sp-hero__meta dd a{color:var(--brand-ink);text-decoration:none;
  border-bottom:1.5px solid rgba(255,116,32,.45)}
.sp-hero__meta dd a:hover{border-bottom-color:var(--brand)}

/* ---- the reading column ------------------------------------------------ */
.sp-kicker{font-family:var(--mono);font-size:var(--fs-100);color:var(--brand-ink);
  letter-spacing:var(--tr-wide);text-transform:uppercase;margin:0 0 var(--s-5)}
.sp-prose{padding:0 0 var(--sp-sec);border-top:1px solid var(--line-2)}
.sp-prose .wrap{padding-top:var(--sp-sec)}
.sp-prose__body{max-width:62ch}
.sp-prose__body p{margin:0 0 var(--s-5);font-size:var(--fs-600);line-height:1.66;color:var(--t2)}
.sp-prose__body p:last-child{margin-bottom:0}
.sp-prose__body em{font-style:italic;color:var(--t1)}
@media (min-width:1040px){
  .sp-prose .wrap{display:grid;grid-template-columns:11rem minmax(0,1fr);gap:var(--s-6)}
  .sp-kicker{margin:.55rem 0 0;position:sticky;top:calc(var(--hdr-h) + 1.5rem)}
}

/* ---- what you get: hairline spec rows, not cards ----------------------- */
.sp-spec{padding:var(--sp-sec) 0;border-top:1px solid rgba(255,116,32,.4);
  border-image:var(--foil) 1}
.sp-spec h2,.sp-steps h2,.sp-fit h2,.sp-faq h2,.sp-rel h2,.sp-price h2,.sp-end h2{
  font-size:var(--fs-800);letter-spacing:-.018em;margin:0 0 var(--s-6);color:var(--t1);
  font-variation-settings:"opsz" 48}
.sp-spec__list{list-style:none;margin:0;padding:0;counter-reset:spec;
  border-top:1px solid var(--line)}
.sp-spec__list li{display:grid;grid-template-columns:3.2rem minmax(0,1fr);gap:var(--s-4);
  align-items:baseline;padding:var(--s-4) 0;border-bottom:1px solid var(--line-2);
  transition:background-color var(--m-fast)}
.sp-spec__list li:hover{background:var(--paper-2)}
.sp-spec__list b{font-family:var(--mono);font-size:var(--fs-200);color:var(--brand-ink);
  font-weight:500;font-variant-numeric:tabular-nums}
.sp-spec__list span{font-size:var(--fs-600);color:var(--t1);line-height:1.5}

/* ---- how it runs ------------------------------------------------------- */
.sp-steps{padding:var(--sp-sec) 0;border-top:1px solid var(--line-2)}
.sp-steps__list{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-5);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr))}
.sp-steps__list li{padding:var(--s-5);background:var(--paper-2);border:1px solid var(--line);
  border-radius:16px}
.sp-steps__n{font-family:var(--mono);font-size:var(--fs-100);color:var(--t3);
  letter-spacing:var(--tr-mid);text-transform:uppercase;margin:0 0 var(--s-3)}
.sp-steps__list h3{margin:0 0 var(--s-2);font-size:var(--fs-700);color:var(--t1);
  letter-spacing:-.012em;font-variation-settings:"opsz" 36}
.sp-steps__list p{margin:0;color:var(--t2);font-size:var(--fs-500);line-height:1.55}

/* ---- price: the surface changes where money is discussed --------------- */
/* no margin-top: the warm block above ends flush against this one, and a
   stripe of paper between two colour blocks reads as a mistake. */
.sp-price{background:var(--navy);color:var(--n2);padding:var(--sp-sec-lg) 0}
.sp-price h2{color:var(--n1)}
.sp-price__model{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s-4);margin:0 0 var(--s-5);
  padding-bottom:var(--s-5);border-bottom:1px solid var(--n-line)}
.sp-price__model span{font-family:var(--mono);font-size:var(--fs-100);color:var(--n3);
  letter-spacing:var(--tr-wide);text-transform:uppercase}
.sp-price__model b{font-family:var(--display);font-weight:700;color:var(--brand-hi);
  font-size:var(--fs-800);letter-spacing:-.018em;font-variation-settings:"opsz" 48}
.sp-price__note{margin:0 0 var(--s-4);max-width:60ch;color:var(--n2);
  font-size:var(--fs-500);line-height:1.62}
.sp-price__ask{color:var(--n3)}
.sp-price__note a{color:var(--brand-hi);text-decoration:none;
  border-bottom:1.5px solid rgba(255,138,66,.45)}
.sp-price__note a:hover{border-bottom-color:var(--brand-hi)}
.sp-price .btn{margin-top:var(--s-3)}

.sp-tiers{list-style:none;margin:0 0 var(--s-6);padding:0;display:grid;gap:var(--s-4);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr))}
.sp-tier{background:rgba(244,242,236,.05);border:1px solid var(--n-line);border-radius:16px;
  padding:var(--s-5);display:grid;gap:var(--s-2);align-content:start}
.sp-tier__n{margin:0;font-family:var(--mono);font-size:var(--fs-100);color:var(--n3);
  letter-spacing:var(--tr-wide);text-transform:uppercase}
.sp-tier__p{margin:0;font-family:var(--display);font-weight:700;color:var(--brand-hi);
  font-size:var(--fs-700);letter-spacing:-.015em;font-variant-numeric:tabular-nums}
.sp-tier__l{margin:0;color:var(--n2);font-size:var(--fs-300);line-height:1.5}

/* ---- is this right for you: the honest bit ----------------------------- */
.sp-fit{padding:var(--sp-sec) 0}
.sp-fit__grid{display:grid;gap:var(--s-5);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr))}
.sp-fit__col{padding:var(--s-5);border-radius:16px;border:1px solid var(--line)}
.sp-fit__col h3{margin:0 0 var(--s-4);font-size:var(--fs-600);letter-spacing:var(--tr-mid);
  text-transform:uppercase;font-variation-settings:"opsz" 14}
.sp-fit__col ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-3)}
.sp-fit__col li{position:relative;padding-left:1.6rem;color:var(--t2);
  font-size:var(--fs-500);line-height:1.55}
.sp-fit__col li::before{position:absolute;left:0;top:0;font-family:var(--mono);
  font-size:var(--fs-300)}
.sp-fit__col--yes{background:var(--paper-2);border-color:rgba(255,116,32,.35)}
.sp-fit__col--yes h3{color:var(--brand-ink)}
.sp-fit__col--yes li::before{content:"+";color:var(--brand)}
.sp-fit__col--no h3{color:var(--t3)}
.sp-fit__col--no li::before{content:"\2013";color:var(--t3)}

/* ---- faq + related ----------------------------------------------------- */
.sp-faq{padding:var(--sp-sec) 0;border-top:1px solid var(--line-2)}
.sp-rel{padding:var(--sp-sec) 0;border-top:1px solid rgba(255,116,32,.4);
  border-image:var(--foil) 1}
.sp-rel__grid{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-4);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr))}
.sp-rel__grid a{display:grid;gap:var(--s-2);align-content:start;height:100%;
  padding:var(--s-5);background:var(--paper-2);border:1px solid var(--line);
  border-radius:16px;text-decoration:none;
  transition:border-color var(--m-base),transform var(--m-base)}
.sp-rel__grid a:hover{border-color:var(--brand);transform:translateY(-3px)}
.sp-rel__cat{margin:0;font-family:var(--mono);font-size:var(--fs-100);color:var(--t3);
  letter-spacing:var(--tr-mid);text-transform:uppercase}
.sp-rel__grid h3{margin:0;font-size:var(--fs-600);color:var(--t1);letter-spacing:-.012em;
  font-variation-settings:"opsz" 32}
.sp-rel__d{margin:0;color:var(--t2);font-size:var(--fs-300);line-height:1.5}
.sp-rel__all{margin:var(--s-5) 0 0}
.sp-rel__all a{font-family:var(--ui);font-weight:600;color:var(--t1);text-decoration:none;
  border-bottom:2px solid var(--brand);padding-bottom:2px}
.sp-rel__all a:hover{color:var(--brand-ink)}

/* ---- close ------------------------------------------------------------- */
.sp-end{padding:var(--sp-sec) 0 var(--sp-sec-lg);text-align:center}
.sp-end h2{margin-bottom:var(--s-4)}
.sp-end p{margin:0 auto var(--s-6);max-width:52ch;color:var(--t2);font-size:var(--fs-600);
  line-height:1.6}

/* v2 — the hub cards are links now, so the whole card is the hit area
   and each one states how it is priced before you commit to a click. */
.cat__c{padding:0}
.cat__c > a{display:grid;gap:.5rem;align-content:start;height:100%;text-decoration:none;
  padding:clamp(1.15rem,2.3vw,1.5rem)}
.cat__c > a:focus-visible{outline:2px solid var(--brand);outline-offset:-3px;border-radius:10px}
.cat__c h3{margin:0}
.cat__c-p{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-3);
  margin:auto 0 0;padding-top:.75rem;border-top:1px solid var(--line-2)}
.cat__c-p span{font-family:var(--mono);font-size:var(--fs-100);color:var(--t3);
  letter-spacing:var(--tr-mid);text-transform:uppercase}
.cat__c-p i{font-style:normal;color:var(--brand);opacity:0;transform:translateX(-4px);
  transition:opacity var(--m-base),transform var(--m-base)}
.cat__c:hover .cat__c-p i{opacity:1;transform:none}
.cat__c:hover .cat__c-p span{color:var(--brand-ink)}

/* ==========================================================================
   v2 — the heading split and the sub-capability section.

   H1 is plain and keyword-led; the claim underneath it is where the voice
   goes. The capability blocks are the depth layer: a named thing plus a real
   paragraph, numbered, in a two-column read at desktop.
   ========================================================================== */
.sp-hero__claim{margin:var(--s-4) 0 0;max-width:30ch;color:var(--brand-ink);
  font-family:var(--body);font-style:italic;font-size:var(--fs-800);line-height:1.18;
  letter-spacing:-.012em;text-wrap:balance}
.sp-hero__lede{margin-top:var(--s-4)}

.sp-parts{padding:var(--sp-sec) 0;border-top:1px solid rgba(255,116,32,.4);
  border-image:var(--foil) 1}
.sp-parts h2{font-size:var(--fs-800);letter-spacing:-.018em;margin:0 0 var(--s-6);
  color:var(--t1);font-variation-settings:"opsz" 48}
.sp-parts__list{display:grid;gap:0;border-top:1px solid var(--line)}
@media (min-width:900px){
  .sp-parts__list{grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:clamp(2rem,4vw,4rem)}
}
.sp-part{display:grid;grid-template-columns:2.6rem minmax(0,1fr);gap:var(--s-4);
  padding:var(--s-5) 0;border-bottom:1px solid var(--line-2);align-items:start}
.sp-part__n{margin:0;font-family:var(--mono);font-size:var(--fs-200);color:var(--brand);
  font-weight:500;font-variant-numeric:tabular-nums;padding-top:.22rem}
.sp-part h3{margin:0 0 var(--s-2);font-size:var(--fs-600);color:var(--t1);
  letter-spacing:-.01em;font-variation-settings:"opsz" 32}
.sp-part p{margin:0;color:var(--t2);font-size:var(--fs-500);line-height:1.6}

/* ---- the wildcard tile -------------------------------------------------
   Deliberately not styled like the five industries next to it. Warmer
   surface, accent heading, and the mascot leaning in from the corner so it
   reads as an aside rather than a sixth category. */
.who__c--any{position:relative;padding:0;background:var(--cream);overflow:hidden}
.who__c--any > a{position:relative;z-index:1;display:grid;gap:.35rem;align-content:start;
  height:100%;min-height:clamp(9.5rem,17vw,11.5rem);text-decoration:none;
  padding:clamp(1.1rem,2.4vw,1.5rem);
  /* keep every line clear of the mascot, whatever the tile width does */
  padding-right:clamp(4.6rem,7.5vw,6.6rem)}
.who__c--any > a:focus-visible{outline:2px solid var(--brand);outline-offset:-3px}
.who__c--any h3{color:var(--brand-ink)}
.who__c--any p{max-width:23ch}
.who__go{display:inline-flex;align-items:center;gap:.45rem;justify-self:start;
  margin-top:auto;padding-top:.6rem;
  font-family:var(--ui);font-weight:600;font-size:var(--fs-200);color:var(--t1);
  letter-spacing:var(--tr-mid);text-transform:uppercase}
.who__go i{font-style:normal;color:var(--brand-deep);transition:transform var(--m-base)}
.who__c--any:hover .who__go i{transform:translateX(4px)}

.who__fox{position:absolute;right:-.5rem;bottom:0;width:clamp(74px,8.5vw,104px);
  pointer-events:none;z-index:0;
  transform:translateY(16%) rotate(3deg);
  transition:transform var(--m-slow) var(--e-out)}
.who__fox img{display:block;width:100%;height:auto}
/* the mascot straightens up and leans in when you hover the tile */
.who__c--any:hover .who__fox{transform:translateY(2%) rotate(-3deg)}
@media (prefers-reduced-motion:reduce){
  .who__fox,.who__c--any:hover .who__fox{transition:none;transform:translateY(10%)}
}

/* the wildcard tile in SEO & Ads — same device as Who We Help, so the two
   read as one idea rather than two different flourishes */
.seo__any{position:relative;padding:0;background:var(--cream);overflow:hidden}
.seo__any > a{position:relative;z-index:1;display:grid;gap:.35rem;align-content:start;
  height:100%;min-height:clamp(9rem,15vw,10.5rem);text-decoration:none;
  padding:clamp(1.05rem,2.3vw,1.4rem);
  padding-right:clamp(4.6rem,7.5vw,6.6rem)}
.seo__any > a:focus-visible{outline:2px solid var(--brand);outline-offset:-3px}
.seo__any h3{color:var(--brand-ink)}
.seo__any p{max-width:34ch}
.seo__any:hover .who__go i{transform:translateX(4px)}
.seo__any:hover .who__fox{transform:translateY(2%) rotate(-3deg)}

/* ==========================================================================
   v2 — the category panels.

   Four colour grounds instead of four cream cards. Every pairing below was
   contrast-gated before it was written; the tightest is the mono label on
   cream at 5.31:1 against a 4.5 floor.

   The marks are stroke-only and oversized, bleeding off the bottom-right
   corner so the panel reads as a cropped surface rather than a card with a
   picture in it.
   ========================================================================== */
.svc__panels{list-style:none;margin:0;padding:0;display:grid;
  gap:clamp(.75rem,1.6vw,1.1rem);grid-template-columns:minmax(0,1fr)}
@media (min-width:760px){.svc__panels{grid-template-columns:repeat(2,minmax(0,1fr))}}

.svc__p{position:relative;border-radius:20px;overflow:hidden;isolation:isolate}
.svc__p > a{position:relative;display:grid;gap:.45rem;align-content:start;height:100%;
  min-height:clamp(15rem,26vw,19rem);text-decoration:none;
  padding:clamp(1.3rem,2.8vw,1.9rem);
  /* the mark occupies the lower right — keep every line clear of it */
  padding-bottom:clamp(3.4rem,7vw,4.6rem);
  transition:transform var(--m-base) var(--e-out)}
.svc__p:hover > a{transform:translateY(-4px)}
.svc__p > a:focus-visible{outline:2px solid var(--brand);outline-offset:-4px;border-radius:20px}

.svc__p-top{margin:0 0 .1rem;display:flex;justify-content:space-between;
  align-items:baseline;gap:var(--s-4);font-family:var(--mono);font-size:var(--fs-100);
  letter-spacing:var(--tr-wide);text-transform:uppercase}
.svc__p h3{margin:0 0 .2rem;font-family:var(--display);font-weight:700;
  font-size:clamp(1.5rem,3.4vw,2.15rem);letter-spacing:-.02em;line-height:1.05;
  font-variation-settings:"opsz" 48}
.svc__p-d{margin:0;font-size:var(--fs-300);line-height:1.5;max-width:26ch}
/* bottom-LEFT only. The bottom-right corner belongs to the mark, and a
   full-width row put the service count straight on top of it. */
.svc__p-m{position:absolute;left:clamp(1.3rem,2.8vw,1.9rem);bottom:clamp(1.1rem,2.4vw,1.5rem);
  margin:0;font-family:var(--mono);font-size:var(--fs-100);letter-spacing:var(--tr-mid);
  text-transform:uppercase}
.svc__p-m b{font-weight:500}

/* oversized, cropped by the panel's own overflow */
.svc__p-mark{position:absolute;right:-13%;bottom:-24%;width:clamp(9.5rem,18vw,13.5rem);
  height:auto;pointer-events:none;z-index:-1;opacity:.5;
  transition:transform var(--m-slow) var(--e-out),opacity var(--m-slow) var(--e-out)}
.svc__p:hover .svc__p-mark{transform:translate(-5%,-7%) rotate(-4deg);opacity:.72}

/* ---- the four grounds -------------------------------------------------- */
.svc__p--1{background:var(--navy)}
.svc__p--1 .svc__p-top,.svc__p--1 .svc__p-m{color:var(--n3)}
.svc__p--1 h3{color:var(--n1)}
.svc__p--1 .svc__p-d{color:var(--n2)}
.svc__p--1 .svc__p-m b{color:var(--brand-hi)}
.svc__p--1 .svc__p-mark{color:var(--brand-hi)}

.svc__p--2{background:var(--brand)}
.svc__p--2 .svc__p-top,.svc__p--2 .svc__p-m{color:var(--navy-2)}
.svc__p--2 h3,.svc__p--2 .svc__p-d{color:var(--navy)}
.svc__p--2 .svc__p-m b{color:var(--navy)}
.svc__p--2 .svc__p-mark{color:var(--navy);opacity:.34}
.svc__p--2:hover .svc__p-mark{opacity:.5}

.svc__p--3{background:var(--navy-2)}
.svc__p--3 .svc__p-top,.svc__p--3 .svc__p-m{color:var(--n3)}
.svc__p--3 h3{color:var(--n1)}
.svc__p--3 .svc__p-d{color:var(--n2)}
.svc__p--3 .svc__p-m b{color:var(--brand-hi)}
.svc__p--3 .svc__p-mark{color:var(--brand-hi)}

.svc__p--4{background:var(--cream)}
.svc__p--4 .svc__p-top,.svc__p--4 .svc__p-m{color:var(--brand-ink)}
.svc__p--4 h3{color:var(--t1)}
.svc__p--4 .svc__p-d{color:var(--t2)}
.svc__p--4 .svc__p-m b{color:var(--brand-ink)}
.svc__p--4 .svc__p-mark{color:var(--brand-ink);opacity:.38}
.svc__p--4:hover .svc__p-mark{opacity:.55}

@media (prefers-reduced-motion:reduce){
  .svc__p:hover > a,.svc__p:hover .svc__p-mark{transform:none}
}

/* ==========================================================================
   v2 — the hero primitives.

   Four shapes, soft, static, behind the copy. They exist to stop the first
   screen being flat type on flat paper. Every one is pulled from the same
   arc-and-circle family as the category panel marks, so the two devices read
   as one system rather than two ideas.

   Opacity is the whole design here: high enough to register as depth, low
   enough that you never look AT them. If any of these ever competes with the
   headline, lower it — do not move it.
   ========================================================================== */
.home__shapes{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.home__sh{position:absolute;display:block}

/* the disc — the largest mass, warm, sitting under the headline */
.home__sh--disc{
  left:-9%;top:6%;width:clamp(19rem,34vw,32rem);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,
    rgba(255,116,32,.115), rgba(255,116,32,.045) 55%, transparent 72%)}

/* a drawn ring, cropped by the left edge — the one stroke in the group */
.home__sh--ring{
  left:-13%;top:30%;width:clamp(15rem,26vw,24rem);aspect-ratio:1;border-radius:50%;
  border:1.5px solid rgba(0,32,96,.085)}

/* a wide arc sweeping under the CTAs */
.home__sh--arc{
  left:6%;bottom:4%;width:clamp(17rem,32vw,30rem);aspect-ratio:2/1;
  border-radius:50% 50% 0 0 / 100% 100% 0 0;
  border:1.5px solid rgba(255,116,32,.13);border-bottom:0}

/* one straight element, so the group is not entirely circular */
.home__sh--bar{
  left:0;top:23%;width:clamp(4rem,9vw,8rem);height:1.5px;
  background:linear-gradient(90deg,rgba(0,32,96,.16),transparent)}

/* The copy and the mascot sit above the atmosphere.
   .home__cue is NOT included in the position:relative here — it is already
   position:absolute with left:var(--gutter), and resetting it to relative
   turns that offset into a 56px shove that drags the whole page sideways.
   It only needs the stacking order. */
.home__grid{position:relative;z-index:1}
.home__cue{z-index:1}

/* On a phone the hero is tight and the shapes crowd the headline, so only
   the two that sit well clear of the text survive. */
@media (max-width:760px){
  .home__sh--ring,.home__sh--bar{display:none}
  .home__sh--disc{left:-26%;top:2%;width:22rem}
  .home__sh--arc{left:-6%;bottom:2%;width:20rem}
}

/* ==========================================================================
   v2 — the service index.

   Sixteen cards became sixteen ruled rows. The device borrowed from
   adcker.com is the CONTRAST — a large name against a small mono label on
   one line — not its absolute display size, which would be absurd at this
   count.

   A row cannot leave an empty cell, so all the data-n column arithmetic the
   card grid needed is gone with it.
   ========================================================================== */
.cat__index{list-style:none;margin:0;padding:0;counter-reset:none;
  border-top:1px solid rgba(255,116,32,.34)}
.cat__r{border-bottom:1px solid var(--line-2)}
.cat__r:last-child{border-bottom-color:rgba(255,116,32,.34)}

.cat__r > a{display:grid;align-items:baseline;gap:var(--s-3) var(--s-5);
  grid-template-columns:2.4rem minmax(0,1fr) 1.3rem;
  padding:clamp(1rem,2.2vw,1.45rem) clamp(.4rem,1vw,.9rem);
  text-decoration:none;position:relative;
  transition:background-color var(--m-base),padding-left var(--m-base) var(--e-out)}
@media (min-width:820px){
  .cat__r > a{grid-template-columns:2.6rem minmax(0,1fr) 13rem 1.6rem}
}
.cat__r > a:hover{background:var(--paper-2);padding-left:clamp(.9rem,2vw,1.6rem)}
.cat__r > a:focus-visible{outline:2px solid var(--brand);outline-offset:-3px;border-radius:10px}

.cat__r-n{font-family:var(--mono);font-size:var(--fs-200);color:var(--t3);
  font-variant-numeric:tabular-nums;transition:color var(--m-base)}
.cat__r:hover .cat__r-n{color:var(--brand)}

.cat__r-main{display:block;min-width:0}
/* the large half of the contrast */
.cat__r-t{display:block;font-family:var(--display);font-weight:700;
  font-size:clamp(1.22rem,2.5vw,1.85rem);line-height:1.12;letter-spacing:-.018em;
  color:var(--t1);font-variation-settings:"opsz" 40;text-wrap:balance;
  transition:color var(--m-base)}
.cat__r:hover .cat__r-t{color:var(--brand-ink)}
/* the small half */
.cat__r-d{display:block;margin-top:.34rem;color:var(--t2);
  font-size:var(--fs-300);line-height:1.5;max-width:62ch}

.cat__r-p{font-family:var(--mono);font-size:var(--fs-100);color:var(--t3);
  letter-spacing:var(--tr-mid);text-transform:uppercase;
  grid-column:2;margin-top:.1rem}
@media (min-width:820px){
  .cat__r-p{grid-column:3;margin-top:0;text-align:right;align-self:baseline}
}

/* The affordance used to be hover-only: invisible at rest, and display:none
   below 820px. But at rest is how the list is FIRST seen, and it is the only
   state a touch device ever has — so sixteen links read as sixteen
   paragraphs. The arrow now sits visible on every width and merely brightens
   and travels on hover. */
.cat__r-go{display:block;font-style:normal;color:var(--brand);justify-self:end;
  /* explicit cell, not auto-flow: grid-row alone pulled it out of order and
     collapsed the text column to one word per line */
  grid-column:3;grid-row:1;align-self:center;
  opacity:.4;transform:none;
  transition:opacity var(--m-base),transform var(--m-base) var(--e-out)}
@media (min-width:820px){ .cat__r-go{grid-column:4} }
.cat__r > a:hover .cat__r-go{opacity:1;transform:translateX(4px)}
/* no hover to fall back on, so it has to carry more weight at rest */
@media (hover:none){ .cat__r-go{opacity:.62} }

@media (prefers-reduced-motion:reduce){
  .cat__r > a,.cat__r-go{transition:none}
  .cat__r > a:hover{padding-left:clamp(.4rem,1vw,.9rem)}
}

/* ==========================================================================
   v2 — section grounds on the service pages.

   Four breaks, spaced. Not alternating: stripes emphasise nothing.
   ========================================================================== */

/* the soft lift — barely a colour, enough to mark a chapter */
.sp-tint{background:var(--paper-2)}
/* its own top rule would double up with the ground change */
.sp-tint{border-top:0}

/* the warm block */
.sp-warm{background:var(--cream);border-top:0}
/* the step cards sat on paper-2, which is invisible against cream */
.sp-warm .sp-steps__list li{background:var(--paper-3);border-color:rgba(168,60,0,.22)}
.sp-warm .sp-steps__n{color:var(--brand-ink)}

/* The close, on the DEEPEST navy.

   I shipped this in cream first, reasoning that navy would merge with the
   footer. It does — the footer gradient starts at exactly #002060, the same
   token — but the fix was the wrong lever. On cream the orange button sits at
   2.26:1 against its own ground: the most important CTA on the page, and it
   barely separates from what it sits on.

   --navy-2 solves both. The button pops at 6.51:1, the strongest of any
   candidate, and #001642 against the footer top #002060 is a real tonal step
   rather than an identical colour. The footer then darkens back toward
   #001642, so the three read as distinct bands. */
.sp-close{background:var(--navy-2);border-top:0}
.sp-close h2{color:var(--n1)}
.sp-close p{color:var(--n2)}

/* Sections that now carry a ground no longer need a drawn rule to separate
   them — the colour change IS the separation. The ones still on paper keep
   theirs. */
.sp-parts.sp-tint,.sp-faq.sp-tint{border-image:none}

/* ==========================================================================
   v2 — the packages CTA and the mobile action bar.
   ========================================================================== */

/* three prices with nothing to click was the highest-intent dead spot */
.pk__ask{margin:clamp(1.4rem,3vw,2rem) 0 0;display:grid;gap:var(--s-4);justify-items:start;
  max-width:60ch}
.pk__ask p{margin:0;color:var(--t2);font-size:var(--fs-500);line-height:1.6}

/* ---- the mobile action bar --------------------------------------------- */
.mbar{position:fixed;left:0;right:0;bottom:0;z-index:150;display:none;
  gap:var(--s-2);align-items:center;
  padding:var(--s-3) clamp(.75rem,3vw,1rem) calc(var(--s-3) + env(safe-area-inset-bottom,0px));
  background:rgba(244,242,236,.92);backdrop-filter:blur(14px);
  border-top:1px solid var(--line);
  transform:translateY(110%);transition:transform var(--m-slow) var(--e-out)}
.mbar.up{transform:none}
/* only where the header CTA is hidden — above this the header carries it */
@media (max-width:779px){ .mbar{display:flex} }

.mbar__go{flex:1 1 auto;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:48px;padding:.75rem 1rem;border-radius:999px;text-decoration:none;
  background:var(--brand);color:var(--navy);
  font-family:var(--ui);font-weight:600;font-size:var(--fs-300);
  letter-spacing:var(--tr-mid);text-transform:uppercase;
  box-shadow:0 8px 20px -8px rgba(232,93,12,.6)}
.mbar__go:active{transform:translateY(1px)}
.mbar__go:focus-visible{outline:2px solid var(--navy);outline-offset:2px}

.mbar__wa{flex:0 0 auto;display:grid;place-items:center;width:48px;height:48px;
  border-radius:50%;color:#fff;text-decoration:none;
  background:linear-gradient(160deg,#25D366,#12A150);
  box-shadow:0 8px 20px -8px rgba(18,161,80,.6)}
.mbar__wa svg{width:22px;height:22px}
.mbar__wa:active{transform:translateY(1px)}
.mbar__wa:focus-visible{outline:2px solid var(--navy);outline-offset:2px}

/* the bar absorbs the float on mobile — two fixed controls is clutter */
@media (max-width:779px){
  .wa{display:none!important}
  /* and nothing at the foot of the page hides behind it */
  .ft{padding-bottom:calc(var(--s-9) + 3.5rem)}
}

/* At 320px the uppercase tracking pushes "Start a conversation" onto a second
   line and the bar grows from 74px to 99px. Dropping the tracking and a step
   of size keeps it on one line — a button label is the riskiest string on a
   small screen, and this one has no shorter honest wording. */
@media (max-width:360px){
  .mbar__go{letter-spacing:0;font-size:var(--fs-200);padding-inline:.75rem}
}

@media (prefers-reduced-motion:reduce){
  .mbar{transition:none}
}

/* ==========================================================================
   v2 — the Who / SEO tiles, brought up to the category panels.

   Same device as .svc__p: rounded card, hover lift, an oversized stroke mark
   cropped by the card's own edge. White ground rather than the panels'
   colour, so these support that section instead of competing with it.
   ========================================================================== */
.who__c,.seo__grid > li{
  position:relative;overflow:hidden;isolation:isolate;
  background:var(--paper-3);border:1px solid var(--line);border-radius:18px;
  padding:clamp(1.1rem,2.4vw,1.5rem);
  display:grid;gap:.35rem;align-content:start;
  transition:border-color var(--m-base),transform var(--m-base) var(--e-out)}
.who__c:hover,.seo__grid > li:hover{border-color:var(--brand);transform:translateY(-3px)}

/* Bottom-right, like the panels. The top-right looks empty but is not: the
   uppercase heading spans most of the tile width, so a mark up there clashed
   with all ten rather than six. The copy is capped below instead, which is
   the only change that actually removes the overlap. */
.tile__mark{position:absolute;right:-20%;bottom:-34%;width:clamp(6.5rem,12vw,8.5rem);
  height:auto;pointer-events:none;z-index:-1;color:var(--brand-ink);opacity:.17;
  transition:transform var(--m-slow) var(--e-out),opacity var(--m-slow) var(--e-out)}
.who__c:hover .tile__mark,.seo__grid > li:hover .tile__mark{
  transform:translate(-5%,-7%) rotate(-4deg);opacity:.3}

/* the wildcard tiles keep their cream ground and their fox */
/* the copy stops short of the corner the mark occupies */
.who__c > p,.seo__grid > li > p{max-width:23ch}

.who__c--any,.seo__any{background:var(--cream);border-color:rgba(168,60,0,.28)}

@media (prefers-reduced-motion:reduce){
  .who__c:hover,.seo__grid > li:hover,
  .who__c:hover .tile__mark,.seo__grid > li:hover .tile__mark{transform:none}
}

/* ==========================================================================
   v2 — the CTAs the audit found missing.
   Same shape in all three places so they read as one device, not three.
   ========================================================================== */
.faq__cta,.cat__cta,.ab__cta{
  display:grid;gap:var(--s-4);justify-items:start;max-width:62ch;
  margin:clamp(1.6rem,3.5vw,2.4rem) 0 0;
  padding:clamp(1.2rem,2.6vw,1.6rem) clamp(1.2rem,2.6vw,1.7rem);
  background:var(--paper-2);border:1px solid var(--line);border-radius:18px}
.faq__cta p,.cat__cta p,.ab__cta p{
  margin:0;color:var(--t2);font-size:var(--fs-500);line-height:1.6}

/* the services band sits between two categories, so it gets room either side */
.cat__cta{margin:clamp(2rem,5vw,3rem) 0;max-width:none}

/* the way out of a legal page */
.lg__back{display:flex;flex-wrap:wrap;gap:var(--s-3) var(--s-6);
  margin-top:clamp(1.6rem,3vw,2.2rem);padding-top:clamp(1.2rem,2.4vw,1.6rem);
  border-top:1px solid var(--line)}
.lg__back a{font-family:var(--ui);font-weight:600;font-size:var(--fs-300);
  color:var(--t1);text-decoration:none;border-bottom:2px solid var(--brand);
  padding-bottom:2px}
.lg__back a:hover{color:var(--brand-ink)}

/* ==========================================================================
   The services hub closing CTA.

   This section shipped with NO rule at all — it had zero vertical padding, so
   the button overflowed its own section by 26px and overlapped the footer.
   It now carries the same rhythm as the equivalent block on a service page
   (.sp-end), which is the section it mirrors.
   ========================================================================== */
.sv-cta{padding:var(--sp-sec) 0 var(--sp-sec-lg);
  border-top:1px solid rgba(255,116,32,.4);border-image:var(--foil) 1}
.sv-cta h2{font-size:var(--fs-900);letter-spacing:-.02em;margin:0 0 var(--s-4);color:var(--t1)}
.sv-cta .lede{margin:0 0 var(--s-6);max-width:56ch}

/* ==========================================================================
   v2 — the four moves as colour blocks.

   Navy and orange only, alternating. A four-colour version mapped each move
   to the category that performs it, which was a neat idea and a quieter
   result; two colours alternating reads harder and is what the brand actually
   runs on.

   Note the li in the bar selectors: .beats li::before is 0-1-2 specificity and
   outranks a bare class, so a per-ground bar colour written as
   .beats--create::before silently never applies.
   ========================================================================== */
.beats--identify,.beats--create{background:var(--navy)}
.beats--identify b,.beats--create b{color:var(--n1)}
.beats--identify b i,.beats--create b i{color:var(--n3)}
.beats--identify span,.beats--create span{color:var(--n2)}
.beats li.beats--identify::before,
.beats li.beats--create::before{background:var(--brand-hi)}

.beats--build,.beats--perform{background:var(--brand)}
.beats--build b,.beats--build span,
.beats--perform b,.beats--perform span{color:var(--navy)}
.beats--build b i,.beats--perform b i{color:var(--navy-2)}
/* an orange bar on an orange ground is invisible */
.beats li.beats--build::before,
.beats li.beats--perform::before{background:var(--navy)}

@media (prefers-reduced-motion:reduce){
  .beats li:hover,.beats li:hover .beats__mark{transform:none}
}

/* the loop, cropped by each move block, with that move pinned on it */
.beats li{isolation:isolate}
/* cropped into the corner rather than spanning the block — at full width the
   loop ran straight through the body copy */
/* Inset, not cropped — an icon has to be whole to be read. Sits in the band
   the min-height opens up below the copy. */
.beats__mark{position:absolute;right:6%;bottom:8%;width:clamp(3.2rem,5.5vw,4.4rem);
  height:auto;pointer-events:none;z-index:-1;opacity:.32;
  transition:transform var(--m-slow) var(--e-out),opacity var(--m-slow) var(--e-out)}
.beats li:hover .beats__mark{transform:translateY(-4px) rotate(-5deg);opacity:.46}
/* and the copy stops short of it */
.beats span{max-width:24ch}
/* ink per ground: orange on navy, navy on orange */
.beats--identify .beats__mark,.beats--create .beats__mark{color:var(--brand-hi)}
.beats--build .beats__mark,.beats--perform .beats__mark{color:var(--navy-2)}

/* ==========================================================================
   404 — a loop with a piece missing.

   The whole page turns on one idea: the loop is open because the page is
   gone, and it closes the moment you reach for the way back. That is the
   brand concept doing actual work rather than decorating.

   Original geometry throughout. The trademark is never redrawn.
   ========================================================================== */
.nf{padding-block:clamp(2.5rem,7vh,4.5rem) clamp(3.5rem,9vh,6rem);
  min-height:calc(100svh - 8rem);display:grid;place-items:center}
.nf__in{display:grid;justify-items:center;text-align:center;gap:clamp(.9rem,2.2vw,1.35rem);
  max-width:46rem}

/* ---- the character ---- */
.nf__face{width:min(100%,21rem);aspect-ratio:220/186;cursor:pointer;
  transition:opacity var(--m-slow) var(--e-out)}
.nf__face svg{width:100%;height:100%;overflow:visible}
.nf__face.is-asleep{opacity:.72}

.nf__ring{fill:none;stroke:var(--navy);stroke-width:10;stroke-linecap:round;
  transition:stroke-dasharray var(--m-slow) var(--e-out),stroke var(--m-slow) var(--e-out)}
/* reaching for the exit closes the loop */
.nf__face.is-happy .nf__ring{stroke-dasharray:100 0}

.nf__spark{fill:none;stroke:var(--brand);stroke-width:10;stroke-linecap:round;
  animation:nf-run 4.2s linear infinite}
@keyframes nf-run{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}

.nf__white{fill:#fff;stroke:var(--line);stroke-width:1.4}
.nf__pupil{fill:var(--navy)}
.nf__glint{fill:#fff;opacity:.9}
/* the lid is the page ground, so closing it simply erases the eye */
.nf__lid{fill:var(--paper)}
.nf__mouth{fill:none;stroke:var(--navy);stroke-width:5;stroke-linecap:round;
  transition:stroke var(--m-base) var(--e-out),d var(--m-base) var(--e-out)}
.nf__face.is-happy .nf__mouth{stroke:var(--brand-deep)}
.nf__shadow{fill:rgba(7,22,48,.16)}

.nf__z{fill:var(--t2);font-family:var(--display);font-weight:800;font-size:15px;opacity:0;
  transform-box:fill-box;transform-origin:50% 50%}
.nf__face.is-asleep .nf__z{animation:nf-z 2.9s var(--e-out) infinite}
.nf__face.is-asleep .nf__z:nth-of-type(2){animation-delay:.95s}
.nf__face.is-asleep .nf__z:nth-of-type(3){animation-delay:1.9s}
@keyframes nf-z{
  0%{opacity:0;transform:translate(0,0) scale(.7)}
  20%{opacity:.8}
  100%{opacity:0;transform:translate(15px,-34px) scale(1.15)}
}

/* ---- the words ---- */
.nf__eyebrow{color:var(--brand-ink);letter-spacing:var(--tr-wide);text-transform:uppercase;
  font-size:var(--fs-sm);margin:0}
.nf__h{font-family:var(--display);font-weight:800;letter-spacing:-.03em;line-height:1.02;
  text-wrap:balance;color:var(--t1);margin:0;font-size:clamp(1.9rem,5.4vw,3.2rem)}
.nf__sub{color:var(--t2);margin:0;max-width:44ch}

.nf__ctas{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center;margin-top:.5rem}

/* ---- the four categories, as a hairline row ---- */
.nf__cats{margin-top:clamp(1.4rem,4vw,2.2rem);width:100%}
.nf__catsLede{color:var(--t2);letter-spacing:var(--tr-wide);text-transform:uppercase;
  font-size:var(--fs-sm);margin:0 0 .8rem}
.nf__cats ul{list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;justify-content:center;gap:1px;
  border-block:1px solid var(--line)}
.nf__cats li{flex:1 1 9rem}
.nf__cats a{display:block;padding:.85rem .7rem;text-decoration:none;color:var(--t1);
  font-family:var(--mono);font-size:var(--fs-sm);
  transition:background-color var(--m-base) var(--e-out),color var(--m-base) var(--e-out)}
.nf__cats a:hover,.nf__cats a:focus-visible{background:var(--navy);color:var(--paper)}

@media (prefers-reduced-motion:reduce){
  .nf__spark{animation:none;stroke-dasharray:none;opacity:.55}
  .nf__face{cursor:default}
  .nf__face.is-asleep .nf__z{animation:none}
}