/* OMNIXCO — business systems. Design language carried from the original omnixco.com. */

:root{
  --bg:#f0eef3; --bg-alt:#e9e6ee; --surface:#ffffff;
  --dark:#160d20; --dark-2:#1f1430;
  --pink:#e91e8a;        /* decorative only: borders, dots, gradients */
  --pink-l:#f472b6;      /* accent on dark backgrounds (7.1:1) */
  --pink-t:#c0166e;      /* text + button fill — AA on every light bg (min 4.75:1) */
  --pink-h:#a8125e;      /* hover / pressed */
  --pink-d:#c0166e;
  --text:#160d20; --text-2:#584467;
  --text-3:#6b5880;      /* was #b09ec0 — only 2.0:1, failed AA badly */
  --line:rgba(22,13,32,.12); --line-2:rgba(22,13,32,.07);
  --font-mono:'IBM Plex Mono',ui-monospace,monospace;
  --font-sans:'IBM Plex Sans',system-ui,sans-serif;
  --ease-out:cubic-bezier(.16,1,.3,1); --ease:cubic-bezier(.4,0,.2,1);
  --nav-h:68px;

  /* text on the dark sections — was ad-hoc rgba() per component, which drifted
     down to .5 alpha (3.9:1) in places. Two tokens, both AA on --dark. */
  --on-dark:rgba(255,255,255,.90);
  --on-dark-2:rgba(255,255,255,.68);

  --shadow-sm:0 2px 6px -2px rgba(22,13,32,.08);
  --shadow-md:0 18px 40px -20px rgba(22,13,32,.26);
  --shadow-lg:0 30px 64px -28px rgba(22,13,32,.34);

  /* ---- type scale ----------------------------------------------------------
     Was 41 distinct sizes at one viewport, most of them clamp() interpolating to
     values nobody chose (14.72, 15.04, 15.52, 16.64...). Eight fixed steps plus
     two fluid display sizes. Nothing outside this scale. */
  --fs-3xs:10px;    /* micro labels: day month, tag */
  --fs-2xs:11px;    /* mono eyebrows, legal */
  --fs-xs:12px;     /* mono data, button labels */
  --fs-s:14px;      /* secondary copy, card body, footer links */
  --fs-m:16px;      /* body */
  --fs-l:18px;      /* lede, large numerals */
  --fs-xl:21px;     /* card titles (h3) */
  --fs-2xl:26px;    /* sub-headings */
  --fs-d1:clamp(1.85rem,3.3vw,2.55rem);   /* section display */
  --fs-d2:clamp(2.55rem,6vw,4.4rem);      /* hero display */

  /* ---- spacing: 4px grid ---------------------------------------------------
     Was 32 values, 21 of them off any grid (1,3,5,7,9,11,13,15,19,22,26,34...). */
  --sp-1:4px;   --sp-2:8px;   --sp-3:12px;  --sp-4:16px;
  --sp-5:20px;  --sp-6:24px;  --sp-8:32px;  --sp-10:40px;
  --sp-12:48px; --sp-16:64px; --sp-20:80px; --sp-24:96px;

  /* ---- radii: one per role, not five ---------------------------------------
     Was 2px and 3px both in use — an imperceptible difference that still reads
     as unresolved when both appear in one view. */
  --hairline:1px;   /* grid-gap rules: the divider IS the gap */
  --r:4px;          /* every surface: cards, panels, buttons, inputs, chips */
  --r-pill:100px;   /* pills */
  --r-dot:50%;      /* dots, avatars */
  --radius:4px;     /* legacy alias, same value */
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  /* was font-weight:300 — Plex Sans Light at 16px on the pale lavender ground
     read as washed-out and thin. 400 is the readable weight for body copy. */
  font-family:var(--font-sans); font-weight:400;
  font-size:var(--fs-m); line-height:1.65; overflow-x:hidden;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%; display:block}
a{color:inherit}
/* Optical tracking: -.03em suits a 5rem display line but crushes a 1.15rem card
   title, so tightness now scales with size instead of being flat across h1-h4. */
h1,h2,h3,h4{margin:0}
h1,h2{font-weight:400; line-height:1.06; letter-spacing:-.03em}
h3{font-weight:500; line-height:1.25; letter-spacing:-.015em}
h4{font-weight:500; line-height:1.3; letter-spacing:-.01em}
p{margin:0}
ul{margin:0; padding:0; list-style:none}
strong,b{font-weight:600}

/* Keyboard focus was invisible site-wide — only .field inputs had a ring. */
:focus-visible{outline:2px solid var(--pink-t); outline-offset:3px; border-radius:var(--r)}
.section--dark :focus-visible,.footer :focus-visible,.cookie :focus-visible{outline-color:var(--pink-l)}

.container{width:min(1240px,92vw); margin-inline:auto}
.section{padding:clamp(72px,11vw,152px) 0; position:relative}
.section--dark{background:var(--dark); color:#fff}
.section--alt{background:var(--bg-alt)}
.section--dark .eyebrow{color:var(--pink-l)}
.section--dark .lede{color:var(--on-dark-2)}

/* ---------- shared type ---------- */
.eyebrow{
  font-family:var(--font-mono); font-size:var(--fs-2xs); font-weight:400;
  letter-spacing:.22em; text-transform:uppercase; color:var(--pink-t);
  display:flex; align-items:center; gap:var(--sp-3); margin-bottom:var(--sp-6);
}
.eyebrow::before{content:""; width:26px; height:1px; background:currentColor; opacity:.5}
.h-xl{font-size:var(--fs-d2); line-height:1.02; letter-spacing:-.035em}
.h-lg{font-size:var(--fs-d1); line-height:1.08; letter-spacing:-.03em}
.h-md{font-size:var(--fs-xl); line-height:1.18; letter-spacing:-.02em}
/* balance ragged edges on short display headings (ignored where unsupported) */
.h-xl,.h-lg,.h-md{text-wrap:balance}
.grad{
  background:linear-gradient(102deg,var(--pink) 0%,var(--pink-l) 48%,var(--dark) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.section--dark .grad{background:linear-gradient(102deg,var(--pink-l),#fff 70%); -webkit-background-clip:text; background-clip:text}
.lede{font-size:var(--fs-l); color:var(--text-2); max-width:58ch; line-height:1.62; text-wrap:pretty}
.mono{font-family:var(--font-mono)}
.num{
  font-family:var(--font-mono); font-size:var(--fs-2xs); letter-spacing:.16em;
  color:var(--pink-t); opacity:.9;
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:var(--sp-2);
  font-family:var(--font-mono); font-size:var(--fs-xs); letter-spacing:.12em;
  text-transform:uppercase; text-decoration:none;
  padding:var(--sp-4) 28px; border:1px solid transparent; border-radius:var(--r);
  cursor:pointer; transition:.4s var(--ease-out); white-space:nowrap;
  /* <button> inherits the UA's light grey buttonface; without this the
     white-on-transparent variants render white-on-#efefef (1.15:1). */
  background:transparent; max-width:100%;
}
@media(max-width:520px){
  .btn{white-space:normal; text-align:center; justify-content:center}
}
.btn-pink{background:var(--pink-t); color:#fff}
.btn-pink:hover{background:var(--pink-h); transform:translateY(-2px)}
.btn-dark{background:var(--dark); color:#fff}
.btn-dark:hover{background:var(--dark-2); transform:translateY(-2px)}
.btn-ghost{border-color:var(--line); color:var(--text)}
.btn-ghost:hover{border-color:var(--dark); background:var(--dark); color:#fff}
.btn-white{background:#fff; color:var(--dark)}
.btn-white:hover{transform:translateY(-2px)}
.btn-outline-w{border-color:rgba(255,255,255,.3); color:#fff}
.btn-outline-w:hover{background:#fff; color:var(--dark)}
/* was opacity:.45 on the pink fill — 2.15:1, illegible on the primary CTA.
   A solid muted fill keeps the label readable while still reading as inert. */
.btn[disabled]{pointer-events:none; background:var(--bg-alt); color:var(--text-2);
  border-color:var(--line); box-shadow:none; transform:none}

/* ---------- nav ---------- */
.nav{
  position:fixed; inset:0 0 auto 0; height:var(--nav-h); z-index:900;
  display:flex; align-items:center;
  background:rgba(240,238,243,.82); backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line-2); transition:.4s var(--ease);
}
/* no width here — .container already sets min(1240px,92vw). A width:100% made the
   nav full-bleed, clipping the logo at x=0 and the CTA at the right edge. */
.nav-in{display:flex; align-items:center; justify-content:space-between; gap:var(--sp-5)}
.logo{
  font-family:var(--font-mono); font-size:var(--fs-s); font-weight:500;
  letter-spacing:.28em; text-decoration:none; color:var(--text);
  display:inline-flex; align-items:center; min-height:32px;
}
/* was var(--pink) — 3.63:1, failed AA. --pink is decorative only; a logo is text. */
.logo b{color:var(--pink-t); font-weight:500}
.nav-links{display:flex; align-items:center; gap:var(--sp-8)}
.nav-links a{
  font-family:var(--font-mono); font-size:var(--fs-xs); letter-spacing:.06em;
  text-decoration:none; color:var(--text-2); transition:color .3s;
  position:relative; padding:var(--sp-2) 0; display:inline-flex; align-items:center; min-height:26px;
}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--text)}
/* The CTA is an <a> inside .nav-links, so `.nav-links a` (0,1,1) outranks both
   `.btn` and `.nav-cta` (0,1,0) and was overriding the button's own styling:
   first its white text (1.55:1), and — the part missed the first time — its
   padding and font-size too, which computed to `padding:var(--sp-2) 0` and left the label sitting var(--sp-1) from each edge. Everything the CTA needs must be stated at this specificity or `.nav-links a` wins. */ .nav-links a.btn-pink{color:#fff}
.nav-links a.btn-pink:hover{color:#fff}
.nav-links a.nav-cta{
  padding:var(--sp-3) var(--sp-5); font-size:var(--fs-2xs); letter-spacing:.12em;
  min-height:40px; justify-content:center;
}
.nav-links a[aria-current="page"]::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--pink);
}
.nav-cta{padding:var(--sp-3) var(--sp-5); font-size:var(--fs-2xs)}
.burger{display:none; background:none; border:0; padding:var(--sp-2); cursor:pointer}
.burger span{display:block; width:22px; height:1.5px; background:var(--text); margin:var(--sp-1) 0; transition:.3s}
.nav.open .burger span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.nav.open .burger span:nth-child(2){opacity:0}
.nav.open .burger span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

@media(max-width:940px){
  .burger{display:block}
  .nav-links{
    position:fixed; inset:var(--nav-h) 0 auto 0; flex-direction:column; gap:0;
    background:var(--bg); border-bottom:1px solid var(--line);
    padding:var(--sp-2) 0 var(--sp-5); transform:translateY(-120%); transition:.45s var(--ease-out);
  }
  .nav.open .nav-links{transform:translateY(0)}
  .nav-links a{width:100%; padding:var(--sp-4) 4vw; font-size:var(--fs-s); border-bottom:1px solid var(--line-2)}
  /* must match the desktop rule's specificity, or `.nav-links a` above wins */
  .nav-links a.nav-cta{
    width:auto; margin:var(--sp-4) 4vw var(--sp-1); padding:var(--sp-4) var(--sp-6); font-size:var(--fs-xs);
    border-bottom:0; justify-content:center; min-height:48px;
  }
}

/* ---------- hero ---------- */
.hero{
  min-height:clamp(600px,88vh,900px); display:flex; align-items:center;
  padding:calc(var(--nav-h) + 60px) 0 70px; position:relative; overflow:hidden;
}
.hero-grid-bg{
  position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:linear-gradient(var(--line-2) 1px,transparent 1px),
                   linear-gradient(90deg,var(--line-2) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 78% 62% at 50% 42%,#000,transparent);
}
.hero-in{position:relative; display:grid; grid-template-columns:1.15fr .85fr; gap:60px; align-items:center}
.status{
  display:inline-flex; align-items:center; gap:var(--sp-2); font-family:var(--font-mono);
  font-size:var(--fs-2xs); letter-spacing:.14em; text-transform:uppercase; color:var(--text-2);
  border:1px solid var(--line); border-radius:var(--r-pill); padding:var(--sp-2) var(--sp-4); margin-bottom:var(--sp-8);
}
.dot{width:6px; height:6px; border-radius:var(--r-dot); background:var(--pink); box-shadow:0 0 0 0 var(--pink); animation:pulse 2.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(233,30,138,.55)}70%{box-shadow:0 0 0 9px rgba(233,30,138,0)}100%{box-shadow:0 0 0 0 rgba(233,30,138,0)}}
.hero h1{font-size:var(--fs-d2); margin-bottom:28px}
.hero-desc{font-size:var(--fs-l); color:var(--text-2); max-width:54ch; margin-bottom:var(--sp-10)}
.hero-actions{display:flex; flex-wrap:wrap; gap:var(--sp-3); margin-bottom:52px}
.hero-metrics{display:flex; flex-wrap:wrap; gap:clamp(24px,4vw,56px); padding-top:var(--sp-8); border-top:1px solid var(--line)}
.hm-v{font-family:var(--font-mono); font-size:var(--fs-xl); font-weight:400; letter-spacing:-.02em}
.hm-v span{color:var(--pink-t)}
.hm-l{font-family:var(--font-mono); font-size:var(--fs-3xs); letter-spacing:.16em; text-transform:uppercase; color:var(--text-3); margin-top:var(--sp-1)}

/* terminal motif */
.code-win{
  background:var(--dark); border-radius:var(--r); overflow:hidden;
  box-shadow:0 30px 70px -20px rgba(22,13,32,.45); font-family:var(--font-mono);
}
.code-bar{display:flex; align-items:center; gap:var(--sp-2); padding:var(--sp-3) var(--sp-4); background:#100a18; border-bottom:1px solid rgba(255,255,255,.07)}
.code-bar i{width:9px; height:9px; border-radius:var(--r-dot); background:rgba(255,255,255,.18)}
.code-bar i:first-child{background:var(--pink)}
.code-tab{margin-left:var(--sp-3); font-size:var(--fs-3xs); letter-spacing:.1em; color:rgba(255,255,255,.42)}
.code-body{padding:var(--sp-5) var(--sp-4); font-size:var(--fs-xs); line-height:2; color:rgba(255,255,255,.82)}
.code-body .k{color:var(--pink-l)}
.code-body .c{color:rgba(255,255,255,.32)}
.code-body .v{color:#7dd3fc}
.code-status{
  display:flex; justify-content:space-between; padding:var(--sp-3) var(--sp-4);
  border-top:1px solid rgba(255,255,255,.07); font-size:var(--fs-3xs);
  letter-spacing:.1em; color:rgba(255,255,255,.35);
}
@media(max-width:940px){ .hero-in{grid-template-columns:1fr; gap:44px} .hero-visual{display:none} }

/* ---------- marquee ---------- */
.marquee{background:var(--dark); color:#fff; padding:var(--sp-5) 0; overflow:hidden; white-space:nowrap}
.marquee-track{display:inline-flex; gap:0; animation:slide 42s linear infinite}
.marquee span{font-family:var(--font-mono); font-size:var(--fs-xs); letter-spacing:.16em; text-transform:uppercase; padding:0 var(--sp-6); opacity:.82}
.marquee span::after{content:"◆"; color:var(--pink); margin-left:var(--sp-6); font-size:var(--fs-3xs); vertical-align:middle}
@keyframes slide{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){ .marquee-track{animation:none} }

/* ---------- AWS cost band (homepage lead offer) ---------- */
.awsband{
  background:var(--dark); color:#fff; position:relative; overflow:hidden;
  padding:clamp(56px,7vw,88px) 0;
}
.awsband::before{
  content:""; position:absolute; inset:auto -10% -60% auto; width:70%; height:160%;
  background:radial-gradient(ellipse 50% 50% at 70% 50%,rgba(233,30,138,.28),transparent 70%);
  pointer-events:none;
}
.awsband-in{position:relative; display:grid; grid-template-columns:1.35fr .65fr; gap:clamp(28px,4vw,60px); align-items:center}
.awsband-in>*{min-width:0}
.awsband-copy .eyebrow{color:var(--pink-l)}
.awsband-copy h2{margin-bottom:var(--sp-4)}
.awsband-copy p{color:var(--on-dark-2); max-width:56ch; line-height:1.62; margin-bottom:28px}
.awsband-actions{display:flex; gap:var(--sp-3); flex-wrap:wrap}
.awsband-list{
  display:flex; flex-direction:column; gap:var(--sp-3);
  border-left:2px solid var(--pink); padding-left:var(--sp-5);
}
.awsband-list li{
  font-family:var(--font-mono); font-size:var(--fs-xs); letter-spacing:.04em;
  color:var(--on-dark-2); line-height:1.5;
}
@media(max-width:900px){
  .awsband-in{grid-template-columns:1fr; gap:var(--sp-8)}
  .awsband-list{border-left:0; border-top:1px solid rgba(255,255,255,.14); padding:var(--sp-6) 0 0}
}

/* ---------- section head ---------- */
.sec-head{display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:end; margin-bottom:clamp(44px,6vw,72px)}
.sec-head.center{grid-template-columns:1fr; text-align:center; justify-items:center}
.sec-head.center .eyebrow{justify-content:center}

/* --- format breaks -------------------------------------------------------
   Every section used the identical eyebrow / split-head / grid template, five
   times down the homepage. Two sections now break it so the page has a downbeat. */

/* 1. Outcomes: a centred statement instead of a split head. */
/* max-width in ch would resolve against this element's 16px, not the heading's
   3.4rem — that produced a ~176px column of single words. */
.statement-head{text-align:center; max-width:min(92vw,820px); margin:0 auto clamp(40px,6vw,64px)}
.statement-head .eyebrow{justify-content:center}
.statement{
  font-size:clamp(2rem,4.4vw,3.4rem); line-height:1.08; letter-spacing:-.03em;
  font-weight:400; text-wrap:balance;
}
.statement-sub{
  font-size:var(--fs-s); color:var(--on-dark-2); max-width:56ch;
  margin:var(--sp-6) auto 0; line-height:1.6;
}

/* 2. Process: an asymmetric split with the steps as a vertical track. */
.split{display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(40px,6vw,88px); align-items:start}
.split-head{position:sticky; top:calc(var(--nav-h) + var(--sp-10))}
.split-head .lede{margin-top:var(--sp-6)}
.track{list-style:none; margin:0; padding:0; display:flex; flex-direction:column}
.track-step{
  display:grid; grid-template-columns:auto 1fr; gap:var(--sp-5);
  padding:0 0 var(--sp-8); position:relative;
}
.track-step::before{                       /* connecting rule */
  content:""; position:absolute; left:17px; top:38px; bottom:0; width:1px;
  background:var(--line);
}
.track-step:last-child{padding-bottom:0}
.track-step:last-child::before{display:none}
.track-n{
  width:36px; height:36px; flex:none; border-radius:var(--r-dot);
  border:1px solid var(--line); background:var(--bg);
  display:grid; place-items:center; position:relative; z-index:1;
  font-family:var(--font-mono); font-size:var(--fs-2xs); color:var(--pink-t);
}
.track-step h3{font-size:var(--fs-xl); margin-bottom:var(--sp-2)}
.track-step p{font-size:var(--fs-s); color:var(--text-2); line-height:1.6}
@media(max-width:900px){
  .split{grid-template-columns:1fr; gap:var(--sp-10)}
  .split-head{position:static}
}
@media(max-width:860px){ .sec-head{grid-template-columns:1fr; gap:var(--sp-5)} }

/* ---------- pillars (the vision) ---------- */
.pillars{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-5)}
.pillar{
  background:var(--surface); border:1px solid var(--line-2); border-radius:var(--r);
  padding:36px var(--sp-8) var(--sp-8); box-shadow:var(--shadow-sm);
  transition:transform .45s var(--ease-out),box-shadow .45s var(--ease-out),border-color .45s var(--ease-out);
}
.pillar:hover{transform:translateY(-5px); border-color:var(--pink); box-shadow:var(--shadow-md)}
.pillar h3{font-size:var(--fs-xl); margin:var(--sp-4) 0 var(--sp-3); line-height:1.22}
.pillar p{color:var(--text-2); font-size:var(--fs-s); line-height:1.62}
.pillar-svc{margin-top:var(--sp-5); padding-top:var(--sp-5); border-top:1px solid var(--line-2); display:flex; flex-direction:column; gap:var(--sp-3)}
.pillar-svc a{
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3);
  text-decoration:none; font-family:var(--font-sans); font-size:var(--fs-s); font-weight:500;
  color:var(--text); transition:color .3s,transform .3s; padding:var(--sp-1) 0; min-height:24px;
}
.pillar-svc a:hover{color:var(--pink-t); transform:translateX(4px)}
.pillar-svc a em{font-style:normal; color:var(--text-2); font-size:var(--fs-xs); font-weight:400; font-family:var(--font-mono)}
@media(max-width:940px){ .pillars{grid-template-columns:1fr} }

/* ---------- outcomes ---------- */
.outcomes{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--hairline); background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.12)}
.outcome{background:var(--dark); padding:var(--sp-10) 28px}
.outcome-v{font-family:var(--font-mono); font-size:var(--fs-d1); font-weight:400; letter-spacing:-.03em}
.outcome-v span{color:var(--pink-l); font-size:.5em; vertical-align:super; margin-left:var(--sp-1)}
.outcome-l{font-size:var(--fs-l); margin:var(--sp-3) 0 var(--sp-2); color:#fff; letter-spacing:-.01em}
/* was rgba(255,255,255,.5) = 3.9:1 on --dark, under AA for body text */
.outcome p{font-size:var(--fs-s); color:var(--on-dark-2); line-height:1.6}
@media(max-width:940px){ .outcomes{grid-template-columns:repeat(2,1fr)} }
@media(max-width:520px){ .outcomes{grid-template-columns:1fr} }

/* ---------- process ---------- */
.steps{display:grid; grid-template-columns:repeat(5,1fr); gap:var(--hairline); background:var(--line-2); border:1px solid var(--line-2)}
.step{background:var(--bg); padding:var(--sp-8) var(--sp-6) var(--sp-8); position:relative; transition:.4s var(--ease-out)}
.step:hover{background:var(--surface)}
.step h3{font-size:var(--fs-l); margin:var(--sp-4) 0 var(--sp-2); line-height:1.25}
.step p{font-size:var(--fs-s); color:var(--text-2); line-height:1.62}
@media(max-width:1040px){ .steps{grid-template-columns:repeat(2,1fr)} }
@media(max-width:600px){ .steps{grid-template-columns:1fr} }

/* ---------- service cards grid ---------- */
.svc-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:var(--sp-5)}
.svc{
  background:var(--surface); border:1px solid var(--line-2); border-radius:var(--r);
  padding:var(--sp-10) var(--sp-8); text-decoration:none; color:inherit; display:flex; flex-direction:column;
  transition:transform .45s var(--ease-out),box-shadow .45s var(--ease-out),border-color .45s var(--ease-out);
  position:relative; overflow:hidden; box-shadow:var(--shadow-sm);
}
.svc::after{content:""; position:absolute; left:0; top:0; width:2px; height:0; background:var(--pink); transition:.45s var(--ease-out)}
.svc:hover{transform:translateY(-5px); box-shadow:var(--shadow-lg); border-color:var(--line)}
.svc:hover::after{height:100%}
.svc-top{display:flex; justify-content:space-between; align-items:center; gap:var(--sp-3); margin-bottom:var(--sp-5)}
.tag{font-family:var(--font-mono); font-size:var(--fs-3xs); letter-spacing:.14em; text-transform:uppercase; color:var(--text-2); border:1px solid var(--line); border-radius:var(--r-pill); padding:var(--sp-1) var(--sp-3); white-space:nowrap}
.svc h3{font-size:var(--fs-xl); margin-bottom:var(--sp-3); line-height:1.2}
.svc p{color:var(--text-2); font-size:var(--fs-s); flex:1; line-height:1.62}
.svc-foot{display:flex; justify-content:space-between; align-items:center; gap:var(--sp-3); margin-top:var(--sp-6); padding-top:var(--sp-5); border-top:1px solid var(--line-2); font-family:var(--font-mono); font-size:var(--fs-xs)}
.svc-price{color:var(--text-2)}
.svc-price b{color:var(--text); font-weight:500}
.svc-go{color:var(--pink-t); transition:.3s}
.svc:hover .svc-go{transform:translateX(5px)}
@media(max-width:860px){ .svc-grid{grid-template-columns:1fr} }

/* ---------- capability list ---------- */
.caps{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--hairline); background:var(--line-2); border:1px solid var(--line-2)}
/* these are short English phrases, not code — sans reads far better here */
.cap{background:var(--bg); padding:var(--sp-4) var(--sp-5); font-size:var(--fs-s); line-height:1.55; display:flex; gap:var(--sp-3); align-items:flex-start}
.cap::before{content:"→"; color:var(--pink-t); flex:none}
@media(max-width:860px){ .caps{grid-template-columns:repeat(2,1fr)} }
@media(max-width:560px){ .caps{grid-template-columns:1fr} }

/* ---------- pricing tiers ---------- */
.tiers{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-4); align-items:start}
.tier{
  background:var(--surface); border:1px solid var(--line-2); border-radius:var(--r);
  padding:var(--sp-8) 28px; display:flex; flex-direction:column; height:100%; position:relative;
}
.tier.feature{border-color:var(--pink); box-shadow:0 22px 50px -26px rgba(233,30,138,.4)}
.tier-badge{
  position:absolute; top:-1px; right:22px; transform:translateY(-50%);
  background:var(--pink-t); color:#fff; font-family:var(--font-mono); font-size:var(--fs-3xs);
  letter-spacing:.15em; text-transform:uppercase; padding:var(--sp-1) var(--sp-3); border-radius:var(--r);
}
.tier h3{font-family:var(--font-mono); font-size:var(--fs-xs); letter-spacing:.16em; text-transform:uppercase; color:var(--text-2); margin-bottom:var(--sp-5)}
.tier-price{font-family:var(--font-mono); font-size:var(--fs-2xl); font-weight:400; letter-spacing:-.03em; line-height:1.1}
.tier-price small{font-size:var(--fs-s); color:var(--text-3)}
.tier-sub{font-size:var(--fs-s); color:var(--text-2); margin-top:var(--sp-2); padding-bottom:var(--sp-5); border-bottom:1px solid var(--line-2)}
.tier-sub b{color:var(--pink-t); font-weight:600; font-family:var(--font-mono)}
.tier-blurb{font-size:var(--fs-s); color:var(--text-2); margin:var(--sp-5) 0; line-height:1.62}
.tier-feats{display:flex; flex-direction:column; gap:var(--sp-2); margin-bottom:var(--sp-6); flex:1}
.tier-feats li{font-size:var(--fs-s); display:flex; gap:var(--sp-2); align-items:flex-start; color:var(--text-2); line-height:1.5}
.tier-feats li::before{content:"✓"; color:var(--pink-t); flex:none; font-size:var(--fs-xs); margin-top:var(--sp-1)}
.tier-best{font-size:var(--fs-s); color:var(--text-2); border-top:1px solid var(--line-2); padding-top:var(--sp-4); margin-bottom:var(--sp-5); line-height:1.6}
.tier-best::first-line{font-weight:500}
.tier .btn{width:100%; justify-content:center}
@media(max-width:1100px){ .tiers{grid-template-columns:repeat(2,1fr)} }
@media(max-width:660px){ .tiers{grid-template-columns:1fr} }
.price-note{font-size:var(--fs-s); color:var(--text-2); margin-top:var(--sp-6); text-align:center}

/* ---------- portfolio ---------- */
.work{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-4)}
.work-card{
  background:var(--surface); border:1px solid var(--line-2); border-radius:var(--r); overflow:hidden;
  text-decoration:none; color:inherit; display:flex; flex-direction:column; transition:.45s var(--ease-out);
}
.work-card:hover{transform:translateY(-6px); box-shadow:0 24px 52px -24px rgba(22,13,32,.32)}
.work-card img{aspect-ratio:4/3; object-fit:cover; width:100%}
.work-body{padding:var(--sp-5)}
.work-body .tag{border:0; padding:0; display:block; margin-bottom:var(--sp-2)}
.work-body h3{font-size:var(--fs-l); margin-bottom:var(--sp-2); line-height:1.25}
.work-body p{font-size:var(--fs-s); color:var(--text-2); line-height:1.55}
@media(max-width:1000px){ .work{grid-template-columns:repeat(2,1fr)} }
@media(max-width:520px){ .work{grid-template-columns:1fr} }

/* ---------- very small screens ---------- */
@media(max-width:400px){
  .container{width:94vw}
  .day{min-width:78px}
  .slots{grid-template-columns:repeat(auto-fill,minmax(80px,1fr))}
  .hero-metrics{gap:var(--sp-5) var(--sp-6)}
  .btn{padding:var(--sp-3) var(--sp-5); font-size:var(--fs-2xs)}
  .cookie{left:10px; right:10px; bottom:10px; padding:var(--sp-5)}
  .cookie-actions{flex-direction:column}
  .cookie .btn{width:100%; justify-content:center}
  .tier,.panel{padding:var(--sp-6) var(--sp-5)}
}

/* ---------- CTA ---------- */
.cta{background:var(--dark); color:#fff; text-align:center; position:relative; overflow:hidden}
.cta::before{
  content:""; position:absolute; inset:-50% -10% auto; height:150%;
  background:radial-gradient(ellipse 46% 52% at 50% 40%,rgba(233,30,138,.3),transparent 70%);
  pointer-events:none;
}
.cta-in{position:relative}
.cta h2{margin-bottom:var(--sp-5)}
.cta p{color:var(--on-dark-2); max-width:56ch; margin:0 auto 38px; font-size:var(--fs-l); line-height:1.62}
.cta-actions{display:flex; gap:var(--sp-3); justify-content:center; flex-wrap:wrap}
/* .cta is dark but isn't .section--dark, so it missed the light-accent rule */
.cta .eyebrow{color:var(--pink-l)}
.cta-note{font-family:var(--font-mono); font-size:var(--fs-2xs); letter-spacing:.1em; color:var(--on-dark-2); margin-top:var(--sp-6)}

/* ---------- footer ---------- */
.footer{background:var(--dark); color:#fff; padding:var(--sp-20) 0 var(--sp-8); border-top:1px solid rgba(255,255,255,.08)}
.footer-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:44px; padding-bottom:52px; border-bottom:1px solid rgba(255,255,255,.09)}
.footer-desc{color:var(--on-dark-2); font-size:var(--fs-s); max-width:38ch; margin-top:var(--sp-4); line-height:1.65}
.footer h4{font-family:var(--font-mono); font-size:var(--fs-2xs); letter-spacing:.18em; text-transform:uppercase; color:var(--pink-l); margin-bottom:var(--sp-5)}
.footer-links{display:flex; flex-direction:column; gap:var(--sp-3)}
.footer-links a{font-size:var(--fs-s); color:var(--on-dark-2); text-decoration:none; transition:color .3s;
  display:inline-flex; align-items:center; min-height:26px}
.footer-links a:hover{color:#fff}
/* was rgba(255,255,255,.36) — 2.9:1, effectively unreadable at 11px */
.footer-bottom{padding-top:var(--sp-6); display:flex; justify-content:space-between; gap:var(--sp-5); flex-wrap:wrap; font-family:var(--font-mono); font-size:var(--fs-2xs); color:var(--on-dark-2); line-height:1.9}
.footer-bottom a{color:var(--on-dark-2); text-decoration:none;
  display:inline-block; padding:var(--sp-1) 0; min-height:24px}
.footer-bottom a:hover{color:#fff}
@media(max-width:940px){ .footer-grid{grid-template-columns:1fr 1fr; gap:var(--sp-8)} }
@media(max-width:560px){ .footer-grid{grid-template-columns:1fr} }

/* ---------- page header (interior pages) ---------- */
.phead{padding:calc(var(--nav-h) + clamp(60px,9vw,112px)) 0 clamp(44px,6vw,72px); position:relative; overflow:hidden}
.phead-grid{position:absolute; inset:0; opacity:.45; pointer-events:none;
  background-image:linear-gradient(var(--line-2) 1px,transparent 1px),linear-gradient(90deg,var(--line-2) 1px,transparent 1px);
  background-size:64px 64px; mask-image:radial-gradient(ellipse 70% 80% at 30% 30%,#000,transparent)}
.crumb{font-family:var(--font-mono); font-size:var(--fs-2xs); letter-spacing:.1em; color:var(--text-3); margin-bottom:var(--sp-6); position:relative}
.crumb a{color:var(--text-2); text-decoration:none; display:inline-block; padding:var(--sp-1) 0}
.crumb a:hover{color:var(--pink-t)}
.phead h1{margin-bottom:var(--sp-6); position:relative}
.phead .lede{position:relative}

/* Booking is a transactional page: its hero used to push the picker to y=723 on
   a 900px viewport (and the name field to y=1255 on mobile). One line, then the
   product. */
.phead--tight{padding:calc(var(--nav-h) + var(--sp-10)) 0 var(--sp-8)}
.h-book{font-size:var(--fs-d1); line-height:1.06; letter-spacing:-.03em;
  text-wrap:balance; margin-bottom:var(--sp-4)}
.lede--tight{font-size:var(--fs-m); max-width:52ch}
.section--flush{padding-top:0}
.panel-sub--foot{margin:var(--sp-5) 0 0; font-size:var(--fs-s)}
.panel-sub--centre{margin:var(--sp-4) 0 0; text-align:center; font-size:var(--fs-s)}
.panel-sub--centre a{color:var(--pink-t)}
.btn-block{width:100%; justify-content:center}
.phead-note{
  font-size:var(--fs-s); color:var(--text-2); margin-top:var(--sp-6);
  border-left:2px solid var(--pink); padding-left:var(--sp-4); position:relative; max-width:58ch; line-height:1.65;
}

/* ---------- prose (legal pages) ---------- */
.prose{max-width:78ch}
.prose h2{font-size:var(--fs-2xl); margin:var(--sp-12) 0 var(--sp-4)}
.prose h3{font-size:var(--fs-l); margin:var(--sp-8) 0 var(--sp-3)}
.prose p{color:var(--text-2); margin-bottom:var(--sp-4)}
.prose ul{margin:0 0 var(--sp-4); padding-left:0; display:flex; flex-direction:column; gap:var(--sp-2)}
.prose li{color:var(--text-2); padding-left:var(--sp-5); position:relative}
.prose li::before{content:"—"; position:absolute; left:0; color:var(--pink-t)}
.prose a{color:var(--pink-t)}
.prose strong{font-weight:500; color:var(--text)}
.prose-meta{font-family:var(--font-mono); font-size:var(--fs-2xs); color:var(--text-3); padding-bottom:var(--sp-6); border-bottom:1px solid var(--line-2); margin-bottom:var(--sp-2)}

/* ---------- forms ---------- */
.field{display:flex; flex-direction:column; gap:var(--sp-2); margin-bottom:var(--sp-5)}
/* Was mono 11px/.13em uppercase. Tracked-out monospace is a label style, not a
   reading style — at 11px it was the least legible text on the site. Sans at
   13.5px/500 reads instantly and still sits quietly above the input. */
.field label{
  font-family:var(--font-sans); font-size:var(--fs-s); font-weight:500;
  letter-spacing:0; text-transform:none; color:var(--text);
}
.field-hint{font-size:var(--fs-xs); color:var(--text-2); font-weight:400}
.field input,.field select,.field textarea{
  font-family:var(--font-sans); font-size:var(--fs-s); font-weight:400; color:var(--text);
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:var(--sp-3) var(--sp-4); width:100%; transition:border-color .25s,box-shadow .25s;
}
.field textarea{min-height:140px; resize:vertical; line-height:1.6}
.field input::placeholder,.field textarea::placeholder{color:var(--text-3); opacity:1}
.field input:hover,.field select:hover,.field textarea:hover{border-color:rgba(22,13,32,.24)}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--pink-t); box-shadow:0 0 0 3px rgba(192,22,110,.14);
}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:none}
.field [aria-invalid="true"]{border-color:#c0261e; box-shadow:0 0 0 3px rgba(192,38,30,.12)}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-4)}
@media(max-width:660px){ .field-row{grid-template-columns:1fr} }
.hp{position:absolute; left:-9999px; width:1px; height:1px; opacity:0}
.form-error{
  background:#fdf2f2; border:1px solid #e8b4b0; border-left:3px solid #c0261e;
  color:#8c1c15; border-radius:var(--r); padding:var(--sp-3) var(--sp-4);
  font-size:var(--fs-s); line-height:1.5; margin-bottom:var(--sp-4);
}
.form-note{font-size:var(--fs-s); color:var(--text-2); margin-top:var(--sp-3); text-align:center}

/* ---------- booking ---------- */
.book-wrap{display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(32px,5vw,60px); align-items:start}
/* grid/flex children default to min-width:auto, so the wide day-strip inside a
   panel forced the whole page ~5400px wide. This is the actual fix. */
.book-wrap>*{min-width:0}
@media(max-width:1000px){ .book-wrap{grid-template-columns:1fr} }
.panel{background:var(--surface); border:1px solid var(--line-2); border-radius:var(--r);
  padding:clamp(24px,3.5vw,40px); min-width:0; overflow-wrap:break-word;
  box-shadow:var(--shadow-sm)}
.panel h2{font-size:var(--fs-xl); margin-bottom:var(--sp-2); letter-spacing:-.02em}
/* also de-mono'd: this is a sentence, not a data label */
.panel-sub{font-family:var(--font-sans); font-size:var(--fs-s); color:var(--text-2); margin-bottom:var(--sp-6)}
.step-label{display:flex; align-items:center; gap:var(--sp-3); font-family:var(--font-mono); font-size:var(--fs-2xs); letter-spacing:.16em; text-transform:uppercase; color:var(--text-2); margin-bottom:var(--sp-4)}
.step-label i{width:22px; height:22px; border-radius:var(--r-dot); background:var(--pink-t); color:#fff; font-style:normal; font-size:var(--fs-3xs); display:grid; place-items:center; flex:none}

/* "Soonest available" — most people want the next free slot, not a calendar. */
.soonest{
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4);
  width:100%; text-align:left; cursor:pointer; margin-bottom:var(--sp-5);
  background:var(--dark); color:#fff; border:1px solid var(--dark);
  border-radius:var(--r); padding:var(--sp-4) var(--sp-5);
  transition:.3s var(--ease-out);
}
.soonest:hover{background:var(--dark-2); transform:translateY(-1px)}
.soonest.is-picked{background:var(--pink-t); border-color:var(--pink-t)}
.soonest-k{
  font-family:var(--font-mono); font-size:var(--fs-2xs); letter-spacing:.14em;
  text-transform:uppercase; color:var(--pink-l);
}
.soonest.is-picked .soonest-k{color:#fff; opacity:.75}
.soonest-v{font-family:var(--font-mono); font-size:var(--fs-s); font-weight:500}

/* week navigation replaces a 59-day, 5000px horizontal scroller */
.week-nav{display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); margin-bottom:var(--sp-3)}
.week-label{
  font-family:var(--font-mono); font-size:var(--fs-xs); letter-spacing:.08em;
  color:var(--text-2); text-align:center; flex:1;
}
.week-btn{
  width:36px; height:36px; flex:none; cursor:pointer; font-size:var(--fs-s);
  background:var(--bg); border:1px solid var(--line); border-radius:var(--r);
  color:var(--text); transition:.25s var(--ease-out); line-height:1;
}
.week-btn:hover:not([disabled]){border-color:var(--pink-t); color:var(--pink-t)}
.week-btn[disabled]{opacity:.3; cursor:not-allowed}

.day-strip{display:grid; grid-template-columns:repeat(7,1fr); gap:var(--sp-2); min-width:0}
.day{
  background:var(--bg); border:1px solid var(--line); border-radius:var(--r);
  padding:var(--sp-3) var(--sp-1); text-align:center; cursor:pointer;
  font-family:var(--font-mono); transition:.25s var(--ease-out);
  display:flex; flex-direction:column; gap:var(--sp-1); min-width:0;
}
.day:hover:not([aria-checked="true"]):not([disabled]){border-color:var(--pink-t)}
.day[aria-checked="true"]{background:var(--dark); border-color:var(--dark); color:#fff}
.day[disabled]{opacity:.35; cursor:not-allowed}
.day-wd{font-size:var(--fs-3xs); letter-spacing:.1em; text-transform:uppercase; color:var(--text-3)}
.day[aria-checked="true"] .day-wd{color:var(--pink-l)}
.day-dm{font-size:var(--fs-l); line-height:1.2}
.day-mo{font-size:var(--fs-3xs); letter-spacing:.08em; text-transform:uppercase; color:var(--text-3)}
.day[aria-checked="true"] .day-mo{color:var(--on-dark-2)}
.day-free{font-size:var(--fs-3xs); color:var(--pink-t)}
.day[aria-checked="true"] .day-free{color:var(--pink-l)}
.day[disabled] .day-free{color:var(--text-3)}

.slots{display:grid; grid-template-columns:repeat(auto-fill,minmax(88px,1fr)); gap:var(--sp-2); margin-top:var(--sp-5)}
.slot{
  font-family:var(--font-mono); font-size:var(--fs-s); padding:var(--sp-3) var(--sp-1);
  text-align:center; background:var(--bg); border:1px solid var(--line);
  border-radius:var(--r); cursor:pointer; transition:.2s var(--ease-out);
}
/* must exclude the checked state: :hover:not([disabled]) outranks
   [aria-checked], which made a selected slot pink-on-pink and unreadable */
.slot:hover:not([disabled]):not([aria-checked="true"]){border-color:var(--pink-t); color:var(--pink-t)}
.slot[aria-checked="true"]{background:var(--pink-t); border-color:var(--pink-t); color:#fff}
.slot[disabled]{opacity:.28; cursor:not-allowed; text-decoration:line-through}
.slot-empty{font-size:var(--fs-s); color:var(--text-2); margin-top:var(--sp-5)}

/* optional fields behind a disclosure: two required fields to book a free call */
.more{margin-bottom:var(--sp-5); border-top:1px solid var(--line-2); padding-top:var(--sp-4)}
.more summary{
  cursor:pointer; font-size:var(--fs-s); color:var(--pink-t); font-weight:500;
  list-style:none; display:flex; align-items:center; gap:var(--sp-2);
}
.more summary::-webkit-details-marker{display:none}
.more summary::before{content:"+"; font-family:var(--font-mono); font-size:var(--fs-m); line-height:1}
.more[open] summary::before{content:"–"}
.more summary span{color:var(--text-3); font-weight:400}
.more summary:hover{color:var(--pink-h)}
.more-in{padding-top:var(--sp-5)}

.book-summary{
  background:var(--dark); color:#fff; border-radius:var(--r); padding:var(--sp-5) var(--sp-5); margin-bottom:var(--sp-6);
  font-family:var(--font-mono); font-size:var(--fs-xs); line-height:1.9;
}
.book-summary .bs-k{color:rgba(255,255,255,.42)}
.book-summary .bs-v{color:var(--pink-l)}
.book-summary.empty{background:var(--bg-alt); color:var(--text-3)}

.notice{padding:var(--sp-3) var(--sp-4); border-radius:var(--r); font-family:var(--font-mono); font-size:var(--fs-xs); margin-bottom:var(--sp-4); line-height:1.6}
.notice-err{background:rgba(233,30,138,.09); border:1px solid rgba(233,30,138,.35); color:var(--pink-h)}
.notice-ok{background:rgba(22,13,32,.04); border:1px solid var(--line); color:var(--text-2)}

.confirm{text-align:center; padding:clamp(32px,5vw,56px) 0}
.confirm-tick{width:64px; height:64px; border-radius:var(--r-dot); background:var(--pink-t); color:#fff; display:grid; place-items:center; font-size:var(--fs-2xl); margin:0 auto 26px}
.confirm h2{font-size:var(--fs-2xl); margin-bottom:var(--sp-3)}
.confirm p{color:var(--text-2); margin-bottom:var(--sp-2)}
.confirm-ref{font-family:var(--font-mono); font-size:var(--fs-xs); letter-spacing:.1em; background:var(--bg-alt); border:1px solid var(--line); border-radius:var(--r); padding:var(--sp-3) var(--sp-5); display:inline-block; margin-top:var(--sp-4)}
.hours-list{display:flex; flex-direction:column; gap:var(--sp-3); font-size:var(--fs-s)}
.hours-list div{display:flex; justify-content:space-between; gap:var(--sp-4); padding-bottom:var(--sp-3); border-bottom:1px solid var(--line-2)}
.hours-list div:last-child{border-bottom:0; padding-bottom:0}
/* day names in sans (they are words); times in mono (they are data) */
.hours-list span:first-child{color:var(--text-2)}
.hours-list span:last-child{color:var(--pink-t); font-family:var(--font-mono); font-size:var(--fs-xs); font-weight:500}

/* ---------- cookie banner ---------- */
.cookie{
  position:fixed; left:16px; right:16px; bottom:16px; z-index:1000; max-width:520px;
  background:var(--dark); color:#fff; border:1px solid rgba(255,255,255,.1);
  border-radius:var(--r); padding:var(--sp-6) var(--sp-6);
  box-shadow:0 26px 60px -18px rgba(0,0,0,.5); transform:translateY(140%);
  transition:transform .6s var(--ease-out);
}
.cookie.show{transform:translateY(0)}
.cookie h4{font-family:var(--font-mono); font-size:var(--fs-2xs); letter-spacing:.18em; text-transform:uppercase; color:var(--pink-l); margin-bottom:var(--sp-3)}
.cookie p{font-size:var(--fs-s); color:var(--on-dark-2); margin-bottom:var(--sp-4); line-height:1.6}
.cookie p a{color:var(--pink-l)}
.cookie-actions{display:flex; gap:var(--sp-2); flex-wrap:wrap}
.cookie .btn{padding:var(--sp-3) var(--sp-4); font-size:var(--fs-3xs)}

/* ---------- overflow safety: no grid child may force the page wide ---------- */
.pillars>*,.outcomes>*,.steps>*,.svc-grid>*,.caps>*,.tiers>*,.work>*,
.sec-head>*,.footer-grid>*,.field-row>*,.book-wrap>*,.hero-in>*,.slots>*{min-width:0}
.marquee{max-width:100vw}
h1,h2,h3,h4,p,li,a{overflow-wrap:break-word}
.code-body{overflow-x:auto}

/* ---------- reveal ---------- */
/* Gated on .js, which site.js sets on <html> as its first act. Previously the
   hidden state was unconditional, so if the script failed to run the page kept
   opacity:0 forever — with JS off, all seven cards on /solutions.html were
   invisible. No JS now means no animation rather than no content. */
.js .reveal{opacity:0; transform:translateY(28px); transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)}
.js .reveal.in{opacity:1; transform:none}
@media(prefers-reduced-motion:reduce){
  .js .reveal{opacity:1; transform:none; transition:none}
  *{animation-duration:.01ms !important; transition-duration:.01ms !important}
}
.skip{position:absolute; left:-9999px; background:var(--dark); color:#fff; padding:var(--sp-3) var(--sp-4); z-index:1200}
.skip:focus{left:16px; top:16px}