/* ==========================================================================
   DBC AI Brain - site stylesheet
   --------------------------------------------------------------------------
   The token block below is the same one that lives inline in scripts/chat.html.
   It is duplicated rather than shared because chat.html is served by serve.py
   as a single self-contained document and cannot fetch a stylesheet. If a
   colour changes, it changes in both places.

   Everything after the tokens is the site's own, and it is deliberately not
   the app's language. The app is a tool: rounded, soft, quiet. These pages are
   a record of a company's work, so they borrow from the things that record
   work - drawings, ledgers, index pages. Hence hairlines instead of card
   borders, a drafting grid, numbered sections, tabular figures, and a serif
   carrying the statements while anything you operate stays in Roboto.
   ========================================================================== */

/* ---- tokens (mirror of chat.html) --------------------------------------- */
:root {
  color-scheme: light;
  --brand:#0083e8; --brand-hover:#0066b5; --brand-dark:#00589c;
  --brand-2:#0063d6; --navy:#003670; --navy-deep:#000c19; --sky:#b2d6ff; --sky-2:#36a7ff;
  --bg:#f5f8fc; --bg-2:#e9eff8;
  --surface:#ffffff; --surface-2:#f2f6fb; --line:#e2e9f3; --line-2:#cfdaea;
  --text:#0d1726; --text-2:#415066; --muted:#6c7c93;
  --ok:#12875a; --warn:#b97400; --danger:#cf3b3b;
  --user:#e4f0fe; --user-line:#c9e0fa; --bubble-line:#dbe5f2; --cite:#b2d6ff; --cite-ink:#003670;
  --side-bg:linear-gradient(180deg,#ffffff 0%,#f3f7fc 100%);
  --side-ink:#0d1726; --side-ink-dim:#5a6b83; --side-label:#6c7c93;
  --side-line:#e2e9f3; --side-hover:rgba(0,54,112,.06); --side-active:rgba(0,131,232,.12);
  --side-logo:#003670; --side-input:#ffffff; --side-input-line:#d9e3f0;
  --side-glow:transparent;
  --shadow:0 0 0 1px rgba(13,23,38,.03), 0 1px 2px rgba(13,23,38,.05), 0 10px 30px -14px rgba(0,54,112,.22);
  --shadow-lg:0 0 0 1px rgba(13,23,38,.04), 0 2px 8px rgba(13,23,38,.06), 0 26px 50px -22px rgba(0,54,112,.32);
  --ring:0 0 0 4px rgba(0,131,232,.14);
  --glass:rgba(255,255,255,.72);
  --radius:14px; --side:296px; --rail:64px; --col:1040px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-side:cubic-bezier(.32,.72,0,1);
  --font:"Roboto",-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,"Helvetica Neue",Arial,sans-serif;

  /* ---- site only ---- */
  --serif:"Source Serif 4","Iowan Old Style",Georgia,"Times New Roman",serif;
  --page:1240px;               /* the outer measure */
  --util:34px;                 /* the top utility strip */
  --bar:74px;                  /* the main header bar, at rest */
  --bar-sm:60px;               /* the same bar, once you have scrolled */
  --grid-ink:rgba(0,54,112,.055);   /* the drafting grid */
  --tick:rgba(0,54,112,.28);        /* corner marks */
}
/* the JS-disabled fallback only; an explicit choice always wins */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --bg:#0a1322; --bg-2:#060d18;
    --surface:#101d33; --surface-2:#16263f; --line:#20344f; --line-2:#2b4467;
    --text:#e9eff8; --text-2:#c0cddf; --muted:#8b9db8;
    --ok:#3ddc84; --warn:#ffc266; --danger:#ff7a7a;
    --user:#15305a; --user-line:#24457a; --bubble-line:#20344f; --cite:#1e3e66; --cite-ink:#bcd8ff;
    --side-bg:linear-gradient(180deg,#0b2043 0%,#081831 58%,#050f21 100%);
    --side-ink:#eaf2ff; --side-ink-dim:rgba(219,232,251,.72); --side-label:rgba(178,214,255,.72);
    --side-line:rgba(255,255,255,.09); --side-hover:rgba(255,255,255,.07); --side-active:rgba(255,255,255,.13);
    --side-logo:#ffffff; --side-input:rgba(255,255,255,.08); --side-input-line:rgba(255,255,255,.15);
    --side-glow:rgba(54,167,255,.20);
    --shadow:0 0 0 1px rgba(255,255,255,.04), 0 1px 2px rgba(0,0,0,.4), 0 12px 32px -16px rgba(0,0,0,.7);
    --shadow-lg:0 0 0 1px rgba(255,255,255,.05), 0 2px 8px rgba(0,0,0,.45), 0 28px 56px -24px rgba(0,0,0,.8);
    --ring:0 0 0 4px rgba(54,167,255,.20);
    --glass:rgba(16,29,51,.72);
    --grid-ink:rgba(140,190,255,.055); --tick:rgba(178,214,255,.3);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg:#0a1322; --bg-2:#060d18;
  --surface:#101d33; --surface-2:#16263f; --line:#20344f; --line-2:#2b4467;
  --text:#e9eff8; --text-2:#c0cddf; --muted:#8b9db8;
  --ok:#3ddc84; --warn:#ffc266; --danger:#ff7a7a;
  --user:#15305a; --user-line:#24457a; --bubble-line:#20344f; --cite:#1e3e66; --cite-ink:#bcd8ff;
  --side-bg:linear-gradient(180deg,#0b2043 0%,#081831 58%,#050f21 100%);
  --side-ink:#eaf2ff; --side-ink-dim:rgba(219,232,251,.72); --side-label:rgba(178,214,255,.72);
  --side-line:rgba(255,255,255,.09); --side-hover:rgba(255,255,255,.07); --side-active:rgba(255,255,255,.13);
  --side-logo:#ffffff; --side-input:rgba(255,255,255,.08); --side-input-line:rgba(255,255,255,.15);
  --side-glow:rgba(54,167,255,.20);
  --shadow:0 0 0 1px rgba(255,255,255,.04), 0 1px 2px rgba(0,0,0,.4), 0 12px 32px -16px rgba(0,0,0,.7);
  --shadow-lg:0 0 0 1px rgba(255,255,255,.05), 0 2px 8px rgba(0,0,0,.45), 0 28px 56px -24px rgba(0,0,0,.8);
  --ring:0 0 0 4px rgba(54,167,255,.20);
  --glass:rgba(16,29,51,.72);
  --grid-ink:rgba(140,190,255,.055); --tick:rgba(178,214,255,.3);
}

/* ---- base --------------------------------------------------------------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--bar) + 20px)}
body{
  margin:0;color:var(--text);font:16px/1.65 var(--font);-webkit-font-smoothing:antialiased;
  background:var(--bg);
  transition:background-color .35s var(--ease),color .25s var(--ease);
}
img{max-width:100%;display:block}
a{color:var(--brand);text-decoration:none}
a:hover{color:var(--brand-hover)}
p,figure,blockquote,dl,dd{margin:0}
h1,h2,h3,h4{margin:0;font-weight:600}
:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:4px}
::selection{background:var(--sky);color:var(--navy)}
*{scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:99px;border:3px solid transparent;background-clip:content-box}

/* Display type. The serif carries statements; Roboto carries anything you
   operate. Optical sizing matters: at 56px the text face looks clumsy. */
.d{font-family:var(--serif);font-weight:600;line-height:1.1;letter-spacing:-.015em;
   font-optical-sizing:auto}
.num{font-variant-numeric:tabular-nums lining-nums}

.wrap{width:100%;max-width:var(--page);margin:0 auto;padding:0 32px}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:fixed;top:-60px;left:16px;z-index:200;background:var(--brand);color:#fff;
  padding:10px 16px;border-radius:0 0 8px 8px;font-weight:600;transition:top .2s var(--ease)}
.skip:focus{top:0;color:#fff}

/* The drafting grid. It sits behind a section, fades at the edges, and is used
   on the hero and the dark panels only, so it stays a signature rather than
   wallpaper. */
.grid-bg{position:relative;isolation:isolate}
.grid-bg::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(var(--grid-ink) 1px,transparent 1px),
                   linear-gradient(90deg,var(--grid-ink) 1px,transparent 1px);
  background-size:38px 38px;background-position:center top;
  -webkit-mask-image:radial-gradient(112% 82% at 50% 0%,#000 30%,transparent 78%);
          mask-image:radial-gradient(112% 82% at 50% 0%,#000 30%,transparent 78%)}

/* Corner marks, the way a drawing is trimmed. */
.ticks{position:relative}
.ticks::before,.ticks::after{content:"";position:absolute;width:11px;height:11px;pointer-events:none}
.ticks::before{top:-1px;left:-1px;border-top:1px solid var(--tick);border-left:1px solid var(--tick)}
.ticks::after{bottom:-1px;right:-1px;border-bottom:1px solid var(--tick);border-right:1px solid var(--tick)}

/* ---- header ------------------------------------------------------------ */
.head{position:sticky;top:0;z-index:100;transition:box-shadow .3s var(--ease)}
.head.stuck{box-shadow:0 1px 0 var(--line),0 10px 30px -24px rgba(0,54,112,.6)}

/* The utility strip: who this is for, and how to reach the company. It rolls
   away on the first scroll, because after that it is only taking up room. */
.util{height:var(--util);overflow:hidden;background:var(--navy);color:rgba(255,255,255,.72);
  font-size:11.5px;letter-spacing:.3px;
  transition:height .32s var(--ease-side),opacity .22s var(--ease)}
.head.stuck .util{height:0;opacity:0}
.util .wrap{height:var(--util);display:flex;align-items:center;gap:18px}
.util a{color:rgba(255,255,255,.72);transition:color .18s var(--ease)}
.util a:hover{color:#fff}
.util .tag{display:inline-flex;align-items:center;gap:7px;font-weight:700;letter-spacing:1.1px;
  text-transform:uppercase;font-size:10px;color:#fff;padding:3px 9px 3px 7px;border-radius:99px;
  background:rgba(255,255,255,.13);white-space:nowrap;flex:none}
.util .tag::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--sky-2)}
.util .end{margin-left:auto;display:flex;gap:6px;align-items:center}
.util .end a{display:inline-flex;align-items:center;gap:7px;padding:4px 10px;border-radius:7px;
  white-space:nowrap;transition:background .18s var(--ease),color .18s var(--ease)}
.util .end a:hover{background:rgba(255,255,255,.1)}
.util .end svg{width:12px;height:12px;opacity:.7}

.bar{height:var(--bar);background:var(--glass);
  backdrop-filter:blur(18px) saturate(180%);-webkit-backdrop-filter:blur(18px) saturate(180%);
  border-bottom:1px solid var(--line);
  transition:height .32s var(--ease-side)}
.head.stuck .bar{height:var(--bar-sm)}
.bar .wrap{height:100%;display:flex;align-items:center;gap:28px}

.brand{display:flex;align-items:center;gap:14px;flex:none;color:var(--text)}
.brand:hover{color:var(--text)}
.brand .logo{height:38px;width:auto;flex:none;transition:height .32s var(--ease-side)}
.head.stuck .brand .logo{height:32px}
.brand .rule{width:1px;height:30px;background:var(--line-2);flex:none;
  transition:height .32s var(--ease-side)}
.head.stuck .brand .rule{height:26px}
.brand .txt{display:flex;flex-direction:column;justify-content:center;line-height:1.2;gap:2px}
.brand .n{font-size:16px;font-weight:600;letter-spacing:-.15px;font-family:var(--serif)}
.brand .s{font-size:9.5px;color:var(--muted);letter-spacing:1.3px;text-transform:uppercase;
  font-weight:600}
.brand .logo-dark{display:none}
:root[data-theme="dark"] .brand .logo-light{display:none}
:root[data-theme="dark"] .brand .logo-dark{display:block}

/* The nav is one grouped control rather than four loose words: a hairline
   track with a single pill that slides between the items. It reads as a
   switch, which is what it is. */
.nav{position:relative;display:flex;align-items:center;gap:0;margin-left:auto;
  padding:4px;border:1px solid var(--line);border-radius:11px;background:var(--surface-2)}
.nav a{position:relative;z-index:1;padding:8px 16px;border-radius:8px;font-size:14px;
  font-weight:500;color:var(--text-2);letter-spacing:.1px;white-space:nowrap;
  transition:color .22s var(--ease)}
.nav a:hover{color:var(--text)}
.nav a[aria-current="page"]{color:var(--text);font-weight:600}
/* one pill that slides, rather than a background painted on every item */
.nav-ink{position:absolute;z-index:0;top:4px;left:0;bottom:4px;border-radius:8px;
  background:var(--surface);box-shadow:0 1px 2px rgba(13,23,38,.07),0 0 0 1px rgba(13,23,38,.04);
  opacity:0;pointer-events:none;
  transition:transform .4s var(--ease-side),width .4s var(--ease-side),opacity .25s var(--ease)}
:root[data-theme="dark"] .nav-ink{background:var(--surface);
  box-shadow:0 1px 2px rgba(0,0,0,.4),0 0 0 1px rgba(255,255,255,.07)}
.nav-ink.on{opacity:1}

.head-end{display:flex;align-items:center;gap:12px;flex:none;margin-left:28px}
.tog{width:38px;height:38px;border:1px solid var(--line);background:var(--surface-2);color:var(--text-2);
  border-radius:10px;display:grid;place-items:center;cursor:pointer;
  transition:border-color .2s var(--ease),color .2s var(--ease),background .2s var(--ease)}
.tog:hover{color:var(--text);border-color:var(--line-2);background:var(--surface)}
.tog svg{width:17px;height:17px}
.tog .ic-moon{display:none}
:root[data-theme="dark"] .tog .ic-sun{display:none}
:root[data-theme="dark"] .tog .ic-moon{display:block}

.burger{display:none;width:38px;height:38px;border:1px solid var(--line);background:var(--surface-2);
  color:var(--text-2);border-radius:10px;place-items:center;cursor:pointer}
.burger svg{width:18px;height:18px}
.burger .ic-x{display:none}
.head.open .burger .ic-menu{display:none}
.head.open .burger .ic-x{display:block}

/* ---- buttons ----------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;white-space:nowrap;
  padding:11px 19px;border-radius:9px;font-size:14px;font-weight:600;letter-spacing:.1px;
  cursor:pointer;border:1px solid transparent;position:relative;overflow:hidden;
  transition:background .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease),
             transform .2s var(--ease),box-shadow .2s var(--ease)}
.btn svg{width:15px;height:15px;flex:none;position:relative;z-index:1}
.btn span{position:relative;z-index:1}
.btn-primary{background:var(--navy);color:#fff;box-shadow:0 10px 24px -14px rgba(0,54,112,.9)}
.btn-primary:hover{background:var(--brand-dark);color:#fff;transform:translateY(-1px);
  box-shadow:0 16px 30px -16px rgba(0,54,112,1)}
.btn-primary:active{transform:translateY(0)}
.btn-ghost{background:transparent;color:var(--text);border-color:var(--line-2)}
.btn-ghost:hover{border-color:var(--text-2);color:var(--text);transform:translateY(-1px)}
.btn-lg{padding:14px 26px;font-size:15px}
.btn-lg svg{width:17px;height:17px}
/* a text link that behaves like a control: the rule grows from the left */
.lnk{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--brand);
  padding-bottom:3px;background-image:linear-gradient(var(--brand),var(--brand));
  background-size:0 1.5px;background-position:0 100%;background-repeat:no-repeat;
  transition:background-size .3s var(--ease-side)}
.lnk:hover{background-size:100% 1.5px}
.lnk svg{width:14px;height:14px;transition:transform .25s var(--ease-side)}
.lnk:hover svg{transform:translateX(3px)}

/* ---- mobile menu -------------------------------------------------------- */
.mnav{position:fixed;left:0;right:0;top:0;z-index:99;display:none;
  padding:calc(var(--bar) + 20px) 0 24px;
  background:var(--surface);border-bottom:1px solid var(--line);box-shadow:var(--shadow-lg);
  opacity:0;transform:translateY(-12px);pointer-events:none;
  transition:opacity .26s var(--ease-side),transform .34s var(--ease-side)}
.mnav.open{opacity:1;transform:none;pointer-events:auto}
.mnav a{display:flex;align-items:baseline;gap:14px;padding:13px 32px;font-size:21px;font-weight:600;
  color:var(--text);font-family:var(--serif)}
.mnav a .ix{font-family:var(--font);font-size:11px;font-weight:700;letter-spacing:1px;color:var(--muted)}
.mnav a:hover{background:var(--surface-2)}
.mnav a[aria-current="page"]{color:var(--brand)}
.mnav .cta{padding:18px 32px 4px}
.mnav .cta .btn{width:100%}
.mnav .meta{padding:20px 32px 0;margin-top:16px;border-top:1px solid var(--line);
  font-size:13px;color:var(--muted);display:flex;flex-direction:column;gap:7px}

/* ---- section furniture -------------------------------------------------- */
.sec{padding:84px 0}
.sec-sm{padding:56px 0}
hr.rule{height:1px;background:var(--line);border:0;margin:0}

/* the section label: an index number, the words, then a hairline */
.lab{display:flex;align-items:center;gap:13px;font-size:11px;font-weight:700;letter-spacing:1.5px;
  text-transform:uppercase;color:var(--muted)}
.lab .ix{color:var(--brand);font-variant-numeric:tabular-nums}
.lab::after{content:"";flex:1;height:1px;background:var(--line);max-width:90px}

.sec h2.d{font-size:clamp(28px,3.6vw,42px);margin:20px 0 0;max-width:20ch}
.lede{font-size:17.5px;line-height:1.65;color:var(--text-2);margin-top:18px;max-width:60ch}
.sec-head{margin-bottom:52px}
/* a heading on the left and its explanation on the right, sharing a baseline */
.split-head{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:end;margin-bottom:52px}
.split-head .lede{margin-top:0;padding-bottom:5px}

/* ---- hero --------------------------------------------------------------- */
.hero{padding:64px 0 60px;position:relative;overflow:hidden}
/* start, not center: centring the shorter column dropped the pair 27px and
   pushed the lower panel past the fold on a laptop screen */
.hero .inner{display:grid;grid-template-columns:1fr 1.04fr;gap:56px;align-items:start}
.hero .pair{padding-top:4px}
.hero h1{font-size:clamp(38px,4.9vw,60px);margin:26px 0 0;max-width:14ch}
.hero h1 em{font-style:italic;color:var(--brand-dark)}
:root[data-theme="dark"] .hero h1 em{color:var(--sky-2)}
.hero .sub{font-size:18px;line-height:1.68;color:var(--text-2);margin-top:24px;max-width:47ch}
.hero .acts{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:36px}
.chips{margin-top:40px;padding-top:26px;border-top:1px solid var(--line)}
.chips .cl{font-size:10.5px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;
  color:var(--muted);margin-bottom:14px}
.chips .set{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:7px;padding:6px 13px 6px 10px;border:1px solid var(--line);
  border-radius:99px;font-size:12.5px;color:var(--text-2);background:var(--surface);
  transition:border-color .2s var(--ease),color .2s var(--ease),transform .2s var(--ease)}
.chip:hover{border-color:var(--line-2);color:var(--text);transform:translateY(-1px)}
.chip svg{width:13px;height:13px;color:var(--brand)}

/* The framed screenshot. A plate, not a laptop mock: the product is a page,
   and putting it inside a fake device would misstate where it runs. */
.plate{position:relative;border-radius:12px;overflow:hidden;border:1px solid var(--line-2);
  background:var(--surface);box-shadow:0 2px 4px rgba(13,23,38,.04),0 40px 80px -40px rgba(0,54,112,.42);
  transition:transform .5s var(--ease-side),box-shadow .5s var(--ease-side)}
.plate:hover{transform:translateY(-4px);
  box-shadow:0 2px 4px rgba(13,23,38,.04),0 52px 96px -44px rgba(0,54,112,.5)}
.plate .chrome{display:flex;align-items:center;gap:7px;padding:10px 14px;background:var(--surface-2);
  border-bottom:1px solid var(--line);color:var(--muted)}
.plate .chrome i{width:9px;height:9px;border-radius:50%;background:var(--line-2);display:block;flex:none}
.plate .chrome .addr{margin-left:10px;font-size:11px;color:var(--muted);letter-spacing:.3px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.plate img{width:100%;height:auto;display:block}

.plate-wrap{position:relative}
/* a figure pinned to the corner of the plate */
.pin{position:absolute;right:-20px;bottom:-24px;background:var(--surface);border:1px solid var(--line);
  border-radius:10px;padding:15px 19px;box-shadow:var(--shadow-lg);min-width:160px;z-index:2}
.pin .v{font-family:var(--serif);font-size:28px;font-weight:600;line-height:1;color:var(--text)}
.pin .k{font-size:11.5px;color:var(--muted);margin-top:5px;letter-spacing:.2px}

/* ---- the hero's pair ----------------------------------------------------
   Two windows of the same width and the same frame: what the assistant looks
   like, and one of the houses it knows about. The lower one is stepped left
   and laps the upper one, so they read as one composition rather than a list
   of two things, and the eye travels from the headline through both.

   The lap is a negative margin rather than absolute positioning, so the pair
   still has a real height and the hero's two columns can be balanced against
   each other. */
.pair{position:relative;display:flex;flex-direction:column;isolation:isolate}
.pair > .plate{flex:none;width:92%}
.pair > .plate:first-child{margin-left:auto}
.pair > .plate + .plate{margin-right:auto;margin-top:-52px;position:relative;z-index:2;
  /* a ring in the page colour, so the lower window reads as lying on top of
     the upper one rather than merging into it */
  box-shadow:0 0 0 8px var(--bg),0 2px 4px rgba(13,23,38,.05),
             0 34px 64px -34px rgba(0,54,112,.5)}
.pair > .plate + .plate:hover{box-shadow:0 0 0 8px var(--bg),0 2px 4px rgba(13,23,38,.05),
             0 44px 80px -38px rgba(0,54,112,.56)}

/* a photograph inside the same window frame: the chrome bar on top, the
   caption over the foot of the picture */
.plate.photo{display:block;color:#fff;overflow:hidden}
.plate.photo:hover{color:#fff}
.plate .shot{position:relative;display:block;isolation:isolate;aspect-ratio:16/9}
.plate .shot img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .8s var(--ease-side)}
.plate.photo:hover .shot img{transform:scale(1.035)}
.plate .shot::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(transparent 42%,rgba(0,12,25,.86))}
.plate .shot .cap{position:absolute;inset:auto 0 0 0;z-index:1;padding:16px 20px;
  display:flex;align-items:flex-end;justify-content:space-between;gap:16px}
.plate .shot .cap > span{display:block;min-width:0}
.plate .shot .cap .a{display:block;font-family:var(--serif);font-size:16.5px;font-weight:600;
  line-height:1.3;text-shadow:0 1px 10px rgba(0,12,25,.45)}
.plate .shot .cap .m{display:block;font-size:11.5px;color:rgba(255,255,255,.82);margin-top:5px;
  letter-spacing:.3px}
.plate .shot .tag{flex:none;font-size:9.5px;font-weight:700;letter-spacing:1.1px;
  text-transform:uppercase;padding:5px 10px;border-radius:99px;background:rgba(255,255,255,.93);
  color:var(--navy);white-space:nowrap}
/* When the photograph is the upper panel, the one below it covers the foot of
   the picture, so the caption moves to the head of it and the scrim turns over
   to follow. */
.pair > .plate.photo:first-child .shot::after{
  background:linear-gradient(rgba(0,12,25,.82),rgba(0,12,25,.28) 34%,transparent 58%)}
.pair > .plate.photo:first-child .shot .cap{inset:0 0 auto 0;align-items:flex-start}
.pair > .plate.photo:first-child .shot .cap .m{margin-top:5px}
.shotcard{position:relative;border-radius:12px;overflow:hidden;border:1px solid var(--line-2);
  background:var(--surface-2);isolation:isolate;display:block;color:#fff;
  box-shadow:0 2px 4px rgba(13,23,38,.04),0 30px 60px -36px rgba(0,54,112,.4);
  transition:transform .5s var(--ease-side),box-shadow .5s var(--ease-side)}
.shotcard:hover{transform:translateY(-3px);color:#fff;
  box-shadow:0 2px 4px rgba(13,23,38,.04),0 40px 76px -40px rgba(0,54,112,.48)}
.shotcard img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .8s var(--ease-side)}
.shotcard:hover img{transform:scale(1.035)}
.shotcard::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(transparent 40%,rgba(0,12,25,.86))}
.shotcard .cap{position:absolute;inset:auto 0 0 0;z-index:1;padding:18px 20px;
  display:flex;align-items:flex-end;justify-content:space-between;gap:16px}
.shotcard .cap > span{display:block;min-width:0}
.shotcard .cap .a{display:block;font-family:var(--serif);font-size:16.5px;font-weight:600;
  line-height:1.3;text-shadow:0 1px 10px rgba(0,12,25,.45)}
.shotcard .cap .m{display:block;font-size:11.5px;color:rgba(255,255,255,.82);margin-top:6px;
  letter-spacing:.3px}
.shotcard .tag{flex:none;font-size:9.5px;font-weight:700;letter-spacing:1.1px;text-transform:uppercase;
  padding:5px 10px;border-radius:99px;background:rgba(255,255,255,.92);color:var(--navy);
  white-space:nowrap}

/* ---- tally --------------------------------------------------------------
   A panel of figures where a picture would otherwise go. One large number and
   four supporting ones, on a hairline grid, so the page opens on the thing it
   is actually about. */
.tally{border:1px solid var(--line);border-radius:12px;background:var(--surface);overflow:hidden}
.tally .t{padding:34px 34px 30px;border-bottom:1px solid var(--line)}
.tally .t .v{font-family:var(--serif);font-size:clamp(46px,6vw,68px);font-weight:600;line-height:.95;
  letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.tally .t .k{font-size:14.5px;color:var(--text-2);margin-top:14px;line-height:1.6;max-width:38ch}
.tally .grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line)}
.tally .grid2 > div{background:var(--surface);padding:22px 34px}
.tally .grid2 .v{font-family:var(--serif);font-size:26px;font-weight:600;line-height:1;
  font-variant-numeric:tabular-nums}
.tally .grid2 .k{font-size:12.5px;color:var(--muted);margin-top:7px}

/* ---- ticker ------------------------------------------------------------- */
/* The folders the text came out of, moving slowly. The one piece of motion on
   the page that is not a response to something you did, so it is slow, low
   contrast, pauses on hover, and stops entirely under reduced motion. */
.ticker{border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:15px 0;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.ticker .track{display:flex;width:max-content;animation:roll 64s linear infinite}
.ticker:hover .track{animation-play-state:paused}
.ticker b{display:inline-flex;align-items:center;gap:15px;padding:0 15px;font-size:12px;
  letter-spacing:1px;text-transform:uppercase;color:var(--muted);white-space:nowrap;font-weight:500}
.ticker b::after{content:"";width:4px;height:4px;border-radius:50%;background:var(--line-2);flex:none}
@keyframes roll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---- figures band ------------------------------------------------------- */
/* In light mode the band separates itself; in dark it sits a few points off
   the page colour, so it needs an edge to still read as a band. */
.figs{background:var(--navy-deep);color:#eaf2ff;position:relative;overflow:hidden;
  border-block:1px solid rgba(255,255,255,.09);
  --grid-ink:rgba(178,214,255,.07);--tick:rgba(178,214,255,.28)}
.figs .wrap{position:relative;z-index:1}
.figs .row{display:grid;grid-template-columns:repeat(4,1fr);padding:58px 0}
.figs .f{padding:0 36px;border-left:1px solid rgba(255,255,255,.12)}
.figs .f:first-child{padding-left:0;border-left:0}
.figs .v{font-family:var(--serif);font-size:clamp(36px,4.4vw,52px);font-weight:600;line-height:1;
  letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.figs .k{font-size:13px;color:rgba(219,232,251,.62);margin-top:13px;line-height:1.5;max-width:21ch}
.figs .meta{border-top:1px solid rgba(255,255,255,.1);padding:16px 0 24px;font-size:12.5px;
  color:rgba(219,232,251,.5);display:flex;flex-wrap:wrap;gap:8px 28px}

/* ---- editorial index list ----------------------------------------------- */
/* Questions as an index, not as cards. Hairline rows, numbered, whole row is
   the target. */
.index{border-top:1px solid var(--line)}
.index .r{display:grid;grid-template-columns:44px 1fr auto;gap:22px;align-items:center;
  padding:22px 0;border-bottom:1px solid var(--line);color:var(--text);
  transition:background .25s var(--ease),padding .3s var(--ease-side)}
.index .r:hover{background:var(--surface);padding-left:16px;padding-right:16px;color:var(--text)}
.index .ix{font-size:12px;font-weight:700;letter-spacing:.8px;color:var(--muted);
  font-variant-numeric:tabular-nums;transition:color .25s var(--ease)}
.index .r:hover .ix{color:var(--brand)}
.index .q{font-family:var(--serif);font-size:19.5px;font-weight:500;line-height:1.35}
.index .t{font-size:10px;font-weight:700;letter-spacing:1.1px;text-transform:uppercase;color:var(--muted);
  border:1px solid var(--line);border-radius:99px;padding:4px 11px;white-space:nowrap}
.index .go{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:var(--surface-2);color:var(--muted);
  transition:background .25s var(--ease),color .25s var(--ease),transform .3s var(--ease-side)}
.index .r:hover .go{background:var(--navy);color:#fff;transform:translateX(3px)}
.index .go svg{width:14px;height:14px}
.index .end{display:flex;align-items:center;gap:14px}
.index-2{display:grid;grid-template-columns:1fr 1fr;gap:0 52px}
.index-2 > .col{border-top:1px solid var(--line)}

/* ---- flow: a sticky heading beside a numbered sequence ------------------- */
.flow{display:grid;grid-template-columns:.82fr 1.18fr;gap:76px;align-items:start}
.flow .side{position:sticky;top:calc(var(--bar) + 48px)}
.flow .steps{position:relative;padding-left:54px}
.flow .steps::before{content:"";position:absolute;left:15px;top:10px;bottom:10px;width:1px;
  background:var(--line-2)}
.flow .s{position:relative;padding:0 0 44px}
.flow .s:last-child{padding-bottom:0}
.flow .s .n{position:absolute;left:-54px;top:-3px;width:31px;height:31px;border-radius:50%;
  display:grid;place-items:center;background:var(--bg);border:1px solid var(--line-2);
  font-size:12px;font-weight:700;color:var(--text-2);font-variant-numeric:tabular-nums;
  transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease)}
.flow .s.in .n{background:var(--navy);border-color:var(--navy);color:#fff}
:root[data-theme="dark"] .flow .s.in .n{background:var(--brand);border-color:var(--brand)}
.flow .s h3{font-family:var(--serif);font-size:21px;font-weight:600;margin-bottom:10px;line-height:1.3}
.flow .s p{font-size:15.5px;color:var(--text-2);line-height:1.72;max-width:56ch}

/* ---- roadmap ------------------------------------------------------------
   Four stages read left to right, each in its own container, hung off a line
   that runs across the top of them.

   The node and its length of line live in one flex row, vertically centred
   against each other. That is the whole trick: the earlier version positioned
   the node absolutely and drew the line with a separate offset, so the two
   were only ever aligned by arithmetic that any change to the node size would
   break. Here they cannot drift, because they are siblings on one baseline.

   Each line reaches into the gutter by the width of the gap, so it arrives at
   the next node rather than stopping short of it. */
.road{--road-gap:24px;
  display:grid;grid-template-columns:repeat(4,1fr);gap:var(--road-gap);align-items:stretch}
.road .s{display:flex;flex-direction:column;min-width:0}
.road .track{display:flex;align-items:center;margin-bottom:22px;min-width:0}
.road .n{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  background:var(--bg);border:1px solid var(--line-2);
  font-family:var(--serif);font-size:15.5px;font-weight:600;color:var(--text-2);
  font-variant-numeric:tabular-nums;line-height:1;
  transition:background .4s var(--ease),border-color .4s var(--ease),color .4s var(--ease)}
.road .s.in .n{background:var(--navy);border-color:var(--navy);color:#fff}
:root[data-theme="dark"] .road .s.in .n{background:var(--brand);border-color:var(--brand)}
.road .line{flex:1;height:1px;background:var(--line-2);margin-left:12px;
  margin-right:calc(var(--road-gap) * -1)}
/* the last one stops short and ends in an arrowhead, so the sequence is
   closed rather than pointing off the page */
.road .line.end{margin-right:0;position:relative}
.road .line.end::after{content:"";position:absolute;right:0;top:50%;width:8px;height:8px;
  border-top:1px solid var(--line-2);border-right:1px solid var(--line-2);
  transform:translateY(-50%) rotate(45deg)}

.road .card{flex:1;display:flex;flex-direction:column;
  border:1px solid var(--line);border-radius:13px;background:var(--surface);padding:24px 22px;
  transition:border-color .3s var(--ease),transform .35s var(--ease-side),
             box-shadow .35s var(--ease-side)}
.road .s:hover .card{border-color:var(--line-2);transform:translateY(-3px);box-shadow:var(--shadow)}
.road .ic{width:38px;height:38px;border:1px solid var(--line);border-radius:10px;display:grid;
  place-items:center;color:var(--brand);margin-bottom:18px;flex:none}
.road .ic svg{width:18px;height:18px}
.road h3{font-family:var(--serif);font-size:19px;font-weight:600;line-height:1.3;margin-bottom:10px}
.road p{font-size:14.5px;color:var(--text-2);line-height:1.68}
.road .box{margin-top:auto;padding-top:18px;border-top:1px solid var(--line);margin-bottom:-2px}
.road .box .k{font-size:9.5px;font-weight:700;letter-spacing:1.3px;text-transform:uppercase;
  color:var(--muted);margin-bottom:8px}
.road .box .v{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;
  line-height:1.75;color:var(--text-2);word-break:break-word}

/* ---- bento -------------------------------------------------------------- */
/* Six things, not six identical boxes: one wide tile carries a picture and the
   rest vary, so the eye has somewhere to go. */
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:12px;overflow:hidden}
.bento .b{background:var(--bg);padding:32px;display:flex;flex-direction:column;
  transition:background .25s var(--ease)}
.bento .b:hover{background:var(--surface)}
.bento .w2{grid-column:span 2} .bento .w3{grid-column:span 3}
.bento .w4{grid-column:span 4} .bento .w6{grid-column:span 6}
.bento .b .ic{width:34px;height:34px;border-radius:8px;display:grid;place-items:center;
  border:1px solid var(--line-2);color:var(--brand);margin-bottom:20px;flex:none}
.bento .b .ic svg{width:17px;height:17px}
.bento .b h3{font-family:var(--serif);font-size:19px;font-weight:600;margin-bottom:9px}
.bento .b p{font-size:14.5px;color:var(--text-2);line-height:1.65}
.bento .b .fig{font-family:var(--serif);font-size:32px;font-weight:600;line-height:1;
  color:var(--text);margin-bottom:8px;font-variant-numeric:tabular-nums}
.bento .shot{padding:0;position:relative;overflow:hidden;background:var(--surface-2);min-height:250px}
.bento .shot img{width:100%;height:100%;object-fit:cover;object-position:left top}
.bento .shot .cap{position:absolute;inset:auto 0 0 0;padding:22px 26px;
  background:linear-gradient(transparent,rgba(0,12,25,.9))}
.bento .shot .cap h3{color:#fff;margin-bottom:4px}
.bento .shot .cap p{color:rgba(255,255,255,.82);font-size:13.5px}

/* ---- property gallery ---------------------------------------------------
   The houses are the business, so they get the largest uninterrupted area on
   the page. Tiles are a 3:2 crop with the caption inside the image, which
   keeps the grid on one baseline however long an address runs. */
.gallery{display:grid;grid-template-columns:repeat(12,1fr);gap:14px}
.pcard{position:relative;display:block;overflow:hidden;border-radius:10px;isolation:isolate;
  background:var(--surface-2);border:1px solid var(--line);color:#fff;
  transition:transform .45s var(--ease-side),box-shadow .45s var(--ease-side),
             border-color .3s var(--ease)}
.pcard:hover{transform:translateY(-4px);border-color:var(--line-2);color:#fff;
  box-shadow:0 26px 52px -30px rgba(0,54,112,.6)}
.pcard img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .8s var(--ease-side),filter .45s var(--ease)}
.pcard:hover img{transform:scale(1.045)}
.pcard::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(transparent 38%,rgba(0,12,25,.28) 62%,rgba(0,12,25,.88));
  transition:opacity .3s var(--ease)}
.pcard .cap{position:absolute;inset:auto 0 0 0;z-index:1;padding:20px 22px}
.pcard .cap .a{font-family:var(--serif);font-size:17.5px;font-weight:600;line-height:1.3;
  letter-spacing:-.01em;text-shadow:0 1px 12px rgba(0,12,25,.5)}
.pcard .cap .m{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-top:8px;
  font-size:11.5px;letter-spacing:.5px;color:rgba(255,255,255,.82)}
.pcard .cap .m i{font-style:normal;display:inline-flex;align-items:center;gap:6px}
.pcard .cap .m i::before{content:"";width:3px;height:3px;border-radius:50%;
  background:rgba(255,255,255,.5)}
.pcard .cap .m i:first-child::before{display:none}
.pcard .tag{position:absolute;top:14px;left:14px;z-index:1;font-size:10px;font-weight:700;
  letter-spacing:1.1px;text-transform:uppercase;padding:5px 10px;border-radius:99px;
  background:rgba(255,255,255,.92);color:var(--navy-deep);
  transition:background .3s var(--ease)}
.pcard:hover .tag{background:#fff}
/* the shapes: a tall feature, then a run of wide tiles */
.pcard.t-lg{grid-column:span 6;aspect-ratio:3/2}
.pcard.t-hero{grid-column:span 12;aspect-ratio:3/2}
.pcard.t-md{grid-column:span 6;aspect-ratio:3/2}
.pcard.t-sm{grid-column:span 4;aspect-ratio:4/3}
.gallery-foot{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:14px;margin-top:26px;padding-top:20px;border-top:1px solid var(--line);
  font-size:14px;color:var(--muted)}

/* ---- how it works -------------------------------------------------------
   Rows, not cards. Each is a specification line: the step number, what
   happens in plain words, and what is actually going on underneath. */
.howto{border-top:1px solid var(--text);margin-top:4px}
.howto .r{display:grid;grid-template-columns:88px minmax(0,600px) minmax(210px,1fr);gap:44px;align-items:start;
  padding:34px 0;border-bottom:1px solid var(--line);
  transition:background .25s var(--ease),padding-left .3s var(--ease-side)}
.howto .r:hover{background:var(--surface);padding-left:18px}
.howto .n{font-family:var(--serif);font-size:40px;font-weight:600;line-height:.9;
  color:var(--line-2);font-variant-numeric:tabular-nums;transition:color .3s var(--ease)}
.howto .r:hover .n{color:var(--brand)}
.howto h3{font-family:var(--serif);font-size:23px;font-weight:600;line-height:1.28;
  margin-bottom:11px}
.howto p{font-size:15.5px;color:var(--text-2);line-height:1.72}
.howto .under{border-left:1px solid var(--line);padding-left:22px}
.howto .under .k{font-size:10px;font-weight:700;letter-spacing:1.3px;text-transform:uppercase;
  color:var(--muted);margin-bottom:9px}
.howto .under .v{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;
  line-height:1.8;color:var(--text-2)}
.howto .under .v b{display:block;font-weight:400;color:var(--brand)}

/* ---- what it has read ---------------------------------------------------
   A photograph on one side, the ledger on the other. The figures are the
   point, so they are set in the display face and right-aligned on one column. */
.reads{display:grid;grid-template-columns:.85fr 1.15fr;gap:64px;align-items:start}
.reads .shot{position:sticky;top:calc(var(--bar) + 44px);border-radius:12px;overflow:hidden;
  border:1px solid var(--line)}
.reads .shot img{width:100%;display:block;aspect-ratio:4/5;object-fit:cover}
.reads .shot figcaption{padding:16px 20px;background:var(--surface);font-size:13px;
  color:var(--muted);line-height:1.55;border-top:1px solid var(--line)}
.reads .shot figcaption b{display:block;color:var(--text);font-weight:600;font-size:14px;
  margin-bottom:3px;font-family:var(--serif)}
.ledger{border-top:1px solid var(--text)}
.ledger .r{display:grid;grid-template-columns:1fr auto;gap:28px;align-items:baseline;
  padding:20px 0;border-bottom:1px solid var(--line);
  transition:background .2s var(--ease),padding-left .3s var(--ease-side)}
.ledger .r:hover{background:var(--surface);padding-left:14px}
.ledger h3{font-family:var(--serif);font-size:19px;font-weight:600;line-height:1.3}
.ledger p{font-size:14.5px;color:var(--text-2);line-height:1.65;margin-top:6px;max-width:56ch}
.ledger .v{font-family:var(--serif);font-size:30px;font-weight:600;line-height:1;
  font-variant-numeric:tabular-nums;color:var(--text);white-space:nowrap;
  transition:color .25s var(--ease)}
.ledger .r:hover .v{color:var(--brand)}

/* ---- duotone photo panel ------------------------------------------------ */
/* The photo is greyscale already, so luminosity over navy gives a clean
   single-colour image rather than the mud a filter chain produces. */
.duo{position:relative;isolation:isolate;background:var(--navy-deep);overflow:hidden}
.duo > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.duo::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:rgba(0,12,25,.8)}
.duo .wrap{position:relative;z-index:2}
.duo .inner{padding:106px 0;max-width:62ch}
.duo blockquote{margin:0;font-family:var(--serif);font-size:clamp(23px,2.9vw,34px);line-height:1.34;
  font-weight:500;color:#fff;letter-spacing:-.01em}
.duo blockquote::before{content:"";display:block;width:46px;height:2px;background:var(--sky-2);
  margin-bottom:30px}
.duo .by{margin-top:28px;font-size:12px;letter-spacing:1.4px;text-transform:uppercase;
  color:rgba(178,214,255,.82);font-weight:700}

/* ---- data sheet tables -------------------------------------------------- */
.sheet{border-top:2px solid var(--text);border-bottom:1px solid var(--line)}
.sheet-scroll{overflow-x:auto}
table.tbl{width:100%;border-collapse:collapse;font-size:14.5px}
table.tbl caption{text-align:left;padding:0 0 14px;font-size:10.5px;font-weight:700;letter-spacing:1.4px;
  text-transform:uppercase;color:var(--muted)}
/* baseline, not top: the label is 14.5px Roboto and the figure beside it is
   16px Source Serif, so aligning the boxes leaves the number sitting low.
   Aligning the first baselines is what makes a row read as one line. */
table.tbl th,table.tbl td{padding:15px 18px;text-align:left;border-bottom:1px solid var(--line);
  vertical-align:baseline}
table.tbl th:first-child,table.tbl td:first-child{padding-left:0}
table.tbl th:last-child,table.tbl td:last-child{padding-right:0}
table.tbl thead th{font-size:10.5px;letter-spacing:1.3px;text-transform:uppercase;color:var(--muted);
  font-weight:700;padding-top:12px;padding-bottom:12px;white-space:nowrap}
table.tbl tbody tr{transition:background .18s var(--ease)}
table.tbl tbody tr:hover{background:var(--surface)}
table.tbl tbody tr:last-child td{border-bottom:0}
table.tbl td.n{text-align:right;font-variant-numeric:tabular-nums;font-weight:600;font-size:16px;
  white-space:nowrap;font-family:var(--serif)}
table.tbl td strong{font-weight:600;font-size:15px}
table.tbl td .sub{display:block;font-size:13px;color:var(--muted);margin-top:4px;line-height:1.55;
  max-width:62ch}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.85em;
  color:var(--muted);letter-spacing:-.2px}
.meter{display:block;height:3px;background:var(--line);overflow:hidden;
  width:100%;max-width:190px;margin-top:11px}
.meter i{display:block;height:100%;background:var(--navy)}
:root[data-theme="dark"] .meter i{background:var(--sky-2)}

/* ---- role list ---------------------------------------------------------- */
.roles{border-top:1px solid var(--line)}
.roles .r{display:grid;grid-template-columns:38px 220px 1fr;gap:26px;align-items:start;
  padding:26px 0;border-bottom:1px solid var(--line);
  transition:background .22s var(--ease),padding-left .3s var(--ease-side)}
.roles .r:hover{background:var(--surface);padding-left:16px}
.roles .av{width:38px;height:38px;border:1px solid var(--line-2);border-radius:9px;display:grid;
  place-items:center;color:var(--text-2);flex:none;
  transition:border-color .22s var(--ease),color .22s var(--ease)}
.roles .r:hover .av{border-color:var(--navy);color:var(--navy)}
:root[data-theme="dark"] .roles .r:hover .av{border-color:var(--sky-2);color:var(--sky-2)}
.roles .av svg{width:18px;height:18px}
.roles .reach{margin-top:7px;font-size:12.5px;color:var(--muted);
  font-variant-numeric:tabular-nums;letter-spacing:.1px}
.roles .r.full .reach{color:var(--text-2)}
.roles h3{font-family:var(--serif);font-size:19px;font-weight:600;line-height:1.25}
.roles .slug{display:block;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;
  color:var(--muted);margin-top:6px;font-weight:400}
.roles p{font-size:15px;color:var(--text-2);line-height:1.65;padding-top:2px}
.roles .r.full .av{background:var(--navy);border-color:var(--navy);color:#fff}
:root[data-theme="dark"] .roles .r.full .av{background:var(--brand);border-color:var(--brand)}
.tagline{display:inline-block;margin-left:10px;font-family:var(--font);font-size:9.5px;font-weight:700;
  letter-spacing:1.1px;text-transform:uppercase;color:var(--brand);border:1px solid currentColor;
  border-radius:99px;padding:2px 8px;vertical-align:3px}

/* ---- notes -------------------------------------------------------------- */
.note{border-left:2px solid var(--navy);padding:4px 0 4px 26px}
:root[data-theme="dark"] .note{border-left-color:var(--sky-2)}
.note.warn{border-left-color:var(--warn)}
.note h4{font-family:var(--serif);font-size:19px;font-weight:600;margin-bottom:10px}
.note p{font-size:15.5px;color:var(--text-2);line-height:1.7}
.note p + p{margin-top:12px}
.note p svg{width:14px;height:14px;vertical-align:-2px}

.cols2{display:grid;grid-template-columns:1fr 1fr;gap:56px}
.cols3{display:grid;grid-template-columns:repeat(3,1fr);gap:46px}
/* A paired heading reserves the taller of the two shapes whether or not it
   needs it, so the paragraphs under two columns start on one baseline. The
   selector has to out-specify `.sec h2.d` or the display size wins. */
.sec h2.d.col-h{font-size:31px;margin:20px 0 18px;max-width:24ch;
  min-height:2.3em;display:flex;align-items:flex-end}
.sec h2.d.col-h.sm{font-size:26px;min-height:1.25em;margin:18px 0 10px}
.lede.col-p{font-size:16px;margin:0 0 30px;min-height:3.1em}
.prose h3{font-family:var(--serif);font-size:22px;font-weight:600;margin-bottom:12px}
.prose p{font-size:15.5px;color:var(--text-2);line-height:1.72}
.prose p + p{margin-top:14px}
.lead{font-family:var(--serif);font-size:21px;line-height:1.55;color:var(--text);font-weight:400}

/* ---- stages -------------------------------------------------------------
   Four columns hung off one rule, each with its own mark. A sequence reads
   better left to right than as a stack of rows, and the rule is what says
   these are four parts of one thing rather than four separate claims. */
.stages{display:grid;grid-template-columns:repeat(4,1fr);gap:34px;position:relative;padding-top:42px}
.stages::before{content:"";position:absolute;top:6px;left:0;right:0;height:1px;background:var(--line)}
.stages .s{position:relative}
.stages .s::before{content:"";position:absolute;top:-42px;left:0;width:9px;height:9px;border-radius:50%;
  background:var(--bg);border:1px solid var(--line-2);transform:translateY(2px);
  transition:background .35s var(--ease),border-color .35s var(--ease)}
.stages .s.in::before{background:var(--navy);border-color:var(--navy)}
:root[data-theme="dark"] .stages .s.in::before{background:var(--brand);border-color:var(--brand)}
.stages .ic{width:46px;height:46px;border:1px solid var(--line);border-radius:12px;display:grid;
  place-items:center;color:var(--brand);margin-bottom:20px;background:var(--surface);
  transition:border-color .3s var(--ease),transform .35s var(--ease-side)}
.stages .s:hover .ic{border-color:var(--line-2);transform:translateY(-2px)}
.stages .ic svg{width:21px;height:21px}
.stages .k{font-size:10px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;
  color:var(--muted);margin-bottom:11px}
.stages h3{font-family:var(--serif);font-size:19.5px;font-weight:600;line-height:1.3;margin-bottom:11px}
.stages p{font-size:14.5px;color:var(--text-2);line-height:1.68}

/* ---- closing panel ------------------------------------------------------ */
/* Solid blue, with the house behind it at an opacity low enough that white
   type on top never drops below about 9:1. No gradient: the panel is one
   colour, and the photograph is a texture inside it. */
.cta{background:var(--navy);color:#fff;position:relative;overflow:hidden;isolation:isolate;
  --grid-ink:rgba(255,255,255,.07)}
.cta > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
  opacity:.14}
.cta::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:rgba(0,54,112,.5)}
.cta .wrap{position:relative;z-index:1}
.cta .inner{display:grid;grid-template-columns:1.25fr .75fr;gap:64px;align-items:center;padding:92px 0}
.cta .lab{color:rgba(255,255,255,.7)}
.cta .lab .ix{color:var(--sky)}
.cta .lab::after{background:rgba(255,255,255,.2)}
.cta h2{margin-top:20px}
.cta h2{font-family:var(--serif);font-size:clamp(28px,3.6vw,42px);font-weight:600;line-height:1.14}
.cta p{margin-top:20px;font-size:16.5px;color:rgba(255,255,255,.82);max-width:48ch;line-height:1.65}
.cta .acts{display:flex;flex-direction:column;gap:12px;align-items:stretch}
.cta .strap{margin-top:8px;font-size:13px;line-height:1.6;color:rgba(255,255,255,.62);
  padding-top:14px;border-top:1px solid rgba(255,255,255,.16)}
.cta .btn-primary{background:#fff;color:var(--navy);box-shadow:0 12px 30px -16px rgba(0,0,0,.5)}
.cta .btn-primary:hover{background:var(--sky);color:var(--navy)}
.cta .btn-ghost{color:#fff;border-color:rgba(255,255,255,.28)}
.cta .btn-ghost:hover{border-color:rgba(255,255,255,.6);color:#fff;background:rgba(255,255,255,.06)}

/* ---- footer ------------------------------------------------------------- */
.foot{background:var(--navy-deep);color:rgba(219,232,251,.76);border-top:1px solid rgba(255,255,255,.08)}
.foot a{color:rgba(219,232,251,.76)}
.foot a:hover{color:#fff}
.foot .top{display:grid;grid-template-columns:1.7fr 1fr 1fr 1.25fr;gap:52px;padding:64px 0 48px}
.foot .logo{height:44px;width:auto;margin-bottom:20px}
.foot .about p{font-size:14.5px;line-height:1.7;max-width:36ch;color:rgba(219,232,251,.62)}
.foot h4{font-size:10.5px;letter-spacing:1.4px;text-transform:uppercase;color:rgba(178,214,255,.7);
  margin-bottom:18px;font-weight:700}
.foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.foot li{font-size:14.5px}
.foot .contact li{display:flex;align-items:flex-start;gap:11px;color:rgba(219,232,251,.7)}
.foot .contact svg{width:15px;height:15px;flex:none;margin-top:4px;color:var(--sky-2)}
.foot-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;
  padding:20px 0 30px;border-top:1px solid rgba(255,255,255,.08);font-size:12.5px;
  color:rgba(219,232,251,.48)}
.foot-bar .r{display:flex;gap:26px;flex-wrap:wrap}

/* ---- reveal on scroll ---------------------------------------------------
   Scoped to .js, set by the inline script in <head>. Without it the rule does
   not apply at all, so a browser with scripting off - or a site.js that failed
   to load - shows every section rather than a page of blank background. */
.js .rv{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease-side)}
.js .rv.in{opacity:1;transform:none}
.js .rv-d1{transition-delay:.07s} .js .rv-d2{transition-delay:.14s} .js .rv-d3{transition-delay:.21s}

/* ---- responsive --------------------------------------------------------- */
@media (max-width:1080px){
  .hero .inner{grid-template-columns:1fr;gap:54px}
  .hero h1{max-width:18ch}
  .hero .sub{max-width:62ch}
  .pair > .plate{width:88%}
  .pair > .plate + .plate{margin-top:-58px}
  .pin{right:18px;bottom:-22px}
  .flow{grid-template-columns:1fr;gap:42px}
  .flow .side{position:static}
  .split-head{grid-template-columns:1fr;gap:22px;align-items:start}
  .cta .inner{grid-template-columns:1fr;gap:36px;padding:66px 0}
  .cta .acts{flex-direction:row;flex-wrap:wrap}
  .bento .w3,.bento .w2,.bento .w4{grid-column:span 3}
  .reads{grid-template-columns:1fr;gap:40px}
  .reads .shot{position:static;max-width:520px}
  .howto .r{grid-template-columns:70px 1fr;gap:26px}
  .howto .under{grid-column:2;border-left:0;border-top:1px solid var(--line);
    padding:16px 0 0;margin-top:4px}
  .howto .n{font-size:32px}
  .foot .top{grid-template-columns:1fr 1fr;gap:42px}
}
/* Between the nav breakpoint and about 960px there is room for the lockup and
   the nav, but not for the call to action as well, and the bar was running
   past the right edge. The button is the first thing to go: the nav still
   reaches the assistant, and the hero carries the same button at full size. */
@media (max-width:1000px){
  .head-end .btn{display:none}
  .head-end{margin-left:20px}
  .bar .wrap{gap:20px}
  .nav a{padding:8px 13px}
}
@media (max-width:860px){
  :root{--bar:64px;--bar-sm:56px}
  .nav,.nav-ink{display:none}
  .burger{display:grid}
  .mnav{display:block}
  .head-end .btn{display:none}
  .head-end{margin-left:auto;gap:9px}
  .bar .wrap{gap:14px}
  .brand{min-width:0}
  .brand .txt{min-width:0}
  .brand .n{white-space:nowrap}
  .sec{padding:62px 0}
  .figs .row{grid-template-columns:1fr 1fr;gap:38px 0;padding:46px 0}
  .figs .f:nth-child(3){padding-left:0;border-left:0}
  .index-2{grid-template-columns:1fr;gap:0}
  .index-2 > .col + .col{border-top:0}
  .cols2,.cols3{grid-template-columns:1fr;gap:40px}
  .bento{grid-template-columns:1fr}
  .bento .w2,.bento .w3,.bento .w4,.bento .w6{grid-column:span 1}
  .duo .inner{padding:76px 0}
  .pair > .plate{width:94%}
  .pair > .plate + .plate{margin-top:-46px}
  .stages{grid-template-columns:1fr 1fr;gap:38px 30px}
  /* Two columns means two rows, so the line that would run off the end of the
     first row is closed on both of them. */
  .road{grid-template-columns:1fr 1fr;--road-gap:26px;gap:40px 26px}
  .road .s:nth-child(2n) .line{margin-right:0}
  .road .s:nth-child(2n) .line::after{content:"";position:absolute;right:0;top:50%;width:8px;
    height:8px;border-top:1px solid var(--line-2);border-right:1px solid var(--line-2);
    transform:translateY(-50%) rotate(45deg)}
  .road .s:nth-child(2n) .line{position:relative}
  .gallery{gap:12px}
  .pcard.t-lg,.pcard.t-md{grid-column:span 12;aspect-ratio:16/9}
  .pcard.t-sm{grid-column:span 6;aspect-ratio:4/3}
  .cta > img{width:100%;opacity:.16}

}
@media (max-width:620px){
  .wrap{padding:0 20px}
  .util{font-size:11px}
  .util .end{gap:14px}
  /* The strip keeps the one thing it is for, the phone number, and drops the
     rest rather than wrapping onto a second line. The second selector is not
     redundant: `.util .end a` would otherwise out-specify a bare `.hide-xs`
     and the email would stay. */
  .hide-xs{display:none}
  .util .end a.hide-xs{display:none}
  .util .wrap{gap:10px}
  .brand .s{display:none}
  .brand{gap:10px}
  .brand .rule{height:24px}
  /* the pinned figure hangs below the plate, so the section needs room for it */
  .hero .plate-wrap{margin-bottom:34px}
  .hero{padding:44px 0 0}
  .index .r{grid-template-columns:30px 1fr;gap:14px;padding:18px 0}
  .index .end{grid-column:1 / -1;padding-left:44px;margin-top:-4px}
  .index .q{font-size:17.5px}
  .figs .row{grid-template-columns:1fr;gap:30px}
  .figs .f{padding-left:0;border-left:0;border-top:1px solid rgba(255,255,255,.12);padding-top:28px}
  .figs .f:first-child{border-top:0;padding-top:0}
  .roles .r{grid-template-columns:38px 1fr;gap:16px}
  /* The description and its "who they are" line move to their own row under
     the name. They live in a wrapper, so the rule has to target the wrapper:
     a bare `.roles p` leaves the wrapper itself sitting in the 38px avatar
     column, which squeezes the text to about forty pixels. */
  .roles .rt{grid-column:1 / -1;padding-left:54px;margin-top:-12px}
  .roles .rt p{padding-top:0}
  .mnav a,.mnav .cta,.mnav .meta{padding-left:20px;padding-right:20px}
  /* An address has no spaces to break at, so on a 320px screen it runs past
     the drawer rather than wrapping. Let it break anywhere it must. */
  .mnav .meta a,.foot .contact a{overflow-wrap:anywhere}
  .plate .chrome .addr{display:none}
  table.tbl .tech{display:none}
  .sheet-scroll{margin:0 -20px;padding:0 20px}
  .foot .top{grid-template-columns:1fr;gap:34px;padding:46px 0 34px}
  .pin{right:0;bottom:-18px;padding:12px 16px;min-width:0}
  .pin .v{font-size:23px}
  /* a shallower step, but still a step */
  .pair > .plate{width:95%}
  .pair > .plate + .plate{margin-top:-30px;box-shadow:0 0 0 6px var(--bg),
    0 22px 44px -26px rgba(0,54,112,.45)}
  /* at this width the address and the strategy tag cannot share a line, so
     the tag goes above it rather than squeezing the address to nothing */
  .plate .shot .cap{padding:13px 16px;flex-direction:column-reverse;align-items:flex-start;gap:9px}
  .plate .shot .cap .a{font-size:14.5px}
  .plate .shot .cap .m{font-size:11px;margin-top:4px}
  .plate .shot{aspect-ratio:3/2}
  .pcard.t-sm{grid-column:span 12;aspect-ratio:3/2}
  .pcard .cap{padding:16px 18px}
  .pcard .cap .a{font-size:16px}
  .howto .r{grid-template-columns:1fr;gap:14px}
  .howto .n{font-size:26px}
  .howto .under{grid-column:1}
  .stages{grid-template-columns:1fr;gap:30px;padding-top:34px}
  .stages::before{display:none}
  .stages .s::before{display:none}
  .road{grid-template-columns:1fr;--road-gap:0px;gap:26px}
  .road .line{margin-right:0;position:relative}
  .road .line::after{content:"";position:absolute;right:0;top:50%;width:8px;height:8px;
    border-top:1px solid var(--line-2);border-right:1px solid var(--line-2);
    transform:translateY(-50%) rotate(45deg)}
  .road .track{margin-bottom:16px}
  .ledger .r{grid-template-columns:1fr;gap:6px}
  .ledger .v{font-size:26px;order:-1;color:var(--brand)}
}
@media (pointer:coarse){
  .nav a,.mnav a{padding-top:14px;padding-bottom:14px}
  /* A text link is 26px tall, which is the right size to read and the wrong
     size to hit with a thumb. The hit area is grown with a pseudo-element so
     nothing on the page moves. */
  .lnk,.note p a,.foot .contact a{position:relative}
  .lnk::before,.note p a::before,.foot .contact a::before{content:"";position:absolute;
    inset:-10px -8px;border-radius:8px}
  /* the micro-labels are tracked uppercase, which needs a little more size
     than it does on a desktop screen */
  /* The footer list and the phone in the top strip were the last targets
     still at finger-hostile size: 17px and 26px tall. Same pseudo-element,
     but the list needs its gap opened first. At 12px apart, growing each row
     by 13px top and bottom would make neighbouring hit areas overlap and the
     wrong link would answer the tap. 26px apart, they meet and do not cross. */
  .foot ul{gap:26px}
  .foot ul a,.util .end a{position:relative;display:inline-block}
  .foot ul a::before,.util .end a::before{content:"";position:absolute;
    inset:-13px -10px;border-radius:8px}
  .util .end a::before{inset:-9px -10px}
  /* The contact rows are 18px of text and were reaching 38px, short of the
     44px a thumb wants. The list is 26px apart here, so 13px each way lands
     exactly on 44 and the neighbouring areas meet without crossing. */
  .foot .contact a::before{inset:-13px -10px}
  .tagline,.plate .shot .tag,.road .under .k,.brand .s,.stages .k{font-size:10.5px}
  *{-webkit-tap-highlight-color:transparent}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important}
  .ticker .track{animation:none}
  .js .rv{opacity:1;transform:none}
}
@media print{
  .head,.mnav,.cta,.ticker,.foot-bar{display:none}
  body{background:#fff;color:#000}
  .figs,.duo{background:#fff;color:#000}
}