/* BOLLWERK front door: tokens. The one place colours, type, spacing and motion are set.
   Everything else reads these names; the member site and the future hub should too.
   Colour tokens start --c-; the /system page lists them automatically. */

@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url("/assets/fonts/hanken-grotesk-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url("/assets/fonts/hanken-grotesk-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Fixed brand colours: blueprint, cream, cherry, sunflower and white. Sunflower is the highlight everywhere. */
  --c-blueprint: #172d88;
  --c-blueprint-deep: #0f2257;
  --c-cherry: #b3202a;
  --c-cherry-deep: #6e1118;
  --c-sunflower: #f2b51d;
  --c-white: #ffffff;
  --c-navy: #0b1e2b;
  --c-honey: var(--c-sunflower);
  --c-cream: #f2ede2;
  --c-second: var(--c-cherry);
  --c-error-light: #8a2615;
  --c-error-dark: #f08a6b;

  /* Light mode: a dim stone, never white */
  --c-paper: #d6d0c4;
  --c-panel: #ccc5b8;
  --c-ink: #161b22;
  --c-ink-2: #343b44;
  --c-ink-3: #4c535c;
  --c-rule: #b5ae9f;
  --c-gold: #6a4e0e;
  --c-link: #1e3175;
  --c-band: #0b1e2b;
  --c-on-band: #efe9dc;
  --c-chip-on: #0b1e2b;
  --c-on-chip: #efe9dc;
  --c-error: var(--c-error-light);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .1 0 0 0 0 .08 0 0 0 0 .05 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  /* Type */
  --font: "Hanken Grotesk", "Helvetica Neue", system-ui, sans-serif;
  --fs-display: clamp(46px, 7vw, 92px);
  --fs-display-sm: clamp(40px, 5vw, 62px);
  --fs-h2: 38px;
  --fs-h3: 18px;
  --fs-lede: 21px;
  --fs-body: 17px;
  --fs-small: 15px;
  --fs-label: 12px;
  --fs-micro: 11px;
  --track-label: .22em;

  /* Space and layout */
  --measure: 1120px;
  --gutter: 32px;
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 72px;

  /* Motion: one style, slow in and settled */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur-fast: .2s;
  --dur: .45s;
  --dur-slow: .9s;

  color-scheme: light;
}

/* Dark mode: navy-black, cream text, honey accents */
:root[data-theme="dark"] {
  --c-paper: #0c1219; --c-panel: #111a24; --c-ink: #f2ede2; --c-ink-2: #c6ccd4; --c-ink-3: #98a1ad;
  --c-rule: #263342; --c-gold: #e4a723; --c-link: #c9d3f5; --c-band: #070c12; --c-on-band: #f2ede2;
  --c-chip-on: #e4a723; --c-on-chip: #0b1e2b; --c-error: var(--c-error-dark); --grain: none;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --c-paper: #0c1219; --c-panel: #111a24; --c-ink: #f2ede2; --c-ink-2: #c6ccd4; --c-ink-3: #98a1ad;
    --c-rule: #263342; --c-gold: #e4a723; --c-link: #c9d3f5; --c-band: #070c12; --c-on-band: #f2ede2;
    --c-chip-on: #e4a723; --c-on-chip: #0b1e2b; --c-error: var(--c-error-dark); --grain: none;
    color-scheme: dark;
  }
}

/* Page colourways: each page has one primary (blueprint, cherry or white), carries the other two as
   accents (--c-second, and white or cream), and highlights in sunflower. Light and dark each have a version. */
.pw-blueprint {
  --c-paper: #f3eee1; --c-panel: #e7e0cd; --c-ink: #0f2257; --c-ink-2: #2a3c7e; --c-ink-3: #4d5b8f; --c-rule: #c7bfab;
  --c-gold: #8a5d0a; --c-link: #172d88; --c-band: #172d88; --c-on-band: #f7f2e6; --c-chip-on: #172d88; --c-on-chip: #f7f2e6; --c-second: #b3202a;
}
.pw-cherry {
  --c-paper: #fbf7f0; --c-panel: #f1e7da; --c-ink: #2b0a0e; --c-ink-2: #5b2328; --c-ink-3: #7d4a4e; --c-rule: #dcc8bb;
  --c-gold: #8a5d0a; --c-link: #9e1b24; --c-band: #9e1b24; --c-on-band: #fff8ef; --c-chip-on: #9e1b24; --c-on-chip: #fff8ef; --c-second: #172d88;
}
.pw-white {
  --c-paper: #ffffff; --c-panel: #f4f2ed; --c-ink: #0f2257; --c-ink-2: #33406b; --c-ink-3: #59648a; --c-rule: #e0dcd2;
  --c-gold: #8a5d0a; --c-link: #b3202a; --c-band: #172d88; --c-on-band: #ffffff; --c-chip-on: #0f2257; --c-on-chip: #ffffff; --c-second: #b3202a; --grain: none;
  /* The white page's hero is light: the drawing in blueprint on white */
  --hero-bg: #ffffff; --hero-ink: #0f2257; --hero-ink-2: #33406b; --hero-kick: #b3202a; --kick-ink: #ffffff; --hero-img: grayscale(1) invert(1) contrast(1.12);
  --hero-blend: lighten; --hero-tint: #172d88; --hero-tint-o: .92; --mast-ink: #0f2257; --mast-ink-2: rgba(15, 34, 87, .8); --mast-rule: rgba(15, 34, 87, .14);
  --hero-veil: linear-gradient(90deg, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, .82) 45%, rgba(255, 255, 255, .35) 66%, rgba(255, 255, 255, .08) 82%), linear-gradient(0deg, rgba(255, 255, 255, .85), rgba(255, 255, 255, 0) 40%), linear-gradient(180deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0) 18%);
}
:root[data-theme="dark"] .pw-blueprint {
  --c-paper: #0f2257; --c-panel: #13296b; --c-ink: #f3eee1; --c-ink-2: #c9d0ea; --c-ink-3: #9aa5d0; --c-rule: #2a418f;
  --c-gold: #f2b51d; --c-link: #ffffff; --c-band: #0a1840; --c-on-band: #f3eee1; --c-chip-on: #f2b51d; --c-on-chip: #0f2257; --c-second: #ff7a7a;
}
:root[data-theme="dark"] .pw-cherry {
  --c-paper: #3a0b10; --c-panel: #47101a; --c-ink: #fff4ec; --c-ink-2: #f1d2cb; --c-ink-3: #d6a7a0; --c-rule: #6b2129;
  --c-gold: #f2b51d; --c-link: #ffffff; --c-band: #260609; --c-on-band: #fff4ec; --c-chip-on: #f2b51d; --c-on-chip: #3a0b10; --c-second: #a9c0ff;
}
/* The white page in dark mode is black, not blue: black hero and band, white type and accents */
:root[data-theme="dark"] .pw-white {
  --c-paper: #0e1117; --c-panel: #161b24; --c-ink: #ffffff; --c-ink-2: #d5d9e2; --c-ink-3: #a3abba; --c-rule: #2a3140;
  --c-honey: #ffffff; --c-sunflower: #ffffff; --c-gold: #ffffff; --c-link: #ffffff; --c-band: #050608; --c-on-band: #ffffff; --c-chip-on: #ffffff; --c-on-chip: #0e1117; --c-second: #ff7a7a;
  --hero-bg: #050608; --hero-ink: #ffffff; --hero-ink-2: rgba(255, 255, 255, .84); --hero-kick: #ffffff; --kick-ink: #0b0c0e; --hero-img: initial; --hero-blend: color; --hero-tint: #000000; --hero-tint-o: 1;
  --mast-ink: #ffffff; --mast-ink-2: rgba(255, 255, 255, .8); --mast-rule: rgba(255, 255, 255, .16); --hero-veil: initial;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pw-blueprint {
    --c-paper: #0f2257; --c-panel: #13296b; --c-ink: #f3eee1; --c-ink-2: #c9d0ea; --c-ink-3: #9aa5d0; --c-rule: #2a418f;
    --c-gold: #f2b51d; --c-link: #ffffff; --c-band: #0a1840; --c-on-band: #f3eee1; --c-chip-on: #f2b51d; --c-on-chip: #0f2257; --c-second: #ff7a7a;
  }
  :root:not([data-theme="light"]) .pw-cherry {
    --c-paper: #3a0b10; --c-panel: #47101a; --c-ink: #fff4ec; --c-ink-2: #f1d2cb; --c-ink-3: #d6a7a0; --c-rule: #6b2129;
    --c-gold: #f2b51d; --c-link: #ffffff; --c-band: #260609; --c-on-band: #fff4ec; --c-chip-on: #f2b51d; --c-on-chip: #3a0b10; --c-second: #a9c0ff;
  }
  :root:not([data-theme="light"]) .pw-white {
    --c-paper: #0e1117; --c-panel: #161b24; --c-ink: #ffffff; --c-ink-2: #d5d9e2; --c-ink-3: #a3abba; --c-rule: #2a3140;
    --c-honey: #ffffff; --c-sunflower: #ffffff; --c-gold: #ffffff; --c-link: #ffffff; --c-band: #050608; --c-on-band: #ffffff; --c-chip-on: #ffffff; --c-on-chip: #0e1117; --c-second: #ff7a7a;
    --hero-bg: #050608; --hero-ink: #ffffff; --hero-ink-2: rgba(255, 255, 255, .84); --hero-kick: #ffffff; --kick-ink: #0b0c0e; --hero-img: initial; --hero-blend: color; --hero-tint: #000000; --hero-tint-o: 1;
    --mast-ink: #ffffff; --mast-ink-2: rgba(255, 255, 255, .8); --mast-rule: rgba(255, 255, 255, .16); --hero-veil: initial;
  }
}

/* The pennant: the PRIMARY marker's swallowtail flag, used for the link tabs, labels and time cards */
:root { --pennant: polygon(0 0, 100% 0, calc(100% - 11px) 50%, 100% 100%, 0 100%); }

/* Page tones: the colour each page's photograph is toned to */
.t-blueprint { --tone: #172d88; --tone-deep: #0b1640; }
.t-cherry    { --tone: #b3202a; --tone-deep: #3e0a10; }
.t-white     { --tone: #172d88; --tone-deep: #0b1640; }
.t-navy      { --tone: #2a4f73; --tone-deep: #0b1e2b; }
.t-evergreen { --tone: #2f6b4f; --tone-deep: #0e2a1e; }
.t-slate     { --tone: #3a4a7c; --tone-deep: #101d55; }

/* BOLLWERK front door: base. Reset, type and accessibility defaults. */

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 84px; }
body {
  margin: 0;
  background: var(--grain), var(--c-paper);
  color: var(--c-ink-2);
  font: 400 var(--fs-body)/1.7 var(--font);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  text-rendering: optimizeLegibility;
}
:root[data-theme="dark"] body { -webkit-font-smoothing: antialiased; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body { -webkit-font-smoothing: antialiased; } }

a { color: var(--c-link); text-decoration: none; }
@media (hover:hover) and (pointer:fine) and (min-width:820px){a:hover{ text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }}
:focus-visible { outline: 2px solid var(--c-honey); outline-offset: 3px; }

h1, h2, h3 { text-wrap: balance; }
h1 { font: 300 var(--fs-display)/1.02 var(--font); letter-spacing: -.032em; color: var(--c-ink); margin: 0 0 24px; max-width: 11em; }
h2 { font: 300 var(--fs-h2)/1.15 var(--font); letter-spacing: -.022em; color: var(--c-ink); margin: 0 0 18px; max-width: 22em; }
h3 { font: 500 var(--fs-h3)/1.3 var(--font); letter-spacing: -.005em; color: var(--c-ink); margin: 0 0 8px; }
p { margin: 0 0 16px; max-width: 64ch; text-wrap: pretty; hanging-punctuation: first; }
.num, .tab { font-variant-numeric: tabular-nums lining-nums; }

.wrap { max-width: var(--measure); margin: 0 auto; padding: 0 var(--gutter); }
.label { font: 500 var(--fs-label) var(--font); letter-spacing: var(--track-label); text-transform: uppercase; }
.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 link: first thing a keyboard reaches */
.skip { position: absolute; z-index: 200; left: 16px; top: -60px; padding: 12px 18px; background: var(--c-honey); color: var(--c-navy); font: 600 14px var(--font); }
.skip:focus { top: 12px; text-decoration: none; }

@media (max-width: 640px) {
  :root { --gutter: 16px; --fs-h2: 30px; }
}

/* Page transitions: a short cross-fade between pages in browsers that support it */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .35s; animation-timing-function: var(--ease); }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Lenis: it owns the smoothing, so the browser's own must be off while it runs */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* BOLLWERK front door: component kit. Each part is shown on /system. */

/* Button: honey, with the brand's 45-degree chamfer cut into one corner.
   On hover a cream face sweeps across and the arrow's shaft lengthens. */
.btn { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; gap: 14px; padding: 18px 26px 18px 28px; white-space: nowrap;
  background: var(--c-honey); color: var(--c-navy); border: 0; cursor: pointer; text-decoration: none;
  font: 600 13px var(--font); letter-spacing: .18em; text-transform: uppercase;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%); }
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--c-cream); transform: scaleX(0); transform-origin: left; transition: transform var(--dur) var(--ease); }
@media (hover:hover) and (pointer:fine) and (min-width:820px){.btn:hover{ text-decoration: none; }}
 .btn:focus-visible::before{ transform: scaleX(1); }@media (hover:hover) and (pointer:fine) and (min-width:820px){.btn:hover::before{ transform: scaleX(1); }}
.btn:focus-visible { outline-offset: 4px; }
.btn-sm { padding: 11px 18px 11px 20px; font-size: 11px; clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%); }

/* Arrow: a drawn shaft and head that lengthens on hover */
.arr { position: relative; display: inline-block; flex: none; width: 18px; height: 1px; background: currentColor; transition: width var(--dur) var(--ease); }
.arr::after { content: ""; position: absolute; right: 0; top: -3px; width: 7px; height: 7px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); }
 .btn:focus-visible .arr, .frame:focus-visible .arr{ width: 30px; }@media (hover:hover) and (pointer:fine) and (min-width:820px){.btn:hover .arr, .frame:hover .arr{ width: 30px; }}

/* Fractal hover: no visible box. On hover a fine gold rule cut from the Sierpinski carpet wipes out from
   the centre under the word, the same gesture as the dotted rule under links, and the word warms to
   gold. The letters are never covered. Used by the secondary button (.frame), the header's Search and
   Light/Dark buttons, and any .fx. */
.fx, .frame, .find, .mode { --fx: var(--c-gold); position: relative; isolation: isolate; transition: color .25s var(--ease); }
.fx::before, .frame::before, .find::before, .mode::before {
  content: ""; position: absolute; left: 8px; right: 8px; bottom: 4px; height: 2px; pointer-events: none;
  background: repeating-linear-gradient(90deg, var(--fx) 0 3px, transparent 3px 5px);
  opacity: 0; clip-path: inset(0 50%);
  transition: opacity .25s var(--ease), clip-path .45s var(--ease); }
.frame::before { left: 24px; right: 24px; bottom: 9px; }

.fx:focus-visible::before, .frame:focus-visible::before, .find:focus-visible::before, .mode:focus-visible::before{
  opacity: 1; clip-path: inset(0 0); }@media (hover:hover) and (pointer:fine) and (min-width:820px){.fx:hover::before, .frame:hover::before, .find:hover::before, .mode:hover::before{
  opacity: 1; clip-path: inset(0 0); }}
 .find:focus-visible, .mode:focus-visible{ color: var(--fx); }@media (hover:hover) and (pointer:fine) and (min-width:820px){.find:hover, .mode:hover, .fx:hover{ color: var(--fx); }}

/* Frame: the secondary button. Text and arrow only; the fractal is its hover. */
.frame { display: inline-flex; align-items: center; gap: 14px; padding: 17px 24px; color: var(--c-ink); background: none; cursor: pointer; border: 0; text-decoration: none; white-space: nowrap;
  font: 600 13px var(--font); letter-spacing: .18em; text-transform: uppercase; }
 .frame:focus-visible{ text-decoration: none; }@media (hover:hover) and (pointer:fine) and (min-width:820px){.frame:hover{ text-decoration: none; }}
.frame.on-photo { --fx: var(--c-honey); color: var(--c-cream); }
.frame[data-pending] { opacity: .6; cursor: not-allowed; }

/* Chips: single or multiple choice as clickable squares */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips label { position: relative; }
.chips input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chips span { display: inline-block; padding: 10px 16px; border: 1px solid var(--c-rule); font: 400 var(--fs-small) var(--font); color: var(--c-ink-2); cursor: pointer; user-select: none; transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast); }
@media (hover:hover) and (pointer:fine) and (min-width:820px){.chips span:hover{ border-color: var(--c-ink-3); color: var(--c-ink); }}
.chips input:checked + span { background: var(--c-chip-on); border-color: var(--c-chip-on); color: var(--c-on-chip); }
.chips input:focus-visible + span { outline: 2px solid var(--c-honey); outline-offset: 2px; }

/* Fields */
fieldset { border: 0; margin: 0 0 28px; padding: 0; min-width: 0; }
legend, .f { display: block; font: 500 var(--fs-micro) var(--font); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--c-ink); margin: 0 0 12px; padding: 0; }
.hint { color: var(--c-ink-3); margin-left: 8px; }
.field { margin: 0 0 22px; }
.field input, .field textarea { width: 100%; font: 400 var(--fs-body) var(--font); color: var(--c-ink); background: transparent; border: 0; border-bottom: 1px solid var(--c-ink-3); padding: 8px 0 10px; border-radius: 0; }
.field textarea { min-height: 128px; resize: vertical; line-height: 1.6; border: 1px solid var(--c-rule); border-bottom-color: var(--c-ink-3); padding: 12px; }
.field input:focus, .field textarea:focus { outline: none; border-bottom-color: var(--c-honey); box-shadow: 0 1px 0 var(--c-honey); }
.field textarea::placeholder { color: var(--c-ink-3); }
.err { display: none; margin: 8px 0 0; font-size: 14px; color: var(--c-error); }
.bad > .err, .field.bad .err { display: block; }
.field.bad input { border-bottom-color: var(--c-error); }

/* Keyboard hint */
kbd { display: inline-block; white-space: nowrap; font: 500 10px var(--font); letter-spacing: .08em; opacity: .62; }

/* Rule that draws itself in when its section arrives */
.draw { position: relative; }
.draw::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--c-ink-3); transform-origin: left; }
html.motion .draw::before { transform: scaleX(0); transition: transform 1.2s var(--ease) .1s; }
html.motion .in .draw::before, html.motion .draw.in::before { transform: scaleX(1); }

/* Reveal: sections rise 12px and fade in once */
html.motion .rv { opacity: 0; transform: translateY(12px); transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease); }
html.motion .rv.in { opacity: 1; transform: none; }

/* Founding seal: the monogram from the brand guide inside a typeset ring */
.seal { display: block; width: 112px; height: 112px; color: var(--c-honey); }
.seal svg { display: block; width: 100%; height: 100%; }
.seal .disc { fill: var(--c-navy); }
.seal text { font: 600 9.4px var(--font); letter-spacing: .26em; fill: currentColor; text-transform: uppercase; }

/* Links: a dotted sunflower rule wipes out from the centre under the word on hover, and stays under the current page */
.foot li a, main p a:not(.btn):not(.frame), main li a:not(.btn):not(.frame) { position: relative; }
.signin::after, .foot li a::after, main p a:not(.btn):not(.frame)::after, main li a:not(.btn):not(.frame)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 2px; pointer-events: none;
  background: repeating-linear-gradient(90deg, var(--dl, var(--c-sunflower)) 0 3px, transparent 3px 5.5px);
  clip-path: inset(0 50%); transition: clip-path .4s var(--ease); }
 .signin:focus-visible::after, .foot li a:focus-visible::after{ clip-path: inset(0 0); }@media (hover:hover) and (pointer:fine) and (min-width:820px){.signin:hover::after,
.foot li a:hover::after, main p a:not(.btn):not(.frame):hover::after, main li a:not(.btn):not(.frame):hover::after{ clip-path: inset(0 0); }}
@media (hover:hover) and (pointer:fine) and (min-width:820px){.foot a:hover, main p a:hover, main li a:hover{ text-decoration: none; }}

/* Search and command bar */
.palette { width: min(640px, calc(100% - 32px)); max-height: min(560px, calc(100vh - 120px)); margin: 12vh auto auto; padding: 0; border: 1px solid var(--c-rule); background: var(--c-paper); color: var(--c-ink-2); box-shadow: 0 30px 80px rgba(0, 0, 0, .45); }
.palette::backdrop { background: rgba(5, 8, 12, .6); }
.pal-in { display: flex; align-items: center; gap: 12px; padding: 0 18px; border-bottom: 1px solid var(--c-rule); }
.pal-in input { flex: 1; min-width: 0; padding: 18px 0; border: 0; background: transparent; color: var(--c-ink); font: 300 21px var(--font); }
.pal-in input:focus { outline: none; }
.pal-list { list-style: none; margin: 0; padding: 8px 0; max-height: 380px; overflow: auto; }
.pal-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 16px; padding: 10px 18px; cursor: pointer; border-left: 2px solid transparent; }
.pal-list li[aria-selected="true"] { background: var(--c-panel); border-left-color: var(--c-honey); }
.pal-list .pt { color: var(--c-ink); font-size: 16px; }
.pal-list .ps { grid-column: 1; font-size: 13px; color: var(--c-ink-3); }
.pal-list .pk { grid-row: 1 / span 2; grid-column: 2; align-self: center; font: 500 10px var(--font); letter-spacing: .2em; text-transform: uppercase; color: var(--c-ink-3); }
.pal-empty { padding: 18px; color: var(--c-ink-3); }
.pal-foot { margin: 0; padding: 10px 18px; border-top: 1px solid var(--c-rule); font-size: 12px; color: var(--c-ink-3); max-width: none; }

/* Two-step progress */
.progress { list-style: none; display: flex; gap: 0; margin: 0 0 32px; padding: 0; counter-reset: st; }
.progress li { counter-increment: st; flex: 1; padding: 10px 0 0; border-top: 2px solid var(--c-rule); font: 500 var(--fs-micro) var(--font); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--c-ink-3); }
.progress li + li { margin-left: 8px; }
.progress li::before { content: counter(st, decimal-leading-zero) "  "; color: var(--c-gold); white-space: pre; }
.progress li[aria-current="step"], .progress li.done { border-top-color: var(--c-gold); color: var(--c-ink); }

/* Notice: one line at the foot of the window, such as "Email address copied" */
.toast { position: fixed; z-index: 120; left: 50%; bottom: 24px; width: max-content; max-width: calc(100vw - 32px); margin: 0; padding: 12px 18px; background: var(--c-ink); color: var(--c-paper); border-left: 3px solid var(--c-sunflower); box-shadow: 0 10px 28px rgba(0, 0, 0, .28); font: 500 15px/1.45 var(--font); opacity: 0; transform: translate(-50%, 14px); pointer-events: none; transition: opacity .25s, transform .25s; }
.toast.on { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) { .toast { transition: none; } }

/* BOLLWERK front door: page layout. Hero, headers, sections, footer, contact, system page. */

/* Hero: the photograph fills the first screen. A blurred fill behind, the full portrait on top, the page tone over both. */
.hero { position: relative; isolation: isolate; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; padding-top: 92px; background: var(--hero-bg, var(--tone-deep)); color: var(--hero-ink, var(--c-cream)); overflow: hidden; }
.hero.short { min-height: 64vh; min-height: 64svh; }
.hero.bare { min-height: 0; }
.hero-bg { position: absolute; inset: 0; z-index: -1; }
.hero-bg img { position: absolute; z-index: 0; display: block; filter: grayscale(1) contrast(1.06); }
.hero-bg .amb { inset: -6%; width: 112%; height: 112%; object-fit: cover; filter: grayscale(1) blur(40px) brightness(.55); }
.hero-bg .port { top: 0; right: 6vw; height: 100%; width: auto; -webkit-mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent); mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent); }
.hero-bg::before { content: ""; position: absolute; z-index: 1; inset: 0; background: var(--hero-tint, var(--tone)); mix-blend-mode: var(--hero-blend, color); opacity: var(--hero-tint-o, .85); }
.hero-bg .port { filter: grayscale(1) contrast(1.06) brightness(.82); }
.hero-bg.bleed .port { inset: 0; right: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; -webkit-mask-image: none; mask-image: none; filter: var(--hero-img, grayscale(1) contrast(1.15) brightness(.95)); }
.hero-bg::after { content: ""; position: absolute; z-index: 2; inset: 0; background: var(--hero-veil, none); }
.hero-bg:not(.x)::after { background: var(--hero-veil, linear-gradient(90deg, rgba(5, 8, 12, .86) 0%, rgba(5, 8, 12, .7) 45%, rgba(5, 8, 12, .3) 66%, rgba(5, 8, 12, .1) 82%), linear-gradient(0deg, rgba(5, 8, 12, .7), rgba(5, 8, 12, 0) 40%), linear-gradient(180deg, rgba(5, 8, 12, .55), rgba(5, 8, 12, 0) 18%)); }
@media (max-aspect-ratio: 4/5) {
  .hero-bg .port { right: 0; width: 100%; object-fit: cover; -webkit-mask-image: none; mask-image: none; }
}
.hero-copy { width: 100%; margin-top: auto; padding-top: 64px; padding-bottom: 13vh; }
.hero.short .hero-copy { padding-bottom: 7vh; }
.hero.bare .hero-copy { padding-top: 48px; padding-bottom: 48px; }
.kicker .lc { text-transform: none; letter-spacing: .1em; }   /* the tagline: "a security-driven," lowercase, then RESILIENCE ADVISORY bold */
.kicker b { font-weight: 600; }
.hero .kicker { display: inline-block; padding: 6px 26px 6px 11px; color: var(--kick-ink, #0f2257); background: var(--hero-kick, var(--c-sunflower)); clip-path: var(--pennant); margin: 0 0 22px; }
.hero h1 { color: var(--hero-ink, var(--c-cream)); }
.hero.short h1, .hero.bare h1 { font-size: var(--fs-display-sm); }
.lede { font: 300 var(--fs-lede)/1.6 var(--font); color: var(--c-ink-2); max-width: 31em; margin: 0 0 36px; }
.hero .lede { color: var(--hero-ink-2, rgba(242, 237, 226, .88)); }
.actions { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; }
.cue { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); display: grid; justify-items: center; gap: 8px; color: var(--mast-ink-2, rgba(242, 237, 226, .72)); font: 500 var(--fs-micro) var(--font); letter-spacing: .24em; text-transform: uppercase; }
.cue i { display: block; width: 1px; height: 34px; background: linear-gradient(rgba(242, 237, 226, .8), transparent); }

/* Masthead: sits over the photograph, outside the main landmark */
.mast { position: absolute; z-index: 5; top: 0; left: 0; right: 0; color: var(--mast-ink, var(--c-cream)); border-bottom: 1px solid var(--mast-rule, rgba(242, 237, 226, .16)); }
.mast .wrap { display: flex; align-items: center; gap: 34px; padding-top: 24px; padding-bottom: 22px; }
.wm { display: block; width: 156px; color: var(--mast-ink, var(--c-cream)); }
.wm svg { display: block; width: 100%; height: auto; }
.nav { display: flex; gap: 8px; margin-left: auto; font: 500 13px var(--font); letter-spacing: .02em; }
/* Bolt squares: plain squares at rest. On hover or focus a square grows to the left into a pennant with its label,
   pushing its neighbours along (all three stay visible); the bolt stays left and the tail appears on the right */
.nav .nb { display: block; height: 34px; padding: 0; text-decoration: none; filter: drop-shadow(0 0 .6px rgba(11, 22, 64, .55)); }
.nav .nb .bar { height: 34px; max-width: 34px; display: flex; align-items: center; gap: 10px; padding: 0 8.5px; overflow: hidden; white-space: nowrap; background: var(--nb-bg); color: var(--nb-ink); clip-path: polygon(0 0, 100% 0, 100% 50%, 100% 100%, 0 100%); transition: max-width .45s var(--ease), padding .45s var(--ease), clip-path .35s var(--ease); }
.nav .nb .bolt { flex: none; width: 17px; height: 17px; fill: var(--nb-bolt); }
.nav .nb .lbl { opacity: 0; transition: opacity .25s var(--ease); }
 .nav .nb:focus-visible .bar{ max-width: 190px; padding: 0 22px 0 10px; clip-path: var(--pennant); }@media (hover:hover) and (pointer:fine) and (min-width:820px){.nav .nb:hover .bar{ max-width: 190px; padding: 0 22px 0 10px; clip-path: var(--pennant); }}
 .nav .nb:focus-visible .lbl{ opacity: 1; transition-delay: .12s; }@media (hover:hover) and (pointer:fine) and (min-width:820px){.nav .nb:hover .lbl{ opacity: 1; transition-delay: .12s; }}
 .nav .nb:focus-visible{ text-decoration: none; }@media (hover:hover) and (pointer:fine) and (min-width:820px){.nav .nb:hover{ text-decoration: none; }}
.nb-red { --nb-bg: #b3202a; --nb-ink: #fff8ef; --nb-bolt: #f2b51d; }
.nb-white { --nb-bg: #ffffff; --nb-ink: #0f2257; --nb-bolt: #172d88; }
.nb-blue { --nb-bg: #172d88; --nb-ink: #f7f2e6; --nb-bolt: #f2b51d; }
.tools { display: flex; align-items: center; gap: 18px; }
.find, .mode { --fx: var(--c-honey); display: inline-flex; align-items: center; gap: 8px; font: 500 var(--fs-micro) var(--font); letter-spacing: .2em; text-transform: uppercase; color: var(--mast-ink-2, rgba(242, 237, 226, .8)); background: none; border: 0; padding: 9px 12px; cursor: pointer; }
@media (hover:hover) and (pointer:fine) and (min-width:820px){.find:hover, .mode:hover{ color: var(--fx); }}
.find kbd { letter-spacing: .04em; }
/* Light and dark: a hand-drawn sun or moon, in the header's ink */
.mode { padding: 7px 10px; }
.mode svg { display: none; width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .45s var(--ease); }
.mode .cr { stroke-width: 1.1; }
.mode[data-next="light"] .i-sun, .mode[data-next="dark"] .i-moon { display: block; }
 .mode:focus-visible svg{ transform: rotate(-18deg); }@media (hover:hover) and (pointer:fine) and (min-width:820px){.mode:hover svg{ transform: rotate(-18deg); }}
.mode::before { left: 6px; right: 6px; }
/* Replay: a hand-drawn turning arrow beside the sun and moon, on the landing page only */
.replay-btn { display: inline-flex; align-items: center; color: var(--mast-ink-2, rgba(242, 237, 226, .8)); background: none; border: 0; padding: 7px 8px; cursor: pointer; }
.replay-btn[hidden] { display: none; }
.replay-btn svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .5s var(--ease); }
 .replay-btn:focus-visible svg{ transform: rotate(-50deg); }@media (hover:hover) and (pointer:fine) and (min-width:820px){.replay-btn:hover svg{ transform: rotate(-50deg); }}
.signin { position: relative; font: 500 var(--fs-micro) var(--font); letter-spacing: .2em; text-transform: uppercase; color: var(--mast-ink-2, rgba(242, 237, 226, .76)); }
@media (hover:hover) and (pointer:fine) and (min-width:820px){.signin:hover{ color: var(--mast-ink, var(--c-cream)); text-decoration: none; }}
.signin.member { color: var(--c-honey); }

/* Compact header: slides in when the visitor scrolls back up past the hero */
.compact { position: fixed; z-index: 90; top: 0; left: 0; right: 0; background: var(--c-band); color: var(--c-on-band); border-bottom: 1px solid rgba(242, 237, 226, .1); transform: translateY(-100%); transition: transform var(--dur) var(--ease); }
.compact.show { transform: none; }
.compact .wrap { display: flex; align-items: center; gap: 28px; min-height: 60px; }
.compact .wm { width: 112px; }
.compact .nav { gap: 8px; }

/* Facts row */
.facts { margin: 0; border-bottom: 1px solid var(--c-rule); background: var(--grain), var(--c-panel); }
.facts .wrap { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.facts .wrap > div { padding: 24px 20px 24px 0; }
.facts .wrap > div + div { padding-left: 24px; border-left: 1px solid var(--c-rule); }
.facts dt { font: 500 var(--fs-micro) var(--font); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--c-ink-3); margin: 0 0 6px; }
.facts dd { margin: 0; font: 300 21px/1.3 var(--font); color: var(--c-ink); font-variant-numeric: tabular-nums lining-nums; }

/* Sections with a left rail */
.part .wrap { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 48px; padding-top: var(--s-8); padding-bottom: var(--s-8); border-top: 1px solid var(--c-rule); }
.facts + .part .wrap, .hero + .part .wrap { border-top: 0; }
.rail { padding-top: 10px; }
.rail .num { display: block; font: 300 15px var(--font); color: var(--c-second); margin-bottom: 6px; letter-spacing: .1em; font-variant-numeric: tabular-nums lining-nums; }
.rail .name { color: var(--c-ink); }
.cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 30px; }
.cols > div { padding: 22px 24px 4px 0; }
.cols > div + div { padding-left: 24px; border-left: 1px solid var(--c-rule); }
.cols p { font-size: 16px; }
.list { list-style: none; margin: 4px 0 18px; padding: 0; }
.list li { position: relative; padding: 8px 0 8px 16px; border-top: 1px solid var(--c-rule); font-size: var(--fs-small); line-height: 1.5; }
.list li::before { content: ""; position: absolute; left: 0; top: 16px; width: 6px; height: 1px; background: var(--c-second); }
.method { list-style: none; margin: 30px 0 0; padding: 0; counter-reset: m; }
.method li { counter-increment: m; display: grid; grid-template-columns: 64px minmax(0, 1fr) minmax(0, 2fr); gap: 24px; padding: 22px 0; border-bottom: 1px solid var(--c-rule); align-items: baseline; }
.method li::before { content: counter(m, decimal-leading-zero); font: 300 15px var(--font); letter-spacing: .1em; color: var(--c-second); font-variant-numeric: tabular-nums lining-nums; }
.method h3 { margin: 0; }
.method p { margin: 0; font-size: 16px; }
.pledge { font: 300 30px/1.4 var(--font); letter-spacing: -.015em; color: var(--c-ink); max-width: 26em; margin: 0 0 16px; }

/* Closing band */
.close { background: var(--c-band); color: var(--c-on-band); }
.close .wrap { display: flex; flex-wrap: wrap; gap: 24px 48px; align-items: center; justify-content: space-between; padding-top: 64px; padding-bottom: 64px; }
.close p { margin: 0; font: 300 38px/1.15 var(--font); letter-spacing: -.02em; color: var(--c-on-band); }

/* Footer */
.foot { border-top: 1px solid var(--c-rule); }
/* The sign-off: the wordmark large, in the page's primary, with the line in sunflower */
.signoff { background: var(--c-band); color: var(--c-on-band); }
.signoff .so { max-width: var(--measure); margin: 0 auto; padding: 64px var(--gutter) 44px; display: grid; gap: 18px; }
.signoff .big-wm { display: block; color: inherit; }
.signoff .big-wm svg { display: block; width: 100%; height: auto; }
.signoff p { margin: 0; font: 500 var(--fs-label) var(--font); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--c-sunflower); }
.landing .signoff { background: var(--c-blueprint-deep); color: var(--c-cream); }
.foot .wrap { display: grid; grid-template-columns: auto minmax(0, 2fr) repeat(2, minmax(0, 1fr)); gap: 36px; padding-top: 48px; padding-bottom: 28px; font-size: var(--fs-small); color: var(--c-ink-3); }
.foot .wm { width: 132px; margin-bottom: 14px; color: var(--c-ink); }
.foot h2 { font: 500 var(--fs-micro) var(--font); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--c-ink); margin: 4px 0 12px; }
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li { margin: 0 0 6px; }
.foot a { color: var(--c-ink-2); }
.foot p { margin: 0 0 6px; }
.foot .line { font: 300 19px var(--font); color: var(--c-ink); }
.foot .base { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; padding-top: 20px; border-top: 1px solid var(--c-rule); font-size: 13px; }

/* Contact */
.split .wrap { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 72px; padding-top: 64px; padding-bottom: 80px; }
.row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.trap { position: absolute; left: -9999px; }
.sent { display: none; }
.is-sent .sent { display: block; }
.is-sent form { display: none; }
html.js .step[hidden] { display: none; }
.step-actions { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; margin-top: 8px; }
.aside { align-self: start; display: grid; gap: 36px; }
.next-steps { list-style: none; margin: 0; padding: 0; }
.next-steps li { padding: 16px 0; border-bottom: 1px solid var(--c-rule); font-size: var(--fs-small); }
.next-steps b { display: block; font: 500 16px var(--font); color: var(--c-ink); }
.call { padding: 24px; background: var(--grain), var(--c-panel); border: 1px solid var(--c-rule); }
.call h2 { font-size: 22px; margin-bottom: 8px; }
.call p { font-size: var(--fs-small); }

/* System page */
.sys .wrap { padding-top: 48px; padding-bottom: 64px; }
.sys section { padding: 36px 0; border-top: 1px solid var(--c-rule); }
.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.swatch { border: 1px solid var(--c-rule); }
.swatch i { display: block; height: 64px; }
.swatch span { display: block; padding: 8px 10px; font-size: 12px; color: var(--c-ink-2); font-variant-numeric: tabular-nums; }
.specimen { display: grid; gap: 14px; }
.specimen > div { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 16px; align-items: baseline; }
.specimen small { font-size: 12px; color: var(--c-ink-3); }
.demo { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; }
.demo.on-dark { padding: 28px; background: var(--c-navy); }

@media (max-width: 900px) {
  .split .wrap { grid-template-columns: 1fr; gap: 44px; padding-top: 44px; padding-bottom: 52px; }
  .part .wrap { grid-template-columns: 1fr; gap: 14px; padding-top: 48px; padding-bottom: 48px; }
  .rail { padding-top: 0; }
  .rail .num { display: inline; margin-right: 12px; }
  .facts .wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facts .wrap > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .facts .wrap > div:nth-child(n+3) { border-top: 1px solid var(--c-rule); }
  .cols { grid-template-columns: 1fr; }
  .cols > div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--c-rule); }
  .method li { grid-template-columns: 44px minmax(0, 1fr); gap: 6px 14px; }
  .method li p { grid-column: 2; }
  .foot .wrap { grid-template-columns: 1fr 1fr; }
  .foot .wrap > div:nth-child(2) { grid-column: 2; }
  .compact .nav { display: none; }
}
@media (max-width: 640px) {
  .mast .wrap { flex-wrap: wrap; gap: 12px 14px; padding-top: 16px; padding-bottom: 14px; }
  .hero { padding-top: 116px; }
  .wm { width: 124px; }
  .tools { margin-left: auto; gap: 10px; }
  .signin { display: none; }
  .find kbd { display: none; }
  .nav { order: 3; margin: 0 0 0 auto; gap: 8px; }
  .cue { display: none; }
  .row2 { grid-template-columns: 1fr; }
  .pledge { font-size: 24px; }
  .close p { font-size: 30px; }
  .compact .wrap { gap: 12px; }
  .compact .find { margin-left: auto; }
  .foot .wrap { grid-template-columns: 1fr; }
  .foot .wrap > div:nth-child(2) { grid-column: auto; }
  .specimen > div { grid-template-columns: 1fr; gap: 4px; }
}

@media (prefers-reduced-motion: no-preference) {
  .hero-copy { animation: rise 1.1s var(--ease) both; }
  .cue i { animation: drip 2.2s ease-in-out infinite; transform-origin: top; }
  @keyframes rise { from { opacity: 0; transform: translateY(14px); } }
  @keyframes drip { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }
}

/* A finger needs about 44px: footer links and the wordmark get room to be hit on a touch screen */
@media (pointer: coarse) {
  .foot li { margin: 0; }
  .foot li a, .foot .base a { display: inline-block; padding: 12px 0; }
  .mast .wm, .foot .wm { padding: 12px 0; box-sizing: content-box; }
  .kbd-hint, .find kbd { display: none; }
}

/* Phase 3: with GSAP running the hero copy is held until it rises in; without it, the original CSS rise plays. */
html.motion:not(.no-gs) .hero-copy { animation: none; }
html.motion:not(.no-gs) .hero-copy > * { opacity: 0; }
.w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .14em; margin-bottom: -.14em; }
.wi { display: inline-block; will-change: transform; }

/* Phase 5: the drafting grid that shows round the pointer on a page's opening photograph (added by motion.js, mouse only) */
.hero-grid {
  position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0;
  background-image: linear-gradient(rgba(255, 255, 255, .3) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .3) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(circle 230px at calc(var(--mx, -999) * 1px) calc(var(--my, -999) * 1px), #000, transparent);
  mask-image: radial-gradient(circle 230px at calc(var(--mx, -999) * 1px) calc(var(--my, -999) * 1px), #000, transparent);
}

/* BOLLWERK front door: the landing page. A drafting sheet in cream and blueprint.
   Light mode is blueprint lines on cream; dark mode is the classic blueprint, cream lines on blue. */

.blueprint { --bp-ground: #faf6ea; --bp-line: #172d88; --bp-soft: rgba(23, 45, 136, .5); --bp-faint: rgba(23, 45, 136, .07); --bp-hot: #8a5d0a; }
:root[data-theme="dark"] .blueprint { --bp-ground: #0f2257; --bp-line: #e8e2d0; --bp-soft: rgba(232, 226, 208, .5); --bp-faint: rgba(232, 226, 208, .06); --bp-hot: #e4a723; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .blueprint { --bp-ground: #0f2257; --bp-line: #e8e2d0; --bp-soft: rgba(232, 226, 208, .5); --bp-faint: rgba(232, 226, 208, .06); --bp-hot: #e4a723; } }

/* The masthead sits on the sheet, in line colour */
.landing .mast { color: var(--bp-line); border-bottom-color: var(--bp-faint); }
.landing .mast .wm, .landing .mast .signin, .landing .mast .find, .landing .mast .mode { color: var(--bp-line); }
.landing .mast .nav a[aria-current="page"] { box-shadow: none; }
.landing .find, .landing .mode { --fx: var(--bp-line); }
.landing .mast .replay-btn { color: var(--bp-line); }
.landing { --dl: var(--bp-hot); }
body.landing .mast { --bp-line: #172d88; --bp-faint: rgba(23, 45, 136, .12); }
:root[data-theme="dark"] body.landing .mast { --bp-line: #e8e2d0; --bp-faint: rgba(232, 226, 208, .14); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body.landing .mast { --bp-line: #e8e2d0; --bp-faint: rgba(232, 226, 208, .14); } }

/* The sheet */
.blueprint { position: relative; height: 100vh; height: 100svh; min-height: 640px; overflow: hidden; color: var(--bp-line); isolation: isolate;
  background:
    linear-gradient(var(--bp-faint) 1px, transparent 1px) 0 0 / 120px 120px,
    linear-gradient(90deg, var(--bp-faint) 1px, transparent 1px) 0 0 / 120px 120px,
    linear-gradient(var(--bp-faint) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, var(--bp-faint) 1px, transparent 1px) 0 0 / 24px 24px,
    var(--bp-ground); }
.sheet { position: absolute; inset: 14px; border: 1px solid var(--bp-soft); pointer-events: none; z-index: 1; }
.tk { position: absolute; width: 18px; height: 18px; border: 0 solid var(--bp-line); }
.tk.tl { left: -1px; top: -1px; border-width: 2px 0 0 2px; } .tk.tr { right: -1px; top: -1px; border-width: 2px 2px 0 0; }
.tk.bl { left: -1px; bottom: -1px; border-width: 0 0 2px 2px; } .tk.br { right: -1px; bottom: -1px; border-width: 0 2px 2px 0; }

/* The plan: flat while it is drawn, then tilted back into perspective under the model */
.plan-wrap { position: absolute; inset: 0; perspective: 1500px; perspective-origin: 50% 40%; }
.plan { position: absolute; inset: 0; width: 100%; height: 100%; transform-origin: 50% 52%; transition: transform 1.8s var(--ease), opacity 1.8s var(--ease); }
.tilted .plan { transform: rotateX(56deg) scale(1.32) translateY(4%); opacity: .82; }
.plan path, .plan circle, .plan rect { fill: none; stroke: var(--bp-line); vector-effect: non-scaling-stroke; }
.plan .min { stroke-width: .6; opacity: .42; }
.plan .maj { stroke-width: 1.15; opacity: .7; }
.plan .elev { font: 500 9px var(--font); letter-spacing: .14em; fill: var(--bp-line); opacity: .85; }
.plan .ring { stroke-width: 1.1; opacity: .8; }
.plan .ring-tag circle { fill: var(--bp-line); stroke: none; }
.plan .ring-tag text { font: 600 10px var(--font); letter-spacing: .2em; fill: var(--bp-line); }
.plan .cross { stroke-width: 1; }
.plan .road { stroke-width: 9; opacity: .62; }
.plan .road-in { stroke: var(--bp-ground); stroke-width: 6.6; }
.plan .drive { stroke-width: 1.4; opacity: .7; }
.plan .creek { stroke-width: 1.3; opacity: .55; }
.plan .tree { stroke-width: .7; opacity: .5; }
.plan .bldg rect { stroke-width: .9; opacity: .7; }
.plan .bldg path { stroke-width: .5; opacity: .45; }

/* Where the 3D model takes over, the plan zooms in and fades as the city draws in beneath it */
.plan { will-change: transform, opacity; }
.deep .plan { transform: scale(1.25); opacity: 0; transition: transform 1.2s var(--ease), opacity .9s var(--ease); }

/* The intro: each layer drops from the top and draws itself, in order */
.intro .ly { animation: drop 1.1s var(--ease) both; animation-delay: calc(var(--i) * .85s + .25s); }
.intro .ly [pathLength] { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1.7s var(--ease) forwards; animation-delay: calc(var(--i) * .85s + .3s); }
@keyframes drop { from { opacity: 0; transform: translateY(-46px); } }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* Copy, title block, north arrow, hint */
.bp-copy { position: absolute; z-index: 3; left: max(40px, 4vw); top: 112px; max-width: 30em; pointer-events: none; }
.bp-copy .kicker { color: var(--bp-line); opacity: .8; margin: 0 0 14px; }
.bp-copy h1 { color: var(--bp-line); font-size: clamp(38px, 5vw, 66px); font-weight: 400; margin: 0; }
.bp-copy .kicker .lc { text-transform: none; letter-spacing: .1em; }
.bp-copy .kicker b { font-weight: 600; }
/* One line on who the firm serves, and the next step, kept small so the drawing stays the signature */
.bp-copy .bp-line { color: var(--bp-line); opacity: .82; font: 400 16px/1.5 var(--font); max-width: 34em; margin: 14px 0 18px; }
.bp-copy .bp-cta { pointer-events: auto; }
.intro .bp-copy { animation: fadein 1.2s var(--ease) .1s both; }
@keyframes fadein { from { opacity: 0; transform: translateY(8px); } }
/* The title block (legend) is inverted: the sheet's line colour as its ground, the sheet's ground as its ink */
.titleblock { --tb-bg: var(--bp-line); --tb-ink: var(--bp-ground); --tb-rule: color-mix(in srgb, var(--bp-ground) 22%, transparent);
  position: absolute; z-index: 3; right: 30px; bottom: 30px; width: 300px; border: 1px solid var(--tb-bg); background: var(--tb-bg); color: var(--tb-ink); font: 500 9px/1.4 var(--font); letter-spacing: .16em; text-transform: uppercase; }
.titleblock > div { display: grid; grid-template-columns: 74px 1fr; gap: 8px; align-items: center; padding: 6px 10px; border-top: 1px solid var(--tb-rule); }
.titleblock > div:first-child { border-top: 0; }
.titleblock span { opacity: .7; }
.titleblock b { font-weight: 600; letter-spacing: .12em; }
.tb-firm { grid-template-columns: auto 1fr !important; padding: 9px 10px !important; }
.tb-wm { display: block; width: 92px; opacity: 1 !important; }
.tb-wm svg { display: block; width: 100%; height: auto; }
.tb-scale svg { width: 100%; height: 18px; overflow: visible; }
.rg { display: none; gap: 4px; }
.world .tb-scale svg { display: none; }
.world .rg { display: flex; }
.rg button { flex: 1; font: 600 9px var(--font); letter-spacing: .16em; text-transform: uppercase; color: var(--tb-ink); background: none; border: 1px solid var(--tb-rule); padding: 4px 0; cursor: pointer; }
@media (hover:hover) and (pointer:fine) and (min-width:820px){.rg button:hover{ border-color: var(--tb-ink); }}
.rg button[aria-pressed="true"] { color: var(--tb-bg); background: var(--tb-ink); border-color: var(--tb-ink); }
.tb-scale path { fill: none; stroke: var(--tb-ink); stroke-width: 1; }
.tb-scale text { font: 500 7px var(--font); fill: var(--tb-ink); letter-spacing: .1em; }
.north { position: absolute; z-index: 3; right: 346px; bottom: 34px; width: 30px; }   /* the lightning bolt is the compass: its tip points north, the N sits above it */
.north path { fill: var(--bp-line); stroke: none; }
.north text { font: 600 9px var(--font); fill: var(--bp-line); text-anchor: middle; }
.tb-credit a, .credit a { color: inherit; }
.credit { display: none; }
.hint { position: absolute; z-index: 3; left: 50%; bottom: 30px; transform: translateX(-50%); margin: 0; font: 500 10px var(--font); letter-spacing: .24em; text-transform: uppercase; opacity: 0; transition: opacity .8s; white-space: nowrap; }
.ready .hint { opacity: .7; }
.lite .hint { display: none; }
button.skip { position: absolute; top: auto; z-index: 4; left: 30px; bottom: 30px; font: 500 10px var(--font); letter-spacing: .24em; text-transform: uppercase; color: var(--bp-line); background: none; border: 0; padding: 8px 10px; cursor: pointer; }
.done button.skip { display: none; }

/* WELCOME: slides in, holds with a quick wobble, slides out; then the opening begins */
.welcome { position: absolute; inset: 0; z-index: 6; display: grid; place-items: center; pointer-events: none; overflow: hidden; visibility: hidden; }
.welcoming .welcome { visibility: visible; }
.welcome span { display: flex; font: 600 clamp(64px, 14vw, 230px)/1 var(--font); letter-spacing: .02em; color: var(--bp-line); will-change: transform; }
.welcoming .welcome span { animation: welcome-slide 2.3s cubic-bezier(.7, 0, .3, 1) both; }
.welcome i { display: inline-block; font-style: normal; }
.welcoming .welcome i { animation: welcome-wobble .3s ease-in-out 3 both; animation-delay: calc(.8s + var(--n) * .035s); }
@keyframes welcome-slide { 0% { transform: translateX(115vw); } 36%, 66% { transform: translateX(0); } 100% { transform: translateX(-115vw); } }
@keyframes welcome-wobble { 0%, 100% { transform: rotate(0) translateY(0); } 30% { transform: rotate(-7deg) translateY(-5%); } 70% { transform: rotate(6deg) translateY(4%); } }
.plan-wrap, .bp-copy { transition: opacity .6s var(--ease); }
.welcoming .plan-wrap, .welcoming .bp-copy { opacity: 0; }

/* The model and its overlays */
.model { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; opacity: 0; transition: opacity .6s; touch-action: pan-y; }
.gl .model { opacity: 1; }
/* On wide screens the model fades under the headline, so the copy always reads */
@media (min-width: 761px) { .world .model, .world .elevs { -webkit-mask-image: radial-gradient(ellipse 34% 30% at 20% 17%, rgba(0,0,0,.12) 30%, #000 100%); mask-image: radial-gradient(ellipse 34% 30% at 20% 17%, rgba(0,0,0,.12) 30%, #000 100%); } }
.elevs { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
/* Room labels inside the opened building */
.elevs .room { font: 600 8.5px var(--font); letter-spacing: .2em; text-transform: uppercase; color: var(--bp-ground); background: var(--bp-line); padding: 3px 7px; }
.elevs .rt { font: 600 10px var(--font); letter-spacing: .24em; color: var(--bp-hot); border: 1px solid var(--bp-hot); padding: 2px 6px; }
/* Response times: pop in where each route arrives */
.elevs .rsp { opacity: 1; background: none; padding: 0; z-index: 1; }
.rsp i { display: grid; gap: 1px; padding: 6px 24px 7px 10px; clip-path: var(--pennant); font-style: normal; color: #fff; transform: scale(.6); opacity: 0; transition: transform .45s cubic-bezier(.2, 1.4, .4, 1), opacity .3s; box-shadow: 0 8px 20px -10px rgba(0, 0, 0, .6); }
.rsp.on i { transform: scale(1); opacity: 1; }
.rsp em { font: 600 8px var(--font); font-style: normal; letter-spacing: .22em; text-transform: uppercase; opacity: .9; }
.rsp b { font: 600 17px/1.1 var(--font); letter-spacing: .01em; }
.rsp.med i { background: #1f8f4e; } .rsp.fire i { background: #c8102e; } .rsp.law i { background: #2450c8; }
.rsp.egress i { background: #c98a0b; } .rsp.evac i { background: #0b1e2b; color: #f2ede2; box-shadow: 0 0 0 1px #f2ede2 inset, 0 8px 20px -10px rgba(0, 0, 0, .6); }
.rsp.up i { translate: -50% -130%; } .rsp.left i { translate: calc(-100% - 10px) -120%; } .rsp.right i { translate: 10px -120%; }
/* The map marker over the building */
.elevs .pin { opacity: 0; background: none; padding: 0; width: 0; height: 0; z-index: 1; }
.elevs .pin > span { position: absolute; left: 0; top: auto; bottom: 0; opacity: 1; background: none; padding: 0; animation: bob 3.2s ease-in-out infinite; }
.pin i { position: absolute; left: -.75px; bottom: 0; width: 1.5px; height: 52px; background: var(--bp-hot); }
.pin i::after { content: ""; position: absolute; left: 50%; bottom: -4px; width: 8px; height: 8px; border-radius: 50%; background: var(--bp-hot); transform: translateX(-50%); }
.pin b { position: absolute; left: 0; bottom: 30px; padding: 5px 18px 5px 9px; font: 600 10px var(--font); letter-spacing: .26em; text-transform: uppercase; color: var(--bp-ground); background: var(--bp-hot); clip-path: polygon(0 0, 100% 0, 86% 50%, 100% 100%, 0 100%); white-space: nowrap; }
@keyframes bob { 50% { transform: translateY(-5px); } }
@media (prefers-reduced-motion: reduce) { .pin > span { animation: none; } }
.elevs span { position: absolute; left: 0; top: 0; font: 500 8px var(--font); letter-spacing: .16em; color: var(--bp-line); background: var(--bp-ground); padding: 0 3px; white-space: nowrap; opacity: 0; will-change: transform; }
.leaders { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; pointer-events: none; }
.leaders path { fill: none; stroke: var(--bp-line); stroke-width: 1; }
.leaders circle { fill: var(--bp-ground); stroke: var(--bp-line); stroke-width: 1.2; }
.callouts { position: absolute; z-index: 4; inset: auto 0 96px; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px; }
/* Link tabs: a solid drafting label with a gold rule, readable over any line work */
/* Link tabs: solid pennants, each in its page's colour; Member sign in is black and honey */
.co { --co-bg: #172d88; --co-ink: #f3eee1; --co-num: #f2b51d; display: inline-flex; gap: 8px; align-items: center; padding: 7px 24px 7px 10px; color: var(--co-ink); background: var(--co-bg); clip-path: var(--pennant); text-decoration: none; transition: filter .2s, padding .25s var(--ease); }
.co[data-part="walls"] { --co-bg: #172d88; --co-ink: #f3eee1; --co-num: #f2b51d; }
.co[data-part="lights"] { --co-bg: #b3202a; --co-ink: #fff4ec; --co-num: #f2b51d; }
.co[data-part="gate"] { --co-bg: #ffffff; --co-ink: #0f2257; --co-num: #b3202a; }
.co[data-part="door"] { --co-bg: #0b0c0e; --co-ink: #e4a723; --co-num: #e4a723; }
 .co:focus-visible{ text-decoration: none; filter: brightness(1.12); padding-right: 30px; }@media (hover:hover) and (pointer:fine) and (min-width:820px){.co:hover{ text-decoration: none; filter: brightness(1.12); padding-right: 30px; }}
.gl .callouts { filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .3)); }
/* The portal indicator: the lightning bolt that marks a way into the site */
.co .portal { flex: none; width: 14px; height: 14px; fill: var(--co-num); }
.co span { font: 500 13px var(--font); letter-spacing: .01em; white-space: nowrap; }
.co span::after { content: " \2192"; }
.gl .callouts { inset: 0; display: block; pointer-events: none; }
.gl .co { position: absolute; left: 0; top: 0; transition: opacity .35s, border-color .2s, box-shadow .2s; will-change: transform; }
html.js .blueprint:not(.lite) .co { opacity: 0; }
html.js .blueprint.gl.open .co { opacity: 1; pointer-events: auto; }
.gl .co.on { filter: brightness(1.15); padding-right: 30px; }
/* The veil that closes in the next page's tone as the camera pulls in */
.veil { position: absolute; inset: 0; z-index: 8; opacity: 0; pointer-events: none; transition: opacity .55s ease-in .5s; }
.diving .veil { opacity: 1; }
.diving .callouts, .diving .leaders, .diving .elevs { opacity: 0 !important; transition: opacity .3s; }
.tip { position: absolute; z-index: 5; left: 0; top: 0; max-width: 250px; padding: 10px 12px; background: var(--bp-ground); border: 1px solid var(--bp-soft); font: 400 13px/1.45 var(--font); color: var(--bp-line); pointer-events: none; }
.tip b { display: block; font: 600 9px var(--font); letter-spacing: .24em; text-transform: uppercase; margin-bottom: 4px; }

/* Still fallback: older devices, reduced motion, data saver */
.fallback { position: absolute; z-index: 2; left: 50%; top: 54%; width: min(520px, 72vw); margin: 0; transform: translate(-50%, -50%); }
.gl .fallback, html.js .blueprint:not(.lite) .fallback { display: none; }
.elevation { display: block; width: 100%; height: auto; }
.elevation path { fill: none; stroke: var(--bp-line); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.elevation .flute, .elevation .dim { stroke-width: .6; opacity: .6; }
.elevation .ground { stroke-width: 1.6; }
.elevation path:nth-last-of-type(2) { fill: var(--bp-ground); }
.elevation .dimt { font: 500 7px var(--font); letter-spacing: .24em; fill: var(--bp-line); text-anchor: middle; opacity: .7; }
.lite .tilted .plan, .lite.tilted .plan { opacity: .55; }

@media (max-width: 760px) {
  .titleblock, .north { display: none; }
  .bp-copy { top: 128px; left: 24px; right: 24px; }
  .hint { bottom: 22px; }
  button.skip { left: 18px; bottom: 16px; }
  .gl .co span { font-size: 14px; }
  .callouts { bottom: 64px; }
  /* Phones: the four links sit in a two-by-two panel at the foot of the sheet once the building lands */
  .gl .callouts { inset: auto 14px 26px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; pointer-events: none; }
  .gl .co { position: static; transform: none !important; padding: 8px 24px 8px 10px; }
  html.js .blueprint.gl .co { opacity: 0; pointer-events: none; transition: opacity .3s; }
  html.js .blueprint.gl.open .co { opacity: 1; pointer-events: auto; }
  .gl .co span { font-size: 12px; }
  .open .hint { opacity: 0; }
  .world .credit { display: block; position: absolute; z-index: 3; right: 18px; bottom: 8px; margin: 0; font: 500 8px var(--font); letter-spacing: .08em; opacity: .6; }
  /* Swipes on the drawing turn it; swipes on the headline still scroll the page */
  .world .model { touch-action: none; }
  .world .bp-copy { pointer-events: auto; touch-action: pan-y; padding-bottom: 60px; }
  /* The model fades out under the headline, so the copy always reads */
  .world .model, .world .elevs { -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.08) 0, rgba(0,0,0,.08) 150px, #000 300px); mask-image: linear-gradient(180deg, rgba(0,0,0,.08) 0, rgba(0,0,0,.08) 150px, #000 300px); }
}
@media (prefers-reduced-motion: reduce) {
  .plan { transition: none; }
}

/* Load paths: the interior page layout (What we do, Who we are, Contact), from Grok's selected v4 design.
   Each page keeps its own colourway as a whole-page ground: blueprint navy, cherry burgundy, white.
   The page's own drawing sits beside the headline (never behind text), one sunflower route (assets/js/route.js)
   runs through the copy in reading order, and one full-width sheet is the single contrast cut.
   Home is untouched: nothing here applies without body.lp. */

/* ---- Grounds and tokens. Blueprint and cherry keep their deep ground in both themes; white follows the theme. */
:root body.lp.pw-blueprint, :root[data-theme] body.lp.pw-blueprint {
  --lp-ground: #0b1640;
  --lp-field: radial-gradient(70% 40% at 78% 8%, rgba(32, 56, 170, .55), transparent 70%), radial-gradient(60% 30% at 20% 55%, rgba(23, 45, 136, .35), transparent 70%), linear-gradient(180deg, #081335 0%, #0b1640 22%, #0c1a4c 60%, #081335 100%);
  --c-paper: #0b1640; --c-panel: #0f1e52; --c-ink: #f3eee1; --c-ink-2: #e3e0d8; --c-ink-3: #9aa5d0; --c-rule: rgba(243, 238, 225, .16);
  --c-gold: #f2b51d; --c-link: #ffffff; --c-second: #f2b51d; --c-band: transparent; --c-on-band: #f3eee1;
  --lp-tag: #9db3ff; --lp-route: #f2b51d; --lp-line: rgba(243, 238, 225, .2); --lp-grid: rgba(243, 238, 225, .035); --lp-tick: rgba(243, 238, 225, .22); --lp-edge: rgba(243, 238, 225, .1);
  --lp-img: grayscale(1) contrast(1.3) brightness(1.08); --lp-tint: #8ca5ff; --lp-img-o: .92;
  --lp-cut-bg: #f3eee1; --lp-cut-ink: #0f2257; --lp-cut-ink-2: #2a3c7e; --lp-cut-route: #172d88;
  --hero-bg: transparent; --hero-ink: #f3eee1; --hero-ink-2: rgba(243, 238, 225, .86);
  --mast-ink: #f2ede2; --mast-ink-2: rgba(242, 237, 226, .8); --mast-rule: rgba(242, 237, 226, .16);
  color-scheme: dark;
}
:root body.lp.pw-cherry, :root[data-theme] body.lp.pw-cherry {
  --lp-ground: #2c0709;
  --lp-field: radial-gradient(60% 40% at 85% 10%, rgba(179, 32, 42, .4), transparent 70%), radial-gradient(50% 30% at 15% 60%, rgba(110, 17, 24, .45), transparent 70%), linear-gradient(90deg, #260609 0%, #3a0b10 55%, #561019 100%);
  --c-paper: #2c0709; --c-panel: #3a0b10; --c-ink: #fff4ec; --c-ink-2: #f6e3dc; --c-ink-3: #d6a7a0; --c-rule: rgba(255, 244, 236, .16);
  --c-gold: #f2b51d; --c-link: #ffffff; --c-second: #f2b51d; --c-band: transparent; --c-on-band: #fff4ec;
  --lp-tag: #f4b6ad; --lp-route: #f2b51d; --lp-line: rgba(255, 244, 236, .2); --lp-grid: rgba(255, 244, 236, .035); --lp-tick: rgba(255, 244, 236, .22); --lp-edge: rgba(255, 244, 236, .1);
  --lp-img: grayscale(1) invert(1) contrast(1.25) brightness(.95); --lp-tint: #b3202a; --lp-img-o: .5;
  --lp-cut-bg: #fff8ef; --lp-cut-ink: #2b0a0e; --lp-cut-ink-2: #5b2328; --lp-cut-route: #9e1b24;
  --hero-bg: transparent; --hero-ink: #fff8ef; --hero-ink-2: rgba(255, 244, 236, .88);
  --mast-ink: #fff8ef; --mast-ink-2: rgba(255, 248, 239, .8); --mast-rule: rgba(255, 248, 239, .16);
  color-scheme: dark;
}
body.lp.pw-white {
  --lp-ground: #ffffff;
  --lp-field: radial-gradient(60% 30% at 85% 6%, rgba(23, 45, 136, .06), transparent 70%), linear-gradient(180deg, #ffffff 0%, #f6f7fb 100%);
  --c-rule: rgba(23, 45, 136, .14);
  --lp-tag: #172d88; --lp-route: #e0a10e; --lp-line: rgba(23, 45, 136, .16); --lp-grid: rgba(23, 45, 136, .035); --lp-tick: rgba(23, 45, 136, .22); --lp-edge: rgba(23, 45, 136, .1);
  --lp-img: grayscale(1) invert(1) contrast(1.6) brightness(1.12); --lp-tint: #dfe5fb; --lp-img-o: .5;
  --lp-cut-bg: #172d88; --lp-cut-ink: #ffffff; --lp-cut-ink-2: #dfe5fb; --lp-cut-route: #f2b51d;
  --hero-bg: transparent;
}
:root[data-theme="dark"] body.lp.pw-white {
  --lp-ground: #0e1117; --lp-field: linear-gradient(180deg, #0e1117, #0a0c11);
  --lp-tag: #c9d3f5; --lp-route: #f2b51d; --lp-line: rgba(255, 255, 255, .16); --lp-grid: rgba(255, 255, 255, .03); --lp-tick: rgba(255, 255, 255, .2); --lp-edge: rgba(255, 255, 255, .1);
  --lp-img: grayscale(1) contrast(1.2); --lp-tint: #8ca5ff; --lp-img-o: .7;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body.lp.pw-white {
    --lp-ground: #0e1117; --lp-field: linear-gradient(180deg, #0e1117, #0a0c11);
    --lp-tag: #c9d3f5; --lp-route: #f2b51d; --lp-line: rgba(255, 255, 255, .16); --lp-grid: rgba(255, 255, 255, .03); --lp-tick: rgba(255, 255, 255, .2); --lp-edge: rgba(255, 255, 255, .1);
    --lp-img: grayscale(1) contrast(1.2); --lp-tint: #8ca5ff; --lp-img-o: .7;
  }
}

body.lp { background: var(--lp-ground); }
/* --c-band is transparent on these two grounds; the compact header still needs a solid sheet, or the page shows through it */
body.lp.pw-blueprint .compact, body.lp.pw-cherry .compact { background: var(--lp-ground); border-bottom-color: var(--mast-rule); }
.lp main { position: relative; background: var(--lp-field); color: var(--c-ink-2); overflow-x: clip; }

/* ---- Home's drawing DNA: a 14px inset sheet edge with ruler ticks, and the 24/120 hairline grid */
.lp main::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: linear-gradient(to bottom, var(--lp-grid) 1px, transparent 1px), linear-gradient(to right, var(--lp-grid) 1px, transparent 1px);
  background-size: 100% 120px, 132px 100%;
  background-position: 0 0, calc(50% - 528px) 0;
}
.lp main::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 14px; right: 14px; z-index: 0; pointer-events: none;
  border-left: 1px solid var(--lp-edge); border-right: 1px solid var(--lp-edge);
  background:
    repeating-linear-gradient(to bottom, var(--lp-tick) 0 1px, transparent 1px 24px) left top / 5px 100% no-repeat,
    repeating-linear-gradient(to bottom, var(--lp-tick) 0 1px, transparent 1px 120px) left top / 10px 100% no-repeat,
    repeating-linear-gradient(to bottom, var(--lp-tick) 0 1px, transparent 1px 24px) right top / 5px 100% no-repeat,
    repeating-linear-gradient(to bottom, var(--lp-tick) 0 1px, transparent 1px 120px) right top / 10px 100% no-repeat;
}
.lp main > * { position: relative; z-index: 1; }

/* ---- Hero: copy left, the page's own drawing feathered in on the right, never behind the text */
.lp .hero { background: transparent; }
.lp .hero-bg { left: 40%; right: 0; top: 0; bottom: 0; background: transparent;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 34%), linear-gradient(0deg, transparent 0%, #000 22%); -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0%, #000 34%), linear-gradient(0deg, transparent 0%, #000 22%); mask-composite: intersect; }
.lp .hero-copy { position: relative; z-index: 1; }
.lp .hero-bg.bleed .port { filter: var(--lp-img); opacity: var(--lp-img-o); object-position: 50% 50%; }
.lp .hero-bg::before { background: var(--lp-tint); mix-blend-mode: multiply; opacity: 1; }
.lp .hero-bg:not(.x)::after { background: none; }
.lp .hero .hero-copy > * { max-width: 600px; position: relative; }
.lp .hero h1 { font-size: clamp(54px, 8.4vw, 128px); line-height: .98; letter-spacing: -.03em; max-width: 9.5ch; }
.lp.pw-cherry .hero h1 { font-size: clamp(50px, 6.6vw, 104px); max-width: 14ch; }
.lp .hero .hero-copy > h1 { max-width: none; }
.lp .hero.short h1 { font-size: clamp(52px, 7.2vw, 104px); }
.lp .hero .lede { max-width: 31em; }
.lp .hero .call { background: none; border: 0; padding: 0; margin: 4px 0 0; }
.lp .hero .call h2 { font: 300 24px/1.2 var(--font); color: var(--hero-ink, var(--c-ink)); margin: 0 0 8px; }
.lp .hero .call p { color: var(--hero-ink-2, var(--c-ink-2)); font-size: 16px; margin: 0 0 6px; }
.lp .hero .call .reach a { font: 500 18px var(--font); color: var(--hero-ink, var(--c-ink)); text-decoration: none; border-bottom: 1px solid var(--lp-route); padding-bottom: 2px; }

/* ---- Facts: a datum strip the route runs through */
.lp .facts { background: transparent; border-top: 1px solid var(--c-rule); border-bottom: 1px solid var(--c-rule); }
.lp .facts dt { color: var(--c-ink-3); }
.lp .facts dd { color: var(--c-ink); }
.lp .facts .wrap > div + div { border-left-color: var(--c-rule); }

/* ---- Sections: rail on the left, a large statement, reading text at a comfortable measure */
.lp .part .wrap { grid-template-columns: 200px minmax(0, 1fr); gap: 64px; border-top: 0; padding-top: clamp(64px, 8vw, 120px); padding-bottom: 28px; }
.lp .part > .wrap + .wrap { padding-top: 28px; padding-bottom: 40px; grid-template-columns: minmax(0, 1fr); }
.lp .part h2 { font: 300 clamp(32px, 3.9vw, 56px)/1.1 var(--font); letter-spacing: -.022em; color: var(--c-ink); max-width: 18em; margin-bottom: 24px; }
.lp .part p { color: var(--c-ink-2); font-size: 18px; line-height: 1.6; }
.lp .part p.quiet { color: var(--c-ink-3); }
.lp .rail .num { color: var(--lp-route); }
.lp .rail .name { color: var(--c-ink-3); }
.lp h3 { color: var(--c-ink); }
.lp .tag { font: 300 clamp(19px, 1.7vw, 23px)/1.45 var(--font); color: var(--lp-tag); margin: 0 0 14px; }
.lp .list li { border-top-color: var(--lp-line); font-size: 16.5px; color: var(--c-ink-2); padding: 10px 0 10px 20px; }
.lp .list li::before { background: var(--lp-route); width: 8px; top: 21px; }
.lp .list.two { columns: 2; column-gap: 36px; }
.lp .list.two li { break-inside: avoid; }
.lp .frame { color: var(--c-ink); }

/* Drawing plates: the page's own image, toned, framed with registration corners */
.lp .plate { position: relative; margin: 0; overflow: hidden; background: var(--lp-ground); }
.lp .plate img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 58% 42%; filter: var(--lp-img) brightness(1.25); opacity: var(--lp-img-o); }
.lp .plate:not(.frame-fig)::after { content: ""; position: absolute; inset: 0; background: var(--lp-tint); mix-blend-mode: multiply; pointer-events: none; }
.lp .plate::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(var(--c-ink-3), var(--c-ink-3)) left top / 18px 1px no-repeat, linear-gradient(var(--c-ink-3), var(--c-ink-3)) left top / 1px 18px no-repeat,
    linear-gradient(var(--c-ink-3), var(--c-ink-3)) right top / 18px 1px no-repeat, linear-gradient(var(--c-ink-3), var(--c-ink-3)) right top / 1px 18px no-repeat,
    linear-gradient(var(--c-ink-3), var(--c-ink-3)) left bottom / 18px 1px no-repeat, linear-gradient(var(--c-ink-3), var(--c-ink-3)) left bottom / 1px 18px no-repeat,
    linear-gradient(var(--c-ink-3), var(--c-ink-3)) right bottom / 18px 1px no-repeat, linear-gradient(var(--c-ink-3), var(--c-ink-3)) right bottom / 1px 18px no-repeat; }
.lp .frame-fig { background: none; color: var(--c-ink-3); display: grid; place-items: center; }
.lp .frame-fig::before { display: none; }
.lp .frame-fig svg { width: 100%; height: auto; }

/* ---- What we do: staggered capabilities with a plate and the framework figure */
.lp .part > .wrap.lp-caps { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: clamp(56px, 7vw, 96px); padding-bottom: 32px; }
.lp .cap h3 { font: 400 clamp(26px, 2.6vw, 38px)/1.15 var(--font); letter-spacing: -.015em; margin-bottom: 10px; }
.lp .cap-a { grid-column: 3 / span 5; grid-row: 1; }
.lp .plate-a { grid-column: 8 / -1; grid-row: 1; aspect-ratio: 16 / 10; align-self: start; margin-right: calc(-1 * var(--gutter)); }
.lp .cap-b { grid-column: 5 / -1; grid-row: 2; }
.lp .cap-b h3 { font-size: clamp(30px, 3.5vw, 50px); }
.lp .cap-c { grid-column: 3 / span 5; grid-row: 3; }
.lp .frame-fig { grid-column: 8 / -1; grid-row: 3; align-self: center; padding: 16px; }
.lp .cap-d { grid-column: 5 / span 7; grid-row: 4; }

/* Whom we serve: each audience steps outward, its heading and reach rule growing */
.lp .part > .wrap.lp-steps-out { display: grid; gap: 40px; padding-bottom: 32px; }
.lp .aud { position: relative; padding-top: 16px; max-width: 520px; }
.lp .aud::before { content: ""; position: absolute; left: 0; top: 0; height: 1px; background: var(--c-rule); }
.lp .aud p { font-size: 16.5px; }
.lp .aud:nth-child(1) { margin-left: 22%; } .lp .aud:nth-child(1)::before { width: 60%; } .lp .aud:nth-child(1) h3 { font: 400 24px/1.2 var(--font); }
.lp .aud:nth-child(2) { margin-left: 36%; } .lp .aud:nth-child(2)::before { width: 90%; } .lp .aud:nth-child(2) h3 { font: 400 28px/1.2 var(--font); }
.lp .aud:nth-child(3) { margin-left: 50%; } .lp .aud:nth-child(3)::before { width: 120%; } .lp .aud:nth-child(3) h3 { font: 400 32px/1.2 var(--font); }

/* Staircases: the method, the three commitments and Contact's next steps, each step a little lower */
.lp .stair { list-style: none; margin: 0; padding: 0 0 24px; display: grid; gap: 24px; counter-reset: st; }
.lp .method.stair { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.lp .stair.three, .lp .next-steps.stair { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lp .stair > * { counter-increment: st; display: block; padding: 0; border: 0; min-width: 0; }
.lp .stair > :nth-child(2) { margin-top: 64px; } .lp .stair > :nth-child(3) { margin-top: 128px; } .lp .stair > :nth-child(4) { margin-top: 192px; }
.lp .method.stair li::before { content: counter(st, decimal-leading-zero); display: block; font: 300 14px var(--font); letter-spacing: .1em; color: var(--lp-route); margin-bottom: 8px; }
.lp .stair h3, .lp .next-steps b { font: 400 clamp(22px, 2vw, 28px)/1.2 var(--font); color: var(--c-ink); display: block; margin: 0 0 8px; }
.lp .stair p { font-size: 16.5px; margin: 0; }
.lp .next-steps.stair li { font-size: 16px; color: var(--c-ink-2); }

/* The single contrast cut: one inverted sheet that only the route crosses */
.lp .part.cut { background: var(--lp-cut-bg); margin: clamp(48px, 7vw, 96px) 0; }
.lp .part.cut .wrap { padding-top: clamp(56px, 7vw, 96px); padding-bottom: clamp(56px, 7vw, 96px); }
.lp .part.cut h2, .lp .part.cut .pledge { color: var(--lp-cut-ink); }
.lp .part.cut p { color: var(--lp-cut-ink-2); }
.lp .part.cut .rail .num { color: var(--lp-cut-route); }
.lp .part.cut .rail .name { color: var(--lp-cut-ink-2); }
.lp .pledge { font: 300 clamp(30px, 3.4vw, 48px)/1.2 var(--font); max-width: 20em; }

/* A window: text beside a framed piece of the drawing */
.lp .lp-window { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .85fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.lp .part > .wrap.lp-window { grid-template-columns: 200px minmax(0, 1fr) minmax(0, .9fr); }
.lp .part > .wrap.lp-window > div { grid-column: 2; }
.lp .lp-window .plate { aspect-ratio: 3 / 2; }
.lp .bleed-r { margin-right: calc(-1 * var(--gutter)); }
.lp .flex-fig { display: block; width: 96px; margin-top: 48px; color: var(--c-ink-3); opacity: .7; }

/* ---- Close: the bookend, with a strip of the drawing returning on the right */
.lp .close.lp-close { position: relative; overflow: hidden; background: transparent; color: var(--c-ink); border-top: 1px solid var(--c-rule); }
.lp .lp-close .strip { position: absolute; inset: 0 0 0 38%; z-index: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 45%); mask-image: linear-gradient(90deg, transparent, #000 45%); }
.lp .lp-close .strip img { width: 100%; height: 100%; object-fit: cover; filter: var(--lp-img); opacity: calc(var(--lp-img-o) * .55); }
.lp .lp-close .strip::after { content: ""; position: absolute; inset: 0; background: var(--lp-tint); mix-blend-mode: multiply; }
.lp .lp-close .wrap { position: relative; z-index: 1; padding-top: clamp(72px, 10vw, 140px); padding-bottom: clamp(72px, 10vw, 140px); flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 28px; }
.lp .lp-close p { font: 300 clamp(44px, 6.4vw, 96px)/1 var(--font); letter-spacing: -.03em; color: var(--c-ink); }
.lp .signoff { background: var(--lp-ground); }
.lp.pw-white .signoff { color: var(--c-ink); }

/* ---- Contact: an open workspace, the form wide and clear, the next steps as a staircase after it */
.lp .split.lp-work .wrap { display: block; max-width: var(--measure); padding-top: 48px; padding-bottom: 72px; }
.lp .split.lp-work .wrap > div:first-child { max-width: 820px; margin-left: clamp(0px, 9vw, 120px); }
.lp .split.lp-work .next-steps { margin: 80px 0 0 clamp(0px, 9vw, 120px); }
.lp .split.lp-work .next-steps li { border: 0; }
.lp .fine { font-size: 14px; color: var(--c-ink-3); margin-top: 18px; }
.lp .fine a { color: inherit; }

/* ---- The route itself (drawn by route.js) */
.lp-route, .lp main > .lp-route { position: absolute; left: 0; top: 0; z-index: 2; pointer-events: none; overflow: visible; }
.lp-route .ln { fill: none; stroke: var(--lp-route); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 3px color-mix(in srgb, var(--lp-route) 45%, transparent)); }
.lp-route .ln.cut { stroke: var(--lp-cut-route); filter: none; }
.lp-route .lead { fill: none; stroke: var(--lp-route); stroke-width: 1; stroke-dasharray: 2 3; opacity: .7; }
.lp-route .node { fill: var(--lp-ground); stroke: var(--lp-route); stroke-width: 1.4; }
/* Where the column reaches the window's edge, the left gutter widens so the spine has its own lane beside the text */
@media (min-width: 820px) and (max-width: 1160px) { .lp main .wrap { padding-left: 56px; } }
/* A staircase's gaps carry the route between its steps, so they hold a node and its clearance */
@media (min-width: 820px) { .lp .stair { gap: 40px; } }

/* ---- Tablets and phones: one reading column, drawings as bands, the route as nodes beside each section */
@media (max-width: 980px) {
  .lp .part > .wrap.lp-caps { grid-template-columns: minmax(0, 1fr); }
  .lp .lp-caps > * { grid-column: 1 / -1 !important; grid-row: auto !important; margin-right: 0 !important; }
  .lp .aud { margin-left: 0 !important; }
  .lp .aud::before { width: 100% !important; }
  .lp .method.stair, .lp .stair.three, .lp .next-steps.stair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp .stair > * { margin-top: 0 !important; }
  .lp .part > .wrap.lp-window { grid-template-columns: minmax(0, 1fr); }
  .lp .part > .wrap.lp-window > div { grid-column: auto; }
  .lp .bleed-r { margin-right: 0; }
}
@media (max-width: 900px) {
  .lp .part .wrap { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .lp .lp-window { grid-template-columns: minmax(0, 1fr); }
  .lp .flex-fig { display: none; }
  .lp .split.lp-work .wrap > div:first-child, .lp .split.lp-work .next-steps { margin-left: 0; }
}
@media (max-width: 819px) {
  .lp-route { display: none; }
  .lp .rail .num::before { content: ""; display: inline-block; width: 8px; height: 8px; border: 1.5px solid var(--lp-route); border-radius: 50%; margin-right: 10px; vertical-align: 1px; }
  .lp .hero { padding-top: 0; }
  .lp .hero-bg { position: relative; left: 0; height: 56vw; min-height: 210px; max-height: 380px; margin-top: 108px; flex: none;
    -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent); mask-image: linear-gradient(180deg, #000 55%, transparent); -webkit-mask-composite: source-over; mask-composite: add; }
  .lp .hero-copy { margin-top: -24px; padding-top: 0; }
  .lp .list.two { columns: 1; }
  .lp .lp-close .strip { inset: 0; opacity: .5; }
}
@media (max-width: 560px) {
  .lp .method.stair, .lp .stair.three, .lp .next-steps.stair { grid-template-columns: minmax(0, 1fr); }
  .lp main::after { left: 6px; right: 6px; }
}