/*
Theme Name:        Aniverx
Theme URI:         https://aniverx.com
Author:            Aniverx
Author URI:        https://aniverx.com
Description:       Custom theme for Aniverx: digital growth and AI systems. Every page is assembled from reusable sections edited in the WordPress admin through ACF, so any section can be added to any page without touching code. Menus use the WordPress menu system; the inquiry form is available anywhere as [aniverx_contact].
Version:           1.0.0
Requires at least: 6.4
Requires PHP:      8.0
License:           Proprietary. All rights reserved.
Text Domain:       aniverx
Tags:              custom-menu, featured-images, translation-ready
*/

/* ══════════════════════════════════════════════════════════════
   Palette sampled from the Aniverx mark and the social covers:
   mark runs #5030d0 → #20c0d0, logo carries #c02090 through the
   middle, covers sit on #101030 rather than neutral black.
   ══════════════════════════════════════════════════════════════ */
:root{
  --night:#0a0a1c;
  --deep:#070712;
  --violet:#6a41ef;
  --magenta:#c0399f;
  --cyan:#2bc8da;
  --teal:#4fd1c5;

  --paper:#f3f2f9;
  --muted:#bcbad0;
  --dim:#8c8aa8;

  --glass:rgba(255,255,255,.055);
  --glass-2:rgba(255,255,255,.085);
  --edge:rgba(255,255,255,.10);
  --edge-2:rgba(255,255,255,.18);

  --flow:linear-gradient(118deg,var(--violet) 0%,var(--magenta) 48%,var(--cyan) 100%);

  --display:"Space Grotesk",system-ui,sans-serif;
  --body:"Manrope",system-ui,sans-serif;

  --rail-x:40px;
  --gutter:96px;
  --bay:132px;
  --pad:28px;
  --r:24px;

  --m-lede:46ch;      /* standfirsts */
  --m-read:60ch;      /* body copy */
  --m-line:24ch;      /* display lines that land a section */
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--night);
  color:var(--paper);
  font-family:var(--body);
  font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
  /* clip, not hidden: overflow-x:hidden on body makes it a scroll container
     and breaks both page scrolling and the sticky nav */
  overflow-x:clip;
}

/* ── the lit room everything sits in ───────────────────────── */
/* one fixed layer, not three stacked ones. Every extra fixed layer is
   re-rasterised behind each glass panel on every scroll frame */
.sky{
  position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(44% 38% at 12% 8%,  rgba(106,65,239,.40), transparent 70%),
    radial-gradient(40% 34% at 88% 28%, rgba(43,200,218,.22), transparent 70%),
    radial-gradient(38% 32% at 74% 68%, rgba(192,57,159,.24), transparent 70%),
    radial-gradient(44% 40% at 18% 94%, rgba(43,200,218,.17), transparent 70%),
    var(--night);
}

/* ── the spine ─────────────────────────────────────────────── */
.spine{position:absolute;top:0;bottom:0;left:var(--rail-x);width:3px;border-radius:2px;background:rgba(255,255,255,.07);z-index:0}
/* full height, revealed by a clip, so the gradient stays pinned to the page
   and scrolling repaints instead of reflowing */
.spine-fill{
  position:absolute;inset:0;border-radius:2px;
  background-image:linear-gradient(180deg,var(--violet),var(--magenta) 50%,var(--cyan));
  clip-path:inset(0 0 100% 0);
  will-change:clip-path;
}
.node{
  position:absolute;left:calc(var(--rail-x) - var(--pad));
  width:16px;height:16px;margin-left:-6.5px;border-radius:50%;
  background:var(--night);border:2px solid rgba(255,255,255,.14);z-index:2;
  transition:background .45s ease,border-color .45s ease,box-shadow .45s ease,transform .45s ease;
}
.node.lit{
  background:var(--c,var(--violet));border-color:var(--c,var(--violet));
  box-shadow:0 0 0 5px rgba(255,255,255,.05),0 0 20px var(--c,var(--violet));
  transform:scale(1.1);
}

/* ── shell ─────────────────────────────────────────────────── */
.wrap{position:relative;max-width:1320px;margin:0 auto;padding:0 var(--pad);overflow-x:clip}
.bay{position:relative;padding:var(--bay) 0;padding-left:var(--gutter)}

/* each section carries its own light, so scrolling moves through the brand */
.bay::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  inset:0;
  background:radial-gradient(62% 66% at var(--aura,25% 40%),var(--auraC,rgba(106,65,239,.22)),transparent 76%);
  /* the section you are actually on lights up; the others sit back, so one
     section at a time reads as the subject */
  opacity:.42;
  transition:opacity .8s ease;
  will-change:opacity;
}
.bay.here::before,.close.here::before{opacity:1}
.close::before{transition:opacity .8s ease}

/* every section heading arrives the way the journey does: a short gradient
   rule sweeps out from the spine side as the section comes into view */
.bay > h2{position:relative}
.bay > h2::after{
  content:"";position:absolute;left:0;top:-26px;
  width:72px;height:5px;border-radius:3px;
  background:var(--flow);
  clip-path:inset(0 100% 0 0);
}
.bay > h2.in::after{animation:swipe .75s cubic-bezier(.25,0,.2,1) .12s forwards}
@keyframes swipe{to{clip-path:inset(0 0 0 0)}}

/* ── glass ─────────────────────────────────────────────────── */
/* the big panels get real backdrop blur; the small repeated ones (cards,
   slabs) get a translucent fill instead: same read on a dark page, a
   fraction of the cost to composite */
.pane{
  position:relative;
  background:var(--glass);
  border:1px solid var(--edge);
  border-radius:var(--r);
  box-shadow:0 20px 50px -24px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.09);
}
.pane.frost{
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
/* a lit top edge, the tell that reads as real glass */
.pane::after{
  content:"";position:absolute;left:14%;right:14%;top:-1px;height:1px;border-radius:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.42),transparent);
  pointer-events:none;
}

/* ── nav ───────────────────────────────────────────────────── */
.nav{position:sticky;top:18px;z-index:50;padding:0 var(--pad);margin-top:18px}
.nav-in{
  max-width:1320px;margin:0 auto;display:flex;align-items:center;gap:30px;
  background:rgba(14,14,32,.55);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border:1px solid var(--edge);border-radius:999px;
  padding:11px 11px 11px 24px;
  box-shadow:0 14px 40px -22px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.09);
  transition:background .3s ease,border-color .3s ease;
}
.nav.stuck .nav-in{background:rgba(12,12,28,.82);border-color:var(--edge-2)}
.brand{display:flex;align-items:center;gap:11px;font-family:var(--display);font-weight:700;font-size:19px;letter-spacing:-.01em;text-decoration:none;color:var(--paper)}
.brand img{display:block;width:30px;height:auto}
.nav-links{display:flex;gap:28px;margin-left:auto}
.nav-links a{position:relative;color:var(--muted);text-decoration:none;font-size:15px;font-weight:500;padding-bottom:3px;transition:color .25s ease}
.nav-links a::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;border-radius:2px;
  background:var(--flow);transition:right .32s cubic-bezier(.4,0,.2,1);
}
.nav-links a:hover{color:var(--paper)}
.nav-links a:hover::after{right:0}

/* ── buttons ───────────────────────────────────────────────── */
.pill{
  position:relative;display:inline-flex;align-items:center;gap:11px;
  background:var(--flow);background-size:190% 100%;background-position:0% 50%;
  color:#fff;border:0;border-radius:999px;
  padding:12px 13px 12px 23px;
  font-family:var(--body);font-weight:600;font-size:15px;
  text-decoration:none;cursor:pointer;
  box-shadow:0 12px 34px -14px rgba(130,60,220,.85);
  transition:background-position .55s cubic-bezier(.4,0,.2,1),transform .25s ease,box-shadow .25s ease;
}
.pill:hover{background-position:100% 50%;transform:translateY(-2px);box-shadow:0 18px 40px -14px rgba(130,60,220,.95)}
.pill i{width:27px;height:27px;border-radius:50%;background:rgba(0,0,0,.26);display:grid;place-items:center}
.pill i svg{display:block}
.pill-ghost{
  background:var(--glass);background-image:none;color:var(--paper);
  border:1px solid var(--edge);box-shadow:none;
  
}
.pill-ghost:hover{background:var(--glass-2);border-color:var(--edge-2);box-shadow:none}
.pill-ghost i{background:rgba(255,255,255,.12)}
.nav-toggle{display:none}

/* ── type ──────────────────────────────────────────────────── */
h1,h2,h3{font-family:var(--display);font-weight:500;margin:0;letter-spacing:-.03em;line-height:1}
h1{font-size:clamp(2.35rem,6.2vw,5rem);line-height:1}
h2{font-size:clamp(1.85rem,3.5vw,2.85rem);line-height:1.06;max-width:21ch}
h3{font-size:1.28rem;letter-spacing:-.015em;line-height:1.25}
p{margin:0}
/* Two measures across the whole site, not one per component. A page where
   every paragraph starts and ends on the same two lines reads as designed;
   one where each block picks its own width reads as assembled. */
.lede{font-size:clamp(1.05rem,1.5vw,1.28rem);color:var(--muted);max-width:var(--m-lede);line-height:1.56}
.say{color:var(--muted);max-width:var(--m-read)}
.mark{color:var(--dim);font-size:13px;font-weight:600;font-family:var(--display);letter-spacing:.04em}
.glow{
  background:var(--flow);-webkit-background-clip:text;background-clip:text;
  color:transparent;
}

/* ── reveal ────────────────────────────────────────────────── */
.rise{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.22,.8,.3,1),transform .7s cubic-bezier(.22,.8,.3,1)}
.rise.in{opacity:1;transform:none}
.stagger > *{opacity:0;transform:translateY(20px)}
.stagger.in > *{opacity:1;transform:none;transition:opacity .62s cubic-bezier(.22,.8,.3,1),transform .62s cubic-bezier(.22,.8,.3,1)}
.stagger.in > *:nth-child(1){transition-delay:.04s}
.stagger.in > *:nth-child(2){transition-delay:.12s}
.stagger.in > *:nth-child(3){transition-delay:.2s}
.stagger.in > *:nth-child(4){transition-delay:.28s}
.stagger.in > *:nth-child(5){transition-delay:.36s}
.stagger.in > *:nth-child(6){transition-delay:.44s}

/* ── hero ──────────────────────────────────────────────────── */
.hero{padding-top:108px;padding-bottom:104px;padding-left:var(--gutter);position:relative}
.hero h1{max-width:18ch}
.hero .lede{margin-top:32px}
.hero-act{margin-top:44px;display:flex;gap:14px;flex-wrap:wrap}
.hero-strip{
  margin-top:70px;display:grid;grid-template-columns:repeat(4,1fr);
  padding:4px;border-radius:var(--r);overflow:hidden;
}
.chip{padding:24px 24px 26px;position:relative}
.chip + .chip::before{content:"";position:absolute;left:0;top:22%;bottom:22%;width:1px;background:var(--edge)}
.chip b{display:block;font-family:var(--display);font-weight:500;font-size:1.06rem;letter-spacing:-.01em}
.chip span{display:block;color:var(--dim);font-size:13.5px;margin-top:6px;line-height:1.45}
.chip em{display:block;width:26px;height:4px;border-radius:2px;margin-bottom:14px}

/* ── the gap ───────────────────────────────────────────────── */
.gap-row{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:52px}
.slab{padding:26px 22px 30px;background:rgba(255,255,255,.07);transition:transform .35s ease,border-color .35s ease,background .35s ease}
.slab:hover{transform:translateY(-5px);border-color:var(--edge-2);background:var(--glass-2)}
.slab h3{font-size:1.02rem;font-weight:500}
.slab p{color:var(--dim);font-size:14.5px;margin-top:9px;line-height:1.5}
.gap-note{margin-top:26px;display:flex;align-items:center;gap:16px;color:var(--dim);font-size:14.5px}
.gap-note svg{flex:none}
.gap-close{margin-top:46px;font-family:var(--display);font-size:clamp(1.25rem,2.1vw,1.8rem);letter-spacing:-.02em;line-height:1.3;max-width:var(--m-line)}

/* ── pillars ───────────────────────────────────────────────── */
.pillars{margin-top:52px;overflow:hidden}
.pillar{
  display:grid;grid-template-columns:200px 1fr 300px;gap:40px;
  padding:32px 34px;align-items:start;position:relative;
  transition:background .35s ease;
}
.pillar + .pillar::before{content:"";position:absolute;left:34px;right:34px;top:0;height:1px;background:var(--edge)}
.pillar:hover{background:rgba(255,255,255,.035)}
.pillar h3{padding-top:1px}
.pillar .say{font-size:15.5px;max-width:none}
.pillar ul{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:7px}
.pillar li{font-size:13px;color:var(--muted);border:1px solid var(--edge);background:rgba(255,255,255,.04);border-radius:999px;padding:5px 12px;white-space:nowrap}
.tick{width:32px;height:5px;border-radius:3px;margin-bottom:16px;display:block}

/* ── journey ───────────────────────────────────────────────── */
.journey{margin-top:52px;padding:46px 40px 40px}
/* the rail is a dim track; the run sweeps it Attract → Retain once, as soon
   as the section comes into view: a clip reveal, so the gradient stays put */
.rail{position:relative;height:8px;width:83.333%;border-radius:5px;background:rgba(255,255,255,.09);margin:0 0 0 12px}
.rail-run{
  position:absolute;inset:0;border-radius:5px;
  background-image:var(--flow);
  box-shadow:0 0 26px rgba(140,70,220,.5);
  clip-path:inset(0 100% 0 0);
}
.journey.in .rail-run{animation:flow 1.9s linear forwards}
@keyframes flow{to{clip-path:inset(0 0 0 0)}}
.stops{display:grid;grid-template-columns:repeat(6,1fr);margin-top:-15px}
.stop{position:relative;padding-top:44px}
.stop .dot{
  position:absolute;top:-4px;left:4px;width:16px;height:16px;border-radius:50%;
  /* a dark ring separates the dot from the rail without reading as a donut */
  box-shadow:0 0 0 5px rgba(10,10,28,.78);
  filter:grayscale(.9) brightness(.52);
  transition:transform .45s cubic-bezier(.3,1.4,.5,1),box-shadow .45s ease,filter .45s ease;
}
.stop h3,.stop p{transition:opacity .45s ease,color .45s ease}
.stop h3{font-size:1.1rem;font-weight:500;opacity:.42}
.stop p{color:var(--dim);font-size:13.5px;margin-top:8px;line-height:1.45;max-width:17ch;opacity:.42}
/* each stop lights as the sweep reaches it: six beats across the same 1.9s */
.journey.in .stop .dot{filter:none;transform:scale(1.16);box-shadow:0 0 0 5px rgba(10,10,28,.78),0 0 22px currentColor}
.journey.in .stop h3,.journey.in .stop p{opacity:1}
.stop:nth-child(1) .dot,.stop:nth-child(1) h3,.stop:nth-child(1) p{transition-delay:0s}
.stop:nth-child(2) .dot,.stop:nth-child(2) h3,.stop:nth-child(2) p{transition-delay:.38s}
.stop:nth-child(3) .dot,.stop:nth-child(3) h3,.stop:nth-child(3) p{transition-delay:.76s}
.stop:nth-child(4) .dot,.stop:nth-child(4) h3,.stop:nth-child(4) p{transition-delay:1.14s}
.stop:nth-child(5) .dot,.stop:nth-child(5) h3,.stop:nth-child(5) p{transition-delay:1.52s}
.stop:nth-child(6) .dot,.stop:nth-child(6) h3,.stop:nth-child(6) p{transition-delay:1.86s}
.journey-close{margin-top:46px;max-width:var(--m-read);color:var(--muted)}

/* ── work ──────────────────────────────────────────────────── */
.work-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:52px}
.card{
  background:rgba(255,255,255,.07);
  padding:28px 26px 30px;display:flex;flex-direction:column;min-height:206px;
  overflow:hidden;transition:transform .38s ease,border-color .38s ease,background .38s ease;
}
.card:hover{transform:translateY(-6px);border-color:var(--edge-2);background:var(--glass-2)}
.card .mark{margin-bottom:auto}
.card h3{margin-top:26px;max-width:19ch}
.card p{color:var(--dim);font-size:14.5px;margin-top:10px;max-width:42ch}
.card.feature{grid-column:span 2}
.card.feature::before{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:var(--r);
  background:linear-gradient(118deg,rgba(106,65,239,.34),rgba(192,57,159,.2) 52%,rgba(43,200,218,.22));
}
.card.feature h3{font-size:1.85rem;max-width:17ch}
.hold{
  border:1px dashed var(--edge);background:rgba(255,255,255,.015);
  display:grid;place-items:center;min-height:206px;padding:30px;
  color:var(--dim);font-size:14px;text-align:center;border-radius:var(--r);
}

/* who the work was for: a name where the client said yes, an honest line
   where they would rather not be named, and a visible slot where the
   permission has been asked for but not yet given */
.client{
  display:flex;align-items:center;gap:8px;margin-top:14px;
  font-size:13.5px;font-weight:500;color:var(--muted);
}
.client em{width:5px;height:5px;border-radius:50%;background:var(--cyan);font-style:normal;flex:none}
.client.held{color:var(--dim)}
.client.held em{background:rgba(255,255,255,.26)}
.client.pending{color:var(--dim)}
.client.pending em{background:none;border:1px dashed rgba(255,255,255,.45);width:7px;height:7px}
.card.feature .client{font-size:14.5px;color:var(--paper)}
.card.feature .client.held,.card.feature .client.pending{color:var(--muted)}

/* ── client logos ──────────────────────────────────────────── */
.logos{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:44px}
.logo{
  display:grid;place-items:center;min-height:96px;padding:18px;
  border:1px solid var(--edge);background:rgba(255,255,255,.04);
  border-radius:18px;transition:border-color .3s ease,background .3s ease;
}
.logo:hover{border-color:var(--edge-2);background:var(--glass-2)}
.logo img{max-width:100%;max-height:38px;width:auto;height:auto;
  opacity:.82;filter:grayscale(1);transition:opacity .3s ease,filter .3s ease}
.logo:hover img{opacity:1;filter:none}
.logo.empty{
  border-style:dashed;background:rgba(255,255,255,.015);
  color:var(--dim);font-size:12.5px;line-height:1.45;text-align:center;
}
.logo-note{color:var(--dim);font-size:14px;margin-top:22px}

/* ── case studies ──────────────────────────────────────────────
   A project card says what was built. A case study says what was
   wrong first, which is the part a buyer recognises themselves in. */
.cases{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:52px}
.case{
  background:rgba(255,255,255,.055);
  padding:30px 28px 32px;display:flex;flex-direction:column;
  transition:transform .38s ease,border-color .38s ease,background .38s ease;
}
.case:hover{transform:translateY(-5px);border-color:var(--edge-2);background:var(--glass-2)}
.case h3{margin-top:14px;font-size:1.22rem;max-width:26ch}
.case .client{margin-top:12px}
.case-row{margin-top:20px}
.case-row b{
  display:block;color:var(--dim);font-family:var(--display);
  font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
}
.case-row p{color:var(--muted);font-size:14.5px;line-height:1.62;margin-top:7px}
.case-row + .case-row b{color:var(--paper)}
.case .tags{margin-top:auto;padding-top:22px}
/* ── case studies on a service page ────────────────────────────
   A pointer at the evidence, not a second copy of it. */
.proofs{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:48px}
.proof{
  display:block;text-decoration:none;padding:28px 26px 30px;
  transition:transform .35s ease,border-color .35s ease,background .35s ease;
}
.proof:hover{transform:translateY(-5px);border-color:var(--edge-2);background:var(--glass-2)}
.proof h3{margin-top:13px;font-size:1.18rem;max-width:26ch;color:var(--paper)}
/* what the work was, under whoever it was for */
.proof-what{color:var(--muted);font-size:14px;font-weight:500;margin-top:8px}
.proof-body{color:var(--dim);font-size:14.5px;line-height:1.56;margin-top:14px;max-width:46ch}
/* a card that is a link should say so, rather than leaving people to guess */
.proof-go{
  display:inline-flex;align-items:center;gap:7px;margin-top:20px;
  color:var(--muted);font-size:13.5px;font-weight:600;
  transition:color .25s ease;
}
.proof-go i{display:inline-flex;transition:transform .3s ease}
.proof:hover .proof-go{color:var(--paper)}
.proof:hover .proof-go i{transform:translate(2px,-2px)}
/* any card that is a link: never the browser's blue underline */
a.pane,a.card,a.proof{color:inherit;text-decoration:none}
a.pane h3,a.card h3,a.proof h3{text-decoration:none}
.proof-more{margin-top:28px}
.proof-more a{
  color:var(--muted);font-size:14.5px;font-weight:500;text-decoration:none;
  border-bottom:1px solid var(--edge);padding-bottom:3px;transition:color .22s ease,border-color .22s ease;
}
.proof-more a:hover{color:var(--paper);border-color:var(--cyan)}

.case-pdf{
  display:inline-flex;align-items:center;gap:8px;margin-top:20px;
  color:var(--muted);font-size:13.5px;font-weight:500;text-decoration:none;
  border-bottom:1px solid var(--edge);padding-bottom:3px;
  transition:color .25s ease,border-color .25s ease;
}
.case-pdf:hover{color:var(--paper);border-color:var(--cyan)}
.case-pdf svg{flex:none}
.case .tags{margin-top:auto}

/* ── the case study document ───────────────────────────────────
   Clicking a card opens the one-page write-up over the page itself,
   laid out as the printed document it is. Light paper on purpose: a
   document reads as a document, and this is the thing a prospect
   forwards to the person who has to approve the budget. */
.docmodal{
  width:min(820px,calc(100vw - 32px));max-width:none;max-height:calc(100vh - 32px);
  padding:0;border:0;border-radius:18px;overflow:hidden;background:#fff;
  box-shadow:0 40px 120px rgba(0,0,0,.6);
}
.docmodal::backdrop{background:rgba(5,5,16,.78);backdrop-filter:blur(3px)}
.docmodal[open]{animation:docin .32s cubic-bezier(.2,.7,.3,1)}
@keyframes docin{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
.doc-scroll{max-height:calc(100vh - 32px);overflow:auto;-webkit-overflow-scrolling:touch}
.doc-close{
  position:absolute;top:14px;right:14px;z-index:3;
  width:36px;height:36px;border-radius:50%;border:0;cursor:pointer;
  display:grid;place-items:center;
  background:rgba(255,255,255,.14);color:#fff;transition:background .2s ease;
}
.doc-close:hover{background:rgba(255,255,255,.26)}

.doc{font-family:var(--body);color:#2c2b45;font-size:14.5px;line-height:1.55;background:#fff}
.doc-top{background:#0a0a1c;color:#fff;padding:38px 40px 30px;position:relative}
.doc-top::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--flow)}
.doc-kicker{font-family:var(--display);font-size:11.5px;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:#bcbad0}
.doc-top h2{font-family:var(--display);font-size:1.75rem;font-weight:700;line-height:1.16;
  margin-top:8px;max-width:22ch;color:#fff;letter-spacing:-.01em}
.doc-brand{position:absolute;top:38px;right:62px;display:flex;align-items:center;gap:8px}
.doc-brand img{width:22px;height:20px}
.doc-brand b{font-family:var(--display);font-size:1rem;font-weight:700;color:#fff}

.doc-meta{display:grid;grid-template-columns:repeat(3,1fr);background:#f4f3f9;border-bottom:1px solid #e3e1ee}
.doc-meta.four{grid-template-columns:repeat(4,1fr)}
.doc-meta div{min-width:0}
.doc-meta b,.doc-meta a{overflow-wrap:anywhere;word-break:break-word}
.doc-meta a{color:#4a2bcf;text-decoration:none;border-bottom:1px solid rgba(74,43,207,.3)}
.doc-meta a:hover{border-bottom-color:#4a2bcf}
/* the client's name on a card links to the work itself */
.client a{color:inherit;text-decoration:none;border-bottom:1px solid var(--edge);transition:color .22s ease,border-color .22s ease}
.client a:hover{color:var(--paper);border-bottom-color:var(--cyan)}
/* a domain is one unbroken word, and on a phone it is wider than the cell
   it sits in, so it is allowed to break rather than push the page sideways */
.fact{min-width:0}
.fact span,.fact b,.fact a{overflow-wrap:anywhere;word-break:break-word;min-width:0}
.fact a{color:var(--muted);text-decoration:none;border-bottom:1px solid var(--edge)}
.fact a:hover{color:var(--paper);border-bottom-color:var(--cyan)}
.doc-meta div{padding:18px 20px;border-right:1px solid #e3e1ee}
.doc-meta div:last-child{border-right:0}
.doc-meta span{display:block;font-family:var(--display);font-size:10.5px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:#8c8aa8}
.doc-meta b{display:block;margin-top:6px;font-size:14px;font-weight:600;color:#1a1933;line-height:1.4}
.doc-meta b.soft{font-weight:500;color:#8c8aa8}

.doc-body{padding:30px 40px 0}
.doc h3{font-family:var(--display);font-size:1.12rem;font-weight:700;color:#1a1933}
.doc h3 i{font-style:normal;color:#7b3fd4}
.doc-overview{margin-top:8px;color:#3b3a58;line-height:1.62}

.doc-cols{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:26px}
.doc-col{border-radius:14px;padding:22px 20px}
.doc-col.a{background:#f4f3f9;border:1px solid #e6e4f0}
.doc-col.b{background:#f3f0fd;border:1px solid #ded5fb}
.doc-col h4{font-family:var(--display);font-size:1rem;font-weight:700;color:#1a1933}
.doc-col.b h4{color:#4a2bcf}
.doc-col ul{list-style:none;margin-top:14px;padding:0}
.doc-col li{position:relative;padding-left:16px;margin-top:13px;font-size:13.5px;line-height:1.5;color:#45435f}
.doc-col li:first-child{margin-top:0}
.doc-col li::before{content:"";position:absolute;left:0;top:7px;width:6px;height:6px;border-radius:50%;background:#6a41ef}
.doc-col.b li::before{background:#c0399f}
.doc-col li b{display:block;color:#1a1933;font-weight:700;margin-bottom:3px}

.doc-results{margin-top:24px;border-radius:14px;padding:24px 22px;color:#fff;
  background:linear-gradient(118deg,#5b36d8 0%,#a9348b 52%,#1f9fb0 100%)}
.doc-results h4{font-family:var(--display);font-size:1.05rem;font-weight:700}
.doc-results ul{list-style:none;margin-top:14px;padding:0;display:grid;gap:10px}
.doc-results li{position:relative;padding-left:18px;font-size:13.8px;line-height:1.5}
.doc-results li::before{content:"";position:absolute;left:0;top:7px;width:7px;height:7px;
  border-radius:50%;background:rgba(255,255,255,.88)}

.doc-end{margin-top:26px}
.doc-end p{margin-top:6px;color:#3b3a58;line-height:1.6}
.doc-foot{margin-top:30px;background:#f4f3f9;border-top:1px solid #e3e1ee;
  padding:18px 40px;display:flex;justify-content:space-between;align-items:center;
  font-size:13px;color:#56557a;flex-wrap:wrap;gap:8px}
.doc-foot b{font-weight:600;color:#1a1933}
.doc-foot a{color:#56557a;text-decoration:none}
.doc-foot a:hover{color:#1a1933}

/* the results list on a case study page */
.results{list-style:none;margin:44px 0 0;padding:0;display:grid;gap:14px;max-width:var(--m-read)}
.results li{
  position:relative;padding:18px 22px 18px 52px;border-radius:16px;
  border:1px solid var(--edge);background:rgba(255,255,255,.04);
  color:var(--muted);font-size:15.5px;line-height:1.6;
}
.results li::before{
  content:"";position:absolute;left:22px;top:26px;width:10px;height:10px;border-radius:50%;
  background:var(--flow);
}

/* ── process ───────────────────────────────────────────────── */
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:2px;margin-top:48px;padding:4px;overflow:hidden}
.step{padding:26px 22px 28px;position:relative;transition:background .35s ease}
.step:hover{background:rgba(255,255,255,.04)}
.step span{font-family:var(--display);font-size:13px;color:var(--dim);display:block;margin-bottom:12px}
.step b{display:block;height:3px;border-radius:2px;background:var(--flow);margin-bottom:16px;opacity:.85}
.step h3{font-size:1.04rem;font-weight:500}
.step p{color:var(--dim);font-size:13.5px;margin-top:8px;line-height:1.45}

/* ── close ─────────────────────────────────────────────────── */
.close{position:relative;margin-left:var(--gutter);margin-top:var(--bay);padding:76px 60px 70px;overflow:hidden}
.close::before{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:var(--r);
  background:linear-gradient(118deg,rgba(106,65,239,.3),rgba(192,57,159,.17) 52%,rgba(43,200,218,.2));
}
.close h2{max-width:17ch}
.close .lede{margin-top:26px}
.close-act{margin-top:40px}
.close-meta{margin-top:54px;padding-top:28px;border-top:1px solid var(--edge);display:flex;gap:10px 40px;flex-wrap:wrap;color:var(--dim);font-size:14.5px}
.close-meta a{color:var(--muted);text-decoration:none;transition:color .25s ease}
.close-meta a:hover{color:var(--paper)}

footer{margin:46px 0 0 var(--gutter);padding:26px 0 40px;border-top:1px solid var(--edge);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;color:var(--dim);font-size:14px}
footer nav{display:flex;gap:24px;flex-wrap:wrap}
footer a{color:var(--dim);text-decoration:none;transition:color .25s ease}
footer a:hover{color:var(--paper)}

:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:4px}

/* ── responsive ────────────────────────────────────────────── */
/* ══════════════════════════════════════════════════════════════
   SERVICE PAGES
   ══════════════════════════════════════════════════════════════ */

/* a service hero is shorter than the homepage's and carries the pillar it
   belongs to, so the visitor knows where in the site they have landed */
.svc-hero{padding:96px 0 92px var(--gutter);position:relative}
.svc-where{display:flex;align-items:center;gap:11px;margin-bottom:26px;font-size:14px;color:var(--dim)}
.svc-where a{color:var(--muted);text-decoration:none}
.svc-where a:hover{color:var(--paper)}
.svc-where em{width:22px;height:4px;border-radius:2px;background:var(--flow);display:block;font-style:normal}
/* 20ch rather than 15ch: the same sentence in three lines instead of five */
.svc-hero h1{max-width:26ch;font-size:clamp(2.05rem,4.1vw,3.3rem)}
.svc-hero .lede{margin-top:28px;max-width:var(--m-lede)}
.svc-hero .hero-act{margin-top:40px}

/* capability groups: the point is that they are grouped, never a keyword list */
.groups{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:52px}
.group{padding:30px 28px 32px;transition:transform .35s ease,border-color .35s ease,background .35s ease}
.group:hover{transform:translateY(-5px);border-color:var(--edge-2);background:var(--glass-2)}
.group .tick{margin-bottom:18px}
.group h3{font-size:1.22rem}
.group p{color:var(--muted);font-size:15px;margin-top:11px;line-height:1.55}
/* scoped to the direct child list, so the detail rows below do not inherit
   the pill treatment */
.group > ul{margin:20px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:7px}
.group > ul > li{font-size:13px;color:var(--muted);border:1px solid var(--edge);background:rgba(255,255,255,.04);border-radius:999px;padding:5px 12px}

/* the connected flow: five boxes and the arrows between them */
.flow{margin-top:52px;padding:44px 38px 40px}
.flow-row{display:grid;grid-template-columns:repeat(5,1fr);gap:0;align-items:stretch}
.flow-step{position:relative;padding:0 20px;text-align:left}
.flow-step:first-child{padding-left:0}
.flow-step:last-child{padding-right:0}
.flow-step + .flow-step::before{
  content:"";position:absolute;left:-7px;top:19px;width:14px;height:2px;border-radius:1px;
  background:var(--edge-2);
}
.flow-step b{
  display:grid;place-items:center;width:38px;height:38px;border-radius:12px;margin-bottom:16px;
  border:1px solid var(--edge);background:rgba(255,255,255,.05);
  font-family:var(--display);font-size:14px;font-weight:500;color:var(--muted);
}
.flow-step h3{font-size:1.02rem;font-weight:500}
.flow-step p{color:var(--dim);font-size:13.5px;margin-top:8px;line-height:1.45}
.flow-note{margin-top:34px;padding-top:26px;border-top:1px solid var(--edge);color:var(--muted);font-size:15px}
.flow-note span{display:block;max-width:var(--m-read)}

/* the honest section: what we will talk you out of */
.plain{margin-top:52px;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.plain div{padding:26px 24px 28px}
.plain h3{font-size:1.04rem;font-weight:500}
.plain p{color:var(--dim);font-size:14.5px;margin-top:10px;line-height:1.5}

/* the other three pillars, so a service page is never a dead end */
.more{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:48px}
.more a{
  display:block;padding:26px 24px 28px;text-decoration:none;color:inherit;
  transition:transform .35s ease,border-color .35s ease,background .35s ease;
}
.more a:hover{transform:translateY(-5px);border-color:var(--edge-2);background:var(--glass-2)}
.more h3{font-size:1.08rem;font-weight:500;margin-top:14px}
.more p{color:var(--dim);font-size:14px;margin-top:9px;line-height:1.5}


/* ── tablet landscape: 861–1080 ───────────────────────────────
   grids step down one column at a time; dropping straight to a single
   column here leaves 700–870px cards, which are too wide to read */
@media (max-width:1080px){
  :root{--gutter:70px}
  .pillar{grid-template-columns:170px 1fr;gap:26px}
  .pillar ul{grid-column:1/-1}
  .work-grid{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(3,1fr)}
  .hero-strip{grid-template-columns:repeat(2,1fr)}
  .chip + .chip::before{display:none}
  .groups{grid-template-columns:repeat(2,1fr)}
  .plain,.more{grid-template-columns:repeat(2,1fr)}
  .close{padding:64px 44px 58px}
}
@media (max-width:860px){
  :root{--rail-x:20px;--gutter:44px;--bay:84px;--r:20px}
  .nav-links{display:none}
  .nav-links.open{
    display:flex;flex-direction:column;gap:6px;
    position:absolute;top:calc(100% + 10px);left:0;right:0;z-index:60;
    /* solid: the page behind is bright type, and any transparency here
       makes the menu hard to read */
    background:#0c0c1e;
    border:1px solid var(--edge);border-radius:20px;padding:14px 18px;
    box-shadow:0 30px 70px -30px rgba(0,0,0,.95);
  }
  .nav-links.open > a{padding:12px 4px}
  .drop-menu{background:rgba(255,255,255,.05)}
  .nav-in{gap:14px}
  .nav-toggle{display:grid;place-items:center;margin-left:auto;width:40px;height:40px;border-radius:50%;background:transparent;border:1px solid var(--edge);cursor:pointer}
  .nav .pill span{display:none}
  .nav .pill{padding:8px}
  .hero{padding-top:56px;padding-bottom:70px}
  .hero h1{max-width:none}   /* the 17ch measure strands single words at this width */
  .hero-strip{margin-top:48px}
  .gap-row{grid-template-columns:repeat(2,1fr);gap:14px}
  .journey{padding:30px 22px 26px}
  .rail{display:none}
  /* the rail can't survive this width, so the same run becomes a vertical
     line behind the stacked stops and fills downward on scroll */
  .stops{grid-template-columns:1fr;gap:22px;margin-top:4px;position:relative}
  .stops::before,.stops::after{content:"";position:absolute;left:6px;top:6px;bottom:14px;width:3px;border-radius:2px}
  .stops::before{background:rgba(255,255,255,.09)}
  .stops::after{
    background:linear-gradient(180deg,var(--violet),var(--magenta) 50%,var(--cyan));
    box-shadow:0 0 18px rgba(140,70,220,.5);
    clip-path:inset(0 0 100% 0);
  }
  .journey.in .stops::after{animation:flowY 1.9s linear forwards}
  @keyframes flowY{to{clip-path:inset(0 0 0 0)}}
  .stop{padding-top:0;padding-left:26px}
  .stop .dot{top:5px;left:0;width:15px;height:15px;box-shadow:0 0 0 4px rgba(10,10,28,.9)}
  .journey.in .stop .dot{box-shadow:0 0 0 4px rgba(10,10,28,.9),0 0 20px currentColor}
  .stop p{max-width:34ch}
  .steps{grid-template-columns:repeat(2,1fr)}
  .work-grid{grid-template-columns:repeat(2,1fr)}
  .card.feature{grid-column:span 2}
  .logos{grid-template-columns:repeat(3,1fr)}
  .cases{grid-template-columns:repeat(2,1fr)}
  .pillar{grid-template-columns:1fr;gap:15px;padding:26px 22px}
  .pillar + .pillar::before{left:22px;right:22px}
  .close{padding:44px 26px 40px;margin-left:var(--gutter)}
  footer{flex-direction:column;gap:14px}
}

/* ── phone: 680 and below ─────────────────────────────────────
   everything becomes a single column; below this width two columns
   leave no room for a readable line */
@media (max-width:680px){
  .gap-row,.work-grid,.groups,.plain,.more,.steps,.hero-strip{grid-template-columns:1fr}
  .logos{grid-template-columns:repeat(2,1fr)}
  .logo{min-height:84px}
  .cases,.proofs{grid-template-columns:1fr}
  .docmodal{width:100vw;max-height:100vh;border-radius:0}
  .doc-scroll{max-height:100vh}
  .doc-top{padding:30px 22px 24px}
  .doc-brand{top:auto;bottom:24px;right:22px}
  .doc-top h2{font-size:1.4rem;max-width:none;padding-right:40px}
  .doc-meta,.doc-meta.four{grid-template-columns:1fr}
  .doc-meta div{border-right:0;border-bottom:1px solid #e3e1ee;padding:14px 22px}
  .doc-body{padding:24px 22px 0}
  .doc-cols{grid-template-columns:1fr;gap:12px}
  .doc-foot{padding:16px 22px}
  .card.feature{grid-column:auto}
  .hero-strip .chip{padding:20px 22px 22px}
  .chip + .chip{border-top:1px solid var(--edge)}
}

/* ── very small phones: 380 and below ─────────────────────────── */
@media (max-width:380px){
  :root{--gutter:34px;--pad:18px}
  h1{font-size:clamp(2rem,9vw,2.6rem)}
  .nav-in{padding:9px 9px 9px 16px}
  .close-meta{gap:0}
}

/* ── touch devices of any size ────────────────────────────────
   phones and tablets both land here; 27px and 17px rows are fine to
   click and hopeless to tap */
@media (pointer:coarse){
  .nav-links a{padding:11px 0}
  .nav-links a::after{bottom:7px}
  .brand{padding:7px 0}
  .close-meta{gap:4px 40px}
  .close-meta a{display:inline-block;padding:13px 0}
  footer nav{gap:8px 24px}
  footer a{display:inline-block;padding:11px 0}
  .svc-where a{display:inline-block;padding:9px 0}
  /* measured on a phone: these four came in under the 36px a finger needs */
  .foot-col .as-link{display:inline-flex;align-items:center;min-height:38px}
  .legal-body .as-link{padding:9px 0}
  .detail summary{min-height:40px;padding:8px 0}
  .drop-top{min-height:40px}
  .case-pdf{min-height:38px;padding-bottom:6px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none !important;animation:none !important}
  .rise,.stagger > *{opacity:1 !important;transform:none !important}
  .spine-fill{height:100% !important}
  /* the sweeps are animations, so show the finished state instead */
  .rail-run,.stops::after,.bay > h2::after{clip-path:none !important}
  .stop .dot{filter:none !important}
  .stop h3,.stop p{opacity:1 !important}
  .bay::before{opacity:1 !important}
}

/* the column counts for .groups, .plain and .more are set in the shared
   breakpoints above; only the flow needs its own handling here */
@media (max-width:1080px){
  .flow-row{grid-template-columns:repeat(3,1fr);gap:30px 20px}
  .flow-step{padding:0}
  .flow-step + .flow-step::before{display:none}
}
@media (max-width:860px){
  .svc-hero{padding:48px 0 56px var(--gutter)}
  .flow{padding:30px 22px 28px}
  .flow-row{grid-template-columns:repeat(2,1fr);gap:26px 18px}
}
@media (max-width:680px){
  .flow-row{grid-template-columns:1fr;gap:22px}
  .svc-where{flex-wrap:wrap;gap:8px}
}

/* ── hero: fit headline + lede + buttons in the first screen ── */
.hero{--hero-top:clamp(36px,6vh,108px);padding-top:var(--hero-top)}
.hero h1{font-size:clamp(2.35rem,min(5.6vw,9vh),5rem);max-width:20ch}
.hero .lede{margin-top:clamp(16px,2.6vh,32px)}
.hero-act{margin-top:clamp(22px,3.6vh,44px)}
.hero > .node{top:calc(var(--hero-top) + 20px) !important}
@media (max-width:860px){
  .hero{--hero-top:36px}
  .hero h1{max-width:none}
}
@media (max-width:380px){
  .hero h1{font-size:clamp(2rem,9vw,2.6rem)}
}

/* ══════════════════════════════════════════════════════════════
   NAV DROPDOWN
   ══════════════════════════════════════════════════════════════ */

.drop{position:relative}
.drop-top{
  display:inline-flex;align-items:center;gap:7px;
  background:none;border:0;padding:0;cursor:pointer;
  color:var(--muted);font-family:var(--body);font-weight:500;font-size:15px;
  transition:color .25s ease;
}
.drop-top svg{transition:transform .3s ease}
.drop.open .drop-top,.drop.on .drop-top{color:var(--paper)}
.drop.open .drop-top svg{transform:rotate(180deg)}

.drop-menu{
  display:none;
  padding:10px;
  border:1px solid var(--edge);border-radius:18px;
}
.drop.open > .drop-menu{display:block}

.drop-menu a{
  display:grid;grid-template-columns:auto 1fr;gap:3px 13px;align-items:start;
  padding:11px 13px;border-radius:12px;text-decoration:none;
  transition:background .22s ease;
}
.drop-menu a:hover{background:rgba(255,255,255,.07)}
.drop-menu em{grid-row:span 2;width:4px;height:36px;border-radius:2px;margin-top:3px;font-style:normal}
.drop-menu b{color:var(--paper);font-family:var(--display);font-weight:500;font-size:14.5px;letter-spacing:-.01em}
.drop-menu span{color:var(--dim);font-size:13px;line-height:1.42}
.drop-menu a::after{content:none}

/* desktop: the panel floats under the label and opens on hover or focus */
@media (min-width:861px){
  .drop-menu{
    display:block;position:absolute;z-index:60;
    top:calc(100% + 18px);left:50%;transform:translate(-50%,-8px);
    width:336px;
    background:rgba(11,11,26,.985);
    backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
    box-shadow:0 26px 60px -28px rgba(0,0,0,.95), inset 0 1px 0 rgba(255,255,255,.08);
    opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .22s ease,transform .22s ease,visibility .22s;
  }
  /* an invisible bridge, so the cursor can cross the gap to the panel */
  .drop::after{content:"";position:absolute;top:100%;left:-12px;right:-12px;height:20px}
  .drop:hover .drop-top{color:var(--paper)}
  .drop:hover .drop-top svg{transform:rotate(180deg)}
  .drop:hover > .drop-menu,
  .drop:focus-within > .drop-menu,
  .drop.open > .drop-menu{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0)}
}

/* phone: it expands in place inside the stacked menu */
@media (max-width:860px){
  .drop{width:100%}
  .drop-top{width:100%;justify-content:space-between;padding:11px 0}
  .drop-menu{margin-top:4px;background:rgba(255,255,255,.04)}
  .drop-menu a{padding:12px 12px}
}

/* ══════════════════════════════════════════════════════════════
   PAGES: prose, form, work index, values
   ══════════════════════════════════════════════════════════════ */

/* long-form reading: legal pages and anything mostly text */
.prose{max-width:var(--m-read);margin-top:46px}
.prose h2{font-size:clamp(1.5rem,2.6vw,2rem);margin:54px 0 0}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:1.1rem;margin:30px 0 0}
.prose p{color:var(--muted);margin-top:16px;line-height:1.68}
.prose ul{margin:16px 0 0;padding-left:22px;color:var(--muted)}
.prose li{margin-top:9px;line-height:1.6}
.prose a{color:var(--paper);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(255,255,255,.3)}
.prose a:hover{text-decoration-color:var(--cyan)}
.prose strong{color:var(--paper);font-weight:600}
.scrollx{margin-top:22px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.prose table{width:100%;min-width:430px;border-collapse:collapse;font-size:14.5px}
.prose th,.prose td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--edge);color:var(--muted);vertical-align:top}
.prose th{color:var(--paper);font-family:var(--display);font-weight:500}

.stamp{display:inline-block;margin-top:18px;padding:7px 14px;border:1px solid var(--edge);border-radius:999px;color:var(--dim);font-size:13.5px}
.aside{margin-top:44px;padding:24px 26px}
.aside h3{font-size:1.04rem;font-weight:500}
.aside p{color:var(--dim);font-size:14.5px;margin-top:10px;line-height:1.55}

/* inquiry form */
.form{margin-top:48px;padding:38px 36px 40px;max-width:720px}
.field{margin-top:22px}
.field:first-child{margin-top:0}
.field label{display:block;font-size:14px;color:var(--muted);margin-bottom:9px;font-weight:500}
.field .hint{color:var(--dim);font-weight:400}
.field input,.field textarea,.field select{
  width:100%;padding:13px 15px;
  background:rgba(255,255,255,.05);
  border:1px solid var(--edge);border-radius:12px;
  color:var(--paper);font-family:var(--body);font-size:15.5px;
  transition:border-color .25s ease,background .25s ease;
}
.field textarea{min-height:124px;resize:vertical;line-height:1.55}
.field select{appearance:none;cursor:pointer}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none;border-color:var(--cyan);background:rgba(255,255,255,.07);
}
.field input::placeholder,.field textarea::placeholder{color:#6f6d88}
.two{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.tick-box{display:flex;gap:12px;align-items:flex-start;margin-top:26px}
.tick-box input{width:19px;height:19px;flex:none;margin-top:2px;accent-color:var(--violet)}
.tick-box label{font-size:14px;color:var(--muted);line-height:1.5;margin:0}
.form-act{margin-top:30px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.form-note{color:var(--dim);font-size:13.5px;max-width:var(--m-lede)}

/* work index */
.proj{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:52px}
.proj > a{
  display:block;padding:30px 28px 32px;text-decoration:none;color:inherit;
  transition:transform .35s ease,border-color .35s ease,background .35s ease;
}
.proj > a:hover{transform:translateY(-5px);border-color:var(--edge-2);background:var(--glass-2)}
.proj h3{font-size:1.3rem;margin-top:16px;max-width:22ch}
.proj p{color:var(--muted);font-size:14.5px;margin-top:11px;line-height:1.55}
.proj .stack{margin-top:18px;display:flex;flex-wrap:wrap;gap:7px}
.proj .stack span{font-size:13px;color:var(--dim);border:1px solid var(--edge);border-radius:999px;padding:4px 11px}

/* what we believe / values */
.vals{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:50px}
.vals div{padding:28px 26px 30px}
.vals h3{font-size:1.12rem;font-weight:500}
.vals p{color:var(--muted);font-size:14.5px;margin-top:11px;line-height:1.58}

/* a plain fact row: company details, hours, where we are */
.facts{margin-top:46px;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;overflow:hidden;padding:1px}
.facts div{padding:24px 24px 26px}
.facts dt{color:var(--dim);font-size:13px;font-family:var(--display);font-weight:500}
.facts dd{margin:9px 0 0;color:var(--paper);font-size:15.5px;line-height:1.5}
.facts dd a{color:var(--paper);text-decoration:none}
.facts dd a:hover{color:var(--cyan)}

@media (max-width:1080px){
  .facts{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:860px){
  .proj,.vals{grid-template-columns:1fr}
  .form{padding:28px 24px 30px}
}
@media (max-width:680px){
  .two{grid-template-columns:1fr;gap:0}
  .two .field{margin-top:22px}
  .facts{grid-template-columns:1fr}
  .prose{margin-top:34px}
  .prose h2{margin-top:40px}
}

/* ══════════════════════════════════════════════════════════════
   COMPONENTS ADDED WITH THE FULL PAGE SET
   ══════════════════════════════════════════════════════════════ */

/* ── tags on a work card ─────────────────────────────────────── */
.tags{margin:18px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:6px}
.tags li{font-size:13px;color:var(--muted);border:1px solid var(--edge);background:rgba(255,255,255,.04);border-radius:999px;padding:4px 11px}
.card.feature .tags li{border-color:rgba(255,255,255,.2);background:rgba(255,255,255,.08)}

/* ── the company facts on About ──────────────────────────────── */
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:48px}
.fact{padding:24px 22px 26px}
.fact span{display:block;color:var(--dim);font-size:13px;margin-bottom:10px}
.fact b{font-family:var(--display);font-weight:500;font-size:1.5rem;letter-spacing:-.02em;line-height:1.1}

/* ── contact form ────────────────────────────────────────────── */
/* the form carried a top margin the aside did not, so the two columns
   started 48px apart. The gap belongs to the row, not to one column. */
.form-wrap{display:grid;grid-template-columns:1.65fr 1fr;gap:20px;align-items:start;margin-top:48px}
.form-wrap .form{margin-top:0}
.form{padding:36px 34px 38px}
.form h2{font-size:clamp(1.5rem,2.6vw,2rem)}
.field{margin-bottom:20px}
.field label{display:block;font-size:14.5px;color:var(--muted);margin-bottom:9px;font-weight:500}
.field label span{color:var(--dim);font-weight:400}
.field input,.field textarea,.field select{
  width:100%;padding:13px 15px;
  background:rgba(255,255,255,.05);
  border:1px solid var(--edge);border-radius:12px;
  color:var(--paper);font-family:var(--body);font-size:15.5px;line-height:1.5;
  transition:border-color .22s ease,background .22s ease;
}
.field textarea{resize:vertical;min-height:120px}
.field select{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238c8aa8' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;padding-right:38px}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none;border-color:var(--cyan);background:rgba(255,255,255,.07)}
.field input::placeholder,.field textarea::placeholder{color:#6f6d89}
.field.bad input,.field.bad textarea{border-color:#ff4d3d}
.field .err{display:block;color:#ff8a7e;font-size:13px;margin-top:8px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}

.consent{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;margin:4px 0 28px}
.consent input{width:19px;height:19px;margin-top:2px;accent-color:var(--violet);cursor:pointer;flex:none}
.consent label{font-size:14px;color:var(--dim);line-height:1.5;margin:0;font-weight:400}
.consent a{color:var(--muted)}

.form-act{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.form-note{color:var(--dim);font-size:13.5px}
.form-sent{
  margin-top:20px;padding:16px 18px;border-radius:12px;
  border:1px solid rgba(79,209,197,.4);background:rgba(43,200,218,.1);
  color:var(--paper);font-size:14.5px;
}

.side{display:grid;gap:16px}
.side-box{padding:24px 22px 26px}
.side-box h3{font-size:1.04rem;font-weight:500;margin-bottom:14px}
.side-box p{color:var(--muted);font-size:14.5px;line-height:1.6;margin-bottom:7px}
.side-box a{color:var(--muted);text-decoration:none;border-bottom:1px solid var(--edge);transition:color .22s ease,border-color .22s ease}
.side-box a:hover{color:var(--paper);border-color:var(--edge-2)}
.side-box ol{margin:0;padding-left:19px;color:var(--muted);font-size:14.5px;line-height:1.6}
.side-box ol li{margin-bottom:8px}
.side-box ol li::marker{color:var(--dim)}
.dimmed{color:var(--dim) !important;font-size:13.5px !important}

/* ── legal pages ─────────────────────────────────────────────── */
.legal-date{color:var(--dim);font-size:14px;margin-top:22px}
.bay.legal{padding-top:64px}
.legal-note{
  display:block;max-width:62ch;margin:0 0 42px;padding:16px 20px;
  border:1px solid rgba(192,57,159,.32);background:rgba(192,57,159,.08);
  border-radius:14px;color:var(--muted);font-size:14px;line-height:1.55;
}
.legal-note b{color:var(--paper);font-weight:600}
.legal-body{max-width:var(--m-read)}
.legal-body h2{font-size:clamp(1.35rem,2.2vw,1.75rem);margin:46px 0 16px}
.legal-body h2:first-child{margin-top:0}
.legal-body h3{font-size:1.04rem;font-weight:600;font-family:var(--body);margin:26px 0 10px;color:var(--paper)}
.legal-body p{color:var(--muted);font-size:15.5px;line-height:1.72;margin-bottom:15px}
.legal-body ul{margin:0 0 18px;padding-left:20px;color:var(--muted);font-size:15.5px;line-height:1.72}
.legal-body li{margin-bottom:10px}
.legal-body li::marker{color:var(--dim)}
.legal-body b{color:var(--paper);font-weight:600}
.legal-body em{color:var(--paper);font-style:italic}
.legal-body a{color:var(--teal);text-decoration:none;border-bottom:1px solid rgba(79,209,197,.35)}
.legal-body a:hover{border-color:var(--teal)}
.bay.legal > h2::after{content:none}

.table-wrap{overflow-x:auto;margin:0 0 20px;border:1px solid var(--edge);border-radius:14px}
.table-wrap table{width:100%;border-collapse:collapse;font-size:14.5px;min-width:520px}
.table-wrap th,.table-wrap td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--edge)}
.table-wrap th{color:var(--paper);font-weight:600;background:rgba(255,255,255,.04)}
.table-wrap td{color:var(--muted)}
.table-wrap tr:last-child td{border-bottom:0}

/* ── a button that reads as a link ───────────────────────────── */
.as-link{
  background:none;border:0;padding:0;cursor:pointer;
  color:inherit;font:inherit;text-align:left;
  border-bottom:1px solid var(--edge);transition:color .22s ease,border-color .22s ease;
}
.as-link:hover{color:var(--paper);border-color:var(--edge-2)}
.legal-body .as-link{color:var(--teal);border-bottom-color:rgba(79,209,197,.35)}

/* ── footer ──────────────────────────────────────────────────── */
footer{display:block;margin:56px 0 0 var(--gutter);padding:40px 0 48px;border-top:1px solid var(--edge)}
.foot-row{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.foot-col{display:flex;flex-direction:column;gap:11px}
.foot-col b{font-family:var(--display);font-weight:500;font-size:14px;color:var(--paper);letter-spacing:-.01em;margin-bottom:3px}
.foot-col a,.foot-col span{color:var(--dim);font-size:14px;text-decoration:none;line-height:1.5}
.foot-col a{transition:color .22s ease}
.foot-col a:hover{color:var(--paper)}
.foot-col .as-link{border-bottom:0;color:var(--dim);font-size:14px}
.foot-end{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  margin-top:40px;padding-top:24px;border-top:1px solid var(--edge);
  color:var(--dim);font-size:13.5px}

/* ── cookie banner ───────────────────────────────────────────── */
.cookie-banner{
  position:fixed;left:16px;right:16px;bottom:16px;z-index:200;
  display:flex;justify-content:center;pointer-events:none;
}
.cookie-banner[hidden]{display:none}
.cookie-in{
  pointer-events:auto;width:100%;max-width:720px;
  display:flex;align-items:center;gap:22px;flex-wrap:wrap;
  padding:18px 22px;
  background:#0c0c1e;border:1px solid var(--edge);border-radius:18px;
  box-shadow:0 30px 70px -28px rgba(0,0,0,.95);
}
.cookie-in p{color:var(--muted);font-size:14.5px;line-height:1.5;flex:1 1 300px;margin:0}
.cookie-act{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.cookie-act .pill{padding:10px 20px;font-size:14.5px}
.cookie-act a{color:var(--dim);font-size:13.5px;text-decoration:none;border-bottom:1px solid var(--edge)}
.cookie-act a:hover{color:var(--paper)}

/* ── responsive for everything above ─────────────────────────── */
@media (max-width:1080px){
  .form-wrap{grid-template-columns:1fr}
  .side{grid-template-columns:repeat(3,1fr)}
  .facts{grid-template-columns:repeat(3,1fr)}
  .foot-row{grid-template-columns:repeat(2,1fr);gap:30px 24px}
}
@media (max-width:860px){
  .form{padding:28px 22px 30px}
  .facts{grid-template-columns:repeat(2,1fr)}
  .legal-note{margin-bottom:32px}
  .legal-body h2{margin-top:36px}
  footer{margin-top:40px;padding:32px 0 40px}
}
@media (max-width:680px){
  .field-row{grid-template-columns:1fr;gap:0}
  .side{grid-template-columns:1fr}
  .facts{grid-template-columns:1fr}
  .foot-row{grid-template-columns:1fr;gap:26px}
  .cookie-banner{left:10px;right:10px;bottom:10px}
  .cookie-in{gap:16px;padding:16px 18px}
  .cookie-act{width:100%}
  .cookie-act .pill{flex:1 1 auto;justify-content:center}
}

/* ── the cookie table stacks rather than scrolling sideways ──── */
@media (max-width:560px){
  .table-wrap{border:0;border-radius:0;overflow:visible}
  .table-wrap table{min-width:0;display:block}
    /* kept for screen readers, parked off to the left so it cannot widen the page */
  .table-wrap thead{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
  .table-wrap tbody,.table-wrap tr,.table-wrap td{display:block;width:auto}
  .table-wrap tr{
    border:1px solid var(--edge);border-radius:14px;
    padding:6px 4px;margin-bottom:12px;background:rgba(255,255,255,.03);
  }
  .table-wrap td{border-bottom:0;padding:9px 14px}
  .table-wrap td::before{
    content:attr(data-label);display:block;
    color:var(--dim);font-size:12.5px;margin-bottom:3px;
  }
}

/* ── the detail behind a capability group ────────────────────── */
.detail{margin-top:20px;border-top:1px solid var(--edge);padding-top:16px}
.detail summary{
  display:flex;align-items:center;gap:8px;
  list-style:none;cursor:pointer;
  color:var(--muted);font-size:14px;font-weight:600;
  padding:4px 0;transition:color .22s ease;
}
.detail summary::-webkit-details-marker{display:none}
.detail summary:hover{color:var(--paper)}
.detail summary svg{transition:transform .28s ease;flex:none}
.detail[open] summary{color:var(--paper)}
.detail[open] summary svg{transform:rotate(180deg)}
.detail-list{margin:16px 0 4px;padding:0;list-style:none;display:grid;gap:13px}
.detail-list li{
  position:relative;padding-left:16px;
  color:var(--dim);font-size:14px;line-height:1.55;
}
.detail-list li::before{
  content:"";position:absolute;left:0;top:8px;
  width:5px;height:5px;border-radius:50%;background:var(--edge-2);
}
.detail-list b{color:var(--paper);font-weight:600}

@media (max-width:680px){
  .detail-list li{font-size:14.5px}
}

/* ── questions and answers ───────────────────────────────────── */
/* full width, in two columns from 1000px up. One narrow column of
   questions left a lot of empty page beside it. */
.faq{margin-top:48px;display:grid;gap:12px;max-width:none}
.faq-col{display:grid;gap:12px;align-content:start}
@media (min-width:1000px){
  .faq{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}
}
.q{padding:0}
.q summary{
  display:flex;align-items:flex-start;justify-content:space-between;gap:20px;
  list-style:none;cursor:pointer;padding:22px 24px;
  color:var(--paper);font-family:var(--display);font-weight:500;
  font-size:1.08rem;letter-spacing:-.012em;line-height:1.4;
  transition:color .22s ease;
}
.q summary::-webkit-details-marker{display:none}
.q summary svg{flex:none;margin-top:7px;color:var(--dim);transition:transform .28s ease,color .22s ease}
.q summary:hover svg{color:var(--paper)}
.q[open] summary svg{transform:rotate(180deg);color:var(--paper)}
.q > p{
  color:var(--muted);font-size:15.5px;line-height:1.68;
  padding:0 24px 24px;margin:0;max-width:60ch;
}
.q[open]{background:var(--glass-2)}

@media (max-width:680px){
  .faq{margin-top:34px;gap:10px}
  .q summary{padding:18px 18px;font-size:1.02rem;gap:14px}
  .q > p{padding:0 18px 20px;font-size:15px}
}


/* ── tap targets on touch screens ────────────────────────────── */
/* WCAG 2.5.8 exempts a link inside a sentence, so inline links are left
   as they are. These two are standalone controls, so they are not. */
@media (pointer:coarse){
  .consent input{width:24px;height:24px;margin-top:0}
  .proof-more a{display:inline-flex;align-items:center;min-height:28px}
  .cookie-act a{
    display:inline-flex;align-items:center;min-height:24px;
    padding:5px 2px;border-bottom:none;
    text-decoration:underline;text-underline-offset:3px;
  }
}

/* ── guarantee cards ─────────────────────────────────────────── */
.gtees{margin-top:52px;display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.gtee{padding:30px 28px 28px}
.gtee-num{
  color:var(--cyan);font-size:12.5px;font-weight:600;
  font-family:var(--display);letter-spacing:.06em;text-transform:uppercase;
}
.gtee h3{font-size:1.22rem;font-weight:500;margin-top:12px;letter-spacing:-.01em}
.gtee-promise{
  color:var(--paper);font-size:15.5px;line-height:1.62;margin-top:14px;
  padding-left:14px;border-left:2px solid var(--violet);
}
.gtee-terms{margin:24px 0 0;display:grid;gap:0;border-top:1px solid var(--edge)}
.gtee-terms > div{
  display:grid;grid-template-columns:132px 1fr;gap:16px;
  padding:13px 0;border-bottom:1px solid var(--edge);
}
.gtee-terms dt{
  color:var(--dim);font-size:12.5px;font-family:var(--display);
  font-weight:500;letter-spacing:.02em;margin:0;
}
.gtee-terms dd{color:var(--muted);font-size:14px;line-height:1.55;margin:0}
.gtee-terms > div:last-child{border-bottom:none;padding-bottom:0}

/* ── the comparison table ────────────────────────────────────── */
/* a four-column comparison needs more room than a column of prose */
.compare{max-width:1000px;margin-top:34px}
.compare table{min-width:720px}
.compare th{white-space:nowrap}
.compare td:first-child{width:22%}
.compare tbody tr:last-child td{
  background:rgba(106,65,239,.1);
  border-bottom-color:rgba(106,65,239,.35);
}
.compare tbody tr:last-child td:first-child strong{color:var(--paper)}

/* ── good fit, not a fit ─────────────────────────────────────── */
.fit{margin-top:52px;display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.fit > div{padding:28px 26px}
.fit h3{font-size:1.06rem;font-weight:500}
.fit ul{margin:18px 0 0;padding:0;list-style:none;display:grid;gap:12px}
.fit li{
  position:relative;padding-left:26px;
  color:var(--muted);font-size:14.5px;line-height:1.55;
}
.fit li::before{
  position:absolute;left:0;top:-1px;font-size:14px;font-weight:700;
}
.fit-yes li::before{content:"+";color:var(--cyan)}
.fit-no li::before{content:"\00d7";color:var(--magenta)}

/* ── the three starting figures ──────────────────────────────── */
.anchors{margin-top:52px;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.anchor{padding:28px 26px}
.anchor > span{
  display:block;color:var(--dim);font-size:13px;font-weight:600;
  font-family:var(--display);letter-spacing:.03em;
}
.anchor > b{
  display:block;margin-top:12px;color:var(--paper);
  font-family:var(--display);font-weight:500;letter-spacing:-.02em;
  font-size:clamp(1.5rem,2.4vw,1.9rem);
}
.anchor > p{color:var(--dim);font-size:14px;line-height:1.55;margin-top:12px}

/* ── what is included ────────────────────────────────────────── */
.incls{margin-top:52px;display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.incl{padding:30px 28px 28px}
.incl h3{font-size:1.1rem;font-weight:500}
.incl > p{color:var(--dim);font-size:14.5px;line-height:1.5;margin-top:10px}
.incl-list{margin:22px 0 0;padding:0;list-style:none;display:grid;gap:11px}
.incl-list li{
  position:relative;padding-left:26px;
  color:var(--muted);font-size:14.5px;line-height:1.55;
}
.incl-list li::before{
  content:"";position:absolute;left:2px;top:7px;
  width:9px;height:5px;border-left:1.8px solid var(--cyan);
  border-bottom:1.8px solid var(--cyan);transform:rotate(-45deg);
}

/* a wide table should scroll rather than push the page sideways */
.scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:30px}

@media (max-width:1000px){
  .anchors{grid-template-columns:1fr}
}
@media (max-width:680px){
  .gtees,.fit,.incls{grid-template-columns:1fr;margin-top:34px}
  .gtee,.incl{padding:24px 22px}
  .gtee-terms > div{grid-template-columns:1fr;gap:5px;padding:12px 0}
  .anchors{margin-top:34px}
  .anchor{padding:24px 22px}
}

/* ── the picture beside the heading ──────────────────────────── */
/* Every hero has two columns from 1040px up: the words on the left, a
   picture on the right. Below that the picture sits under the words. */
.hero-shot{
  margin:38px 0 0;position:relative;overflow:hidden;
  border:1px solid var(--edge);border-radius:var(--r);
  background:var(--glass);
  box-shadow:0 30px 70px -34px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.08);
}
.hero-shot img{
  display:block;width:100%;height:auto;
  aspect-ratio:16/10;object-fit:cover;
}
.hero-shot::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,10,28,0) 58%,rgba(10,10,28,.55) 100%);
}

@media (min-width:1040px){
  .hero,.svc-hero{
    display:grid;
    /* the text column is kept wide enough that the lede still hits its
       46ch cap, so the hero does not introduce a new paragraph width */
    grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
    column-gap:54px;align-items:center;
  }
  .hero-text{grid-column:1;min-width:0}
  .hero-shot{grid-column:2;margin:0;align-self:center}
  .hero-shot img{aspect-ratio:5/4}
  .hero-strip{grid-column:1 / -1}
  /* the column now sets the measure, so the character caps come off. The
     homepage headline is sized down to suit half the width rather than
     the whole of it, or it runs to five lines. */
  .hero-text h1{max-width:none}
  .hero .hero-text h1{font-size:clamp(2.2rem,3.5vw,3.45rem)}
  /* half the width means the same heading needs a smaller size to
     stay inside three lines, case-study titles above all */
  .svc-hero .hero-text h1{font-size:clamp(2rem,3.4vw,3rem)}
}

/* the inquiry confirmation, and its way through if no mail app opens */
.form-sent{
  margin-top:14px;color:var(--muted);font-size:14px;line-height:1.55;
  max-width:48ch;
}
.form-mail{
  color:var(--paper);text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.3);
}
.form-mail:hover{border-bottom-color:var(--cyan)}

/* ── links inside body copy ──────────────────────────────────── */
.say a,.gap-close a,.journey-close a,.logo-note a,.flow-note a{
  color:var(--paper);text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.26);
  transition:border-color .22s ease;
}
.say a:hover,.gap-close a:hover,.journey-close a:hover,
.logo-note a:hover,.flow-note a:hover{border-bottom-color:var(--cyan)}

/* ── published prices ────────────────────────────────────────── */
.prices .group p{max-width:var(--m-read)}
.price-rows{
  margin:22px 0 0;padding:0;list-style:none;
  border-top:1px solid var(--edge);
}
.price-rows li{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:20px;padding:15px 0;border-bottom:1px solid var(--edge);
}
.price-item{
  display:block;max-width:44ch;
  color:var(--dim);font-size:13.5px;line-height:1.5;
}
.price-item b{
  display:block;color:var(--paper);font-weight:600;
  font-size:15px;line-height:1.35;margin-bottom:3px;
}
.price-tag{
  flex:none;white-space:nowrap;
  font-family:var(--display);font-weight:500;font-size:15px;
  color:var(--paper);padding-top:1px;
}
.price-note{
  color:var(--dim);font-size:13.5px;line-height:1.55;
  margin-top:18px;max-width:var(--m-read);
}

/* ── blog ────────────────────────────────────────────────────── */
.posts{margin-top:52px;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.post{
  display:block;padding:28px 26px 26px;
  transition:transform .3s ease,border-color .3s ease,background .3s ease;
}
.post:hover{transform:translateY(-5px);border-color:var(--edge-2);background:var(--glass-2)}
.post h3{font-size:1.1rem;font-weight:500;line-height:1.3;margin-top:14px}
.post p{color:var(--dim);font-size:14.5px;line-height:1.55;margin-top:11px}
.post-meta{
  display:block;margin-top:18px;color:var(--dim);
  font-size:12.5px;font-family:var(--display);letter-spacing:.02em;
}
.post-byline{
  margin-top:26px;color:var(--dim);font-size:13.5px;
  font-family:var(--display);letter-spacing:.015em;
}
.article{max-width:var(--m-read)}
.article-note{
  margin-top:26px;padding:18px 20px;
  border-left:2px solid var(--violet);
  background:var(--glass);border-radius:0 10px 10px 0;
  color:var(--paper);font-size:15px;line-height:1.62;
}
.article-next{margin-top:44px}

@media (max-width:1000px){
  .posts{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:680px){
  .price-rows li{flex-direction:column;gap:6px;padding:14px 0}
  .price-tag{padding-top:0}
  .price-item{max-width:none}
  .posts{grid-template-columns:1fr;margin-top:34px}
  .post{padding:24px 22px}
  .article-note{padding:16px 18px;font-size:14.5px}
}
@media (pointer:coarse){
  .post{min-height:44px}
}


/* ──────────────────────────────────────────────────────────────────────
   PRINT
   Nothing on this site is downloadable: there is no PDF file and no
   download link anywhere. The remaining easy route to a copy is the
   browser's own "print to PDF", so an open case study is not printed:
   printing it yields the address to read it at instead.

   This is a speed bump, not a lock. Anyone determined can screenshot a
   page or read the source, and no website can prevent that. What it does
   stop is the casual "print to PDF and send it on", which is the thing
   that puts an out-of-date case study in a stranger's inbox.
   ────────────────────────────────────────────────────────────────── */
@media print{
  .docmodal,.docmodal::backdrop{display:none !important}
  .nav,.cookie-banner,.sky,.spine,.node{display:none !important}
  body::after{
    content:"Case studies are published at aniverx.com and are kept up to date there.";
    display:block;margin-top:24px;font-size:11pt;color:#444;
  }
  body{background:#fff !important;color:#111 !important}
  .wrap{max-width:none;padding:0}
}