/* Layout concept: plum/pink editorial agency site — utility bar, mega-menu nav,
   rounded media-led cards, full-bleed plum bands, photography slots throughout. */

:root{
  --plum:#350F45;
  --plum-deep:#1C0725;
  --plum-mid:#4C1A61;
  /* Prices and figures. Plum on light; on dark it must NOT stay plum, or every
     number on a dark card reads as grey mush. Kept separate from --plum because
     --plum is also a background and cannot be flipped. */
  --fig:#350F45;
  --fig-rule:#350F45;
  --pink:#FF7ED4;
  --pink-deep:#E23FA6;
  /* readable pink for small link text on a light background */
  --pink-ink:#B51C70;
  --loss:#C32C40;

  --bg:#FBF6FA;
  --surface:#FFFFFF;
  --surface-2:#F3E9F1;
  --ink:#17091E;
  --muted:#6E5C77;
  --line:rgba(53,15,69,.14);
  --line-strong:rgba(53,15,69,.26);

  --band:#350F45;
  --on-band:#FBF6FA;
  --on-band-muted:#D6C3DE;

  --display:"Familjen Grotesk","Helvetica Neue",Arial,sans-serif;
  --body:"Public Sans",system-ui,-apple-system,Segoe UI,sans-serif;
  --mono:"DM Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --r-sm:10px;
  --r:18px;
  --r-lg:26px;
  --shadow:0 20px 44px -28px rgba(28,7,37,.55);
  --shadow-lg:0 36px 70px -40px rgba(28,7,37,.6);

  --wrap:1220px;
  --gut:22px;

  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#150520;
    --fig:#F4EAF2;
    --pink-ink:#FF7ED4;
    --loss:#FF8095;
    --fig-rule:rgba(255,126,212,.55);
    --surface:#1F0A2B;
    --surface-2:#2A1038;
    --ink:#F4EAF2;
    --muted:#B6A1C0;
    --line:rgba(244,234,242,.14);
    --line-strong:rgba(244,234,242,.26);
    --band:#2A1038;
    --on-band:#F4EAF2;
    --on-band-muted:#C3AED0;
    --shadow:0 20px 44px -28px rgba(0,0,0,.8);
    --shadow-lg:0 36px 70px -40px rgba(0,0,0,.85);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#150520;
  --fig:#F4EAF2;
  --pink-ink:#FF7ED4;
  --loss:#FF8095;
  --fig-rule:rgba(255,126,212,.55);
  --surface:#1F0A2B;
  --surface-2:#2A1038;
  --ink:#F4EAF2;
  --muted:#B6A1C0;
  --line:rgba(244,234,242,.14);
  --line-strong:rgba(244,234,242,.26);
  --band:#2A1038;
  --on-band:#F4EAF2;
  --on-band-muted:#C3AED0;
  --shadow:0 20px 44px -28px rgba(0,0,0,.8);
  --shadow-lg:0 36px 70px -40px rgba(0,0,0,.85);
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--body);font-size:clamp(1rem,.95rem + .2vw,1.07rem);
  line-height:1.65;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
[hidden]{display:none!important}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

h1,h2,h3,h4{font-family:var(--display);font-weight:700;line-height:1.03;letter-spacing:-.032em;margin:0;text-wrap:balance}
p{margin:0}
a{color:inherit}
:where(a,button,input,select,textarea,summary):focus-visible{outline:3px solid var(--pink-deep);outline-offset:3px;border-radius:4px}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.section{padding-block:clamp(58px,7.5vw,106px)}

.lbl{
  font-family:var(--mono);font-size:.68rem;font-weight:500;letter-spacing:.17em;
  text-transform:uppercase;color:var(--pink-deep);margin:0;
}
.lbl--rule{display:flex;align-items:center;gap:13px}
.lbl--rule::after{content:"";flex:1;height:1px;background:var(--line)}
.lede{font-size:clamp(1.07rem,1rem + .4vw,1.3rem);font-weight:300;color:var(--muted);max-width:56ch;line-height:1.55}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--display);font-weight:600;font-size:.93rem;
  text-decoration:none;padding:14px 26px;border-radius:999px;border:2px solid var(--plum);
  background:var(--plum);color:#fff;cursor:pointer;
  transition:transform .16s ease,background .16s ease,color .16s ease,border-color .16s ease,box-shadow .16s ease;
}
.btn:hover{transform:translateY(-2px);background:var(--plum-mid);border-color:var(--plum-mid);box-shadow:var(--shadow)}
.btn--pink{background:var(--pink);border-color:var(--pink);color:var(--plum-deep)}
.btn--pink:hover{background:var(--pink-deep);border-color:var(--pink-deep);color:#fff}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--line-strong)}
.btn--ghost:hover{background:var(--plum);border-color:var(--plum);color:#fff}
.btn--onband{background:var(--pink);border-color:var(--pink);color:var(--plum-deep)}
.btn--onband:hover{background:#fff;border-color:#fff;color:var(--plum)}
.btn--onband-ghost{background:transparent;border-color:rgba(255,255,255,.4);color:var(--on-band)}
.btn--onband-ghost:hover{background:#fff;border-color:#fff;color:var(--plum)}
.btn--sm{padding:11px 19px;font-size:.84rem}
.btnrow{display:flex;flex-wrap:wrap;gap:12px}

/* ---------- photo slots ---------- */
.photo{
  position:relative;border-radius:var(--r);overflow:hidden;background:var(--surface-2);
  border:1px solid var(--line);aspect-ratio:3/2;max-width:100%;
  background-image:repeating-linear-gradient(135deg,transparent 0 13px,rgba(53,15,69,.045) 13px 14px);
  display:flex;align-items:flex-end;
}
:root[data-theme="dark"] .photo{background-image:repeating-linear-gradient(135deg,transparent 0 13px,rgba(255,255,255,.05) 13px 14px)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .photo{background-image:repeating-linear-gradient(135deg,transparent 0 13px,rgba(255,255,255,.05) 13px 14px)}}
.photo::before{
  content:"";position:absolute;top:14px;left:14px;width:22px;height:22px;
  border-top:2px solid var(--pink-deep);border-left:2px solid var(--pink-deep);border-radius:3px 0 0 0;
}
.photo img{width:100%;height:100%;object-fit:cover}
.photo__cap{
  position:relative;z-index:1;margin:0;padding:14px 16px;width:100%;
  font-family:var(--mono);font-size:.63rem;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);
  background:linear-gradient(to top,rgba(251,246,250,.92),rgba(251,246,250,0));
}
:root[data-theme="dark"] .photo__cap{background:linear-gradient(to top,rgba(21,5,32,.92),rgba(21,5,32,0))}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .photo__cap{background:linear-gradient(to top,rgba(21,5,32,.92),rgba(21,5,32,0))}}
.photo--tall{aspect-ratio:4/5}
.photo--wide{aspect-ratio:16/9}
.photo--square{aspect-ratio:1/1}
.photo--onband{border-color:rgba(255,255,255,.22);background-color:rgba(255,255,255,.05);background-image:repeating-linear-gradient(135deg,transparent 0 13px,rgba(255,255,255,.07) 13px 14px)}
.photo--onband .photo__cap{color:var(--on-band-muted);background:linear-gradient(to top,rgba(28,7,37,.9),rgba(28,7,37,0))}

/* ---------- utility bar ---------- */
.util{background:var(--plum-deep);color:var(--on-band-muted);font-family:var(--mono);font-size:.7rem;letter-spacing:.03em}
.util__row{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:40px;flex-wrap:wrap;padding-block:8px}
.util__left{display:flex;align-items:center;gap:10px}
.util__dot{width:7px;height:7px;background:var(--pink);border-radius:50%;flex:none}
.util__right{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.util a{color:#fff;text-decoration:none}
.util a:hover{color:var(--pink)}
.util__lang{border:1px solid rgba(255,255,255,.3);border-radius:999px;padding:3px 11px;letter-spacing:.09em}
.util__theme{display:inline-flex;align-items:center;justify-content:center;width:23px;height:23px;flex:none;padding:0;border:1px solid rgba(255,255,255,.3);border-radius:50%;background:none;color:inherit;cursor:pointer;-webkit-appearance:none;appearance:none}
.util__theme:hover{border-color:var(--pink);color:var(--pink)}
.util__theme:focus-visible{outline:2px solid var(--pink);outline-offset:2px}
.util__theme .ic{width:12px;height:12px;flex:none;display:block}
.util__theme .ic--sun{display:none}
:root[data-theme="dark"] .util__theme .ic--sun{display:block}
:root[data-theme="dark"] .util__theme .ic--moon{display:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .util__theme .ic--sun{display:block}}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .util__theme .ic--moon{display:none}}
@media (max-width:760px){.util__hide{display:none}}

/* ---------- nav ---------- */
.nav{
  position:sticky;top:env(safe-area-inset-top,0px);z-index:100;
  background:rgba(251,246,250,.93);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);
}
:root[data-theme="dark"] .nav{background:rgba(21,5,32,.93)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .nav{background:rgba(21,5,32,.93)}}
.nav__row{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:78px}
.brand{display:inline-flex;align-items:center;text-decoration:none;flex:none}
.brandlogo{display:block;height:30px;width:auto}
.brandlogo--ondark{display:none}
:root[data-theme="dark"] .brandlogo--onlight{display:none}
:root[data-theme="dark"] .brandlogo--ondark{display:block}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .brandlogo--onlight{display:none}}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .brandlogo--ondark{display:block}}
@media (max-width:420px){.nav .brandlogo{height:24px}}

.menu{display:flex;align-items:center;gap:3px;list-style:none;margin:0;padding:0}
.menu__btn{
  font-family:var(--display);font-weight:600;font-size:.95rem;color:var(--ink);
  background:none;border:0;padding:11px 16px;cursor:pointer;text-decoration:none;
  display:inline-flex;align-items:center;gap:7px;border-radius:999px;transition:background .15s ease;
}
.menu__btn:hover,.menu__btn[aria-expanded="true"]{background:var(--surface-2)}
.menu__btn svg{width:9px;height:9px;flex:none;transition:transform .2s ease;color:var(--pink-deep)}
.menu__btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.nav__cta{display:flex;align-items:center;gap:10px;flex:none}

.mega{
  position:absolute;left:0;right:0;top:100%;
  background:var(--surface);border-top:1px solid var(--line);
  box-shadow:var(--shadow-lg);border-radius:0 0 var(--r-lg) var(--r-lg);
}
.mega__in{display:grid;grid-template-columns:repeat(2,minmax(0,1fr)) minmax(0,1.05fr);gap:30px;padding-block:32px 36px}
.mega__col h3{font-size:.7rem;font-family:var(--mono);font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--pink-deep);margin-bottom:15px}
.mega__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.mega__list a{
  display:block;text-decoration:none;padding:9px 12px;margin-left:-12px;border-radius:var(--r-sm);
  font-family:var(--display);font-weight:600;font-size:.96rem;transition:background .14s ease;
}
.mega__list a span{display:block;font-family:var(--body);font-weight:300;font-size:.82rem;color:var(--muted);margin-top:2px;line-height:1.45}
.mega__list a:hover{background:var(--surface-2)}
.mega__feature{background:var(--plum);color:#fff;padding:24px;border-radius:var(--r);display:flex;flex-direction:column;gap:12px}
.mega__feature .lbl{color:var(--pink)}
.mega__feature h4{font-size:1.24rem}
.mega__feature p{font-size:.89rem;font-weight:300;color:var(--on-band-muted)}
.mega__feature .btn{margin-top:auto;align-self:flex-start}

.burger{display:none;background:none;border:1px solid var(--line-strong);border-radius:999px;padding:10px 18px;cursor:pointer;color:var(--ink);font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase}

.mnav{display:none;border-top:1px solid var(--line);background:var(--surface);max-height:74vh;overflow-y:auto}
.mnav__group{border-bottom:1px solid var(--line)}
.mnav__head{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:none;border:0;padding:17px var(--gut);cursor:pointer;color:var(--ink);
  font-family:var(--display);font-weight:700;font-size:1.02rem;text-align:left;text-decoration:none;
}
.mnav__head svg{width:11px;height:11px;flex:none;color:var(--pink-deep);transition:transform .2s ease}
.mnav__head[aria-expanded="true"] svg{transform:rotate(180deg)}
.mnav__panel{padding:0 var(--gut) 16px;display:flex;flex-direction:column}
.mnav__panel a{text-decoration:none;padding:10px 0;font-size:.95rem;border-top:1px solid var(--line);color:var(--muted)}
.mnav__foot{padding:18px var(--gut) 26px;display:flex;flex-direction:column;gap:10px}

@media (max-width:1060px){
  .menu,.nav__cta .btn--ghost{display:none}
  .burger{display:inline-block}
}

/* ---------- hero ---------- */
.hero{padding-block:clamp(22px,2.8vw,40px) clamp(30px,4vw,48px)}
.hero__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(30px,5vw,62px);align-items:center}
@media (max-width:960px){.hero__grid{grid-template-columns:1fr}}
.hero h1{font-size:clamp(2.5rem,7vw,4.9rem);max-width:15ch;margin-top:20px}
.hero h1 mark{background:none;color:var(--pink-deep);position:relative;white-space:nowrap}
.hero h1 mark::after{content:"";position:absolute;left:0;right:0;bottom:.02em;height:.1em;background:var(--pink);border-radius:999px;opacity:.55}
.hero .lede{margin-top:24px}
.hero__cta{margin-top:32px}
.hero__meta{display:flex;flex-wrap:wrap;gap:22px;margin-top:34px;padding-top:24px;border-top:1px solid var(--line)}
.hero__meta div{min-width:0}
.hero__meta b{display:block;font-family:var(--display);font-size:1.02rem;font-weight:700}
.hero__meta span{font-family:var(--mono);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}

/* ---------- marquee strip ---------- */
.strip{border-block:1px solid var(--line);background:var(--surface)}
.strip__track{display:flex;flex-wrap:wrap}
.strip__item{flex:1 1 0;min-width:160px;padding:20px 18px;border-left:1px solid var(--line);text-decoration:none;transition:background .15s ease}
.strip__item:first-child{border-left:0}
.strip__item:hover{background:var(--surface-2)}
.strip__item b{display:block;font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;color:var(--pink-deep);margin-bottom:6px}
.strip__item span{font-family:var(--display);font-weight:600;font-size:.95rem}
@media (max-width:820px){
  .strip__item{flex:1 1 50%;border-top:1px solid var(--line)}
  .strip__item:nth-child(-n+2){border-top:0}
  .strip__item:nth-child(odd){border-left:0}
}

/* ---------- section heads ---------- */
.shead{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;flex-wrap:wrap;margin-bottom:34px}
.shead h2{font-size:clamp(1.95rem,4.3vw,3.1rem);max-width:18ch}
.shead p{max-width:36ch;font-size:.98rem;color:var(--muted);font-weight:300}
.shead__stack{display:flex;flex-direction:column;gap:13px}
/* "See it live" under a section heading. Sits on light sections and on plum
   bands, so the colour flips with the surface. */
.sdemo{margin:0}
.sdemo a{display:inline-block;font-family:var(--mono);font-size:.7rem;letter-spacing:.07em;
  text-transform:uppercase;color:var(--pink-ink);text-decoration:none;
  border-bottom:1px solid currentColor;padding-bottom:3px}
.sdemo a:hover{color:var(--ink)}
.sdemo a:focus-visible{outline:2px solid var(--pink);outline-offset:3px}
.band .sdemo a{color:var(--pink)}
.band .sdemo a:hover{color:#fff}

/* ---------- switch ---------- */
.switch{display:inline-flex;border:1px solid var(--line-strong);border-radius:999px;padding:5px;gap:4px;margin-bottom:28px;flex-wrap:wrap}
.switch button{
  font-family:var(--mono);font-size:.71rem;font-weight:500;letter-spacing:.09em;text-transform:uppercase;
  padding:10px 18px;border:0;border-radius:999px;background:transparent;color:var(--muted);cursor:pointer;transition:.15s;
}
.switch button[aria-selected="true"]{background:var(--plum);color:#fff}
.switch button:hover{color:var(--ink)}
.switch button[aria-selected="true"]:hover{color:#fff}

/* ---------- service cards ---------- */
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
@media (max-width:1000px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.cards{grid-template-columns:1fr}}
.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:24px 23px 22px;display:flex;flex-direction:column;text-decoration:none;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--pink-deep)}
.card__top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:16px;font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;color:var(--pink-deep)}
.tag{font-size:.59rem;letter-spacing:.11em;padding:5px 10px;border-radius:999px;border:1px solid var(--line);color:var(--muted);text-transform:uppercase}
.tag--partner{background:var(--pink);border-color:var(--pink);color:var(--plum-deep)}
.card h3{font-size:1.32rem;margin-bottom:9px}
.card p{font-size:.94rem;font-weight:300;color:var(--muted);margin-bottom:18px}
.card ul{list-style:none;margin:0 0 20px;padding:0;font-size:.87rem;color:var(--muted)}
.card ul li{padding:8px 0;border-top:1px solid var(--line);display:flex;gap:9px}
.card ul li::before{content:"";flex:none;width:5px;height:5px;margin-top:9px;border-radius:50%;background:var(--pink)}
.card__foot{margin-top:auto;display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding-top:14px;border-top:2px solid var(--fig-rule)}
.card__price{font-family:var(--display);font-weight:700;font-size:1.18rem}
.card__go{font-family:var(--mono);font-size:.68rem;letter-spacing:.07em;text-transform:uppercase;color:var(--pink-deep)}

/* ---------- band ---------- */
.band{background:var(--band);color:var(--on-band)}
.band .lbl{color:var(--pink)}
.band .lbl--rule::after{background:rgba(255,255,255,.22)}
.band h2{font-size:clamp(1.95rem,4.3vw,3.1rem);max-width:20ch}
.band p{color:var(--on-band-muted)}
/* A widget mockup is a card sitting ON the band, not text on the band, so it
   keeps the page's own colours. Without this the band rule wins on specificity
   and every label inside the card is painted band-lilac — near invisible on the
   card's light background. */
.band .wgt p{color:var(--muted)}
.band .wgt p.wgt__q{color:var(--ink)}
.band .wgt p.wgt__foot{color:var(--fig)}
.band--deep{background:var(--plum-deep)}

.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px;margin-top:42px}
@media (max-width:920px){.steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px}}
@media (max-width:540px){.steps{grid-template-columns:1fr}}
.step{border-top:2px solid var(--pink);padding-top:16px}
.step__n{font-family:var(--mono);font-size:.69rem;letter-spacing:.15em;color:var(--pink);margin-bottom:11px}
.step h3{font-size:1.22rem;margin-bottom:8px}
.step p{font-size:.93rem;font-weight:300}

/* ---------- media feature rows ---------- */
.feature{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,4.5vw,58px);align-items:center}
@media (max-width:880px){.feature{grid-template-columns:1fr}}
.feature--flip .feature__media{order:-1}
@media (max-width:880px){.feature--flip .feature__media{order:0}}
.feature h2{font-size:clamp(1.7rem,3.6vw,2.6rem);margin:16px 0 14px}
.feature p{color:var(--muted);font-weight:300}
.feature p+p{margin-top:13px}

/* ---------- bilingual ---------- */
.bi{display:grid;grid-template-columns:1fr 1fr;border:1px solid rgba(255,255,255,.22);border-radius:var(--r-lg);overflow:hidden}
@media (max-width:780px){.bi{grid-template-columns:1fr}}
.bi__col{padding:32px 30px}
.bi__col+.bi__col{border-left:1px solid rgba(255,255,255,.22)}
@media (max-width:780px){.bi__col+.bi__col{border-left:0;border-top:1px solid rgba(255,255,255,.22)}}
.bi__lang{font-family:var(--mono);font-size:.67rem;letter-spacing:.17em;color:var(--pink);margin-bottom:13px}
.bi__col h3{font-size:clamp(1.3rem,2.3vw,1.75rem);margin-bottom:11px}

/* ---------- chips ---------- */
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chips a{
  text-decoration:none;font-family:var(--display);font-weight:600;font-size:.92rem;
  padding:11px 20px;border:1px solid var(--line-strong);border-radius:999px;color:var(--muted);transition:.15s;
}
.chips a:hover{border-color:var(--pink-deep);color:var(--ink);background:var(--surface)}

/* ---------- page header ---------- */
.phead{border-bottom:1px solid var(--line);padding-block:clamp(36px,5vw,66px)}
.phead__grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(26px,4.5vw,54px);align-items:center}
@media (max-width:900px){.phead__grid{grid-template-columns:1fr}}
.crumb{font-family:var(--mono);font-size:.68rem;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);margin-bottom:18px}
.crumb a{text-decoration:none}
.crumb a:hover{color:var(--pink-deep)}
.phead h1{font-size:clamp(2.2rem,5.4vw,3.8rem);max-width:17ch}
.phead .lede{margin-top:18px}
.spec{display:flex;flex-wrap:wrap;margin-top:28px;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--surface)}
.spec__cell{flex:1 1 160px;min-width:0;padding:15px 19px;border-left:1px solid var(--line)}
.spec__cell:first-child{border-left:0}
.spec__cell b{display:block;font-family:var(--display);font-size:1.14rem;font-weight:700;margin-top:3px}
.spec__cell span{font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
@media (max-width:680px){.spec__cell{flex:1 1 50%;border-top:1px solid var(--line)}.spec__cell:nth-child(-n+2){border-top:0}.spec__cell:nth-child(odd){border-left:0}}

/* ---------- prose / duo ---------- */
.duo{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(26px,5vw,62px);align-items:start}
@media (max-width:880px){.duo{grid-template-columns:1fr}}
.prose{max-width:62ch;color:var(--muted);font-weight:300}
.prose p+p{margin-top:17px}
.prose strong{font-weight:600;color:var(--ink)}

.deliver{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media (max-width:980px){.deliver{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.deliver{grid-template-columns:1fr}}
.deliver__item{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:22px 21px}
.deliver__item h3{font-size:1.08rem;margin-bottom:8px}
.deliver__item p{font-size:.92rem;font-weight:300;color:var(--muted)}
.deliver__item .lbl{margin-bottom:11px}

/* price */
.price{display:grid;grid-template-columns:1.1fr .9fr;gap:18px}
@media (max-width:760px){.price{grid-template-columns:1fr}}
.price__main{background:var(--plum);color:#fff;border-radius:var(--r-lg);padding:30px 28px}
.price__main .lbl{color:var(--pink)}
.price__main p{color:var(--on-band-muted);font-weight:300}
.price__fig{font-family:var(--display);font-weight:700;font-size:clamp(2.2rem,4.8vw,3.2rem);letter-spacing:-.04em;margin:12px 0 8px}
.price__side{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:30px 28px}
.price__side ul{list-style:none;margin:14px 0 0;padding:0;font-size:.92rem;color:var(--muted);font-weight:300}
.price__side li{padding:10px 0;border-top:1px solid var(--line)}

/* FAQ */
.faq{max-width:880px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  cursor:pointer;list-style:none;padding:19px 0;display:flex;align-items:center;justify-content:space-between;gap:16px;
  font-family:var(--display);font-weight:600;font-size:1.07rem;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--mono);font-size:1.25rem;color:var(--pink-deep);flex:none}
.faq details[open] summary::after{content:"–"}
.faq p{padding:0 0 21px;font-size:.96rem;font-weight:300;color:var(--muted);max-width:68ch}

/* closing CTA */
.close{text-align:center}
.close h2{font-size:clamp(2.1rem,4.8vw,3.4rem);max-width:19ch;margin-inline:auto}
.close p{margin:15px auto 28px;max-width:46ch;color:var(--muted);font-weight:300}
.close .btnrow{justify-content:center}
.close .lbl{display:flex;justify-content:center}

/* contact form */
.form{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(24px,3.4vw,38px);box-shadow:var(--shadow)}
.field{margin-bottom:18px}
.field label{display:block;font-family:var(--mono);font-size:.65rem;font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.field input,.field select,.field textarea{
  width:100%;font-family:var(--body);font-size:1rem;color:var(--ink);background:var(--bg);
  border:1px solid var(--line);border-radius:var(--r-sm);padding:13px 14px;
}
.field textarea{min-height:112px;resize:vertical}
.field select{font-family:var(--mono);font-size:.85rem}
.note{font-family:var(--mono);font-size:.66rem;color:var(--muted);line-height:1.65;margin-top:14px}
.status{font-family:var(--mono);font-size:.74rem;margin-top:12px;color:var(--pink-deep)}
.clist{list-style:none;margin:0;padding:0;font-size:.93rem}
.clist li{padding:13px 0;border-top:1px solid var(--line);color:var(--muted)}
.clist a{color:var(--ink);text-decoration:none;border-bottom:2px solid var(--pink)}

/* footer */
.foot{background:var(--plum-deep);color:#fff;padding-block:clamp(44px,5.5vw,70px) 28px}
.foot__grid{display:grid;grid-template-columns:1.35fr repeat(3,minmax(0,1fr));gap:32px}
@media (max-width:920px){.foot__grid{grid-template-columns:1fr 1fr}}
@media (max-width:540px){.foot__grid{grid-template-columns:1fr}}
.foot h3{font-family:var(--mono);font-size:.67rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--pink);margin-bottom:15px}
.foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;font-size:.92rem}
.foot a{text-decoration:none;color:var(--on-band-muted)}
.foot a:hover{color:var(--pink)}
.foot__brand .brand{margin-bottom:15px}
.foot__brand .brandlogo{height:30px}
.foot__brand p{font-size:.92rem;color:var(--on-band-muted);font-weight:300;max-width:34ch}
.foot__badge{display:inline-block;margin-top:17px;font-family:var(--mono);font-size:.63rem;letter-spacing:.11em;text-transform:uppercase;border:1px solid var(--pink);border-radius:999px;color:var(--pink);padding:7px 14px}
.foot__bar{margin-top:40px;padding-top:22px;border-top:1px solid rgba(255,255,255,.17);display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-family:var(--mono);font-size:.67rem;letter-spacing:.05em;color:var(--on-band-muted)}

/* ---------- always-visible page bar (works without JS) ---------- */
.pagebar{background:var(--surface);border-bottom:1px solid var(--line)}
.pagebar__track{display:flex;gap:4px;overflow-x:auto;scrollbar-width:thin;padding-block:9px}
.pagebar a{
  flex:none;text-decoration:none;white-space:nowrap;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);padding:8px 14px;border-radius:999px;transition:.14s;
}
.pagebar a:hover{background:var(--surface-2);color:var(--pink-deep)}

/* details-based mobile menu (opens with no JavaScript) */
.mnav{display:none;max-height:none;overflow:visible;background:transparent;border-top:0}
.mnav>summary{
  list-style:none;cursor:pointer;display:block;padding:0 var(--gut) 16px;
}
.mnav>summary::-webkit-details-marker{display:none}
.mnav[open]>summary .burger{background:var(--plum);border-color:var(--plum);color:#fff}
.mnav__scroll{border-top:1px solid var(--line);background:var(--surface);max-height:66vh;overflow-y:auto}
@media (max-width:1060px){
  .mnav{display:block}
  .burger{display:inline-flex;align-items:center;gap:8px}
}

/* ============ single-page routing ============ */


body.js .page.is-active{display:block;animation:pagein .5s cubic-bezier(.2,.7,.2,1)}
@keyframes pagein{from{transform:translateY(14px)}to{transform:none}}
@media (prefers-reduced-motion:reduce){body.js .page.is-active{animation:none}}

/* scroll progress */
.progress{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,var(--pink),var(--pink-deep));z-index:200;transition:width .08s linear}

/* nav shrink on scroll */
.nav__row{transition:min-height .25s ease}
body.scrolled .nav__row{min-height:62px}
body.scrolled .nav{box-shadow:0 10px 30px -22px rgba(28,7,37,.5)}

/* scroll reveal */
body.js .reveal{transform:translateY(22px);transition:transform .7s cubic-bezier(.2,.7,.2,1)}
body.js .reveal.in{transform:none}
@media (prefers-reduced-motion:reduce){body.js .reveal{opacity:1!important;transform:none!important}}

/* staggered children */
body.js .reveal .card,body.js .reveal .deliver__item,body.js .reveal .step{transform:translateY(14px);transition:transform .55s ease}
body.js .reveal.in .card,body.js .reveal.in .deliver__item,body.js .reveal.in .step{transform:none}
body.js .reveal.in .card:nth-child(2),body.js .reveal.in .deliver__item:nth-child(2),body.js .reveal.in .step:nth-child(2){transition-delay:.07s}
body.js .reveal.in .card:nth-child(3),body.js .reveal.in .deliver__item:nth-child(3),body.js .reveal.in .step:nth-child(3){transition-delay:.14s}
body.js .reveal.in .card:nth-child(4),body.js .reveal.in .deliver__item:nth-child(4),body.js .reveal.in .step:nth-child(4){transition-delay:.21s}
body.js .reveal.in .card:nth-child(5),body.js .reveal.in .deliver__item:nth-child(5){transition-delay:.28s}
body.js .reveal.in .card:nth-child(6),body.js .reveal.in .deliver__item:nth-child(6){transition-delay:.35s}
@media (prefers-reduced-motion:reduce){body.js .reveal .card,body.js .reveal .deliver__item,body.js .reveal .step{opacity:1!important;transform:none!important}}

/* parallax media */
.photo[data-parallax]{will-change:transform}

/* hero entrance */
/* hero paints finished on first load — no entrance animation */


/* ticker */
.ticker{overflow:hidden;border-block:1px solid var(--line);background:var(--surface);padding-block:14px}
.ticker__track{display:flex;width:max-content;animation:tick 46s linear infinite}
.ticker:hover .ticker__track{animation-play-state:paused}
@keyframes tick{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.ticker__track{animation:none}}
.ticker__item{
  display:inline-flex;align-items:baseline;gap:11px;white-space:nowrap;text-decoration:none;
  padding:0 28px;border-right:1px solid var(--line);font-family:var(--display);font-weight:600;font-size:.95rem;
}
.ticker__item b{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;color:var(--pink-deep);font-weight:500}
.ticker__item i{font-style:normal;font-family:var(--mono);font-size:.74rem;color:var(--muted)}
.ticker__item:hover{color:var(--pink-deep)}

/* pricing table */
.ptab-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.ptab{width:100%;border-collapse:collapse;min-width:640px}
.ptab th{
  text-align:left;padding:15px 18px;font-family:var(--mono);font-size:.63rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--line);background:var(--surface-2);
}
.ptab td{padding:16px 18px;border-bottom:1px solid var(--line);vertical-align:top}
.ptab tr:last-child td{border-bottom:0}
.ptab tbody tr{transition:background .14s ease}
.ptab tbody tr:hover{background:var(--surface-2)}
.ptab__name{font-family:var(--display);font-weight:700;font-size:1.02rem;text-decoration:none;display:block}
.ptab__name:hover{color:var(--pink-deep)}
.ptab__sub{display:block;font-size:.84rem;color:var(--muted);margin-top:3px}
.ptab__price{font-family:var(--display);font-weight:700;font-size:1.08rem;white-space:nowrap}
.mono{font-family:var(--mono);font-size:.78rem}
.muted{color:var(--muted)}

/* mobile nav groups */
.mnav__h{font-family:var(--mono);font-size:.64rem;letter-spacing:.15em;text-transform:uppercase;color:var(--pink-deep);padding:16px var(--gut) 6px;margin:0}
.mnav__panel a{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.mnav__panel a i{font-style:normal;font-family:var(--mono);font-size:.72rem;color:var(--muted)}

/* pagebar active */
.pagebar a[aria-current="page"]{background:var(--plum);color:#fff}

/* utilities */
.mt14{margin-top:14px}.mt18{margin-top:18px}.mt20{margin-top:20px}.mt22{margin-top:22px}
.mt24{margin-top:24px}.mt26{margin-top:26px}.mt34{margin-top:34px}
.mb16{margin-bottom:16px}.mb18{margin-bottom:18px}.mb20{margin-bottom:20px}.mb22{margin-bottom:22px}
.pt0{padding-top:0}
.ind{border-top:1px solid var(--line)}
.ind__h{font-size:clamp(1.7rem,3.6vw,2.5rem);margin-top:16px}
.price__fig--sm{font-size:clamp(1.5rem,3vw,2.1rem);line-height:1.12}
.hero__media{position:relative}

/* ============ animated gradient mesh on banners ============ */
.mesh{position:relative;overflow:hidden;isolation:isolate}
.mesh>*{position:relative;z-index:3}
.mesh__grid{
  position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.55;
  background-image:linear-gradient(to right,var(--line) 1px,transparent 1px),
                   linear-gradient(to bottom,var(--line) 1px,transparent 1px);
  background-size:68px 68px;
  mask-image:radial-gradient(ellipse 85% 75% at 50% 40%,#000 20%,transparent 80%);
  -webkit-mask-image:radial-gradient(ellipse 85% 75% at 50% 40%,#000 20%,transparent 80%);
}
.band .mesh__grid{background-image:linear-gradient(to right,rgba(255,255,255,.16) 1px,transparent 1px),linear-gradient(to bottom,rgba(255,255,255,.16) 1px,transparent 1px)}

.mesh__blobs{
  position:absolute;inset:-25%;z-index:1;pointer-events:none;filter:blur(70px);contain:paint;opacity:.62;
  mask-image:linear-gradient(100deg,transparent 18%,rgba(0,0,0,.45) 42%,#000 72%);
  -webkit-mask-image:linear-gradient(100deg,transparent 18%,rgba(0,0,0,.45) 42%,#000 72%);
}
.band .mesh__blobs{opacity:1;mask-image:none;-webkit-mask-image:none}
.phead .mesh__blobs{opacity:.5}
.blob{position:absolute;border-radius:50%;will-change:transform;mix-blend-mode:multiply}
:root[data-theme="dark"] .blob,.band .blob{mix-blend-mode:screen}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .blob{mix-blend-mode:screen}}

.blob--1{
  width:46%;height:72%;top:-14%;right:4%;
  background:radial-gradient(circle,rgba(255,126,212,.8),rgba(255,126,212,0) 68%);
  animation:blob1 15s ease-in-out infinite alternate;
}
.blob--2{
  width:40%;height:66%;top:18%;right:28%;
  background:radial-gradient(circle,rgba(168,74,214,.62),rgba(168,74,214,0) 68%);
  animation:blob2 19s ease-in-out infinite alternate;
}
.blob--3{
  width:38%;height:60%;bottom:-18%;left:6%;
  background:radial-gradient(circle,rgba(226,63,166,.55),rgba(226,63,166,0) 68%);
  animation:blob3 13s ease-in-out infinite alternate;
}
.band .blob--1{background:radial-gradient(circle,rgba(255,126,212,.75),rgba(255,126,212,0) 68%)}
.band .blob--2{background:radial-gradient(circle,rgba(150,70,235,.7),rgba(150,70,235,0) 68%)}
.band .blob--3{background:radial-gradient(circle,rgba(226,63,166,.6),rgba(226,63,166,0) 68%)}

@keyframes blob1{
  0%{transform:translate3d(0,0,0) scale(1)}
  33%{transform:translate3d(-34%,26%,0) scale(1.3)}
  66%{transform:translate3d(14%,-18%,0) scale(.85)}
  100%{transform:translate3d(-20%,12%,0) scale(1.15)}
}
@keyframes blob2{
  0%{transform:translate3d(0,0,0) scale(1.1)}
  40%{transform:translate3d(30%,24%,0) scale(.8)}
  75%{transform:translate3d(-24%,-14%,0) scale(1.25)}
  100%{transform:translate3d(16%,18%,0) scale(.95)}
}
@keyframes blob3{
  0%{transform:translate3d(0,0,0) scale(.9)}
  50%{transform:translate3d(42%,-30%,0) scale(1.35)}
  100%{transform:translate3d(-12%,14%,0) scale(1.05)}
}
@media (prefers-reduced-motion:reduce){.blob{animation:none!important}}

/* conic sweep across dark bands */
.band.mesh::after{
  content:"";position:absolute;inset:-50%;z-index:1;pointer-events:none;opacity:.22;
  background:conic-gradient(from 0deg,transparent 0deg,rgba(255,126,212,.9) 40deg,transparent 110deg,transparent 360deg);
  animation:sweep 14s linear infinite;
}
@keyframes sweep{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.band.mesh::after{animation:none}}

/* ============ payback calculator ============ */
.calc{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;box-shadow:var(--shadow);
}
.calc__head{
  padding:22px 26px;border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
}
.calc__head h3{font-size:1.2rem}
.calc__badge{
  font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;
  border:1px solid var(--pink);border-radius:999px;color:var(--pink-deep);padding:6px 12px;
  display:inline-flex;align-items:center;gap:7px;
}
.calc__badge::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--pink-deep);animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}
@media (prefers-reduced-motion:reduce){.calc__badge::before{animation:none}}

.calc__body{display:grid;grid-template-columns:1fr .92fr}
@media (max-width:820px){.calc__body{grid-template-columns:1fr}}
.calc__inputs{padding:26px;display:flex;flex-direction:column;gap:24px}
.calc__row label{
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:11px;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
}
.calc__row label output{
  font-family:var(--display);font-size:1.12rem;font-weight:700;letter-spacing:-.02em;
  color:var(--ink);text-transform:none;letter-spacing:normal;
}
.calc__row input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:4px;border-radius:999px;
  background:linear-gradient(90deg,var(--pink-deep) var(--pct,40%),var(--line) var(--pct,40%));
  outline:none;padding:0;border:0;
}
.calc__row input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:var(--plum);
  border:3px solid var(--bg);box-shadow:0 2px 10px rgba(28,7,37,.4);cursor:pointer;transition:transform .14s ease;
}
.calc__row input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.15)}
.calc__row input[type=range]::-moz-range-thumb{
  width:18px;height:18px;border-radius:50%;background:var(--plum);
  border:3px solid var(--bg);box-shadow:0 2px 10px rgba(28,7,37,.4);cursor:pointer;
}
.calc__hint{font-family:var(--mono);font-size:.63rem;color:var(--muted);margin-top:8px;letter-spacing:.04em}

.calc__out{
  padding:26px;background:var(--plum);color:#fff;display:flex;flex-direction:column;gap:18px;
  position:relative;overflow:hidden;
}
.calc__out::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 80% 0%,rgba(255,126,212,.3),transparent 60%);
}
.calc__out>*{position:relative;z-index:1}
.calc__big{display:flex;flex-direction:column;gap:3px}
.calc__big span{font-family:var(--mono);font-size:.63rem;letter-spacing:.14em;text-transform:uppercase;color:var(--pink)}
.calc__big b{
  font-family:var(--display);font-weight:700;font-size:clamp(2.1rem,5vw,2.9rem);
  letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums;
}
.calc__split{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding-top:16px;border-top:1px solid rgba(255,255,255,.2)}
.calc__cell span{display:block;font-family:var(--mono);font-size:.6rem;letter-spacing:.13em;text-transform:uppercase;color:var(--on-band-muted);margin-bottom:4px}
.calc__cell b{font-family:var(--display);font-weight:700;font-size:1.26rem;font-variant-numeric:tabular-nums}
.calc__verdict{
  font-size:.9rem;font-weight:300;color:var(--on-band-muted);padding-top:16px;
  border-top:1px solid rgba(255,255,255,.2);
}
.calc__verdict strong{color:#fff;font-weight:600}
.calc__bar{height:6px;border-radius:999px;background:rgba(255,255,255,.18);overflow:hidden}
.calc__bar i{display:block;height:100%;background:linear-gradient(90deg,var(--pink),#fff);border-radius:999px;transition:width .35s cubic-bezier(.2,.7,.2,1)}
.calc__foot{padding:18px 26px;border-top:1px solid var(--line);font-family:var(--mono);font-size:.63rem;color:var(--muted);line-height:1.7}

/* ============ animated system flow diagram ============ */
.flow{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:26px;overflow:hidden}
.flow__head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.flow__head h3{font-size:1.14rem}
.flow__toggle{display:inline-flex;border:1px solid var(--line-strong);border-radius:999px;padding:4px;gap:4px}
.flow__toggle button{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.09em;text-transform:uppercase;
  padding:8px 15px;border:0;border-radius:999px;background:transparent;color:var(--muted);cursor:pointer;
}
.flow__toggle button[aria-selected="true"]{background:var(--plum);color:#fff}
.flow svg{width:100%;height:auto;display:block;overflow:visible}
.flow__note{font-family:var(--mono);font-size:.64rem;color:var(--muted);margin-top:16px;letter-spacing:.03em}
.flow-node rect{fill:var(--bg);stroke:var(--line-strong);stroke-width:1.5}
.flow-node text{fill:var(--ink);font-family:var(--mono);font-size:10px;letter-spacing:.06em}
.flow-hand rect{fill:none;stroke:var(--muted);stroke-width:1.5;stroke-dasharray:4 3}
.flow-hand text{fill:var(--muted)}
.flow-path{fill:none;stroke:var(--line-strong);stroke-width:1.5}
.flow-path--auto{stroke:var(--pink-deep);stroke-width:2}
.flow-dot{fill:var(--pink-deep)}
.flow-label{fill:var(--muted);font-family:var(--mono);font-size:9px;letter-spacing:.08em}
.flow-cost{fill:var(--pink-deep);font-family:var(--mono);font-size:9.5px;letter-spacing:.06em}
@media (prefers-reduced-motion:reduce){.flow animateMotion{display:none}}

/* ============ task board ============ */
.taskboard{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--surface)}
.task{border-bottom:1px solid var(--line)}
.task:last-child{border-bottom:0}
.task[hidden]{display:none}
.task>summary{
  list-style:none;cursor:pointer;display:grid;
  grid-template-columns:62px 1fr auto 96px;gap:18px;align-items:center;
  padding:17px 22px;transition:background .14s ease;
}
.task>summary::-webkit-details-marker{display:none}
.task>summary:hover{background:var(--surface-2)}
.task[open]>summary{background:var(--surface-2)}
.task__code{
  font-family:var(--mono);font-size:.7rem;font-weight:500;letter-spacing:.13em;
  color:var(--pink-deep);
}
.task__name{font-family:var(--display);font-weight:700;font-size:1.04rem;min-width:0}
.task__name i{
  display:block;font-style:normal;font-family:var(--body);font-weight:300;
  font-size:.87rem;color:var(--muted);margin-top:3px;line-height:1.45;
}
.task__price{
  font-family:var(--display);font-weight:700;font-size:1.04rem;text-align:right;white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.task__price i{
  display:block;font-style:normal;font-family:var(--mono);font-weight:400;
  font-size:.64rem;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-top:4px;
}
.tbadge{
  font-family:var(--mono);font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;
  border:1px solid var(--line-strong);border-radius:999px;color:var(--muted);
  padding:5px 10px;text-align:center;
}
.tbadge--mo{background:var(--pink);border-color:var(--pink);color:var(--plum-deep)}
.task__body{padding:4px 22px 22px 102px;animation:taskopen .3s ease}
@keyframes taskopen{from{transform:translateY(-5px)}to{transform:none}}
@media (prefers-reduced-motion:reduce){.task__body{animation:none}}
.task__body ul{list-style:none;margin:0 0 18px;padding:0;font-size:.92rem;color:var(--muted);font-weight:300}
.task__body li{padding:7px 0;display:flex;gap:10px}
.task__body li::before{content:"";flex:none;width:5px;height:5px;margin-top:9px;border-radius:50%;background:var(--pink)}
@media (max-width:760px){
  .task>summary{grid-template-columns:50px 1fr;gap:12px;row-gap:10px;padding:16px 18px}
  .task__price{text-align:left;grid-column:2}
  .tbadge{grid-column:2;justify-self:start}
  .task__body{padding:4px 18px 20px 18px}
}

/* ============ thesis / versus / ladder ============ */
.thesis{background:var(--surface-2)}
.thesis__head{max-width:62ch;margin-bottom:38px}
.thesis__head h2{font-size:clamp(1.9rem,4.2vw,3rem);margin:16px 0 18px}
.thesis__head .lede{max-width:60ch}

.versus{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:46px}
@media (max-width:860px){.versus{grid-template-columns:1fr}}
.versus__col{border-radius:var(--r);padding:26px 24px}
.versus__col--old{background:var(--bg);border:1px solid var(--line)}
.versus__col--new{background:var(--plum);color:#fff;box-shadow:var(--shadow)}
.versus__tag{
  font-family:var(--mono);font-size:.65rem;letter-spacing:.15em;text-transform:uppercase;
  margin:0 0 20px;padding-bottom:14px;border-bottom:1px solid var(--line);
}
.versus__col--old .versus__tag{color:var(--muted)}
.versus__col--new .versus__tag{color:var(--pink);border-color:rgba(255,255,255,.25)}
.versus__list{list-style:none;margin:0;padding:0;counter-reset:v}
.versus__list li{
  counter-increment:v;position:relative;padding:14px 0 14px 38px;font-size:.92rem;
  font-weight:300;line-height:1.5;border-top:1px solid var(--line);
}
.versus__list li:first-child{border-top:0;padding-top:0}
.versus__list li:first-child::before{top:0}
.versus__col--new .versus__list li{border-color:rgba(255,255,255,.18);color:var(--on-band-muted)}
.versus__list li::before{
  content:counter(v);position:absolute;left:0;top:14px;
  width:24px;height:24px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--mono);font-size:.64rem;
}
.versus__col--old .versus__list li::before{border:1px solid var(--line-strong);color:var(--muted)}
.versus__col--new .versus__list li::before{background:var(--pink);color:var(--plum-deep);font-weight:500}
.versus__list span{
  display:block;font-family:var(--display);font-weight:600;font-size:1.02rem;
  margin-bottom:3px;line-height:1.25;
}
.versus__col--old .versus__list span{color:var(--muted);text-decoration:line-through;text-decoration-thickness:1px;text-decoration-color:var(--line-strong)}
.versus__col--new .versus__list span{color:#fff}

.ladder{background:var(--bg);border:1px solid var(--line);border-radius:var(--r-lg);padding:28px 26px}
.ladder .lbl{margin-bottom:24px}
.ladder__track{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;align-items:end}
@media (max-width:880px){.ladder__track{grid-template-columns:repeat(2,1fr);gap:24px}}
@media (max-width:520px){.ladder__track{grid-template-columns:1fr}}
.ladder__step{display:flex;flex-direction:column;gap:7px;min-width:0}
.ladder__bar{height:92px;display:flex;align-items:flex-end;margin-bottom:6px}
.ladder__bar i{
  display:block;width:100%;border-radius:6px 6px 0 0;
  background:linear-gradient(to top,var(--pink-deep),var(--pink));
  transform-origin:bottom;animation:grow .9s cubic-bezier(.2,.8,.2,1) both;
}
.ladder__step[data-step="2"] .ladder__bar i{animation-delay:.1s}
.ladder__step[data-step="3"] .ladder__bar i{animation-delay:.2s}
.ladder__step[data-step="4"] .ladder__bar i{animation-delay:.3s;background:linear-gradient(to top,var(--plum),var(--plum-mid))}
@keyframes grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@media (prefers-reduced-motion:reduce){.ladder__bar i{animation:none}}
.ladder__step b{
  font-family:var(--display);font-weight:700;font-size:1.42rem;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;padding-top:12px;border-top:2px solid var(--fig-rule);
}
.ladder__step span{font-family:var(--display);font-weight:600;font-size:.97rem}
.ladder__step p{font-size:.86rem;font-weight:300;color:var(--muted);line-height:1.5}
.ladder__step--last b{border-top-color:var(--pink-deep)}
.ladder__note{font-family:var(--mono);font-size:.66rem;color:var(--muted);margin-top:24px;letter-spacing:.04em}

.thesis__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px}

/* popular marker on task rows */
.pop{
  display:inline-block;font-style:normal;vertical-align:middle;margin-left:9px;
  font-family:var(--mono);font-size:.55rem;font-weight:500;letter-spacing:.13em;text-transform:uppercase;
  background:var(--pink);color:var(--plum-deep);border-radius:999px;padding:3px 9px;
  position:relative;top:-1px;
}
.task[open] .pop,.task>summary:hover .pop{background:var(--pink-deep);color:#fff}

/* popular pill, compact — menus */
.pop--sm{font-size:.5rem;padding:2px 7px;margin-left:7px;letter-spacing:.11em}
.mega__list--task a{display:flex;flex-wrap:wrap;align-items:baseline}
.mega__list--task a span{width:100%}
.navflag{
  font-style:normal;font-family:var(--mono);font-size:.56rem;font-weight:500;
  letter-spacing:.11em;text-transform:uppercase;color:var(--pink-deep);
  border:1px solid var(--pink);border-radius:999px;padding:3px 8px;margin-left:7px;
  position:relative;top:-1px;
}
.menu__btn--flag:hover .navflag{background:var(--pink);color:var(--plum-deep)}
/* four-column mega */
.mega__in{grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,1.02fr)}
@media (max-width:1180px){.mega__in{grid-template-columns:repeat(2,minmax(0,1fr)) minmax(0,1.05fr)}}
.mnav__panel a i{margin-left:auto}

/* ============ hero video slot ============ */
.video-slot{background:var(--plum-deep)}
.video-slot__v{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  display:block;z-index:0;background:var(--plum-deep);
}
.video-slot__badge{
  position:absolute;top:14px;right:14px;z-index:2;
  font-family:var(--mono);font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;
  background:rgba(28,7,37,.72);color:#fff;border-radius:999px;padding:6px 12px;
  display:inline-flex;align-items:center;gap:7px;backdrop-filter:blur(6px);
}
.video-slot__badge::before{
  content:"";width:6px;height:6px;border-radius:50%;background:var(--pink);
  animation:pulse 2s ease-in-out infinite;
}
@media (prefers-reduced-motion:reduce){.video-slot__badge::before{animation:none}}
.video-slot .photo__cap{
  z-index:2;color:#fff;
  background:linear-gradient(to top,rgba(28,7,37,.9),rgba(28,7,37,0));
}
.video-slot::before{z-index:2;border-color:var(--pink)}

/* ============ rotating lines over hero video ============ */
.video-slot{display:block}
.vlines{
  position:absolute;left:0;right:0;bottom:0;top:38%;z-index:3;
  padding:0 20px 46px;pointer-events:none;display:flex;align-items:flex-end;
}
.vlines::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top,
    rgba(20,4,28,.96) 0%,
    rgba(20,4,28,.88) 22%,
    rgba(20,4,28,.62) 52%,
    rgba(20,4,28,.22) 78%,
    transparent 100%);
}
.vline{
  position:absolute;left:20px;right:20px;bottom:46px;
  text-shadow:0 2px 18px rgba(12,2,18,.75);
  font-family:var(--display);font-weight:700;letter-spacing:-.035em;line-height:1.02;
  font-size:clamp(1.45rem,2.1vw,1.95rem);color:#fff;
  opacity:0;transform:translateY(12px);
  animation:vcycle 9s cubic-bezier(.2,.7,.2,1) infinite;
  animation-delay:calc(var(--i) * 3s);
}
.vline b{display:block;font-weight:700;color:#FF9BDE;font-size:1.26em;letter-spacing:-.04em;text-shadow:0 2px 20px rgba(12,2,18,.85)}
@keyframes vcycle{
  0%{opacity:0;transform:translateY(12px)}
  4%{opacity:1;transform:translateY(0)}
  29%{opacity:1;transform:translateY(0)}
  34%{opacity:0;transform:translateY(-10px)}
  100%{opacity:0;transform:translateY(-10px)}
}
@media (prefers-reduced-motion:reduce){
  .vline{animation:none;opacity:0;transform:none}
  .vline[style*="--i:0"]{opacity:1}
}
.vlines__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.video-slot .photo__cap{z-index:4;padding-bottom:16px}

/* placeholder note under the video slot (delete once real video is in) */
.slot-note{
  font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);margin-top:10px;text-align:center;
}
.video-slot__badge{top:16px;right:16px}

/* ============ founder ============ */
.founder{background:var(--surface-2)}
.founder__grid{display:grid;grid-template-columns:.78fr 1.22fr;gap:clamp(28px,5vw,62px);align-items:center}
@media (max-width:880px){.founder__grid{grid-template-columns:1fr;gap:30px}}
.founder__media{position:relative;max-width:420px}
@media (max-width:880px){.founder__media{max-width:320px}}
.founder__media img{
  width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:center top;
  border-radius:var(--r-lg);
}
.founder__chip{
  position:absolute;left:18px;bottom:18px;
  font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;
  background:rgba(28,7,37,.82);color:#fff;border-radius:999px;padding:8px 14px;
  backdrop-filter:blur(8px);
}
.founder__text h2{font-size:clamp(1.9rem,4.2vw,2.9rem);margin:16px 0 4px}
.founder__role{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--pink-deep);margin-bottom:20px;
}
.founder__text p{color:var(--muted);font-weight:300;max-width:60ch}
.founder__text p+p{margin-top:14px}
.founder__stats{display:flex;flex-wrap:wrap;gap:30px;margin-top:26px;padding-top:22px;border-top:1px solid var(--line)}
.founder__stats b{
  display:block;font-family:var(--display);font-weight:700;font-size:1.9rem;
  letter-spacing:-.04em;color:var(--ink);font-variant-numeric:tabular-nums;
}
.founder__stats span{font-family:var(--mono);font-size:.63rem;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}

/* founder: short name as headline, full legal name beneath */
.founder__full{
  font-family:var(--body);font-weight:400;font-size:1.02rem;color:var(--ink);
  margin:6px 0 2px;letter-spacing:.01em;
}
.founder__text h2+.founder__full{margin-top:8px}

/* founder credential tags */
.founder__tags{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px}
.founder__tags span{
  font-family:var(--mono);font-size:.6rem;letter-spacing:.11em;text-transform:uppercase;
  border:1px solid var(--line-strong);border-radius:999px;padding:7px 13px;color:var(--muted);
  display:inline-flex;align-items:center;gap:7px;
}
.founder__tags span::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--pink-deep);flex:none}

/* founder: legacy -> AI capability span */
.founder__span{margin:24px 0 0;padding-top:22px;border-top:1px solid var(--line)}
.founder__span-l{
  display:block;font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin-bottom:12px;
}
.founder__span-track{display:flex;flex-wrap:wrap;align-items:center;gap:0}
.founder__span-track i{
  font-style:normal;font-family:var(--display);font-weight:600;font-size:.9rem;
  padding:7px 0;position:relative;color:var(--ink);
}
.founder__span-track i+i{margin-left:30px}
.founder__span-track i+i::before{
  content:"";position:absolute;left:-23px;top:50%;width:16px;height:1px;
  background:linear-gradient(90deg,var(--line-strong),var(--pink-deep));
}
.founder__span-track i:last-child{color:var(--pink-deep)}
@media (max-width:620px){
  .founder__span-track i+i{margin-left:22px}
  .founder__span-track i+i::before{left:-18px;width:11px}
}

/* ============ mobile touch targets ============ */
@media (pointer:coarse){
  .ticker__item{padding-block:9px}
  .flow__toggle button{padding:11px 16px}
  .calc__row input[type=range]{height:4px;padding:16px 0;background-clip:content-box}
  .prose a,.faq p a,.deliver__item a{display:inline-block;padding-block:6px}
  .footraw a,.foot ul a{display:inline-block;padding-block:5px}
}

/* underserved marker on industry sections */
.under{
  display:inline-block;font-style:normal;vertical-align:middle;margin-left:12px;
  font-family:var(--mono);font-size:.56rem;font-weight:500;letter-spacing:.13em;text-transform:uppercase;
  background:var(--pink);color:var(--plum-deep);border-radius:999px;padding:5px 11px;
  position:relative;top:-6px;
}
@media (pointer:coarse){
  .crumb a{display:inline-block;padding-block:9px}
}
@media (pointer:coarse){
  .ptab__name,.clist a{display:inline-block;padding-block:6px}
}
@media (pointer:coarse){
  table td a{display:inline-block;padding-block:6px}
}

/* ============ line icons ============ */
.ico{width:100%;height:100%;display:block}
.card__ico{
  width:42px;height:42px;border-radius:12px;display:grid;place-items:center;
  background:var(--surface-2);color:var(--pink-deep);padding:9px;flex:none;
  transition:background .18s ease,color .18s ease,transform .18s ease;
}
.card:hover .card__ico{background:var(--plum);color:var(--pink);transform:translateY(-2px)}
.card__top{align-items:flex-start}
.card__codes{display:flex;flex-direction:column;gap:4px;align-items:flex-end;margin-left:auto}

.step__ico{
  width:38px;height:38px;border-radius:11px;display:grid;place-items:center;
  background:rgba(255,255,255,.1);color:var(--pink);padding:8px;margin-bottom:14px;
  border:1px solid rgba(255,255,255,.18);
}

.chips a{display:inline-flex;align-items:center;gap:9px}
.chips .ico{width:17px;height:17px;color:var(--pink-deep);flex:none}
.chips a:hover .ico{color:var(--ink)}

.ind__ico{
  width:46px;height:46px;border-radius:13px;display:grid;place-items:center;
  background:var(--surface);border:1px solid var(--line);color:var(--pink-deep);
  padding:10px;margin-bottom:18px;
}

/* real photographs in feature slots */
.figimg{
  width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;
  border-radius:var(--r);display:block;
}

/* ============ left rail draws down when the text is hovered ============ */
.figframe{position:relative;display:block}
.figframe::before{
  content:"";position:absolute;left:-14px;top:0;width:3px;height:100%;
  background:linear-gradient(to bottom,var(--pink),var(--pink-deep));
  border-radius:999px;transform:scaleY(0);transform-origin:top;
  transition:transform .55s cubic-bezier(.2,.8,.2,1);
}
.figimg{
  display:block;width:100%;border-radius:var(--r);
  transition:transform .5s cubic-bezier(.2,.8,.2,1);
}
.feature:hover .figframe::before,
.feature:focus-within .figframe::before{transform:scaleY(1)}
.feature:hover .figimg,
.feature:focus-within .figimg{transform:translateY(-6px)}

.feature .lbl--rule{transition:transform .35s ease}
.feature:hover .lbl--rule{transform:translateX(5px)}

@media (prefers-reduced-motion:reduce){
  .figframe::before{transform:scaleY(1)}
  .figimg{transition:none}
  .feature:hover .figimg{transform:none}
}
@media (max-width:880px){.figframe::before{left:-10px}}

/* founder portrait: same rail, drawn on scroll */
.founder__media{position:relative}
.founder__media::before{
  content:"";position:absolute;left:-14px;top:0;width:3px;height:100%;
  background:linear-gradient(to bottom,var(--pink),var(--pink-deep));
  border-radius:999px;transform:scaleY(0);transform-origin:top;
  transition:transform .6s cubic-bezier(.2,.8,.2,1);
}
.founder__media img{display:block;width:100%;border-radius:var(--r-lg);transition:transform .5s cubic-bezier(.2,.8,.2,1)}
body.js .founder.reveal.in .founder__media::before{transform:scaleY(1);transition-delay:.3s}
body:not(.js) .founder__media::before{transform:scaleY(1)}
.founder__grid:hover .founder__media img{transform:translateY(-6px)}
@media (prefers-reduced-motion:reduce){
  .founder__media::before{transform:scaleY(1);transition:none}
  .founder__media img{transition:none}
  .founder__grid:hover .founder__media img{transform:none}
}
@media (max-width:880px){.founder__media::before{left:-10px}}

/* industry photographs */
.figimg--wide{aspect-ratio:16/9}
.ind__media .figframe::before{left:-14px}
.ind:hover .figframe::before,
.ind:focus-within .figframe::before{transform:scaleY(1)}
.ind__media .figimg{transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.ind:hover .ind__media .figimg{transform:translateY(-6px)}
@media (prefers-reduced-motion:reduce){
  .ind__media .figframe::before{transform:scaleY(1)}
  .ind:hover .ind__media .figimg{transform:none}
}
@media (max-width:880px){.ind__media .figframe::before{left:-10px}}

/* ============ new-client offer band ============ */
.offer{background:var(--band);color:var(--on-band);position:relative;overflow:hidden}
.offer .lbl{color:var(--pink)}
.offer .lbl--rule::after{background:rgba(255,255,255,.22)}
.offer h2{font-size:clamp(1.9rem,4vw,2.9rem);max-width:16ch;margin:0 0 16px}
.offer h2 mark{background:none;color:var(--pink);white-space:nowrap}
.offer p{color:var(--on-band-muted)}
.offer .lede{color:#fff;font-size:clamp(1.02rem,1.5vw,1.16rem)}
.offer__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center;position:relative;z-index:1}
.offer__text .btnrow{margin-top:26px}

.offer__card{
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18);
  border-radius:var(--r-lg);padding:28px 28px 24px;backdrop-filter:blur(2px);
}
.offer__card-h{
  font-family:var(--mono);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--pink)!important;margin:0 0 16px;
}
.offer__list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.offer__list li{
  position:relative;padding-left:26px;font-size:.96rem;line-height:1.55;
  color:var(--on-band-muted);
}
.offer__list li b{color:#fff;font-weight:600}
.offer__list li::before{
  content:"";position:absolute;left:0;top:.52em;width:9px;height:9px;border-radius:3px;
  background:linear-gradient(135deg,var(--pink),var(--pink-deep));
}
.offer__fine{
  margin:20px 0 0;padding-top:16px;border-top:1px solid rgba(255,255,255,.15);
  font-size:.88rem;color:var(--on-band-muted)!important;
}

@media (max-width:980px){
  .offer__grid{grid-template-columns:1fr;gap:34px}
  .offer h2{max-width:22ch}
}
@media (max-width:620px){
  .offer__card{padding:22px 20px 20px}
}
.offer__text p{margin:0 0 14px}
.offer__text .lede{margin-bottom:16px}
.offer .btn--ghost{
  border-color:rgba(255,255,255,.42);color:#fff;background:transparent;
}
.offer .btn--ghost:hover{border-color:var(--pink);color:var(--pink);background:rgba(255,255,255,.06)}

/* ============ service square photo ============ */
/* no rail on banners — the left line stays on feature and industry images only */
.figimg--sq{aspect-ratio:1/1}
.phead .figframe::before{display:none;content:none}
.phead:hover .figimg--sq{transform:translateY(-6px)}
@media (prefers-reduced-motion:reduce){.phead:hover .figimg--sq{transform:none}}

/* ============ platforms strip (no badges, no claimed partnerships) ============ */
.plat{background:var(--surface-2);border-top:1px solid var(--line);padding:34px 0 30px}
.plat__lbl{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted);margin:0 0 18px;text-align:center;
}
.plat__row{
  list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;
  justify-content:center;gap:10px 12px;
}
.plat__row li{
  font-family:var(--mono);font-size:.84rem;letter-spacing:.02em;color:var(--ink);
  background:var(--surface);border:1px solid var(--line);border-radius:999px;
  padding:8px 16px;white-space:nowrap;
  transition:border-color .18s ease,color .18s ease,transform .18s ease;
}
.plat__row li:hover{border-color:var(--pink-deep);color:var(--pink-deep);transform:translateY(-2px)}
@media (pointer:coarse){.plat__row li{padding:11px 17px;font-size:.86rem}}
@media (max-width:620px){
  .plat{padding:28px 0 24px}
  .plat__row{gap:8px}
  .plat__row li{font-size:.79rem;padding:8px 13px}
}

/* ============ technologies strip ============
   Sits directly under .plat and shares its ground so the two read as one
   band rather than two stripes. Left-aligned on purpose: .plat is centred
   because it is a logo-wall of platforms a visitor recognises, while this is
   a list to be read, and centred lists of ragged-length items are hard work. */
.tech{background:var(--surface-2);padding:22px 0 38px}
.tech__kicker{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted);margin:0 0 20px;text-align:center;
}
/* Multi-column rather than grid. The group count changes as the stack grows,
   and a grid leaves whatever does not divide by three sitting alone in a row
   with a hole beside it — seven groups put "AI" on its own with two empty
   cells. Columns balance by height instead, so the block stays tidy at any
   number of groups. break-inside keeps a group from splitting mid-list. */
.tech__grid{columns:3;column-gap:30px}
.tech__grp{
  break-inside:avoid;-webkit-column-break-inside:avoid;
  display:inline-block;width:100%;margin:0 0 20px;min-width:0;
}
.tech__lbl{
  font-size:.74rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--fig);margin:0 0 11px;padding-bottom:9px;
  border-bottom:1px solid var(--line);
}
.tech__row{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:7px 8px}
.tech__row li{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--mono);font-size:.8rem;letter-spacing:.01em;color:var(--ink);
  background:var(--surface);border:1px solid var(--line);border-radius:999px;
  padding:7px 14px;white-space:nowrap;
}
/* Marks are inlined SVG, not <img>, so they can take their colour from here
   and follow the theme. Muted rather than full ink on purpose: at 16px a row
   of marks at full strength competes with the names beside them, which are
   the thing being read. The chip brightens both together on hover. */
/* Height is fixed, width is not. Half of these marks are wordmarks at wide
   aspect ratios — .NET, iOS, WooCommerce, cPanel — and forcing them into a
   square box turns them into an illegible smear. Pinning the height and
   letting width follow the aspect ratio keeps every mark on one optical
   baseline while letting the wide ones stay readable. */
.tech__ico{
  height:21px;width:auto;max-width:48px;flex:none;display:block;
  color:var(--muted);transition:color .18s ease;
}
.tech__ico svg{height:100%;width:auto;max-width:48px;display:block;fill:currentColor}
.tech__row li:hover{border-color:var(--line-strong)}
.tech__row li:hover .tech__ico{color:var(--pink-ink)}
.tech__cta{
  margin:26px 0 0;padding-top:18px;border-top:1px solid var(--line);
  text-align:center;font-size:.93rem;color:var(--muted);
}
.tech__cta a{color:var(--pink-ink);font-weight:600;text-decoration:none}
.tech__cta a:hover{text-decoration:underline}
@media (pointer:coarse){.tech__row li{padding:9px 15px;font-size:.82rem}}
@media (max-width:860px){
  .tech__grid{columns:2;column-gap:24px}
}
@media (max-width:620px){
  .tech{padding:16px 0 28px}
  .tech__grid{columns:1}
  .tech__row{gap:6px}
  .tech__row li{font-size:.77rem;padding:7px 12px}
  .tech__cta{margin-top:20px;font-size:.88rem;text-align:left}
}

/* ============ about page portrait ============ */
.aboutpic{margin-top:22px;max-width:360px}
.aboutpic img{
  width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:center top;
  border-radius:var(--r-lg);display:block;
}
.aboutpic__cap{
  display:block;margin-top:14px;font-size:.86rem;line-height:1.5;color:var(--muted);
}
.aboutpic__cap b{display:block;color:var(--ink);font-size:1rem;font-weight:600;margin-bottom:2px}
@media (max-width:880px){.aboutpic{max-width:300px}}

/* ============ hero quote picker (opens the chooser modal) ============ */
.qp{position:relative;margin:26px 0 22px;max-width:520px}
.qp__lbl{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted);margin:0 0 9px;
}
.qp__btn{
  width:100%;display:flex;align-items:center;gap:14px;cursor:pointer;
  background:var(--surface);border:1.5px solid var(--line);border-radius:14px;
  padding:16px 18px;font:inherit;font-size:1rem;color:var(--muted);text-align:left;
  transition:border-color .18s ease,color .18s ease,transform .18s ease;
}
.qp__btn:hover{border-color:var(--pink-deep);color:var(--ink);transform:translateY(-1px)}
.qp__btn:focus-visible{outline:2px solid var(--pink-deep);outline-offset:2px}
.qp.is-set .qp__btn{color:var(--ink);border-color:var(--pink-deep)}
.qp__val{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qp__chev{width:19px;height:19px;flex:none;color:var(--pink-deep)}
.qp__hint{margin:9px 0 0;font-size:.8rem;color:var(--muted)}
@media (pointer:coarse){.qp__btn{padding:18px}}
@media (max-width:620px){.qp{max-width:100%}}

/* ============ quote modal: pane 1 chooser, pane 2 form ============ */
body.qm-open{overflow:hidden}
.qm{position:fixed;inset:0;z-index:2000;display:flex;align-items:center;justify-content:center;padding:22px}
.qm[hidden]{display:none}
.qm__scrim{position:absolute;inset:0;background:rgba(28,7,37,.64);backdrop-filter:blur(3px)}
.qm__box{
  position:relative;width:100%;max-width:860px;max-height:90vh;overflow-y:auto;
  background:var(--surface);border-radius:var(--r-lg);padding:34px 34px 30px;
  box-shadow:0 30px 80px -20px rgba(28,7,37,.55);
}
.qm__box h2{font-size:clamp(1.5rem,3.2vw,2.05rem);margin:12px 0 10px}
.qm__sub{margin:0 0 24px;color:var(--muted);max-width:60ch;font-size:.95rem}
.qm__x{
  position:absolute;top:16px;right:16px;width:38px;height:38px;border-radius:11px;cursor:pointer;z-index:3;
  display:grid;place-items:center;background:var(--surface-2);border:1px solid var(--line);color:var(--ink);
  transition:background .16s ease,color .16s ease;
}
.qm__x:hover{background:var(--plum);color:#fff}
.qm__x svg{width:17px;height:17px}

.qc__grp{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);margin:26px 0 12px;padding-bottom:9px;border-bottom:1px solid var(--line);
}
.qc__grp:first-of-type{margin-top:0}
.qc__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}
.qc__opt{
  display:flex;flex-direction:column;gap:5px;cursor:pointer;text-align:left;font:inherit;
  background:var(--surface);border:1.5px solid var(--line);border-radius:14px;padding:15px 16px;
  transition:border-color .16s ease,background .16s ease,transform .16s ease;
}
.qc__opt:hover{border-color:var(--pink-deep);background:var(--surface-2);transform:translateY(-2px)}
.qc__opt:focus-visible{outline:2px solid var(--pink-deep);outline-offset:2px}
.qc__top{display:flex;align-items:center;gap:8px;margin-bottom:3px}
.qc__code{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.05em;color:var(--pink-deep);
  background:var(--surface-2);border-radius:6px;padding:4px 7px;
}
.qc__opt:hover .qc__code{background:var(--plum);color:var(--pink)}
.qc__top .pop{
  font-style:normal;font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--pink-deep);background:rgba(226,63,166,.12);border-radius:99px;padding:3px 8px;
}
.qc__price{margin-left:auto;font-family:var(--mono);font-size:.8rem;color:var(--ink);white-space:nowrap}
.qc__name{font-size:1.02rem;font-weight:600;color:var(--ink);line-height:1.25}
.qc__blurb{font-size:.84rem;line-height:1.45;color:var(--muted)}
.qc__turn{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.04em;color:var(--pink-deep);margin-top:3px;
}
.qc__opt--new{border-color:var(--plum);background:var(--surface-2)}
.qc__opt--new .qc__code{background:var(--plum);color:var(--pink)}

.qm__back{
  display:inline-flex;align-items:center;gap:6px;cursor:pointer;font:inherit;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--pink-deep);background:none;border:none;padding:4px 0;margin-bottom:10px;
}
.qm__back:hover{color:var(--ink)}
.qm__back svg{width:15px;height:15px}
#qm-form{max-width:560px}
.qm__pick{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  background:var(--surface-2);border:1px solid var(--line);border-radius:13px;
  padding:13px 15px;margin:16px 0 22px;
}
.qm__pick-code{font-family:var(--mono);font-size:.72rem;color:#fff;background:var(--plum);border-radius:7px;padding:5px 9px}
.qm__pick-name{font-weight:600;color:var(--ink);flex:1;min-width:0}
.qm__pick-price{font-family:var(--mono);font-size:.82rem;color:var(--pink-deep)}
.qm__fields{display:grid;gap:5px;margin-bottom:22px}
.qm__fields label{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);margin-top:12px;
}
.qm__fields label span{text-transform:none;letter-spacing:0;opacity:.7}
.qm__fields input,.qm__fields textarea{
  width:100%;font:inherit;font-size:.95rem;color:var(--ink);background:var(--bg);
  border:1.5px solid var(--line);border-radius:11px;padding:12px 14px;resize:vertical;
  transition:border-color .16s ease;
}
.qm__fields input:focus,.qm__fields textarea:focus{outline:none;border-color:var(--pink-deep)}
.qm__status:empty{display:none}
.qm__status{
  margin:14px 0 0;font-size:.88rem;color:var(--pink-deep);
  background:rgba(226,63,166,.08);border-radius:10px;padding:11px 13px;
}
.qm__fine{margin:16px 0 0;font-size:.79rem;line-height:1.55;color:var(--muted)}

@media (pointer:coarse){.qc__opt{padding:17px 16px}}
@media (max-width:760px){
  .qc__grid{grid-template-columns:1fr}
  .qm__box{padding:28px 22px 24px}
}
@media (max-width:620px){
  .qm{padding:0;align-items:flex-end}
  .qm__box{max-width:100%;max-height:92vh;border-radius:var(--r-lg) var(--r-lg) 0 0}
}

/* ============ industries: extra detail list ============ */
.indlist{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:13px}
.indlist li{position:relative;padding-left:24px;line-height:1.6}
.indlist li b{color:var(--ink);font-weight:600}
.indlist li::before{
  content:"";position:absolute;left:0;top:.6em;width:8px;height:8px;border-radius:3px;
  background:linear-gradient(135deg,var(--pink),var(--pink-deep));
}

/* ============ immigration page ============ */
.immdemo{
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  background:var(--surface);max-width:760px;margin:0 auto;
}
.immdemo__bar{
  display:flex;align-items:center;gap:7px;padding:12px 16px;
  background:var(--surface-2);border-bottom:1px solid var(--line);
}
.immdemo__bar span{width:10px;height:10px;border-radius:50%;background:var(--line);flex:none}
.immdemo__bar i{
  margin-left:12px;font-family:var(--mono);font-size:.72rem;color:var(--muted);font-style:normal;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.immdemo__body{padding:26px 26px 22px}
.immdemo__h{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--pink-deep);margin:0 0 18px;
}
.immdemo__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-bottom:18px}
.immdemo__big{
  background:var(--surface-2);border:1px solid var(--line);border-radius:13px;padding:18px;text-align:center;
}
.immdemo__big b{display:block;font-family:var(--display);font-size:1.9rem;color:var(--fig);letter-spacing:-.02em}
.immdemo__big span{display:block;margin-top:5px;font-size:.78rem;color:var(--muted)}
.immdemo__rows{list-style:none;margin:0;padding:0;display:grid;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:12px;overflow:hidden}
.immdemo__rows li{
  display:flex;justify-content:space-between;align-items:center;gap:14px;
  background:var(--surface);padding:13px 15px;font-size:.9rem;color:var(--muted);
}
.immdemo__rows li b{font-family:var(--mono);color:var(--ink);font-size:.85rem}
.immdemo__foot{
  margin:16px 0 0;font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);text-align:center;
}

.immblist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.immb{
  display:flex;gap:16px;align-items:flex-start;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:22px 22px 20px;
  transition:border-color .18s ease,transform .18s ease;
}
.immb:hover{border-color:var(--pink-deep);transform:translateY(-2px)}
.immb__n{
  font-family:var(--mono);font-size:.78rem;color:var(--pink-deep);
  background:var(--surface-2);border-radius:8px;padding:7px 9px;flex:none;
}
.immb h3{margin:0 0 7px;font-size:1.06rem;line-height:1.3}
.immb p{margin:0;font-size:.92rem;line-height:1.6;color:var(--muted)}
@media (max-width:880px){
  .immblist{grid-template-columns:1fr}
  .immdemo__grid{grid-template-columns:1fr}
}
/* cards sit on a light surface even inside a dark band — reset inherited text colour */
.band .card{color:var(--ink)}
.band .card h3{color:var(--ink)}
.band .card p{color:var(--muted)}
.band .card .code{color:var(--pink-deep)}

/* ============ immigration: widget mockups ============ */
.wgtlist{display:grid;gap:22px}
.wgtrow{
  display:grid;grid-template-columns:.85fr 1.15fr;gap:34px;align-items:center;
  background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r-lg);padding:28px 30px;
}
.wgtrow--flip .wgtrow__text{order:2}
.wgtrow--flip .wgtrow__demo{order:1}
.wgtrow__code{
  display:inline-block;font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;
  color:var(--pink);background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);
  border-radius:7px;padding:5px 9px;margin-bottom:13px;
}
.wgtrow__text h3{color:#fff;font-size:1.34rem;margin:0 0 9px}
.wgtrow__text p{color:var(--on-band-muted);font-size:.94rem;line-height:1.6;margin:0}
.wgtrow__text .wgtrow__go{margin-top:14px}
.wgtrow__go a{display:inline-block;color:var(--pink);font-family:var(--mono);font-size:.69rem;
  letter-spacing:.07em;text-transform:uppercase;text-decoration:none;padding-bottom:3px;
  border-bottom:1px solid rgba(255,255,255,.3)}
.wgtrow__go a:hover{color:#fff;border-bottom-color:var(--pink)}
.wgtrow__go a:focus-visible{outline:2px solid var(--pink);outline-offset:3px}

.wgt{
  margin:0;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;color:var(--ink);
}
.wgt__head{
  display:flex;align-items:center;gap:9px;padding:13px 16px;
  background:var(--surface-2);border-bottom:1px solid var(--line);
}
.wgt__head b{font-size:.9rem;color:var(--ink);flex:1;min-width:0}
.wgt__dot{
  width:8px;height:8px;border-radius:50%;background:var(--pink-deep);flex:none;
  box-shadow:0 0 0 3px rgba(226,63,166,.18);
}
.wgt__sample{
  font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--pink-deep);background:rgba(226,63,166,.12);border-radius:99px;padding:3px 8px;flex:none;
}
.wgt__body{padding:18px}
.wgt__foot{
  margin:0;padding:11px 16px;border-top:1px solid var(--line);background:var(--surface-2);
  font-family:var(--mono);font-size:.66rem;letter-spacing:.05em;text-transform:uppercase;
  color:var(--fig);opacity:.72;
}

.wgt__stats{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-bottom:15px}
.wgt__stats div{background:var(--surface-2);border-radius:11px;padding:13px;text-align:center}
.wgt__stats b{display:block;font-family:var(--display);font-size:1.6rem;color:var(--fig);letter-spacing:-.02em}
.wgt__stats span{display:block;margin-top:3px;font-size:.72rem;color:var(--muted)}

.wgt__table{width:100%;border-collapse:collapse;font-size:.82rem}
.wgt__table th{
  text-align:left;font-family:var(--mono);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);font-weight:400;padding:0 8px 8px;border-bottom:1px solid var(--line);
}
.wgt__table td{padding:9px 8px;border-bottom:1px solid var(--line);color:var(--muted)}
.wgt__table tr:last-child td{border-bottom:none}
.wgt__table .num{text-align:right;font-family:var(--mono)}
.wgt__table td b{color:var(--pink-deep)}

.wgt__score{text-align:center;padding:4px 0 14px}
.wgt__score b{display:block;font-family:var(--display);font-size:2.6rem;color:var(--fig);letter-spacing:-.03em;line-height:1}
.wgt__score span{display:block;margin-top:5px;font-size:.76rem;color:var(--muted)}
.wgt__lines{list-style:none;margin:0;padding:0;display:grid;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:10px;overflow:hidden}
.wgt__lines li{display:flex;justify-content:space-between;gap:12px;background:var(--surface);
  padding:10px 13px;font-size:.84rem;color:var(--muted)}
.wgt__lines li b{font-family:var(--mono);color:var(--ink)}
.wgt__cta{
  display:block;margin-top:14px;text-align:center;text-decoration:none;
  background:var(--pink);color:var(--plum);font-weight:600;font-size:.88rem;
  border-radius:99px;padding:11px 16px;
}

.wgt__bars{list-style:none;margin:0;padding:0;display:grid;gap:13px}
.wgt__bars li{display:grid;grid-template-columns:1fr auto;gap:4px 12px;align-items:center;font-size:.83rem}
.wgt__bars span{color:var(--muted)}
.wgt__bars b{font-family:var(--mono);font-size:.8rem;color:var(--ink);text-align:right}
.wgt__bars i{
  grid-column:1/-1;display:block;height:5px;border-radius:99px;background:var(--surface-2);position:relative;
}
.wgt__bars i::after{
  content:"";position:absolute;inset:0 auto 0 0;width:var(--pct);border-radius:99px;
  background:linear-gradient(90deg,var(--pink),var(--pink-deep));
}

.wgt__pnp{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.wgt__pnp li{display:flex;align-items:center;gap:11px;font-size:.84rem}
.wgt__prov{
  font-family:var(--mono);font-size:.68rem;color:#fff;background:var(--plum);
  border-radius:7px;padding:6px 7px;flex:none;min-width:34px;text-align:center;
}
.wgt__pname{flex:1;min-width:0;color:var(--ink);line-height:1.3}
.wgt__pname i{display:block;font-style:normal;font-size:.72rem;color:var(--muted);margin-top:2px}
.wgt__pnp li b{font-family:var(--mono);color:var(--pink-deep);font-size:.82rem}

.wgt__step{margin:0 0 8px;font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted)}
.wgt__prog{height:6px;border-radius:99px;background:var(--surface-2);position:relative;margin-bottom:15px}
.wgt__prog--lg{height:8px;margin-bottom:11px}
.wgt__prog i{position:absolute;inset:0 auto 0 0;width:var(--pct);border-radius:99px;
  background:linear-gradient(90deg,var(--pink),var(--pink-deep))}
.wgt__q{margin:0 0 12px;font-size:.96rem;font-weight:600;color:var(--ink);line-height:1.35}
.wgt__opts{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.wgt__opts li{
  border:1.5px solid var(--line);border-radius:10px;padding:10px 13px;font-size:.85rem;color:var(--muted);
}
.wgt__opts li.on{border-color:var(--pink-deep);background:rgba(226,63,166,.06);color:var(--ink);font-weight:500}
.wgt__hint{margin:13px 0 0;font-size:.76rem;color:var(--muted)}

.wgt__count{margin:0 0 13px;font-size:.82rem;color:var(--muted)}
.wgt__count b{color:var(--ink)}
.wgt__docs{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.wgt__docs li{
  display:flex;align-items:center;gap:10px;font-size:.84rem;color:var(--muted);
  background:var(--surface-2);border-radius:9px;padding:9px 12px;
}
.wgt__docs li i{margin-left:auto;font-style:normal;font-family:var(--mono);font-size:.66rem;
  letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.wgt__docs li.on{color:var(--ink)}
.wgt__docs li.on i{color:var(--pink-deep)}
.wgt__tick{
  width:16px;height:16px;border-radius:5px;border:1.5px solid var(--line);flex:none;position:relative;
}
.wgt__docs li.on .wgt__tick{background:var(--pink-deep);border-color:var(--pink-deep)}
.wgt__docs li.on .wgt__tick::after{
  content:"";position:absolute;left:4.5px;top:1.5px;width:4px;height:8px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(43deg);
}

/* ============ before / after ============ */
.ba{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.ba__lbl{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;margin:0 0 10px;
}
.ba__lbl--old{color:var(--muted)}
.ba__lbl--new{color:var(--pink-deep)}
.brow{display:flex;align-items:center;gap:6px;padding:10px 14px;background:var(--surface-2);
  border:1px solid var(--line);border-bottom:none;border-radius:var(--r) var(--r) 0 0}
.brow span{width:9px;height:9px;border-radius:50%;background:var(--line);flex:none}
.brow i{margin-left:10px;font-family:var(--mono);font-size:.68rem;color:var(--muted);font-style:normal}
.brow__page{
  border:1px solid var(--line);border-radius:0 0 var(--r) var(--r);padding:20px;background:var(--surface);
}
.brow__page--old{background:#fbfafb}
.brow__nav{margin:0 0 16px;font-size:.74rem;color:var(--muted)}
.brow__nav b{color:var(--pink-deep)}
.brow__page h4{margin:0 0 12px;font-size:1.08rem;color:var(--ink)}
.brow__stale{margin:0 0 10px;font-size:.8rem;color:#b08;opacity:.75}
.brow__body{margin:0 0 16px;font-size:.82rem;color:var(--muted);line-height:1.55}
.brow__live{display:flex;align-items:center;gap:8px;margin:0 0 14px;font-size:.78rem;color:var(--pink-deep)}
.brow__mini{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:16px}
.brow__mini div{background:var(--surface-2);border-radius:9px;padding:11px 6px;text-align:center}
.brow__mini b{display:block;font-family:var(--display);font-size:1.05rem;color:var(--fig)}
.brow__mini span{display:block;margin-top:2px;font-size:.64rem;color:var(--muted)}
.brow__btn{
  display:inline-block;background:var(--pink);color:var(--plum);font-weight:600;font-size:.8rem;
  border-radius:99px;padding:9px 16px;
}
.brow__btn--old{background:var(--surface-2);color:var(--muted);border:1px solid var(--line);font-weight:400}

/* ============ cms chips + steps ============ */
.cmsrow{list-style:none;margin:0 0 34px;padding:0;display:flex;flex-wrap:wrap;gap:9px}
.cmsrow li{
  font-family:var(--mono);font-size:.8rem;color:var(--ink);background:var(--surface);
  border:1px solid var(--line);border-radius:99px;padding:8px 15px;
}
.isteps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.istep{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:22px 20px}
.istep__n{
  display:grid;place-items:center;width:30px;height:30px;border-radius:9px;
  background:var(--plum);color:var(--pink);font-family:var(--mono);font-size:.8rem;margin-bottom:13px;
}
.istep h3{margin:0 0 7px;font-size:1.02rem;line-height:1.3}
.istep p{margin:0;font-size:.88rem;line-height:1.6;color:var(--muted)}

.immblist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.immb{
  display:flex;gap:16px;align-items:flex-start;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:22px 22px 20px;
  transition:border-color .18s ease,transform .18s ease;
}
.immb:hover{border-color:var(--pink-deep);transform:translateY(-2px)}
.immb__n{font-family:var(--mono);font-size:.78rem;color:var(--pink-deep);
  background:var(--surface-2);border-radius:8px;padding:7px 9px;flex:none}
.immb h3{margin:0 0 7px;font-size:1.06rem;line-height:1.3}
.immb p{margin:0;font-size:.92rem;line-height:1.6;color:var(--muted)}

@media (max-width:1000px){.isteps{grid-template-columns:repeat(2,1fr)}}
@media (max-width:880px){
  .wgtrow{grid-template-columns:1fr;gap:22px;padding:22px}
  .wgtrow--flip .wgtrow__text{order:1}
  .wgtrow--flip .wgtrow__demo{order:2}
  .ba{grid-template-columns:1fr}
  .immblist{grid-template-columns:1fr}
}
@media (max-width:560px){
  .isteps{grid-template-columns:1fr}
  .wgt__stats{grid-template-columns:1fr}
}

/* ============ widget extras: tier badge, deltas, chips, search ============ */
.wgt__tier{
  font-family:var(--mono);font-size:.58rem;letter-spacing:.09em;text-transform:uppercase;
  color:#fff;background:var(--plum);border-radius:99px;padding:3px 8px;flex:none;
}
.wgt__stats3{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-bottom:14px}
.wgt__stats3 div{background:var(--surface-2);border-radius:10px;padding:11px 8px;text-align:center}
.wgt__stats3 b{display:block;font-family:var(--display);font-size:1.25rem;color:var(--fig);letter-spacing:-.02em}
.wgt__stats3 span{display:block;margin-top:3px;font-size:.66rem;color:var(--muted)}
.wgt__table em{font-style:normal;font-family:var(--mono);font-size:.74rem}
.wgt__table em.dn{color:#0a8f63}
.wgt__table em.up{color:#b4530f}
.wgt__chips{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:13px}
.wgt__chips button{
  border:1px solid var(--line);background:var(--surface);color:var(--muted);
  border-radius:8px;padding:4px 10px;font:inherit;font-size:.74rem;cursor:default;
}
.wgt__chips button.on{background:var(--plum);border-color:var(--plum);color:#fff}
.wgt__sp{width:46px;flex:none;opacity:.75}
.wgt__sp svg{width:100%;height:22px;display:block}
.wgt__search{
  display:flex;align-items:center;gap:9px;border:1.5px solid var(--line);border-radius:10px;
  padding:10px 13px;color:var(--muted);font-size:.84rem;margin-bottom:13px;
}
.wgt__search span{color:var(--pink-deep);font-size:1rem}
.wgt__emp{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.wgt__emp li{display:flex;align-items:center;gap:10px;font-size:.84rem}
.wgt__ename{flex:1;min-width:0;color:var(--ink);line-height:1.3}
.wgt__ename i{display:block;font-style:normal;font-size:.72rem;color:var(--muted);margin-top:2px}
.wgt__emp li b{font-family:var(--mono);color:var(--pink-deep);font-size:.8rem}
.wgt__res{
  margin-top:13px;padding:13px;border-radius:11px;background:var(--surface-2);
  border:1px solid var(--line);
}
.wgt__res b{display:block;font-size:.8rem;margin-bottom:8px;color:var(--ink)}
.wgt__res p{margin:9px 0 0;font-size:.78rem;color:var(--muted);line-height:1.5}
.wgt__code{
  display:inline-block;font-family:var(--mono);font-size:.72rem;color:var(--pink-deep);
  background:rgba(226,63,166,.1);border-radius:6px;padding:4px 8px;margin-right:5px;
}

/* ============ insights dashboard ============ */
.ins__kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px;margin-bottom:18px}
.ins__kpi{
  border-radius:var(--r);padding:18px;color:#fff;min-width:0;
  background:linear-gradient(135deg,var(--plum),var(--pink-deep));
}
.ins__kpi:nth-child(2){background:linear-gradient(135deg,#6d2a8f,var(--pink-deep))}
.ins__kpi:nth-child(3){background:linear-gradient(135deg,var(--pink-deep),#ff7ed4)}
.ins__kpi:nth-child(4){background:linear-gradient(135deg,#4a1560,#9646eb)}
.ins__kpi span{display:block;font-family:var(--mono);font-size:.62rem;letter-spacing:.11em;text-transform:uppercase;opacity:.85}
.ins__kpi b{display:block;font-family:var(--display);font-size:1.9rem;letter-spacing:-.03em;margin:7px 0 2px}
.ins__kpi small{font-size:.76rem;opacity:.9}
.ins__grid{display:grid;grid-template-columns:1.1fr 1fr;gap:16px}
.ins__card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:20px;min-width:0}
.ins__card h4{margin:0 0 4px;font-size:1.04rem}
.ins__meta{margin:0 0 12px;font-size:.82rem;color:var(--muted)}
.ins__chart{display:block;width:100%;height:110px}
.ins__tabs{display:flex;gap:4px;background:var(--surface-2);padding:4px;border-radius:11px;margin-bottom:13px}
.ins__tabs button{
  flex:1;border:0;background:transparent;padding:8px 10px;border-radius:8px;
  font:inherit;font-size:.8rem;font-weight:600;color:var(--muted);cursor:default;
}
.ins__tabs button.on{background:var(--plum);color:#fff}
.ins__rows{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.ins__rows li{display:grid;grid-template-columns:1fr auto;gap:4px 10px;font-size:.86rem;font-weight:500}
.ins__rows b{font-family:var(--mono);font-size:.8rem}
.ins__rows i{
  grid-column:1/-1;height:6px;border-radius:99px;background:var(--surface-2);position:relative;display:block;
}
.ins__rows i::after{
  content:"";position:absolute;inset:0 auto 0 0;width:var(--pct);border-radius:99px;
  background:linear-gradient(90deg,var(--pink),var(--pink-deep));
}
.ins__note{
  margin:18px 0 0;padding:15px 17px;border-radius:var(--r);background:var(--surface-2);
  border:1px solid var(--line);font-size:.9rem;line-height:1.6;color:var(--muted);
}
.ins__note b{color:var(--ink)}

/* ============ booking calendar ============ */
.bk{background:var(--surface);border-radius:var(--r-lg);overflow:hidden;color:var(--ink);max-width:960px;margin:0 auto}
.bk__steps{display:grid;grid-template-columns:repeat(3,1fr);background:var(--surface-2);border-bottom:1px solid var(--line)}
.bk__steps div{display:flex;align-items:center;gap:9px;padding:13px 16px;font-size:.84rem;font-weight:600;color:var(--muted)}
.bk__steps i{
  width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-style:normal;
  font-family:var(--mono);font-size:.7rem;background:var(--line);color:var(--muted);flex:none;
}
.bk__steps .on{color:var(--ink)}
.bk__steps .on i{background:linear-gradient(135deg,var(--pink),var(--pink-deep));color:#fff}
.bk__steps .dn i{background:#0a8f63;color:#fff}
.bk__body{padding:22px}
.bk__types{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:20px}
.bk__ty{border:1.5px solid var(--line);border-radius:12px;padding:12px 14px;min-width:0}
.bk__ty.on{border-color:var(--pink-deep);background:rgba(226,63,166,.06)}
.bk__ty b{display:block;font-size:.9rem}
.bk__ty small{display:block;color:var(--muted);font-size:.76rem;margin-top:1px}
.bk__ty span{display:block;font-family:var(--display);font-size:1.1rem;color:var(--pink-deep);margin-top:4px}
.bk__sched{display:grid;grid-template-columns:1.2fr 1fr;gap:22px}
.cal__h{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px}
.cal__h b{font-family:var(--display);font-size:1rem}
.cal__h span{font-family:var(--mono);color:var(--muted);letter-spacing:.2em}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cal__dw{text-align:center;font-family:var(--mono);font-size:.62rem;color:var(--muted);padding-bottom:3px}
.cal__bl{aspect-ratio:1}
.cal__d{
  aspect-ratio:1;display:grid;place-items:center;border-radius:9px;
  font-size:.82rem;font-weight:600;color:var(--muted);
}
.cal__d.av{background:rgba(226,63,166,.09);color:var(--pink-deep)}
.cal__d.sel{background:linear-gradient(135deg,var(--pink),var(--pink-deep));color:#fff}
.cal__key{display:flex;align-items:center;gap:7px;margin:11px 0 0;font-size:.74rem;color:var(--muted)}
.cal__key i{width:11px;height:11px;border-radius:4px;display:inline-block}
.cal__key i.av{background:rgba(226,63,166,.25);margin-left:4px}
.cal__key i.sel{background:var(--pink-deep);margin-left:12px}
.bk__slots h5{margin:0 0 2px;font-size:.98rem}
.bk__tz{margin:0 0 12px;font-family:var(--mono);font-size:.7rem;color:var(--muted)}
.bk__sl{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.bk__sl span{
  border:1.5px solid var(--line);border-radius:10px;padding:10px;text-align:center;
  font-size:.84rem;font-weight:600;color:var(--muted);
}
.bk__sl span.on{background:linear-gradient(135deg,var(--pink),var(--pink-deep));border-color:transparent;color:#fff}
.bk__ft{
  display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;
  margin-top:20px;padding-top:16px;border-top:1px solid var(--line);
}
.bk__pick{font-size:.86rem;color:var(--muted)}
.bk__pick b{color:var(--ink)}
.bk__go{background:var(--pink);color:var(--plum);font-weight:600;font-size:.86rem;border-radius:99px;padding:10px 18px}

/* ============ extras + plans ============ */
.xtras{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-bottom:34px}
.xtra{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:22px}
.xtra h3{margin:0 0 7px;font-size:1.06rem}
.xtra p{margin:0;font-size:.92rem;line-height:1.6;color:var(--muted)}

.plans{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.plan{
  position:relative;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:26px 22px 22px;display:flex;flex-direction:column;
}
.plan--feat{border-color:var(--pink-deep);box-shadow:0 18px 40px -22px rgba(226,63,166,.5)}
.plan__tag{
  position:absolute;top:-11px;left:22px;font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;
  text-transform:uppercase;color:#fff;background:var(--plum);border-radius:99px;padding:4px 10px;
}
.plan h3{margin:0 0 6px;font-size:1.2rem}
.plan__blurb{margin:0 0 16px;font-size:.84rem;line-height:1.5;color:var(--muted);min-height:2.6em}
.plan__price{margin:0;font-family:var(--display);font-size:2.2rem;letter-spacing:-.03em;color:var(--fig)}
.plan__price i{font-style:normal;font-size:.82rem;font-family:var(--body);color:var(--muted);margin-left:4px}
.plan__note{margin:4px 0 16px;font-size:.74rem;color:var(--muted)}
.plan__rows{list-style:none;margin:0 0 20px;padding:16px 0 0;border-top:1px solid var(--line);display:grid;gap:9px;flex:1}
.plan__rows li{display:flex;justify-content:space-between;gap:10px;font-size:.8rem;color:var(--muted);line-height:1.4}
.plan__rows b{color:var(--ink);text-align:right;font-weight:600}
.plan .btn{width:100%}

@media (max-width:1000px){
  .ins__kpis{grid-template-columns:repeat(2,1fr)}
  .plans{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:880px){
  .ins__grid{grid-template-columns:1fr}
  .bk__sched{grid-template-columns:1fr}
  .bk__types{grid-template-columns:1fr}
  .xtras{grid-template-columns:1fr}
}
@media (max-width:620px){
  .plans{grid-template-columns:1fr}
  .ins__kpis{grid-template-columns:1fr}
  .bk__body{padding:16px}
  .wgt__stats3{grid-template-columns:1fr}
}

/* ============ flat component pricing ============ */
.cmp{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:28px 30px 26px}
.cmp__h,.maint__h{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted);margin:0 0 16px;
}
.cmp__list{list-style:none;margin:0;padding:0;display:grid;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.cmp__list li{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  background:var(--surface);padding:15px 18px;
}
.cmp__n{min-width:0;font-weight:600;color:var(--ink);line-height:1.3}
.cmp__n i{display:block;font-style:normal;font-weight:400;font-size:.84rem;color:var(--muted);margin-top:3px}
.cmp__list b{font-family:var(--display);font-size:1.3rem;color:var(--fig);letter-spacing:-.02em;flex:none}

.plans--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.plan__items{
  margin:0 0 20px;padding-top:16px;border-top:1px solid var(--line);
  font-size:.86rem;line-height:1.55;color:var(--muted);flex:1;
}
.plan__price i{font-style:normal;font-size:.8rem;font-family:var(--body);color:var(--muted);margin-left:6px}

.maint{display:grid;grid-template-columns:1fr 1.15fr;gap:16px}
.maint__tiers,.maint__covers{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:26px 28px 24px;
}
.maint__tiers ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.maint__tiers li{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  background:var(--surface-2);border-radius:11px;padding:14px 16px;font-size:.92rem;color:var(--muted);
}
.maint__tiers li b{font-family:var(--display);font-size:1.5rem;color:var(--pink-deep);letter-spacing:-.02em}
.maint__tiers li b i{font-style:normal;font-size:.76rem;font-family:var(--body);color:var(--muted);margin-left:3px}
.maint__flat{
  margin:18px 0 0;padding:14px 16px;border-radius:11px;background:rgba(226,63,166,.07);
  font-size:.86rem;line-height:1.55;color:var(--ink);
}
.maint__covers ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.maint__covers li{position:relative;padding-left:26px;font-size:.92rem;line-height:1.55;color:var(--muted)}
.maint__covers li::before{
  content:"";position:absolute;left:0;top:.5em;width:9px;height:9px;border-radius:3px;
  background:linear-gradient(135deg,var(--pink),var(--pink-deep));
}
@media (max-width:1000px){.plans--3{grid-template-columns:1fr}}
@media (max-width:880px){
  .maint{grid-template-columns:1fr}
  .cmp{padding:22px 20px}
  .cmp__list li{flex-direction:column;align-items:flex-start;gap:6px}
}

/* ============ agency rate card ============ */
/* "Who this is for" on a service page — sector chips, not a gate */
.indstrip{display:flex;flex-wrap:wrap;gap:9px}
.indstrip__c{
  display:inline-block;padding:9px 15px;border:1px solid var(--line-strong);border-radius:999px;
  background:var(--surface);color:var(--ink);text-decoration:none;font-size:.88rem;
  transition:border-color .16s ease,color .16s ease;
}
.indstrip__c:hover{border-color:var(--pink);color:var(--pink-ink)}
.indstrip__c:focus-visible{outline:2px solid var(--pink);outline-offset:2px}
.indstrip__note{margin:18px 0 0;max-width:62ch;font-size:.92rem;font-weight:300;color:var(--muted)}
.rates{list-style:none;margin:0;padding:0;display:grid;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.rates li{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  background:var(--surface);padding:20px 24px;
}
.rate__n{min-width:0;font-weight:600;font-size:1.04rem;color:var(--ink);line-height:1.3}
.rate__n i{display:block;font-style:normal;font-weight:400;font-size:.88rem;color:var(--muted);margin-top:4px;line-height:1.5}
.rates b{font-family:var(--display);font-size:1.7rem;color:var(--fig);letter-spacing:-.02em;flex:none;white-space:nowrap}
.rates b em{font-style:normal;font-size:.8rem;font-family:var(--body);color:var(--muted);margin-left:2px}
@media (max-width:620px){
  .rates li{flex-direction:column;align-items:flex-start;gap:8px;padding:17px 18px}
}

/* ============ quote modal tabs ============ */
.qtabs{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;
  background:var(--surface-2);padding:6px;border-radius:14px;margin-bottom:22px;
}
.qtabs button{
  border:0;background:transparent;border-radius:10px;padding:11px 12px;cursor:pointer;
  font:inherit;font-size:.95rem;font-weight:600;color:var(--muted);text-align:center;line-height:1.25;
  transition:background .16s ease,color .16s ease;
}
.qtabs button i{
  display:block;font-style:normal;font-weight:400;font-size:.72rem;color:var(--muted);
  margin-top:3px;line-height:1.3;
}
.qtabs button:hover{color:var(--ink)}
.qtabs button[aria-selected="true"]{background:var(--plum);color:#fff}
.qtabs button[aria-selected="true"] i{color:rgba(255,255,255,.72)}
.qtabs button:focus-visible{outline:2px solid var(--pink-deep);outline-offset:2px}
@media (pointer:coarse){.qtabs button{padding:13px 10px}}
@media (max-width:760px){
  .qtabs{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:420px){
  .qtabs button{font-size:.88rem}
  .qtabs button i{display:none}
}

/* ---------- pricing assistant ---------- */
.asklaunch{position:fixed;right:18px;bottom:18px;z-index:60;display:inline-flex;align-items:center;gap:9px;
  padding:11px 17px;border:0;border-radius:999px;background:var(--plum-deep);color:#fff;cursor:pointer;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;
  box-shadow:0 10px 30px rgba(21,5,32,.3)}
.asklaunch:hover{background:var(--pink-deep)}
.asklaunch:focus-visible{outline:2px solid var(--pink);outline-offset:3px}
.asklaunch__s{width:17px;height:17px;flex:none;fill:var(--pink);transform-origin:50% 50%;
  animation:askspin 14s linear infinite}
.asklaunch:hover .asklaunch__s{animation-duration:2.6s}
@keyframes askspin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.asklaunch__s{animation:none}}
@media (max-width:620px){.asklaunch span{display:none}
  .asklaunch{padding:14px;right:14px;bottom:14px}}
@media (prefers-reduced-motion:reduce){.asklaunch{transition:none}}

.ask{position:fixed;inset:0;z-index:70;display:flex;align-items:flex-end;justify-content:flex-end;padding:18px}
.ask[hidden]{display:none}
.ask__scrim{position:absolute;inset:0;border:0;padding:0;background:rgba(21,5,32,.5);cursor:pointer}
.ask__panel{position:relative;width:min(420px,100%);max-height:min(620px,86vh);display:flex;flex-direction:column;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  box-shadow:0 30px 70px rgba(21,5,32,.35)}
.ask__head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px;
  border-bottom:1px solid var(--line);background:var(--plum-deep)}
.ask__h{margin:0;font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:#fff}
.ask__x{background:none;border:0;color:#fff;font-size:1.4rem;line-height:1;cursor:pointer;padding:0 4px}
.ask__x:hover{color:var(--pink)}
.ask__log{flex:1 1 auto;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:12px;min-height:150px}
.ask__m{max-width:85%;padding:10px 13px;border-radius:14px;font-size:.92rem;line-height:1.5}
.ask__m--you{align-self:flex-end;background:var(--pink-deep);color:#fff;border-bottom-right-radius:4px}
.ask__m--bot{align-self:flex-start;background:var(--surface-2);color:var(--ink);border-bottom-left-radius:4px}
.ask__m--wait{opacity:.6;font-style:italic}
.ask__note{margin:0;padding:0 16px 10px;font-size:.72rem;color:var(--muted)}
.ask__form{display:flex;gap:8px;padding:12px 16px 16px;border-top:1px solid var(--line)}
.ask__in{flex:1 1 auto;min-width:0;padding:10px 13px;border:1px solid var(--line-strong);border-radius:999px;
  background:var(--bg);color:var(--ink);font:inherit;font-size:.92rem}
.ask__in:focus-visible{outline:2px solid var(--pink);outline-offset:1px}
.ask__send{flex:none;padding:10px 18px;border:0;border-radius:999px;background:var(--pink);color:#17091E;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.ask__send:hover{background:var(--pink-deep);color:#fff}
.ask__send[disabled]{opacity:.5;cursor:default}
/* hand-off form, opened inside the conversation when an answer is not enough */
.askf{align-self:stretch;margin-top:2px;padding:15px 16px 16px;border:2px solid var(--pink);
  border-radius:16px;background:var(--surface-2);display:flex;flex-direction:column;gap:9px}
.askf__h{margin:0;font-family:var(--mono);font-size:.72rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--pink-deep)}
.askf__p{margin:0;font-size:.85rem;line-height:1.5;color:var(--muted)}
.askf__t,.askf__i{width:100%;padding:10px 12px;border:1px solid var(--line-strong);border-radius:11px;
  background:var(--bg);color:var(--ink);font:inherit;font-size:.9rem}
.askf__t{resize:vertical;min-height:62px;line-height:1.45}
.askf__t:focus-visible,.askf__i:focus-visible{outline:2px solid var(--pink);outline-offset:1px}
.askf__hp{position:absolute;left:-9999px;width:1px;height:1px}
.askf__go{margin-top:2px;padding:12px 18px;border:0;border-radius:999px;background:var(--pink);
  color:#17091E;font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;
  text-transform:uppercase;cursor:pointer}
.askf__go:hover{background:var(--pink-deep);color:#fff}
.askf__go[disabled]{opacity:.5;cursor:default}
.askf__s{margin:0;font-size:.78rem;color:var(--pink-deep);min-height:1px}
.askf__s:empty{display:none}
.askf--done{border-color:var(--line-strong)}
/* the quiet line under each answer — deliberately not shaped like a form */
.asknudge{align-self:stretch;margin:2px 0 0;padding:11px 2px 1px;
  border-top:1px dashed var(--line-strong);display:flex;flex-direction:column;gap:7px}
.asknudge__p{margin:0;font-size:.78rem;line-height:1.45;color:var(--muted)}
.asknudge__row{display:flex;gap:7px}
.asknudge__i{flex:1 1 auto;min-width:0;padding:8px 12px;border:1px solid var(--line-strong);
  border-radius:999px;background:var(--bg);color:var(--ink);font:inherit;font-size:.84rem}
.asknudge__i:focus-visible{outline:2px solid var(--pink);outline-offset:1px}
.asknudge__i[disabled]{opacity:.6}
.asknudge__go{flex:none;padding:8px 15px;border:1px solid var(--pink);border-radius:999px;
  background:none;color:var(--pink-deep);font-family:var(--mono);font-size:.66rem;
  letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.asknudge__go:hover{background:var(--pink);color:#17091E}
.asknudge__go--wide{width:100%;padding:10px 15px}
.asknudge__go[disabled]{opacity:.5;cursor:default}
.asknudge__s{margin:0;font-size:.74rem;color:var(--pink-deep)}
.asknudge__s:empty{display:none}
.asknudge--done{border-top-style:solid;border-top-color:var(--line)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.demo__url{margin:14px 0 0;font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;color:var(--on-band-muted)}

/* ---------- missed-call demo: two phones, one call ----------
   Every moving part shares one 12s timeline and picks its slice with keyframe
   percentages, so the two phones can never drift apart — the whole point is
   that it is the same call at the same moment going two ways. Decorative, so
   it stops dead under reduced-motion and settles on each ending. */
.mcp2{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.mcp2__col{display:flex;flex-direction:column;gap:11px;min-width:0}
.mcp2__lbl{
  margin:0;font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:7px;
}
.mcp2__lbl::before{content:"";width:7px;height:7px;border-radius:50%;flex:none}
.mcp2__lbl--bad{color:var(--muted)}
.mcp2__lbl--bad::before{background:#D23A4E}
.mcp2__lbl--good{color:var(--pink-ink)}
.mcp2__lbl--good::before{background:#2FA36B}
.mcp2__cap{margin:0;font-size:.8rem;line-height:1.45;color:var(--muted);font-weight:300}
/* the outcome under each phone — the money, which is the actual argument */
.mcp2__out{padding:14px 15px;border-radius:14px;border:1px solid var(--line-strong);
  background:var(--surface);display:flex;flex-direction:column;gap:3px}
.mcp2__out b{font-family:var(--display);font-size:1.5rem;letter-spacing:-.02em;line-height:1.1}
.mcp2__out span{font-family:var(--mono);font-size:.6rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted)}
.mcp2__out p{margin:8px 0 0;font-size:.78rem;line-height:1.5;font-weight:300;color:var(--muted)}
.mcp2__out--bad{border-color:rgba(210,58,78,.45)}
.mcp2__out--bad b{color:var(--loss)}
.mcp2__out--good{border-color:var(--pink)}
.mcp2__out--good b{color:var(--fig)}
.mcp2__note{grid-column:1/-1;margin:2px 0 0;font-family:var(--mono);font-size:.6rem;
  letter-spacing:.06em;color:var(--muted)}

.mcp__body{
  position:relative;width:100%;aspect-ratio:9/17;border-radius:28px;
  background:linear-gradient(160deg,#2A1038,#150520);border:2px solid var(--line-strong);
  padding:11px 9px;
}
.mcp__notch{
  position:absolute;top:7px;left:50%;transform:translateX(-50%);
  width:58px;height:4px;border-radius:99px;background:rgba(244,234,242,.3);
}
.mcp__screen{
  position:relative;height:100%;border-radius:20px;overflow:hidden;
  background:var(--surface);border:1px solid var(--line);
}
.mcp__call,.mcp__sms,.mcp__after{position:absolute;inset:0;padding:16px 12px;opacity:0}
.mcp__call{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-align:center}
.mcp__cl{margin:0;font-family:var(--mono);font-size:.56rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--muted)}
.mcp__num{margin:3px 0 0;font-family:var(--display);font-size:1.02rem;color:var(--fig);letter-spacing:-.02em}
.mcp__sub{margin:0;font-size:.68rem;color:var(--muted)}
.mcp__keys{display:flex;gap:22px;margin-top:16px}
.mcp__key{width:32px;height:32px;border-radius:50%;display:block}
.mcp__key--no{background:#D23A4E}
.mcp__key--yes{background:#2FA36B}
.mcp__ring{margin:13px 0 0;font-family:var(--mono);font-size:.55rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--pink-ink)}


/* left phone: the day's misses, stacking up */
.mcp__after{display:flex;flex-direction:column;gap:7px;padding-top:16px}
.mcp__day,.mcp__tally{margin:0 0 3px;font-family:var(--mono);font-size:.56rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted)}
.mcp__row{display:flex;align-items:center;gap:6px;padding:7px 9px;border-radius:10px;
  background:var(--surface-2);border:1px solid var(--line-strong);
  font-size:.66rem;color:var(--ink);opacity:0}
.mcp__row span{width:6px;height:6px;border-radius:50%;background:#D23A4E;flex:none}
.mcp__vm{margin:4px 0 0;padding:7px 9px;border-radius:10px;background:var(--surface-2);
  border:1px solid var(--line);font-size:.66rem;color:var(--muted);opacity:0}
.mcp__none{margin:auto 0 0;font-size:.7rem;line-height:1.5;color:var(--muted);opacity:0}

/* right phone: the reply */
.mcp__sms{display:flex;flex-direction:column;gap:7px;padding-top:16px}
.mcp__tally{opacity:0}
.mcp__b{max-width:92%;padding:8px 10px;border-radius:12px;font-size:.68rem;line-height:1.42;opacity:0}
.mcp__b--out{align-self:flex-start;background:var(--surface-2);color:var(--ink);
  border-bottom-left-radius:4px}
.mcp__b--in{align-self:flex-end;background:var(--pink-deep);color:#fff;
  border-bottom-right-radius:4px}
.mcp__t{margin:auto 0 0;font-family:var(--mono);font-size:.52rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);opacity:0}

@keyframes mcpCall{0%,1%{opacity:0}3%,17%{opacity:1}20%,100%{opacity:0}}
@keyframes mcpRing{0%{opacity:1}5%{opacity:.2}10%{opacity:1}15%{opacity:.2}17%{opacity:1}19%,100%{opacity:0}}
@keyframes mcpPane{0%,19%{opacity:0}21%,96%{opacity:1}100%{opacity:0}}
/* Each element gets its own percentages on the SAME clock — animation-delay
   would shift an element's whole slice past the end of the loop, which is how
   the left phone's last line once failed to appear at all.
   The loop is 20s, not 12s: the build-up still finishes around 8 seconds, but
   the resolved state then holds for eleven, which is how long it takes to
   actually read the message and both outcome panels. */
@keyframes mcpIn22{0%,22%{opacity:0;transform:translateY(6px)}25%,96%{opacity:1;transform:none}100%{opacity:0}}
@keyframes mcpIn25{0%,25%{opacity:0;transform:translateY(6px)}28%,96%{opacity:1;transform:none}100%{opacity:0}}
@keyframes mcpIn28{0%,28%{opacity:0;transform:translateY(6px)}31%,96%{opacity:1;transform:none}100%{opacity:0}}
@keyframes mcpIn30{0%,30%{opacity:0;transform:translateY(6px)}33%,96%{opacity:1;transform:none}100%{opacity:0}}
@keyframes mcpIn32{0%,32%{opacity:0;transform:translateY(6px)}35%,96%{opacity:1;transform:none}100%{opacity:0}}
@keyframes mcpIn36{0%,36%{opacity:0;transform:translateY(6px)}40%,96%{opacity:1;transform:none}100%{opacity:0}}
.mcp__call{animation:mcpCall 20s ease-in-out infinite}
.mcp__ring{animation:mcpRing 20s steps(1,end) infinite}
.mcp__sms,.mcp__after{animation:mcpPane 20s ease-in-out infinite}
/* left: three calls land through the day, then silence until the evening */
.mcp__row--a{animation:mcpIn22 20s ease-out infinite}
.mcp__row--b{animation:mcpIn25 20s ease-out infinite}
.mcp__row--c{animation:mcpIn28 20s ease-out infinite}
.mcp__vm{animation:mcpIn32 20s ease-out infinite}
.mcp__none{animation:mcpIn36 20s ease-out infinite}
/* right: the tally, then the conversation */
.mcp__tally{animation:mcpIn22 20s ease-out infinite}
.mcp__b--out{animation:mcpIn25 20s ease-out infinite}
.mcp__b--in{animation:mcpIn30 20s ease-out infinite}
.mcp__t{animation:mcpIn36 20s ease-out infinite}

@media (max-width:620px){
  .mcp2{gap:11px}
  .mcp__b,.mcp__none{font-size:.6rem}
  .mcp__num{font-size:.86rem}
  .mcp__keys{gap:14px}
  .mcp__key{width:25px;height:25px}
  .mcp2__cap{font-size:.74rem}
}
@media (prefers-reduced-motion:reduce){
  .mcp__call,.mcp__ring{animation:none;opacity:0}
  .mcp__sms,.mcp__after,.mcp__b,.mcp__t,.mcp__vm,.mcp__none,
  .mcp__row,.mcp__tally{animation:none;opacity:1;transform:none}
}

/* ---------- missed-call page ---------- */
.mcsteps{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.mcstep{background:var(--surface);padding:24px 22px}
.mcstep__n{display:inline-block;font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;
  color:var(--pink-ink);margin-bottom:12px}
.mcstep h3{margin:0 0 9px;font-size:1.06rem;line-height:1.35}
.mcstep p{margin:0;font-size:.89rem;line-height:1.6;font-weight:300;color:var(--muted)}
.mcincl{margin-top:30px}

/* ---------- selected work ----------
   Real screenshots rather than laptop mockups: the claim is that these are live,
   so the tile should look like the site, not like a presentation of it. */
.workgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:22px}
.work{
  display:flex;flex-direction:column;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  transition:border-color .18s ease,transform .18s ease;
}
.work:hover{border-color:var(--pink);transform:translateY(-2px)}
.work__shot{display:block;background:var(--surface-2);border-bottom:1px solid var(--line)}
.work__shot img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;
  object-position:top center}
.work__body{padding:20px 21px 22px;display:flex;flex-direction:column;flex:1}
.work__kind{margin:0 0 7px;font-family:var(--mono);font-size:.64rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--pink-ink)}
.work h3{margin:0 0 9px;font-size:1.18rem}
.work__blurb{margin:0 0 16px;font-size:.88rem;line-height:1.6;font-weight:300;color:var(--muted);flex:1}
.work__links{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto}
.work__go{
  display:inline-block;padding:8px 14px;border:1px solid var(--line-strong);border-radius:999px;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink);text-decoration:none;transition:border-color .16s ease,color .16s ease;
}
.work__go:hover{border-color:var(--pink);color:var(--pink-ink)}
.work__go:focus-visible{outline:2px solid var(--pink);outline-offset:2px}
.work__go--live{border-color:var(--pink);color:var(--pink-ink)}
.work__go--live:hover{background:var(--pink);color:#17091E;border-color:var(--pink)}
@media (max-width:620px){
  .workgrid{gap:16px}
  .work__body{padding:17px 17px 18px}
}


/* ======================================================================
   DARK THEME ONLY — lit rims and glow

   Every rule below is written twice, once per dark selector, which is how
   the rest of this file does it: [data-theme="dark"] covers the manual
   toggle, and the prefers-color-scheme copy covers a visitor who never
   touches it. Miss one and the theme is half-styled depending on how the
   reader arrived.

   Scoped so the light theme is untouched — it was signed off as is.

   Glow is on edges and buttons, never on photographs: a drop shadow under
   an image is the 3D effect that was rejected earlier, and it stays gone.
   ====================================================================== */

/* --- tokens ------------------------------------------------------------- */
:root[data-theme="dark"]{
  --rim:rgba(255,126,212,.30);
  --rim-soft:rgba(255,126,212,.15);
  --neon:rgba(255,126,212,.55);
}

/* --- buttons: a lit rim rather than a flat fill -------------------------- */
:root[data-theme="dark"] .btn--pink,:root[data-theme="dark"] .btn--onband{
  box-shadow:0 0 0 1px rgba(255,126,212,.45),0 6px 26px -8px rgba(255,126,212,.55);
}
:root[data-theme="dark"] .btn--pink:hover,:root[data-theme="dark"] .btn--onband:hover{
  box-shadow:0 0 0 1px rgba(255,255,255,.55),0 10px 34px -8px rgba(255,126,212,.75);
}
:root[data-theme="dark"] .btn--ghost{
  border-color:var(--rim);
  box-shadow:0 0 18px -10px rgba(255,126,212,.6);
}
:root[data-theme="dark"] .btn--ghost:hover{
  background:transparent;color:var(--pink);border-color:var(--pink);
  box-shadow:0 0 0 1px rgba(255,126,212,.45),0 8px 28px -10px rgba(255,126,212,.7);
}

/* --- cards: luminous edge and a light source in the top corner ----------- */
:root[data-theme="dark"] .card,:root[data-theme="dark"] .deliver__item,:root[data-theme="dark"] .wgt{
  border-color:var(--rim-soft);
  background-image:linear-gradient(157deg,rgba(255,126,212,.07),rgba(255,126,212,0) 46%);
}
:root[data-theme="dark"] .card:hover{
  border-color:var(--rim);
  box-shadow:0 0 0 1px rgba(255,126,212,.18),0 22px 46px -26px rgba(0,0,0,.95);
}

/* --- chips: rim only, glow saved for hover so the rows stay calm --------- */
:root[data-theme="dark"] .plat__row li,:root[data-theme="dark"] .tech__row li{border-color:var(--rim-soft)}
:root[data-theme="dark"] .plat__row li:hover,:root[data-theme="dark"] .tech__row li:hover{
  border-color:var(--rim);box-shadow:0 0 16px -8px rgba(255,126,212,.7);
}

/* --- the assistant panel and its hand-off form --------------------------- */
:root[data-theme="dark"] .askf{border-color:var(--rim);box-shadow:0 0 24px -14px rgba(255,126,212,.8)}

@media (prefers-color-scheme:dark){
/* --- tokens ------------------------------------------------------------- */
:root:not([data-theme="light"]){
  --rim:rgba(255,126,212,.30);
  --rim-soft:rgba(255,126,212,.15);
  --neon:rgba(255,126,212,.55);
}

/* --- buttons: a lit rim rather than a flat fill -------------------------- */
:root:not([data-theme="light"]) .btn--pink,:root:not([data-theme="light"]) .btn--onband{
  box-shadow:0 0 0 1px rgba(255,126,212,.45),0 6px 26px -8px rgba(255,126,212,.55);
}
:root:not([data-theme="light"]) .btn--pink:hover,:root:not([data-theme="light"]) .btn--onband:hover{
  box-shadow:0 0 0 1px rgba(255,255,255,.55),0 10px 34px -8px rgba(255,126,212,.75);
}
:root:not([data-theme="light"]) .btn--ghost{
  border-color:var(--rim);
  box-shadow:0 0 18px -10px rgba(255,126,212,.6);
}
:root:not([data-theme="light"]) .btn--ghost:hover{
  background:transparent;color:var(--pink);border-color:var(--pink);
  box-shadow:0 0 0 1px rgba(255,126,212,.45),0 8px 28px -10px rgba(255,126,212,.7);
}

/* --- cards: luminous edge and a light source in the top corner ----------- */
:root:not([data-theme="light"]) .card,:root:not([data-theme="light"]) .deliver__item,:root:not([data-theme="light"]) .wgt{
  border-color:var(--rim-soft);
  background-image:linear-gradient(157deg,rgba(255,126,212,.07),rgba(255,126,212,0) 46%);
}
:root:not([data-theme="light"]) .card:hover{
  border-color:var(--rim);
  box-shadow:0 0 0 1px rgba(255,126,212,.18),0 22px 46px -26px rgba(0,0,0,.95);
}

/* --- chips: rim only, glow saved for hover so the rows stay calm --------- */
:root:not([data-theme="light"]) .plat__row li,:root:not([data-theme="light"]) .tech__row li{border-color:var(--rim-soft)}
:root:not([data-theme="light"]) .plat__row li:hover,:root:not([data-theme="light"]) .tech__row li:hover{
  border-color:var(--rim);box-shadow:0 0 16px -8px rgba(255,126,212,.7);
}

/* --- the assistant panel and its hand-off form --------------------------- */
:root:not([data-theme="light"]) .askf{border-color:var(--rim);box-shadow:0 0 24px -14px rgba(255,126,212,.8)}
}


/* ======================================================================
   MOBILE: length and reach
   ------------------------------------------------------------------
   Measured before touching anything: the homepage was 28,080px at 390px
   wide — 33.3 phone screens — and the first call-to-action began at
   843px with the fold at 844. The action was one pixel out of sight and
   the rest was a scroll marathon.

   Nothing here changes a pixel above 620px. The desktop layout was
   signed off; this is purely about what a thumb can reach.
   ====================================================================== */

/* The bar is phone-only. Hidden by default so it cannot leak upward. */
.mobar{display:none}
.mob-more{display:none}

@media (max-width:620px){

  /* ---- always-reachable actions ---------------------------------- */
  .mobar{
    display:grid;grid-template-columns:1fr 1.45fr;gap:9px;
    position:fixed;left:0;right:0;bottom:0;z-index:65;
    padding:9px 13px calc(9px + env(safe-area-inset-bottom,0px));
    background:var(--surface);border-top:1px solid var(--line-strong);
  }
  .mobar__b{
    display:inline-flex;align-items:center;justify-content:center;gap:7px;
    min-height:46px;                      /* thumb target, not a link */
    font-family:var(--display);font-weight:600;font-size:.92rem;
    text-decoration:none;border-radius:999px;border:2px solid transparent;
  }
  .mobar__b--call{border-color:var(--line-strong);color:var(--ink)}
  .mobar__b--go{background:var(--pink);border-color:var(--pink);color:var(--plum-deep)}
  /* The bar covers the last ~70px of every page, so give the document
     somewhere to end and lift the assistant button clear of it. */
  body{padding-bottom:74px}
  .asklaunch{bottom:calc(74px + 12px)}

  /* ---- shorten the three longest blocks --------------------------- */
  /* Each of these already links to a page that carries the full set, so
     the homepage shows enough to judge and hands off rather than
     reprinting the whole catalogue in a single column. Measured cost of
     the full lists on a phone: services 4.3 screens, task work 4.5,
     selected work 3.7 — 12.5 of the 33. */
  .cards > :nth-child(n+4){display:none}        /* 3 of 7 services */
  .taskboard > :nth-child(n+6){display:none}    /* 5 of 14 tasks */
  .workgrid > :nth-child(n+4){display:none}     /* 3 of 6 pieces */
  .mob-more{display:block;margin-top:18px}

  /* ---- hero: put something tappable above the fold ---------------- */
  .hero{padding-top:18px;padding-bottom:22px}
  .hero h1{font-size:2.35rem;line-height:1.06}
  .hero .lede{font-size:1rem;line-height:1.5;margin-top:12px}
  .hero .lbl{margin-bottom:10px}

  /* ---- take the air out of the long middle ------------------------ */
  .section{padding-top:38px;padding-bottom:38px}
  .shead{margin-bottom:18px}
}

/* ---- second pass: the blocks that were still carrying screens ------- */
@media (max-width:620px){
  /* The thesis is a six-against-six comparison. Three against three makes
     the same point and halves a 3.9-screen block; the full argument is on
     the approach page, which this section links to. */
  .versus__list > :nth-child(n+4){display:none}

  /* Footer and the two strips were 3.3 screens of chrome below the
     content. Two columns instead of one costs nothing and removes no
     links — a phone has room for two short columns of list items. */
  .foot__grid > div > ul{columns:2;column-gap:18px}
  .foot__grid > div > ul > li{break-inside:avoid}
  .tech__grid{columns:2;column-gap:16px}
  .tech__row{gap:5px}
  .tech__row li{font-size:.72rem;padding:5px 9px}
  .tech__ico{height:14px;max-width:26px}
}

/* ---- MOBILE: section triage -------------------------------------------- */
/* .m-off  = hidden on phones (stays in the DOM, so it is still indexed)     */
/* .m-fold = clamped behind a Read more button, JS only                      */
@media (max-width:620px){
  .m-off{display:none !important}
  /* The mask fades the content itself, so it needs no knowledge of the
     section background and works in both themes with one rule. */
  body.js .mfold__body{max-height:232px;overflow:hidden;
    -webkit-mask-image:linear-gradient(to bottom,#000 62%,rgba(0,0,0,.15) 100%);
            mask-image:linear-gradient(to bottom,#000 62%,rgba(0,0,0,.15) 100%)}
  body.js .mfold__body.is-open{max-height:none;overflow:visible;
    -webkit-mask-image:none;mask-image:none}
  .mfold__btn{display:block;width:100%;margin:14px 0 0;text-align:center}
}
@media (min-width:621px){
  .mfold__body{max-height:none !important;overflow:visible !important}
  .mfold__btn{display:none !important}
}

/* The four-point grids inside the bands stack to one column at 540px, which
   turns each band into a screen and a half on a phone. Two columns keeps the
   whole set in view without making anyone scroll through it item by item. */
@media (max-width:620px){
  .band .steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:26px}
  .band .step p{font-size:.86rem;line-height:1.45}
}

/* Call rescue: the email ask revealed after someone rings the demo line. */
.demo__ask{margin-top:22px;max-width:520px}
.demo__ask-p{margin:0 0 10px;font-size:.92rem;line-height:1.5}