/* Geist and Geist Mono, self-hosted variable fonts (SIL OFL). One file per
   subset covers every weight, and there is no third-party origin to look up,
   connect to and fetch a stylesheet from before any text can paint. */
@font-face{font-family:'Geist';font-style:normal;font-weight:400 600;font-display:swap;src:url('/assets/fonts/geist-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Geist';font-style:normal;font-weight:400 600;font-display:swap;src:url('/assets/fonts/geist-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:400 600;font-display:swap;src:url('/assets/fonts/geist-mono-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:400 600;font-display:swap;src:url('/assets/fonts/geist-mono-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}

/* ==========================================================================
   Amariq homepage concept — the "framed page" layout system
   Structure follows notes/04-layout-system.md. Colours and type are the first
   visual pass and are meant to be argued with; the structure is the proposal.
   ========================================================================== */

:root{
  /* ----------------------------------------------------------------------
     BRAND LAYER — the only block you need to touch to re-skin the site.
     Values verified against the live amariq.com on 12 Sep 2026: the site
     already renders Geist everywhere, and its brand colour is the violet
     #6234F2 (the Free Audit button and the accent text).
     ---------------------------------------------------------------------- */
  /* Palette v3 (16 Sep 2026), Rahat's call: restraint. The UI is solid black and white
     with neutral greys; violet is kept for the two planets, the logo and the thin
     reading-progress line. Primary buttons are solid ink, not the gradient.
     Palette v2 before it, 60-30-10: 60% is the ground (violet-tinted
     ink on dark sections, lavender off-white on light ones); 30% is surfaces, lines and
     body text in the same undertone; 10% is the violet accent: primary buttons,
     eyebrows, key lines and a few hero-level glows. Contrast checked: text 18:1,
     muted 9.5:1 dark and 6.5:1 light, accent 8.8:1 dark and 6.4:1 light.
     Earlier: brand read out of the Figma file "Amariq agency design" on 12 Sep 2026.
     The brand is a GRADIENT, not a flat colour — every primary button, the logo
     badge and its stroke use the same 180deg violet ramp. */
  --brand:          #6E47F2;   /* first stop of the ramp. White on it = 6.77:1 */
  --brand-gradient: linear-gradient(180deg, #5B3BD6 0%, #7C52FF 55%, #A47CFF 85%, #CDB2FF 100%);
  /* film grain for the gradients: a tiled SVG noise, blended soft-light on top */
  --grain:          url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeColorMatrix type='matrix' values='1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 0.5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(#g)'/%3E%3C/svg%3E");
  /* sparse stars, positioned in percent so they spread over any box */
  --stars:
    radial-gradient(1.3px 1.3px at 8% 18%, rgba(255,255,255,.75), transparent),
    radial-gradient(1px 1px at 17% 64%, rgba(255,255,255,.55), transparent),
    radial-gradient(1.2px 1.2px at 26% 32%, rgba(255,255,255,.6), transparent),
    radial-gradient(1px 1px at 38% 12%, rgba(255,255,255,.5), transparent),
    radial-gradient(1.4px 1.4px at 61% 22%, rgba(255,255,255,.7), transparent),
    radial-gradient(1px 1px at 72% 58%, rgba(255,255,255,.55), transparent),
    radial-gradient(1.2px 1.2px at 83% 14%, rgba(255,255,255,.65), transparent),
    radial-gradient(1px 1px at 91% 41%, rgba(255,255,255,.5), transparent),
    radial-gradient(1.3px 1.3px at 95% 72%, rgba(255,255,255,.6), transparent),
    radial-gradient(1px 1px at 4% 83%, rgba(255,255,255,.45), transparent);
  --stars-bright:
    radial-gradient(1.8px 1.8px at 13% 40%, rgba(255,255,255,.95), transparent),
    radial-gradient(1.6px 1.6px at 78% 30%, rgba(255,255,255,.9), transparent),
    radial-gradient(1.8px 1.8px at 88% 66%, rgba(255,255,255,.9), transparent);
  --grain-soft:     url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeColorMatrix type='matrix' values='1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 0.32 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(#g)'/%3E%3C/svg%3E");
  --brand-stroke:   #5B3BD6;   /* Figma style "Button/stroke" — 1px on every button */
  --brand-ink:      #FFFFFF;   /* small text on dark. 6.36:1 on black, 5.44:1 on --raised.
                                  The brand blue itself is 3.5:1 and fails AA for text. */
  --brand-contrast: #FFFFFF;   /* every button label in Figma is pure white */

  --font-display: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:    "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Figma uses no monospace. The mono eyebrow is a concept decision — it is the
     "// label" detail Rahat liked on meku.dev. Drop this line to remove it. */
  --font-mono:    "Geist Mono", ui-monospace, SFMono-Regular, monospace;

  /* Frame */
  --site--width: 75rem;        /* 1200px rail to rail */
  --site--gutter: 1rem;
  --section--pad: 7.5rem;      /* 120px, top only */
  --cell--pad: 2.25rem;        /* 36px */
  --radius--frame: 1.25rem;    /* notched inner corners */

  /* Ink, also from Figma. It designs on pure black, not the near-black I guessed. */
  --page:    #000000;
  --surface: #0A0A0A;
  --raised:  #141414;          /* Figma "Neutral 04" — it carries a violet undertone */
  --line:    #262626;
  --line-soft:#171717;
  --text:    #FFFFFF;
  --muted:   #A3A3A3;          /* Figma's muted is white at 75%, not a neutral grey. 11.4:1 */

  --accent:  var(--muted);

  --ease: cubic-bezier(.2,.6,.2,1);
}
@media (max-width: 991px){ :root{ --section--pad: 6rem; } }
@media (max-width: 767px){ :root{ --section--pad: 4.5rem; --cell--pad: 1.5rem; --radius--frame: 0rem; } }

/* Reset ------------------------------------------------------------------ */
*,*::before,*::after{ box-sizing:border-box }
*{ margin:0 }
html{ -webkit-text-size-adjust:100% }
/* Smooth scrolling only when the GSAP motion layer is off. ScrollTrigger reads this
   once when it starts and, if it sees smooth, writes it back inline after every
   refresh, and its measurements taken mid-page then land above the top of the page.
   The <head> adds .js-motion before first paint; motion.js smooth-scrolls links. */
html:not(.js-motion){ scroll-behavior:smooth }
body{
  min-height:100vh; background:var(--page); color:var(--text);
  font-family:var(--font-body);
  font-size:1rem; line-height:1.5; letter-spacing:-0.011em;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img,svg{ display:block; max-width:100%; height:auto }
button,input,select,textarea{ font:inherit; color:inherit }
a{ color:inherit; text-decoration:none }
/* Focus ring. The old rule also set border-radius:2px, which squared off the
   element being focused — an outline follows the element's radius, so a rounded
   field got a nearly square ring floating around it. Radius is left alone now. */
:focus-visible{ outline:2px solid var(--brand-ink); outline-offset:2px }
@media (prefers-reduced-motion: reduce){ *{ animation:none !important; transition:none !important } html{scroll-behavior:auto} }

.skip-link{ position:absolute; left:-9999px }
.skip-link:focus{ left:1rem; top:1rem; z-index:100; background:var(--text); color:var(--page); padding:.5rem .875rem; border-radius:99px }
.u-vh{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap }

/* Type ------------------------------------------------------------------- */
.h1{ font-size:clamp(2.5rem, 1.6rem + 3.6vw, 4.25rem); line-height:1.02; font-weight:500; letter-spacing:-0.038em }
.h2{ font-size:clamp(1.875rem, 1.35rem + 1.9vw, 2.625rem); line-height:1.1; font-weight:500; letter-spacing:-0.032em; text-wrap:balance }
.h3{ font-size:1.375rem; line-height:1.3; font-weight:500; letter-spacing:-0.022em }
.h4{ font-size:1.0625rem; line-height:1.4; font-weight:500; letter-spacing:-0.016em }
.t-lg{ font-size:1.0625rem; line-height:1.55 }
.t-sm{ font-size:.875rem; line-height:1.5 }
.muted{ color:var(--muted) }
.eyebrow{
  font-family:var(--font-mono);
  font-size:.8125rem; line-height:1.4; font-weight:400; letter-spacing:0;
  color:var(--accent); text-transform:none;
}
.eyebrow::before{ content:"// " }

/* Frame ------------------------------------------------------------------ */
.page_wrapper{ position:relative; overflow-x:clip }

/* THE FRAME.
   One element, the full height of the page, so the two lines are literally
   continuous rather than a stack of per-section borders that can leave seams.

   It sits ABOVE the section backgrounds (z-index 2). That matters: a section
   with its own ground — every light section — paints over anything behind it,
   which is what made the rails disappear on some sections before.

   The colour is a single translucent grey instead of a token, because one
   element cannot change colour halfway down. At 32% it resolves to about
   rgb(48,48,48) on the black sections and rgb(215,215,214) on the light ones,
   which is where the per-ground line colours sat anyway. */
.page_rails{
  position:absolute; inset-block:0; left:50%; translate:-50% 0;
  width:min(var(--site--width), calc(100% - 2 * var(--site--gutter)));
  border-inline:1px solid rgba(150,150,150,.32);
  pointer-events:none; z-index:2;
}
/* The header is sticky at z-index 50, so it still passes over the rails. */

/* ---- Light sections -------------------------------------------------------
   One attribute flips a section's ground; every component reads these tokens so
   nothing else needs to know. Contrast on #F6F5F9: text 18.3:1, muted 6.8:1,
   brand 6.3:1 — the brand blue is legible here, so light sections use it
   directly instead of the lilac tint the dark ground needs. */
[data-ground="light"]{
  --page:    #FAFAFA;
  --surface: #FFFFFF;
  --raised:  #F1F1F1;
  --line:    #E0E0E0;
  --line-soft:#EFEFEF;
  --text:    #0A0A0A;
  --muted:   #5C5C5C;
  --brand-ink: #0A0A0A;
  --accent:  var(--muted);
  background:var(--page); color:var(--text);
}

/* Scroll ground (homepage, motion.js groundScroll). The script tweens the colour
   tokens on <main>, so the whole page fades between dark and light as sections
   pass the middle of the screen. While it runs, sections marked
   data-ground-switch stop painting their own ground and follow <main>; other
   light sections (the FAQ) keep their own fixed ground. Cards that are always dark set
   their own tokens, and the header and footer sit outside <main>. */
main.ground-scroll{ color:var(--text) }
main.ground-scroll > section[data-ground-switch]{
  --page:inherit; --surface:inherit; --raised:inherit; --line:inherit; --line-soft:inherit;
  --text:inherit; --muted:inherit; --brand-ink:inherit; --accent:inherit;
  background:transparent;
}

/* Sections space with top padding only — except at a change of ground, where
   the outgoing section gets a floor so its content is not sitting on the edge. */
main > section[data-ground="light"]:not(:has(+ section[data-ground="light"])),
main > section:not([data-ground="light"]):has(+ section[data-ground="light"]){
  padding-block-end:calc(var(--section--pad) * .6);
}
.padding-global{ padding-inline:var(--site--gutter) }
.container-large{ max-width:var(--site--width); margin-inline:auto; position:relative; z-index:1 }

/* Frame gutter -----------------------------------------------------------
   The rails ARE the page frame, so nothing may sit pressed against them.
   Every block that spans the frame keeps the same inner gutter as a lined
   cell, which is why body text lines up with card text. Lined grids opt out
   (their own borders are meant to land on the rail), and .is-flush opts any
   one block out by hand. */
.container-large > *:not(.grid_lined):not(.is-flush){ padding-inline:var(--cell--pad) }
.container-large > .grid_lined > *{ padding:var(--cell--pad) }
.padding-section-large{ padding-block-start:var(--section--pad) }
.padding-section-medium{ padding-block-start:calc(var(--section--pad) * .75) }
.is-last-section{ padding-block-end:var(--section--pad) }

.section_header{ max-width:42rem; margin-inline:auto; text-align:center }
.section_header .h2{ margin-block-start:.875rem }
.section_header p{ margin-block-start:1rem }
.section_header + *{ margin-block-start:3.5rem }

/* Bands ------------------------------------------------------------------ */
.band{ border-block:1px solid var(--line) }
.band.is-full-bleed{ width:100vw; margin-inline:calc(50% - 50vw) }

/* Lined grid ------------------------------------------------------------- */
.grid_lined{ display:grid; grid-template-columns:repeat(var(--cols,3), minmax(0,1fr)) }
.grid_lined.is-2{ --cols:2 }
.grid_lined > *{
  border:1px solid var(--line);
  margin-inline-end:-1px; margin-block-end:-1px;
  padding:var(--cell--pad);
  min-width:0; background:var(--page);
}
@media (max-width:991px){ .grid_lined{ --cols:2 } }
@media (max-width:767px){ .grid_lined, .grid_lined[class*="is-"]{ --cols:1 } }

/* Notched inner corners: only the corners that face the middle of the block. */
@media (min-width:992px){
  .grid_lined.is-3 > :nth-child(1){ border-end-end-radius:var(--radius--frame) }
  .grid_lined.is-3 > :nth-child(2){ border-end-start-radius:var(--radius--frame); border-end-end-radius:var(--radius--frame) }
  .grid_lined.is-3 > :nth-child(3){ border-end-start-radius:var(--radius--frame) }
  .grid_lined.is-3 > :nth-child(4){ border-start-end-radius:var(--radius--frame) }
  .grid_lined.is-3 > :nth-child(5){ border-start-start-radius:var(--radius--frame); border-start-end-radius:var(--radius--frame) }
  .grid_lined.is-3 > :nth-child(6){ border-start-start-radius:var(--radius--frame) }
}

/* Buttons ---------------------------------------------------------------- */
.button{
  display:inline-flex; align-items:center; gap:.5rem; justify-content:center;
  height:2.5rem; padding-inline:1.125rem; border-radius:99px;
  font-size:.875rem; font-weight:500; letter-spacing:-0.01em;
  background-color:var(--text); color:var(--page); border:1px solid var(--text);
  transition:background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease),
             box-shadow .2s var(--ease), translate .2s var(--ease), filter .2s var(--ease);
  cursor:pointer; white-space:nowrap;
}
/* Hover system, one rule per variant, all ground-aware:
   primary   (solid, white on dark / black on light)  dims a step
   secondary (outlined)                               inverts to solid
   brand     (gradient)                               lifts with a glow
   ghost     (text only)                              gains a faint fill */
.button:hover{ background-color:color-mix(in srgb, var(--text) 86%, var(--page)); border-color:color-mix(in srgb, var(--text) 86%, var(--page)) }
.button:active{ background-color:color-mix(in srgb, var(--text) 76%, var(--page)); border-color:color-mix(in srgb, var(--text) 76%, var(--page)) }
.button.is-brand{
  background-image:var(--grain-soft), var(--brand-gradient); background-color:var(--brand);
  background-blend-mode:soft-light, normal; background-size:180px 180px, auto;
  color:var(--brand-contrast); border-color:var(--brand-stroke);
}
.button.is-brand:hover{
  filter:brightness(1.08); translate:0 -1px; border-color:var(--brand-stroke);
  box-shadow:0 10px 28px -10px color-mix(in srgb, var(--brand) 70%, transparent), 0 0 0 1px color-mix(in srgb, var(--brand-ink) 40%, transparent);
}
.button.is-brand:active{ translate:0 0; filter:brightness(1.02); box-shadow:0 4px 14px -8px color-mix(in srgb, var(--brand) 60%, transparent) }
.button.is-secondary{ background-color:transparent; color:var(--text); border-color:var(--line) }
.button.is-secondary:hover{ background-color:var(--text); color:var(--page); border-color:var(--text) }
.button.is-secondary:active{ background-color:color-mix(in srgb, var(--text) 86%, var(--page)); border-color:color-mix(in srgb, var(--text) 86%, var(--page)) }
.button.is-ghost{ background-color:transparent; border-color:transparent; color:var(--muted) }
.button.is-ghost:hover{ color:var(--text); background-color:color-mix(in srgb, var(--text) 6%, transparent); border-color:transparent }
/* The arrow glyph has almost no side-bearing, so a button ending in one looked
   tighter on the right than the label did on the left. */
.button:has(.arrow){ padding-inline-end:1.375rem }
/* Character stagger on hover (textfx.js splits the label). Each character carries
   a copy of itself 1.3em below as a text-shadow; hover slides the stack up inside
   the clipped label, 10ms later per character, so the word rolls over. */
.button_label{ display:inline-flex; overflow:hidden; line-height:1.3; white-space:nowrap }
.button_label > span{
  display:inline-block; text-shadow:0 1.3em currentColor;
  transform:translateY(0) rotate(.001deg);
  transition:transform .6s cubic-bezier(.625,.05,0,1);
}
.button:hover .button_label > span, .button:focus-visible .button_label > span{ transform:translateY(-1.3em) rotate(.001deg) }
.button .arrow{ transition:translate .2s var(--ease) }
.button:hover .arrow{ translate:2px 0 }

.tag{
  display:inline-flex; align-items:center; min-height:1.75rem; padding:.25rem .625rem; line-height:1.3;
  border:1px solid var(--line); border-radius:99px; font-size:.75rem; color:var(--muted);
  font-family:var(--font-mono); letter-spacing:0;
}

/* ============================ HEADER ===================================== */
.header{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--page) 82%, transparent);
  backdrop-filter:saturate(1.4) blur(12px);
  border-block-end:1px solid var(--line);
}
.header_inner{ display:flex; align-items:center; justify-content:space-between; gap:1rem; height:4.25rem }
.header_logo img{ height:1.875rem; width:auto }
.nav{ display:flex; align-items:center; gap:.25rem }
.nav a, .nav button{
  display:inline-flex; align-items:center; gap:.375rem; height:2.25rem; padding-inline:.75rem;
  border:0; background:none; border-radius:99px; font-size:.875rem; color:var(--muted); cursor:pointer;
  transition:color .18s var(--ease);
}
.nav a:hover, .nav button:hover, .nav a[aria-current="page"], .dropdown[data-open="true"] > button{ color:var(--text) }
/* textfx.js wraps each label and adds a hairline under it; GSAP draws the line
   left to right on hover and retracts it to the right on leave. The current page
   keeps its line. Without JS: plain links. */
.nav_label{ position:relative; display:inline-block; line-height:1 }
/* inline-flex, not inline-block: a clipped inline-block's baseline drops to its
   bottom edge, which pushed the arrows next to these labels down by a few px. */
.nav_text{ display:inline-flex; white-space:nowrap; overflow:hidden; line-height:1.3 }
.nav_text > span{
  display:inline-block; text-shadow:0 1.3em currentColor;
  transform:translateY(0) rotate(.001deg);
  transition:transform .6s cubic-bezier(.625,.05,0,1);
}
.nav a:hover .nav_text > span, .nav a:focus-visible .nav_text > span,
.nav button:hover .nav_text > span, .dropdown[data-open="true"] > button .nav_text > span,
.footer a:not(.button):hover .nav_text > span, .footer a:not(.button):focus-visible .nav_text > span{ transform:translateY(-1.3em) rotate(.001deg) }
.nav_line{
  position:absolute; inset-inline:0; inset-block-end:-.1875rem; height:1px;
  background:var(--brand-ink); transform:scaleX(0); transform-origin:0 50%; pointer-events:none;
}
.nav a[aria-current="page"] .nav_line{ transform:scaleX(1) }
.header_cta{ display:flex; align-items:center; gap:.5rem }

.dropdown{ position:relative }
.dropdown_panel{
  position:absolute; top:calc(100% + .5rem); left:0; min-width:22rem;
  background:var(--surface); border:1px solid var(--line); border-radius:1rem;
  padding:.5rem; display:none; box-shadow:0 24px 48px -12px rgba(0,0,0,.6);
}
.dropdown[data-open="true"] .dropdown_panel{ display:block }
.dropdown_panel a{ display:block; height:auto; padding:.625rem .75rem; border-radius:.625rem; color:var(--text) }
.dropdown_panel:not(.is-mega) a span{ display:block; color:var(--muted); font-size:.8125rem; margin-block-start:.125rem }
.dropdown_panel a:hover{ background:var(--raised) }

.burger{ display:none }
@media (max-width:991px){
  .nav, .header_cta .button.is-secondary{ display:none }
  .burger{ display:inline-flex; align-items:center; justify-content:center; width:2.5rem; height:2.5rem; border:1px solid var(--line); border-radius:99px; background:none; cursor:pointer }
}

/* ============================ HERO ======================================= */
/* The hero is the one section allowed bottom padding: the logo band butts
   straight up against it, and the proof line needs room to breathe. */
.hero{ padding-block-start:6.5rem; padding-block-end:4.5rem; text-align:center }
.hero_inner{ max-width:56rem; margin-inline:auto }
.hero .h1{ margin-block-start:1.25rem; max-width:24ch; margin-inline:auto; text-wrap:balance }
.hero_sub{ margin-block-start:1.5rem; max-width:34rem; margin-inline:auto; text-wrap:pretty }
.hero_actions{ display:flex; gap:.75rem; justify-content:center; margin-block-start:2.25rem; flex-wrap:wrap }
.hero_proof{ margin-block-start:3.25rem; display:flex; align-items:center; justify-content:center; gap:.875rem; flex-wrap:wrap }
.avatars{ display:flex }
.avatars img{ width:2rem; height:2rem; border-radius:99px; object-fit:cover; border:2px solid var(--page); margin-inline-start:-.5rem }
.avatars img:first-child{ margin-inline-start:0 }
/* The hero glow. The canvas paints the animated version; the CSS gradient
   underneath is what everyone else sees (no WebGL, reduced motion, or while the
   script is still loading), so the hero never looks broken or empty. */
.hero{ position:relative; isolation:isolate; overflow:hidden }  /* keeps the glow inside the hero */
/* The hero sky: a lit planet rising behind the bottom of the hero and a sparse
   starfield kept clear of the headline. Pure CSS, so it cannot fail silently the
   way the WebGL canvas did. motion.js raises it on load and lifts it on scroll. */
.hero{ padding-block-end:12rem }
.hero_sky{ position:absolute; inset:0; z-index:-1; pointer-events:none; overflow:hidden }
.hero_planet{
  position:absolute; inset-inline-start:50%; inset-block-start:calc(100% - 11rem); translate:-50% 0;
  width:137.5rem; aspect-ratio:1; border-radius:50%;
  background:
    radial-gradient(closest-side, transparent 99.15%, #F3E8FF 99.72%, transparent 100%),
    radial-gradient(closest-side, transparent 90%, color-mix(in srgb, #8B63FF 42%, transparent) 97.4%, color-mix(in srgb, #CDB2FF 82%, transparent) 99.4%, transparent 99.75%),
    radial-gradient(34% 4% at 50% .6%, rgba(255,255,255,.2), transparent 70%),
    radial-gradient(48% 7% at 50% .8%, color-mix(in srgb, #D9C2FF 42%, transparent), transparent 72%),
    linear-gradient(180deg, #5B3BD6 0%, #3E26A8 1.4%, #26166F 3.4%, #170D45 5.6%, #0E0A26 8%, #000000 12%);
  box-shadow:
    0 0 40px 4px color-mix(in srgb, #CDB2FF 42%, transparent),
    0 0 160px 30px color-mix(in srgb, #8B63FF 32%, transparent),
    0 0 380px 120px color-mix(in srgb, #5B3BD6 30%, transparent);
  outline:1px solid color-mix(in srgb, #CDB2FF 16%, transparent); outline-offset:3.5rem;
}
.hero_stars{
  position:absolute; inset:0;
  background-image:var(--stars);
  -webkit-mask-image:radial-gradient(58% 55% at 50% 40%, transparent 35%, #000 85%);
          mask-image:radial-gradient(58% 55% at 50% 40%, transparent 35%, #000 85%);
}
.hero_stars::after{
  content:""; position:absolute; inset:0; background-image:var(--stars-bright);
  animation:cta-twinkle 6s ease-in-out infinite;
}
.js-motion:not(.motion-ready) .hero_planet{ opacity:0 }
@media (max-width:767px){
  .hero{ padding-block-end:8rem }
  .hero_planet{ inset-block-start:calc(100% - 7rem); width:62rem }
}

/* ============================ LOGOS ====================================== */
/* The strip scrolls. The track holds the logo set twice so the loop is seamless:
   at -50% the second copy sits exactly where the first started. */
.logo_marquee{
  overflow:hidden; padding-block:2rem;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 3%, #000 97%, transparent 100%);
          mask-image:linear-gradient(90deg, transparent 0, #000 3%, #000 97%, transparent 100%);
}
.logo_track{
  display:flex; align-items:center; width:max-content;
  gap:clamp(1.75rem,3.25vw,2.75rem); padding-inline-start:clamp(3rem,5vw,5rem);
  animation:logo-marquee 45s linear infinite;
}
.logo_marquee:hover .logo_track{ animation-play-state:paused }
/* These are white marks on a near-black band, so they were reading far too faint
   at 55%. Raised to 85%, full on hover. */
/* Every mark gets an IDENTICAL box and is scaled to fit inside it, so a wide
   wordmark, a square badge and a tall lockup all occupy the same space in the
   row. Without this each logo is sized by its own aspect ratio and the widest
   one dominates. */
/* Every mark fits a shared box, so no logo can be wider or taller than its
   neighbours. The box is 4.9:1 — the median aspect of the marks in the strip —
   so wide wordmarks are not squeezed harder than squarer ones. Files are
   trimmed to their artwork; padding inside a file would otherwise shrink it.
   Two heavy display faces get an optical nudge down, and the one round badge
   gets a taller box because a circle at wordmark height reads tiny. */
/* Height decides the size and each mark takes only its own width, so the flex
   gap is the real gap between marks. A fixed-width box left narrow marks with
   empty space either side, which read as an uneven, oversized gap. Only a mark
   wider than 11rem is capped, and letterboxed inside that cap. */
.logo_track img{
  height:1.75rem; width:auto; max-width:11rem; object-fit:contain; object-position:center;
  opacity:.85; transition:opacity .2s var(--ease); flex:none;
}
.logo_track img:hover{ opacity:1 }
/* Optical nudge via height rather than transform, so the layout box shrinks with it. */
.logo_track img.is-heavy{ height:1.575rem }
.logo_track img.is-badge{ width:2.25rem; height:2.25rem }
@keyframes logo-marquee{ from{ translate:0 0 } to{ translate:-50% 0 } }

/* No motion preference: the animation stops and the logos simply wrap. */
@media (prefers-reduced-motion: reduce){
  .logo_track{ animation:none; flex-wrap:wrap; width:auto; justify-content:center; padding-inline-start:0 }
  .logo_track .is-duplicate{ display:none }
}

/* ============================ WORK ======================================= */
.tabs{ display:flex; gap:.5rem; justify-content:center; flex-wrap:wrap; margin-block:2.5rem }
.tab{
  height:2.25rem; padding-inline:.875rem; border-radius:99px; border:1px solid var(--line);
  background:transparent; color:var(--muted); font-size:.8125rem; cursor:pointer;
  transition:color .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease);
}
.tab:hover{ color:var(--text) }
.tab[aria-pressed="true"]{ background:var(--text); color:var(--page); border-color:var(--text) }

.work_grid{ --cols:3 }
.work_card{ display:flex; flex-direction:column; gap:1.25rem; padding:var(--cell--pad) }
/* Any display value beats the browser's [hidden] rule, so say it again louder.
   Without this the work filter appears to do nothing. */
.work_card[hidden], .grid_lined > [hidden]{ display:none }
.work_media{ border:1px solid var(--line); border-radius:.75rem; overflow:hidden; background:var(--surface) }
/* no hover zoom on screenshots: any scale above 1 crops the edges, and on phones a tap leaves it stuck */
.work_media img{ width:100%; aspect-ratio:16/10; object-fit:cover; object-position:top center }
/* covers and related-work images sit straight in .work_media: show them whole, at their own shape */
.work_media > img{ aspect-ratio:auto; height:auto }
.work_tags{ display:flex; gap:.375rem; flex-wrap:wrap }
.work_card .h3{ margin-block-start:.25rem }
.work_card p{ margin-block-start:.5rem }
.work_stats{ display:flex; gap:1.5rem; margin-block-start:auto; padding-block-start:1.25rem; border-block-start:1px solid var(--line-soft) }
.work_stat b{ display:block; font-size:1.375rem; font-weight:500; letter-spacing:-0.03em }
.work_stat span{ display:block; font-size:.8125rem; color:var(--muted); margin-block-start:.125rem }
@media (max-width:991px){ .work_grid{ --cols:2 } }
@media (max-width:767px){ .work_grid{ --cols:1 } }

/* ============================ SERVICES =================================== */
.service_cell{ display:flex; flex-direction:column; min-height:16rem }
.service_icon{
  width:2.25rem; height:2.25rem; border:1px solid var(--line); border-radius:.625rem;
  display:grid; place-items:center; color:var(--accent); margin-block-end:1.5rem;
}
.service_cell .h3{ letter-spacing:-0.02em }
.service_cell p{ margin-block-start:.625rem }
.service_tags{ display:flex; gap:.375rem; flex-wrap:wrap; margin-block-start:auto; padding-block-start:1.5rem }

/* ============================ PROCESS ==================================== */
.process{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:2rem; padding-inline:var(--cell--pad) }
.step_num{
  position:relative; width:2.25rem; height:2.25rem; border:1px solid var(--line); border-radius:99px;
  display:grid; place-items:center; font-family:var(--font-mono); font-size:.8125rem; color:var(--text);
  background:var(--surface);
}
.step_num::after{ content:""; position:absolute; top:130%; left:50%; height:3.25rem; border-left:1px solid var(--line) }
.step h3{ margin-block-start:5rem }
.step p{ margin-block-start:.5rem }
@media (max-width:991px){ .process{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:2.5rem } }
@media (max-width:600px){ .process{ grid-template-columns:1fr } .step_num::after{ display:none } .step h3{ margin-block-start:1.25rem } }

/* ============================ TESTIMONIALS =============================== */
/* These used to be a CSS-columns masonry. With nine cards of uneven length it
   left a hole at the bottom of the short column and the borders never lined up,
   so they now use the same lined grid as every other block on the site. */
.quote_grid .quote{ display:flex; flex-direction:column; margin:0 -1px -1px 0 }
.quote p{ text-wrap:pretty }
/* the attribution sits on the floor of the cell, so a row of them lines up */
.quote_person{ display:flex; align-items:center; gap:.75rem; margin-block-start:auto; padding-block-start:1.5rem }
.quote_person img{ width:2.5rem; height:2.5rem; border-radius:99px; object-fit:cover; flex:none }
.quote_person b{ display:block; font-weight:500; font-size:.9375rem }
/* Only the text spans inside the name block. Written as a child selector because
   the avatar initial is also a span in .quote_person, and a looser rule turned its
   display:grid into display:block — which threw the letter outside its circle. */
.quote_person > span > span{ display:block; font-size:.8125rem; color:var(--muted) }

/* ============================ STATS ====================================== */
.stats{ display:grid; grid-template-columns:repeat(3,1fr); text-align:center }
.stats > div{ padding-block:2.25rem; padding-inline:1rem }
.stats > div + div{ border-inline-start:1px solid var(--line) }
.stats b{ display:block; font-size:clamp(1.75rem,1.2rem + 1.6vw,2.25rem); font-weight:500; letter-spacing:-0.03em }
.stats span{ display:block; color:var(--muted); font-size:.875rem; margin-block-start:.375rem; max-width:24ch; margin-inline:auto; text-wrap:balance }
@media (max-width:600px){ .stats{ grid-template-columns:1fr } .stats > div + div{ border-inline-start:0; border-block-start:1px solid var(--line) } }

/* ============================ FAQ ======================================== */
/* Split layout: the header and a help card on the left, sticky on desktop; the
   numbered accordion on the right. build-faq.py writes the markup. */
.faq_layout{
  display:grid; grid-template-columns:minmax(0,27rem) minmax(0,1fr);
  gap:3rem clamp(3rem,6vw,6rem); align-items:start;
}
.faq_intro{ position:sticky; inset-block-start:calc(4.25rem + 2.5rem) }
.section_header.is-left{ text-align:left; margin-inline:0; max-width:none }
.faq_intro .section_header p.muted{ max-width:30ch; text-wrap:pretty }
.faq_intro .section_header + /* The help card is a small dark panel on the light section: the same ink, glow
   and grain as the contact founder panel, so the two read as one family. Dark
   tokens are set on the card itself, so everything inside follows them. */
.faq_help{
  --page:#000; --surface:#0A0A0A; --text:#FFFFFF; --muted:#A3A3A3; --brand-ink:#FFFFFF;
  --line:rgba(255,255,255,.1); --line-soft:rgba(255,255,255,.08);
  position:relative; isolation:isolate; overflow:hidden;
  padding:1.75rem; border-radius:1.25rem; background:#0A0A0A; color:var(--text);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 32px 64px -32px rgba(10,10,11,.6), 0 12px 24px -16px rgba(10,10,11,.3);
}
.faq_help::before, .faq_help::after{
  content:""; position:absolute; z-index:-1; pointer-events:none;
  inset-block-start:-11rem; inset-inline-end:-9rem; width:24rem; aspect-ratio:1; border-radius:50%;
}
.faq_help::before{
  background:var(--grain), radial-gradient(closest-side, color-mix(in srgb, var(--brand) 34%, transparent), transparent 72%);
  background-blend-mode:soft-light, normal; background-size:180px 180px, auto;
  -webkit-mask-image:radial-gradient(closest-side, #000, transparent 72%); mask-image:radial-gradient(closest-side, #000, transparent 72%);
}
.faq_help::after{
  background-image:radial-gradient(circle, color-mix(in srgb, var(--brand-ink) 70%, transparent) 1px, transparent 1.4px);
  background-size:14px 14px;
  -webkit-mask-image:radial-gradient(closest-side, #000, transparent 62%); mask-image:radial-gradient(closest-side, #000, transparent 62%);
  opacity:.4;
}
.faq_help_person{ display:flex; align-items:center; gap:.875rem }
.faq_help_person img{
  width:3rem; height:3rem; border-radius:99px; object-fit:cover; flex:none;
  outline:1px solid color-mix(in srgb, var(--brand-ink) 55%, transparent); outline-offset:3px;
}
.faq_help_name{ font-size:.9375rem; font-weight:500; letter-spacing:-0.01em; line-height:1.3 }
.faq_help_role{ font-size:.8125rem; color:var(--muted); line-height:1.4 }
.faq_help_title{ margin-block-start:1.75rem; font-size:1.5rem; font-weight:500; letter-spacing:-0.025em; line-height:1.2 }
.faq_help_text{ margin-block-start:.5rem; font-size:.9375rem; line-height:1.55; color:var(--muted); text-wrap:pretty }
.faq_help .faq_help_cta{ display:flex; width:100%; justify-content:space-between; margin-block-start:1.5rem; height:2.875rem; padding-inline:1.25rem 1.125rem; font-size:.9375rem }
.faq_help_email{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  margin-block-start:1.25rem; padding-block-start:1.125rem; border-block-start:1px solid var(--line-soft);
  flex-wrap:wrap; row-gap:.375rem;               /* on a narrow card the address drops under its label */
}
.faq_help_email > span, .faq_help_email a{ white-space:nowrap }
@media (max-width:600px){ .faq_help{ padding:1.375rem } }
.faq_help_email > span{ font-family:var(--font-mono); font-size:.6875rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted) }
.faq_help_email a{ font-size:.9375rem; color:var(--text); transition:color .18s var(--ease) }
.faq_help_email a:hover{ color:var(--brand-ink) }
.faq_help_email .arrow{ display:inline-block; transition:translate .2s var(--ease) }
.faq_help_email a:hover .arrow{ translate:2px -2px }

/* The accordion. Rows are numbered by a counter; the icon is a round button whose
   plus turns to a cross; the open row's rule draws in darker, like the nav line. */
.faq{ counter-reset:faq }   /* no rule above the first row; each row keeps its own below */
.faq details{ position:relative; counter-increment:faq; border-block-end:1px solid var(--line) }
.faq details::after{
  content:""; position:absolute; inset-inline:0; inset-block-end:-1px; height:1px; background:var(--text);
  transform:scaleX(0); transform-origin:0 50%; transition:transform .7s cubic-bezier(.625,.05,0,1); pointer-events:none;
}
.faq details[open]:not(.is-closing)::after{ transform:scaleX(1) }
.faq summary{
  display:grid; grid-template-columns:2.75rem minmax(0,1fr) 2.5rem; align-items:center; gap:0 1rem;
  padding-block:1.5rem; cursor:pointer; list-style:none;
}
.faq summary::-webkit-details-marker{ display:none }
.faq summary::before{
  content:counter(faq, decimal-leading-zero); font-family:var(--font-mono); font-size:.75rem;
  color:var(--muted); transition:color .25s var(--ease);
}
.faq_q{
  font-size:clamp(1.0625rem, .96rem + .32vw, 1.25rem); font-weight:500; letter-spacing:-0.02em; line-height:1.35;
  text-wrap:pretty; transition:translate .45s cubic-bezier(.625,.05,0,1);
}
.faq_icon{
  display:grid; place-items:center; justify-self:end; width:2.5rem; height:2.5rem; border-radius:99px;
  border:1px solid var(--line); color:var(--text);
  transition:background-color .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
/* The glyph is one SVG path that site.js morphs between plus and cross. It never
   rotates; overflow stays visible so the spring's overshoot is not clipped. */
.faq_icon svg{ width:1.25rem; height:1.25rem; overflow:visible }
.faq summary:hover .faq_q{ translate:.25rem 0 }
.faq summary:hover .faq_icon{ border-color:var(--text) }
.faq summary:hover::before, .faq details[open]:not(.is-closing) summary::before{ color:var(--brand-ink) }
.faq details[open]:not(.is-closing) .faq_icon{ background-color:var(--text); border-color:var(--text); color:var(--page); }
.faq summary:focus-visible{ outline:none }
.faq summary:focus-visible .faq_icon{ outline:2px solid var(--brand-ink); outline-offset:3px }

.faq_answer{ overflow:hidden }
.faq_answer_inner{
  padding-inline:3.75rem 3.5rem; padding-block-end:1.75rem; max-width:44rem;
  color:var(--muted); line-height:1.65; text-wrap:pretty;
}
/* Answers read lead-first: one direct line in full ink, then something to scan.
   Bullets are violet dashes, steps are mono numbers, timelines are a small table. */
.faq_answer_inner > * + *{ margin-block-start:1rem }
.faq_answer_inner > p:first-child{ color:var(--text); font-weight:500; letter-spacing:-0.01em }
.faq_answer_inner ul, .faq_answer_inner ol{ list-style:none; padding:0; display:grid; gap:.5rem }
.faq_answer_inner ul.is-cols{ grid-template-columns:repeat(2, minmax(0,1fr)); column-gap:1.5rem }
.faq_answer_inner ul:not(.faq_spec) li{ position:relative; padding-inline-start:1.25rem }
.faq_answer_inner ul:not(.faq_spec) li::before{ content:""; position:absolute; inset-inline-start:0; inset-block-start:.8em; width:.5rem; height:1px; background:var(--brand-ink) }
.faq_answer_inner ol{ counter-reset:step }
.faq_answer_inner ol li{ position:relative; padding-inline-start:2rem; counter-increment:step }
.faq_answer_inner ol li::before{
  content:counter(step, decimal-leading-zero); position:absolute; inset-inline-start:0; inset-block-start:.3em;
  font-family:var(--font-mono); font-size:.75rem; line-height:1.2; color:var(--brand-ink);
}
.faq_answer_inner ul.faq_spec{ gap:0; border-block-start:1px solid var(--line) }
.faq_spec li{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; padding-block:.625rem; border-block-end:1px solid var(--line) }
.faq_spec li span:last-child{ font-family:var(--font-mono); font-size:.8125rem; color:var(--text); white-space:nowrap }
@media (max-width:600px){ .faq_answer_inner ul.is-cols{ grid-template-columns:1fr } }

@media (max-width:860px){
  .faq_layout{ grid-template-columns:1fr; gap:2.5rem }
  .faq_intro{ display:contents }                 /* header, then questions, then the help card */
  .faq_intro .section_header{ order:0 }
  .faq{ order:1 }
  .faq_help{ order:2; margin-block-start:0 !important }
}
@media (max-width:600px){
  .faq summary{ grid-template-columns:2rem minmax(0,1fr) 2.25rem; gap:0 .75rem; padding-block:1.25rem }
  .faq_icon{ width:2.25rem; height:2.25rem }
  .faq_answer_inner{ padding-inline:2.75rem 0 }
}

/* ============================ CONTACT ==================================== */
.contact{ display:grid; grid-template-columns:minmax(0,22rem) minmax(0,1fr) }
.contact > *{ border:1px solid var(--line); margin-inline-end:-1px; margin-block-end:-1px; padding:var(--cell--pad) }
@media (max-width:860px){ .contact{ grid-template-columns:1fr } }
/* The founder column is a lifted panel: identity, one action, a spec-sheet of
   details, and "what happens next" as a small card pinned to the floor. A faint
   brand glow behind the photo ties it back to the hero. */
.contact > .founder{ background:var(--surface); display:flex; flex-direction:column; position:relative; overflow:hidden; isolation:isolate }
.contact > .founder::before{
  content:""; position:absolute; z-index:-1; pointer-events:none;
  inset-block-start:-9rem; inset-inline-start:-7rem; width:22rem; aspect-ratio:1; border-radius:50%;
  background:var(--grain), radial-gradient(closest-side, color-mix(in srgb, var(--brand) 30%, transparent), transparent 72%);
  background-blend-mode:soft-light, normal; background-size:180px 180px, auto;
  -webkit-mask-image:radial-gradient(closest-side, #000, transparent 72%); mask-image:radial-gradient(closest-side, #000, transparent 72%);
}
.founder_top{ display:flex; align-items:center; gap:1.125rem }
.founder img{
  width:4.25rem; height:4.25rem; border-radius:99px; object-fit:cover; flex:none;
  outline:1px solid color-mix(in srgb, var(--brand-ink) 55%, transparent); outline-offset:3px;
}
.founder_meta .h4{ line-height:1.2 }
.founder_note{ margin-block-start:2rem; color:var(--text); font-size:1.0625rem; font-weight:500; letter-spacing:-0.01em; line-height:1.4; text-wrap:pretty }
.founder_note span{ display:block; color:var(--muted); font-size:.9375rem; font-weight:400; margin-block-start:.25rem }
.founder_cta{ margin-block-start:1.25rem; align-self:stretch; justify-content:space-between }
.founder_label, .founder_details dt, .form_group{
  font-family:var(--font-mono); font-size:.6875rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted);
}
/* Details read like a spec sheet: label left, value right, one hairline per row. */
.founder_details{ margin-block-start:2rem; display:grid; border-block-start:1px solid var(--line) }
.founder_details > div{ display:flex; justify-content:space-between; align-items:baseline; gap:1rem; padding-block:.875rem; border-block-end:1px solid var(--line) }
.founder_details dt{ margin:0 }
.founder_details dd{ margin:0; font-size:.9375rem; text-align:end }
.founder_details a{ color:var(--text); text-decoration-color:transparent; text-underline-offset:.2em; transition:text-decoration-color .2s var(--ease) }
.founder_details a:hover{ color:var(--text); text-decoration:underline; text-decoration-color:var(--brand-ink) }
.founder_next{ margin-block-start:auto; padding-block-start:2rem }
.founder_next ol{
  list-style:none; margin-block-start:.75rem; padding:1rem 1.125rem; display:grid; gap:.75rem; counter-reset:step;
  background:color-mix(in srgb, var(--text) 3%, transparent); border:1px solid var(--line-soft); border-radius:.75rem;
}
.founder_next li{ display:grid; grid-template-columns:1.5rem 1fr; gap:.5rem; font-size:.875rem; color:var(--muted); line-height:1.45; text-wrap:pretty }
.founder_next li::before{ counter-increment:step; content:"0" counter(step); font-family:var(--font-mono); font-size:.6875rem; color:var(--brand-ink); padding-block-start:.2rem }

/* Two tiers inside the form. Group headings are numbered mono caps with a rule
   running to the edge; field labels are plain sans so they sit a clear step
   below the headings instead of matching them. */
.form_grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.25rem; counter-reset:group }
@media (max-width:600px){ .form_grid{ grid-template-columns:1fr } }
.form_group{ grid-column:1 / -1; display:flex; align-items:center; gap:.75rem; margin-block-start:1.25rem; white-space:nowrap; color:var(--text) }
.form_group:first-child{ margin-block-start:0 }
.form_group::before{ counter-increment:group; content:"0" counter(group); color:var(--brand-ink) }
.form_group::after{ content:""; flex:1; border-block-start:1px solid var(--line) }
.form_note{ grid-column:1 / -1; font-size:.875rem; color:var(--muted) }
/* align-content:start stops a field's control stretching to match a taller
   neighbour in the same row. */
.field{ display:grid; gap:.5rem; align-content:start }
.field.is-full{ grid-column:1/-1 }
.field label{ font-size:.875rem; font-weight:500; letter-spacing:-0.005em; color:var(--text) }
.field label .muted, .field label .hint{ color:var(--muted); font-weight:400; opacity:.75 }
/* "(required)" / "(optional)" beside a label: mono, small, never colour alone. Lives here
   rather than on the contact page, because the form is shared across the site. */
.field label .hint{ font-family:var(--font-mono); font-size:.6875rem; letter-spacing:0; opacity:.8 }
.field_help{ font-size:.8125rem; color:var(--muted) }

.field input,.field select,.field textarea{
  background:var(--surface); border:1px solid var(--line); border-radius:.75rem;
  padding:.8125rem 1rem; font-size:1rem; color:var(--text); width:100%;
  box-shadow:inset 0 1px 0 color-mix(in srgb, var(--text) 4%, transparent);
  transition:border-color .18s var(--ease), box-shadow .18s var(--ease), background-color .18s var(--ease);
}
.field ::placeholder{ transition:opacity .18s var(--ease) }
.field ::placeholder{ color:color-mix(in srgb, var(--muted) 85%, var(--surface)); opacity:1 }
/* Hover lifts the field a touch and brightens its label; focus hands the label and
   the select chevron the brand colour so the active field is obvious at a glance. */
.field input:hover,.field select:hover,.field textarea:hover{
  border-color:color-mix(in srgb, var(--line), var(--text) 22%);
  background-color:color-mix(in srgb, var(--surface), var(--text) 2%);
  box-shadow:inset 0 1px 0 color-mix(in srgb, var(--text) 6%, transparent), 0 1px 2px rgba(0,0,0,.25);
}
.field label{ transition:color .18s var(--ease) }
.field:has(input:hover, select:hover, textarea:hover) label{ color:var(--text) }
.field:has(input:focus-visible, select:focus-visible, textarea:focus-visible) label{ color:var(--brand-ink) }
.field:has(input:focus-visible, select:focus-visible, textarea:focus-visible) label :is(.muted, .hint){ color:var(--brand-ink); opacity:.7 }
.field select:hover{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23C4C7CE' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") }
.field select:focus-visible{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23FFFFFF' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") }
/* Focus comes after hover on purpose: same specificity, later wins, so a field you
   click into shows its focus state even while the pointer is still resting on it. */
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible{
  outline:none; border-color:var(--brand-ink);
  background-color:color-mix(in srgb, var(--surface), var(--brand) 4%);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent),
             0 0 28px -4px color-mix(in srgb, var(--brand) 32%, transparent),
             inset 0 1px 0 color-mix(in srgb, var(--text) 5%, transparent);
}
.field select{
  appearance:none; padding-inline-end:2.75rem; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%238A8F98' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 1.125rem center; background-size:.75rem auto;
}
.field select:invalid, .field select:has(option:checked[value=""]){ color:color-mix(in srgb, var(--muted) 85%, var(--surface)) }
.field textarea{ min-height:9rem; resize:vertical }
.form_foot{ grid-column:1/-1; display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-block-start:.5rem; padding-block-start:1.25rem; border-block-start:1px solid var(--line-soft) }
.form_foot .button{ height:2.75rem; padding-inline:1.5rem 1.375rem; font-size:.9375rem }
.founder_next ol{ transition:border-color .2s var(--ease), background .2s var(--ease) }
.founder_next:hover ol{ border-color:var(--line); background:color-mix(in srgb, var(--text) 4%, transparent) }

/* ============================ FOOTER ===================================== */
/* The closing band is the last section of main. The footer sits behind it, stuck
   to the bottom of the viewport, and main slides up over it to reveal it (the
   osmo.supply footer). Sticky is only turned on when the footer fits the viewport,
   because a sticky footer taller than the screen can never show its top. */
.cta_section{ border-block-start:1px solid var(--line) }
main{ position:relative; z-index:1; background:var(--page) }
.footer{ border-block-start:1px solid var(--line); overflow:hidden }
/* site.js adds .is-sticky only while the footer fits the viewport (measured, not
   guessed: the stacked tablet footer is taller than many screens). */
.footer.is-sticky{ position:sticky; inset-block-end:0; z-index:0 }
body:has(.footer.is-sticky) main{ box-shadow:0 32px 80px -16px rgba(0,0,0,.7) }
/* the footer's own content eases up a touch as it is revealed */
@supports (animation-timeline: view()){
  .footer.is-sticky > .padding-global, .footer.is-sticky .footer_mark{ animation:footer-rise linear both; animation-timeline:view(); animation-range:entry 0% entry 100% }
  @keyframes footer-rise{ from{ translate:0 -6rem; opacity:.6 } to{ translate:0 0; opacity:1 } }
}

/* Closing statement, rail to rail. A brand glow sits low on the left under the
   headline; the last word carries the brand ramp; actions sit on the baseline. */
.footer_cta{
  position:relative; isolation:isolate; overflow:hidden;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,28.5rem); align-items:end; gap:2.5rem 3rem;
  padding-block:5rem 4.5rem; padding-inline:var(--cell--pad); border-block-end:1px solid var(--line);
}
/* The glow, and inside it the hero's halftone: a dot grid masked to the same
   radial falloff, so the page ends on the mark it opened with. */
.footer_cta::before, .footer_cta::after{
  content:""; position:absolute; z-index:-1; pointer-events:none;
  inset-block-end:-16rem; inset-inline-start:-12rem; width:40rem; aspect-ratio:1; border-radius:50%;
}
.footer_cta::before{
  background:var(--grain), radial-gradient(closest-side, color-mix(in srgb, var(--brand) 30%, transparent), transparent 72%);
  background-blend-mode:soft-light, normal; background-size:180px 180px, auto;
  -webkit-mask-image:radial-gradient(closest-side, #000, transparent 72%); mask-image:radial-gradient(closest-side, #000, transparent 72%);
}
.footer_cta::after{
  background-image:radial-gradient(circle, color-mix(in srgb, var(--brand-ink) 70%, transparent) 1px, transparent 1.4px);
  background-size:14px 14px; background-position:center;
  -webkit-mask-image:radial-gradient(closest-side, #000, transparent 68%);
          mask-image:radial-gradient(closest-side, #000, transparent 68%);
  opacity:.55;
}
.footer_cta_line{ margin-block-start:1rem; max-width:18ch; text-wrap:balance }   /* same scale as every other section heading */
.footer_cta_accent, .hero_title_fade, .service_cta_fade, .text_fade{
  /* white falling to a quiet grey with film grain: a neutral gradient, never the brand */
  background-image:var(--grain), linear-gradient(90deg, var(--text) 0%, color-mix(in srgb, var(--text) 88%, var(--page)) 55%, color-mix(in srgb, var(--text) 68%, var(--page)) 100%);
  background-blend-mode:soft-light, normal; background-size:180px 180px, auto;
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.footer_cta_side{ display:grid; gap:1.75rem; justify-items:start; padding-block-end:.375rem }
.footer_cta_sub{ color:var(--muted); max-width:34ch; font-size:1.0625rem; line-height:1.5; text-wrap:pretty }
.footer_cta_actions{ display:flex; gap:.75rem; flex-wrap:nowrap }   /* the column is sized for both buttons on one row */
.footer_cta_actions .button{ height:2.75rem; padding-inline:1.5rem; font-size:.9375rem }
.footer_cta_actions .button:has(.arrow){ padding-inline-end:1.375rem }
/* Character stagger on hover (textfx.js splits the label). Each character carries
   a copy of itself 1.3em below as a text-shadow; hover slides the stack up inside
   the clipped label, 10ms later per character, so the word rolls over. */
.button_label{ display:inline-flex; overflow:hidden; line-height:1.3; white-space:nowrap }
.button_label > span{
  display:inline-block; text-shadow:0 1.3em currentColor;
  transform:translateY(0) rotate(.001deg);
  transition:transform .6s cubic-bezier(.625,.05,0,1);
}
.button:hover .button_label > span, .button:focus-visible .button_label > span{ transform:translateY(-1.3em) rotate(.001deg) }

.footer_grid{ display:grid; grid-template-columns:1.7fr 1fr 1fr 1fr; gap:0 }
.footer_grid > *{ padding-block:3.5rem; padding-inline:var(--cell--pad) }
.footer_grid > * + *{ border-inline-start:1px solid var(--line) }
.footer_brand img{ height:1.875rem; width:auto }
.footer_pitch{ color:var(--muted); font-size:.9375rem; line-height:1.55; max-width:34ch; margin-block-start:1.5rem }
/* Studio facts as a small spec sheet: two columns, a hairline over each cell. */
.footer_facts{ margin:2.25rem 0 0; display:grid; grid-template-columns:1fr 1fr; gap:0 1.5rem }
.footer_facts > div{ padding-block:.875rem 1rem; border-block-start:1px solid var(--line) }
.footer_facts > .is-wide{ grid-column:1 / -1 }   /* an address gets the whole row */
.footer_facts dt, .footer_label, .footer_title{
  font-family:var(--font-mono); font-size:.6875rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted);
}
.footer_facts dt{ margin-block-end:.375rem }
.footer_facts dd{ margin:0; font-size:.9375rem; line-height:1.5; color:var(--text) }
.footer_title{ margin-block-end:1.25rem; display:flex; align-items:center; gap:.875rem; white-space:nowrap }
.footer_title::after{ content:""; flex:1; border-block-start:1px solid var(--line) }
.footer ul{ list-style:none; padding:0; display:grid; gap:.35rem }
/* Text links only. The tap-target padding must never reach a .button — it beat
   .button's inline-flex and knocked the footer CTA buttons out of shape. */
.footer a:not(.button){ color:var(--muted); font-size:.9375rem; transition:color .18s var(--ease); display:inline-block; padding-block:.2rem; position:relative }
/* textfx.js adds a .nav_line to each of these too; it sits on the link's bottom
   edge, which is the padding edge, so it clears the descenders. */
.footer a:not(.button) .nav_line{ inset-block-end:0 }
.footer a:not(.button):hover{ color:var(--text) }
.footer .footer_facts a{ color:var(--text); padding-block:0 }

.footer_bottom{
  border-block-start:1px solid var(--line); display:flex; align-items:center; gap:1.5rem;
  flex-wrap:wrap; padding-block:1.5rem; padding-inline:var(--cell--pad);
  font-size:.8125rem; color:var(--muted);
}
.footer_bottom nav, .footer_bottom_end{ display:flex; gap:1.5rem }
.footer_bottom_end{ margin-inline-start:auto; align-items:center }
/* Social icons as small round buttons. They are links inside .footer, so the
   text-link padding and the hover line are switched off for them. */
.footer .footer_social{ display:flex; gap:.5rem; margin:0; padding:0 }
.footer .footer_social a{
  display:inline-flex; align-items:center; justify-content:center; width:2.125rem; height:2.125rem; padding:0;
  border:1px solid var(--line); border-radius:99px; color:var(--muted);
  transition:color .18s var(--ease), border-color .18s var(--ease), background-color .18s var(--ease), translate .2s var(--ease);
}
.footer .footer_social a:hover{ color:var(--page); border-color:var(--text); background-color:var(--text); translate:0 -1px }   /* inverts, like the outlined buttons */
.footer .footer_social svg{ width:1rem; height:1rem }
.footer .footer_social .nav_line{ display:none }
.footer_bottom a:not(.button){ font-size:.8125rem }
.footer a:not(.button) .arrow{ display:inline-block; transition:translate .2s var(--ease) }
.footer a:not(.button):hover .arrow{ translate:2px -2px }
.footer_top:hover .arrow{ translate:0 -3px }

/* Giant wordmark, low contrast, fading and cropped at the page's bottom edge. */
.footer_mark{ border-block-start:1px solid var(--line); padding-block-start:2.5rem }
.footer_mark img{
  width:100%; height:auto; display:block; margin-block-end:-7%; opacity:.13;
  -webkit-mask-image:linear-gradient(to bottom, #000 10%, transparent 95%);
          mask-image:linear-gradient(to bottom, #000 10%, transparent 95%);
}

/* Below 1100px four columns are too tight for "Webflow development" on one line:
   the brand block takes a full row and the three link columns share the next. */
@media (max-width:1100px){
  .footer_grid{ grid-template-columns:1fr 1fr 1fr }
  .footer_grid > .footer_brand{ grid-column:1 / -1; border-block-end:1px solid var(--line); padding-block:3rem }
  .footer_grid > :nth-child(2){ border-inline-start:0 }
  .footer_facts{ max-width:34rem }
}
@media (max-width:991px){
  .footer_cta{ grid-template-columns:1fr; padding-block:4rem 3.5rem }
  .footer_cta_actions{ flex-wrap:wrap }
  .footer_grid > *{ padding-inline:1.5rem }
}
/* Two columns left Company stranded on a row of its own with an empty cell
   beside it. The three link groups still fit side by side on a tablet, so the
   drop to two columns waits until the narrower end of the range. */
@media (max-width:767px){
  .footer_grid{ grid-template-columns:1fr 1fr }
  /* children 2 and 4 sit in the first column, 3 in the second */
  .footer_grid > :nth-child(even){ border-inline-start:0 }
}
@media (max-width:600px){
  .footer_grid{ grid-template-columns:1fr }
  .footer_grid > *{ border-inline-start:0; padding-block:2rem }
  .footer_facts{ grid-template-columns:1fr }
  .footer_bottom_end{ margin-inline-start:0; width:100% }
  /* Resources and Company share a row, with a line between them, so the
     footer is not one long column of links. Services keeps a full row. */
  .footer_grid{ grid-template-columns:minmax(0,1fr) auto }
  .footer_grid > .footer_brand, .footer_grid > :nth-child(2){ grid-column:1 / -1 }
  .footer_grid > :nth-child(3){ padding-inline-end:.5rem }
  .footer_grid > :nth-child(4){ border-inline-start:1px solid var(--line); padding-inline:1rem 0 }
}

/* ==========================================================================
   Shared patterns used by the inner pages. Added when the concept grew from
   one homepage to the whole site. Page-specific tweaks belong in that page's
   own <style> block, not here.
   ========================================================================== */

/* Page hero: every page except the homepage opens with this. */
.page_hero{ padding-block-start:5.5rem; text-align:center }
.page_hero .h1{ margin-block-start:1rem; text-wrap:balance }
.page_hero_inner{ max-width:44rem; margin-inline:auto }
.page_hero p.lede{ margin-block-start:1.25rem; max-width:36rem; margin-inline:auto; text-wrap:pretty }
.page_hero_actions{ display:flex; gap:.75rem; justify-content:center; margin-block-start:2rem; flex-wrap:wrap }
.page_hero_divider{ margin-block-start:4rem; border-block-start:1px solid var(--line) }

/* Breadcrumb */
.crumbs{ display:flex; gap:.5rem; align-items:center; font-size:.8125rem; color:var(--muted); justify-content:center }
.crumbs a:hover{ color:var(--text) }
.crumbs a{ padding-block:.3rem }   /* a taller tap area without moving the line */
.crumbs span{ opacity:.5 }

/* Placeholder blocks. Everything wearing these is content Rahat still has to
   supply, and it is meant to look obviously unfinished. */
.placeholder_image{
  position:relative; display:grid; place-items:center;
  aspect-ratio:var(--ratio, 16/10); background:var(--surface);
  border:1px dashed var(--line); border-radius:.75rem; overflow:hidden;
}
.placeholder_image span{
  font-family:var(--font-mono); font-size:.75rem; color:var(--muted); text-align:center; padding:1rem;
}
.is-placeholder{ position:relative }
.placeholder_tag{
  display:inline-flex; align-items:center; gap:.375rem; height:1.5rem; padding-inline:.5rem;
  border:1px dashed var(--line); border-radius:99px; font-family:var(--font-mono);
  font-size:.6875rem; color:var(--muted); letter-spacing:0;
}
.placeholder_text{ color:var(--muted) }

/* Long-form copy: legal pages, blog posts, project write-ups. */
.prose{ max-width:42rem }
.prose > * + *{ margin-block-start:1.125rem }
.prose h2{ font-size:1.625rem; line-height:1.2; font-weight:500; letter-spacing:-0.026em; margin-block-start:3rem }
.prose h3{ font-size:1.25rem; line-height:1.3; font-weight:500; letter-spacing:-0.02em; margin-block-start:2rem }
.prose h4{ font-size:1.0625rem; font-weight:500; margin-block-start:1.5rem }
.prose p, .prose li{ color:var(--muted); text-wrap:pretty }
.prose a{ color:var(--text); text-decoration:underline; text-underline-offset:3px; text-decoration-color:color-mix(in srgb, var(--text) 35%, transparent) }
.prose a:hover{ text-decoration-color:var(--accent) }
.prose ul, .prose ol{ padding-inline-start:1.25rem; display:grid; gap:.5rem }
.prose blockquote{ border-inline-start:2px solid var(--accent); padding-inline-start:1.25rem; color:var(--text) }
.prose img, .prose .placeholder_image{ border-radius:.75rem; margin-block:2rem }
.prose figcaption{ font-size:.8125rem; color:var(--muted); margin-block-start:.625rem }
.prose hr{ border:0; border-block-start:1px solid var(--line); margin-block:2.5rem }
.prose code{ font-family:var(--font-mono); font-size:.875em; background:var(--raised); padding:.15em .4em; border-radius:.3rem }
.prose table{ width:100%; border-collapse:collapse; font-size:.9375rem }
.prose th, .prose td{ text-align:left; padding:.75rem 1rem; border:1px solid var(--line) }
.prose th{ font-weight:500 } .prose td{ color:var(--muted) }
.table_scroll{ overflow-x:auto }
/* Phones: each table row becomes a small card, with the column name above each value. */
@media (max-width:600px){
  .prose .table_scroll{ overflow:visible }
  .prose table, .prose tbody, .prose tr, .prose td{ display:block; width:100% }
  .prose thead{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap }
  .prose tbody{ display:grid; gap:.75rem }
  .prose tr{ border:1px solid var(--line); border-radius:.875rem; padding:1rem 1.125rem; background:var(--raised) }
  .prose td{ border:0; padding:0; line-height:1.55 }
  .prose td:first-child{ color:var(--text); font-weight:500; font-size:1rem }
  .prose td + td{ margin-block-start:.875rem; padding-block-start:.875rem; border-block-start:1px solid var(--line) }
  .prose td + td::before{ content:attr(data-label); display:block; margin-block-end:.3rem; font-family:var(--font-mono); font-size:.75rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted) }
}

/* Article: table of contents beside the prose. */
.article_body{ display:grid; grid-template-columns:minmax(0,15rem) minmax(0,1fr); gap:4rem; align-items:start }
.toc{ position:sticky; top:6rem; display:grid; gap:.625rem; font-size:.875rem; padding-inline-end:1rem }
.toc a{ color:var(--muted); display:block; line-height:1.4 } .toc a:hover{ color:var(--text) }
.toc .is-sub{ padding-inline-start:.875rem; font-size:.8125rem }
@media (max-width:991px){
  .article_body{ grid-template-columns:minmax(0,1fr); gap:2.5rem }
  .toc{ position:static; border:1px solid var(--line); border-radius:.875rem; padding:1.25rem }
}

/* Meta row used on project and article headers */
.meta_row{ display:flex; flex-wrap:wrap; gap:2.5rem; padding-block:1.5rem }
.meta_row dt{ font-size:.75rem; color:var(--muted); font-family:var(--font-mono) }
.meta_row dd{ margin:0; margin-block-start:.375rem; font-size:.9375rem }
.meta_row dd a{ display:inline-block; padding-block:.3rem; margin-block:-.3rem }   /* taller tap area, same line position */

/* Pricing / engagement cards */
.price_cell{ display:flex; flex-direction:column; gap:1.25rem }
.price_amount{ font-size:2rem; font-weight:500; letter-spacing:-0.03em }
.price_amount small{ display:block; font-size:.8125rem; color:var(--muted); font-weight:400; letter-spacing:0; margin-block-start:.25rem }
.price_list{ list-style:none; padding:0; display:grid; gap:.75rem; font-size:.9375rem; color:var(--muted) }
.price_list li{ display:grid; grid-template-columns:1rem 1fr; gap:.625rem; align-items:start }
/* checks, not arrows: this is a list of what you get, not a list of links */
.price_list .ic_check{ width:.75rem; height:.75rem; margin-block-start:.3rem; color:var(--text) }
.price_cell .button{ margin-block-start:auto }

/* Simple 2-column feature row, alternating */
.feature_row{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:4rem; align-items:center }
.feature_row.is-reverse > :first-child{ order:2 }
@media (max-width:860px){ .feature_row{ grid-template-columns:1fr; gap:2rem } .feature_row.is-reverse > :first-child{ order:0 } }

/* Card grids for blog posts, templates and components */
.card_grid{ --cols:3 }
.card_media{ border:1px solid var(--line); border-radius:.75rem; overflow:hidden; background:var(--surface); margin-block-end:1.25rem }
.card_media img{ width:100%; aspect-ratio:16/10; object-fit:cover; object-position:top center }
.card_meta{ display:flex; gap:.5rem; align-items:center; font-size:.8125rem; color:var(--muted); margin-block-end:.625rem }
.card_meta span{ opacity:.5 }
.card h3{ margin-block-end:.5rem }
.card h3 a:hover{ color:var(--accent) }

/* Next project / pagination */
.next_row{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; padding-block:2rem; flex-wrap:wrap }

/* 404 */
.error_code{ font-family:var(--font-mono); font-size:clamp(4rem,3rem+6vw,8rem); line-height:1; color:var(--raised) }

/* Review cards — the marketplace ones carry a source badge and a star row, the
   direct client ones do not, so the two read as different kinds of proof. */
.quote_top{ display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-block-end:1rem }
.quote_stars{ color:var(--brand-ink); font-size:.875rem; letter-spacing:.1em }
.quote_badge{
  font-family:var(--font-mono); font-size:.6875rem; color:var(--muted);
  border:1px solid var(--line); border-radius:99px; padding:.1875rem .5rem; white-space:nowrap;
}
.quote_person .quote_initial{
  width:2.5rem; height:2.5rem; border-radius:99px; flex:none;
  display:grid; place-items:center; background:var(--raised); border:1px solid var(--line);
  font-size:.9375rem; font-weight:500; line-height:1; color:var(--muted);
}

/* Count beside each filter label, so it is obvious what a tab will show. */
.tab_count{ font-family:var(--font-mono); font-size:.6875rem; opacity:.55; margin-inline-start:.25rem }
.tab[aria-pressed="true"] .tab_count{ opacity:.7 }

/* ============================ SCROLL REVEALS ============================= */
/* The hidden state exists only while <html> carries js-reveal, which is set by
   an inline script in the head and removed again if JavaScript cannot finish the
   job. No JS, no hidden content. Reveals are animations, never transitions —
   a transition here would overwrite the hover transition on the same card. */
.js-reveal [data-reveal]{ opacity:0; translate:0 14px }
.js-reveal [data-reveal].is-in{
  animation:reveal-up .62s var(--ease) both;
  animation-delay:var(--reveal-delay, 0ms);
}
@keyframes reveal-up{ from{ opacity:0; translate:0 14px } to{ opacity:1; translate:0 0 } }

@media (prefers-reduced-motion: reduce){
  .js-reveal [data-reveal]{ opacity:1; translate:0 0; animation:none }
}

/* ============================ MOTION (motion.js) ========================= */
/* The <head> adds .js-motion when motion is allowed; motion.js adds .motion-ready
   once its start states are set. Until then the page intro stays hidden so it never
   flashes in and then jumps. A timer in the <head> drops .js-motion after 3s if
   GSAP never arrives, so nothing can stay hidden. */
.js-motion:not(.motion-ready) :is(.hero_inner, .page_hero_inner, .error_block) > :not(.eyebrow):not(.crumbs),
.js-motion:not(.motion-ready) .logo_marquee{ visibility:hidden }

/* SplitText wraps each heading line in a clipping mask; a little room below the
   baseline keeps descenders (g, p, y) from being cut off by it. */
:is(.h1, .h2) [class$="-mask"]{ padding-block-end:.14em; margin-block-end:-.14em }

/* GSAP drives these now, so their CSS animations stand down. */
.motion-ready .logo_track{ animation:none }
.motion-ready .footer.is-sticky > .padding-global,
.motion-ready .footer.is-sticky .footer_mark{ animation:none }

/* project images: a slightly deeper hover, and the pointer becomes the pill */
.motion-ready .work_card .work_media{ cursor:none }
.cursor_pill{
  position:fixed; left:0; top:0; z-index:200; pointer-events:none; visibility:hidden;
  display:inline-flex; align-items:center; gap:.375rem; padding:.625rem 1rem; border-radius:99px;
  font-size:.8125rem; font-weight:500; letter-spacing:-0.005em; color:#fff; white-space:nowrap;
  background-color:var(--brand); background-image:var(--grain-soft), var(--brand-gradient);
  background-blend-mode:soft-light, normal; background-size:180px 180px, auto;
  border:1px solid var(--brand-stroke); box-shadow:0 14px 34px -12px rgba(110,71,242,.65);
}

/* the process line draws between the step markers and lights each one */
.process{ position:relative }
.process_line{ position:absolute; height:1px; background:var(--text); transform-origin:0 50%; pointer-events:none; z-index:0 }
.step_num{ z-index:1; transition:background-color .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease) }
.step_num.is-lit{ background:var(--text); color:var(--page); border-color:var(--text) }

/* reading progress under the header */
.scroll_progress{
  position:absolute; inset-inline:0; inset-block-end:-1px; height:1px; pointer-events:none;
  background:var(--brand); transform-origin:0 50%; transform:scaleX(0);
}

/* ============================ HERO, second pass ========================== */
/* The hero fills the first screen, so the logo strip lands right on the fold.
   5.875rem is the strip's height; the header is 4.25rem. */
.hero{ min-height:max(40rem, calc(100svh - 4.25rem - 5.875rem)); display:flex; flex-direction:column; justify-content:center }
.hero > .padding-global{ width:100% }
.hero .h1.hero_title{
  font-size:clamp(2.875rem, 1.1rem + 5vw, 5.375rem); line-height:.98; letter-spacing:-0.048em;
  max-width:none; margin-block-start:1.5rem;
}
.hero .hero_sub{ max-width:38rem; font-size:clamp(1.0625rem, 1rem + .25vw, 1.1875rem); margin-block-start:1.75rem }
.hero .hero_actions{ margin-block-start:2.5rem }
.hero .hero_actions .button{ height:3rem; padding-inline:1.5rem; font-size:.9375rem }
.hero .hero_actions .button:has(.arrow){ padding-inline-end:1.375rem }
.hero .hero_proof{ margin-block-start:3.5rem; gap:.75rem 1.25rem }
.hero_proof_divider{ width:1px; height:1.5rem; background:var(--line) }
.hero_rating{ display:flex; align-items:center; gap:.5rem }
.hero_stars{ color:var(--brand-ink); font-size:.8125rem; letter-spacing:.14em }
@media (max-width:600px){ .hero_proof_divider{ display:none } .hero .hero_proof{ flex-direction:column } }

/* ============================ SECTION HEADER, split ====================== */
.section_header.is-split{
  max-width:none; margin-inline:0; text-align:left;
  display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:1.5rem 4rem; align-items:end;
}
.section_header.is-split .h2{ max-width:18ch }
.section_header.is-split > div:last-child{ padding-block-end:.375rem }
.section_header.is-split > div:last-child p{ margin-block-start:0; max-width:36ch; text-wrap:pretty }
.section_header.is-split .button{ margin-block-start:1.5rem }
@media (max-width:860px){ .section_header.is-split{ grid-template-columns:1fr } }

/* ============================ SERVICES, second pass ====================== */
/* Each card is one link (the title's ::after covers the card), with a numbered
   top row, and an "Explore service" row pinned to the floor. motion.js feeds the
   pointer position into --mx/--my for the spotlight and redraws the icon on hover. */
.service_cell{ position:relative; isolation:isolate; min-height:21rem; transition:background-color .35s var(--ease) }
.service_cell::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; border-radius:inherit;
  opacity:0; transition:opacity .35s var(--ease);
  background:radial-gradient(22rem circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--brand) 10%, transparent), transparent 65%);
}
.service_cell:hover{ background-color:var(--surface) }
.service_cell:hover::before{ opacity:1 }
.service_top{ display:flex; align-items:flex-start; justify-content:space-between; margin-block-end:2rem }
.service_top .service_icon{
  margin:0; width:2.75rem; height:2.75rem; border-radius:.75rem; color:var(--text);
  transition:background-color .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.service_top .service_icon svg{ width:1.25rem; height:1.25rem }
.service_cell:hover .service_icon{ background-color:var(--text); border-color:var(--text); color:var(--page) }
.service_num{ font-family:var(--font-mono); font-size:.75rem; color:var(--muted); transition:color .35s var(--ease) }
.service_cell:hover .service_num{ color:var(--brand-ink) }
.service_link{ color:inherit }
.service_link::after{ content:""; position:absolute; inset:0; z-index:1 }
.service_link:focus-visible{ outline:none }
.service_cell:has(.service_link:focus-visible){ outline:2px solid var(--brand-ink); outline-offset:-2px }
.service_cell .service_tags{ padding-block-start:1.75rem }
.service_more{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  margin-block-start:1.5rem; padding-block-start:1.25rem; border-block-start:1px solid var(--line-soft);
  font-family:var(--font-mono); font-size:.6875rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted); transition:color .35s var(--ease);
}
.service_cell:hover .service_more{ color:var(--text) }
.service_arrow{
  position:relative; overflow:hidden; flex:none; width:2.25rem; height:2.25rem; border-radius:99px;
  border:1px solid var(--line); color:var(--text);
  transition:background-color .35s var(--ease), border-color .35s var(--ease), color .35s var(--ease);
}
.service_arrow svg{ position:absolute; inset:0; margin:auto; width:.875rem; height:.875rem; transition:translate .55s cubic-bezier(.625,.05,0,1) }
.service_arrow svg:last-child{ translate:-220% 0 }
.service_cell:hover .service_arrow{ background-color:var(--text); border-color:var(--text); color:var(--page) }
.service_cell:hover .service_arrow svg:first-child{ translate:220% 0 }
.service_cell:hover .service_arrow svg:last-child{ translate:0 0 }

/* Hero column: the 56rem cap forced the headline onto three lines and pushed the
   reviews under the trust line. The sub keeps its own narrower measure. */
.hero .hero_inner{ max-width:none }

/* Process: the line through the markers replaces the short vertical ticks, and a
   faint track shows the whole path before the black line draws along it. */
.step_num::after{ display:none }
@media (min-width:601px){ .step h3{ margin-block-start:2rem } }
.process_track{ position:absolute; height:1px; background:var(--line); pointer-events:none; z-index:0 }

/* ============================ WORK, second pass ========================== */
/* The whole card is one link: the title's ::after covers the card. On a mouse
   the image sits above that cover so motion.js can run the "View project" pill
   over it (a click on the image follows the same link). Tags sit on the floor of
   the card so a row of cards lines up. */
.work_card{ position:relative; isolation:isolate; gap:0; transition:background-color .35s var(--ease) }
.work_card:hover{ background-color:var(--surface) }
.work_media{ transition:border-color .35s var(--ease) }
.work_card:hover .work_media{ border-color:color-mix(in srgb, var(--brand-ink) 45%, var(--line)) }
.work_head{ display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-block-start:1.5rem }
.work_card .work_head .h3{ margin:0 }
.work_link{ color:inherit }
.work_link::after{ content:""; position:absolute; inset:0; z-index:1 }
.work_link:focus-visible{ outline:none }
.work_card:has(.work_link:focus-visible){ outline:2px solid var(--brand-ink); outline-offset:-2px }
.work_card > p{ margin-block-start:.625rem; text-wrap:pretty }
.work_card .work_tags{ margin-block-start:auto; padding-block-start:1.5rem }
@media (hover:hover) and (pointer:fine){
  .motion-ready .work_card .work_media{ position:relative; z-index:2 }
}

/* round arrow, pointing up-right: one arrow leaves, the next arrives */
.work_arrow{
  position:relative; overflow:hidden; flex:none; width:2.25rem; height:2.25rem; border-radius:99px;
  border:1px solid var(--line); color:var(--text);
  transition:background-color .35s var(--ease), border-color .35s var(--ease), color .35s var(--ease);
}
.work_arrow svg{ position:absolute; inset:0; margin:auto; width:.875rem; height:.875rem; rotate:-45deg; transition:translate .55s cubic-bezier(.625,.05,0,1) }
.work_arrow svg:last-child{ translate:-180% 180% }
.work_card:hover .work_arrow{ background-color:var(--text); border-color:var(--text); color:var(--page) }
.work_card:hover .work_arrow svg:first-child{ translate:180% -180% }
.work_card:hover .work_arrow svg:last-child{ translate:0 0 }

/* closing row under the homepage grid, drawn as one more lined cell */
.work_more{
  display:flex; align-items:center; justify-content:space-between; gap:1rem 2rem; flex-wrap:wrap;
  margin-inline-end:-1px; padding:1.5rem var(--cell--pad);
  border:1px solid var(--line); border-block-start:0;
}
.work_more p{ color:var(--muted); text-wrap:pretty }
.work_more_count{ color:var(--text); font-weight:500 }

/* ============================ SERVICES, platforms ======================== */
/* Platform cards carry the real brand marks (Simple Icons, one colour, 24px grid).
   They are filled shapes, so they follow currentColor and invert on hover like the
   line icons; motion.js pops them in instead of drawing them. */
.service_icon.is-brand svg{ width:1.25rem; height:1.25rem; fill:currentColor }

/* Seven services and a wide invitation cell make three rows on desktop, so the
   middle row needs notches top and bottom. Scoped to grids that ask for it. */
.grid_lined{ --cell-line:var(--line) }
@media (min-width:992px){
  .grid_lined.is-3.has-3-rows > :nth-child(4){ border-end-end-radius:var(--radius--frame) }
  .grid_lined.is-3.has-3-rows > :nth-child(5){ border-end-start-radius:var(--radius--frame); border-end-end-radius:var(--radius--frame) }
  .grid_lined.is-3.has-3-rows > :nth-child(6){ border-end-start-radius:var(--radius--frame) }
  .grid_lined.is-3.has-3-rows > :nth-child(7){ border-start-end-radius:var(--radius--frame) }
  .grid_lined.is-3.has-3-rows > :nth-child(8){ border-start-start-radius:var(--radius--frame) }
  .grid_lined.is-3 > .service_cta{ grid-column:span 2 }
}

/* The invitation cell: a dark panel inside the light grid, same family as the FAQ
   help card. Its border keeps the grid's own line colour. */
.grid_lined > .service_cta{
  --page:#000; --surface:#0A0A0A; --text:#FFFFFF; --muted:#A3A3A3; --brand-ink:#FFFFFF;
  --line:rgba(255,255,255,.14); --line-soft:rgba(255,255,255,.08);
  position:relative; isolation:isolate; overflow:hidden;
  display:flex; flex-direction:column; justify-content:space-between; gap:2rem; min-height:21rem;
  background:#0A0A0A; color:var(--text); border-color:var(--cell-line);
}
.service_cta::before, .service_cta::after{
  content:""; position:absolute; z-index:-1; pointer-events:none;
  inset-block-end:-14rem; inset-inline-end:-8rem; width:30rem; aspect-ratio:1; border-radius:50%;
}
.service_cta::before{
  background:var(--grain), radial-gradient(closest-side, color-mix(in srgb, var(--brand) 34%, transparent), transparent 72%);
  background-blend-mode:soft-light, normal; background-size:180px 180px, auto;
  -webkit-mask-image:radial-gradient(closest-side, #000, transparent 72%); mask-image:radial-gradient(closest-side, #000, transparent 72%);
}
.service_cta::after{
  background-image:radial-gradient(circle, color-mix(in srgb, var(--brand-ink) 70%, transparent) 1px, transparent 1.4px);
  background-size:14px 14px; opacity:.4;
  -webkit-mask-image:radial-gradient(closest-side, #000, transparent 62%); mask-image:radial-gradient(closest-side, #000, transparent 62%);
}
.service_cta .h3{ margin-block-start:1rem; max-width:24ch; font-size:clamp(1.375rem, 1.1rem + .8vw, 1.75rem); letter-spacing:-0.025em; line-height:1.2; text-wrap:balance }
.service_cta_actions{ display:flex; gap:.75rem; flex-wrap:wrap }

/* ============================ DARK PANELS, token fix + CTA gradient ====== */
/* --accent is declared on the section as var(--brand-ink), and a custom property
   resolves where it is declared: the light section's blue travelled into the dark
   panels even though they reset --brand-ink. Redeclaring it here makes it follow. */
.grid_lined > .service_cta, .faq_help{ --accent:var(--muted) }

/* The invitation panel: a mesh of the brand ramp rising from the bottom right,
   a pointer-following glow with grain, a fading halftone, and a hairline highlight
   on the top edge. motion.js moves --gx/--gy; without it the glow rests bottom right. */
.grid_lined > .service_cta{
  background:
    radial-gradient(120% 95% at 100% 100%, color-mix(in srgb, #5B3BD6 58%, transparent) 0%, transparent 58%),
    radial-gradient(70% 65% at 92% 8%, color-mix(in srgb, #8B63FF 26%, transparent) 0%, transparent 62%),
    radial-gradient(55% 60% at 0% 115%, color-mix(in srgb, #DCC6FF 14%, transparent) 0%, transparent 62%),
    #0A0A0A;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09);
}
.service_cta::before{
  inset:0; width:auto; aspect-ratio:auto; border-radius:inherit;
  background:
    var(--grain),
    radial-gradient(26rem circle at var(--gx, 80%) var(--gy, 78%), color-mix(in srgb, #B79BFF 34%, transparent), transparent 62%);
  background-blend-mode:soft-light, normal; background-size:180px 180px, auto;
  -webkit-mask-image:none; mask-image:none;
}
.service_cta::after{
  inset:0; width:auto; aspect-ratio:auto; border-radius:inherit; opacity:.45;
  background-size:14px 14px;
  -webkit-mask-image:radial-gradient(60% 75% at 100% 100%, #000 0%, transparent 70%);
          mask-image:radial-gradient(60% 75% at 100% 100%, #000 0%, transparent 70%);
}
.service_cta .h3{ max-width:26ch; font-size:clamp(1.5rem, 1.1rem + 1vw, 2rem); letter-spacing:-0.03em; line-height:1.15 }

/* ============================ PROCESS, stacking cards ==================== */
/* Four step cards that pin under the header one after another, each settling a
   little lower so the edges of earlier cards stay visible. motion.js scales and
   dims the card underneath as the next one slides over it. On small screens the
   cards simply stack. The last card is the dark finale, same family as the
   invitation panel. */
.process_stack{ list-style:none; padding:0; margin:0; display:grid; gap:1.5rem }
/* its margin reset above was cancelling the shared gap under section headers */
.section_header + .process_stack{ margin-block-start:3.5rem }
.process_card{
  --i:0;
  position:sticky; inset-block-start:calc(4.25rem + 2rem + var(--i) * 1.25rem);
  transform-origin:50% 0;
  border:1px solid var(--line); border-radius:1.25rem; background:var(--surface);
  box-shadow:0 1px 2px rgba(0,0,0,.04), 0 24px 48px -32px rgba(0,0,0,.25);
  padding:clamp(1.75rem, 1rem + 2vw, 2.75rem);
}
.process_card_head{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding-block-end:1.25rem; border-block-end:1px solid var(--line-soft) }
.process_card_step{ font-family:var(--font-mono); font-size:.75rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted) }
.process_card_dots{ display:flex; gap:.375rem }
.process_card_dots i{ width:1.75rem; height:3px; border-radius:99px; background:var(--line) }
.process_card_dots i.is-on{ background:var(--brand-ink) }
.process_card_body{ display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:2rem clamp(2rem, 5vw, 5rem); padding-block-start:clamp(1.75rem, 1rem + 1.5vw, 2.5rem) }
.process_card_num{
  display:block; font-size:clamp(4rem, 2rem + 6vw, 7.5rem); line-height:.85; font-weight:500; letter-spacing:-0.06em;
  background-image:linear-gradient(180deg, var(--text) 0%, color-mix(in srgb, var(--text) 30%, var(--surface)) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.process_card_title{ margin-block-start:1.5rem; font-size:clamp(1.5rem, 1.2rem + .9vw, 2rem); font-weight:500; letter-spacing:-0.03em; line-height:1.15 }
.process_card_text{ margin-block-start:.75rem; color:var(--muted); max-width:38ch; line-height:1.6; text-wrap:pretty }
.process_card_side{ display:flex; flex-direction:column; gap:1.5rem; align-self:end }
.process_card_label, .process_card_outcome span{ font-family:var(--font-mono); font-size:.6875rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted) }
.process_card_list{ list-style:none; padding:0; margin:.75rem 0 0; display:grid; border-block-start:1px solid var(--line-soft) }
.process_card_list li{ display:flex; align-items:center; gap:.75rem; padding-block:.75rem; border-block-end:1px solid var(--line-soft) }
.process_card_list li::before{ content:""; flex:none; width:.5rem; height:.5rem; border-radius:99px; border:1.5px solid var(--brand-ink) }
.process_card_outcome{ padding:1rem 1.125rem; border-radius:.875rem; background:color-mix(in srgb, var(--text) 4%, transparent); border:1px solid var(--line-soft) }
.process_card_outcome p{ margin-block-start:.375rem; font-weight:500; letter-spacing:-0.01em; line-height:1.45 }

/* the finale card */
.process_card.is-finale{
  --page:#000; --surface:#0A0A0A; --text:#FFFFFF; --muted:#A3A3A3; --brand-ink:#FFFFFF; --accent:var(--muted);
  --line:rgba(255,255,255,.12); --line-soft:rgba(255,255,255,.08);
  color:var(--text); border-color:#0A0A0A; overflow:hidden; isolation:isolate;
  background:
    radial-gradient(90% 90% at 100% 100%, color-mix(in srgb, #5B3BD6 50%, transparent) 0%, transparent 60%),
    radial-gradient(60% 60% at 90% 0%, color-mix(in srgb, #8B63FF 22%, transparent) 0%, transparent 62%),
    #0A0A0A;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09), 0 32px 64px -32px rgba(10,10,11,.55);
}
.process_card.is-finale::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; border-radius:inherit; opacity:.4;
  background-image:var(--grain), radial-gradient(circle, color-mix(in srgb, #B79BFF 70%, transparent) 1px, transparent 1.4px);
  background-size:180px 180px, 14px 14px; background-blend-mode:soft-light, normal;
  -webkit-mask-image:radial-gradient(55% 70% at 100% 100%, #000 0%, transparent 70%); mask-image:radial-gradient(55% 70% at 100% 100%, #000 0%, transparent 70%);
}

@media (max-width:767px){
  .process_card{ position:relative; inset-block-start:auto }
  .process_card_body{ grid-template-columns:1fr }
  .process_card_side{ align-self:stretch }
}

/* ============================ INVITATION PANEL, eclipse ================== */
/* A fixed composition, no pointer tracking: a dark disc rising from the bottom
   right with a lit lilac rim and the brand ramp glowing outward around it, film
   grain over the whole panel, and a slow breathing drift. Reduced motion stops the
   drift through the site-wide rule. */
.grid_lined > .service_cta{
  background:
    radial-gradient(75% 60% at 0% 0%, color-mix(in srgb, #B79BFF 8%, transparent), transparent 62%),
    linear-gradient(180deg, #0B0B0E 0%, #08070D 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.service_cta::before{
  content:""; position:absolute; z-index:-1; pointer-events:none;
  inset:auto; inset-inline-end:-12rem; inset-block-end:-35rem; width:46rem; height:46rem; aspect-ratio:auto;
  border-radius:50%; opacity:1;
  background:radial-gradient(closest-side, #07060C 90%, color-mix(in srgb, #B79BFF 55%, #07060C) 97.5%, #EBD3FF 99.4%, transparent 100%);
  background-blend-mode:normal; background-size:auto;
  -webkit-mask-image:none; mask-image:none;
  box-shadow:
    0 -4px 24px 0 color-mix(in srgb, #CDB2FF 55%, transparent),
    0 -24px 90px 6px color-mix(in srgb, #8B63FF 42%, transparent),
    0 -60px 220px 40px color-mix(in srgb, #5B3BD6 45%, transparent);
  animation:cta-eclipse 9s ease-in-out infinite;
}
.service_cta::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  width:auto; height:auto; aspect-ratio:auto; border-radius:inherit; opacity:.55;
  background-image:var(--grain); background-size:180px 180px; background-blend-mode:normal;
  mix-blend-mode:soft-light;
  -webkit-mask-image:none; mask-image:none;
}
@keyframes cta-eclipse{
  0%, 100%{ transform:translate3d(0, 0, 0) scale(1); filter:brightness(1) }
  50%{ transform:translate3d(-.75rem, -.625rem, 0) scale(1.025); filter:brightness(1.15) }
}
/* the secondary button can sit over the rim: give it a frosted ground */
.service_cta .button.is-secondary:not(:hover){
  background-color:color-mix(in srgb, #0A0A0A 55%, transparent);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
}

/* Eclipse, second pass: the disc is a lit planet, not a black hole. Layers, top to
   bottom: a thin bright rim, a violet glow just inside it, a lilac haze along the
   top of the curve, and a body that fades from lit violet to deep indigo. Only the
   top fifth of the disc is ever visible, so the body's stops sit near its top. The
   outer glow is centred (no offset), which removes the dark hairline outside the rim. */
.service_cta::before{
  background:
    radial-gradient(closest-side, transparent 97.4%, #F3E2FF 99.3%, transparent 100%),
    radial-gradient(closest-side, transparent 78%, color-mix(in srgb, #8B63FF 45%, transparent) 94%, color-mix(in srgb, #D2A6FF 85%, transparent) 98.6%, transparent 99.4%),
    radial-gradient(55% 16% at 50% 2%, color-mix(in srgb, #C79BFF 45%, transparent), transparent 72%),
    linear-gradient(180deg, #5B3BD6 0%, #3A22A0 5%, #22146A 12%, #140C3E 21%, #0D0927 34%, #0B0820 100%);
  box-shadow:
    0 0 22px 2px color-mix(in srgb, #CDB2FF 50%, transparent),
    0 0 90px 12px color-mix(in srgb, #8B63FF 40%, transparent),
    0 0 220px 50px color-mix(in srgb, #5B3BD6 40%, transparent);
}

/* Eclipse, third pass: depth and atmosphere.
   - the planet gets sphere shading (a highlight top right, a soft shadow on its
     left) and a faint orbit ring drawn with outline, which follows the radius
   - a sky layer behind the planet holds a sparse starfield, a few stars twinkling,
     and a small moon in the empty top-right corner that floats slowly
   - the moon hides when the card is too narrow to keep it clear of the headline */
.grid_lined > .service_cta{ container-type:inline-size }
.service_cta::before{
  background:
    radial-gradient(closest-side, transparent 97.4%, #F3E2FF 99.3%, transparent 100%),
    radial-gradient(closest-side, transparent 78%, color-mix(in srgb, #8B63FF 45%, transparent) 94%, color-mix(in srgb, #D2A6FF 85%, transparent) 98.6%, transparent 99.4%),
    radial-gradient(38% 12% at 64% 3%, rgba(255,255,255,.22), transparent 70%),
    radial-gradient(55% 16% at 50% 2%, color-mix(in srgb, #C79BFF 45%, transparent), transparent 72%),
    radial-gradient(70% 40% at 18% 14%, rgba(6,4,18,.55), transparent 62%),
    linear-gradient(180deg, #5B3BD6 0%, #3A22A0 5%, #22146A 12%, #140C3E 21%, #0D0927 34%, #0B0820 100%);
  outline:1px solid color-mix(in srgb, #CDB2FF 20%, transparent); outline-offset:1.75rem;
}

.service_cta_sky{
  position:absolute; inset:0; z-index:-2; pointer-events:none; border-radius:inherit;
  background-image:
    radial-gradient(1.4px 1.4px at 58% 14%, rgba(255,255,255,.9), transparent),
    radial-gradient(1px 1px at 71% 9%, rgba(255,255,255,.7), transparent),
    radial-gradient(1.2px 1.2px at 83% 22%, rgba(255,255,255,.85), transparent),
    radial-gradient(1px 1px at 92% 11%, rgba(255,255,255,.6), transparent),
    radial-gradient(1.6px 1.6px at 66% 31%, rgba(255,255,255,.75), transparent),
    radial-gradient(1px 1px at 77% 40%, rgba(255,255,255,.6), transparent),
    radial-gradient(1.2px 1.2px at 95% 34%, rgba(255,255,255,.7), transparent),
    radial-gradient(1px 1px at 52% 26%, rgba(255,255,255,.45), transparent),
    radial-gradient(1px 1px at 88% 52%, rgba(255,255,255,.5), transparent);
  -webkit-mask-image:linear-gradient(90deg, transparent 38%, #000 62%); mask-image:linear-gradient(90deg, transparent 38%, #000 62%);
}
/* a second set that twinkles */
.service_cta_sky::after{
  content:""; position:absolute; inset:0;
  background-image:
    radial-gradient(1.8px 1.8px at 74% 18%, rgba(255,255,255,.95), transparent),
    radial-gradient(1.4px 1.4px at 61% 44%, rgba(255,255,255,.9), transparent),
    radial-gradient(1.6px 1.6px at 89% 28%, rgba(255,255,255,.9), transparent);
  animation:cta-twinkle 5.5s ease-in-out infinite;
}
/* the moon */
.service_cta_sky::before{
  content:""; position:absolute; inset-block-start:15%; inset-inline-end:13%;
  width:3rem; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle at 34% 30%, #F8EEFF 0%, #D2ADFF 30%, #8A5AF2 68%, #3C25A6 100%);
  box-shadow:0 0 22px 3px color-mix(in srgb, #C9A2FF 45%, transparent), 0 0 70px 18px color-mix(in srgb, #7B4CF0 25%, transparent);
  animation:cta-moon 11s ease-in-out infinite;
}
@container (max-width: 40rem){ .service_cta_sky::before{ display:none } }
@keyframes cta-twinkle{ 0%, 100%{ opacity:.25 } 50%{ opacity:1 } }
@keyframes cta-moon{ 0%, 100%{ transform:translate3d(0, 0, 0) } 50%{ transform:translate3d(-.375rem, .625rem, 0) } }
/* narrow cards: the headline spans the width, so the stars step back */
@container (max-width: 40rem){ .service_cta_sky{ opacity:.5 } }

/* ============================ PALETTE v2: stars replace dot grids ======== */
.footer_cta::after, .faq_help::after, .process_card.is-finale::after{
  background-image:var(--stars); background-size:auto; opacity:.9;
}
.process_card.is-finale::after{ background-image:var(--grain), var(--stars); background-size:180px 180px, auto }

/* Hero sky spacing: the proof row sat 16px above the rim, inside the glow. More room
   under the content and the planet a touch lower. */
.hero{ padding-block-end:13.5rem }
.hero_planet{ inset-block-start:calc(100% - 10rem) }
@media (max-width:767px){
  .hero{ padding-block-end:10rem }
  .hero_planet{ inset-block-start:calc(100% - 6rem) }
}

/* ============================ RESTRAINT: black, white, a little violet ===== */
/* Primary buttons are solid ink: white on dark, black on light. */
.button.is-brand{ background-image:none; background-color:var(--text); color:var(--page); border-color:var(--text) }
.button.is-brand:hover{
  filter:none; translate:0 -1px;
  background-color:color-mix(in srgb, var(--text) 88%, var(--page)); border-color:color-mix(in srgb, var(--text) 88%, var(--page));
  box-shadow:0 12px 28px -16px color-mix(in srgb, var(--text) 50%, transparent);
}
.button.is-brand:active{ translate:0 0; box-shadow:none }
/* decorative glows removed; the service spotlight and field focus turn neutral */
.contact > .founder::before, .faq_help::before, .footer_cta::before{ display:none }
.service_cell::before{ background:radial-gradient(22rem circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--text) 5%, transparent), transparent 65%) }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible{
  background-color:color-mix(in srgb, var(--surface), var(--text) 3%);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--text) 12%, transparent), inset 0 1px 0 color-mix(in srgb, var(--text) 5%, transparent);
}
/* the last process card: a clean black card with a faint white lift */
.process_card.is-finale{ background:radial-gradient(70% 80% at 100% 0%, rgba(255,255,255,.07), transparent 60%), #0A0A0A; border-color:#0A0A0A }
/* the project cursor: a white pill */
.cursor_pill{ background-image:none; background-color:#FFFFFF; color:#000000; border-color:#FFFFFF; box-shadow:0 14px 34px -14px rgba(0,0,0,.6) }

/* ============================ RESTRAINT, pass 2: gradients and hovers ===== */
/* Brand-colour gradients live in two places only: the hero planet and the
   invitation planet. Neutral black-and-white gradients (headline fades, step
   numbers, the soft white lift on the last process card, the grey hover spotlight
   on service cards) stay: they read premium, not loud. */
.grid_lined > .service_cta{ background:#0A0A0A }
.button.is-brand:hover{ box-shadow:none }
/* small quiet text that sat under half opacity */
.tab_count{ opacity:.8 }
.crumbs span, .card_meta span{ opacity:1 }
.error_code{ color:color-mix(in srgb, var(--text) 40%, var(--page)) }

/* Hovers that changed nothing, or dimmed the text, now underline or lift instead. */
.faq_help_email a, .card h3 a, .founder_details a{ text-decoration:underline; text-decoration-color:transparent; text-underline-offset:.25em; text-decoration-thickness:1px; transition:text-decoration-color .2s var(--ease), color .2s var(--ease) }
.faq_help_email a:hover, .card h3 a:hover, .founder_details a:hover{ color:var(--text); text-decoration-color:currentColor }
.prose a:hover{ text-decoration-color:currentColor }
.dropdown_panel a{ transition:background-color .18s var(--ease) }
.dropdown_panel a:hover{ background:color-mix(in srgb, var(--text) 7%, transparent) }
.dropdown_panel:not(.is-mega) a:hover span{ color:var(--text) }
.tab:hover{ border-color:color-mix(in srgb, var(--text) 35%, var(--line)) }
.tab[aria-pressed="true"]:hover{ border-color:var(--text) }
.work_card:hover .work_media{ border-color:color-mix(in srgb, var(--text) 30%, var(--line)) }

/* ============================ BUTTON HOVERS, invert ====================== */
/* One rule for every ground: a button swaps its fill and its ink on hover.
   Solid buttons (white on dark, black on light) become outlined in the page
   colour; outlined buttons fill solid. No grey in-between shades, no lift. */
.button:not(.is-secondary):not(.is-ghost):hover{
  background-color:var(--page); color:var(--text); border-color:var(--text);
  translate:0 0; box-shadow:none; filter:none;
}
.button:not(.is-secondary):not(.is-ghost):active{ background-color:color-mix(in srgb, var(--text) 10%, var(--page)) }
.button.is-secondary:hover{ background-color:var(--text); color:var(--page); border-color:var(--text) }
.button.is-secondary:active{ background-color:color-mix(in srgb, var(--text) 85%, var(--page)); border-color:color-mix(in srgb, var(--text) 85%, var(--page)) }

/* ============================ HEADING FADE, section headings ============= */
/* The payoff phrase of a section heading fades top to bottom, like the process
   step numbers. A left-to-right fade restarts on every wrapped line (SplitText
   gives each line its own copy of the span), which read as white-grey-white;
   a vertical fade looks identical on every line at any width. */
.text_fade{
  background-image:var(--grain), linear-gradient(180deg, color-mix(in srgb, var(--text) 86%, var(--page)) 0%, color-mix(in srgb, var(--text) 52%, var(--page)) 100%);
}

/* ============================ HEADING MEASURE ============================ */
/* Page heroes held headings to 44rem, so even short headings broke over three to
   five lines. The hero column is wider now (the intro keeps a readable measure),
   centred section headers get a little more room, and split headers use most of
   their column instead of stopping at 18 characters. text-wrap:balance keeps the
   lines even. */
.page_hero_inner{ max-width:64rem }
.page_hero p.lede{ max-width:40rem }
.section_header{ max-width:50rem }
.section_header.is-split .h2{ max-width:24ch }
.section_header .h2, .page_hero .h1, .faq_intro .h2, .footer_cta_line{ text-wrap:balance }

/* Small phones: one step down on display sizes so heroes land on three lines and
   section headings on two or three, instead of four and five. */
@media (max-width:480px){
  .h1{ font-size:2.25rem; letter-spacing:-0.035em }
  .hero .h1.hero_title{ font-size:2.625rem }
  .h2{ font-size:1.75rem }
  .feature_row .h2{ font-size:1.5rem; line-height:1.15 }
}

/* ============================ ONE CLOSING ASK PER PAGE =================== */
/* A page that already ends on the full enquiry form does not also need the shared
   closing band under it: the form is the call to action there. Everywhere else the
   closing band is the only one, so the section before it gets its floor back. */
main:has(.contact) .cta_section{ display:none }
main > section:not(.cta_section):has(+ .cta_section){ padding-block-end:var(--section--pad) }

/* ============================ TWO-LINE HEADINGS ========================== */
/* In page heroes and centred section headers the faded payoff phrase starts its own
   line, so a short heading reads as two deliberate lines instead of one long one,
   and a longer one still breaks at the phrase rather than mid-thought. Split
   headers and the FAQ column keep natural wrapping; their columns are narrow. */
.page_hero .h1 .text_fade,
.section_header:not(.is-split):not(.is-left) .h2 .text_fade{ display:block }

/* ============================ FOOTER SOCIAL, interactive ================= */
/* Each round button fills with ink from the side the pointer comes in on and
   drains out the side it leaves by (site.js feeds --fx/--fy). The icon rolls up
   and back in, the button and icon lean towards the pointer at different depths
   (motion.js), a small name tag rises above it, the other icons step back, and a
   press pushes the button in. Black and white only. */
.footer .footer_social li{ position:relative; display:flex }
.footer .footer_social a{
  position:relative; overflow:hidden; isolation:isolate;
  transition:color .45s cubic-bezier(.625,.05,0,1), border-color .45s var(--ease), opacity .35s var(--ease), scale .25s var(--ease);
}
.footer .footer_social a::before{
  content:""; position:absolute; z-index:-1; inset-inline-start:var(--fx, 50%); inset-block-start:var(--fy, 50%);
  width:300%; aspect-ratio:1; border-radius:50%; background:var(--text); pointer-events:none;
  translate:-50% -50%; scale:0; transition:scale .55s cubic-bezier(.625,.05,0,1);
}
.footer .footer_social a:hover, .footer .footer_social a:focus-visible{ background-color:transparent; translate:none; color:var(--page); border-color:var(--text) }
.footer .footer_social a:hover::before, .footer .footer_social a:focus-visible::before{ scale:1 }
.footer .footer_social a:active{ scale:.9 }
.footer .footer_social svg{ position:relative }
.footer .footer_social:has(a:hover) li:not(:hover) a{ opacity:.4 }
.social_tip{
  position:absolute; inset-inline-start:50%; inset-block-end:calc(100% + .75rem); z-index:3;
  padding:.375rem .625rem; border-radius:99px; background:var(--text); color:var(--page);
  font-family:var(--font-mono); font-size:.6875rem; line-height:1; letter-spacing:.02em; white-space:nowrap;
  opacity:0; translate:-50% .5rem; scale:.9; pointer-events:none;
  transition:opacity .25s var(--ease), translate .5s cubic-bezier(.625,.05,0,1), scale .5s cubic-bezier(.625,.05,0,1);
}
.social_tip::after{
  content:""; position:absolute; inset-inline-start:50%; inset-block-start:100%; width:.5rem; height:.5rem;
  background:inherit; border-radius:1px; translate:-50% -60%; rotate:45deg;
}
.footer .footer_social li:hover > .social_tip,
.footer .footer_social li:has(a:focus-visible) > .social_tip{ opacity:1; translate:-50% 0; scale:1 }
@media (hover:none){ .social_tip{ display:none } }

/* Social icons come from the Remix Icon logo set, drawn on a 24px grid with built-in
   padding, so they sit a touch larger than the old hand-drawn marks to keep weight. */
.footer .footer_social svg{ width:1.125rem; height:1.125rem }

/* ============================ PROCESS CARDS, detail ====================== */
/* The four dots read as a progress bar: every step is a track, and the steps you
   have reached carry a fill that motion.js draws in as the card arrives. */
.process_card_dots i{ position:relative; overflow:hidden; background:var(--line) }
.process_card_dots i.is-on{ background:var(--line) }
.process_card_dots i b{ display:block; height:100%; border-radius:inherit; background:var(--text); transform-origin:0 50%; scale:1 1 }
/* the step number rises out of a mask */
.process_card_num{ overflow:hidden }
.process_card_num_i{
  display:inline-block;
  background-image:linear-gradient(180deg, var(--text) 0%, color-mix(in srgb, var(--text) 30%, var(--surface)) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
/* the outcome card sits a step forward from the list above it */
.process_card_outcome{ position:relative; overflow:hidden }
.process_card_outcome::after{
  content:""; position:absolute; inset-block-start:0; inset-inline:0; height:1px;
  background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--text) 28%, transparent), transparent);
}
.process_card_list li{ transition:color .3s var(--ease) }
.process_card_list li::before{ transition:background-color .3s var(--ease), border-color .3s var(--ease) }
.process_card_list li:hover::before{ background-color:var(--text); border-color:var(--text) }

/* ============================ SPLIT HEADER, alignment =================== */
/* The paragraph sits on the heading's optical centre, so the pair stays balanced
   whatever the two run to in lines. Centring the boxes is not enough: the row is
   as tall as the eyebrow plus the heading, and the two blocks of type carry
   different amounts of air, so the column is nudged to put the middle of the
   paragraph's type on the middle of the heading's. Measured from the rendered
   type at 900 through 1920, where the two centres land within a pixel. */
.section_header.is-split{ align-items:center }
.section_header.is-split > div:last-child{
  padding-block-start:calc(.8125rem * 1.4 + .875rem - 13.6px); padding-block-end:0;
}
/* stacked, so there is no heading beside it to line up with */
@media (max-width:860px){ .section_header.is-split > div:last-child{ padding-block:0 } }

/* ============================ QUOTE CARDS =============================== */
/* One shape for every card: a quote mark watermark, the client, and a link to the
   case study when that client's project is on the site. */
.quote{ position:relative; overflow:hidden; transition:background-color .35s var(--ease) }
.quote::before{
  content:"\201C"; position:absolute; inset-block-start:-.34em; inset-inline-end:.5rem; z-index:0;
  font-size:6rem; line-height:1; pointer-events:none; color:color-mix(in srgb, var(--text) 8%, transparent);
  transition:color .35s var(--ease), translate .6s cubic-bezier(.625,.05,0,1);
}
.quote > *{ position:relative; z-index:1 }
.quote:hover{ background-color:var(--surface) }
.quote:hover::before{ color:color-mix(in srgb, var(--text) 15%, transparent); translate:0 .25rem }
.quote_link{
  display:inline-flex; align-items:center; gap:.375rem; margin-block-start:1.25rem;
  font-family:var(--font-mono); font-size:.6875rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted); transition:color .2s var(--ease);
}
.quote_link .arrow{ display:inline-block; transition:translate .2s var(--ease) }
.quote:hover .quote_link{ color:var(--text) }
.quote:hover .quote_link .arrow{ translate:3px 0 }

/* the work card title underlines itself while the card is hovered */

/* The mask that lets the step number rise was clipping the last glyph's right-hand
   side bearing (the 3 in "03" looked shaved), so the mask carries side padding. */
.process_card_num{ padding:.05em .16em .22em; margin:-.05em -.16em -.22em }

/* ============================ SERVICE CARDS, detail ===================== */
/* The title underlines itself while the card is hovered, and the tags sharpen with
   it, so the whole cell reacts as one object rather than a set of parts. */
.service_cell .service_tags .tag{ transition:border-color .3s var(--ease), color .3s var(--ease) }
.service_cell:hover .service_tags .tag{ border-color:color-mix(in srgb, var(--text) 26%, var(--line)); color:var(--text) }

/* ============================ FAQ, detail =============================== */
/* A whole row answers the pointer, not just the question inside it. */
.faq summary{ transition:background-color .3s var(--ease) }
.faq summary:hover{ background-color:color-mix(in srgb, var(--text) 3%, transparent) }
.faq details[open]:not(.is-closing) .faq_q{ color:var(--text) }

/* ============================ HERO PROOF ROW ============================ */
/* The avatar stack opens a little under the pointer and each face lifts in turn,
   so the proof row rewards a look without asking for a click. */
.avatars img{ transition:translate .4s var(--ease), border-color .3s var(--ease) }
.avatars:hover img{ translate:0 -3px; border-color:color-mix(in srgb, var(--text) 35%, var(--page)) }
.avatars:hover img:nth-child(2){ transition-delay:.04s }
.avatars:hover img:nth-child(3){ transition-delay:.08s }
.avatars:hover img:nth-child(4){ transition-delay:.12s }

/* The number is painted by a gradient clipped to its own text box. The tight
   letter-spacing lets the last digit's ink sit past that box, so its right edge went
   unpainted and read as cut. Padding widens the painted box; the negative margin
   keeps the layout identical. */
.process_card_num_i{ padding-inline-end:.14em; margin-inline-end:-.14em }

/* ============================ MOBILE PASS =============================== */
/* Long unbroken titles (blog headlines full of hyphenated words) pushed past their
   card on a phone. They wrap inside the box now. */
.card h3, .card h3 a, .work_card .h3, .quote p, .prose h2, .prose h3, .prose p, .faq_q{ overflow-wrap:break-word }

@media (max-width:767px){
  /* mono labels sat at 11px, which is below comfortable reading on a phone */
  .founder_label, .founder_details dt, .form_group, .footer_facts dt, .footer_label, .footer_title,
  .field label .hint, .tab_count, .placeholder_tag, .process_card_label, .process_card_outcome span,
  .service_more, .faq_help_email > span, .quote_link, .quote_badge, .meta_row dt, .field_help{ font-size:.75rem }
  /* tap targets: footer and detail links were 23 to 29px tall */
  .footer a:not(.button){ padding-block:.625rem }
  .footer .footer_facts a, .founder_details a, .faq_help_email a{ display:inline-block; padding-block:.375rem }
  .header_logo{ display:inline-flex; align-items:center; min-height:2.75rem }
  .tab{ height:2.5rem }
  /* the bottom row wraps instead of pushing the last link past the edge */
  .footer_bottom{ gap:1rem }
  .footer_bottom_end{ flex-wrap:wrap; gap:1rem }
}

/* The blog card grid set its column count after the responsive rules, so it stayed
   three columns on a phone and squeezed titles to one word per line. */
@media (max-width:991px){ .card_grid{ --cols:2 } }
@media (max-width:767px){ .card_grid{ --cols:1 } }
@media (max-width:767px){ .reach p a{ display:inline-block; padding-block:.375rem } }

/* ============================ CARD TITLE LINE =========================== */
/* The title's underline draws in from the left on hover and retracts to the right on
   leave, the same movement as the nav and footer links, instead of switching on. */
.service_cell .service_link, .work_card .work_link{ position:relative; text-decoration:none }
.service_cell .service_link::before, .work_card .work_link::before{
  content:""; position:absolute; inset-inline:0; inset-block-end:-.12em; height:1px;
  background:currentColor; pointer-events:none;
  transform:scaleX(0); transform-origin:100% 50%;
  transition:transform .5s cubic-bezier(.625,.05,0,1);
}
.service_cell:hover .service_link::before, .service_cell:focus-within .service_link::before,
.work_card:hover .work_link::before, .work_card:focus-within .work_link::before{ transform:scaleX(1); transform-origin:0 50% }

/* ============================ TABLET PASS =============================== */
/* Cards dropped to a single column below 768, so a portrait tablet showed one card
   per row with a lot of empty space. Two columns now hold from 640 up, and the
   invitation panel spans the pair so it keeps its shape. Blog cards, whose titles
   are long, stay two-up until there is room for three. */
@media (min-width:640px) and (max-width:991px){
  .grid_lined, .work_grid, .card_grid, .quote_grid{ --cols:2 }
  .grid_lined.is-3 > .service_cta{ grid-column:1 / -1 }
}
@media (max-width:639px){
  .grid_lined, .work_grid, .card_grid, .quote_grid{ --cols:1 }
}
@media (min-width:992px) and (max-width:1199px){
  .card_grid{ --cols:2 }
}

/* A cover that fails to load (the file is not in yet) falls back to the pending
   placeholder instead of showing a broken image. site.js flags it with is-missing. */
.work_media.has-fallback{ position:relative }
.work_media.has-fallback .placeholder_image{ display:none; border:0; border-radius:0 }
.work_media.is-missing img{ display:none }
.work_media.is-missing .placeholder_image{ display:grid }

/* ============================ ARTICLE READING =========================== */
/* Long-form posts get a comfortable reading measure: slightly larger body text, more
   line spacing, a lead paragraph in full ink, and a hairline that opens each section
   so a 3,000 word guide reads in chapters rather than one wall. */
.article_body .prose{ font-size:1.0625rem; line-height:1.75 }
.article_body .prose > p:first-of-type{ font-size:1.1875rem; line-height:1.6; color:var(--text) }
.article_body .prose h2{
  margin-block-start:3.5rem; padding-block-start:1.75rem; border-block-start:1px solid var(--line);
  font-size:1.75rem; letter-spacing:-0.028em;
}
.article_body .prose h2:first-child{ margin-block-start:0; padding-block-start:0; border-block-start:0 }
.article_body .prose h3{ margin-block-start:2.5rem }
.article_body .prose ul, .article_body .prose ol{ gap:.625rem }
.article_body .prose li{ padding-inline-start:.25rem }
.article_body .prose blockquote{ margin-block:2rem; padding-block:.25rem; font-size:1.125rem; line-height:1.6 }

/* The contents rail: the section you are reading is marked, the rest step back. */
.toc{ border-inline-start:1px solid var(--line); padding-inline-start:1.125rem }
.toc .eyebrow{ margin-inline-start:0 }
.toc a{ position:relative; transition:color .25s var(--ease) }
.toc a::before{
  content:""; position:absolute; inset-inline-start:-1.1875rem; inset-block:.1em auto; width:2px; height:1.1em;
  background:var(--text); scale:1 0; transform-origin:50% 0;
  transition:scale .35s cubic-bezier(.625,.05,0,1);
}
.toc a.is-current{ color:var(--text) }
.toc a.is-current::before{ scale:1 1 }
@media (max-width:991px){
  .toc{ border-inline-start:0; padding-inline-start:0 }
  .toc a::before{ display:none }
}

/* ---- Enquiry form states -------------------------------------------------
   The error text sits under the field that caused it and is wired to that field
   with aria-describedby, so a screen reader hears the reason rather than only
   "invalid". Colour is never the only signal: the message itself carries it. */
.field_error{ font-size:.8125rem; color:var(--danger, #FF8A8A); margin-block-start:.375rem }
.field :is(input, select, textarea)[aria-invalid="true"]{ border-color:var(--danger, #FF8A8A) }
.form_alert{ grid-column:1 / -1; font-size:.875rem; color:var(--danger, #FF8A8A);
  border:1px solid color-mix(in srgb, var(--danger, #FF8A8A) 45%, transparent);
  border-radius:.625rem; padding:.75rem .875rem; margin:0 }
.form_done{ border:1px solid var(--line); border-radius:var(--radius--frame); padding:var(--cell--pad);
  display:grid; gap:.5rem; outline:none }
.form_done a{ color:var(--text); text-decoration:underline; text-underline-offset:3px }
:root{ --danger:#FF8A8A }
:root[data-theme="light"], html.is-light{ --danger:#B42318 }
@media (prefers-color-scheme: light){ :root:not([data-theme="dark"]){ --danger:#B42318 } }

/* ---- Blog imagery -------------------------------------------------------
   Real covers from the live blog replace the placeholders. The article cover is
   the page's largest element, so it loads eagerly with high fetch priority, and
   every image carries its own width and height so nothing shifts as it arrives. */
img.article_cover{ display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover;
  border:1px solid var(--line); border-radius:var(--radius--frame, 1rem); background:var(--surface);
  margin-block-start:2.5rem }
.card_media img.is-cover{ aspect-ratio:16/9; object-position:center }
.prose figure{ margin-block:2.25rem }
.prose figure img{ display:block; width:100%; height:auto; margin-block:0; border:1px solid var(--line) }

/* ---- Service pages: fit lists and further reading ------------------------ */
.fit_list{ display:grid; gap:.625rem; margin-block-start:1rem; padding-inline-start:1.1rem; list-style:disc }
.further_reading{ max-width:42rem; margin-inline:auto }
.further_reading ul{ display:grid; gap:.75rem; margin-block-start:1rem }
.further_reading a{ color:var(--text); text-decoration:underline; text-decoration-color:color-mix(in srgb, var(--text) 30%, transparent); text-underline-offset:4px }
.further_reading a:hover{ text-decoration-color:var(--text) }
.hub_list{ display:grid; gap:.625rem; margin-block-start:1.25rem; font-size:.9375rem }
.hub_list a{ color:var(--text); text-decoration:underline; text-decoration-color:color-mix(in srgb, var(--text) 25%, transparent); text-underline-offset:4px; line-height:1.4 }
.hub_list a:hover{ text-decoration-color:var(--text) }

/* ---- Navigation dropdowns (Services and Resources) ------------------------
   Both panels hang from the header rather than from their button, so they are
   centred and can never run off either edge. Three things keep the pointer from
   losing the menu on the way down: the panel starts flush under the header, an
   invisible bridge covers the gap between the button and the panel, and site.js
   waits a moment before closing. Icons come from /images/nav-icons.svg. */
.header_inner{ position:relative }
.dropdown:has(.is-mega){ position:static }
.dropdown_panel.is-mega{
  display:grid; left:50%; translate:-50% 0; top:100%;
  padding:1rem; border-radius:1.25rem; gap:.25rem 1rem;
  background:var(--surface);
  border:1px solid var(--line);
  box-shadow:inset 0 1px 0 color-mix(in srgb, var(--text) 6%, transparent), 0 40px 80px -24px rgba(0,0,0,.75);
  opacity:0; visibility:hidden; pointer-events:none;
  transform:translate3d(0, -.5rem, 0);
  /* promoted ahead of time, so the first frame of the open does not stutter */
  will-change:opacity, transform;
  /* closing is quicker than opening and never moves: it just gets out of the way */
  transition:opacity .16s ease, transform .16s ease, visibility 0s linear .16s;
}
.dropdown[data-open="true"] .dropdown_panel.is-mega{
  display:grid; opacity:1; visibility:visible; pointer-events:auto; transform:translate3d(0, 0, 0);
  /* a soft ease-out: fast at first, settling gently, no scale (scaling text makes it shimmer) */
  transition:opacity .24s ease-out, transform .42s cubic-bezier(.22, 1, .36, 1), visibility 0s;
}
/* the bridge: an invisible strip above the panel, as wide as the panel, tall
   enough to reach up past the bottom of the nav button */
.dropdown_panel.is-mega::before{ content:""; position:absolute; inset-inline:0; bottom:100%; height:1.5rem }
.dropdown_panel.is-services{ width:min(75rem, calc(100vw - 2rem)); grid-template-columns:repeat(3, minmax(0,1fr)) minmax(0,14.5rem); column-gap:1rem }
.dropdown_panel.is-resources{ width:min(58rem, calc(100vw - 2rem)); grid-template-columns:repeat(2, minmax(0,1fr)) minmax(0,16.5rem) }

.mega_col{ display:grid; align-content:start; gap:.125rem; min-width:0 }
.mega_col.is-two{ grid-template-columns:repeat(2, minmax(0,1fr)); column-gap:.5rem }
.mega_col.is-two .mega_head{ grid-column:1 / -1 }
/* columns read as groups: a hairline between them, headings with a rule below */
.dropdown_panel.is-mega > .mega_col + .mega_col{ border-inline-start:1px solid var(--line); padding-inline-start:1rem }
.mega_head{ font-family:var(--font-mono); font-size:.6875rem; text-transform:uppercase; letter-spacing:.06em;
  color:var(--muted); padding:.5rem .625rem .625rem; margin-block-end:.25rem; border-block-end:1px solid var(--line) }

/* one item: icon tile, title and a line, and an arrow that arrives on hover */
.dropdown_panel .mega_item{
  position:relative; display:grid; grid-template-columns:2.5rem minmax(0,1fr); align-items:center; gap:.875rem;
  height:auto; min-height:3.75rem; padding:.625rem 1.5rem .625rem .625rem; border-radius:.875rem; color:var(--text); background:none;
  opacity:0; transform:translate3d(0, .25rem, 0);
  transition:background-color .2s var(--ease), opacity .12s ease, transform .12s ease;
}
.dropdown[data-open="true"] .mega_item{ opacity:1; transform:translate3d(0, 0, 0);
  transition:background-color .2s var(--ease), opacity .32s ease-out, transform .45s cubic-bezier(.22, 1, .36, 1);
  transition-delay:0s, calc(var(--i, 0) * 14ms + 50ms), calc(var(--i, 0) * 14ms + 50ms) }
/* moving straight from one open menu to the other swaps the panels at once,
   instead of fading one out over the other */
.header.is-switching .dropdown_panel.is-mega, .header.is-switching .mega_item{ transition:none !important }
.mega_icon{ display:grid; place-items:center; width:2.5rem; height:2.5rem; border-radius:.75rem;
  border:1px solid var(--line); background:color-mix(in srgb, var(--text) 4%, transparent); color:var(--text);
  transition:background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease) }
.mega_icon svg{ width:1.25rem; height:1.25rem }
.mega_text{ display:grid; gap:.125rem; min-width:0 }
.mega_title{ font-size:.875rem; font-weight:500; line-height:1.3 }
.mega_desc{ font-size:.75rem; line-height:1.45; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:color .2s var(--ease) }
.mega_go{ position:absolute; top:50%; margin-top:-.5rem; right:.5rem; display:grid; place-items:center; color:var(--muted); opacity:0; transform:translate(-.25rem, .25rem);
  transition:opacity .25s var(--ease), transform .4s cubic-bezier(.625,.05,0,1) }
.mega_go svg{ width:1rem; height:1rem }
.dropdown_panel .mega_item:hover, .dropdown_panel .mega_item:focus-visible{ background:color-mix(in srgb, var(--text) 5%, transparent) }
.mega_item:hover .mega_icon, .mega_item:focus-visible .mega_icon{ background:var(--text); color:var(--page); border-color:var(--text) }
.mega_item:hover .mega_desc, .mega_item:focus-visible .mega_desc{ color:var(--text) }
.mega_item:hover .mega_go, .mega_item:focus-visible .mega_go{ opacity:1; transform:none; color:var(--text) }

/* the discovery call card: the site's own night sky and planet */
.dropdown_panel .mega_promo{
  grid-column:4; grid-row:1 / span 2; position:relative; overflow:hidden; isolation:isolate;
  display:flex; flex-direction:column; align-items:stretch; justify-content:space-between; gap:1.5rem;
  height:auto; min-height:20rem; padding:1.375rem; border-radius:1rem; text-align:left;
  border:1px solid var(--line); background:#000; color:#fff;
  transition:border-color .3s var(--ease);
}
.mega_promo_sky{ position:absolute; inset:0; z-index:-1; background-image:var(--stars); opacity:.9 }
.mega_promo_sky::after{
  content:""; position:absolute; left:50%; top:48%; translate:-50% 0;
  width:34rem; aspect-ratio:1; border-radius:50%;
  background:
    radial-gradient(closest-side, transparent 98.4%, #F3E8FF 99.3%, transparent 100%),
    radial-gradient(closest-side, transparent 88%, color-mix(in srgb, #8B63FF 40%, transparent) 96.5%, color-mix(in srgb, #CDB2FF 80%, transparent) 99%, transparent 99.6%),
    linear-gradient(180deg, #5B3BD6 0%, #3E26A8 3%, #26166F 7%, #170D45 12%, #000 24%);
  box-shadow:0 0 30px 3px color-mix(in srgb, #CDB2FF 40%, transparent), 0 0 110px 22px color-mix(in srgb, #8B63FF 30%, transparent);
  translate:-50% var(--rise, 0rem);
  transition:translate 1.1s cubic-bezier(.625,.05,0,1);
}
.dropdown_panel .mega_promo:hover{ border-color:color-mix(in srgb, #CDB2FF 35%, transparent); background:#000 }
.mega_promo:hover .mega_promo_sky::after{ translate:-50% calc(var(--rise, 0rem) - 1.25rem) }
.mega_promo_copy{ display:grid; gap:.5rem }
.mega_promo_eyebrow{ font-family:var(--font-mono); font-size:.6875rem; text-transform:uppercase; letter-spacing:.06em; color:rgba(255,255,255,.62) }
.mega_promo_title{ font-size:1.375rem; line-height:1.15; font-weight:500; letter-spacing:-.01em; color:#fff; text-wrap:balance }
.mega_promo_text{ font-size:.8125rem; line-height:1.5; color:rgba(255,255,255,.66) }
.mega_promo_link{ display:inline-flex; align-items:center; gap:.375rem; margin-block-start:.5rem; font-size:.875rem; color:#fff }
.mega_promo_link svg{ width:1rem; height:1rem; transition:transform .4s cubic-bezier(.625,.05,0,1) }
.mega_promo:hover .mega_promo_link svg{ transform:translate(.125rem, -.125rem) }

.mega_foot{ grid-column:1 / 4; display:flex; align-items:center; justify-content:space-between; gap:1rem;
  margin-block-start:.5rem; padding:.875rem .625rem 0; border-top:1px solid var(--line); font-size:.8125rem; color:var(--muted) }
.mega_foot p{ margin:0 }
.mega_foot.is-resources{ grid-column:1 / 3; grid-row:2; align-self:end; justify-content:flex-start }
.dropdown_panel.is-resources .yt_card{ grid-column:3; grid-row:1 / span 2 }
.mega_foot_label{ font-family:var(--font-mono); font-size:.6875rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted) }
.dropdown_panel .mega_foot a{ display:inline; height:auto; padding:0; color:var(--text); background:none }
.dropdown_panel .mega_foot a:hover{ background:none; text-decoration:underline; text-underline-offset:3px }
.dropdown_panel .mega_all{ display:inline-flex; gap:.375rem; align-items:center }

/* the YouTube card in Resources: designed as a small player, not a screenshot.
   The frame is the site's own night sky; titles and durations are real videos. */
.dropdown_panel .yt_card{
  grid-column:3; grid-row:1 / span 2; display:flex; flex-direction:column; gap:.875rem;
  padding:.75rem; border:1px solid var(--line); border-radius:1rem; background:var(--page);
}
.dropdown_panel .yt_player{
  position:relative; display:block; height:auto; padding:0; aspect-ratio:16/9; overflow:hidden; isolation:isolate;
  border-radius:.75rem; border:1px solid var(--line); background:#000; color:#fff;
}
.dropdown_panel .yt_player:hover{ background:#000 }
.yt_sky{ position:absolute; inset:0; z-index:-1; background-image:var(--stars) }
.yt_sky::after{
  content:""; position:absolute; left:50%; top:calc(100% - 2.75rem); translate:-50% 0; width:24rem; aspect-ratio:1; border-radius:50%;
  background:
    radial-gradient(closest-side, transparent 98.2%, #F3E8FF 99.2%, transparent 100%),
    radial-gradient(closest-side, transparent 88%, color-mix(in srgb, #8B63FF 40%, transparent) 96.5%, color-mix(in srgb, #CDB2FF 80%, transparent) 99%, transparent 99.6%),
    linear-gradient(180deg, #5B3BD6 0%, #3E26A8 3%, #26166F 7%, #170D45 12%, #000 24%);
  box-shadow:0 0 24px 2px color-mix(in srgb, #CDB2FF 40%, transparent), 0 0 80px 16px color-mix(in srgb, #8B63FF 28%, transparent);
  translate:-50% var(--rise, 0rem);
  transition:translate 1s cubic-bezier(.625,.05,0,1);
}
.yt_player:hover .yt_sky::after{ translate:-50% calc(var(--rise, 0rem) - .75rem) }
.yt_play{
  position:absolute; left:50%; top:50%; translate:-50% -50%; display:grid; place-items:center;
  width:3rem; height:3rem; border-radius:50%; background:#fff; color:#000;
  box-shadow:0 0 0 6px rgba(255,255,255,.08), 0 10px 30px rgba(0,0,0,.5);
  transition:scale .5s cubic-bezier(.22,1,.36,1), box-shadow .5s cubic-bezier(.22,1,.36,1);
}
.yt_play svg{ width:1.125rem; height:1.125rem; margin-inline-start:.125rem }
.yt_player:hover .yt_play{ scale:1.08; box-shadow:0 0 0 10px rgba(255,255,255,.08), 0 10px 30px rgba(0,0,0,.5) }
.yt_now{ position:absolute; inset-inline:.75rem; bottom:.75rem; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:.375rem .75rem }
.yt_chip{ grid-column:1 / -1; justify-self:start; font-family:var(--font-mono); font-size:.625rem; text-transform:uppercase; letter-spacing:.06em;
  padding:.2rem .5rem; border:1px solid rgba(255,255,255,.22); border-radius:99px; color:rgba(255,255,255,.85); background:rgba(0,0,0,.35) }
.yt_now_title{ min-width:0; font-size:.8125rem; line-height:1.3; color:#fff; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; text-wrap:balance }
.yt_now_time{ position:absolute; right:.625rem; bottom:.625rem; font-family:var(--font-mono); font-size:.6875rem; color:#fff; background:rgba(0,0,0,.6); padding:.125rem .375rem; border-radius:.3rem }

.yt_channel{ display:flex; align-items:center; gap:.75rem; padding-inline:.25rem }
.yt_avatar{ width:2.25rem; height:2.25rem; border-radius:50%; flex:none }
.yt_id{ display:grid; flex:1; min-width:0 }
.yt_name{ font-size:.875rem; font-weight:500; color:var(--text) }
.yt_meta{ font-size:.75rem; color:var(--muted) }
.dropdown_panel .yt_sub{
  display:inline-flex; align-items:center; gap:.375rem; height:2rem; padding-inline:.875rem; border-radius:99px;
  background:var(--text); color:var(--page); font-size:.75rem; font-weight:500; flex:none;
  transition:background-color .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease)
}
.dropdown_panel .yt_sub:hover{ background:var(--page); color:var(--text); box-shadow:inset 0 0 0 1px var(--text) }
.yt_sub svg{ width:1rem; height:1rem }

.yt_list{ display:grid; grid-template-columns:minmax(0,1fr); min-width:0; gap:.125rem; padding-block-start:.75rem; border-block-start:1px solid var(--line) }
.yt_list_head{ margin:0; padding:0 .375rem .375rem; font-family:var(--font-mono); font-size:.625rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted) }
.dropdown_panel .yt_row{
  display:flex; align-items:center; justify-content:space-between; gap:.75rem; height:auto; min-width:0;
  padding:.5rem .375rem; border-radius:.5rem; font-size:.8125rem; color:var(--text); background:none
}
.dropdown_panel .yt_row:hover{ background:color-mix(in srgb, var(--text) 5%, transparent) }
.yt_row_title{ flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.yt_row_time{ font-family:var(--font-mono); font-size:.6875rem; color:var(--muted); flex:none }

/* Both menus share the same generous rhythm: 1.5rem of padding, taller rows,
   larger titles and descriptions, and more space under each group heading. */
.dropdown_panel.is-mega{ padding:1.5rem; gap:.5rem 1.5rem }
.dropdown_panel.is-resources{ width:min(66rem, calc(100vw - 2rem)); grid-template-columns:repeat(2, minmax(0,1fr)) minmax(0,19.5rem) }
.dropdown_panel.is-mega > .mega_col + .mega_col{ padding-inline-start:1.5rem }
.is-mega .mega_col{ gap:.375rem }
.is-mega .mega_head{ padding-block-end:.875rem; margin-block-end:.625rem }
.dropdown_panel.is-mega .mega_item{ min-height:4.5rem; padding:.75rem 1.75rem .75rem .75rem; gap:1rem }
.is-mega .mega_icon{ width:2.75rem; height:2.75rem; border-radius:.875rem }
.is-mega .mega_title{ font-size:.9375rem }
.is-mega .mega_desc{ font-size:.8125rem }
.is-resources .mega_foot{ margin-block-start:.75rem; padding:1.125rem .75rem 0 }
.dropdown_panel.is-services > .mega_col + .mega_col{ padding-inline-start:1rem }
.dropdown_panel.is-services .mega_item{ padding:.75rem 1.125rem .75rem .5rem; gap:.875rem }
.is-services .mega_foot{ margin-block-start:.75rem; padding:1.125rem .625rem 0 }
.dropdown_panel.is-services .mega_promo{ grid-column:4; grid-row:1 / span 2; min-height:0 }

@media (max-width:1199px){
  .dropdown_panel.is-mega{ padding:1.25rem; gap:.5rem 1rem }
  .dropdown_panel.is-mega > .mega_col + .mega_col{ padding-inline-start:1rem }
  .dropdown_panel.is-mega .mega_item{ padding-inline-end:1.25rem; gap:.75rem }
  .is-mega .mega_icon{ width:2.5rem; height:2.5rem }
  .is-mega .mega_title{ font-size:.875rem }
  .is-mega .mega_desc{ font-size:.75rem }
}

.mobile_group{ font-family:var(--font-mono); font-size:.6875rem; text-transform:uppercase; letter-spacing:.06em;
  color:var(--muted); margin-block-start:1rem }

/* The chevron turns over while its menu is open. Bound to data-open, which hover,
   click and keyboard all set, so it can never disagree with the panel. */
.dropdown [data-dropdown-trigger] svg{ transition:transform .4s cubic-bezier(.22, 1, .36, 1) }
.dropdown[data-open="true"] [data-dropdown-trigger] svg{ transform:rotate(180deg) }

/* With GSAP running (motion.js adds .menus-gsap) the item entrance is GSAP's;
   the CSS stagger stands down so the two never animate the same property. */
.menus-gsap .dropdown_panel .mega_item{ opacity:1; transform:none; transition:background-color .2s var(--ease) }
/* The discovery card needs about 1280px to sit beside three full columns; below
   that it steps aside rather than squeeze the service names onto two lines. */
@media (max-width:1279px){
  .dropdown_panel.is-services{ grid-template-columns:repeat(3, minmax(0,1fr)) }
  .dropdown_panel.is-services .mega_promo{ display:none }
}

/* The discovery card fills its full height on purpose: copy at the top, the
   planet's rim across the middle, and the person and the button on the dark
   body of the planet below, so the card reads as a composition, not a gap. */
.mega_promo_bottom{ display:grid; gap:1rem; position:relative }
.mega_promo_person{ display:flex; align-items:center; gap:.75rem }
.mega_promo_person img{ width:2.5rem; height:2.5rem; border-radius:50%; object-fit:cover; flex:none; box-shadow:0 0 0 2px rgba(255,255,255,.14) }
.mega_promo_person > span{ display:grid; gap:.0625rem }
.mega_promo_name{ font-size:.875rem; font-weight:500; color:#fff }
.mega_promo_role{ font-size:.75rem; color:rgba(255,255,255,.62) }
.mega_promo_button{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem; height:2.75rem; border-radius:99px;
  background:#fff; color:#000; font-size:.875rem; font-weight:500; transition:background-color .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease) }
.mega_promo_button svg{ width:1rem; height:1rem; transition:transform .4s cubic-bezier(.625,.05,0,1) }
.mega_promo:hover .mega_promo_button{ background:#000; color:#fff; box-shadow:inset 0 0 0 1px #fff }
.mega_promo:hover .mega_promo_button svg{ transform:translate(.125rem, -.125rem) }

/* ---- Phone menu -------------------------------------------------------------
   A full-screen panel under the header. The header drops its backdrop blur while
   the menu is open, because a backdrop-filter makes it the containing block for
   fixed children and would trap the panel inside the header's own height. */
.mobile_panel{ display:none }
@media (max-width:991px){
  html.menu-open{ overflow:hidden }
  html.menu-open .header{ -webkit-backdrop-filter:none; backdrop-filter:none; background:var(--page) }
  .mobile_panel{
    display:block; position:fixed; inset:4.25rem 0 0 0; z-index:49; background:var(--page);
    overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
    opacity:0; visibility:hidden; transition:opacity .2s ease, visibility 0s linear .2s;
  }
  .mobile_panel[data-open="true"]{ opacity:1; visibility:visible; transition:opacity .25s ease-out, visibility 0s }
  .mobile_panel:focus{ outline:none }
  .mobile_scroll{ display:grid; gap:1.5rem; padding:1rem var(--global--pad, 1rem) 2.5rem; max-width:40rem; margin-inline:auto }

  /* the burger becomes a cross */
  .burger{ position:relative; color:var(--text) }
  .burger span{ position:absolute; left:50%; top:50%; width:1rem; height:1.5px; margin-left:-.5rem; border-radius:1px; background:currentColor;
    transition:transform .45s cubic-bezier(.625,.05,0,1), opacity .2s ease }
  .burger span:nth-child(1){ transform:translateY(-5px) }
  .burger span:nth-child(3){ transform:translateY(5px) }
  .burger[aria-expanded="true"] span:nth-child(1){ transform:rotate(45deg) }
  .burger[aria-expanded="true"] span:nth-child(2){ opacity:0; transform:scaleX(.2) }
  .burger[aria-expanded="true"] span:nth-child(3){ transform:rotate(-45deg) }

  /* big primary links, hairlines between */
  .mobile_primary{ display:grid }
  .mobile_link{
    display:flex; align-items:center; justify-content:space-between; gap:1rem; width:100%;
    padding:1.125rem .25rem; border:0; border-block-end:1px solid var(--line); background:none;
    font:inherit; font-size:1.625rem; letter-spacing:-.02em; line-height:1.2; color:var(--text); text-align:left; cursor:pointer;
  }
  .mobile_arrow{ display:grid; place-items:center; width:2.25rem; height:2.25rem; border:1px solid var(--line); border-radius:99px; color:var(--muted);
    transition:background-color .25s var(--ease), color .25s var(--ease) }
  .mobile_arrow svg{ width:1rem; height:1rem }
  .mobile_link:active .mobile_arrow, .mobile_link:hover .mobile_arrow{ background:var(--text); color:var(--page); border-color:var(--text) }
  /* plus that turns into a minus */
  .mobile_plus{ position:relative; width:2.25rem; height:2.25rem; border:1px solid var(--line); border-radius:99px; flex:none }
  .mobile_plus::before, .mobile_plus::after{ content:""; position:absolute; left:50%; top:50%; width:.875rem; height:1.5px; margin:-.75px 0 0 -.4375rem; background:currentColor; border-radius:1px;
    transition:transform .45s cubic-bezier(.625,.05,0,1) }
  .mobile_plus::after{ transform:rotate(90deg) }
  .is-acc[aria-expanded="true"] .mobile_plus::after{ transform:rotate(0deg) }
  .is-acc[aria-expanded="true"] .mobile_plus{ background:var(--text); color:var(--page); border-color:var(--text) }

  /* accordion body: a grid-rows transition, so it opens smoothly without GSAP too */
  .mobile_sub{ display:grid; grid-template-rows:0fr; visibility:hidden;
    transition:grid-template-rows .5s cubic-bezier(.22,1,.36,1), visibility 0s linear .5s }
  .mobile_acc.is-open .mobile_sub{ grid-template-rows:1fr; visibility:visible; transition:grid-template-rows .5s cubic-bezier(.22,1,.36,1), visibility 0s }
  .mobile_sub_inner{ overflow:hidden; display:grid; gap:.25rem; min-height:0 }
  .mobile_acc.is-open .mobile_sub_inner{ padding-block:.5rem 1.25rem; border-block-end:1px solid var(--line) }
  .mobile_acc.is-open > .mobile_link{ border-block-end-color:transparent }
  .mobile_sub .mobile_group{ margin-block:.75rem .25rem; padding-inline:.25rem }
  .mobile_item{ display:grid; grid-template-columns:2.5rem minmax(0,1fr); align-items:center; gap:.875rem; padding:.625rem .25rem; border-radius:.75rem; color:var(--text) }
  .mobile_item .mega_icon{ width:2.5rem; height:2.5rem }
  .mobile_item .mega_title{ font-size:.9375rem }
  .mobile_item .mega_desc{ font-size:.8125rem }
  .mobile_item:active{ background:color-mix(in srgb, var(--text) 6%, transparent) }
  .mobile_item:active .mega_icon{ background:var(--text); color:var(--page); border-color:var(--text) }
  .mobile_all{ display:inline-flex; align-items:center; gap:.375rem; margin-block-start:.75rem; padding-inline:.25rem; font-size:.875rem; color:var(--text) }

  /* the discovery card */
  .mobile_cta{ position:relative; overflow:hidden; isolation:isolate; display:flex; flex-direction:column; justify-content:space-between; gap:5.5rem;
    padding:1.375rem; border:1px solid var(--line); border-radius:1.25rem; background:#000; color:#fff; min-height:17rem }
  .mobile_cta .mega_promo_sky::after{ top:40% }
  .mobile_cta_copy{ display:grid; gap:.5rem }
  .mobile_cta .mega_promo_title{ font-size:1.5rem }
  .mobile_mail{ margin:0; text-align:center; font-size:.8125rem; color:var(--muted) }
  .mobile_mail a{ color:var(--text); text-decoration:underline; text-underline-offset:3px }
}

/* ---- Ask AI about Amariq -----------------------------------------------------
   Same buttons as the footer socials (fill from the pointer, name tag, dimming),
   with the major assistants' marks. Each opens that assistant with a prompt to read
   amariq.com and summarise the studio. */
.footer_ai{ margin-block-start:1.75rem; display:grid; gap:.875rem }
.footer_ai_title{ margin:0; font-family:var(--font-mono); font-size:.75rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted) }
.footer .footer_social.is-ai .social_tip{ inset-block-end:auto; inset-block-start:calc(100% + .75rem); translate:-50% -.5rem }
.footer .footer_social.is-ai li:hover > .social_tip,
.footer .footer_social.is-ai li:has(a:focus-visible) > .social_tip{ translate:-50% 0 }
/* the arrow points up at the icon when the tag hangs below it */
.footer .footer_social.is-ai .social_tip::after{ inset-block-start:auto; inset-block-end:100%; translate:-50% 60%; rotate:45deg }

/* ==========================================================================
   Why Amariq: a bento of six drawn illustrations (index.html). Black and white
   glass with neutral lifts; the one colour moment is the violet glow behind
   the Amariq mark, like the planets. motion.js whyBento() reveals each card,
   then loops a short story in it while it is on screen. Without motion every
   illustration shows its finished state, so the markup is the final frame.
   ========================================================================== */
.why_bento{
  display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); gap:1rem;
  margin-block-start:3.5rem;
}
.why_card{
  --mx:50%; --my:0%;
  grid-column:span 4; position:relative; isolation:isolate; overflow:hidden;
  display:flex; flex-direction:column;
  border:1px solid rgba(255,255,255,.08); border-radius:1.25rem;
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(255,255,255,.045), transparent 60%),
    linear-gradient(180deg, #0C0C0C 0%, #050505 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.why_card.is-flow{ grid-column:span 7 }
.why_card.is-review{ grid-column:span 5 }
.why_card.is-zap{ grid-column:span 5 }
.why_card.is-chat{ grid-column:span 7 }
.why_card.is-chat .why_copy{ order:2 }
/* light that follows the pointer: a soft wash inside, and a brighter rim on the border */
.why_card::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:0; transition:opacity .4s var(--ease);
  background:radial-gradient(28rem circle at var(--mx) var(--my), rgba(255,255,255,.055), transparent 60%);
}
.why_card::before{
  content:""; position:absolute; inset:0; z-index:3; pointer-events:none; border-radius:inherit; padding:1px;
  background:radial-gradient(18rem circle at var(--mx) var(--my), rgba(255,255,255,.55), transparent 65%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:0; transition:opacity .4s var(--ease);
}
.why_card:hover::before, .why_card:hover::after{ opacity:1 }

.why_art{ position:relative; height:17rem; overflow:hidden; transform-style:preserve-3d }
.why_art::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(55% 65% at 50% 38%, rgba(255,255,255,.06), transparent 70%),
    radial-gradient(rgba(255,255,255,.1) 1px, transparent 1.2px) 0 0 / 18px 18px;
  -webkit-mask-image:radial-gradient(75% 80% at 50% 40%, #000 35%, transparent 85%);
          mask-image:radial-gradient(75% 80% at 50% 40%, #000 35%, transparent 85%);
}
.why_copy{ padding:.25rem 1.75rem 1.75rem; display:grid; gap:.625rem; align-content:start }
.why_tag{ margin:0; font-family:var(--font-mono); font-size:.75rem; letter-spacing:.04em; color:var(--muted) }
.why_copy .h4{ font-size:1.1875rem; letter-spacing:-.02em }
.why_copy p.muted{ max-width:48ch; text-wrap:pretty }

/* shared glass surface for every mini UI */
.glass{
  background:linear-gradient(180deg, #1A1A1A, #111111); border-radius:.75rem;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.09), inset 0 1px 0 rgba(255,255,255,.07), 0 18px 40px -14px rgba(0,0,0,.9);
}
/* small status pill used across the cards */
.why_art .ph{ width:1em; height:1em }
.why_art svg{ display:block }
.ic_check{ width:.75rem; height:.75rem; flex:none }
.why_art .ph, .why_art .ic_plus, .why_art .sys_arrow{ flex:none }

/* app-icon tiles for brand marks: the brand colour, a soft top gloss and a hairline edge */
.brand_tile{
  --size:2.25rem; flex:none; position:relative; overflow:hidden; display:grid; place-items:center;
  width:var(--size); height:var(--size); border-radius:calc(var(--size) * .28); background:var(--tile);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14), inset 0 1px 0 rgba(255,255,255,.28), 0 6px 14px -6px rgba(0,0,0,.9);
}
.brand_tile::after{ content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg, rgba(255,255,255,.2), rgba(255,255,255,0) 55%) }
.brand_tile svg{ width:calc(var(--s) * 100%); height:calc(var(--s) * 100%); position:relative }

/* ---- 01 · one design, any platform ------------------------------------ */
.art_flow{ display:grid; place-items:center; padding-inline:1.75rem }
.fl_stage{
  --pg-h:7.1rem;   /* height of the drawn page; both pages share it, so the wire sits at its middle */
  width:100%; max-width:37rem; display:grid; grid-template-columns:minmax(0,15rem) minmax(3rem,1fr) minmax(0,15rem);
  align-items:end; row-gap:.75rem;
}
.fl_under{ grid-column:3; display:flex; justify-content:center }

/* a page, drawn the same in the design and on the live site: graphite UI, like the other cards */
.pg{ position:relative; display:grid; gap:.45rem; padding:.55rem .6rem .65rem; background:linear-gradient(180deg, #121212, #0C0C0C) }
.pg i{ display:block; border-radius:99px; background:rgba(255,255,255,.14) }
.pg_nav{ display:flex; align-items:center; gap:.3rem; padding-block-end:.4rem; border-block-end:1px solid rgba(255,255,255,.07) }
.pg_nav i{ width:.9rem; height:.2rem }
.pg_nav .pg_logo{ width:1.3rem; height:.3rem; background:#FFFFFF; margin-inline-end:auto }
.pg_nav .pg_cta{ width:1.2rem; height:.45rem; background:#FFFFFF; margin-inline-start:.2rem }
.pg_hero{ display:grid; grid-template-columns:1.15fr 1fr; gap:.45rem; align-items:center; padding-block:.2rem }
.pg_text{ display:grid; gap:.25rem; justify-items:start }
.pg .pg_h1{ width:100%; height:.38rem; background:#FFFFFF }
.pg .pg_h1.is-short{ width:70%; background:rgba(255,255,255,.55) }
.pg_p{ width:88%; height:.18rem; margin-block:.1rem }
.pg .pg_btn{ width:1.6rem; height:.5rem; background:#FFFFFF; margin-block-start:.1rem }
.pg .pg_img{
  position:relative; overflow:hidden; height:2.4rem; border-radius:.3rem;
  background:
    radial-gradient(60% 80% at 70% 20%, rgba(255,255,255,.28), transparent 70%),
    linear-gradient(160deg, #3A3A3A, #151515);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);
}
.pg_cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:.3rem }
.pg .pg_cards i{ height:1.25rem; border-radius:.25rem; background:linear-gradient(180deg, #1C1C1C, #141414); box-shadow:inset 0 0 0 1px rgba(255,255,255,.08) }

/* a soft light that sweeps the live page as it is built */
.fl_sheen{ position:absolute; inset:0; z-index:2; pointer-events:none; opacity:0;
  background:linear-gradient(105deg, transparent 30%, rgba(255,255,255,.14) 48%, transparent 66%); will-change:transform }

/* left: the design, open in Figma. Same window size and chrome as the browser, so the two mirror */
.fl_window{ width:100%; display:block; border-radius:.75rem; overflow:hidden; background:linear-gradient(180deg, #1C1C1C, #151515); box-shadow:inset 0 0 0 1px rgba(255,255,255,.11), inset 0 1px 0 rgba(255,255,255,.08), 0 30px 60px -20px rgba(0,0,0,1) }
.fl_figfile{ display:flex; align-items:center; gap:.35rem; min-width:0; font-size:.625rem; font-weight:500; color:rgba(255,255,255,.85) }
.fl_figfile .brand_tile{ --size:.95rem }
.fl_people{ margin-inline-start:auto; display:flex }
.fl_people > *{ width:.95rem; height:.95rem; border-radius:50%; object-fit:cover; box-shadow:0 0 0 1.5px #1A1A1A }
.fl_people > * + *{ margin-inline-start:-.25rem }
.fl_people .rv_avatar{ width:.95rem; height:.95rem; font-size:.4375rem; box-shadow:0 0 0 1.5px #1A1A1A }
.fl_zoom{ font:.5625rem/1 var(--font-mono); color:rgba(255,255,255,.4); margin-inline-start:.15rem }
/* Figma's grey canvas; the frame sits in it at 75% */
.fl_canvas{
  position:relative; display:grid; place-items:center; height:var(--pg-h); margin:0 .3rem .3rem; border-radius:.35rem; overflow:hidden;
  background:radial-gradient(rgba(255,255,255,.06) 1px, transparent 1.2px) 0 0 / 10px 10px, #1A1A1A;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);
}
.fl_board{ position:relative; display:grid; gap:.2rem; margin-block-end:.9rem }   /* room below for the size tag */
.fl_board_label{ font-size:.5rem; line-height:.5rem; color:rgba(255,255,255,.5) }
.fl_scale{ display:block; width:calc(12rem * .66); height:calc(var(--pg-h) * .66); position:relative }
.fl_artboard{ position:absolute; left:0; top:0; display:block; width:12rem; transform:scale(.66); transform-origin:0 0; box-shadow:0 10px 24px -10px rgba(0,0,0,.9) }
/* selection round the frame, with its size tag, as Figma draws it */
.fl_sel{ position:absolute; left:-2px; right:-2px; top:calc(.5rem + .2rem - 2px); bottom:-2px; border:1px solid #FFFFFF; pointer-events:none; opacity:0 }
.fl_sel i{ position:absolute; width:5px; height:5px; background:#1A1A1A; border:1px solid #FFFFFF }
.fl_sel i:nth-child(1){ left:-3px; top:-3px } .fl_sel i:nth-child(2){ right:-3px; top:-3px }
.fl_sel i:nth-child(3){ left:-3px; bottom:-3px } .fl_sel i:nth-child(4){ right:-3px; bottom:-3px }
.fl_dim{ position:absolute; left:50%; top:calc(100% + 4px); translate:-50% 0; padding:.12rem .3rem; border-radius:.2rem; background:#FFFFFF; color:#000; font:500 .4375rem/1 var(--font-mono); white-space:nowrap }
/* a live cursor in the file */
.fl_cursor{ position:absolute; left:0; top:0; z-index:3; display:flex; align-items:flex-start; gap:.05rem; pointer-events:none; opacity:0; will-change:transform }
.fl_cursor svg{ width:.85rem; height:.85rem; color:#FFFFFF; filter:drop-shadow(0 0 1px #000) drop-shadow(0 2px 3px rgba(0,0,0,.6)) }
.fl_cursor span{ margin-block-start:.7rem; padding:.1rem .3rem; border-radius:.25rem; background:#FFFFFF; color:#000; font-size:.5rem; font-weight:600 }

/* middle: the Amariq badge on a hairline */
.fl_wire{ display:flex; align-items:center; height:var(--pg-h); margin-block-end:.3rem }
.fl_line{ position:relative; flex:1; height:1px; background:linear-gradient(90deg, rgba(255,255,255,.05), rgba(255,255,255,.28), rgba(255,255,255,.05)) }
.fl_fill{ position:absolute; inset:0; background:#FFFFFF; transform-origin:left center; transform:scaleX(0) }
.fl_spark{ position:absolute; left:0; top:50%; width:.375rem; height:.375rem; margin:-.1875rem 0 0 -.1875rem; border-radius:50%; background:#FFFFFF; box-shadow:0 0 10px 2px rgba(255,255,255,.55); opacity:0; will-change:transform }
.fl_badge{ flex:none; width:3rem; height:auto; margin-inline:.35rem; filter:drop-shadow(0 10px 18px rgba(0,0,0,.7)) drop-shadow(0 0 16px rgba(255,255,255,.12)) }

/* right: the live site, and the platform it runs on */
.fl_site{ display:block }
.fl_browser{ width:100%; display:block; border-radius:.75rem; overflow:hidden; background:linear-gradient(180deg, #1C1C1C, #151515); box-shadow:inset 0 0 0 1px rgba(255,255,255,.11), inset 0 1px 0 rgba(255,255,255,.08), 0 30px 60px -20px rgba(0,0,0,1), 0 0 60px -10px rgba(255,255,255,.07) }
.fl_bar{ display:flex; align-items:center; gap:.5rem; padding:.4rem .5rem; height:2.05rem; box-sizing:border-box }
.fl_dots{ display:flex; gap:.2rem }
.fl_dots i{ width:.3rem; height:.3rem; border-radius:50%; background:rgba(255,255,255,.2) }
.fl_url{ flex:1; min-width:0; display:flex; align-items:center; gap:.35rem; height:1.25rem; padding:0 .2rem 0 .2rem; border-radius:.4rem; background:#0B0B0B; box-shadow:inset 0 0 0 1px rgba(255,255,255,.07) }
.fl_url_icons{ position:relative; flex:none; width:.875rem; height:.875rem }
.fl_url_icon{ position:absolute; inset:0; opacity:0 }
.fl_url_icon.is-on{ opacity:1 }
.fl_url_icon .brand_tile{ --size:.875rem }
.fl_domain{ font:.625rem/1 var(--font-mono); color:rgba(255,255,255,.75); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.fl_view{ position:relative; display:block; margin:0 .3rem .3rem; border-radius:.35rem; overflow:hidden; box-shadow:inset 0 0 0 1px rgba(255,255,255,.07) }
.fl_live{
  margin-inline-start:auto; flex:none; display:inline-flex; align-items:center; gap:.2rem; height:.875rem; padding:0 .35rem 0 .25rem;
  border-radius:99px; font-size:.5625rem; font-weight:500; line-height:1; color:#000; background:#FFFFFF; box-shadow:0 0 12px rgba(255,255,255,.25);
}
.fl_live .ic_check{ width:.5rem; height:.5rem }

/* platform switcher: a segmented control with a sliding thumb */
.fl_seg{
  position:relative; display:flex; padding:3px; border-radius:.75rem; background:#0E0E0E;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.09), inset 0 1px 2px rgba(0,0,0,.6);
}
.fl_seg_item{ position:relative; z-index:1; display:grid; place-items:center; width:2.5rem; height:2.1rem; opacity:.5; filter:grayscale(1); transition:opacity .35s var(--ease), filter .35s var(--ease) }
.fl_seg_item.is-on{ opacity:1; filter:none }
.fl_seg_item .brand_tile{ --size:1.4rem }
.fl_thumb{ position:absolute; left:3px; top:3px; width:2.5rem; height:2.1rem; border-radius:.55rem; background:linear-gradient(180deg, #262626, #1A1A1A); box-shadow:inset 0 0 0 1px rgba(255,255,255,.16), inset 0 1px 0 rgba(255,255,255,.1), 0 4px 10px -2px rgba(0,0,0,.6) }

.map_dot{
  position:absolute; left:0; top:0; width:.5rem; height:.5rem; margin:-.25rem 0 0 -.25rem; border-radius:50%;
  background:#FFFFFF; box-shadow:0 0 0 3px rgba(255,255,255,.12), 0 0 14px 3px rgba(255,255,255,.55);
  opacity:0; z-index:2; pointer-events:none; will-change:transform;
}

/* ---- 02 · review: comment, resolve, approve --------------------------- */
.rv_board{ position:absolute; inset-inline:0; margin-inline:auto; top:1.25rem; width:min(18rem, 84%) }
/* the page in Figma: the same graphite page as card 1, with comments pinned to it */
.rv_canvas{ position:relative; display:block; margin:0 .3rem .3rem; border-radius:.35rem; overflow:visible; box-shadow:inset 0 0 0 1px rgba(255,255,255,.07) }
.rv_canvas .pg{ border-radius:.35rem }
.rv_canvas .rv_head{ position:relative; width:62% }    /* final state: the shorter headline */
.rv_pin{
  position:absolute; width:1.375rem; height:1.375rem; border-radius:50% 50% 50% 0; display:grid; place-items:center;
  font:600 .6875rem/1 var(--font-mono); color:#000; background:#FFFFFF; box-shadow:0 0 0 4px rgba(255,255,255,.12), 0 6px 14px -4px rgba(0,0,0,.8);
}
.rv_pin > *{ grid-area:1 / 1 }
.rv_pin .ic_check{ width:.7rem; height:.7rem }
.rv_pin.is-one .rv_pin_n{ opacity:0 }      /* final state: resolved */
.rv_pin.is-one{ top:.95rem; left:48% }
.rv_pin.is-two{ top:3.25rem; left:24% }
.rv_cursor{ position:absolute; left:0; top:0; display:flex; align-items:flex-start; gap:.1rem; opacity:0; pointer-events:none; z-index:2 }
.rv_cursor svg{ width:1.15rem; height:1.15rem; color:#FFFFFF; filter:drop-shadow(0 0 1px #000) drop-shadow(0 2px 4px rgba(0,0,0,.6)) }
.rv_cursor span{ margin-block-start:.9rem; font-size:.625rem; font-weight:500; color:#000; background:#FFFFFF; padding:.15rem .35rem; border-radius:.3rem }
/* design-tool selection round the headline while it is being edited */
.rv_select{ position:absolute; inset:-4px -5px; border:1px solid rgba(255,255,255,.85); border-radius:2px; opacity:0; pointer-events:none }
.rv_select b{ position:absolute; width:5px; height:5px; background:#0A0A0A; border:1px solid #FFFFFF; border-radius:1px }
.rv_select b:nth-child(1){ left:-3px; top:-3px } .rv_select b:nth-child(2){ right:-3px; top:-3px }
.rv_select b:nth-child(3){ left:-3px; bottom:-3px } .rv_select b:nth-child(4){ right:-3px; bottom:-3px }
.rv_note{
  position:absolute; inset-inline:0; margin-inline:auto; top:10.1rem; width:min(20rem, 92%);
  display:flex; align-items:center; gap:.625rem; padding:.55rem .65rem; border-radius:.875rem;
}
.rv_avatar{
  flex:none; width:1.75rem; height:1.75rem; border-radius:50%; display:grid; place-items:center;
  font-size:.75rem; font-weight:600; color:#000; background:linear-gradient(180deg, #FFFFFF, #C9C9C9);
  box-shadow:0 0 0 2px #141414, 0 0 0 3px rgba(255,255,255,.14);
}
.rv_note_text{ display:grid; font-size:.75rem; line-height:1.35; color:rgba(255,255,255,.72); min-width:0 }
.rv_note_text b, .chat_bubble b{ font-weight:500; color:#FFFFFF; font-size:.75rem; display:flex; align-items:baseline }
.rv_resolved{
  margin-inline-start:auto; flex:none; display:inline-flex; align-items:center; gap:.3rem; height:1.5rem;
  font:500 .6875rem/1 var(--font-mono); color:#FFFFFF; padding:0 .6rem 0 .5rem; border-radius:99px;
  background:rgba(255,255,255,.07); box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);
}
/* rounds as one segmented control with a sliding thumb */
.rv_rounds{
  position:absolute; bottom:.85rem; inset-inline:0; margin-inline:auto; width:max-content; display:flex; gap:0; white-space:nowrap;
  padding:3px; border-radius:99px; background:#0E0E0E; box-shadow:inset 0 0 0 1px rgba(255,255,255,.09), inset 0 1px 2px rgba(0,0,0,.6);
}
.rv_round{
  position:relative; z-index:1; font:500 .6875rem/1 var(--font-mono); color:rgba(255,255,255,.5); padding:.45rem .75rem;
  border-radius:99px; transition:color .35s var(--ease);
}
.rv_round.is-approved{ color:#000; background:#FFFFFF }
.rv_hl{ position:absolute; left:0; top:3px; bottom:3px; border-radius:99px; background:#FFFFFF; opacity:0; box-shadow:0 2px 10px rgba(255,255,255,.18) }
/* while the story runs, the sliding thumb marks the current round */
.why_card.is-live .rv_round.is-approved{ background:transparent }
/* labels invert wherever the white thumb passes under them, even mid-slide */
.why_card.is-live .rv_rounds{ isolation:isolate }
.why_card.is-live .rv_round{ color:rgba(255,255,255,.55); mix-blend-mode:difference }
.why_card.is-live .rv_round.is-on{ color:#FFFFFF }
.why_card.is-live .rv_hl{ opacity:1 }

/* ---- 03 · map: every route ends in one enquiry ------------------------ */
.map_lines{ position:absolute; inset:0; width:100%; height:100%; overflow:visible }
.map_lines path{ fill:none; stroke:rgba(255,255,255,.16); stroke-width:1; vector-effect:non-scaling-stroke }
.map_lines path.is-goal{ stroke:rgba(255,255,255,.4); stroke-dasharray:3 4 }
.map_trace path{ stroke:rgba(255,255,255,.65); stroke-width:1.25; opacity:0 }
.map_pos{ position:absolute; translate:-50% -50% }   /* positions; the node inside is what animates */
.map_node{
  display:inline-flex; align-items:center; gap:.4rem; height:1.875rem; padding:0 .7rem 0 .55rem; font-size:.75rem; font-weight:500; color:#FFFFFF;
  border-radius:.6rem; white-space:nowrap; transition:background-color .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.map_node .ph{ width:.8125rem; height:.8125rem; opacity:.75 }
.map_node.is-hot{ background:#FFFFFF; color:#000; box-shadow:0 0 22px rgba(255,255,255,.3) }
.map_node.is-hot .ph{ opacity:1 }
.map_node.is-goal{
  height:2.125rem; padding:0 .95rem 0 .8rem; gap:.4rem; color:#000; position:relative; z-index:1;
  background:#FFFFFF; border-radius:99px; box-shadow:0 0 0 6px rgba(255,255,255,.08), 0 0 32px rgba(255,255,255,.35);
}
.map_ring{ position:absolute; inset:0; border-radius:99px; border:1px solid rgba(255,255,255,.7); opacity:0 }

/* ---- 04 · speed: measure, then pass ----------------------------------- */
.art_speed{ display:grid; justify-items:center; align-content:center; gap:.875rem; padding-inline:1.5rem }
.speed_gauge{ position:relative; width:12rem }
.speed_gauge svg{ width:100%; height:auto; overflow:visible }
.gauge_ticks line{ stroke:rgba(255,255,255,.22); stroke-width:1.5; stroke-linecap:round }
.gauge_track, .gauge_fill{ fill:none; stroke-width:9; stroke-linecap:round }
.gauge_track{ stroke:rgba(255,255,255,.07) }
.gauge_fill{ stroke:url(#why-gauge); stroke-dasharray:100; stroke-dashoffset:8 }
.gauge_tip{ fill:#FFFFFF; filter:drop-shadow(0 0 6px #FFFFFF) }
.gauge_label{ position:absolute; left:0; right:0; bottom:2rem; text-align:center; font:.625rem/1 var(--font-mono); letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.5) }
.gauge_value{ position:absolute; left:0; right:0; bottom:.1rem; text-align:center; font-size:1.5rem; font-weight:500; letter-spacing:-.02em; color:#FFFFFF }
.speed_rows{ width:min(15.5rem, 100%); padding:.625rem .75rem; display:grid; gap:.45rem; border-radius:.875rem }
.speed_row{ display:grid; grid-template-columns:2.1rem 1fr auto; align-items:center; gap:.625rem; font-size:.6875rem; color:rgba(255,255,255,.6) }
.speed_row b{ font:500 .6875rem/1 var(--font-mono); color:#FFFFFF }
.speed_row i{ height:.25rem; border-radius:99px; background:rgba(255,255,255,.08); overflow:hidden }
.speed_row em{ display:block; height:100%; width:calc(var(--w) * 100%); border-radius:inherit; background:linear-gradient(90deg, #5A5A5A, #FFFFFF); transform-origin:left }
.speed_ok{ display:inline-flex; align-items:center; gap:.25rem; justify-self:end; height:1.25rem; padding:0 .45rem 0 .35rem; border-radius:99px; font-size:.625rem; font-weight:500; color:#FFFFFF; background:rgba(255,255,255,.08); box-shadow:inset 0 0 0 1px rgba(255,255,255,.12) }
.speed_ok .ic_check{ width:.55rem; height:.55rem }

/* ---- 05 · system: a new page assembled from the library --------------- */
.art_system{ display:grid; justify-items:center; align-content:center; gap:1rem; padding-inline:1rem }
.sys_row{ display:flex; align-items:center; gap:.5rem }
.sys_panel{ padding:.625rem; display:grid; gap:.5rem; border-radius:.875rem }
.sys_head{ display:flex; align-items:center; gap:.35rem; font-size:.6875rem; color:rgba(255,255,255,.85) }
.sys_head .ph{ width:.75rem; height:.75rem; opacity:.7 }
.sys_head b{ font-weight:500 }
.sys_grid{ display:grid; grid-template-columns:repeat(2, 2.75rem); gap:.35rem }
.sys_tile{ height:2.35rem; border-radius:.45rem; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); display:grid; place-items:center; transition:background-color .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease) }
.sys_tile.is-hot{ background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.5); box-shadow:0 0 18px rgba(255,255,255,.2) }
.sys_arrow{ width:.875rem; height:.875rem; color:rgba(255,255,255,.4) }
.sys_page{ width:6.75rem; padding:.5rem; display:grid; gap:.35rem; border-radius:.75rem }
.sys_page_head{ display:flex; align-items:center; gap:.2rem; padding-block-end:.35rem; border-block-end:1px solid rgba(255,255,255,.07) }
.sys_page_head i{ width:.3rem; height:.3rem; border-radius:50%; background:rgba(255,255,255,.22) }
.sys_page_head b{ margin-inline-start:auto; font:500 .5625rem/1 var(--font-mono); color:rgba(255,255,255,.5); letter-spacing:.02em }
.sys_slot{ height:1.1rem; border-radius:.3rem; border:1px dashed transparent; display:grid; place-items:center; transition:border-color .3s var(--ease) }
.sys_slot.is-hero{ height:2.6rem }
.sys_slot.is-pair{ height:1.9rem; grid-auto-flow:column; gap:.3rem }
.sys_slot.is-empty{ border-color:rgba(255,255,255,.18) }
.sys_slot i, .sys_tile i, .sys_ghost i{ display:block; position:relative }
.g_nav{ width:2rem; height:.3rem; border-radius:99px; background:rgba(255,255,255,.35); box-shadow:0 .45rem 0 -.05rem rgba(255,255,255,.14) }
.sys_slot .g_nav{ width:5rem; box-shadow:none }
.g_btn{ width:1.6rem; height:.7rem; border-radius:99px; background:#FFFFFF }
.g_card{ width:1.6rem; height:1.3rem; border-radius:.25rem; border:1px solid rgba(255,255,255,.35); background:linear-gradient(rgba(255,255,255,.25) 45%, transparent 45%) }
.g_avatars{ width:.65rem; height:.65rem; border-radius:50%; background:rgba(255,255,255,.55); box-shadow:.4rem 0 0 rgba(255,255,255,.35), .8rem 0 0 rgba(255,255,255,.2); margin-inline-end:.8rem }
.g_input{ width:1.8rem; height:.65rem; border-radius:.25rem; border:1px solid rgba(255,255,255,.35) }
.g_img{ width:1.6rem; height:1.15rem; border-radius:.25rem; background:linear-gradient(135deg, rgba(255,255,255,.45), rgba(255,255,255,.06)) }
.sys_slot .g_img{ width:5.6rem; height:2.4rem }
.sys_ghost{ position:absolute; left:0; top:0; display:grid; place-items:center; pointer-events:none; opacity:0; z-index:4; filter:drop-shadow(0 0 10px rgba(255,255,255,.6)) }
.sys_new{
  display:inline-flex; align-items:center; gap:.4rem; height:2rem; font-size:.75rem; color:#000; font-weight:500;
  padding:0 .875rem 0 .75rem; border-radius:99px; background:#FFFFFF; box-shadow:0 0 28px rgba(255,255,255,.25);
}
.sys_new .ic_plus{ width:.75rem; height:.75rem }

/* ---- 06 · integrations: an automation that runs step by step ---------- */
.art_zap{ display:grid; place-items:center; padding-inline:1.5rem }
.zap_flow{ position:relative; width:min(19rem, 100%); display:grid; gap:.625rem }
.zap_head{ display:flex; align-items:center; gap:.5rem; font-size:.75rem; color:rgba(255,255,255,.8); padding-inline:.25rem; margin-block-end:.125rem }
.zap_brand .brand_tile{ --size:1.375rem }
.zap_toggle{ margin-inline-start:auto; width:1.9rem; height:1.1rem; border-radius:99px; background:#FFFFFF; position:relative; transition:background-color .3s var(--ease) }
.zap_toggle i{ position:absolute; top:.15rem; left:.95rem; width:.8rem; height:.8rem; border-radius:50%; background:#000; transition:left .3s var(--ease), background-color .3s var(--ease) }
.zap_toggle.is-off{ background:rgba(255,255,255,.15) }
.zap_toggle.is-off i{ left:.15rem; background:rgba(255,255,255,.6) }
/* the rail runs behind the step icons; the packet travels it */
.zap_rail{ position:absolute; z-index:2; left:1.45rem; top:0; bottom:0; width:1px; pointer-events:none }
/* short dotted connectors between the steps, level with the icons */
.zap_step + .zap_step::before{ content:""; position:absolute; left:1.4rem; top:-.7rem; height:.75rem; width:1px; background:repeating-linear-gradient(to bottom, rgba(255,255,255,.35) 0 2px, transparent 2px 4px) }
.zap_packet{ position:absolute; left:-4px; top:0; width:9px; height:9px; border-radius:50%; background:#FFFFFF; box-shadow:0 0 10px 2px rgba(255,255,255,.7); opacity:0 }
.zap_step{
  position:relative; display:flex; align-items:center; gap:.625rem; padding:.45rem .6rem .45rem .45rem; border-radius:.75rem;
  transition:border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.zap_step.is-hot{ border-color:rgba(255,255,255,.45); box-shadow:inset 0 1px 0 rgba(255,255,255,.1), 0 0 26px rgba(255,255,255,.14), 0 18px 40px -12px rgba(0,0,0,.75) }
.zap_icon{ flex:none; display:grid }
.zap_icon .brand_tile{ --size:2rem }
.zap_icon.is-neutral{ place-items:center; width:2rem; height:2rem; border-radius:.56rem; background:linear-gradient(180deg, #232323, #151515); box-shadow:inset 0 0 0 1px rgba(255,255,255,.14), inset 0 1px 0 rgba(255,255,255,.12); color:#FFFFFF }
.zap_icon.is-neutral svg{ width:1rem; height:1rem }
.zap_step.is-trigger .zap_icon.is-neutral{ background:#FFFFFF; color:#000 }
.zap_text{ display:grid; min-width:0; line-height:1.25 }
.zap_text b{ font-weight:500; font-size:.8125rem; color:#FFFFFF }
.zap_text span{ font-size:.6875rem; color:rgba(255,255,255,.5) }
.zap_ok{ margin-inline-start:auto; display:grid; place-items:center; width:1.15rem; height:1.15rem; border-radius:50%; background:#FFFFFF; color:#000 }
.zap_ok .ic_check{ width:.6rem; height:.6rem }

/* ---- 07 · chat: straight to the senior team --------------------------- */
.art_chat{ display:grid; place-items:center; padding:1.5rem 1.75rem 1rem }
/* one picture height for the last row, so both cards line up and neither runs into its edge */
.why_card.is-chat .why_art, .why_card.is-zap .why_art{ height:23rem }
.chat_window{
  position:relative; width:min(30rem, 100%); display:grid; border-radius:1rem; overflow:hidden;
  background:linear-gradient(180deg, #1C1C1C, #141414);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.11), inset 0 1px 0 rgba(255,255,255,.08), 0 30px 60px -20px rgba(0,0,0,1), 0 0 60px -10px rgba(255,255,255,.06);
}
.chat_head{ display:flex; align-items:center; gap:.6rem; padding:.7rem .8rem; border-block-end:1px solid rgba(255,255,255,.07) }
.chat_me{ position:relative; flex:none; width:1.75rem; height:1.75rem }
.chat_me img{ width:100%; height:100%; border-radius:50%; object-fit:cover }
.chat_me i{ position:absolute; right:-1px; bottom:-1px; width:.55rem; height:.55rem; border-radius:50%; background:#FFFFFF; box-shadow:0 0 0 2px #1B1B1B, 0 0 8px rgba(255,255,255,.6) }
.chat_who{ display:grid; line-height:1.25 }
.chat_who b{ font-size:.75rem; font-weight:500; color:#FFFFFF }
.chat_who span{ font-size:.625rem; color:rgba(255,255,255,.5) }
.chat_channel{ margin-inline-start:auto; font:.625rem/1 var(--font-mono); color:rgba(255,255,255,.55); padding:.3rem .45rem; border-radius:.4rem; background:rgba(255,255,255,.05); box-shadow:inset 0 0 0 1px rgba(255,255,255,.08) }
.chat_body{ position:relative; height:14.25rem; overflow:hidden; -webkit-mask-image:linear-gradient(to bottom, transparent, #000 1.5rem); mask-image:linear-gradient(to bottom, transparent, #000 1.5rem) }
.chat_track{ display:grid; gap:.55rem; padding:1rem .8rem .8rem; will-change:transform }
.chat_day{ justify-self:center; font:.5625rem/1 var(--font-mono); letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.35) }
.chat_msg{ display:flex; align-items:flex-end; gap:.45rem; max-width:84% }
.chat_msg img{ flex:none; width:1.35rem; height:1.35rem; border-radius:50%; object-fit:cover }
.chat_stack{ display:grid; gap:.3rem; justify-items:start; min-width:0 }
.chat_bubble{ font-size:.75rem; line-height:1.45; padding:.5rem .7rem; border-radius:.9rem }
/* the client writes on the right in white; the studio answers on the left in graphite */
.chat_msg.is-you{ justify-self:end; flex-direction:column; align-items:flex-end; gap:.2rem }
.chat_msg.is-you .chat_bubble{ color:#0A0A0A; background:#FFFFFF; border-end-end-radius:.3rem; box-shadow:0 6px 16px -8px rgba(0,0,0,.6) }
.chat_msg.is-us .chat_bubble{ color:rgba(255,255,255,.88); background:#262626; border-end-start-radius:.3rem; box-shadow:inset 0 0 0 1px rgba(255,255,255,.06) }
.chat_meta{ font:.5625rem/1 var(--font-mono); color:rgba(255,255,255,.35) }
/* the attachment: a preview of the page, then its file row */
.chat_file{ display:grid; width:13rem; border-radius:.75rem; overflow:hidden; background:#1E1E1E; box-shadow:inset 0 0 0 1px rgba(255,255,255,.1), 0 10px 22px -12px rgba(0,0,0,.9) }
.chat_thumb{ display:block; padding:.5rem .5rem 0; background:radial-gradient(rgba(255,255,255,.06) 1px, transparent 1.2px) 0 0 / 8px 8px, #181818 }
.chat_thumb .pg{ border-radius:.35rem .35rem 0 0; padding:.4rem .45rem .5rem; gap:.35rem }
.chat_price{ display:grid; grid-template-columns:repeat(3,1fr); gap:.25rem }
.chat_price i{ height:2.1rem; border-radius:.25rem !important; background:linear-gradient(180deg, #1C1C1C, #141414) !important; box-shadow:inset 0 0 0 1px rgba(255,255,255,.08) }
.chat_price i.is-hot{ background:linear-gradient(180deg, #FFFFFF, #D9D9D9) !important; box-shadow:none }
.chat_file_row{ display:flex; align-items:center; gap:.45rem; padding:.45rem .55rem; border-block-start:1px solid rgba(255,255,255,.07) }
.chat_file_row .brand_tile{ --size:1.35rem }
.chat_file_name{ display:grid; line-height:1.25; min-width:0 }
.chat_file_name b{ font-size:.6875rem; font-weight:500; color:#FFFFFF }
.chat_file_name small{ font:.5625rem/1.2 var(--font-mono); color:rgba(255,255,255,.45) }
.chat_file_row .ic_open{ margin-inline-start:auto; width:.75rem; height:.75rem; color:rgba(255,255,255,.55) }
.chat_typing .chat_bubble{ display:flex; gap:.22rem; padding:.6rem .7rem }
.chat_typing i{ width:.3rem; height:.3rem; border-radius:50%; background:rgba(255,255,255,.7) }
.chat_compose{
  display:flex; align-items:center; gap:.5rem; height:2.4rem; margin:0 .6rem .6rem; padding:0 .3rem 0 .8rem; border-radius:.75rem;
  background:#0F0F0F; box-shadow:inset 0 0 0 1px rgba(255,255,255,.08); font-size:.75rem; color:rgba(255,255,255,.35);
}
.chat_send{ margin-inline-start:auto; display:grid; place-items:center; width:1.8rem; height:1.8rem; border-radius:.55rem; background:#FFFFFF; color:#000 }
.chat_send .ph{ width:.8rem; height:.8rem }

/* small ambient loops, only when motion is welcome */
@media (prefers-reduced-motion: no-preference){
  .chat_typing i{ animation:why-typing 1s ease-in-out infinite }
  .chat_typing i:nth-child(2){ animation-delay:.15s } .chat_typing i:nth-child(3){ animation-delay:.3s }
}
@keyframes why-pulse{ 50%{ opacity:.35 } }
@keyframes why-typing{ 50%{ translate:0 -3px; opacity:1 } 0%,100%{ opacity:.4 } }

@media (max-width:991px){
  .why_card, .why_card.is-review, .why_card.is-map, .why_card.is-speed, .why_card.is-system,
  .why_card.is-zap, .why_card.is-chat{ grid-column:span 6 }
  .why_card.is-flow{ grid-column:1 / -1 }
}
@media (max-width:767px){
  .why_bento{ grid-template-columns:minmax(0,1fr); margin-block-start:2.5rem }
  .why_card, .why_card.is-flow, .why_card.is-review, .why_card.is-map, .why_card.is-speed, .why_card.is-system,
  .why_card.is-zap, .why_card.is-chat{ grid-column:1 / -1 }
  .why_art{ height:15.5rem }
  .why_copy{ padding:.25rem 1.25rem 1.5rem }
  .art_chat, .why_card.is-chat .why_art{ height:auto; padding:1.25rem 1rem .5rem }
  .why_card.is-zap .why_art{ height:18.5rem }
  .chat_body{ height:15rem }
  .chat_msg{ max-width:92% }
  /* phone: too narrow for three parts, so the live site and its switcher carry the story */
  .art_flow{ padding-inline:1.5rem }
  .fl_stage{ grid-template-columns:minmax(0,17rem); justify-content:center }
  .fl_design, .fl_wire{ display:none }
  .fl_site, .fl_under{ grid-column:1 }
  .rv_board{ top:1rem; width:88% }
  .rv_note{ top:9.2rem }
  .why_card.is-review .why_art{ height:17.25rem }   /* the comment wraps to two lines here */
  .rv_board .fl_zoom{ display:none }
  .rv_pin.is-two{ display:none }
}

/* ==========================================================================
   Client stories (the shared quotes block): graphite cards in the Why Amariq
   finish. Equal-height rows (not masonry, which left a hole under the short
   column), so every attribution lines up. On a phone the cards become a
   swipeable row instead of a very long stack.
   ========================================================================== */
.quote_grid{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:1rem; margin-block-start:3.5rem }
.quote_grid .quote{
  --mx:50%; --my:0%;
  margin:0; display:flex; flex-direction:column; gap:1.25rem; padding:1.75rem;
  position:relative; isolation:isolate; overflow:hidden; border-radius:1.25rem;
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(255,255,255,.04), transparent 60%),
    linear-gradient(180deg, #0C0C0C 0%, #060606 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08), inset 0 1px 0 rgba(255,255,255,.06);
  transition:none;
}
.quote_grid .quote:hover{ background-color:transparent }
/* retire the old oversized quote glyph; the rim light and wash follow the pointer */
.quote_grid .quote::before{
  content:""; inset:0; z-index:3; font-size:0; translate:none; pointer-events:none; border-radius:inherit; padding:1px;
  background:radial-gradient(18rem circle at var(--mx) var(--my), rgba(255,255,255,.5), transparent 65%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:0; transition:opacity .4s var(--ease);
}
.quote_grid .quote::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:0; transition:opacity .4s var(--ease);
  background:radial-gradient(26rem circle at var(--mx) var(--my), rgba(255,255,255,.05), transparent 60%);
}
.quote_grid .quote:hover::before, .quote_grid .quote:hover::after{ opacity:1 }
.quote_grid .quote > *{ position:relative; z-index:1 }

.quote_grid .quote_top{ display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:1.75rem; margin:0 }
.quote_logo{ height:1.375rem; width:auto; max-width:9rem; object-fit:contain; object-position:left; filter:brightness(0) invert(1); opacity:.78 }
.quote_logo.is-badge{ height:1.75rem }
.quote_mark{
  margin-inline-start:auto; display:grid; place-items:center; width:1.75rem; height:1.75rem; border-radius:.5rem;
  color:rgba(255,255,255,.55); background:linear-gradient(180deg, #1A1A1A, #111111);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.09), inset 0 1px 0 rgba(255,255,255,.07);
}
.quote_mark .ph{ width:.875rem; height:.875rem }
.quote_grid .quote p{ margin:0; font-size:1rem; line-height:1.6; color:rgba(255,255,255,.86) }

.quote_grid .quote_person{
  margin-block-start:auto; padding-block-start:1.25rem; gap:.75rem;
  border-block-start:1px solid rgba(255,255,255,.07);
}
.quote_grid .quote_person img, .quote_grid .quote_person .quote_initial{
  width:2.5rem; height:2.5rem; box-shadow:0 0 0 2px #0A0A0A, 0 0 0 3px rgba(255,255,255,.14);
}
.quote_grid .quote_person > span:not(.quote_initial){ min-width:0 }
.quote_grid .quote_person b{ font-size:.9375rem; color:#FFFFFF }
/* round arrow button to the project, like the service cards */
.quote_go{
  margin-inline-start:auto; flex:none; display:grid; place-items:center; width:2.25rem; height:2.25rem; border-radius:50%;
  color:#FFFFFF; background:linear-gradient(180deg, #1A1A1A, #111111);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12), inset 0 1px 0 rgba(255,255,255,.08);
  transition:background-color .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease);
}
.quote_go .ph{ width:.875rem; height:.875rem; transition:translate .3s var(--ease) }
.quote_go:hover, .quote_go:focus-visible{ background:#FFFFFF; color:#000; box-shadow:0 0 22px rgba(255,255,255,.25) }
.quote_go:hover .ph{ translate:1px -1px }
.quote_grid .quote:has(.quote_go:focus-visible){ outline:2px solid #FFFFFF; outline-offset:2px }

@media (max-width:991px){
  .quote_grid{ grid-template-columns:repeat(2, minmax(0,1fr)) }
}
/* phones: one swipeable row, the next card peeking in */
@media (max-width:767px){
  /* matches the container's own padding rule, plus one class, so these win */
  .container-large > .quote_grid:not(.grid_lined):not(.is-flush){
    display:flex; gap:.75rem; margin-block-start:2.5rem; overflow-x:auto; overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory; scroll-padding-inline:calc(var(--site--gutter) + var(--cell--pad));
    margin-inline:calc(var(--site--gutter) * -1); padding-inline:calc(var(--site--gutter) + var(--cell--pad)); padding-block-end:.25rem;
    scrollbar-width:none;
  }
  .quote_grid::-webkit-scrollbar{ display:none }
  .quote_grid .quote{ flex:0 0 calc(100vw - 5.25rem); max-width:24rem; scroll-snap-align:start; padding:1.375rem }
}
.pc_card{
  --mx:50%; --my:0%;
  grid-column:span 5; position:relative; isolation:isolate; overflow:hidden; display:flex; flex-direction:column;
  border-radius:1.25rem; background:#FFFFFF;
  box-shadow:0 0 0 1px #E6E6E6, 0 1px 2px rgba(0,0,0,.04), 0 24px 48px -30px rgba(0,0,0,.18);
}
.pc_card.is-design, .pc_card.is-build{ grid-column:span 7 }
/* the soft pointer light, in ink on white */
.pc_card::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:0; transition:opacity .4s var(--ease);
  background:radial-gradient(26rem circle at var(--mx) var(--my), rgba(0,0,0,.035), transparent 60%);
}
.pc_card:hover::after{ opacity:1 }

.pc_art{ position:relative; height:17rem; display:grid; place-items:center; overflow:hidden; transform-style:preserve-3d }
.pc_art::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(60% 70% at 50% 35%, #F7F7F7, transparent 72%),
    radial-gradient(rgba(0,0,0,.09) 1px, transparent 1.2px) 0 0 / 18px 18px;
  -webkit-mask-image:radial-gradient(75% 80% at 50% 40%, #000 35%, transparent 85%);
          mask-image:radial-gradient(75% 80% at 50% 40%, #000 35%, transparent 85%);
}
.pc_copy{ padding:.25rem 1.75rem 1.75rem; display:grid; gap:.625rem; align-content:start; flex:1 }
.pc_copy .h4{ font-size:1.1875rem; letter-spacing:-.02em; color:#0A0A0A }
.pc_copy p.muted{ max-width:46ch; text-wrap:pretty }
.pc_chips .ic_check{ width:.65rem; height:.65rem; color:#0A0A0A }

/* light mini UI: paper windows with a hairline and a soft lift */
.lg_window{
  position:relative; display:block; border-radius:.75rem; overflow:hidden; background:#FFFFFF;
  box-shadow:0 0 0 1px #E4E4E4, 0 1px 0 #FFFFFF inset, 0 20px 40px -18px rgba(0,0,0,.22), 0 4px 10px -6px rgba(0,0,0,.08);
}
.lg_bar{ display:flex; align-items:center; gap:.45rem; height:2.1rem; padding:0 .6rem; border-block-end:1px solid #EFEFEF; font-size:.6875rem; color:#262626; background:linear-gradient(180deg, #FFFFFF, #FAFAFA) }
.lg_bar b{ font-weight:500 }
.lg_bar > .ph{ width:.875rem; height:.875rem; color:#0A0A0A }
.lg_bar .brand_tile{ --size:1rem }
.lg_dots{ display:flex; gap:.22rem }
.lg_dots i{ width:.32rem; height:.32rem; border-radius:50%; background:#DADADA }
.lg_pill .ic_check{ width:.65rem; height:.65rem }
.lg_button .ph{ width:.9rem; height:.9rem }

/* the page drawn light, used by Design and Build */
.lp{ display:grid; gap:.45rem; padding:.55rem .6rem .65rem; background:#FFFFFF }
.lp i{ display:block; border-radius:99px; background:#E6E6E6 }
.lp_nav{ display:flex; align-items:center; gap:.3rem; padding-block-end:.4rem; border-block-end:1px solid #F0F0F0 }
.lp_nav i{ width:.9rem; height:.2rem }
.lp_nav .lp_logo{ width:1.3rem; height:.3rem; background:#0A0A0A; margin-inline-end:auto }
.lp_nav .lp_cta{ width:1.2rem; height:.45rem; background:#0A0A0A; margin-inline-start:.2rem }
.lp_hero{ display:grid; grid-template-columns:1.15fr 1fr; gap:.45rem; align-items:center; padding-block:.2rem }
.lp_text{ display:grid; gap:.25rem; justify-items:start }
.lp .lp_h1{ width:100%; height:.38rem; background:#0A0A0A }
.lp .lp_h1.is-short{ width:70%; background:#8A8A8A }
.lp_p{ width:88%; height:.18rem; margin-block:.1rem }
.lp .lp_btn{ width:1.6rem; height:.5rem; background:#0A0A0A; margin-block-start:.1rem }
.lp .lp_img{ height:2.4rem; border-radius:.3rem; background:radial-gradient(60% 80% at 70% 20%, #FFFFFF, transparent 70%), linear-gradient(160deg, #D9D9D9, #F1F1F1); box-shadow:inset 0 0 0 1px #E4E4E4 }
.lp_cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:.3rem }
.lp .lp_cards i{ height:1.25rem; border-radius:.25rem; background:#F7F7F7; box-shadow:inset 0 0 0 1px #EAEAEA }
/* wireframe state: every block becomes an outline */
.is-wire .lp i{ background:transparent !important; box-shadow:inset 0 0 0 1px #BDBDBD !important }
.call_tile{
  position:relative; display:grid; place-items:center; height:3.6rem; border-radius:.5rem;
  background:linear-gradient(160deg, #2A2A2A, #111111); overflow:hidden;
}
.call_tile.is-you{ background:linear-gradient(160deg, #EDEDED, #D9D9D9) }
.call_tile img{ width:1.9rem; height:1.9rem; border-radius:50%; object-fit:cover; box-shadow:0 0 0 2px rgba(255,255,255,.2) }
.call_tile .rv_avatar{ width:1.9rem; height:1.9rem; background:#0A0A0A; color:#FFFFFF; box-shadow:none }
.call_name{ position:absolute; left:.3rem; bottom:.25rem; font-size:.5rem; font-weight:500; padding:.1rem .3rem; border-radius:.25rem; color:#FFFFFF; background:rgba(0,0,0,.45) }
.call_ring{ position:absolute; left:50%; top:50%; width:1.9rem; height:1.9rem; margin:-.95rem 0 0 -.95rem; border-radius:50%; box-shadow:0 0 0 1.5px rgba(255,255,255,.8); opacity:0 }
.call_notes{ display:grid; align-content:start; gap:.4rem; padding:.5rem; border-radius:.5rem; background:#FAFAFA; box-shadow:inset 0 0 0 1px #EFEFEF }
.call_notes_head{ font:.5625rem/1 var(--font-mono); letter-spacing:.06em; text-transform:uppercase; color:#8A8A8A; margin-block-end:.1rem }
.call_note > .ic_check{ width:.8rem; height:.8rem; padding:.15rem; box-sizing:border-box; border-radius:50%; color:#FFFFFF; background:#0A0A0A; flex:none }
.call_note em .brand_tile{ --size:.7rem }

/* ---- 02 · design: wireframe to approved design ------------------------ */
.pc_card.is-design .lg_window{ width:min(22rem, 84%) }
.dz_tab.is-on{ color:#0A0A0A; background:#FFFFFF; box-shadow:0 1px 2px rgba(0,0,0,.1) }
.bd_width{ margin-inline-start:auto; font:.5625rem/1 var(--font-mono); color:#737373; padding:.15rem .35rem; border-radius:.3rem; background:#F2F2F2 }
.bd_view{ display:block }
.bd_devices{ position:absolute; left:0; right:0; bottom:1.1rem; display:flex; justify-content:center; align-items:center; gap:.3rem }
.bd_dev{ display:inline-flex; align-items:center; gap:.3rem; height:1.75rem; padding:0 .6rem 0 .5rem; border-radius:99px; font-size:.6875rem; color:#737373; background:#FFFFFF; box-shadow:inset 0 0 0 1px #E6E6E6; transition:color .3s var(--ease), background-color .3s var(--ease), box-shadow .3s var(--ease) }
.bd_dev .ph{ width:.8rem; height:.8rem }
.bd_dev.is-on{ color:#FFFFFF; background:#0A0A0A; box-shadow:none }
.ln_step > .ic_check{ width:.8rem; height:.8rem; padding:.15rem; box-sizing:border-box; border-radius:50%; color:#FFFFFF; background:#0A0A0A; flex:none }
.ln_graph_head em .ph{ width:.65rem; height:.65rem }

@media (max-width:991px){
  .pc_card, .pc_card.is-design, .pc_card.is-build{ grid-column:span 6 }
}
@media (max-width:767px){
  .pc_card, .pc_card.is-design, .pc_card.is-build{ grid-column:1 / -1 }
  .pc_art{ height:16rem }
  .pc_copy{ padding:.25rem 1.25rem 1.5rem }
  .bd_dev span{ display:none }
  .bd_dev{ padding:0 .5rem }
}
/* phone-width state of the Build card's page */
.bd_view.is-m .lp_hero{ grid-template-columns:1fr }
.bd_view.is-m .lp_img{ display:none }
.bd_view.is-m .lp_nav i:not(.lp_logo):not(.lp_cta){ display:none }

/* ==========================================================================
   FAQ in the bento finish: each question is its own card (surface, hairline,
   soft lift) instead of a ruled row. The open card gains an ink edge and a
   deeper lift, so the one being read stands out. Token based, so it holds on
   any ground. The accordion motion in site.js/motion.js is unchanged.
   ========================================================================== */
.faq{ display:grid; gap:.625rem }
.faq details{
  --mx:50%; --my:0%;
  border:0; border-radius:1rem; overflow:hidden; isolation:isolate; background:var(--surface);
  box-shadow:0 0 0 1px var(--line), 0 1px 2px rgba(0,0,0,.03), 0 18px 36px -28px rgba(0,0,0,.18);
  transition:box-shadow .45s var(--ease);
}
.faq details::after{ display:none }                /* the open rule is replaced by the card's edge */
.faq details::before{                              /* soft pointer light, as on the bento cards */
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:0; transition:opacity .4s var(--ease);
  background:radial-gradient(24rem circle at var(--mx) var(--my), color-mix(in srgb, var(--text) 4%, transparent), transparent 60%);
}
.faq details:hover::before{ opacity:1 }
.faq details[open]:not(.is-closing){
  box-shadow:0 0 0 1px var(--text), 0 2px 4px rgba(0,0,0,.04), 0 28px 50px -30px rgba(0,0,0,.28);
}
.faq summary{ padding:1.125rem 1.125rem 1.125rem 1.25rem; grid-template-columns:2.5rem minmax(0,1fr) 2.5rem }
.faq summary:hover{ background-color:transparent }
/* the number becomes a small mono tag */
.faq summary::before{
  justify-self:start; display:grid; place-items:center; height:1.5rem; padding:0 .45rem; border-radius:.45rem;
  font-size:.6875rem; background:color-mix(in srgb, var(--text) 5%, transparent); box-shadow:inset 0 0 0 1px var(--line);
  transition:color .25s var(--ease), background-color .3s var(--ease), box-shadow .3s var(--ease);
}
.faq details[open]:not(.is-closing) summary::before{ color:var(--page); background:var(--text); box-shadow:none }
.faq_icon{ background:var(--surface); box-shadow:0 1px 2px rgba(0,0,0,.06) }
.faq_answer_inner{ padding-inline:4.75rem 3.75rem; padding-block-end:1.5rem }
/* answer lists read as the check chips used across the section above */
.faq_answer_inner ul.is-cols li{ padding-inline-start:1.25rem }
@media (max-width:767px){
  .faq summary{ padding:1rem .875rem 1rem 1rem; grid-template-columns:2.25rem minmax(0,1fr) 2.25rem; gap:0 .625rem }
  .faq_icon{ width:2.25rem; height:2.25rem }
  .faq_answer_inner{ padding-inline:1rem 1rem; padding-block-end:1.25rem }
}

/* ---- How it works, detail pass ------------------------------------------ */
.pc_card{ transition:box-shadow .5s var(--ease), translate .5s var(--ease) }
.pc_card:hover{ translate:0 -2px; box-shadow:0 0 0 1px #DDDDDD, 0 2px 4px rgba(0,0,0,.04), 0 34px 60px -32px rgba(0,0,0,.26) }
/* the picture sits on its own tray inside the card, like a product shot */
.pc_art{
  margin:.5rem .5rem 0; height:17.5rem; border-radius:.875rem;
  background:linear-gradient(180deg, #F8F8F8 0%, #F2F2F2 100%);
  box-shadow:inset 0 0 0 1px #ECECEC, inset 0 1px 0 #FFFFFF;
}
.pc_art::before{
  inset:0; border-radius:inherit;
  background:radial-gradient(rgba(0,0,0,.075) 1px, transparent 1.2px) 0 0 / 16px 16px;
  -webkit-mask-image:radial-gradient(80% 85% at 50% 45%, #000 30%, transparent 90%);
          mask-image:radial-gradient(80% 85% at 50% 45%, #000 30%, transparent 90%);
}
.lg_window{ box-shadow:0 0 0 1px rgba(0,0,0,.08), 0 1px 1px rgba(0,0,0,.04), 0 12px 24px -10px rgba(0,0,0,.14), 0 32px 60px -30px rgba(0,0,0,.22) }
.lg_bar{ background:linear-gradient(180deg, #FFFFFF, #FBFBFB) }
.pc_shot.is-design{ width:min(27rem, 86%) }
.pc_shot > .lg_window{ width:100% }
.call_window, .pc_card.is-design .lg_window{ width:100% }

.pc_copy{ padding:1.5rem 1.75rem 1.75rem }
.pc_steps i.is-on{ background:#0A0A0A }
.pc_get_icon{ grid-row:span 2; display:grid; place-items:center; width:2rem; height:2rem; border-radius:50%; background:#0A0A0A; color:#FFFFFF; box-shadow:0 8px 16px -8px rgba(0,0,0,.5) }
.pc_get_icon .ph{ width:.8rem; height:.8rem }
@media (max-width:767px){
  .pc_art{ height:16.5rem; margin:.4rem .4rem 0 }
  .pc_copy{ padding:1.25rem 1.25rem 1.5rem }
}

/* ==========================================================================
   Contact and footer in the bento finish: graphite cards with a hairline, a
   top highlight and a rim light that follows the pointer. Neutral white only;
   the old violet glows behind the photo and on focused fields are retired.
   ========================================================================== */
.contact{ gap:1rem; align-items:stretch }
.contact > *{
  --mx:50%; --my:0%;
  border:0; margin:0; padding:2rem; border-radius:1.25rem; position:relative; isolation:isolate;
  background:radial-gradient(120% 60% at 50% 0%, rgba(255,255,255,.04), transparent 60%), linear-gradient(180deg, #0D0D0D 0%, #060606 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08), inset 0 1px 0 rgba(255,255,255,.06);
}
.contact > *::after{
  content:""; position:absolute; inset:0; z-index:3; pointer-events:none; border-radius:inherit; padding:1px;
  background:radial-gradient(20rem circle at var(--mx) var(--my), rgba(255,255,255,.45), transparent 65%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:0; transition:opacity .4s var(--ease);
}
.contact > *:hover::after{ opacity:1 }
.contact > .founder{ background:radial-gradient(120% 60% at 50% 0%, rgba(255,255,255,.04), transparent 60%), linear-gradient(180deg, #0D0D0D 0%, #060606 100%) }
.contact > .founder::before{
  background:radial-gradient(closest-side, rgba(255,255,255,.09), transparent 72%);
  background-blend-mode:normal; background-size:auto;
}
.founder img{ outline:1px solid rgba(255,255,255,.25); outline-offset:3px }
/* what happens next: a small connected timeline */
.founder_next ol{ padding:0; background:none; border:0; gap:0 }
.founder_next li{ position:relative; grid-template-columns:1.75rem 1fr; gap:.75rem; padding-block-end:1rem; color:rgba(255,255,255,.7) }
.founder_next li:last-child{ padding-block-end:0 }
.founder_next li::before{
  display:grid; place-items:center; width:1.75rem; height:1.75rem; padding:0; border-radius:50%;
  font-size:.625rem; color:#FFFFFF; background:linear-gradient(180deg, #1E1E1E, #121212); box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
}
.founder_next li:not(:last-child)::after{ content:""; position:absolute; left:.875rem; top:1.9rem; bottom:.15rem; width:1px; background:linear-gradient(rgba(255,255,255,.2), rgba(255,255,255,.04)) }
.founder_next li{ align-items:center }

/* form: group headings as tags, fields like the chat composer, a white focus ring */
.form_group{ color:#FFFFFF }
.form_group::before{
  display:grid; place-items:center; height:1.375rem; padding:0 .4rem; border-radius:.4rem; color:#FFFFFF;
  background:rgba(255,255,255,.06); box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
}
.field input,.field select,.field textarea{
  background-color:#0E0E0E; border-color:rgba(255,255,255,.09);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.5);
}
.field input:hover,.field select:hover,.field textarea:hover{ border-color:rgba(255,255,255,.2) }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible{
  border-color:rgba(255,255,255,.7); background-color:#111111;
  box-shadow:0 0 0 3px rgba(255,255,255,.08), inset 0 1px 2px rgba(0,0,0,.5);
}
.form_foot{ border-block-start-color:rgba(255,255,255,.07) }

/* footer: the brand block and link columns become cards with gaps, not ruled columns */
.footer_grid{ gap:.75rem; padding-block:1.5rem .75rem }
.footer_grid > *{
  --mx:50%; --my:0%;
  position:relative; isolation:isolate; border:0 !important; border-radius:1.25rem; padding:2rem 1.75rem !important;
  background:radial-gradient(120% 60% at 50% 0%, rgba(255,255,255,.035), transparent 60%), linear-gradient(180deg, #0C0C0C 0%, #060606 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07), inset 0 1px 0 rgba(255,255,255,.05);
}
.footer_grid > *::after{
  content:""; position:absolute; inset:0; z-index:3; pointer-events:none; border-radius:inherit; padding:1px;
  background:radial-gradient(18rem circle at var(--mx) var(--my), rgba(255,255,255,.4), transparent 65%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:0; transition:opacity .4s var(--ease);
}
.footer_grid > *:hover::after{ opacity:1 }
@media (max-width:860px){ .contact > *{ padding:1.5rem } }
@media (max-width:600px){
  .footer_grid > *{ padding:1.5rem 1.25rem !important }
  .footer_grid > :nth-child(3){ padding-inline-end:1.25rem !important }
}

/* ==========================================================================
   Work in the bento finish: each project is a graphite card with its
   screenshot in a small browser frame (the address bar shows where the card
   goes), a rim light that follows the pointer, and gaps instead of ruled
   cells. Shared by the homepage and the case studies page (with filters).
   ========================================================================== */
.work_grid{ gap:1rem }
.work_grid > .work_card{
  --mx:50%; --my:0%;
  border:0 !important; margin:0 !important; border-radius:1.25rem !important; padding:.625rem .625rem 1.5rem;
  background:radial-gradient(120% 50% at 50% 0%, rgba(255,255,255,.035), transparent 60%), linear-gradient(180deg, #0D0D0D 0%, #060606 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08), inset 0 1px 0 rgba(255,255,255,.06);
}
.work_grid > .work_card:hover{ background-color:transparent }
.work_grid > .work_card::after{
  content:""; position:absolute; inset:0; z-index:3; pointer-events:none; border-radius:inherit; padding:1px;
  background:radial-gradient(22rem circle at var(--mx) var(--my), rgba(255,255,255,.5), transparent 65%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:0; transition:opacity .4s var(--ease);
}
.work_grid > .work_card:hover::after{ opacity:1 }
.work_card > :not(.work_media){ margin-inline:1rem }
/* the browser frame */
.work_card .work_media{
  border:0; border-radius:.875rem; overflow:hidden; background:linear-gradient(180deg, #1C1C1C, #151515);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1), 0 20px 40px -24px rgba(0,0,0,1);
}
.work_card:hover .work_media{ box-shadow:inset 0 0 0 1px rgba(255,255,255,.2), 0 24px 48px -24px rgba(0,0,0,1) }
.work_bar{ display:flex; align-items:center; gap:.5rem; height:1.875rem; padding:0 .6rem }
.work_dots{ display:flex; gap:.22rem; flex:none }
.work_dots i{ width:.32rem; height:.32rem; border-radius:50%; background:rgba(255,255,255,.2) }
.work_url{
  flex:1; min-width:0; height:1.15rem; display:flex; align-items:center; justify-content:center; padding:0 .5rem; border-radius:.35rem;
  font:.625rem/1 var(--font-mono); color:rgba(255,255,255,.5); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  background:#0B0B0B; box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
}
.work_card:hover .work_url{ color:rgba(255,255,255,.85) }
.work_shot{ display:block; overflow:hidden; margin:0 .3rem .3rem; border-radius:.5rem; aspect-ratio:16 / 10; box-shadow:inset 0 0 0 1px rgba(255,255,255,.06) }
.work_shot img{ display:block; width:100%; height:100%; object-fit:cover }
.work_card .work_tags .tag{ background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.1) }
/* the closing row becomes a card strip */
.work_more{
  margin:1rem 0 0 !important; padding:1.125rem 1.25rem 1.125rem 1.5rem; border:0; border-radius:1rem;
  background:linear-gradient(180deg, #0D0D0D 0%, #070707 100%); box-shadow:inset 0 0 0 1px rgba(255,255,255,.08), inset 0 1px 0 rgba(255,255,255,.05);
}
/* inset from the page frame like every other card section */
.container-large > .work_grid{ padding-inline:var(--cell--pad) }
.work_more{ margin-inline:var(--cell--pad) !important }

/* Cards that paint their own ground carry their own colour tokens, so the
   homepage's scroll colour switch (which fades the page tokens on <main>)
   never turns their text dark-on-dark or light-on-light mid-transition. */
.work_grid > .work_card, .work_more, .why_card, .quote_grid .quote, .contact > *{
  --page:#000000; --surface:#0A0A0A; --raised:#141414; --line:#262626; --line-soft:#171717;
  --text:#FFFFFF; --muted:#A3A3A3; --brand-ink:#FFFFFF; --accent:#A3A3A3;
  color:var(--text);
}
.pc_card{
  --page:#FAFAFA; --surface:#FFFFFF; --raised:#F1F1F1; --line:#E0E0E0; --line-soft:#EFEFEF;
  --text:#0A0A0A; --muted:#5C5C5C; --brand-ink:#0A0A0A; --accent:#5C5C5C;
  color:var(--text);
}

/* ==========================================================================
   Services in the bento finish (homepage What we do, and the Services page):
   white cards with gaps, each opening on a small tray where the service sits
   as an app-icon tile (real brand colours for platforms, ink for the rest).
   Fixed light tokens, so the scroll colour switch never reaches them.
   ========================================================================== */
.container-large > .grid_lined:has(> .service_cell){ gap:1rem; padding-inline:var(--cell--pad) }
.grid_lined > .service_cell{
  --page:#FAFAFA; --surface:#FFFFFF; --raised:#F1F1F1; --line:#E0E0E0; --line-soft:#EFEFEF;
  --text:#0A0A0A; --muted:#5C5C5C; --brand-ink:#0A0A0A; --accent:#5C5C5C;
  color:var(--text); min-height:0;
  border:0 !important; margin:0 !important; border-radius:1.25rem !important; padding:.5rem .5rem 1.5rem !important;
  background:#FFFFFF; box-shadow:0 0 0 1px #E6E6E6, 0 1px 2px rgba(0,0,0,.04), 0 24px 48px -30px rgba(0,0,0,.18);
  transition:box-shadow .5s var(--ease), translate .5s var(--ease);
}
.grid_lined > .service_cell:hover{ background-color:#FFFFFF; translate:0 -2px; box-shadow:0 0 0 1px #DADADA, 0 2px 4px rgba(0,0,0,.04), 0 34px 60px -32px rgba(0,0,0,.26) }
.grid_lined > .service_cell::before{ background:radial-gradient(22rem circle at var(--mx, 50%) var(--my, 50%), rgba(0,0,0,.035), transparent 65%) }
.grid_lined > .service_cell > :not(.service_top){ margin-inline:1.25rem }
/* the tray */
.service_cell .service_top{
  position:relative; overflow:hidden; align-items:center; height:7.5rem; margin:0 0 1.5rem; padding:0 1.25rem; border-radius:.875rem;
  background:radial-gradient(rgba(0,0,0,.075) 1px, transparent 1.2px) 0 0 / 14px 14px, linear-gradient(180deg, #F8F8F8 0%, #F1F1F1 100%);
  box-shadow:inset 0 0 0 1px #ECECEC, inset 0 1px 0 #FFFFFF;
}
.service_cell .service_top::after{   /* soft light pooled behind the tile */
  content:""; position:absolute; left:-2rem; top:50%; width:11rem; height:11rem; translate:0 -50%; border-radius:50%; pointer-events:none;
  background:radial-gradient(closest-side, rgba(255,255,255,.95), rgba(255,255,255,0));
}
.service_icon.is-tile{ position:relative; z-index:1; width:auto !important; height:auto !important; border:0 !important; background:none !important; padding:0; box-shadow:none }
.service_icon.is-tile .brand_tile{ --size:3.25rem; box-shadow:inset 0 0 0 1px rgba(255,255,255,.14), inset 0 1px 0 rgba(255,255,255,.28), 0 12px 22px -10px rgba(0,0,0,.45), 0 2px 4px rgba(0,0,0,.08) }
.service_icon.is-tile .brand_tile.is-ink svg{ color:#FFFFFF }
.service_cell:hover .service_icon.is-tile{ background:none !important; color:inherit }
.service_cell .service_num{
  position:relative; z-index:1; display:grid; place-items:center; height:1.5rem; padding:0 .5rem; border-radius:.45rem; font-size:.6875rem;
  color:#0A0A0A; background:#FFFFFF; box-shadow:0 0 0 1px #E6E6E6, 0 2px 6px -2px rgba(0,0,0,.1);
}
.service_cell:hover .service_num{ color:#FFFFFF; background:#0A0A0A; box-shadow:none }
.service_cell .h3{ font-size:1.25rem }
/* tags as the soft chips used across the page */
.service_cell .service_tags .tag{ height:1.75rem; padding:0 .65rem; border:0; border-radius:99px; font-family:inherit; font-size:.75rem; color:#262626; background:#F6F6F6; box-shadow:inset 0 0 0 1px #E8E8E8 }
.service_cell:hover .service_tags .tag{ color:#0A0A0A }
.service_cell .service_more{ border-block-start-color:#EFEFEF }
.service_cell .service_arrow{ background:#0A0A0A; border-color:#0A0A0A; color:#FFFFFF; box-shadow:0 8px 16px -8px rgba(0,0,0,.5) }
/* the dark recommendation card sits in the grid as one more rounded card */
.grid_lined:has(> .service_cell) > .service_cta{ border:0 !important; margin:0 !important; border-radius:1.25rem !important }
@media (max-width:767px){
  .grid_lined > .service_cell > :not(.service_top){ margin-inline:1rem }
  .service_cell .service_top{ height:6.5rem }
}

/* ==========================================================================
   Hero and nav, premium pass.
   Nav: on desktop, once the page scrolls, the bar dissolves and the links sit
   in a floating glass capsule (site.js sets html.is-scrolled). Phones keep the
   full bar, which the phone menu is anchored to.
   Hero: a badge with the four platform tiles, the proof row as a capsule, and
   two small UI cards framing the copy on wide screens.
   ========================================================================== */
.header{ transition:background-color .45s var(--ease), border-color .45s var(--ease) }
.header_inner::before{
  content:""; position:absolute; inset:.1875rem -1.25rem; z-index:-1; border-radius:99px; pointer-events:none;
  background:linear-gradient(180deg, rgba(24,24,24,.94), rgba(10,10,10,.94));   /* near-solid, so it stays black over the light sections too */
  -webkit-backdrop-filter:saturate(1.4) blur(16px); backdrop-filter:saturate(1.4) blur(16px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1), inset 0 1px 0 rgba(255,255,255,.08), 0 18px 40px -16px rgba(0,0,0,.8);
  opacity:0; scale:.985; transition:opacity .45s var(--ease), scale .45s var(--ease);
}
.nav a, .nav button{ transition:color .18s var(--ease), background-color .25s var(--ease) }
.nav a:hover, .nav button:hover, .dropdown[data-open="true"] > button{ background-color:rgba(255,255,255,.06) }
.header_cta .button{ box-shadow:inset 0 -1px 0 rgba(0,0,0,.12), 0 6px 18px -6px rgba(255,255,255,.28) }
.scroll_progress{ transition:opacity .3s var(--ease) }
@media (min-width:992px){
  html.is-scrolled .header{ background:transparent; border-block-end-color:transparent; -webkit-backdrop-filter:none; backdrop-filter:none }
  /* the capsule floats a little lower than the bar, with 10px of air round the button */
  .header_inner{ transition:translate .45s var(--ease) }
  html.is-scrolled .header_inner{ translate:0 .5rem }
  html.is-scrolled .header_inner::before{ opacity:1; scale:1 }
  /* the reading line runs along the capsule's floor instead of the page edge */
  html.is-scrolled .scroll_progress{ inset-inline:calc(50% - min(var(--site--width), 100% - 2 * var(--site--gutter)) / 2 + 1.5rem); inset-block-end:-.3125rem; border-radius:99px }
}

/* hero badge */
.hero_badge{
  display:inline-flex; align-items:center; gap:.625rem; height:2.25rem; padding:0 .9rem 0 .3rem; border-radius:99px;
  font-size:.8125rem; color:rgba(255,255,255,.8);
  background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1), inset 0 1px 0 rgba(255,255,255,.07);
}
.hero_badge_tiles{ display:flex }
.hero_badge_tiles .brand_tile{ --size:1.625rem; box-shadow:0 0 0 2px #0A0A0A, inset 0 0 0 1px rgba(255,255,255,.14) }
.hero_badge_tiles .brand_tile + .brand_tile{ margin-inline-start:-.375rem }

/* proof as a capsule */
.hero .hero_proof.is-capsule{
  display:inline-flex; margin-inline:auto; padding:.375rem 1rem .375rem .375rem; border-radius:99px; gap:.75rem;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.015));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.09), inset 0 1px 0 rgba(255,255,255,.06);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
.hero_inner{ display:flex; flex-direction:column; align-items:center }
.hero_proof.is-capsule .avatars img{ border-color:#111111 }

@media (max-width:600px){
  .hero_badge{ font-size:.75rem; white-space:nowrap; gap:.5rem; padding-inline-end:.75rem }
  .hero_badge_tiles .brand_tile{ --size:1.375rem }
  .hero .hero_proof.is-capsule{ border-radius:1.25rem; padding:.875rem 1.125rem; gap:.625rem }
  .hero .hero_proof.is-capsule p{ font-size:.8125rem }
}
@media (max-width:600px){ .header_cta .button .arrow{ display:none } }

/* ==========================================================================
   Logo band, premium pass: no flat grey block. The band is the page ground
   with a faint lift, hairlines that fade out at both ends, a label cell on
   the left, and logos at a quiet 55% that light up one by one on hover.
   ========================================================================== */
.band.logo_band{
  position:relative; border:0;
  background:linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,0) 60%), #030303;
}
.band.logo_band::before, .band.logo_band::after{
  content:""; position:absolute; inset-inline:0; height:1px; pointer-events:none;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.14) 20%, rgba(255,255,255,.14) 80%, transparent);
}
.band.logo_band::before{ top:0 } .band.logo_band::after{ bottom:0 }
.logo_row{ display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center }
.logo_label{
  position:relative; padding-inline:var(--cell--pad) 2rem; margin:0; white-space:nowrap;
  font:.6875rem/1.4 var(--font-mono); letter-spacing:.06em; text-transform:uppercase; color:var(--muted);
}
.logo_label .count{ color:#FFFFFF }
.logo_label::after{ content:""; position:absolute; right:0; top:50%; height:2rem; translate:0 -50%; width:1px; background:linear-gradient(transparent, rgba(255,255,255,.18), transparent) }
.logo_band .logo_marquee{
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
          mask-image:linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
}
.logo_band .logo_track img{ opacity:.5; filter:grayscale(1); transition:opacity .35s var(--ease) }
.logo_band .logo_track img:hover{ opacity:1 }
@media (max-width:767px){
  .logo_row{ grid-template-columns:1fr }
  .logo_label{ text-align:center; padding:1.5rem 0 0 }
  .logo_label::after{ display:none }
  .logo_band .logo_marquee{ padding-block:1.25rem 1.75rem }
}

/* ---- Service trays: a small UI scene per service, peeking up from the tray floor.
   Tile top-left, number under it, the scene to the right and cropped at the
   bottom like a product shot. Static, so it costs nothing to scroll past. */
.service_cell .service_top{ height:10.5rem; align-items:flex-start; padding:1.25rem; display:block }
.service_cell .service_top::after{ left:-3rem; top:2.75rem; translate:none }
.service_cell .service_top .service_icon.is-tile{ position:absolute; left:1.25rem; top:1.25rem }
.service_cell .service_top .service_num{ position:absolute; left:1.25rem; bottom:1.25rem; z-index:2 }
.sv_scene{ position:absolute; left:6.25rem; right:-1px; top:1.5rem; bottom:0; transition:translate .5s var(--ease) }
.service_cell:hover .sv_scene{ translate:0 -4px }
.sv_win{
  position:absolute; inset:0 0 -1.25rem 0; display:block; border-radius:.75rem 0 0 0; overflow:hidden; background:#FFFFFF;
  box-shadow:0 0 0 1px rgba(0,0,0,.08), 0 14px 30px -12px rgba(0,0,0,.2), 0 3px 8px -4px rgba(0,0,0,.08);
}
.sv_bar{ display:flex; align-items:center; gap:.4rem; height:1.6rem; padding:0 .55rem; border-block-end:1px solid #F0F0F0; background:linear-gradient(180deg,#FFFFFF,#FAFAFA); font-size:.5625rem; color:#262626; white-space:nowrap }
.sv_dots{ display:flex; gap:.18rem; flex:none }
.sv_dots i{ width:.28rem; height:.28rem; border-radius:50%; background:#DADADA }
.sv_name{ font-weight:500 }
.sv_url{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; height:1rem; display:flex; align-items:center; padding:0 .4rem; border-radius:.3rem; background:#F3F3F3; font:.5rem/1 var(--font-mono); color:#737373 }
.sv_btn{ margin-inline-start:auto; padding:.15rem .45rem; border-radius:.3rem; background:#0A0A0A; color:#FFFFFF; font-size:.5rem; font-weight:500 }
.sv_up{ margin-inline-start:auto; display:inline-flex; align-items:center; gap:.2rem; font-weight:500 }
.sv_up .ph{ width:.6rem; height:.6rem }
.sv_body{ display:block; padding:.5rem .6rem }
.sv_body .lp{ padding:0; gap:.4rem }
.sv_body .lp .lp_img{ height:2.4rem }
.sv_cursor{ position:absolute; left:48%; top:3.6rem; display:flex; align-items:flex-start; z-index:2 }
.sv_cursor svg{ width:.8rem; height:.8rem; color:#0A0A0A; filter:drop-shadow(0 0 1px #FFF) drop-shadow(0 2px 3px rgba(0,0,0,.3)) }
.sv_cursor span{ margin-block-start:.65rem; padding:.1rem .3rem; border-radius:.22rem; background:#0A0A0A; color:#FFFFFF; font-size:.5rem; font-weight:600 }
.sv_pill{ position:absolute; right:.6rem; bottom:1.75rem; display:inline-flex; align-items:center; gap:.2rem; height:1.1rem; padding:0 .45rem 0 .35rem; border-radius:99px; background:#0A0A0A; color:#FFFFFF; font-size:.5625rem; font-weight:500; box-shadow:0 6px 14px -6px rgba(0,0,0,.5) }
.sv_pill .ic_check{ width:.5rem; height:.5rem }
/* wordpress editor */
.sv_editor{ display:grid; grid-template-columns:2.25rem 1fr; gap:.5rem }
.sv_blocks{ display:grid; gap:.3rem }
.sv_blocks i{ height:.8rem; border-radius:.2rem; background:#F2F2F2; box-shadow:inset 0 0 0 1px #E8E8E8 }
.sv_blocks i:first-child{ background:#0A0A0A; box-shadow:none }
.sv_canvas{ display:grid; gap:.35rem; align-content:start; padding:.4rem; border-radius:.3rem; box-shadow:inset 0 0 0 1px #0A0A0A }
.sv_canvas i, .sv_pinfo i{ display:block; height:.3rem; border-radius:99px; background:#E4E4E4 }
.sv_canvas .w1{ width:80%; height:.4rem; background:#0A0A0A } .sv_canvas .w2{ width:60% } .sv_canvas .w3{ width:70% } .sv_canvas .w4{ width:1.6rem; height:.5rem; background:#0A0A0A }
/* shopify product */
.sv_product{ display:grid; grid-template-columns:1fr 1.1fr; gap:.55rem; align-items:start }
.sv_img{ display:block; height:4.5rem; border-radius:.35rem; background:radial-gradient(60% 70% at 60% 30%, #FFFFFF, transparent 70%), linear-gradient(160deg,#D9D9D9,#EFEFEF) }
.sv_pinfo{ display:grid; gap:.3rem }
.sv_pinfo .w1{ width:90%; height:.38rem; background:#0A0A0A } .sv_pinfo .w2{ width:45% }
.sv_stars{ font-size:.5rem; letter-spacing:.08em; color:#0A0A0A }
.sv_cart{ display:grid; place-items:center; height:1.2rem; border-radius:.3rem; background:#0A0A0A; color:#FFFFFF; font-size:.5rem; font-weight:500 }
.sv_frame.is-b{ background:linear-gradient(#0A0A0A 30%, #FFFFFF 30%); box-shadow:inset 0 0 0 1.5px #0A0A0A }
/* ecommerce checkout */
.sv_steps{ display:flex; align-items:center; gap:.25rem; margin-block:.2rem .6rem }
.sv_steps > i{ flex:1; height:1px; background:#0A0A0A }
.sv_step{ display:grid; justify-items:center; gap:.2rem; font-size:.5rem; color:#262626 }
.sv_step b{ font-weight:500 }
.sv_step .ic_check, .sv_step em{ display:grid; place-items:center; width:1.05rem; height:1.05rem; padding:.2rem; box-sizing:border-box; border-radius:50%; background:#0A0A0A; color:#FFFFFF; font-style:normal; font-size:.5rem; font-weight:600 }
.sv_step.is-on em{ background:#FFFFFF; color:#0A0A0A; box-shadow:inset 0 0 0 1.5px #0A0A0A }
.sv_total{ display:grid; grid-template-columns:1fr 3.2rem; gap:.5rem; align-items:center }
.sv_total i{ height:.35rem; border-radius:99px; background:#E4E4E4 }
.sv_aa{ font-size:2.5rem; font-weight:500; letter-spacing:-.04em; line-height:1; color:#0A0A0A }
/* redesign chart */
.sv_chart svg{ display:block; width:100%; height:4.25rem }
.sv_chart .a{ fill:rgba(0,0,0,.06) } .sv_chart .l{ fill:none; stroke:#0A0A0A; stroke-width:1.75; vector-effect:non-scaling-stroke; stroke-linecap:round }
/* speed */
.sv_speed{ display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto; column-gap:.75rem; align-items:center }
.sv_speed svg{ grid-row:span 2; width:4.5rem; height:auto; fill:none; stroke-linecap:round; stroke-width:9 }
.sv_speed .t{ stroke:#EFEFEF } .sv_speed .f{ stroke:#0A0A0A; stroke-dasharray:100; stroke-dashoffset:8 }
.sv_speed b{ font-size:1rem; font-weight:500; color:#0A0A0A }
.sv_vitals .ic_check{ width:.45rem; height:.45rem }
@media (max-width:767px){ .service_cell .service_top{ height:10rem } }

/* ---- Service scenes, second pass: real labels and each tool's own cues ---- */
.sv_bar{ height:1.75rem; font-size:.625rem }
.sx_pub.is-wf{ background:#146EF5 } .sx_pub.is-wp{ background:#3858E9 } .sx_pub.is-fr{ background:#0099FF }
.sx_lock .ph{ width:.55rem; height:.55rem }
.sv_body{ padding:0 }
.sx_split.is-right{ grid-template-columns:1fr 4.5rem }
.sx_layers span .ph{ width:.55rem; height:.55rem; opacity:.7 }
.sx_layers span.is-on{ background:#0A0A0A; color:#FFFFFF }
.sx_sel.is-wp{ border-color:#3858E9 }
.sv_cursor{ left:auto; right:24%; top:4.25rem }
.sv_pill{ bottom:1.6rem }
/* shopify */
.sv_product{ padding:.55rem .6rem; grid-template-columns:1fr 1fr }
.sx_sizes i.is-on{ background:#0A0A0A; color:#FFFFFF; box-shadow:none }
.sx_info .sv_cart{ width:100% }
.sx_fr .sv_frame.is-b{ box-shadow:inset 0 0 0 1.5px #0099FF; background:linear-gradient(#0A0A0A 30%, #FFFFFF 30%) }
/* checkout */
.sv_steps{ margin:.55rem .6rem .5rem }
.sx_card .sv_cart{ padding-inline:.6rem; height:1.45rem }
/* chart */
.sv_chart{ display:block; padding:.5rem .6rem 0 }
.sv_chart .m{ stroke:#0A0A0A; stroke-dasharray:2 2; vector-effect:non-scaling-stroke; stroke-width:1 }
/* speed */
.sv_speed{ padding:.6rem .7rem }
.sx_canvas:has(.sx_sel.is-wp) .sx_h{ outline-color:#3858E9 }
.pc_card .sv_pill, .service_cell .sv_pill{ right:auto; left:.6rem }
.sv_speed{ grid-template-columns:auto 1fr auto }
.sx_vit{ grid-row:span 2; display:grid; gap:.25rem; font:.5rem/1 var(--font-mono); color:#262626 }
.sx_vit span{ display:grid; grid-template-columns:1.6rem 3rem; align-items:center; gap:.3rem }
.sx_vit i{ height:.2rem; border-radius:99px; background:linear-gradient(90deg,#0A0A0A var(--w),#EFEFEF var(--w)) }
/* keep the cursor and the Published pill in clear space */
.service_cell .sv_cursor{ right:14%; top:5.1rem }
.service_cell .sv_pill{ left:auto; right:5.1rem; bottom:1.6rem }
.sx_fr .sv_frame.is-b{ background:#FFFFFF; box-shadow:0 0 0 1.5px #0099FF, 0 4px 10px -6px rgba(0,0,0,.15) }
.fr_cols span.is-hot{ background:#0A0A0A; box-shadow:none; translate:0 -.1rem }
.fr_cols span.is-hot b{ color:#FFFFFF } .fr_cols span.is-hot i{ background:rgba(255,255,255,.35) }
/* Brand guidelines scene: logo with clear space, type scale, coded palette, business card */
.bg_grid{ display:grid; grid-template-columns:4rem auto 1fr; grid-template-rows:auto auto; gap:.45rem .55rem; padding:.5rem .55rem }
.bg_logo{ grid-row:span 2; position:relative; display:grid; place-items:center; align-content:center; gap:.2rem; border-radius:.35rem; background:#0A0A0A; padding:.5rem .3rem .35rem }
.bg_mark{ width:1.6rem; height:1.6rem; fill:none; stroke:#FFFFFF; stroke-width:2.2 }
.bg_mark .o{ stroke:#8A8A8A }
.bg_logo em{ font-style:normal; font-size:.375rem; color:rgba(255,255,255,.6) }
.bg_cs i{ position:absolute; width:.35rem; height:.35rem; border-color:rgba(255,255,255,.45); border-style:solid; border-width:0 }
.bg_cs i:nth-child(1){ left:.3rem; top:.3rem; border-left-width:1px; border-top-width:1px }
.bg_cs i:nth-child(2){ right:.3rem; top:.3rem; border-right-width:1px; border-top-width:1px }
.bg_cs i:nth-child(3){ left:.3rem; bottom:.3rem; border-left-width:1px; border-bottom-width:1px }
.bg_cs i:nth-child(4){ right:.3rem; bottom:.3rem; border-right-width:1px; border-bottom-width:1px }
.bg_type{ display:flex; align-items:center; gap:.4rem }
.bg_type .sv_aa{ font-size:1.9rem }
.bg_bcard{ grid-column:3; grid-row:1; justify-self:end; display:flex; align-items:center; gap:.3rem; width:5.2rem; height:2.3rem; padding:0 .45rem; border-radius:.25rem; background:#FFFFFF; box-shadow:0 0 0 1px #E4E4E4, 0 6px 14px -6px rgba(0,0,0,.25); rotate:4deg }
.bg_mark.is-sm{ width:.9rem; height:.9rem; stroke:#0A0A0A; stroke-width:2.6 }
.bg_mark.is-sm .o{ stroke:#8A8A8A }
.bg_bcard span{ display:grid; gap:.12rem }
.bg_bcard b{ font-size:.4375rem; font-weight:600; color:#0A0A0A }
.bg_bcard i{ width:1.6rem; height:.12rem; border-radius:99px; background:#D9D9D9 }
.bg_bcard{ width:4.6rem; margin-inline-end:.55rem; rotate:3deg }

/* ---- Service scenes, skeleton pass: grey bars instead of words, refined ---- */
.sv_body.is-sk{ padding:.5rem .6rem }
.sk_split{ display:grid; grid-template-columns:2.6rem 1fr; gap:.5rem; margin:-.5rem -.6rem; padding:.5rem .6rem .5rem 0 }
.sk_split.is-r{ grid-template-columns:1fr 2.6rem; padding:.5rem 0 .5rem .6rem }
.sk_side{ display:grid; align-content:start; gap:.3rem; padding:.1rem .4rem; border-inline-end:1px solid #F0F0F0 }
.sk_split.is-r .sk_side{ border-inline-end:0; border-inline-start:1px solid #F0F0F0 }
.sk_side i{ height:.42rem; border-radius:.15rem; background:#EFEFEF }
.sk_side i:nth-child(2n){ width:75% }
.sk_side i.is-on{ background:#0A0A0A }
.sk_canvas{ display:block }
.lp .lp_h1.is-sel{ outline:1px solid #0D99FF; outline-offset:2px }
.service_cell .sv_cursor{ right:16%; top:4.4rem }
.service_cell .sv_pill{ left:auto; right:3.6rem; bottom:1.5rem }
/* shopify options */
.sk_opts{ display:flex; align-items:center; gap:.2rem }
.sk_opts b{ width:.55rem; height:.55rem; border-radius:50%; background:#0A0A0A }
.sk_opts b:nth-child(2){ background:#8A8A8A } .sk_opts b:nth-child(3){ background:#E0E0E0; margin-inline-end:.3rem }
.sk_opts em{ width:.8rem; height:.55rem; border-radius:.15rem; box-shadow:inset 0 0 0 1px #E0E0E0 }
.sk_opts em.is-on{ background:#0A0A0A; box-shadow:none }
.sk_frame .lp{ gap:.25rem } .sk_frame .lp .lp_img{ height:1.2rem } .sk_frame .lp_cards i{ height:.6rem }
.sk_frame.is-b{ box-shadow:0 0 0 1.5px #0A0A0A, 0 4px 10px -6px rgba(0,0,0,.2); display:grid; gap:.3rem; align-content:start }
.sk_cols span.is-hot{ background:#0A0A0A; box-shadow:none; translate:0 -.1rem }
.sk_cols span.is-hot i{ background:rgba(255,255,255,.3) } .sk_cols span.is-hot i:first-child{ background:#FFFFFF }
/* checkout field */
.sk_field{ display:flex; align-items:center; gap:.4rem; height:1rem; padding:0 .4rem; margin-block-end:.45rem; border-radius:.3rem; box-shadow:inset 0 0 0 1px #E0E0E0 }
.sk_field i{ height:.2rem; border-radius:99px; background:#D9D9D9; width:55% } .sk_field i:last-child{ width:1.2rem; margin-inline-start:auto; background:#0A0A0A }
/* brand */
.bg_grid{ padding:0 } .bg_logo{ padding:.55rem .3rem }
.sk_scale{ display:grid; gap:.2rem } .sk_scale i{ height:.3rem; width:2.2rem; border-radius:99px; background:#0A0A0A } .sk_scale i:nth-child(2){ width:1.6rem; background:#8A8A8A } .sk_scale i:nth-child(3){ width:1.9rem; background:#D9D9D9 }
.sk_pal{ grid-column:2 / -1; display:grid; grid-template-columns:repeat(4,1fr); height:1.3rem; border-radius:.3rem; overflow:hidden; box-shadow:inset 0 0 0 1px #E4E4E4 }
.bg_bcard .sk_scale i{ width:1.6rem; height:.22rem } .bg_bcard .sk_scale i:nth-child(2){ width:1.1rem }
/* chart axis */
.sk_axis{ display:flex; justify-content:space-between; margin-block-start:.3rem } .sk_axis i{ width:1rem; height:.18rem; border-radius:99px; background:#E0E0E0 }
.sv_chart{ padding:.2rem 0 0 }
/* speed */
.sv_speed{ padding:.2rem 0 }
.sx_vit span{ grid-template-columns:3.4rem }
.sk_frame.is-b{ align-content:center; gap:.4rem }
.sv_speed{ grid-template-columns:auto 1fr; column-gap:.9rem }
.sv_speed .sx_vit{ grid-column:2; grid-row:2; display:grid; gap:.25rem }
.sv_speed .sx_vit span{ display:grid; grid-template-columns:1rem 1fr; gap:.3rem; align-items:center }
.sv_speed .sx_vit span::before{ content:""; height:.2rem; border-radius:99px; background:#BDBDBD }
.sv_speed .sx_vit i{ height:.22rem }

/* ==========================================================================
   How it works, stacked again (premium pass). Each step card pairs its copy
   with a looping illustration on a tray to the right; fixed light tokens so
   the scroll colour switch cannot touch it (the finale keeps its dark ones).
   ========================================================================== */
.process_card:not(.is-finale){
  --page:#FAFAFA; --surface:#FFFFFF; --raised:#F1F1F1; --line:#E6E6E6; --line-soft:#EFEFEF;
  --text:#0A0A0A; --muted:#5C5C5C; --brand-ink:#0A0A0A; --accent:#5C5C5C;
  color:var(--text); border:0; background:#FFFFFF;
  box-shadow:0 0 0 1px #E6E6E6, 0 2px 4px rgba(0,0,0,.03), 0 30px 60px -36px rgba(0,0,0,.3);
}
.process_card{ padding:clamp(1.25rem, .8rem + 1.2vw, 1.75rem) }
.process_card_head{ padding-inline:.25rem }
.process_card_body{ grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:1.5rem clamp(1.5rem, 4vw, 3.5rem); align-items:stretch; padding-block-start:1.25rem }
.process_card_main{ display:flex; flex-direction:column; padding:.5rem .25rem .25rem }
.process_card_title{ margin-block-start:1.25rem }
.process_card_list{ margin:1.25rem 0 0; border:0; display:flex; flex-wrap:wrap; gap:.375rem }
.process_card_list li{ border:0; padding:0 .7rem 0 .55rem; height:1.875rem; gap:.35rem; border-radius:99px; font-size:.8125rem; background:color-mix(in srgb, var(--text) 5%, transparent); box-shadow:inset 0 0 0 1px var(--line) }
.process_card_list li::before{ display:none }
.process_card_list .ic_check{ width:.65rem; height:.65rem }
.process_card_outcome{ margin-block-start:auto; display:grid; grid-template-columns:auto 1fr; gap:.875rem; align-items:center; padding:1rem 0 0; border:0; border-radius:0; background:none; border-block-start:1px solid var(--line-soft) }
.process_card .pc_get_icon{ background:var(--text); color:var(--page) }
.process_card_main > .process_card_list + .process_card_outcome{ margin-block-start:auto }
.process_card_main{ gap:0 }
.process_card_main .process_card_list{ margin-block-end:1.5rem }
/* the illustration tray */
.process_card .pc_art{ margin:0; height:auto; min-height:18rem; border-radius:1rem }
.process_card.is-finale .pc_art{ background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); box-shadow:inset 0 0 0 1px rgba(255,255,255,.1) }
.process_card.is-finale .pc_art::before{ background:radial-gradient(rgba(255,255,255,.08) 1px, transparent 1.2px) 0 0 / 16px 16px }
.process_card.is-finale .process_card_list li{ color:#FFFFFF }
@media (max-width:767px){
  .process_card_body{ grid-template-columns:1fr }
  .process_card .pc_art{ min-height:16rem; order:-1 }
}
/* The step number: only the rolling digits paint. The wrapper used to carry the same
   text-clipped gradient, and while the digits rolled or the card scaled Chrome painted
   that copy at the old position, leaving slivers of digits above the number. The fade
   is now a mask on solid ink, which composites cleanly under transforms. */
.process_card_num{ background:none !important; -webkit-background-clip:border-box; background-clip:border-box; color:var(--text) }
.process_card_num_i{
  background:none !important; -webkit-background-clip:border-box; background-clip:border-box; color:var(--text);
  -webkit-mask-image:linear-gradient(180deg, #000 0%, rgba(0,0,0,.32) 100%); mask-image:linear-gradient(180deg, #000 0%, rgba(0,0,0,.32) 100%);
}
/* Scrolled nav: the capsule draws in from both sides to hug logo, links and button */
@media (min-width:992px){
  .header_inner{ max-width:var(--site--width); margin-inline:auto; transition:translate .45s var(--ease), max-width .7s cubic-bezier(.625,.05,0,1) }
  html.is-scrolled .header_inner{ max-width:54rem }
  html.is-scrolled .scroll_progress{ inset-inline:calc(50% - 27rem + 1.5rem) }
}
/* Capsule: gentler corners, and edges 11px from logo and button, like the vertical air.
   header_inner carries the frame's inner padding (--cell--pad), so the capsule insets by it. */
@media (min-width:992px){
  .header_inner::before{ inset:.1875rem calc(var(--cell--pad) - .6875rem); border-radius:1rem }
  html.is-scrolled .header_inner{ max-width:calc(49rem + 2 * var(--cell--pad)) }
  html.is-scrolled .scroll_progress{ inset-inline:calc(50% - 24.5rem + 1rem) }
}
/* Framer scene: one screen with its interaction panel, like the other cards */
.sk_side.is-fr i.is-on{ background:#0099FF }
.lp .lp_btn.is-hot{ box-shadow:0 0 0 1.5px #FFFFFF, 0 0 0 3px #0099FF }

/* ---- How it works illustrations: one focal window filling the tray -------- */
.process_card .pc_art{ display:grid; place-items:center; padding:1.5rem }
.pc_art .lg_window, .pc_art .ln_panel, .pc_art .bd_browser{ width:100% }
.call_tile{ height:4.6rem; border-radius:.6rem }
.call_tile img, .call_tile .rv_avatar{ width:2.4rem; height:2.4rem }
.call_notes{ gap:.55rem; padding:.7rem }
/* 02 design */
.pc_shot.is-design{ width:min(26rem, 100%) }
.is-wire .lp i{ box-shadow:inset 0 0 0 1px #A8A8A8 !important }
.bd_devices{ position:static; margin-block-start:1rem; padding:3px; border-radius:99px; background:#F1F1F1; box-shadow:inset 0 0 0 1px #E6E6E6; gap:0 }
.bd_dev{ box-shadow:none; background:transparent }
.bd_dev.is-on{ box-shadow:0 1px 3px rgba(0,0,0,.18) }
.ln_step > .ic_check{ width:1rem; height:1rem }
.art_speed, .art_system, .art_call, .art_design{ padding-inline:0 }
/* the tray centres its group as a whole, instead of stretching rows apart */
.process_card .pc_art{ align-content:center; gap:1.25rem; grid-template-columns:minmax(0,1fr) }

/* ==========================================================================
   Step 04, Launch & grow. Two dark screens on one stage, in the Why Amariq
   language: the rocket leaves the pad, then the growth panel takes over.
   ========================================================================== */
.lx_stage{ position:relative; width:min(26rem, 100%); height:17rem }
.lx_scene{
  position:absolute; inset:0; overflow:hidden; border-radius:.875rem;
  display:grid; grid-template-rows:auto minmax(0,1fr) auto auto; gap:.7rem;
  padding:.65rem .75rem .8rem; will-change:transform, opacity;
}
.lx_growth{ grid-template-rows:auto minmax(0,1fr) auto; gap:.6rem; opacity:0; visibility:hidden }
.lx_top{
  display:flex; align-items:center; gap:.45rem; padding:.1rem .15rem .55rem;
  border-block-end:1px solid rgba(255,255,255,.08); font-size:.75rem; color:#FFFFFF;
}
.lx_top b{ font-weight:500 }
.lx_top > .ph{ width:.95rem; height:.95rem; color:rgba(255,255,255,.7) }
.lx_status{
  margin-inline-start:auto; font:500 .625rem/1 var(--font-mono); letter-spacing:.04em;
  padding:.3rem .5rem; border-radius:99px; color:rgba(255,255,255,.78);
  background:rgba(255,255,255,.07); box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);
}
.lx_status.is-live{ color:#0A0A0A; background:#FFFFFF; box-shadow:0 0 18px rgba(255,255,255,.3) }

/* the pad: a small night sky the rocket climbs out of */
.lx_sky{
  position:relative; overflow:hidden; border-radius:.625rem;
  background:radial-gradient(90% 70% at 50% 100%, rgba(255,255,255,.07), transparent 72%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);
}
.lx_spark{ position:absolute; width:2px; height:2px; border-radius:99px; background:#FFFFFF; opacity:.4 }
.lx_spark:nth-child(1){ left:14%; top:20% }
.lx_spark:nth-child(2){ left:30%; top:47%; opacity:.22 }
.lx_spark:nth-child(3){ left:67%; top:16%; width:3px; height:3px; opacity:.55 }
.lx_spark:nth-child(4){ left:83%; top:52%; opacity:.25 }
.lx_spark:nth-child(5){ left:50%; top:8%; opacity:.3 }
.lx_spark:nth-child(6){ left:22%; top:64%; opacity:.18 }
.lx_spark:nth-child(7){ left:76%; top:31%; width:3px; height:3px; opacity:.45 }
.lx_spark:nth-child(8){ left:41%; top:26%; opacity:.2 }
.lx_spark:nth-child(9){ left:90%; top:12%; opacity:.28 }
.lx_spark:nth-child(10){ left:9%; top:44%; opacity:.24 }
/* shockwave rings that leave the pad at ignition */
.lx_ring{
  position:absolute; left:50%; bottom:1.1rem; translate:-50% 50%; width:3rem; height:3rem;
  border-radius:50%; box-shadow:inset 0 0 0 1px rgba(255,255,255,.26); opacity:0;
}
.lx_ground{ position:absolute; left:14%; right:14%; bottom:1.1rem; height:1px; background:linear-gradient(90deg, transparent, rgba(255,255,255,.3), transparent) }
.lx_flare{
  position:absolute; left:50%; bottom:.2rem; translate:-50% 0; width:6.5rem; height:2.1rem;
  border-radius:50%; filter:blur(5px); opacity:0;
  background:radial-gradient(50% 50% at 50% 50%, rgba(255,255,255,.6), transparent 70%);
}
.lx_trail{
  position:absolute; left:50%; bottom:1.1rem; translate:-50% 0; width:.2rem; height:7.5rem;
  border-radius:99px; transform-origin:50% 100%; scale:1 0;
  background:linear-gradient(180deg, rgba(255,255,255,.8), rgba(255,255,255,0));
}
.lx_ship{
  position:absolute; left:50%; bottom:1.2rem; translate:-50% 0; width:3rem; height:3rem;
  display:grid; place-items:center; color:#FFFFFF; filter:drop-shadow(0 0 12px rgba(255,255,255,.35));
}
.lx_ship svg{ width:100%; height:100%; rotate:-45deg }

/* the three deploy steps, lighting one by one as the rocket climbs */
.lx_chips{ display:flex; flex-wrap:wrap; justify-content:center; gap:.35rem }
.lx_chip{
  display:inline-flex; align-items:center; gap:.3rem; padding:.28rem .55rem; border-radius:99px;
  font-size:.6875rem; line-height:1; color:rgba(255,255,255,.45);
  background:rgba(255,255,255,.04); box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
}
.lx_chip .ic_check{ width:.7rem; height:.7rem; padding:.12rem; box-sizing:border-box; border-radius:50%;
  color:rgba(255,255,255,.3); background:rgba(255,255,255,.08) }
.lx_chip em{ font-style:normal }
.lx_chip.is-on{ color:#FFFFFF; background:rgba(255,255,255,.1); box-shadow:inset 0 0 0 1px rgba(255,255,255,.18) }
.lx_chip.is-on .ic_check{ color:#0A0A0A; background:#FFFFFF }
.lx_btn{
  justify-self:center; display:inline-flex; align-items:center; gap:.4rem; height:2rem; padding:0 .95rem;
  border-radius:99px; font-size:.75rem; font-weight:500; color:#0A0A0A; background:#FFFFFF;
  box-shadow:0 0 0 1px rgba(255,255,255,.4), 0 12px 26px -12px rgba(255,255,255,.55);
}
.lx_btn .ph{ width:.85rem; height:.85rem }

/* the growth screen */
.lx_trend{
  margin-inline-start:auto; display:inline-flex; align-items:center; gap:.25rem; padding:.22rem .5rem;
  border-radius:99px; font-size:.6875rem; font-weight:500; color:#0A0A0A; background:#FFFFFF;
}
.lx_trend .ph{ width:.7rem; height:.7rem }
.lx_chart{ display:grid; align-content:center }
.lx_chart svg{ display:block; width:100%; height:auto; aspect-ratio:320 / 96; overflow:visible }
.lx_grid line{ stroke:rgba(255,255,255,.07); stroke-width:1 }
.lx_area{ fill:url(#lx-fill) }
.lx_line{ fill:none; stroke:#FFFFFF; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round;
  filter:drop-shadow(0 0 6px rgba(255,255,255,.35)) }
.lx_dot{ fill:#FFFFFF; filter:drop-shadow(0 0 8px rgba(255,255,255,.85)); opacity:0 }
.lx_stats{ display:grid; gap:.5rem }
.lx_stat{ display:grid; grid-template-columns:auto 4.5rem minmax(0,1fr); align-items:center; gap:.5rem;
  font-size:.6875rem; color:rgba(255,255,255,.72) }
.lx_stat .ph{ width:.8rem; height:.8rem; color:rgba(255,255,255,.5) }
.lx_stat em{ font-style:normal }
.lx_stat i{ display:block; height:.25rem; border-radius:99px; background:rgba(255,255,255,.1) }
.lx_stat i b{ display:block; height:100%; width:var(--w); border-radius:inherit; transform-origin:left; scale:0 1;
  background:linear-gradient(90deg, rgba(255,255,255,.4), #FFFFFF) }
@media (max-width:767px){
  .lx_stage{ height:15.5rem }
  .lx_ship{ width:2.1rem; height:2.1rem }
}

/* ==========================================================================
   Steps 01-03: the same two-screen stage as the launch card, in daylight.
   Each card shows the work being done, then what comes out of it.
   ========================================================================== */
.sc_stage{ position:relative; width:min(26rem, 100%); height:17rem }
.sc_scene{
  position:absolute; inset:0; overflow:hidden; border-radius:.875rem;
  display:grid; grid-template-rows:auto minmax(0,1fr); gap:.7rem;
  padding:.65rem .75rem .8rem; background:linear-gradient(180deg, #FFFFFF, #FCFCFC);
  box-shadow:0 0 0 1px #E6E6E6, 0 2px 4px rgba(0,0,0,.03), 0 18px 40px -20px rgba(0,0,0,.28);
  will-change:transform, opacity;
}
.sc_scene + .sc_scene{ opacity:0; visibility:hidden }
.sc_top{
  display:flex; align-items:center; gap:.45rem; padding:.1rem .15rem .55rem;
  border-block-end:1px solid #EFEFEF; font-size:.75rem; color:#0A0A0A;
}
.sc_top b{ font-weight:500 }
.sc_top > .ph{ width:.95rem; height:.95rem; color:#737373 }
.sc_top .brand_tile{ --size:1.05rem }
.sc_status{
  margin-inline-start:auto; font:500 .625rem/1 var(--font-mono); letter-spacing:.04em;
  padding:.3rem .5rem; border-radius:99px; color:#525252; background:#F3F3F3;
  box-shadow:inset 0 0 0 1px #E9E9E9; white-space:nowrap;
}
.sc_status.is-on{ color:#FFFFFF; background:#0A0A0A; box-shadow:none }

/* ---- 01 the call, then the proposal ------------------------------------ */
.cl_body{ display:grid; grid-template-columns:1fr 1.15fr; gap:.6rem }
.cl_tiles{ display:grid; grid-template-rows:1fr 1fr; gap:.5rem }
.cl_body .call_tile{ height:auto; border-radius:.6rem }
.cl_body .call_tile img, .cl_body .call_tile .rv_avatar{ width:2.2rem; height:2.2rem }
.cl_notes{ align-content:start; gap:.5rem; padding:.6rem }
.cl_note{ display:flex; align-items:center; gap:.4rem; font-size:.6875rem; color:#262626 }
.cl_note > .ic_check{
  width:.9rem; height:.9rem; padding:.16rem; box-sizing:border-box; border-radius:50%;
  color:#FFFFFF; background:#0A0A0A; flex:none;
}
.cl_note em{ margin-inline-start:auto; display:inline-flex; align-items:center; gap:.25rem; font-style:normal; font-size:.625rem; color:#525252 }
.cl_note em .brand_tile{ --size:.9rem }

.pr_body{ display:grid; grid-template-rows:auto minmax(0,1fr) auto; gap:.7rem; align-content:start }
.pr_head{ display:grid; gap:.35rem }
.pr_head i{ display:block; height:.4rem; border-radius:99px; background:#0A0A0A; width:58% }
.pr_head i + i{ height:.22rem; width:82%; background:#E2E2E2 }
.pr_rows{ display:grid; align-content:start; gap:.5rem }
.pr_row{ display:flex; align-items:center; gap:.45rem; font-size:.6875rem; color:#262626 }
.pr_row > .ic_check{
  width:.9rem; height:.9rem; padding:.16rem; box-sizing:border-box; border-radius:50%;
  color:#FFFFFF; background:#0A0A0A; flex:none;
}
.pr_row em{ font-style:normal }
.pr_time{ display:grid; gap:.35rem; padding:.55rem .6rem .5rem; border-radius:.6rem; background:#FAFAFA; box-shadow:inset 0 0 0 1px #EFEFEF }
.pr_time_head{ display:flex; align-items:baseline; font-size:.6875rem; color:#0A0A0A }
.pr_time_head b{ font-weight:500 }
.pr_time_head em{ margin-inline-start:auto; font-style:normal; font-size:.5625rem; font-family:var(--font-mono); color:#8A8A8A }
.pr_track{ display:block; height:.3rem; border-radius:99px; background:#ECECEC; overflow:hidden }
.pr_track i{ display:block; height:100%; width:100%; border-radius:inherit; background:#0A0A0A; transform-origin:left; scale:0 1 }
.pr_weeks{ display:grid; grid-template-columns:repeat(4,1fr); font:.5625rem/1 var(--font-mono); color:#A3A3A3 }
.pr_weeks b{ font-weight:400 }

/* ---- 02 the wireframe, then the design --------------------------------- */
.wf_body{ display:grid; grid-template-columns:2.6rem minmax(0,1fr); gap:.6rem }
.wf_rail{ display:grid; align-content:start; gap:.4rem; padding:.45rem .4rem; border-radius:.6rem; background:#FAFAFA; box-shadow:inset 0 0 0 1px #EFEFEF }
.wf_rail i{ display:block; height:.26rem; border-radius:99px; background:#E2E2E2 }
.wf_rail i:nth-child(1){ width:100%; background:#0A0A0A }
.wf_rail i:nth-child(2){ width:76% }
.wf_rail i:nth-child(3){ width:88% }
.wf_rail i:nth-child(4){ width:62% }
.wf_rail i:nth-child(5){ width:80% }
.wf_rail i:nth-child(6){ width:52% }
.wf_canvas{
  position:relative; display:grid; place-items:center; padding:.8rem; border-radius:.6rem;
  background:radial-gradient(rgba(0,0,0,.05) 1px, transparent 1.2px) 0 0 / 12px 12px, #F6F6F6;
  box-shadow:inset 0 0 0 1px #EFEFEF;
}
.wf_frame{ display:block; width:100%; border-radius:.35rem; overflow:hidden; background:#FFFFFF; box-shadow:0 0 0 1px #E4E4E4, 0 12px 22px -14px rgba(0,0,0,.3) }
.wf_cursor{ position:absolute; left:0; top:0; width:.85rem; height:.85rem; color:#0A0A0A; filter:drop-shadow(0 2px 4px rgba(0,0,0,.35)); opacity:0 }
.wf_cursor .ph{ width:100%; height:100% }
.vs_body{ display:grid; grid-template-rows:minmax(0,1fr) auto; gap:.6rem }
.vs_kit{ display:flex; align-items:center; gap:.6rem; padding:.45rem .6rem; border-radius:.6rem; background:#FAFAFA; box-shadow:inset 0 0 0 1px #EFEFEF }
.vs_type{ font-size:.8125rem; font-weight:500; letter-spacing:-.02em; color:#0A0A0A; line-height:1 }
.vs_dots{ display:flex; gap:.28rem }
.vs_dots i{ display:block; width:.75rem; height:.75rem; border-radius:50%; background:var(--c); box-shadow:inset 0 0 0 1px rgba(0,0,0,.08) }
.vs_comp{ display:flex; align-items:center; gap:.3rem; margin-inline-start:auto }
.vs_comp i{ display:block; width:1.2rem; height:.5rem; border-radius:99px; background:#E4E4E4 }
.vs_comp i:first-child{ background:#0A0A0A }

/* ---- 03 the build, then the responsive check --------------------------- */
.bx_body{ position:relative; display:grid; align-items:center; overflow:hidden; border-radius:.6rem }
.bx_browser{ width:100% }
.bx_url{ margin-inline:auto; font:.5625rem/1 var(--font-mono); color:#737373; padding:.2rem .5rem; border-radius:.3rem; background:#F2F2F2 }
.bx_scan{ position:absolute; left:0; right:0; top:0; height:3rem; pointer-events:none; opacity:0;
  background:linear-gradient(180deg, rgba(10,10,10,0), rgba(10,10,10,.07) 55%, rgba(10,10,10,0)) }
.sc_qa{ grid-template-rows:auto minmax(0,1fr) auto }
.qa_hold{ display:flex; justify-content:center; align-items:center }
.qa_browser{ width:100% }
.qa_devs{ position:static; justify-self:center; margin:0; padding:3px; border-radius:99px; background:#F1F1F1; box-shadow:inset 0 0 0 1px #E6E6E6; gap:0 }
.qa_devs .bd_dev{ box-shadow:none; background:transparent }
.qa_devs .bd_dev.is-on{ background:#0A0A0A; box-shadow:0 1px 3px rgba(0,0,0,.18) }
@media (max-width:767px){
  .sc_stage{ height:15.5rem }
  .cl_body{ grid-template-columns:.9fr 1.2fr }
  .wf_body{ grid-template-columns:2.1rem minmax(0,1fr) }
}
/* a grey working surface under the build and check browsers, like the design canvas */
.cl_notes{ align-content:center }
.pr_rows{ align-content:center }
.pr_row b{ margin-inline-start:auto; display:inline-flex; align-items:center; gap:.25rem; font-weight:400; font-size:.625rem; color:#525252 }
.pr_row b .brand_tile{ --size:.9rem }
.bx_body, .qa_hold{
  padding:.8rem; border-radius:.6rem;
  background:radial-gradient(rgba(0,0,0,.05) 1px, transparent 1.2px) 0 0 / 12px 12px, #F6F6F6;
  box-shadow:inset 0 0 0 1px #EFEFEF;
}
.bx_browser, .qa_browser{ box-shadow:0 0 0 1px #E4E4E4, 0 12px 22px -14px rgba(0,0,0,.3) }
@media (max-width:767px){
  .cl_body{ grid-template-columns:minmax(0,1fr); grid-template-rows:5rem minmax(0,1fr); gap:.5rem }
  .cl_tiles{ grid-template-rows:none; grid-template-columns:1fr 1fr }
}
/* phone: give the two-screen stages the room their contents actually need */
@media (max-width:767px){
  .sc_stage, .lx_stage{ height:16.5rem }
  .cl_body{ grid-template-rows:5.25rem minmax(0,1fr); gap:.5rem }
  .cl_notes{ align-content:start; gap:.4rem; padding:.5rem }
  .cl_note{ font-size:.625rem }
  .cl_note > .ic_check{ width:.8rem; height:.8rem }
  .cl_note em{ font-size:.5625rem }
  .bx_body, .qa_hold{ padding:.55rem }
  .qa_devs .bd_dev{ height:1.6rem; padding:0 .45rem; font-size:.625rem }
  .pr_rows{ gap:.4rem } .pr_row{ font-size:.625rem }
  .pr_row > .ic_check{ width:.8rem; height:.8rem }
}
@media (max-width:767px){
  .sc_qa{ gap:.5rem }
  .qa_hold{ padding:.45rem }
}
@media (max-width:767px){
  .sc_stage, .lx_stage{ height:17.25rem }
  /* the switcher keeps its labels here: it is a control, not three loose icons */
  .qa_devs .bd_dev span{ display:inline; font-size:.5625rem }
  .qa_devs .bd_dev{ padding:0 .4rem; gap:.25rem }
  .qa_devs .bd_dev .ph{ width:.7rem; height:.7rem }
}

/* The capsule's rim light is a pure loop, so CSS owns it: no JavaScript runs
   per frame. The stops are the share of the outline each side takes, and the
   corners are one step each because the radius is small next to the width. */
@property --rim-x { syntax: "<percentage>"; inherits: true; initial-value: -40% }
@property --rim-y { syntax: "<percentage>"; inherits: true; initial-value: 50% }
@keyframes nav-rim {
  0%      { --rim-x:2%;   --rim-y:0% }
  45.5%   { --rim-x:98%;  --rim-y:0% }
  47%     { --rim-x:100%; --rim-y:26% }
  48.5%   { --rim-x:100%; --rim-y:74% }
  50%     { --rim-x:98%;  --rim-y:100% }
  95.5%   { --rim-x:2%;   --rim-y:100% }
  97%     { --rim-x:0%;   --rim-y:74% }
  98.5%   { --rim-x:0%;   --rim-y:26% }
  100%    { --rim-x:2%;   --rim-y:0% }
}
/* The capsule gets the cards' rim light, walking it end to end on its own. */
@media (min-width:992px){
  .header_inner::after{
    content:""; position:absolute; inset:.1875rem calc(var(--cell--pad) - .6875rem); z-index:-1;
    border-radius:1rem; pointer-events:none; padding:1px;
    background:radial-gradient(circle 3.2rem at var(--rim-x, -40%) var(--rim-y, 50%),
      rgba(255,255,255,.95) 0%, rgba(255,255,255,.62) 20%, rgba(255,255,255,.28) 44%,
      rgba(255,255,255,.08) 70%, rgba(255,255,255,0) 100%);
    -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite:xor; mask-composite:exclude;
    filter:drop-shadow(0 0 3px rgba(255,255,255,.5));   /* the lit stretch blooms a little, so it reads as a light */
    opacity:0; transition:opacity .45s var(--ease);
  }
  html.is-scrolled .header_inner::after{ opacity:1 }
  html.is-scrolled .header_inner{ animation:nav-rim 6.5s linear infinite }
  @media (prefers-reduced-motion: reduce){ html.is-scrolled .header_inner{ animation:none } }
  /* a soft wash travels inside the capsule with the rim light */
  html.is-scrolled .header_inner::before{
    background:
      radial-gradient(circle 10rem at var(--rim-x, -40%) var(--rim-y, 50%), rgba(255,255,255,.06) 0%, rgba(255,255,255,.025) 45%, transparent 80%),
      linear-gradient(180deg, rgba(24,24,24,.94), rgba(10,10,10,.94));
  }
}

/* ==========================================================================
   The footer wordmark holds a light. It drifts across the letters on its own
   and follows the pointer while you are down there: the letters themselves
   light up, nothing else, because the glow is painted through the logo.
   ========================================================================== */
.footer_mark .fm_wrap{
  position:relative; display:block; margin-block-end:-7%;
  -webkit-mask-image:linear-gradient(to bottom, #000 10%, transparent 95%);
          mask-image:linear-gradient(to bottom, #000 10%, transparent 95%);
}
.footer_mark .fm_wrap img{ margin-block-end:0; -webkit-mask-image:none; mask-image:none }
.fm_lit{ position:absolute; inset:0; display:block; pointer-events:none }
.fm_lit i{
  position:absolute; inset:0; display:block; opacity:0; will-change:opacity;
  background:linear-gradient(180deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.66) 52%, rgba(255,255,255,.44) 100%);
  -webkit-mask-size:100% 100%; mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center; mask-position:center;
}
/* one mask per letter of the wordmark, so a letter lights as a whole */
.fm_lit i:nth-child(1){ -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%22106.24%2015.18%20243.53%2069.53%22%3E%3Cpath%20d=%22M116.353%2070H106.242L124.651%2017.7085H136.345L154.78%2070H144.669L130.702%2028.4323H130.294L116.353%2070ZM116.685%2049.497H144.26V57.1059H116.685V49.497Z%22/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%22106.24%2015.18%20243.53%2069.53%22%3E%3Cpath%20d=%22M116.353%2070H106.242L124.651%2017.7085H136.345L154.78%2070H144.669L130.702%2028.4323H130.294L116.353%2070ZM116.685%2049.497H144.26V57.1059H116.685V49.497Z%22/%3E%3C/svg%3E") }
.fm_lit i:nth-child(2){ -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%22106.24%2015.18%20243.53%2069.53%22%3E%3Cpath%20d=%22M161.259%2070V30.7814H170.093V37.4455H170.553C171.37%2035.1986%20172.723%2033.4453%20174.613%2032.1857C176.502%2030.909%20178.757%2030.2707%20181.379%2030.2707C184.034%2030.2707%20186.273%2030.9175%20188.094%2032.2112C189.932%2033.4879%20191.226%2035.2326%20191.975%2037.4455H192.383C193.252%2035.2667%20194.715%2033.5304%20196.775%2032.2367C198.852%2030.9261%20201.311%2030.2707%20204.154%2030.2707C207.763%2030.2707%20210.708%2031.4112%20212.989%2033.6921C215.27%2035.9731%20216.41%2039.3009%20216.41%2043.6755V70H207.142V45.1054C207.142%2042.6712%20206.495%2040.8924%20205.201%2039.769C203.907%2038.6285%20202.324%2038.0583%20200.452%2038.0583C198.222%2038.0583%20196.477%2038.7562%20195.218%2040.152C193.975%2041.5307%20193.354%2043.3266%20193.354%2045.5394V70H184.29V44.7224C184.29%2042.6968%20183.677%2041.0797%20182.451%2039.8711C181.243%2038.6625%20179.66%2038.0583%20177.702%2038.0583C176.374%2038.0583%20175.166%2038.3987%20174.076%2039.0796C172.987%2039.7434%20172.119%2040.6882%20171.472%2041.9137C170.825%2043.1223%20170.502%2044.5351%20170.502%2046.1522V70H161.259Z%22/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%22106.24%2015.18%20243.53%2069.53%22%3E%3Cpath%20d=%22M161.259%2070V30.7814H170.093V37.4455H170.553C171.37%2035.1986%20172.723%2033.4453%20174.613%2032.1857C176.502%2030.909%20178.757%2030.2707%20181.379%2030.2707C184.034%2030.2707%20186.273%2030.9175%20188.094%2032.2112C189.932%2033.4879%20191.226%2035.2326%20191.975%2037.4455H192.383C193.252%2035.2667%20194.715%2033.5304%20196.775%2032.2367C198.852%2030.9261%20201.311%2030.2707%20204.154%2030.2707C207.763%2030.2707%20210.708%2031.4112%20212.989%2033.6921C215.27%2035.9731%20216.41%2039.3009%20216.41%2043.6755V70H207.142V45.1054C207.142%2042.6712%20206.495%2040.8924%20205.201%2039.769C203.907%2038.6285%20202.324%2038.0583%20200.452%2038.0583C198.222%2038.0583%20196.477%2038.7562%20195.218%2040.152C193.975%2041.5307%20193.354%2043.3266%20193.354%2045.5394V70H184.29V44.7224C184.29%2042.6968%20183.677%2041.0797%20182.451%2039.8711C181.243%2038.6625%20179.66%2038.0583%20177.702%2038.0583C176.374%2038.0583%20175.166%2038.3987%20174.076%2039.0796C172.987%2039.7434%20172.119%2040.6882%20171.472%2041.9137C170.825%2043.1223%20170.502%2044.5351%20170.502%2046.1522V70H161.259Z%22/%3E%3C/svg%3E") }
.fm_lit i:nth-child(3){ -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%22106.24%2015.18%20243.53%2069.53%22%3E%3Cpath%20d=%22M237.073%2070.7915C234.587%2070.7915%20232.349%2070.349%20230.357%2069.4638C228.383%2068.5616%20226.817%2067.2339%20225.659%2065.4807C224.519%2063.7274%20223.949%2061.5656%20223.949%2058.9953C223.949%2056.7824%20224.357%2054.9526%20225.174%2053.5057C225.991%2052.0588%20227.106%2050.9013%20228.519%2050.0332C229.932%2049.1651%20231.523%2048.5098%20233.294%2048.0672C235.081%2047.6076%20236.928%2047.2757%20238.834%2047.0714C241.132%2046.8331%20242.996%2046.6203%20244.426%2046.4331C245.856%2046.2288%20246.894%2045.9224%20247.541%2045.5139C248.205%2045.0883%20248.537%2044.433%20248.537%2043.5478V43.3947C248.537%2041.4712%20247.967%2039.9817%20246.826%2038.9264C245.686%2037.871%20244.043%2037.3433%20241.898%2037.3433C239.634%2037.3433%20237.839%2037.837%20236.511%2038.8243C235.2%2039.8115%20234.315%2040.9775%20233.855%2042.3223L225.225%2041.0967C225.906%2038.7136%20227.03%2036.722%20228.596%2035.122C230.162%2033.5049%20232.077%2032.2963%20234.341%2031.4963C236.604%2030.6792%20239.107%2030.2707%20241.847%2030.2707C243.737%2030.2707%20245.618%2030.492%20247.49%2030.9346C249.362%2031.3771%20251.073%2032.1091%20252.622%2033.1304C254.171%2034.1347%20255.414%2035.505%20256.35%2037.2412C257.303%2038.9774%20257.78%2041.1477%20257.78%2043.7521V70H248.894V64.6125H248.588C248.026%2065.702%20247.235%2066.7233%20246.213%2067.6765C245.209%2068.6127%20243.941%2069.3702%20242.409%2069.9489C240.894%2070.5107%20239.115%2070.7915%20237.073%2070.7915ZM239.473%2063.9998C241.328%2063.9998%20242.937%2063.6338%20244.298%2062.9018C245.66%2062.1529%20246.707%2061.1656%20247.439%2059.94C248.188%2058.7144%20248.562%2057.3782%20248.562%2055.9313V51.3099C248.273%2051.5482%20247.779%2051.7695%20247.081%2051.9737C246.401%2052.178%20245.635%2052.3567%20244.783%2052.5099C243.932%2052.6631%20243.09%2052.7993%20242.256%2052.9184C241.422%2053.0376%20240.698%2053.1397%20240.085%2053.2248C238.707%2053.4121%20237.473%2053.7185%20236.383%2054.144C235.294%2054.5696%20234.434%2055.1653%20233.804%2055.9313C233.175%2056.6803%20232.86%2057.6506%20232.86%2058.8421C232.86%2060.5443%20233.481%2061.8295%20234.724%2062.6976C235.966%2063.5657%20237.549%2063.9998%20239.473%2063.9998Z%22/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%22106.24%2015.18%20243.53%2069.53%22%3E%3Cpath%20d=%22M237.073%2070.7915C234.587%2070.7915%20232.349%2070.349%20230.357%2069.4638C228.383%2068.5616%20226.817%2067.2339%20225.659%2065.4807C224.519%2063.7274%20223.949%2061.5656%20223.949%2058.9953C223.949%2056.7824%20224.357%2054.9526%20225.174%2053.5057C225.991%2052.0588%20227.106%2050.9013%20228.519%2050.0332C229.932%2049.1651%20231.523%2048.5098%20233.294%2048.0672C235.081%2047.6076%20236.928%2047.2757%20238.834%2047.0714C241.132%2046.8331%20242.996%2046.6203%20244.426%2046.4331C245.856%2046.2288%20246.894%2045.9224%20247.541%2045.5139C248.205%2045.0883%20248.537%2044.433%20248.537%2043.5478V43.3947C248.537%2041.4712%20247.967%2039.9817%20246.826%2038.9264C245.686%2037.871%20244.043%2037.3433%20241.898%2037.3433C239.634%2037.3433%20237.839%2037.837%20236.511%2038.8243C235.2%2039.8115%20234.315%2040.9775%20233.855%2042.3223L225.225%2041.0967C225.906%2038.7136%20227.03%2036.722%20228.596%2035.122C230.162%2033.5049%20232.077%2032.2963%20234.341%2031.4963C236.604%2030.6792%20239.107%2030.2707%20241.847%2030.2707C243.737%2030.2707%20245.618%2030.492%20247.49%2030.9346C249.362%2031.3771%20251.073%2032.1091%20252.622%2033.1304C254.171%2034.1347%20255.414%2035.505%20256.35%2037.2412C257.303%2038.9774%20257.78%2041.1477%20257.78%2043.7521V70H248.894V64.6125H248.588C248.026%2065.702%20247.235%2066.7233%20246.213%2067.6765C245.209%2068.6127%20243.941%2069.3702%20242.409%2069.9489C240.894%2070.5107%20239.115%2070.7915%20237.073%2070.7915ZM239.473%2063.9998C241.328%2063.9998%20242.937%2063.6338%20244.298%2062.9018C245.66%2062.1529%20246.707%2061.1656%20247.439%2059.94C248.188%2058.7144%20248.562%2057.3782%20248.562%2055.9313V51.3099C248.273%2051.5482%20247.779%2051.7695%20247.081%2051.9737C246.401%2052.178%20245.635%2052.3567%20244.783%2052.5099C243.932%2052.6631%20243.09%2052.7993%20242.256%2052.9184C241.422%2053.0376%20240.698%2053.1397%20240.085%2053.2248C238.707%2053.4121%20237.473%2053.7185%20236.383%2054.144C235.294%2054.5696%20234.434%2055.1653%20233.804%2055.9313C233.175%2056.6803%20232.86%2057.6506%20232.86%2058.8421C232.86%2060.5443%20233.481%2061.8295%20234.724%2062.6976C235.966%2063.5657%20237.549%2063.9998%20239.473%2063.9998Z%22/%3E%3C/svg%3E") }
.fm_lit i:nth-child(4){ -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%22106.24%2015.18%20243.53%2069.53%22%3E%3Cpath%20d=%22M267.074%2070V30.7814H276.036V37.3178H276.444C277.159%2035.0539%20278.385%2033.3091%20280.121%2032.0835C281.874%2030.8409%20283.874%2030.2196%20286.121%2030.2196C286.632%2030.2196%20287.202%2030.2452%20287.832%2030.2962C288.479%2030.3303%20289.015%2030.3899%20289.441%2030.475V38.9774C289.049%2038.8413%20288.428%2038.7221%20287.577%2038.62C286.743%2038.5008%20285.934%2038.4413%20285.151%2038.4413C283.466%2038.4413%20281.951%2038.8072%20280.606%2039.5392C279.279%2040.2541%20278.232%2041.2499%20277.466%2042.5265C276.7%2043.8032%20276.317%2045.2756%20276.317%2046.9437V70H267.074Z%22/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%22106.24%2015.18%20243.53%2069.53%22%3E%3Cpath%20d=%22M267.074%2070V30.7814H276.036V37.3178H276.444C277.159%2035.0539%20278.385%2033.3091%20280.121%2032.0835C281.874%2030.8409%20283.874%2030.2196%20286.121%2030.2196C286.632%2030.2196%20287.202%2030.2452%20287.832%2030.2962C288.479%2030.3303%20289.015%2030.3899%20289.441%2030.475V38.9774C289.049%2038.8413%20288.428%2038.7221%20287.577%2038.62C286.743%2038.5008%20285.934%2038.4413%20285.151%2038.4413C283.466%2038.4413%20281.951%2038.8072%20280.606%2039.5392C279.279%2040.2541%20278.232%2041.2499%20277.466%2042.5265C276.7%2043.8032%20276.317%2045.2756%20276.317%2046.9437V70H267.074Z%22/%3E%3C/svg%3E") }
.fm_lit i:nth-child(5){ -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%22106.24%2015.18%20243.53%2069.53%22%3E%3Cpath%20d=%22M295.581%2070V30.7814H304.824V70H295.581ZM300.228%2025.2152C298.764%2025.2152%20297.505%2024.7301%20296.449%2023.7598C295.394%2022.7725%20294.866%2021.5895%20294.866%2020.2107C294.866%2018.8149%20295.394%2017.6319%20296.449%2016.6616C297.505%2015.6744%20298.764%2015.1807%20300.228%2015.1807C301.709%2015.1807%20302.969%2015.6744%20304.007%2016.6616C305.063%2017.6319%20305.59%2018.8149%20305.59%2020.2107C305.59%2021.5895%20305.063%2022.7725%20304.007%2023.7598C302.969%2024.7301%20301.709%2025.2152%20300.228%2025.2152Z%22/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%22106.24%2015.18%20243.53%2069.53%22%3E%3Cpath%20d=%22M295.581%2070V30.7814H304.824V70H295.581ZM300.228%2025.2152C298.764%2025.2152%20297.505%2024.7301%20296.449%2023.7598C295.394%2022.7725%20294.866%2021.5895%20294.866%2020.2107C294.866%2018.8149%20295.394%2017.6319%20296.449%2016.6616C297.505%2015.6744%20298.764%2015.1807%20300.228%2015.1807C301.709%2015.1807%20302.969%2015.6744%20304.007%2016.6616C305.063%2017.6319%20305.59%2018.8149%20305.59%2020.2107C305.59%2021.5895%20305.063%2022.7725%20304.007%2023.7598C302.969%2024.7301%20301.709%2025.2152%20300.228%2025.2152Z%22/%3E%3C/svg%3E") }
.fm_lit i:nth-child(6){ -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%22106.24%2015.18%20243.53%2069.53%22%3E%3Cpath%20d=%22M340.5%2084.707V63.821H340.117C339.641%2064.7743%20338.951%2065.7871%20338.049%2066.8594C337.147%2067.9148%20335.955%2068.817%20334.474%2069.5659C332.994%2070.3149%20331.13%2070.6894%20328.883%2070.6894C325.802%2070.6894%20323.044%2069.8979%20320.61%2068.3148C318.176%2066.7318%20316.252%2064.4338%20314.84%2061.4209C313.427%2058.408%20312.72%2054.7483%20312.72%2050.4417C312.72%2046.0841%20313.435%2042.4074%20314.865%2039.4115C316.312%2036.3986%20318.261%2034.1262%20320.712%2032.5942C323.163%2031.0452%20325.895%2030.2707%20328.908%2030.2707C331.206%2030.2707%20333.096%2030.6622%20334.577%2031.4452C336.057%2032.2112%20337.232%2033.1389%20338.1%2034.2283C338.968%2035.3007%20339.641%2036.3135%20340.117%2037.2667H340.679V30.7814H349.769V84.707H340.5ZM331.462%2063.1061C333.419%2063.1061%20335.087%2062.5784%20336.466%2061.5231C337.845%2060.4507%20338.892%2058.9612%20339.607%2057.0548C340.321%2055.1483%20340.679%2052.927%20340.679%2050.3907C340.679%2047.8544%20340.321%2045.6501%20339.607%2043.7776C338.909%2041.9052%20337.87%2040.4498%20336.492%2039.4115C335.13%2038.3732%20333.453%2037.854%20331.462%2037.854C329.402%2037.854%20327.683%2038.3902%20326.304%2039.4626C324.925%2040.535%20323.887%2042.0159%20323.189%2043.9053C322.491%2045.7947%20322.142%2047.9565%20322.142%2050.3907C322.142%2052.8418%20322.491%2055.0292%20323.189%2056.9527C323.904%2058.8591%20324.951%2060.3656%20326.329%2061.472C327.725%2062.5614%20329.436%2063.1061%20331.462%2063.1061Z%22/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%22106.24%2015.18%20243.53%2069.53%22%3E%3Cpath%20d=%22M340.5%2084.707V63.821H340.117C339.641%2064.7743%20338.951%2065.7871%20338.049%2066.8594C337.147%2067.9148%20335.955%2068.817%20334.474%2069.5659C332.994%2070.3149%20331.13%2070.6894%20328.883%2070.6894C325.802%2070.6894%20323.044%2069.8979%20320.61%2068.3148C318.176%2066.7318%20316.252%2064.4338%20314.84%2061.4209C313.427%2058.408%20312.72%2054.7483%20312.72%2050.4417C312.72%2046.0841%20313.435%2042.4074%20314.865%2039.4115C316.312%2036.3986%20318.261%2034.1262%20320.712%2032.5942C323.163%2031.0452%20325.895%2030.2707%20328.908%2030.2707C331.206%2030.2707%20333.096%2030.6622%20334.577%2031.4452C336.057%2032.2112%20337.232%2033.1389%20338.1%2034.2283C338.968%2035.3007%20339.641%2036.3135%20340.117%2037.2667H340.679V30.7814H349.769V84.707H340.5ZM331.462%2063.1061C333.419%2063.1061%20335.087%2062.5784%20336.466%2061.5231C337.845%2060.4507%20338.892%2058.9612%20339.607%2057.0548C340.321%2055.1483%20340.679%2052.927%20340.679%2050.3907C340.679%2047.8544%20340.321%2045.6501%20339.607%2043.7776C338.909%2041.9052%20337.87%2040.4498%20336.492%2039.4115C335.13%2038.3732%20333.453%2037.854%20331.462%2037.854C329.402%2037.854%20327.683%2038.3902%20326.304%2039.4626C324.925%2040.535%20323.887%2042.0159%20323.189%2043.9053C322.491%2045.7947%20322.142%2047.9565%20322.142%2050.3907C322.142%2052.8418%20322.491%2055.0292%20323.189%2056.9527C323.904%2058.8591%20324.951%2060.3656%20326.329%2061.472C327.725%2062.5614%20329.436%2063.1061%20331.462%2063.1061Z%22/%3E%3C/svg%3E") }

/* The service card scenes are drawn for a card about 250px wide. Narrower than
   that and they were cropped mid-shape, reading as broken rather than as a
   deliberate detail shot. That happens on a phone, on a tablet, and again at
   992px where three columns are at their tightest, so the trigger is the
   scene's own width, not the viewport's. The window keeps its box and scales
   its contents down, so the composition always lands whole. */
.service_cell .sv_scene{ container-type:inline-size }
@container (max-width:249px){
  .service_cell .sv_win{
    --sv-s:.92; right:auto; bottom:auto;
    width:calc(100% / var(--sv-s)); height:calc((100% + 1.25rem) / var(--sv-s));
    transform:scale(var(--sv-s)); transform-origin:left top;
  }
}
@container (max-width:228px){ .service_cell .sv_win{ --sv-s:.84 } }
@container (max-width:205px){ .service_cell .sv_win{ --sv-s:.78 } }
@container (max-width:185px){ .service_cell .sv_win{ --sv-s:.70 } }
@media (max-width:767px){ .service_cell .sv_scene{ left:5.25rem } }

/* Contents links were 20px tall, under the 24px minimum for a tap target.
   Padding makes them 28px while the tighter gap keeps the same rhythm, and the
   current-item marker shifts with the padding so it still sits on the text. */
.toc{ gap:.25rem }
.toc a{ padding-block:.25rem }
.toc a::before{ inset-block:calc(.25rem + .1em) auto }
/* the author card's link was an 18px tap target */
.author_card_body a{ display:inline-block; padding-block:.2rem }

/* Email and phone links sat at 17 to 23px tall, under the 24px minimum for a
   tap target. Padding makes them 25 to 27px without changing the text rhythm,
   because a link on its own line has room above and below it anyway. */
.footer .footer_facts a, .founder_details a, .faq_help_email a, .mobile_mail a,
.reach p a{
  display:inline-block; padding-block:.25rem;
}

/* ======================================================================
   BANGLADESH LANDING PAGE (/bd)
   ----------------------------------------------------------------------
   /bd is the homepage with a different header and hero, a different form,
   and two extra sections: "why you need a website" and "pricing". It is
   generated by concepts/build-bd.py, so everything it shares with the
   homepage stays in step on its own. Only the parts below are new.
   ====================================================================== */

/* Landing header. The mega menu is gone: the visitor arrived from a phone
   call, not a search, and every nav item is a way to leave before the price.
   What is left is four anchors to the sections people ring up about, and one
   action. Below 992 the nav hides with the site's own rule and the sticky bar
   at the foot of the screen takes over. */
.landing_brand{ display:flex; align-items:center; gap:.75rem; min-width:0 }
.landing_place{
  font-family:var(--font-mono); font-size:.6875rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted); border:1px solid var(--line); border-radius:99px; padding:.25rem .625rem;
  white-space:nowrap;
}
.landing_nav a{ white-space:nowrap }
.ic_wa{ width:1rem; height:1rem; flex:none }
@media (max-width:1120px){ .landing_place{ display:none } }
@media (max-width:600px){ .header.is-landing .header_logo img{ height:1.625rem } }

/* The site badge is built around the platform tiles on its left, so its padding
   is lopsided by design (.3rem one side, .9rem the other). This page's badge is
   words only, and the gap showed. */
.hero_badge:not(:has(.hero_badge_tiles)){ padding-inline:.9rem }

/* Pricing ------------------------------------------------------------------
   What every package contains, as one scannable row of chips rather than a
   section of its own: eight short labels read in a glance, where eight cards
   read as eight decisions. Then three lined cells. The middle one is raised
   rather than recoloured, because on a page this restrained a coloured card
   would be the loudest thing on the screen. */
.price_grid > *{ display:flex }
.price_top{ display:flex; flex-direction:column; gap:.5rem }
.price_name{ font-size:1.0625rem; font-weight:500; letter-spacing:-0.016em; display:flex; align-items:center; gap:.625rem; flex-wrap:wrap }
.price_flag{
  font-family:var(--font-mono); font-size:.625rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--page); background:var(--text); border-radius:99px; padding:.25rem .5rem;
}
.price_for{ font-size:.875rem; line-height:1.5; color:var(--muted); text-wrap:pretty }
/* The price is the most-scanned thing in the section, so the three have to sit on
   one line. Whichever description runs longest decides, and three lines is the
   most any of them takes; without this the middle card pushed its price 21px low. */
@media (min-width:768px){ .price_for{ min-height:calc(.875rem * 1.5 * 3) } }
.price_cell .price_amount{ padding-block-start:1.25rem; border-block-start:1px solid var(--line) }
/* Three separate rounded cards with a gap, the same bento finish the work grid
   and the services use on this page. They were lined cells with shared
   hairlines, which left the featured one floating as the only round thing in
   the row and made the other two look unfinished beside it. */
.price_grid{ gap:1rem }
.price_grid > .price_cell{
  position:relative;
  border:0 !important; margin:0 !important; border-radius:1.25rem !important;
  padding:var(--cell--pad) !important;
  background:var(--surface);
  box-shadow:0 0 0 1px var(--line), 0 1px 2px rgba(0,0,0,.03), 0 24px 48px -30px rgba(0,0,0,.18);
}
/* the middle one is marked by a firmer edge and a deeper lift, not by colour */
.price_grid > .price_cell.is-featured{
  box-shadow:0 0 0 1.5px color-mix(in srgb, var(--text) 32%, var(--line)),
             0 2px 4px rgba(0,0,0,.05), 0 34px 64px -28px rgba(0,0,0,.34);
}
.price_flag{
  position:absolute; inset-block-start:0; inset-inline-start:var(--cell--pad); translate:0 -50%;
  font-family:var(--font-mono); font-size:.625rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--page); background:var(--text); border-radius:99px; padding:.3125rem .625rem;
}

/* a second, quieter flag: the custom card's free audit, outlined so the black
   "Best selling" flag stays the loudest thing in the row */
.price_flag.is-soft{ background:var(--surface); color:var(--text); box-shadow:0 0 0 1px var(--text) inset }

/* the custom package: no price to read, so its button takes the price's place,
   under the same hairline, and a short note on how the quote works follows it */
.price_custom{ padding-block-start:1.25rem; border-block-start:1px solid var(--line) }
.price_custom .button{ width:100%; justify-content:center; margin:0 }
.price_note{
  margin:0; padding-block-start:1.25rem; border-block-start:1px solid var(--line);
  font-size:.875rem; line-height:1.6; color:var(--muted); text-wrap:pretty;
}

/* Hormozi-style value stack: each free extra shows what it costs on its own,
   and the card totals them right under the price */
.price_stack{
  margin:0; padding:.625rem .875rem; border-radius:.625rem;
  background:color-mix(in srgb, var(--text) 5%, transparent);
  font-size:.875rem; line-height:1.4; color:var(--muted);
}
.price_stack b{ color:var(--text); font-weight:500 }
.price_val{ font-style:normal; font-size:.8125rem; color:var(--text); white-space:nowrap; margin-inline-start:.25rem }

/* not sure which one: a person on the phone, straight under the packages */
.price_help{
  margin-block-start:3rem; padding-block-start:2.5rem; border-block-start:1px solid var(--line);
  display:flex; flex-direction:column; align-items:center; gap:1.25rem; text-align:center;
}
.price_help p{ margin:0; font-size:1.125rem; line-height:1.5; color:var(--muted) }
.price_help b{ color:var(--text); font-weight:500 }
.price_help_actions{ display:flex; flex-wrap:wrap; gap:.75rem; justify-content:center }
.price_help_actions .ph{ width:1rem; height:1rem; flex:none }

/* Contact: the same two-column shape as the site form, with a panel that leads
   on WhatsApp and calling, because that is how a local lead actually replies. */
.bd_contact{ display:grid; grid-template-columns:minmax(0,22rem) minmax(0,1fr); gap:0; border:1px solid var(--line); border-radius:var(--radius--frame); overflow:hidden }
.bd_reach{ padding:var(--cell--pad); background:var(--surface); border-inline-end:1px solid var(--line); display:flex; flex-direction:column; gap:.75rem }
.bd_reach_head{ font-family:var(--font-mono); font-size:.6875rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted) }
.bd_reach .button{ width:100%; height:2.75rem }
.bd_reach_call svg{ width:1rem; height:1rem; flex:none }
.bd_reach_hours{ margin-block-start:.25rem }
.bd_reach_details{ margin:0; margin-block-start:1rem; padding-block-start:1.25rem; border-block-start:1px solid var(--line); display:grid; gap:.875rem }
.bd_reach_details dt{ font-family:var(--font-mono); font-size:.6875rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted) }
.bd_reach_details dd{ margin:0; margin-block-start:.25rem; font-size:.9375rem }
.bd_reach_details dd a{ display:inline-block; padding-block:.25rem }
.bd_reach_next{ margin-block-start:1.5rem; padding-block-start:1.25rem; border-block-start:1px solid var(--line) }
.bd_reach_label{ font-size:.875rem; font-weight:500; margin-block-end:.75rem }
.bd_reach_next ol{ margin:0; padding-inline-start:1.125rem; display:grid; gap:.5rem; font-size:.875rem; line-height:1.5; color:var(--muted) }
/* four fields in a box as tall as the contact panel: keep them together in the
   middle instead of letting the rows stretch apart */
.bd_form{ padding:var(--cell--pad); align-content:center }
.bd_form_head{ grid-column:1 / -1; display:grid; gap:.5rem; padding-block-end:1.25rem; margin-block-end:.25rem; border-block-end:1px solid var(--line) }
.bd_form_head p{ margin:0 }
@media (max-width:860px){
  .bd_contact{ grid-template-columns:minmax(0,1fr) }
  .bd_reach{ border-inline-end:0; border-block-end:1px solid var(--line) }
}

/* Sticky action bar, phones only. The two things a cold lead does next, always
   in reach of a thumb. It slides in past the top of the page so it never covers
   the first screen, and the footer gets a floor so nothing hides behind it. */
.bd_bar{ display:none }
@media (max-width:767px){
  .bd_bar{
    display:grid; grid-template-columns:1fr 1fr; gap:.5rem;
    position:fixed; inset-inline:0; bottom:0; z-index:60;
    padding:.625rem .75rem calc(.625rem + env(safe-area-inset-bottom));
    background:rgba(10,10,10,.82); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
    border-block-start:1px solid rgba(255,255,255,.12);
    opacity:0; visibility:hidden; translate:0 100%;
    transition:opacity .35s var(--ease), translate .35s var(--ease), visibility .35s;
  }
  html.is-scrolled .bd_bar{ opacity:1; visibility:visible; translate:0 0 }
  .bd_bar a{
    display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
    height:2.75rem; border-radius:99px; font-size:.9375rem; font-weight:500;
  }
  .bd_bar svg{ width:1rem; height:1rem; flex:none }
  .bd_bar_call{ color:#FFFFFF; border:1px solid rgba(255,255,255,.28) }
  .bd_bar_wa{ color:#0A0A0A; background:#FFFFFF }
  body:has(.bd_bar) .footer{ padding-block-end:4.5rem }
  @media (prefers-reduced-motion: reduce){ .bd_bar{ transition:none } }
}

/* Already have a website? --------------------------------------------------
   The comparison above answers somebody with no website. This answers the
   other half of the audience, who has one that stopped working. Same lined
   panel as the comparison so it reads as part of the same argument, split so
   the reasoning sits on the left and the three things they are afraid of
   losing — the address, the ranking, the content — sit on the right. */
.rd_panel{
  margin-block-start:1.5rem;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:0;
  border:1px solid var(--line); border-radius:var(--radius--frame); overflow:hidden;
}
.rd_copy{ padding:var(--cell--pad); display:flex; flex-direction:column; justify-content:center; gap:.875rem; align-items:flex-start }
.rd_copy .h4{ max-width:26ch; text-wrap:pretty }
.rd_copy p{ margin:0 }
.rd_list{
  list-style:none; margin:0; padding:var(--cell--pad);
  background:var(--surface); border-inline-start:1px solid var(--line);
  display:grid; gap:1.375rem; align-content:center;
}
.rd_list li{ display:grid; grid-template-columns:1.25rem minmax(0,1fr); gap:.75rem; align-items:start }
.rd_list .ic_check{
  width:1.25rem; height:1.25rem; padding:.3125rem; box-sizing:border-box; border-radius:50%;
  margin-block-start:.1rem; background:var(--text); color:var(--page);
}
.rd_list span{ font-size:.875rem; line-height:1.55; color:var(--muted) }
.rd_list b{ display:block; margin-block-end:.1875rem; font-size:.9375rem; line-height:1.4; font-weight:500; color:var(--text); letter-spacing:-0.012em }
@media (max-width:860px){
  .rd_panel{ grid-template-columns:minmax(0,1fr) }
  .rd_list{ border-inline-start:0; border-block-start:1px solid var(--line) }
}

/* Unframed page (/bd) ------------------------------------------------------
   With the rails gone there is nothing for the inner gutter to hold text away
   from, so a heading sitting 36px inside the card grid beside it just reads as
   an indent. Flush instead: a heading now starts on the same line as the edge
   of the grid under it, which is how a page without a frame is normally set.
   Cell padding is untouched, so text inside a card keeps its own 36px. */
/* Scoped to main: the header capsule is sized off this same inner gutter
   ("header_inner carries the frame's inner padding" above), so zeroing it there
   pulls the capsule in over the logo. The footer is chrome too and keeps it. */
.is-unframed main .container-large > *:not(.grid_lined):not(.is-flush):not(.work_more){ padding-inline:0 }

/* The two card grids and the work closing bar are inset by the frame's gutter
   on purpose ("inset from the page frame like every other card section"), so
   their cards line up with body text while the rails carry the outer edge.
   With no rails there is nothing to inset from, and a card sitting 36px inside
   the heading above it is just a misalignment. All three go flush, which puts
   every card edge on the same line as every heading. */
.is-unframed .container-large > .work_grid{ padding-inline:0 }
.is-unframed .container-large > .grid_lined:has(> .service_cell){ padding-inline:0 }
.is-unframed .work_more{ margin-inline:0 !important }
/* The bar is a direct child of the container, so the rule above was zeroing the
   1.5rem it sets for itself and the text ran to the bar's own edge. It gets the
   work cards' own inset instead of the frame's, so the sentence starts on the same
   line as the card text above it and the button ends where the cards end. */
.is-unframed .container-large > .work_more{ padding-inline:1.625rem }

/* Why you need a website (/bd) ----------------------------------------------
   Two sections now: the problem on the dark ground, the fix on the light one.
   No illustration on purpose — the layout is the design here. */
.vs_tag{
  font-family:var(--font-mono); font-size:.6875rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted); align-self:flex-start;
  border:1px solid var(--line); border-radius:99px; padding:.25rem .625rem;
}

/* Sources (/bd): the line under a list that links every figure used above it */
.stat_src{ margin:.875rem 0 0; font-size:.75rem; line-height:1.5; color:var(--muted) }
.stat_src a{ color:inherit; text-decoration:underline; text-underline-offset:2px; text-decoration-color:var(--line) }
.stat_src a:hover{ color:var(--text) }
.stat_src + .pb_list, .stat_src + .sl_grid{ margin-block-start:2rem }

/* The problem (dark): five moments, each with what it costs. One lined panel,
   read row by row: the number, the moment, and the loss in the strongest type. */
.pb_list{
  list-style:none; padding:0; margin:3.5rem 0 0;
  border:1px solid var(--line); border-radius:var(--radius--frame); overflow:hidden;
}
.pb_row{
  display:grid; grid-template-columns:3.5rem minmax(0,1fr) minmax(0,1.35fr);
  align-items:start; gap:1.5rem; padding:1.375rem var(--cell--pad);
}
.pb_row + .pb_row{ border-block-start:1px solid var(--line) }
.pb_num{ font-family:var(--font-mono); font-size:.75rem; letter-spacing:.08em; color:var(--muted); padding-block-start:.3rem }
.pb_when{ font-size:.9375rem; line-height:1.45; color:var(--muted); padding-block-start:.125rem }
.pb_loss{ display:flex; align-items:center; gap:.75rem; font-size:1.125rem; line-height:1.4; font-weight:500; color:var(--text); letter-spacing:-0.012em }
.pb_loss svg{
  width:1.375rem; height:1.375rem; padding:.375rem; box-sizing:border-box; border-radius:50%; flex:none;
  background:color-mix(in srgb, var(--text) 10%, transparent); color:var(--text);
}
/* the head row says whose problem this is: a shop with no website */
.pb_head{
  display:grid; grid-template-columns:3.5rem minmax(0,1fr) minmax(0,1.35fr); gap:1.5rem;
  padding:1rem var(--cell--pad); border-block-end:1px solid var(--line);
  font-family:var(--font-mono); font-size:.6875rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted);
  background:color-mix(in srgb, var(--text) 4%, transparent);
}
.pb_head > :last-child{ color:var(--text) }
.pb_head + .pb_row{ border-block-start:0 }
/* the loss and, under it, the number that proves it */
.pb_loss{ align-items:flex-start }
.pb_loss svg{ margin-block-start:.0625rem }
.pb_proof{
  display:block; margin-block-start:.375rem;
  font-size:.8125rem; line-height:1.5; font-weight:400; letter-spacing:0; color:var(--muted);
}
@media (max-width:767px){
  .pb_head{ grid-template-columns:minmax(0,1fr); padding-block:.875rem }
  .pb_head > :first-child, .pb_head > :last-child{ display:none }
  .pb_row{ grid-template-columns:2.25rem minmax(0,1fr); gap:.375rem 1rem; align-items:start; padding-block:1.25rem }
  .pb_num{ grid-row:1 / span 2; padding-block-start:.2rem }
  .pb_loss{ font-size:1.0625rem }
}

/* The solution (light): six rounded cards, the same card language as the
   prices further down, so the fix and the offer read as one story. */
.sl_grid{
  list-style:none; padding:0; margin:3.5rem 0 0;
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:1rem;
}
.sl_card{
  display:flex; flex-direction:column; gap:.75rem; align-items:flex-start;
  padding:var(--cell--pad); border-radius:1.25rem; background:var(--surface);
  box-shadow:0 0 0 1px var(--line);
}
/* the icon and the number of the problem this card answers, on one line */
.sl_top{ display:flex; align-items:center; justify-content:space-between; align-self:stretch; margin-block-end:.5rem }
.sl_no{ font-family:var(--font-mono); font-size:.75rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted) }
.sl_icon{
  display:grid; place-items:center; width:2.25rem; height:2.25rem; border-radius:50%;
  background:var(--text); color:var(--page);
}
.sl_proof{ margin:auto 0 0; padding-block-start:.875rem; border-block-start:1px solid var(--line); font-size:.8125rem; line-height:1.5; color:var(--muted) }
/* the bonus is not an answer to a problem, so it is marked apart, lightly */
.sl_card.is-bonus{ background:transparent; box-shadow:none; border:1px dashed color-mix(in srgb, var(--text) 25%, transparent) }
.sl_card.is-bonus .sl_icon{ background:transparent; color:var(--text); box-shadow:0 0 0 1px var(--text) inset }
.sl_icon .ic_check{ width:.875rem; height:.875rem }
.sl_title{ font-size:1.1875rem; line-height:1.3; font-weight:500; letter-spacing:-0.015em; margin:0; text-wrap:balance }
.sl_text{ font-size:.9375rem; line-height:1.6; color:var(--muted); margin:0; text-wrap:pretty }
/* four across only where each card still has room for a short line */
@media (max-width:1199px){ .sl_grid{ grid-template-columns:repeat(2, minmax(0,1fr)) } }
@media (max-width:600px){ .sl_grid{ grid-template-columns:minmax(0,1fr) } }
.ic_x{ width:.625rem; height:.625rem; flex:none }
/* the closing line of the section, and the way out of it, on one row */
.vs_note{
  margin-block-start:2.5rem; border-block-start:1px solid var(--line); padding-block-start:1.5rem;
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2rem; align-items:center;
}
.vs_note p{ font-size:1.0625rem; line-height:1.6; color:var(--muted); max-width:56ch; margin:0 }
.vs_note b{ color:var(--text); font-weight:500 }
@media (max-width:860px){ .vs_note{ grid-template-columns:minmax(0,1fr); gap:1.25rem; justify-items:start } }
/* Tablets: the grid drops to two columns site-wide, which left the third
   package alone against an empty half-row. It spans instead, so the row is
   filled and the widest card gets the width it wants. */
@media (min-width:768px) and (max-width:991px){
  .price_grid > .price_cell:last-child{ grid-column:1 / -1 }
}

/* Case study summary -------------------------------------------------------
   A block anyone can lift whole: a reader skimming, a search engine building a
   snippet, an assistant answering who did the work. Facts about the design,
   never results, on a project that has not launched.

   Two columns, because one was not a design decision, it was the box's full
   width. Measured at 1440: the article runs 77 characters to a line and this
   ran 155, twice the comfortable measure, so the eye lost the return. A
   labelled pair per cell also parses better than a bulleted sentence. */
.case_tldr{
  border:1px solid var(--line); border-radius:var(--radius--frame);
  padding:var(--cell--pad); background:var(--surface);
}
.tldr_grid{
  margin:1.75rem 0 0;
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:1.75rem 3rem;
}
.tldr_grid dt{
  font-family:var(--font-mono); font-size:.6875rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted);
}
.tldr_grid dd{
  margin:.5rem 0 0; font-size:.9375rem; line-height:1.6; color:var(--text);
  max-width:62ch; text-wrap:pretty;
}
@media (max-width:767px){ .tldr_grid{ grid-template-columns:minmax(0,1fr); gap:1.5rem } }

/* Screens inside the write-up, so each one sits beside the decision it shows */
.project_prose figure{ margin:2.5rem 0 }
.project_prose figure img{
  display:block; width:100%; height:auto; border-radius:.875rem; margin:0;
  box-shadow:0 0 0 1px var(--line), 0 24px 48px -30px rgba(0,0,0,.4);
}
.project_prose figcaption{ margin-block-start:.875rem; max-width:62ch }
.project_prose blockquote{ font-size:1.25rem; line-height:1.45; letter-spacing:-0.015em }