/* ═════════════════════════════════════════════════════════════════════════════════════════════════
   v5.css — THE SHARED PLATFORM SKIN, extracted 2026-09-09 from site/v5.html.

   WHAT THIS IS. Everything site/v5.html invented as a look — the palette, the Manrope/Geist Mono
   type scale, the floating pill header, the alternating black-and-grained-paper bands, the kickers,
   the pill buttons with their arrow glyphs, the numbered service rows, the cards, the blue check
   bullets and the footer — lifted out of that page's <style> block so the pages under /v5/** can
   inherit it from ONE file instead of each carrying a private copy that drifts.

   WHAT IS DELIBERATELY NOT HERE. The hero cube (.hero-art / .cube-stage / .cube / .face / .tile and
   the nine-tile gradients). It is home-page furniture, it is being rewritten, and a shared sheet is
   the wrong place for one page's decoration. The capability marquee and the device frames (.phone,
   .browser, .setup) stayed behind for the same reason: no page that links this file uses them.

   THE CONTRACT. docs/SITE-HEADER-THEME-CONTRACT.md §1 (the lockup), §1a (the named /v5 carve-out
   that lets the bar be a floating pill instead of a 1100px centred row), §3 (the switch) and §4
   (the dark tokens) all live in here. tests/header-theme.cjs resolves this file through the page's
   <link rel="stylesheet"> and reads the dark block out of it, so the [data-theme="dark"] rule below
   is load-bearing for the gate as well as for the eye.

   ONE THING THE GATE CANNOT SEE, per §1a: the accent word in both lockups stays ORANGE (#f97316)
   while everything else on the page is blue. The page palette was copied from an outside reference;
   the brand was not. If a future restyle sweeps the palette, re-check that by eye — the gate reads
   markup, not computed colour.
   ═════════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── 1. TOKENS ─────────────────────────────────────────────────────────────────────────────────── */
:root{
  /* the palette */
  /* 2026-09-09: --blue-soft and --muted below are MEASURED off the reference by a design-system
     extractor, not eyeballed — #6fa4ff (was #83a3ff) and #5f7087 (was #7082a1). Two literals
     carrying the same accent by hand were corrected with them: the second stop of the dark-band
     heading gradient in §6, and the four accent stars in --stars. If one of those drifts back the
     accent stops being one colour again. */
  --blue:#176bff; --blue-deep:#2468cb; --blue-soft:#6fa4ff;
  /* two shifts of the same blue that AA needs but the reference never names: --blue-ink for the
     11–12px labels on paper (5.4:1 — plain #176bff is 4.2:1 there), --blue-lite for the same labels
     on the black bands (6.8:1 — plain #176bff is 4.4:1). Same hue, same read, legible. */
  --blue-ink:#0f5ae0; --blue-lite:#5b93ff;
  --black:#050505; --navy-tint:#0b1c35;
  --paper:#ffffff; --paper-2:#f4f4f2;
  --muted:#5f7087; --hair:rgba(11,11,11,.12);
  --mono:"Geist Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --sans:Manrope,"Avenir Next",-apple-system,"Segoe UI",Arial,sans-serif;

  /* THE RADIUS SCALE, measured off the reference: 3 / 9 / 15 / 18. Every panel and card in this
     sheet is one of these four now rather than whatever it inherited (10, 12, 14 and 16 were all
     in here before). Pills stay 999px and the header pill keeps its own 28px — that geometry is
     written down in contract §1a and is not part of this scale. */
  --r-sm:3px; --r-md:9px; --r-lg:15px; --r-xl:18px;

  /* MOTION, also measured. Hovers land on xs/sm, card and section reveals on lg, set pieces on xl,
     all on the first ease-out unless something genuinely travels both ways. Every rule that uses
     these is switched off by the prefers-reduced-motion block in §2. */
  --t-instant:70ms; --t-xs:140ms; --t-sm:160ms; --t-md:252ms; --t-lg:420ms; --t-xl:720ms;
  --ease:cubic-bezier(.16,1,.3,1); --ease-alt:cubic-bezier(.22,1,.36,1); --ease-inout:cubic-bezier(.68,0,.22,1);

  /* THE SIGNATURE SHADOW is a blue glow ring rather than a grey drop shadow — it is what makes the
     reference's lit cards look lit from within. Used on the artifact panel and on card hover. */
  --glow:rgba(81,150,255,.11) 0 0 0 6px,rgba(81,150,255,.76) 0 0 22px 0;

  /* the token names the header/footer contract already spells, repointed at the palette above so no
     rule has to know the system changed underneath it */
  --ink:#0b0b0b; --mut:#55647c;
  --bg:#f4f4f2; --card:#ffffff; --line:rgba(11,11,11,.12);
  --navy:#050505; --navy2:#0b1c35;
  --grn:#176bff; --grn2:#2468cb; --org:#176bff; --org2:#2468cb;
  --mint:#176bff; --amber:#6fa4ff;
  --org-txt:#0f5ae0; --run-txt:#0f5ae0;
  --shadow:0 18px 50px rgba(5,10,25,.10);

  /* the arrows that go on everything, as MASKS so a screen reader never has to read
     "north east arrow" out of a ::after */
  --ar-ne:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E");
  --ar-e:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E");
  --ar-se:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7l10 10M17 8v9H8'/%3E%3C/svg%3E");
  /* the service-row arrow is PAINTED, not masked — that row's ::after is already spoken for by the
     category label, so the glyph rides in as a background-image instead */
  --ar-ne-blue:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23176bff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E");
  --spark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12 2.5l1.75 5.1 5.1 1.75-5.1 1.75L12 16.2l-1.75-5.1-5.1-1.75 5.1-1.75z'/%3E%3Cpath d='M18.6 14.4l.8 2.3 2.3.8-2.3.8-.8 2.3-.8-2.3-2.3-.8 2.3-.8z'/%3E%3Cpath d='M5.2 3.1l.6 1.7 1.7.6-1.7.6-.6 1.7-.6-1.7L2.9 5.4l1.7-.6z'/%3E%3C/svg%3E");
  /* the paper grain laid over the light bands — fine and quite present */
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  /* and the starfield laid over the black ones */
  --stars:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='480'%3E%3Cg fill='%23ffffff'%3E%3Ccircle cx='31' cy='58' r='1' opacity='.5'/%3E%3Ccircle cx='96' cy='22' r='1.2' opacity='.35'/%3E%3Ccircle cx='152' cy='120' r='1' opacity='.55'/%3E%3Ccircle cx='210' cy='44' r='1' opacity='.28'/%3E%3Ccircle cx='268' cy='96' r='1.4' opacity='.45'/%3E%3Ccircle cx='330' cy='30' r='1' opacity='.5'/%3E%3Ccircle cx='402' cy='88' r='1' opacity='.32'/%3E%3Ccircle cx='452' cy='150' r='1.2' opacity='.42'/%3E%3Ccircle cx='58' cy='170' r='1' opacity='.3'/%3E%3Ccircle cx='120' cy='232' r='1.3' opacity='.5'/%3E%3Ccircle cx='188' cy='196' r='1' opacity='.36'/%3E%3Ccircle cx='250' cy='268' r='1' opacity='.48'/%3E%3Ccircle cx='312' cy='204' r='1.2' opacity='.3'/%3E%3Ccircle cx='372' cy='262' r='1' opacity='.44'/%3E%3Ccircle cx='438' cy='320' r='1' opacity='.34'/%3E%3Ccircle cx='24' cy='300' r='1.2' opacity='.42'/%3E%3Ccircle cx='88' cy='368' r='1' opacity='.3'/%3E%3Ccircle cx='150' cy='420' r='1.3' opacity='.46'/%3E%3Ccircle cx='216' cy='344' r='1' opacity='.32'/%3E%3Ccircle cx='280' cy='410' r='1' opacity='.5'/%3E%3Ccircle cx='344' cy='352' r='1.2' opacity='.36'/%3E%3Ccircle cx='408' cy='432' r='1' opacity='.4'/%3E%3Ccircle cx='466' cy='392' r='1' opacity='.28'/%3E%3Ccircle cx='10' cy='440' r='1' opacity='.34'/%3E%3C/g%3E%3Cg fill='%236fa4ff'%3E%3Ccircle cx='176' cy='74' r='1.4' opacity='.5'/%3E%3Ccircle cx='356' cy='150' r='1.4' opacity='.45'/%3E%3Ccircle cx='64' cy='262' r='1.4' opacity='.4'/%3E%3Ccircle cx='300' cy='330' r='1.4' opacity='.42'/%3E%3C/g%3E%3C/svg%3E");
}

/* THE DARK THEME — contract §4. The light theme IS the reference; dark keeps the same blue and the
   same black spine and drops the paper bands to near-black instead of to white.
   tests/header-theme.cjs reads this block: --bg must stay inside it, before any closing brace. */
[data-theme="dark"]{
  color-scheme:dark;
  --paper:#0c1017; --paper-2:#070a0f;
  --ink:#eef2f8; --mut:#a8b6cc; --muted:#8a9ab6;
  --hair:rgba(255,255,255,.13);
  --bg:#070a0f; --card:#0c1017; --line:rgba(255,255,255,.13);
  --org-txt:#5b93ff; --run-txt:#5b93ff; --blue-ink:#5b93ff;
  --shadow:0 18px 50px rgba(0,0,0,.55);
  --ar-ne-blue:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b93ff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E");
}

/* ── 2. BASE + TYPE SCALE ──────────────────────────────────────────────────────────────────────
   Manrope is loaded by each page as a VARIABLE axis (200..800) so weight 560 renders as literally
   560 rather than snapping to 500 or 600. Geist Mono carries every micro-label. ── */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:110px;-webkit-text-size-adjust:100%}
body{font:16px/1.6 var(--sans);color:var(--ink);background:var(--paper-2);overflow-x:hidden;
     -webkit-font-smoothing:antialiased;overflow-wrap:break-word}
h1,h2,h3,h4{font-family:var(--sans);font-weight:620;letter-spacing:-.05em;overflow-wrap:break-word}
a{color:inherit;text-decoration:none}
img{max-width:100%}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
:focus-visible{outline:3px solid rgba(23,107,255,.6);outline-offset:2px;border-radius:6px}
::selection{background:rgba(23,107,255,.25)}
ul{list-style:none}
main{padding-top:84px}
@media(max-width:700px){main{padding-top:76px}}

/* reveal-on-scroll, driven by the small IntersectionObserver each page ships at the end of <body>.
   Reduced motion, no observer and no JS all fall through to "everything visible". */
.rv{opacity:0;transform:translateY(26px);transition:opacity var(--t-lg) var(--ease),transform var(--t-lg) var(--ease)}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}

/* ── 3. THE HEADER — the floating pill (contract §1 markup, §1a geometry, §3 switch) ───────────
   Inset 20px (16 on a phone), ~56px tall, r28, dark translucent charcoal in BOTH themes, floating
   over whatever band happens to be scrolling under it. ── */
nav{position:fixed;top:0;left:0;right:0;z-index:90;padding:20px 20px 0;pointer-events:none;background:none;border:0}
/* MEASURED OFF THE REFERENCE, 2026-09-10, after his "header is not samr / as criyx".
   Their <header class="site-header"> is a transparent full-width bar and the PILL is its inner
   .site-shell.nav-row. Read off their live markup at 1440:

       radius  999px  (a full pill)        ours was 28px  <- the difference you see first
       width   1221px                      ours was 1240
       ground  rgba(4,7,10,.82)            ours was rgba(26,27,30,.86)  - theirs is darker, cooler
       blur    none                        ours had blur(18px) saturate(150%)
       border  rgba(255,255,255,.13) 1px   ours was .10

   The 28px came from contract §1a, which describes the reference's nav as "radius 28px". That
   description was wrong - it is 999. The contract's other §1a numbers (inset, fixed, translucent,
   content scrolling under) all hold. */
.nav-in{pointer-events:auto;max-width:1221px;margin:0 auto;min-height:56px;padding:6px 6px 6px 18px;
        display:flex;align-items:center;justify-content:space-between;gap:14px;
        background:rgba(4,7,10,.82);
        border:1px solid rgba(255,255,255,.13);border-radius:999px;box-shadow:0 18px 44px rgba(0,0,0,.30)}
.nav-in>*{min-width:0}
/* §1a: the accent word stays ORANGE on a blue page. Scoped on .nav-in because the lockup markup
   carries an inline style saying var(--grn) that must not be edited. #f97316 on the charcoal pill
   measures ~5.3:1, above AA for 17px/800. */
.nav-in{--grn:#f97316}
.logo{display:flex;align-items:center;gap:11px;font-family:var(--sans);font-weight:800;font-size:17px;color:#fff;line-height:1.15;letter-spacing:-.01em}
.logo span{white-space:nowrap}
.logo small{display:block;font-family:var(--sans);font-size:10px;font-weight:600;color:rgba(255,255,255,.62);letter-spacing:1.2px;line-height:1.35;margin-top:2px;margin-right:-1.2px}
.logo .logomark{width:34px;height:34px;flex:0 0 auto;vertical-align:middle}
.logo,.logo:hover{color:#fff;text-decoration:none}
.nav-right{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.nav-home{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:999px;
          border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.06);color:#fff;
          font-size:14.5px;font-weight:600;white-space:nowrap;text-decoration:none;transition:background var(--t-xs) var(--ease),border-color var(--t-xs) var(--ease)}
.nav-home:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.4);color:#fff}
.theme-sw{width:44px;height:44px;flex:0 0 auto;border-radius:999px;border:1px solid rgba(255,255,255,.22);
          background:rgba(255,255,255,.06);color:#fff;display:grid;place-items:center;cursor:pointer;padding:0;transition:background var(--t-xs) var(--ease),border-color var(--t-xs) var(--ease)}
.theme-sw:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.4)}
.theme-sw .moon{display:none}
[data-theme="dark"] .theme-sw .sun{display:none}
[data-theme="dark"] .theme-sw .moon{display:block}
/* v5-nav-css:begin — OWNED BY tools/sync-v5-nav.mjs. Edit it there and re-run; anything typed
   between these markers is overwritten. The same block is written into site/v5.html's inline
   <style>, because that page carries its own copy of this skin and does not link this file —
   which is why the first version of these tabs worked on twenty pages and not on /v5. */
/* ── 3a. THE TABS (2026-09-10) ─────────────────────────────────────────────────────────────────
   His, about this bar: "only the footer it shows up. So there should be a tab on the tab bar,
   when you click on it, and you should be able to access the pages. Not sure why you have it
   built like that." Measured before: every one of the twenty-one /v5 pages carried a bar with
   TWO links in it — the lockup and a back arrow — while the footer underneath carried
   twenty-three. Everything this site sells was reachable only by scrolling to the bottom.

   Five tabs, not eleven: the pill is inset from both edges by contract §1a and cannot hold the
   whole footer. Services opens the hub that already lists all seven of them. ── */
.v5-links{display:flex;align-items:center;gap:2px;flex:1 1 auto;justify-content:center;min-width:0}
.v5-links a{display:inline-flex;align-items:center;min-height:40px;padding:0 13px;border-radius:999px;
            color:rgba(255,255,255,.82);font-size:14.5px;font-weight:600;white-space:nowrap;
            text-decoration:none;transition:background var(--t-xs) var(--ease),color var(--t-xs) var(--ease)}
.v5-links a:hover{background:rgba(255,255,255,.10);color:#fff}
.v5-links a[aria-current="page"]{color:#fff;background:rgba(255,255,255,.13)}

/* ── 3b. THE DROPDOWNS, AND THE ONE BUTTON (2026-09-11) ───────────────────────────────────────
   His "header on v5 still not working", said after the pill's radius, width, background, blur and
   border already matched the reference to the pixel. What did not match was BEHAVIOUR. Measured on
   criyx the night before: their Services tab opens seven entries plus a view-all, their Portfolio
   tab opens two, and they carry a filled button where we carried a back arrow. Every one of our
   tabs was a plain link.
   The gap between tab and panel is the PANEL'S OWN padding-top, not a margin: an empty margin is
   dead space the pointer leaves the tab through, and the panel closes mid-travel.
   Below 1040px the whole tab row is display:none and the sheet carries all of these already, so
   nothing here is a hover-only trap on a phone. */
/* A <details>, so it opens on CLICK. Measured on criyx: their triggers carry aria-expanded and
   hovering one leaves it "false". My first cut of this opened on hover, which is a different
   control on a touch screen — there is no hover on a phone, and on a tablet the first tap opens
   and the second navigates. Native <details> is click everywhere and needs no script to open.
   The FAQ neutralisation is copied from .v5-menu below for the same reason it exists there: §14
   of this file styles bare `details`/`summary` as a white FAQ card with a blue "+" and a 58px
   floor, and an unopposed element selector wins every property a class rule never mentions. */
.v5-tab{position:relative;display:inline-flex;background:none;border:0;border-radius:0;
        overflow:visible;margin:0;box-shadow:0 0 0 0 transparent;min-height:0}
.v5-tab>summary::after{content:none}
.v5-tab>summary::-webkit-details-marker{display:none}
.v5-tab>summary{list-style:none;box-sizing:border-box;cursor:pointer;
                display:inline-flex;align-items:center;gap:5px;min-height:40px;padding:0 13px;
                border:0;border-radius:999px;background:none;
                color:rgba(255,255,255,.82);font-size:14.5px;font-weight:600;white-space:nowrap;
                transition:background var(--t-xs) var(--ease),color var(--t-xs) var(--ease)}
.v5-tab>summary:hover{background:rgba(255,255,255,.10);color:#fff}
.v5-tab[open]>summary{background:rgba(255,255,255,.13);color:#fff}
/* the tab for the page you are on, and for any page under it, reads as current the way the plain
   tabs do — a summary is not a link, so aria-current has nothing to hang on */
.v5-tab[data-current="true"]>summary{color:#fff;background:rgba(255,255,255,.13)}
.v5-caret{opacity:.6;transition:transform var(--t-xs) var(--ease)}
.v5-tab[open]>summary .v5-caret{transform:rotate(180deg);opacity:1}
.v5-drop{position:absolute;left:50%;top:100%;transform:translateX(-50%);padding-top:12px;
         display:none;z-index:5}
.v5-tab[open] .v5-drop{display:block}
.v5-drop-in{display:block;width:268px;padding:8px;
            background:rgba(26,27,30,.97);backdrop-filter:blur(18px) saturate(150%);
            -webkit-backdrop-filter:blur(18px) saturate(150%);
            border:1px solid rgba(255,255,255,.12);border-radius:18px;
            box-shadow:0 24px 60px rgba(0,0,0,.45)}
/* (0,2,1) on purpose: .v5-links a is (0,1,1) and sets a 40px pill with 999px corners on every
   anchor inside the row, these included. Document order would win it, but a rule that depends on
   order is a rule that breaks the next time something is inserted above it. */
.v5-drop .v5-drop-in a{display:block;min-height:0;padding:10px 12px;border-radius:11px;
                       font-size:14.5px;font-weight:600;color:rgba(255,255,255,.86);white-space:nowrap}
.v5-drop .v5-drop-in a:hover{background:rgba(255,255,255,.10);color:#fff}
.v5-drop .v5-drop-in a.v5-drop-all{margin-top:4px;padding-top:12px;border-radius:0 0 11px 11px;
                                   border-top:1px solid rgba(255,255,255,.10);color:var(--grn)}

/* DARK INK ON THE ORANGE, not white. Measured: #0b0b0b on #f97316 is 7.49:1; white on it is
   2.80:1, under the 4.5 floor. The same arithmetic that put white on the sapphire elsewhere. */
.v5-cta{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
        min-height:40px;padding:0 18px;border-radius:999px;background:var(--grn);color:#0b0b0b;
        font-size:14.5px;font-weight:700;white-space:nowrap;text-decoration:none;
        transition:filter var(--t-xs) var(--ease)}
.v5-cta:hover{filter:brightness(1.08)}
/* Below 700 the wordmark needs the row to itself — contract §1, and a third control in that row
   is what wrapped the name onto three lines last time. The arrow folds away here already and the
   button folds with it; the sheet's own "Contact" is this same page. */
@media(max-width:700px){ .v5-cta{display:none} }

/* The same places on a narrow screen, as a NATIVE disclosure. No script: it opens before any JS
   has run and there is no state of ours to get stuck, which is the failure mode of a hand-rolled
   menu. The summary is the same 44px box the other two controls become on a phone. */
/* The sheet hangs off the PILL, not off the button. Anchored to the button it sat 38px past the
   left edge of a 390px screen, because the button is not the last control in the row — the Home
   box and the switch sit to its right, so `right:0` on the button is 112px in from the pill's
   own right edge and a 300px sheet then runs off the other side. */
/* THE PILL'S SHAPE LIVES INSIDE THESE MARKERS ON PURPOSE, not up in section 3 with the rest of
   the header. site/v5.html does not link this stylesheet - it carries its own ~51KB copy of the
   skin, including its own .nav-in - so editing the rule up there changed every /v5 page EXCEPT
   the home page, which is the one he was looking at when he said "header is not samr".
   tools/sync-v5-nav.mjs copies this block into that page's own <style> right before </head>, so
   it lands after its inline skin and wins. One source, both destinations, no drift. */
.nav-in{max-width:1221px;background:rgba(4,7,10,.82);border-color:rgba(255,255,255,.13);
        border-radius:999px;backdrop-filter:none;-webkit-backdrop-filter:none}
@media(max-width:700px){ .nav-in{border-radius:999px} }
.nav-in{position:relative}
/* NEUTRALISE THE FAQ ACCORDION STYLING, which this element inherits simply by being a <details>.
   §14 of this file styles bare `details` and `summary` for the FAQ: a white `var(--paper)` card
   with a border and a `summary::after` blue "+". Unopposed, they painted the nav's menu button as
   a white box with a blue plus in it, and `summary{min-height:58px}` made the pill two pixels
   taller than the contract's 56. None of that is a specificity fight — those are element
   selectors and these are stronger; they won on the properties this block never mentioned. */
.v5-menu{display:none;flex:0 0 auto;background:none;border:0;border-radius:0;
         overflow:visible;margin:0;box-shadow:none}
.v5-menu>summary::after{content:none}
/* box-sizing and padding:0 are not decoration. A <summary> is content-box with its own padding,
   so width:44px/height:44px measured 46x58 and the pill grew a row taller than the contract's
   56px. */
.v5-menu>summary{list-style:none;box-sizing:border-box;padding:0;width:44px;height:44px;min-height:44px;
                 gap:0;font-size:0;border-radius:14px;
                 border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.06);color:#fff;
                 display:grid;place-items:center;cursor:pointer}
.v5-menu>summary::-webkit-details-marker{display:none}
.v5-menu>summary:hover{background:rgba(255,255,255,.14)}
.v5-menu[open]>summary{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.4)}
.v5-sheet{position:absolute;right:8px;top:calc(100% + 10px);width:min(320px,calc(100vw - 40px));
          max-height:min(70vh,520px);overflow:auto;
          background:rgba(26,27,30,.97);backdrop-filter:blur(18px) saturate(150%);
          -webkit-backdrop-filter:blur(18px) saturate(150%);
          border:1px solid rgba(255,255,255,.12);border-radius:20px;
          box-shadow:0 24px 60px rgba(0,0,0,.45);padding:8px}
.v5-sheet a{display:block;padding:11px 13px;border-radius:12px;color:rgba(255,255,255,.86);
            font-size:15px;font-weight:600;text-decoration:none}
.v5-sheet a:hover{background:rgba(255,255,255,.10);color:#fff}
.v5-sheet b{display:block;padding:12px 13px 6px;font-size:11px;font-weight:700;letter-spacing:1.1px;
            text-transform:uppercase;color:rgba(255,255,255,.45)}
/* 1040, not 700: five tabs plus the lockup, the Home box and the switch stop fitting the pill
   before the phone breakpoints below start. Verified by measuring the row for overflow. */
@media(max-width:1040px){ .v5-links{display:none} .v5-menu{display:block} }
/* THE BACK ARROW FOLDS INTO THE MENU once there is a menu. Contract §1 says the wordmark stays on
   one line at 390, and adding a third 44px control broke that — measured, the lockup wrapped to
   three lines. The arrow was the redundant one: the brand lockup beside it is already a link to
   "/", and the sheet now carries Home as its first entry, so nothing is lost and the name fits
   again. Above 700 there is room for both, so both stay. */
@media(max-width:700px){ .nav-home{display:none} }

/* THE HERO HEADLINE LIVES IN HERE TOO, and for the same reason as the pill above it.
   site/v5.html's private copy of the skin carries its own `.hero h1` — including
   `@media(max-width:430px){font-size:40px}` and the old `font-weight:560` — so raising the type
   in this stylesheet reached twenty pages and left the home page at 40px/560 on a phone. That is
   what he was looking at when he said "i still see same": on his screen almost nothing HAD
   changed. Measured live with the cache bypassed at 390px before this: 40px / 560.
   The phone caps are raised rather than removed. They exist because his fourteen-word home
   headline is already six lines on a phone; the reference's longest anywhere is ten words. */
.hero h1{font-size:clamp(46px,2.4rem + 2.75vw,78px);line-height:.95;font-weight:700}
/* 42 and not 46: at 46 his fourteen-word home headline runs to SEVEN lines on a 390px phone,
   at 42 it is six, and the weight is doing most of the work anyway. The size here is limited
   by that one headline's length, not by taste. */
@media(max-width:430px){ .hero h1{font-size:42px} }
@media(max-width:375px){ .hero h1{font-size:38px} }

/* THE HOME HERO GOES BACK TO COPY-LEFT, ART-RIGHT — his 2026-09-10 "see size of cube", "see
   where it shows up", "it at top does not make sense", sent alongside criyx.com/services.

   Measured, both at 1440 and 390:
       criyx /services   h1 starts at y=362  /  y=236
       our   /v5         h1 starts at y=595  /  y=388
   The cube sits ABOVE everything and centred, so the headline lands 233px further down on a
   desktop and 152px further down on a phone, and on a phone you scroll past a cube to reach the
   first word. site/v5.html's private stylesheet forces that: it overrides .hero-grid to a centred
   single column and pins .hero-shot to order:-1, at EVERY width. Every other /v5 page, and the
   reference, put the copy in the left column and the visual beside it.

   .hero-shot is first in the markup, so the copy is ordered ahead of it rather than the markup
   being moved — same result, and nothing else that reads that order breaks. This was his own
   2026-09-09 instruction ("the FIRST thing in the hero at every width, horizontally centred") and
   he has now reversed it; the earlier arrangement is one revert away. */
.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:44px;align-items:center}
.hero-copy{order:1;display:block;text-align:left;width:auto}
.hero-shot{order:2;width:auto}
@media(max-width:940px){ .hero-grid{grid-template-columns:1fr;gap:38px} }
/* v5-nav-css:end */

/* on a phone the right-hand controls become BOXED rounded squares inside the pill */
@media(max-width:700px){
  nav{padding:16px 16px 0}
  .nav-in{padding:6px 6px 6px 14px;border-radius:999px;gap:10px}
  .nav-home,.theme-sw{border-radius:14px;background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.14)}
  .nav-home{min-height:44px;padding:0 14px}
}
/* §1's phone steps, byte for byte from the homepage (later rule wins) */
@media(max-width:520px){.logo{font-size:14px;gap:9px}.logo .logomark{width:34px;height:34px}.logo small{font-size:8.5px;letter-spacing:.6px}}
@media(max-width:460px){.logo{font-size:12.5px;gap:8px}.logo .logomark{width:30px;height:30px}.logo small{font-size:8px;letter-spacing:.4px}}
@media(max-width:430px){.logo{font-size:13px}.logo span{white-space:normal}}
@media(max-width:430px){.nav-in{gap:8px}.nav-right{gap:8px}.nav-home{width:44px;padding:0;justify-content:center}
  .nav-home-txt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}
@media(max-width:420px){.theme-sw{width:44px;height:44px}}

/* ── 4. BUTTONS — full pills. Primary solid blue + trailing ↗; secondary outline + trailing →. ── */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;
     background:var(--blue);color:#fff;font-family:var(--sans);font-weight:700;border:1px solid transparent;
     border-radius:999px;padding:12px 26px;font-size:15px;cursor:pointer;line-height:1.3;text-align:center;
     transition:background var(--t-sm) var(--ease),transform var(--t-sm) var(--ease),box-shadow var(--t-sm) var(--ease)}
.btn:hover{background:var(--blue-deep);transform:translateY(-1px);box-shadow:0 12px 26px rgba(23,107,255,.30)}
.btn:active{transform:none}
.btn::after{content:"";width:15px;height:15px;flex:0 0 auto;margin-left:10px;background:currentColor;
            -webkit-mask:var(--ar-ne) center/contain no-repeat;mask:var(--ar-ne) center/contain no-repeat}
.btn.big{padding:15px 30px;font-size:16px;min-height:56px}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--hair);box-shadow:none}
.btn.ghost:hover{background:transparent;border-color:var(--ink);color:var(--ink);box-shadow:none;transform:translateY(-1px)}
.btn.ghost::after{-webkit-mask-image:var(--ar-e);mask-image:var(--ar-e)}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px;align-items:center}
/* on a phone the primary CTA goes full-bleed and the secondary sits narrower and centred under it */
@media(max-width:560px){
  .cta-row{gap:12px;justify-content:center}
  .cta-row .btn{width:100%}
  .cta-row .btn.ghost{width:auto;max-width:100%;margin-left:auto;margin-right:auto}
}

/* ── 5. SECTION RHYTHM — the bands ALTERNATE near-black and grained paper ──────────────────────── */
section{padding:84px 0;position:relative}
section[id]{scroll-margin-top:110px}
@media(min-width:881px){section{padding:126px 0 138px}}

.alt,.paper{background:var(--paper-2);position:relative;overflow:hidden}
.paper{background:var(--paper)}
.alt::before,.paper::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:var(--grain);opacity:.21}
[data-theme="dark"] .alt::before,[data-theme="dark"] .paper::before{opacity:.2}
.alt>.wrap,.paper>.wrap{position:relative;z-index:1}

/* the black bands — dark in BOTH themes on purpose; they are the page's spine */
.dark-band{position:relative;overflow:hidden;background:var(--black);color:#e8eefc}
.dark-band::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:var(--stars);background-size:480px 480px}
.dark-band::after{content:"";position:absolute;left:14%;bottom:-38%;width:76%;height:74%;pointer-events:none;
                  background:radial-gradient(closest-side,rgba(23,107,255,.42),rgba(23,107,255,0))}
.dark-band>.wrap{position:relative;z-index:2}
.dark-band h2,.dark-band h3{color:#fff}
.dark-band h2 em{font-style:normal;color:var(--blue-soft)}
.dark-band .kicker{color:var(--blue-lite)}
.dark-band .lead{color:#b6c2d6}
.dark-band .lead b{color:#fff}
.dark-band .cap{color:#8ea0bd}
.dark-band .btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.34)}
.dark-band .btn.ghost:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.7);color:#fff}

/* ── 6. KICKERS AND HEADINGS ───────────────────────────────────────────────────────────────────
   Kickers: 12px / 700 / uppercase / .12em tracking, in the blue. ── */
.kicker{display:inline-block;font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.12em;
        text-transform:uppercase;color:var(--blue-ink);background:none;border-radius:0;padding:0;margin-bottom:18px}
h2{font-size:clamp(38px,2.0rem + 2.5vw,52px);font-weight:620;color:var(--ink);margin:0 0 14px;
   letter-spacing:-.05em;line-height:.99;max-width:19ch;text-wrap:balance}
h2 em{font-style:normal;color:var(--blue)}
.lead{color:var(--mut);max-width:52ch;font-size:16px;line-height:1.6}
.lead b{color:var(--ink);font-weight:700}
.cap{margin-top:14px;font-size:12.5px;color:var(--muted);line-height:1.55}
/* big headings on the dark bands are a diagonal gradient across the whole block — white at the
   top-left through to blue at the bottom-right, so the last line lands fully blue. Light bands stay
   solid ink, and anything that cannot clip a background to text keeps the solid colour. */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .hero h1,.dark-band h2{background:linear-gradient(135deg,#fff 30%,#6fa4ff 65%,#176bff 100%);
    -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
  .dark-band h2{background-image:linear-gradient(135deg,#fff 34%,#9db8ff 78%,#3d7dff 100%)}
}

/* the section head: kicker + big heading left, the paragraph right, baseline-aligned */
.splithead{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);column-gap:56px}
.splithead>*{grid-column:1/-1}
.splithead>.kicker{grid-column:1;grid-row:1}
.splithead>h2{grid-column:1;grid-row:2;margin-bottom:0}
.splithead>.lead{grid-column:2;grid-row:2;align-self:end;padding-bottom:8px;max-width:44ch}
@media(max-width:940px){
  .splithead{display:block}
  .splithead>h2{margin-bottom:16px}
  .splithead>.lead{padding-bottom:0}
}

/* ── 7. THE HERO BAND (no cube — that lives on the home page and is being rewritten) ───────────── */
.hero{padding:64px 0 76px}
.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:44px;align-items:center}
@media(max-width:940px){.hero-grid{grid-template-columns:1fr;gap:38px}}
/* the hero badge: a dark pill with a hairline and a small sparkle before blue uppercase text */
.hero .kicker{display:inline-flex;align-items:center;gap:9px;border:1px solid rgba(255,255,255,.18);
              background:rgba(255,255,255,.05);border-radius:999px;padding:9px 17px;color:var(--blue-lite);margin-bottom:26px}
.hero .kicker::before{content:"";width:14px;height:14px;flex:0 0 auto;background:currentColor;
                      -webkit-mask:var(--spark) center/contain no-repeat;mask:var(--spark) center/contain no-repeat}
/* 78px / 700, AND A CORRECTION TO WHAT IS WRITTEN ABOVE THIS FILE'S HISTORY.
   I first measured ONE page of the reference (their services page: 92px, 620, four words) and
   concluded their whole site used a 92px headline, which would have meant cutting every headline
   here to four or five words. He agreed to that. Then I measured the other eight pages he sent:

       services  92/620  4w      work      102/560  5w      portfolio 104/555  5w
       about     92/560  8w      contact    88/570 10w      audit      75/720  8w
       ai-agents 78/720  9w      automation 78/720  9w      roi        35/400  9w

   They do not have a headline size. They have a RANGE, 35 to 104, and it moves inversely with
   length: four or five words get 92-104, eight to ten words get 75-88 and a heavier weight, and
   they are perfectly happy with four and five line headlines (their about page runs five).

   So the copy here never needed cutting. 78/700 is exactly the treatment their own nine-word
   headlines get, which is the length most of ours are. The one genuine outlier is /v5's own
   fourteen words - longer than anything on their site, where ten is the maximum. */
.hero h1{font-size:clamp(46px,2.4rem + 2.75vw,78px);line-height:.95;font-weight:700;margin:0 0 22px;
         letter-spacing:-.057em;color:#fff;max-width:16ch;text-wrap:balance}
.hero h1 em{font-style:normal}
.hero .sub{font-size:16px;line-height:1.6;color:#b6c2d6;max-width:50ch}
.hero .sub+.sub{margin-top:14px}
.hero .sub b{color:#fff;font-weight:600}
.hero-note{margin-top:22px;font-size:13.5px;color:#8ea0bd;font-weight:500;max-width:48ch;line-height:1.6}
/* the second hero column, when a page has one: a quiet hairline panel rather than an illustration */
.hero-aside{border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.035);border-radius:var(--r-xl);padding:26px 24px}
.hero-aside .k{display:block;font:400 11px/1.6 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--blue-lite);margin-bottom:14px}
.hero-aside li{position:relative;padding:9px 0 9px 28px;font-size:14.5px;color:#cdd8ea;line-height:1.5;border-bottom:1px solid rgba(255,255,255,.08)}
.hero-aside li:last-child{border-bottom:0}
.hero-aside li::before{content:"";position:absolute;left:2px;top:16px;width:10px;height:6px;
                       border-left:2.4px solid var(--blue-soft);border-bottom:2.4px solid var(--blue-soft);transform:rotate(-45deg)}
/* the hero is CENTRED on a phone — badge, headline, paragraphs and both CTAs — while every band
   below it stays left-aligned */
@media(max-width:700px){
  .hero-grid>div:first-child{text-align:center;display:flex;flex-direction:column;align-items:center}
  .hero h1{max-width:none}
  .hero .sub,.hero-note{margin-left:auto;margin-right:auto}
  .hero .cta-row{width:100%;justify-content:center}
}

/* ── 8. THE THREE-UP — one block cut by hairlines, a mono index over each column ────────────────── */
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:52px;
       border:1px solid var(--hair);border-radius:var(--r-lg);overflow:hidden;background:var(--paper)}
@media(max-width:880px){.three{grid-template-columns:1fr}}
.three article{padding:26px 24px 28px;border-right:1px solid var(--hair);display:flex;flex-direction:column;background:none}
.three article:last-child{border-right:0}
@media(max-width:880px){.three article{border-right:0;border-bottom:1px solid var(--hair)}.three article:last-child{border-bottom:0}}
.three .n{display:block;width:auto;height:auto;background:none;border-radius:0;
          font:400 12px/1.6 var(--mono);letter-spacing:.06em;color:var(--muted)}
.three h3{font-size:22px;font-weight:620;margin:34px 0 10px;letter-spacing:-.04em;color:var(--ink);line-height:1.15}
.three p{font-size:15px;color:var(--mut);line-height:1.62}
.three article::after{content:"";width:16px;height:16px;margin-top:22px;background:var(--blue);
                      -webkit-mask:var(--ar-se) center/contain no-repeat;mask:var(--ar-se) center/contain no-repeat}
/* the same block on a black band */
.dark-band .three{background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.13)}
.dark-band .three article{border-right-color:rgba(255,255,255,.10)}
@media(max-width:880px){.dark-band .three article{border-bottom-color:rgba(255,255,255,.10)}}
.dark-band .three h3{color:#fff}
.dark-band .three p{color:#b6c2d6}
.dark-band .three .n{color:#8ea0bd}
/* the line that sometimes sits under the three */
.three-note{margin-top:26px;font-size:14.5px;color:var(--mut);max-width:64ch;line-height:1.65}
.three-note b{color:var(--ink)}
.dark-band .three-note{color:#b6c2d6}
.dark-band .three-note b{color:#fff}

/* ── 9. THE WIRING DIAGRAM — in comes / what we build / where it lands ─────────────────────────── */
.wire{display:grid;grid-template-columns:1fr 34px auto 34px 1fr;gap:18px;align-items:center;margin-top:48px}
@media(max-width:880px){.wire{grid-template-columns:1fr;gap:12px;max-width:420px;margin-left:auto;margin-right:auto}}
.wcol{display:grid;gap:10px;min-width:0}
.wchip{display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.13);
       border-radius:var(--r-md);padding:13px 15px;font-size:14.5px;font-weight:500;color:#e8eefc;line-height:1.35;min-height:50px}
.wchip i{flex:0 0 auto;width:28px;height:28px;border-radius:var(--r-md);display:grid;place-items:center;font-style:normal;
         font-size:14px;background:rgba(23,107,255,.22)}
.wcol.out .wchip i{background:rgba(131,163,255,.20)}
.warr{display:grid;place-items:center;color:var(--blue-lite)}
@media(max-width:880px){.warr svg{transform:rotate(90deg)}}
.whub{background:linear-gradient(158deg,#2b7bff,#0d357e 78%);border:1px solid rgba(255,255,255,.22);
      border-radius:var(--r-lg);padding:24px 22px;text-align:center;max-width:252px;box-shadow:0 26px 56px rgba(23,107,255,.28)}
@media(max-width:880px){.whub{max-width:none}}
.whub .lb{display:block;font:400 10.5px/1.5 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#cddcff}
.whub b{display:block;font:560 19px/1.15 var(--sans);letter-spacing:-.04em;color:#fff;margin:10px 0 8px}
.whub p{font-size:13.5px;color:#d5e2ff;line-height:1.55}
.wnote{margin-top:30px;font-size:14px;color:#93a4c2;max-width:62ch;line-height:1.65}
.wnote b{color:#fff}

/* ── 10. THE NUMBERED SERVICE ROWS ─────────────────────────────────────────────────────────────
   mono index · blue mono category over the name · a grey description on the right · a ↗ in the
   row's top-right on links · a hairline under. The category is declared per row with data-cat, so a
   single list can mix Automate and Build rows — set counter-reset:svcrow on the nearest container
   so the indices restart per page rather than running on. ── */
.svc{display:block;border-top:1px solid var(--hair);counter-reset:svcrow}
.svc>*{position:relative;display:grid;
       grid-template-columns:64px minmax(190px,1fr) minmax(0,1.3fr) 30px;column-gap:26px;row-gap:6px;
       align-items:start;padding:26px 4px;background:none;border:0;border-bottom:1px solid var(--hair);
       border-radius:0;transition:background var(--t-sm) var(--ease)}
.svc>*:last-child{border-bottom:0}
.svc a{background-image:var(--ar-ne-blue);background-repeat:no-repeat;background-position:right 4px top 28px;background-size:16px 16px}
.svc a:hover,.svc a:focus-visible{background-color:rgba(23,107,255,.05);transform:none}
.svc>*::before{content:counter(svcrow,decimal-leading-zero);counter-increment:svcrow;grid-column:1;grid-row:1/span 2;
               font:400 12px/1.9 var(--mono);letter-spacing:.06em;color:var(--muted);padding-top:5px}
.svc>*::after{content:attr(data-cat);grid-column:2;grid-row:1;
              font:500 11px/1.6 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--blue-ink)}
.svc>*>h3{grid-column:2;grid-row:2;font-size:clamp(22px,1.1rem + .8vw,28px);font-weight:620;color:var(--ink);
          letter-spacing:-.045em;line-height:1.12;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.svc>*>p{grid-column:3;grid-row:1/span 2;align-self:center;font-size:15px;color:var(--mut);line-height:1.6;margin:0}
.svc>*>.pr{grid-column:3;grid-row:3;margin:6px 0 0;padding:0;border:0;
           font:500 11px/1.7 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--blue-ink)}
.svc>*>.pr span{display:block;font:400 13.5px/1.55 var(--sans);letter-spacing:0;text-transform:none;color:var(--muted);margin-top:4px}
.svc>*>.go{grid-column:3;grid-row:4;display:inline-block;margin-top:6px;font-size:13.5px;font-weight:700;color:var(--blue-ink)}
/* the "we run this today" chip that sits beside a row's name */
.run{font:500 10px/1.5 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--blue-ink);
     background:rgba(23,107,255,.10);border:1px solid rgba(23,107,255,.30);border-radius:999px;padding:4px 9px;white-space:nowrap}
@media(max-width:940px){
  .svc>*{grid-template-columns:44px minmax(0,1fr);column-gap:14px;row-gap:7px;padding:22px 0}
  .svc>*::before{grid-column:1;grid-row:1/span 2;padding-top:3px}
  .svc>*::after{grid-column:2;grid-row:1}
  .svc>*>h3{grid-column:2;grid-row:2}
  .svc>*>p{grid-column:2;grid-row:3;align-self:start;margin-top:4px}
  .svc>*>.pr{grid-column:2;grid-row:4}
  .svc>*>.go{grid-column:2;grid-row:5}
  .svc a{background-position:right 0 top 24px;background-size:14px 14px}
}
/* …and the same rows on a BLACK band. The .dark-band sections are black in BOTH themes, so a row
   painted from --ink is white-on-black in dark mode and black-on-black in light — which is what the
   first /v5/portfolio screenshot showed. .three and .steps already carry this pair of overrides;
   .svc did not, only because until now nothing had put a service row on a dark band. */
.dark-band .svc{border-top-color:rgba(255,255,255,.13);
                --ar-ne-blue:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b93ff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E")}
.dark-band .svc>*{border-bottom-color:rgba(255,255,255,.10)}
.dark-band .svc>*:last-child{border-bottom:0}
.dark-band .svc>*::before{color:#8ea0bd}
.dark-band .svc>*::after{color:var(--blue-lite)}
.dark-band .svc>*>h3{color:#fff}
.dark-band .svc>*>p{color:#b6c2d6}
.dark-band .svc>*>.go{color:var(--blue-lite)}
.dark-band .svc a:hover,.dark-band .svc a:focus-visible{background-color:rgba(255,255,255,.06)}
.svc-note{margin-top:28px;font-size:14.5px;color:var(--mut);max-width:64ch;line-height:1.65}
.svc-note b{color:var(--ink)}
.dark-band .svc-note{color:#b6c2d6}
.dark-band .svc-note b{color:#fff}

/* ── 11. THE BLUE CHECK BULLETS ────────────────────────────────────────────────────────────────
   The house list. .checks ticks in the blue; .checks.caveat swaps the tick for a bar, so a list of
   limits never wears the same glyph as a list of features — the distinction is the point on pages
   that print both. ── */
.checks{margin-top:30px;display:grid;gap:14px;max-width:76ch}
.checks li{position:relative;padding-left:30px;font-size:15px;color:var(--mut);line-height:1.62}
.checks li b{color:var(--ink);font-weight:700}
.checks li::before{content:"";position:absolute;left:2px;top:9px;width:10px;height:6px;
                   border-left:2.4px solid var(--blue);border-bottom:2.4px solid var(--blue);transform:rotate(-45deg)}
.checks.caveat li::before{top:12px;left:1px;width:13px;height:0;border-left:0;
                          border-bottom:2.4px solid var(--muted);transform:none}
.dark-band .checks li{color:#b6c2d6}
.dark-band .checks li b{color:#fff}
.dark-band .checks li::before{border-color:var(--blue-soft)}
.dark-band .checks.caveat li::before{border-color:#8ea0bd}
/* the sub-heading that introduces a list */
.list-h{margin-top:34px;font:500 11px/1.6 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--blue-ink)}
.dark-band .list-h{color:var(--blue-lite)}
.list-h+.checks{margin-top:16px}

/* ── 12. CARDS ─────────────────────────────────────────────────────────────────────────────────── */
/* the step cards */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(212px,100%),1fr));gap:14px;margin-top:48px}
.steps li{background:var(--paper);border:1px solid var(--hair);border-radius:var(--r-lg);padding:22px 20px 24px}
.steps .k{display:block;font:400 11px/1.6 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--blue-ink);margin-bottom:14px}
.steps b{display:block;font:560 19px/1.15 var(--sans);letter-spacing:-.045em;color:var(--ink);margin-bottom:8px}
.steps p{font-size:14px;color:var(--mut);line-height:1.58}
.dark-band .steps li{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.13)}
.dark-band .steps .k{color:var(--blue-lite)}
.dark-band .steps b{color:#fff}
.dark-band .steps p{color:#b6c2d6}
.steps-note{margin-top:30px;font-size:14.5px;color:var(--mut);max-width:64ch;line-height:1.65}
.steps-note b{color:var(--ink)}
.dark-band .steps-note{color:#b6c2d6}
.dark-band .steps-note b{color:#fff}

/* the big case-shaped cards: a gradient panel down the left third carrying a badge and an
   "01 / 03" counter, the text on the right two thirds, the stack cascading diagonally.
   Set counter-reset:waycard on the container. */
.ways{display:block;margin-top:52px;counter-reset:waycard}
.ways article{position:relative;background:var(--paper);border:1px solid var(--hair);border-radius:var(--r-xl);
              padding:30px 30px 30px calc(var(--panel) + 32px);margin-bottom:24px;overflow:hidden;
              --panel:31%;transition:border-color var(--t-sm) var(--ease),box-shadow var(--t-sm) var(--ease)}
.ways article:nth-child(2){margin-left:130px}
.ways article:nth-child(3){margin-left:215px}
.ways article:hover{border-color:rgba(23,107,255,.45);box-shadow:0 16px 40px rgba(5,10,25,.09)}
.ways article::before{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--panel);
                      background:linear-gradient(152deg,#2f7bff,#0b1c35 88%)}
.ways article::after{content:"0" counter(waycard) " / 0" attr(data-of);counter-increment:waycard;position:absolute;
                     left:var(--panel);top:22px;transform:translateX(-100%);margin-left:-18px;
                     font:400 11.5px/1 var(--mono);letter-spacing:.14em;color:rgba(255,255,255,.72);white-space:nowrap}
.ways .wk{position:absolute;left:20px;top:18px;z-index:2;display:inline-block;
          font:500 10.5px/1.5 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#fff;
          background:rgba(5,5,5,.55);border:1px solid rgba(255,255,255,.28);border-radius:999px;padding:5px 11px}
.ways h3{font-size:clamp(24px,1.3rem + 1vw,30px);font-weight:620;color:var(--ink);margin:0 0 10px;
         letter-spacing:-.05em;line-height:1.1;text-wrap:balance}
.ways p{font-size:14.5px;color:var(--mut);line-height:1.6;max-width:62ch}
.ways p+p{margin-top:12px}
.ways ul{margin-top:18px;padding-top:16px;border-top:1px solid var(--hair);display:flex;flex-wrap:wrap;gap:9px}
.ways li{position:relative;padding:7px 14px 7px 30px;font-size:13px;color:var(--mut);line-height:1.4;
         border:1px solid var(--hair);border-radius:999px}
.ways li::before{content:"";position:absolute;left:12px;top:12px;width:9px;height:5px;
                 border-left:2px solid var(--blue);border-bottom:2px solid var(--blue);transform:rotate(-45deg)}
.plan-note{margin-top:34px;font-size:14.5px;color:var(--mut);max-width:64ch;line-height:1.65}
.plan-note b{color:var(--ink)}
@media(max-width:940px){
  .ways article{--panel:100%;padding:170px 22px 26px;margin-left:0!important}
  .ways article::before{width:100%;height:148px;bottom:auto}
  .ways article::after{left:100%;margin-left:-20px}
}

/* the hairline tile grid (industries, or any set of short links) */
.trades{margin-top:0;display:grid;grid-template-columns:repeat(2,1fr);gap:0;
        border:1px solid rgba(255,255,255,.13);border-radius:var(--r-lg);overflow:hidden;background:rgba(255,255,255,.03)}
.trades a{display:flex;align-items:center;gap:12px;min-height:62px;padding:14px 18px;border-radius:0;background:none;
          border:0;border-right:1px solid rgba(255,255,255,.10);border-bottom:1px solid rgba(255,255,255,.10);
          font-size:15px;font-weight:500;color:#e8eefc;transition:background var(--t-xs) var(--ease)}
.trades a:nth-child(2n){border-right:0}
.trades a:hover,.trades a:focus-visible{background:rgba(23,107,255,.16);transform:none}
.trades a::after{content:"";width:14px;height:14px;margin-left:auto;flex:0 0 auto;background:var(--blue-lite);opacity:.75;
                 -webkit-mask:var(--ar-ne) center/contain no-repeat;mask:var(--ar-ne) center/contain no-repeat}
.trades-all{display:inline-flex;align-items:center;gap:9px;min-height:44px;margin-top:26px;font-weight:700;
            color:var(--blue-lite);font-size:15px}
.trades-all:hover{text-decoration:underline}
@media(max-width:940px){.trades{grid-template-columns:1fr}.trades a{border-right:0}}

/* ── 13. FAQ ROWS ──────────────────────────────────────────────────────────────────────────────── */
.faq{max-width:820px;margin-top:44px}
details{background:var(--paper);border:1px solid var(--hair);border-radius:var(--r-lg);margin-bottom:12px;overflow:hidden;box-shadow:none}
summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:14px;
        padding:19px 22px;font-family:var(--sans);font-weight:600;font-size:17px;letter-spacing:-.02em;min-height:58px;color:var(--ink)}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-family:var(--sans);font-weight:400;font-size:24px;line-height:1;color:var(--blue);transition:transform var(--t-md) var(--ease-inout);flex:none}
details[open] summary::after{transform:rotate(45deg)}
@media(prefers-reduced-motion:reduce){summary::after{transition:none}}
details .a{padding:0 22px 20px;font-size:14.5px;color:var(--mut);line-height:1.65}
details .a b{color:var(--ink)}
.a-go{display:inline-flex;align-items:center;gap:8px;min-height:40px;margin:10px 18px 0 0;font-size:14px;font-weight:700;color:var(--blue-ink)}
.a-go:hover{text-decoration:underline}
.dark-band details{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.13)}
.dark-band summary{color:#fff}
.dark-band details .a{color:#b6c2d6}
.dark-band details .a b{color:#fff}
.dark-band .a-go{color:var(--blue-lite)}

/* ── 14. THE CLOSING CALL ──────────────────────────────────────────────────────────────────────── */
.end{text-align:center}
.end h2{margin-left:auto;margin-right:auto;max-width:17ch}
.end .lead{margin:0 auto}
.end .lead+.lead{margin-top:14px}
.end .cta-row{justify-content:center}
.end .cap{margin-left:auto;margin-right:auto;max-width:56ch}

/* ── 15. FOOTER — the contract's structure, in the navy tint ───────────────────────────────────── */
footer{background:var(--navy-tint);color:#93a4c2;padding:64px 0 56px;font-size:14px;overflow-wrap:anywhere}
footer a{color:#dbe4f5;font-weight:500}
footer a:hover{color:var(--blue-soft)}
/* SIX columns, after the reference site's footer. The brand sits on its own row above them rather
   than inside the grid: at 1280px a seventh cell for a 34px logomark plus three lines of blurb
   leaves the six link columns ~120px each, which wraps every second label. minmax(0,1fr) rather
   than 1fr because the Contact column holds a 38-character email and a bare 1fr track refuses to
   shrink below its longest word — that is the horizontal scrollbar, not the email.
   Steps 6 -> 3 -> 2, never to 1: one column of thirty links is a footer taller than some of the
   pages it serves. */
.ft-top{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:22px 40px;align-items:start;
        padding-bottom:30px;margin-bottom:30px;border-bottom:1px solid rgba(255,255,255,.1)}
.ft-brand .ft-blurb{max-width:56ch}
.ft-reach{justify-self:end;text-align:right}
.ft-reach .ft-social{margin-top:0;justify-content:flex-end}
@media(max-width:900px){.ft-top{grid-template-columns:1fr}
  .ft-reach{justify-self:start;text-align:left}
  .ft-reach .ft-social{justify-content:flex-start}}
.ft-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:30px 22px}
@media(max-width:1080px){.ft-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:560px){.ft-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ft-place{font-size:12px;font-weight:400;text-align:right}
@media(max-width:560px){.ft-place{text-align:left}}
.ft-logo{display:flex;align-items:center;gap:11px;font-family:var(--sans);font-weight:800;font-size:17px;color:#fff;line-height:1.15;letter-spacing:-.01em}
.ft-logo span{white-space:nowrap}
/* orange here too, for the same reason as the header lockup — contract §1a.
   #f97316 on the #0b1c35 footer measures ~6.5:1. */
.ft-logo em{font-style:normal;color:#f97316}
.ft-logo small{display:block;font-family:var(--sans);font-size:10px;font-weight:600;color:#8ea0bd;letter-spacing:1.2px;line-height:1.35;margin-top:2px}
.ft-logo .logomark{width:34px;height:34px;flex:0 0 auto}
.ft-blurb,.ft-p{margin:14px 0 0;line-height:1.6}
.ft-social{display:flex;gap:8px;margin-top:16px}
.ft-social a{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:999px;
             background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);color:#dbe4f5}
.ft-social a:hover{background:rgba(23,107,255,.30);color:#fff}
.ft-contact{margin-top:14px}
.ft-h{margin:0 0 12px;font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#fff}
.ft-copy{font-size:12px;font-weight:400}
.ft-list{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.ft-card{border:1px solid rgba(255,255,255,.12);border-radius:var(--r-lg);padding:14px 16px;background:rgba(255,255,255,.04)}
.ft-card b{color:#fff}.ft-card p{margin:7px 0 0;line-height:1.5}
.ft-trades{margin-top:36px;padding-top:26px;border-top:1px solid rgba(255,255,255,.1)}
.ft-tlinks{display:flex;flex-wrap:wrap;gap:8px 18px}
.ft-bottom{margin-top:30px;padding-top:20px;border-top:1px solid rgba(255,255,255,.1);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.ft-legal{display:flex;gap:18px;flex-wrap:wrap}
@media(max-width:560px){.ft-logo span{white-space:normal}}

/* ── 16. LEGAL PROSE ────────────────────────────────────────────────────────────────────────────
   /v5/privacy and /v5/terms carry the text of the live pages at /receptionist/privacy and
   /receptionist/terms, copied VERBATIM — only the surrounding design changed. Long-form prose needs
   a measure and a subhead size the marketing h2 above (up to 56px) does not give it, so it gets a
   scope here rather than a second stylesheet or a private copy of this one on each page.

   The class names inside — ul.body, .box, .tint, .dim, footer.page — are the SOURCE documents' own,
   kept deliberately so the copied markup is a straight lift and a diff against the live pages can
   still prove the words did not move. Do not rename them to something tidier; that would make the
   next person's verbatim check harder for no gain.

   These rules assume the article sits in an .alt band (background --paper-2), so .box is a --paper
   card on it in both themes. ── */
.legal{max-width:44rem;margin:0 auto}
/* max-width and text-wrap are UNSET here on purpose: the marketing h2 above caps itself at 19ch and
   balances, which is right for a six-word headline and wrong for "Who processes it, and where" —
   it broke every legal subhead onto two lines on the first screenshot. */
.legal h2{font-size:clamp(19px,3vw,21px);font-weight:700;line-height:1.3;letter-spacing:-.01em;
          margin:34px 0 10px;color:var(--ink);max-width:none;text-wrap:initial}
.legal>h2:first-child{margin-top:0}
.legal p,.legal li{font-size:16px;line-height:1.65;margin-bottom:12px;color:var(--mut)}
.legal b,.legal strong{font-weight:700;color:var(--ink)}
.legal ul.body{list-style:disc;padding-left:22px;margin-bottom:12px}
.legal ul.body li{padding-left:2px}
.legal a{color:var(--blue-ink);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.legal a:hover{text-decoration:none}
.legal .box{background:var(--paper);border:1px solid var(--hair);border-radius:var(--r-xl);padding:18px 20px;margin:16px 0}
.legal .box p:last-child{margin-bottom:0}
.legal .tint{background:rgba(23,107,255,.06);border-color:rgba(23,107,255,.30)}
[data-theme="dark"] .legal .tint{background:rgba(91,147,255,.10);border-color:rgba(91,147,255,.34)}
.legal .dim{color:var(--muted);font-weight:400}
/* The document's own sign-off is a <footer>, so the SITE footer rule above (navy background, 64px
   of padding, pale text) lands on it and paints a dark slab in the middle of the prose. Undone
   here rather than by renaming the element, because the element name is the source document's. */
.legal footer.page{margin-top:38px;padding:18px 0 0;border-top:1px solid var(--hair);
                   background:none;color:var(--muted);font-size:14px;line-height:1.6;
                   overflow-wrap:break-word}
.legal footer.page a{color:var(--blue-ink);font-weight:600}

/* ── 17. THE SERVICE-PAGE COMPONENT SET (2026-09-09) ─────────────────────────────────────────────
   WHY THIS EXISTS. The seven service pages and their hub were built out of headings, paragraphs and
   tick lists — correct fonts, correct colours, and far plainer pieces than the reference they are
   meant to match. Owner, 2026-09-09: "from header to footer nothing matches". This section is the
   missing furniture, put in the SHARED sheet so all eight pages wear the same components rather
   than eight private approximations of them.

   THE SKELETON every one of those pages is now built to, six bands, alternating:
     S1 dark   hero            h1 · one paragraph · .artifact beside it · .hgrid of three
     S2 light  .numgrid        three .ncard, index labels 01–03
     S3 light  .numgrid.four   four .ncard, index labels 01–04   (or .techgrid, on the two big pages)
     S4 dark   .numgrid.feat   three .fcard with pill tags       (or .techgrid)
     S5 light  .twoup          one .fcard beside a nine-item .iclist
     S6 dark   .end            heading and the booking button, nothing else

   RADII AND MOTION come from the measured scale in §1 (--r-*, --t-*, --ease). Do not hand-pick a
   radius or a duration in here; if a component needs one that is not on the scale, the scale is
   what has to change. The glow (--glow) is the reference's signature lit-card shadow and is
   deliberately reserved for the artifact panel and for card hover — spraying it everywhere is how
   it stops meaning anything. ── */

/* 17.1 the icon chip — a rounded square holding one 24-viewBox stroked glyph. Every icon on these
   pages is inline SVG with aria-hidden, so nothing here is announced twice or read as a word. */
.ic{display:grid;place-items:center;width:40px;height:40px;flex:0 0 auto;border-radius:var(--r-md);
    background:rgba(23,107,255,.10);border:1px solid rgba(23,107,255,.24);color:var(--blue-ink)}
.ic svg{width:19px;height:19px;display:block}
.ic.lg{width:52px;height:52px;border-radius:var(--r-lg)}
.ic.lg svg{width:24px;height:24px}
.dark-band .ic{background:rgba(111,164,255,.13);border-color:rgba(111,164,255,.30);color:var(--blue-soft)}

/* 17.2 the mono index label — 01, 02, 03. The reference puts one on almost every card; it is what
   makes a grid read as a sequence rather than as a heap. */
.ix{display:block;font:400 12px/1 var(--mono);letter-spacing:.08em;color:var(--muted)}
.dark-band .ix{color:#8ea0bd}

/* 17.3 NUMBERED FEATURE CARDS — component 1. Three-up by default, .four for a four-up row. */
.numgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:52px;align-items:stretch}
.numgrid.four{grid-template-columns:repeat(4,1fr)}
@media(max-width:1040px){.numgrid.four{grid-template-columns:repeat(2,1fr)}}
@media(max-width:880px){.numgrid,.numgrid.four{grid-template-columns:1fr}}
.ncard{position:relative;display:flex;flex-direction:column;background:var(--paper);
       border:1px solid var(--hair);border-radius:var(--r-lg);padding:24px 22px 26px;
       transition:border-color var(--t-sm) var(--ease),box-shadow var(--t-sm) var(--ease)}
.ncard:hover{border-color:rgba(23,107,255,.42);box-shadow:var(--glow)}
.ncard>.ix{position:absolute;top:25px;right:22px}
.ncard h3{font-size:19px;font-weight:620;letter-spacing:-.04em;line-height:1.18;color:var(--ink);
          margin:18px 0 8px;padding-right:40px;max-width:none;text-wrap:balance}
.ncard p{font-size:14.5px;color:var(--mut);line-height:1.6}
.dark-band .ncard{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.13)}
.dark-band .ncard:hover{border-color:rgba(111,164,255,.5)}
.dark-band .ncard h3{color:#fff}
.dark-band .ncard p{color:#b6c2d6}

/* 17.4 THE LARGE FEATURE CARD — component 3: icon in a rounded square, a heading, a paragraph and a
   row of small pill tags along the bottom. .numgrid.feat is the three-up it sits in on a dark band;
   the same card is also the left half of the two-up in 17.7. */
.fcard{position:relative;display:flex;flex-direction:column;background:var(--paper);
       border:1px solid var(--hair);border-radius:var(--r-lg);padding:28px 26px 26px;
       transition:border-color var(--t-sm) var(--ease),box-shadow var(--t-sm) var(--ease)}
.fcard:hover{border-color:rgba(23,107,255,.42);box-shadow:var(--glow)}
.fcard>.ix{position:absolute;top:29px;right:26px}
.fcard h3{font-size:clamp(20px,1.05rem + .35vw,23px);font-weight:620;letter-spacing:-.045em;
          line-height:1.14;color:var(--ink);margin:20px 0 10px;padding-right:42px;max-width:none;text-wrap:balance}
.fcard p,.fcard .d{display:block;font-size:14.5px;color:var(--mut);line-height:1.62}
.fcard .d+.d{margin-top:11px}
.fcard .d b,.fcard p b{color:var(--ink);font-weight:700}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:20px}
.tags span{font:500 10.5px/1.5 var(--mono);letter-spacing:.1em;text-transform:uppercase;
           color:var(--blue-ink);background:rgba(23,107,255,.08);border:1px solid rgba(23,107,255,.26);
           border-radius:var(--r-md);padding:5px 10px}
.dark-band .fcard{background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.14)}
.dark-band .fcard:hover{border-color:rgba(111,164,255,.5)}
.dark-band .fcard h3{color:#fff}
.dark-band .fcard p,.dark-band .fcard .d{color:#b6c2d6}
.dark-band .fcard .d b,.dark-band .fcard p b{color:#fff}
.dark-band .tags span{color:var(--blue-soft);background:rgba(111,164,255,.10);border-color:rgba(111,164,255,.32)}

/* 17.5 THE TECHNOLOGY GRID — component 2: eight numbered cards, an icon, a name and one line of
   what it does here. HOUSE RULE, and it is not decoration: only tools we actually use go in it, it
   names no partnership and implies no endorsement, and the note under it says so on the page. */
.techgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:52px}
@media(max-width:1040px){.techgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.techgrid{grid-template-columns:1fr}}
.tcard{position:relative;display:flex;flex-direction:column;background:var(--paper);
       border:1px solid var(--hair);border-radius:var(--r-lg);padding:20px 18px 22px;
       transition:border-color var(--t-sm) var(--ease),box-shadow var(--t-sm) var(--ease)}
.tcard:hover{border-color:rgba(23,107,255,.42);box-shadow:var(--glow)}
.tcard>.ix{position:absolute;top:21px;right:18px}
.tcard h3{font-size:16.5px;font-weight:700;letter-spacing:-.03em;line-height:1.2;color:var(--ink);
          margin:16px 0 6px;padding-right:34px;max-width:none;text-wrap:initial}
.tcard p{font-size:13.5px;color:var(--mut);line-height:1.55}
.dark-band .tcard{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.13)}
.dark-band .tcard:hover{border-color:rgba(111,164,255,.5)}
.dark-band .tcard h3{color:#fff}
.dark-band .tcard p{color:#b6c2d6}

/* 17.6 THE RENDERED ARTIFACT CARD — component 4. The panel that sits beside the hero heading and
   shows the thing a customer actually ends up holding: a mono kicker, a mono label opposite it, a
   lit inner panel with a title, a label/value pair in mono, pill tags, and a footer row carrying an
   index and one line. On this site the deliverable is the written plan that comes out of a scoping
   call — so it is a real artifact, not a mocked-up dashboard of numbers nobody measured. */
.artifact{position:relative;border:1px solid rgba(255,255,255,.16);border-radius:var(--r-xl);
          background:linear-gradient(158deg,rgba(23,107,255,.14),rgba(5,10,25,.42) 74%);
          padding:20px 20px 18px;overflow:hidden}
.artifact::before{content:"";position:absolute;inset:0;pointer-events:none;
                  background:radial-gradient(closest-side at 72% 16%,rgba(23,107,255,.26),transparent)}
.artifact>*{position:relative;z-index:1}
.art-top{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.art-k{display:inline-flex;align-items:center;gap:8px;font:400 10.5px/1.5 var(--mono);
       letter-spacing:.14em;text-transform:uppercase;color:#cddcff}
.art-k svg{width:13px;height:13px;flex:0 0 auto}
.art-tag{font:400 10.5px/1.5 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--blue-lite)}
.art-body{margin-top:18px;border:1px solid rgba(255,255,255,.20);border-radius:var(--r-lg);
          background:linear-gradient(150deg,#2b7bff,#0b1c35 92%);padding:22px 20px 20px;box-shadow:var(--glow)}
.art-series{display:block;font:400 10px/1.6 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:#cddcff}
.art-title{display:block;font:560 25px/1.06 var(--sans);letter-spacing:-.05em;color:#fff;margin:10px 0 8px}
.art-sub{display:block;font-size:13.5px;line-height:1.5;color:#d5e2ff}
.art-meta{display:grid;grid-template-columns:1fr 1fr;margin-top:18px;
          border:1px solid rgba(255,255,255,.24);border-radius:var(--r-md);overflow:hidden}
.art-meta>div{padding:10px 12px;min-width:0}
.art-meta>div+div{border-left:1px solid rgba(255,255,255,.24)}
.art-ml{display:block;font:400 9.5px/1.6 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:#a8c2ff}
.art-mv{display:block;font:500 12.5px/1.4 var(--mono);letter-spacing:.05em;color:#fff;margin-top:2px}
.art-tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}
.art-tags span{display:inline-flex;align-items:center;gap:6px;font:500 10px/1.5 var(--mono);letter-spacing:.12em;
               text-transform:uppercase;color:#e8eefc;border:1px solid rgba(255,255,255,.32);border-radius:var(--r-md);
               padding:5px 10px;background:rgba(255,255,255,.09)}
.art-tags svg{width:12px;height:12px;flex:0 0 auto;opacity:.85}
.art-foot{display:flex;align-items:center;gap:12px;margin-top:16px;flex-wrap:wrap}
.art-foot .ix{color:var(--blue-lite)}
.art-fn{flex:1 1 180px;min-width:0;font-size:12.5px;line-height:1.5;color:#9fb4d6}
.art-go{display:inline-flex;align-items:center;gap:7px;font:500 10.5px/1.5 var(--mono);
        letter-spacing:.14em;text-transform:uppercase;color:var(--blue-lite)}
.art-go svg{width:13px;height:13px;flex:0 0 auto}
@media(max-width:430px){
  .art-meta{grid-template-columns:1fr}
  .art-meta>div+div{border-left:0;border-top:1px solid rgba(255,255,255,.24)}
  .art-title{font-size:22px}
}

/* 17.7 the hero's three-up — the small cards under the split hero, on the black band */
.hgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:44px}
@media(max-width:880px){.hgrid{grid-template-columns:1fr}}
.hcard{position:relative;display:flex;flex-direction:column;border:1px solid rgba(255,255,255,.14);
       background:rgba(255,255,255,.04);border-radius:var(--r-lg);padding:20px 18px 22px;
       transition:border-color var(--t-sm) var(--ease)}
.hcard:hover{border-color:rgba(111,164,255,.5)}
.hcard>.ix{position:absolute;top:21px;right:18px}
.hcard b{display:block;font:560 18px/1.16 var(--sans);letter-spacing:-.04em;color:#fff;margin:16px 0 6px;padding-right:34px}
.hcard .d{display:block;font-size:14px;line-height:1.55;color:#b6c2d6}

/* 17.8 THE TWO-UP — component 5: a feature block on one side, a nine-item icon list on the other */
.twoup{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:22px;margin-top:44px;align-items:start}
@media(max-width:940px){.twoup{grid-template-columns:1fr}}
.iclist{display:grid;border:1px solid var(--hair);border-radius:var(--r-lg);overflow:hidden;background:var(--paper)}
.iclist li{display:flex;align-items:flex-start;gap:12px;padding:10px 16px;font-size:14px;line-height:1.5;
           color:var(--mut);border-bottom:1px solid var(--hair)}
.iclist li:last-child{border-bottom:0}
.iclist li b{color:var(--ink);font-weight:700}
.ici{flex:0 0 auto;display:grid;place-items:center;width:24px;height:24px;border-radius:var(--r-md);
     background:rgba(23,107,255,.10);color:var(--blue-ink)}
.ici svg{width:14px;height:14px;display:block}
.iclist li.caveat .ici{background:rgba(95,112,135,.14);color:var(--muted)}
.dark-band .iclist{background:rgba(255,255,255,.035);border-color:rgba(255,255,255,.13)}
.dark-band .iclist li{color:#b6c2d6;border-bottom-color:rgba(255,255,255,.10)}
.dark-band .iclist li b{color:#fff}
.dark-band .ici{background:rgba(111,164,255,.13);color:var(--blue-soft)}
.dark-band .iclist li.caveat .ici{background:rgba(255,255,255,.07);color:#8ea0bd}

/* 17.9 the section note, and the block-level spans these pages use where a <p> would be wrong.
   S1, S5 and S6 carry a fixed paragraph count on purpose (one, one and none) — the standing notes
   that used to be <p> are <span> so the count stays honest and a note never reads as body copy. */
.cap,.hero-note,.wnote,.svc-note,.three-note,.steps-note,.plan-note,.list-h{display:block}
.secnote{display:flex;align-items:flex-start;gap:11px;margin-top:26px;font-size:14.5px;color:var(--mut);max-width:70ch;line-height:1.65}
.secnote .ici{margin-top:2px}
.secnote b{color:var(--ink);font-weight:700}
.dark-band .secnote{color:#b6c2d6}
.dark-band .secnote b{color:#fff}
/* 17.10 the closing band is DELIBERATELY the shortest one on the page — a heading and the booking
   button, and nothing else. Its own vertical rhythm rather than the 116px every other band gets,
   and a wider measure on the heading so a nine-word closing line lands on two rows instead of
   three. The reason a reader does not need the mailto explained again here: the hero note on every
   page already says that "Book a call" opens an email. */
section.end{padding:64px 0}
@media(min-width:881px){section.end{padding:72px 0}}
.end h2{max-width:22ch}

/* 17.11 .svc.lit — the numbered service rows with a REAL mono index element in place of the CSS
   counter. The counter paints an index that is not in the document, so nothing that reads the page
   rather than the paint — a structure audit, a scraper, a screen reader in browse mode — can see
   it. Opt-in, because the composed pages elsewhere in this tree still use the counter form. */
.svc.lit>*::before{content:none}
.svc.lit>*>.ix{grid-column:1;grid-row:1/span 2;padding-top:5px;line-height:1.9;letter-spacing:.06em}
@media(max-width:940px){.svc.lit>*>.ix{padding-top:3px}}

/* 17.12 .ptabs — THE STILL / MOTION TAB PAIR, and the numbered page index in the kicker ─────────
   The reference numbers every page in a set ("09 ON-PAGE FILMS") and puts a two-tab STILL/MOTION
   pair at the top of both halves of its portfolio, so a visitor standing in one always knows the
   other exists. Ours were siblings with nothing cross-linking them: /v5/portfolio/gallery and
   /v5/portfolio/videos each linked "back to the portfolio" and never to each other.

   THREE THINGS THAT ARE LOAD-BEARING, not decoration.
   · The current tab keeps its href and carries aria-current="page". A tab rendered as a dead
     <span> is the one state a keyboard user cannot tell apart from a broken link.
   · The numbers are real elements (.ptab-n, .kx), not ::before counters. A counter paints an index
     that is not in the document, so a screen reader in browse mode, a scraper and a structure
     audit all read the label with the number missing.
   · Both tabs are 44px tall, which is the touch target the rest of this sheet holds to.
   The set the kicker numbers is the portfolio's own four pages, in the order the portfolio index
   lists them: 01 portfolio · 02 development · 03 gallery · 04 videos. Printing "03 / 04" rather
   than a bare "03" is what makes it checkable as a set rather than an arbitrary number. */
/* THE TRAP THIS RULE IS DEFENDING AGAINST, and it cost a render: §3's header is a BARE ELEMENT
   selector — nav{position:fixed;top:0;left:0;right:0;z-index:90;padding:20px 20px 0;
   pointer-events:none}. Marking the tab strip up as <nav class="ptabs"> therefore tore it out of
   the hero and pinned it invisibly behind the floating header pill, with pointer-events off, at
   full opacity in the DOM and absent from the page to the eye. The markup uses
   <div class="ptabs" role="navigation" aria-label="..."> — identical to a <nav> for assistive tech
   and immune to the selector — and the reset below means the class still lands correctly if
   somebody reaches for <nav> again anyway. */
.ptabs{position:static;z-index:auto;padding:0;background:none;border:0;pointer-events:auto;
       display:flex;flex-wrap:wrap;gap:9px;margin:0 0 26px}
.ptab{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:0 18px;background:none;
      border:1px solid var(--hair);border-radius:999px;
      font:700 12px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--mut);
      transition:color var(--t-sm) var(--ease),border-color var(--t-sm) var(--ease),background var(--t-sm) var(--ease)}
.ptab .ptab-n{font:400 11px/1 var(--mono);letter-spacing:.06em;opacity:.7}
.ptab:hover,.ptab:focus-visible{color:var(--ink);border-color:var(--ink)}
.ptab[aria-current="page"]{background:var(--blue);border-color:var(--blue);color:#fff}
.ptab[aria-current="page"] .ptab-n{opacity:.88}
.dark-band .ptab{border-color:rgba(255,255,255,.22);color:#b6c2d6}
.dark-band .ptab:hover,.dark-band .ptab:focus-visible{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.6);color:#fff}
.dark-band .ptab[aria-current="page"]{background:var(--blue);border-color:var(--blue);color:#fff}
/* the page index inside the hero kicker — that kicker is a flex pill, so the 9px gap spaces it */
.kicker .kx{font-family:var(--mono);font-weight:400;letter-spacing:.06em;opacity:.72}
@media(max-width:700px){.hero .ptabs{justify-content:center}}

/* 17.13 .mgrid / .mcard — THE MEDIA CARD GRID on /v5/portfolio/videos ───────────────────────────
   The reference's films page is two media grids, each card carrying a ref number, a title, a
   duration, a blurb, a credit and a player. Ours was six prose sections arguing why there is no
   video. The argument was right and it stayed; the missing half was the grammar, so this is it.

   THE RULE THIS COMPONENT EXISTS TO KEEP. A card either has a real asset behind it or it is
   VISIBLY empty — .is-empty gives it a dashed border, a hatched frame where the player would be,
   a "no material" chip and no <video>/<audio> element at all. There is no third state. Do not add
   a poster image, a blurred still, a grey rectangle or a spinner to an empty card: every one of
   those reads to a visitor as a thing that failed to load rather than as a slot nobody has filled,
   and a placeholder that ships is indistinguishable from a claim.

   .mc-credit is not optional furniture either. Every clip this site owns is synthesised from a
   written script, and the page it sits on argues against staged material — so the card has to say
   what it is on its own face, not two sections further down. */
.mgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:44px;align-items:stretch}
@media(max-width:1040px){.mgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:720px){.mgrid{grid-template-columns:minmax(0,1fr)}}
.list-h+.mgrid{margin-top:18px}
.mcard{position:relative;display:flex;flex-direction:column;min-width:0;
       background:var(--paper);border:1px solid var(--hair);border-radius:var(--r-xl);padding:15px 15px 20px;
       transition:border-color var(--t-sm) var(--ease),box-shadow var(--t-sm) var(--ease)}
.mcard:hover{border-color:rgba(23,107,255,.42);box-shadow:var(--glow)}
.mc-media{position:relative;min-width:0;border:1px solid var(--hair);border-radius:var(--r-lg);
          overflow:hidden;background:var(--paper-2)}
.mc-media video{display:block;width:100%;height:auto;aspect-ratio:854/480;background:#000}
.mc-media audio{display:block;width:100%;min-width:0;height:46px}
.mc-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;
         margin-top:15px;padding-bottom:9px;border-bottom:1px solid var(--hair);
         font:400 11px/1.6 var(--mono);letter-spacing:.13em;text-transform:uppercase}
.mc-ref{color:var(--blue-ink);font-weight:500}
.mc-dur{color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.mcard h3{font-size:19px;font-weight:620;letter-spacing:-.04em;line-height:1.18;color:var(--ink);margin:13px 0 8px}
.mc-blurb{margin:0 0 auto;font-size:14.5px;color:var(--mut);line-height:1.6}
.mc-blurb b{color:var(--ink);font-weight:700}
.mc-credit{margin:18px 0 0;padding-top:12px;border-top:1px solid var(--hair);
           font-size:12.5px;line-height:1.5;color:var(--muted)}
.mc-credit span{display:block;margin-bottom:3px;font:400 10px/1.6 var(--mono);letter-spacing:.16em;
                text-transform:uppercase;color:var(--blue-ink)}
/* the empty state — a slot, not a thing that failed to load */
.mcard.is-empty,.mcard.is-empty:hover{border-style:dashed;background:none;box-shadow:none;border-color:var(--hair)}
.mc-empty{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:11px;
          aspect-ratio:854/480;padding:16px;border-style:dashed;background:none;
          background-image:repeating-linear-gradient(135deg,transparent 0 10px,rgba(95,112,135,.09) 10px 11px)}
.mc-empty b{display:inline-block;padding:6px 12px;border:1px dashed var(--hair);border-radius:999px;
            font:500 10px/1.5 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.mc-empty p{margin:0;max-width:34ch;font-size:12.5px;line-height:1.5;color:var(--muted)}
.mcard.is-empty .mc-ref,.mcard.is-empty h3{color:var(--muted)}
/* on the black bands */
.dark-band .mcard{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.13)}
.dark-band .mcard:hover{border-color:rgba(111,164,255,.5)}
.dark-band .mcard h3{color:#fff}
.dark-band .mc-media{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14)}
.dark-band .mc-meta{border-bottom-color:rgba(255,255,255,.13)}
.dark-band .mc-ref{color:var(--blue-lite)}
.dark-band .mc-dur{color:#8ea0bd}
.dark-band .mc-blurb{color:#b6c2d6}
.dark-band .mc-blurb b{color:#fff}
.dark-band .mc-credit{color:#8ea0bd;border-top-color:rgba(255,255,255,.13)}
.dark-band .mc-credit span{color:var(--blue-lite)}
.dark-band .mcard.is-empty,.dark-band .mcard.is-empty:hover{background:none;border-color:rgba(255,255,255,.22)}
.dark-band .mc-empty{border-color:rgba(255,255,255,.22);
  background-image:repeating-linear-gradient(135deg,transparent 0 10px,rgba(255,255,255,.07) 10px 11px)}
.dark-band .mc-empty b{color:#8ea0bd;border-color:rgba(255,255,255,.24)}
.dark-band .mc-empty p{color:#8ea0bd}
.dark-band .mcard.is-empty .mc-ref,.dark-band .mcard.is-empty h3{color:#9fb0c8}