/* Barycentric Solutions. Light only, cream paper with grain, Archivo Black display, IBM Plex text.
   Rhythm: night bands for the big moments (hero, numbers, footer), cream for reading, one sun band for the ask. */
:root {
  color-scheme: light only;
  --primary: #20343b; --deep: #131e22; --neutral: #f2e6ce; --raised: #faf4e6; --ink: #20343b; --muted: #55646a;
  --hairline: #857c66; --sun: #e2b44b; --orange: #de703c; --sage: #5d7650; --green: var(--sage); --red: #b64f42; --cobalt: #1f4fbf;
  --glass: #86b2b8; --steel: #98a095; --brass: #a58a54;
  /* Colour roles (from the design system). Shading is steps of one token (the -d and -l shades), never a gradient across two hues. */
  --machine: var(--steel); --machine-d: #6b7369; --machine-l: #c3c9bf;   /* metal objects, the hero mechanism: rings, bar, spindle, hub */
  --fitting: var(--brass); --fitting-d: #6f5a30; --fitting-l: #d9bd7a;   /* brass fittings only: caps, collars, joints, stems */
  --secondary: var(--sage);     /* secondary buttons, tags, large accents (--green is the old name) */
  --celestial: var(--sun);      /* orbits, sun, stars */
  --shade-deep: rgba(8, 14, 18, .55);   /* shadows on the night ground: a step down of --deep, never black (on light grounds they are --primary) */
  --display: "Archivo Black", "Archivo Fallback", "Arial Black", sans-serif;
  --sans: "IBM Plex Sans", "Plex Sans Fallback", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --print-sm: 3px 3px 0 var(--primary); --print-lg: 6px 6px 0 var(--primary);
  --gl: max(16px, env(safe-area-inset-left, 0px)); --gr: max(16px, env(safe-area-inset-right, 0px));
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .13 0 0 0 0 .2 0 0 0 0 .23 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --ease: cubic-bezier(.2, .8, .2, 1);
}
@media (min-width: 760px) { :root { --gl: max(40px, env(safe-area-inset-left, 0px)); --gr: max(40px, env(safe-area-inset-right, 0px)); } }
@font-face { font-family: "Archivo Black"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/archivo-black-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 600; font-style: normal; font-display: swap; src: url("fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 600; font-style: normal; font-display: swap; src: url("fonts/ibm-plex-mono-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Archivo Fallback"; src: local("Arial Black"), local("ArialBlack"); size-adjust: 96%; ascent-override: 98%; descent-override: 26%; }
@font-face { font-family: "Plex Sans Fallback"; src: local("Segoe UI"), local("Arial"); size-adjust: 92%; }   /* keeps the hero tagline on the same lines before and after the web font arrives (CLS) */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: .22s ease both vt-out; }
::view-transition-new(root) { animation: .32s var(--ease) both vt-in; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-8px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(12px); } }
* { box-sizing: border-box; }
html { background: var(--neutral); scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); font: 17px/27px var(--sans); background: var(--grain), var(--neutral); }
img, svg, canvas { max-width: 100%; }
img { height: auto; }
a { color: var(--cobalt); text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.night :focus-visible, .on-dark :focus-visible { outline-color: var(--sun); }
.skip { position: absolute; left: -999px; top: 8px; background: var(--raised); padding: 8px 16px; border: 1.5px solid var(--primary); z-index: 30; }
.skip:focus { left: 16px; }
.wrap { max-width: 1360px; margin: 0 auto; padding-left: var(--gl); padding-right: var(--gr); }

/* Type */
.eyebrow { font: 600 12px/16px var(--mono); letter-spacing: .24em; text-transform: uppercase; color: var(--muted); margin: 0 0 14px; display: flex; align-items: center; gap: 10px; }
.eyebrow::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--orange); box-shadow: 14px 0 0 -2px var(--sun); margin-right: 12px; flex: none; }
.night .eyebrow { color: var(--sun); }
h1, h2, h3, .display { font-family: var(--display); font-weight: 400; margin: 0; text-wrap: balance; letter-spacing: -.025em; }
.mega { font-size: clamp(50px, 7.2vw, 116px); line-height: .94; letter-spacing: -.035em; }
h1 { font-size: clamp(44px, 7vw, 104px); line-height: .98; }
h2 { font-size: clamp(32px, 4.6vw, 64px); line-height: 1.02; }
h3 { font-size: clamp(22px, 2vw, 28px); line-height: 1.15; letter-spacing: -.015em; }
.bite { font: 400 clamp(24px, 2.8vw, 40px)/1.12 var(--display); letter-spacing: -.02em; margin: 0; text-wrap: balance; }
p { margin: 0 0 16px; max-width: 64ch; }
.lead { font-size: clamp(19px, 1.6vw, 23px); line-height: 1.5; max-width: 52ch; }
.muted { color: var(--muted); }
.hl { background: linear-gradient(transparent 58%, var(--sun) 58%, var(--sun) 92%, transparent 92%); padding: 0 .08em; }
.data { font: 400 14px/20px var(--mono); color: var(--muted); }

/* Header */
/* Sticky on every page. ::before carries the bar's background past the 1360 px wrap to the window edges; body clips the overhang. */
body { overflow-x: clip; }
header.top { --hdr-bg: var(--neutral); --hdr-line: rgba(32,52,59,.14); display: flex; align-items: center; gap: 10px 28px; padding-block: 14px; position: sticky; top: 0; z-index: 20; view-transition-name: site-header; }
header.top::before { content: ""; position: absolute; inset: 0 auto 0 50%; width: 100vw; transform: translateX(-50%); z-index: -1; background: var(--hdr-bg); border-bottom: 1px solid var(--hdr-line); }
header.top.on-dark { --hdr-bg: var(--deep); --hdr-line: rgba(242,230,206,.12); }
html { scroll-padding-top: 84px; }
.wordmark { font: 400 20px/24px var(--display); letter-spacing: -.01em; color: var(--ink); text-decoration: none; display: inline-flex; align-items: center; gap: 10px; margin-right: auto; }
.wordmark svg { width: 30px; height: 30px; flex: none; transition: transform .6s var(--ease); }
.wordmark:hover svg { transform: rotate(180deg); }
/* Menu: Home, then two dropdowns (details/summary, so they open without the script too). */
.top nav { font: 600 12px/16px var(--sans); letter-spacing: .1em; text-transform: uppercase; }
.top .menu, .top .menu ul { list-style: none; margin: 0; padding: 0; }
.top .menu { display: flex; align-items: center; gap: 4px 26px; }
.top .menu > li { position: relative; }
.top nav a, .top summary { color: inherit; text-decoration: none; display: block; padding-block: 8px; cursor: pointer; }
.top .menu > li > a, .top summary { background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat; transition: background-size .3s var(--ease); }
.top .menu > li > a:hover, .top .menu > li > a[aria-current="page"], .top summary:hover, .top summary.here { background-size: 100% 2px; }
.top summary { list-style: none; display: inline-flex; align-items: center; gap: 7px; }
.top summary::-webkit-details-marker { display: none; }
.top summary::after { content: ""; width: 6px; height: 6px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: translateY(-2px) rotate(45deg); transition: transform .2s var(--ease); }
.top details[open] summary::after { transform: translateY(1px) rotate(-135deg); }
.top .dd ul { position: absolute; top: calc(100% + 10px); left: -16px; min-width: 210px; padding: 8px; background: var(--raised); color: var(--ink); border: 1.5px solid var(--primary); border-radius: 6px; box-shadow: var(--print-sm); }
.top .dd ul a { padding: 10px 12px; border-radius: 4px; letter-spacing: .08em; }
.top .dd ul a:hover, .top .dd ul a:focus-visible { background: var(--neutral); }
.top .dd ul a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--orange); }
.top .hdr-cta { padding: 11px 16px; font-size: 12px; }
.top .hdr-cta::after { content: none; }
.on-dark .hdr-cta:hover { box-shadow: 3px 3px 0 var(--neutral); }
.menu-btn { display: none; align-items: center; gap: 9px; background: none; color: inherit; border: 1.5px solid currentColor; border-radius: 4px; padding: 9px 12px; font: 600 12px/16px var(--sans); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.menu-btn .bars, .menu-btn .bars::before, .menu-btn .bars::after { display: block; width: 16px; height: 1.5px; background: currentColor; transition: transform .2s var(--ease), opacity .2s; }
.menu-btn .bars { position: relative; }
.menu-btn .bars::before, .menu-btn .bars::after { content: ""; position: absolute; left: 0; }
.menu-btn .bars::before { top: -5px; } .menu-btn .bars::after { top: 5px; }
.menu-btn[aria-expanded="true"] .bars { background: transparent; }
.menu-btn[aria-expanded="true"] .bars::before { transform: translateY(5px) rotate(45deg); }
.menu-btn[aria-expanded="true"] .bars::after { transform: translateY(-5px) rotate(-45deg); }
/* Phone: one slim row (logo, Contact, Menu). The script adds .js; without it the menu shows open under the logo. */
@media (max-width: 860px) {
  header.top { flex-wrap: wrap; padding-block: 10px; gap: 8px 12px; }
  html { scroll-padding-top: 76px; }
  .wordmark { font-size: 17px; gap: 8px; } .wordmark svg { width: 26px; height: 26px; }
  .js .menu-btn { display: inline-flex; }
  .js .top nav { display: none; }
  .js .top.open nav { display: block; }
  .top nav { order: 10; flex-basis: 100%; max-height: calc(100dvh - 70px); overflow-y: auto; padding-block: 6px 14px; }
  .top .menu { flex-direction: column; align-items: stretch; gap: 0; }
  .top .menu > li { border-top: 1px solid var(--hdr-line); }
  .top .menu > li > a, .top summary { padding-block: 14px; font-size: 13px; width: 100%; justify-content: space-between; background: none; }
  .top .menu > li > a[aria-current="page"], .top summary.here { color: var(--orange); }
  .on-dark .menu > li > a[aria-current="page"], .on-dark summary.here { color: var(--sun); }
  .top .dd ul { position: static; min-width: 0; padding: 0 0 10px 12px; background: none; color: inherit; border: 0; box-shadow: none; }
  .top .dd ul a { padding: 11px 10px; }
  .top .dd ul a:hover, .top .dd ul a:focus-visible { background: rgba(127,127,127,.12); }
}
@media (max-width: 520px) {
  .wordmark { font-size: 15px; gap: 7px; } .wordmark svg { width: 24px; height: 24px; }
  .top .hdr-cta { padding: 9px 11px; font-size: 11px; letter-spacing: .08em; }
  .menu-btn { padding: 10px; } .menu-btn .lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (max-width: 370px) { .top .hdr-cta { display: none; } }
.on-dark, .on-dark .wordmark { color: var(--neutral); }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: 10px; background: var(--primary); color: var(--neutral); font: 600 13px/16px var(--sans); letter-spacing: .1em; text-transform: uppercase; text-decoration: none; padding: 16px 22px; border-radius: 4px; border: 1.5px solid var(--primary); transition: box-shadow .18s var(--ease), transform .18s var(--ease); }
.btn::after { content: "→"; transition: transform .25s var(--ease); }
.btn:hover { box-shadow: var(--print-sm); transform: translate(-2px, -2px); }
.btn:hover::after { transform: translateX(4px); }
.btn:active { box-shadow: none; transform: translate(1px, 1px); }
.btn.sun { background: var(--sun); color: var(--primary); }
/* Secondary button: a sage outline with ink text (ink on cream 10.5:1; cream text on a sage fill would read 4.07:1, too low at 13 px). On the night ground it stays a cream outline. */
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--secondary); border-width: 2px; padding: 15.5px 21.5px; }
.btn.ghost:hover { box-shadow: var(--print-sm); }
.night .btn.ghost, .on-dark .btn.ghost { color: inherit; border-color: currentColor; }
.night .btn:hover, .night .btn.ghost:hover { box-shadow: 3px 3px 0 var(--neutral); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* Night band */
.night { background: radial-gradient(1.5px 1.5px at 20% 30%, #f2e6ce55 50%, transparent 51%), radial-gradient(1px 1px at 70% 60%, #f2e6ce44 50%, transparent 51%), radial-gradient(1.2px 1.2px at 40% 80%, #e2b44b55 50%, transparent 51%), var(--deep);
  background-size: 180px 180px, 240px 240px, 310px 310px, auto; color: var(--neutral); position: relative; }
.night .muted { color: #c9c0ad; }
.chevron { display: block; width: 100%; height: 42px; }

/* Home hero */
.hero { overflow: hidden; }
.hero .stage { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: center; min-height: min(78vh, 760px); gap: 24px; padding-block: 24px 56px; }
.hero h1 { color: var(--neutral); margin-bottom: 26px; }
.hero h1 .turn { color: var(--sun); }
.hero .tag { font: 400 clamp(18px, 1.6vw, 22px)/1.4 var(--sans); margin: 0 0 10px; max-width: 480px; }   /* px, not ch: a ch-width that changes with the font made the line count change on load (CLS) */
.rotator { font: 400 15px/22px var(--mono); margin: 0 0 30px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: 30px; }
.rotator .word { color: var(--sun); display: inline-block; min-width: 19ch; }
.rotator button { background: none; border: 1px solid #f2e6ce99; color: var(--neutral); border-radius: 4px; font: 600 11px/14px var(--sans); letter-spacing: .1em; text-transform: uppercase; padding: 4px 8px; cursor: pointer; }
.model { position: relative; aspect-ratio: 1 / 1; width: 100%; max-width: 620px; justify-self: end; }
.model svg, .model canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.model canvas { opacity: 0; transition: opacity 1.2s ease; }
.model.gl canvas { opacity: 1; }
.model.gl svg { opacity: 0; transition: opacity 1.2s ease; }
.model .label { position: absolute; left: 50%; bottom: -2%; transform: translateX(-50%); font: 600 11px/14px var(--mono); letter-spacing: .2em; text-transform: uppercase; color: #f2e6cecc; white-space: nowrap; }
.svg-orbit .spin { transform-origin: 200px 200px; }
@media (max-width: 860px) { .hero .stage { grid-template-columns: 1fr; min-height: 0; padding-top: 8px; } .model { justify-self: center; max-width: 420px; margin-top: -10px; } }

/* Sections */
section.band { padding-block: clamp(64px, 9vw, 128px); }
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px clamp(40px, 6vw, 96px); align-items: start; }
.split > * { min-width: 0; }
.sticky { position: sticky; top: 100px; }   /* clears the sticky header */
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } .sticky { position: static; } }
.statement { font: 400 clamp(28px, 3.6vw, 52px)/1.12 var(--display); letter-spacing: -.025em; max-width: 24ch; margin: 0; text-wrap: balance; }

/* Service cards with illustrated icons */
.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; margin-top: 56px; }
.cards > :nth-child(2), .cards > :nth-child(4) { translate: 0 56px; }
.cards > :nth-child(2):hover, .cards > :nth-child(4):hover { translate: -3px 53px; }
.card { position: relative; background: var(--raised); border: 1.5px solid var(--primary); border-radius: 10px; padding: 28px; display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 8px 22px; text-decoration: none; color: var(--ink); transition: box-shadow .2s var(--ease), translate .2s var(--ease); }
.card:hover, .card:focus-visible { box-shadow: var(--print-lg); translate: -3px -3px; }
.card .icon { grid-row: span 4; width: 112px; height: 112px; }
.card .bite { font-size: clamp(22px, 2.2vw, 30px); }
.card p { margin: 0; }
.card .foot { display: flex; justify-content: space-between; align-items: baseline; margin-top: 10px; gap: 12px; flex-wrap: wrap; }
.card .from { font: 400 14px/1 var(--mono); color: var(--muted); }
.card .go { font: 600 12px/16px var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--cobalt); }
.icon .ring { transform-origin: 60px 60px; transition: transform 1.2s var(--ease); }
.card:hover .icon .ring { transform: rotate(140deg); }
@media (max-width: 860px) { .cards { grid-template-columns: 1fr; } .cards > :nth-child(2), .cards > :nth-child(4) { translate: none; } .card { grid-template-columns: 76px minmax(0, 1fr); padding: 22px; } .card .icon { width: 76px; height: 76px; } }

/* Big numbers */
.numbers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; margin-top: 48px; }
.numbers > div { border-top: 1.5px solid #f2e6ce55; padding-top: 22px; min-width: 0; }
.numbers .n { font: 400 clamp(42px, 4.6vw, 72px)/1 var(--display); white-space: nowrap; letter-spacing: -.03em; color: var(--sun); display: block; margin-bottom: 12px; }
.numbers p { color: #e8dcc2; margin: 0; max-width: 32ch; }
@media (max-width: 860px) { .numbers { grid-template-columns: 1fr; gap: 28px; } }

/* Odometer: digits are 1em tall and roll once */
.odo { display: inline-flex; align-items: baseline; }
.odo .d { display: inline-block; height: 1em; line-height: 1; overflow: hidden; vertical-align: -.1em; }
.odo .d > span { display: block; transition: transform 1.3s var(--ease); }
.odo .d > span > span { display: block; height: 1em; line-height: 1; }

/* Work strip on Home */
.stack { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 48px; }
.stack a { display: block; color: var(--ink); text-decoration: none; }
.stack figure { margin: 0 0 14px; border: 1.5px solid var(--primary); border-radius: 10px; overflow: hidden; box-shadow: var(--print-lg); transition: transform .35s var(--ease); background: var(--raised); }
.stack a:nth-child(1) figure { transform: rotate(-1.6deg); } .stack a:nth-child(3) figure { transform: rotate(1.4deg) translateY(28px); }
.stack a:hover figure { transform: rotate(0) translateY(-6px); }
.stack h3 { font-size: 22px; } .stack a:nth-child(3) h3 { margin-top: 28px; }
.stack img { display: block; width: 100%; }
@media (max-width: 860px) { .stack { grid-template-columns: 1fr; } .stack a:nth-child(n) figure { transform: none; } .stack a:nth-child(3) h3 { margin-top: 0; } }

/* Steps on an orbit line */
.steps { list-style: none; margin: 0; padding: 0 0 0 48px; position: relative; }
.steps::before { content: ""; position: absolute; left: 15px; top: 10px; bottom: 10px; border-left: 2px dashed var(--hairline); }
.steps li { position: relative; padding: 0 0 34px; }
.steps li::before { content: attr(data-n); position: absolute; left: -48px; top: -4px; width: 32px; height: 32px; border-radius: 50%; background: var(--raised); border: 1.5px solid var(--primary); display: grid; place-items: center; font: 600 12px/1 var(--mono); }
.steps li:last-child::before { background: var(--sun); }
.steps b { display: block; font: 400 clamp(20px, 1.8vw, 26px)/1.15 var(--display); letter-spacing: -.015em; margin-bottom: 6px; }
.steps li p { margin: 0; color: var(--muted); }

/* Promises */
.promises { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; margin-top: 48px; }
.promises > div { min-width: 0; }
.promises svg { width: 56px; height: 56px; margin-bottom: 14px; }
.promises h3 { margin-bottom: 8px; }
@media (max-width: 860px) { .promises { grid-template-columns: 1fr; gap: 28px; } }

/* Sun call to action */
.ask { background: var(--grain), var(--sun); border-block: 1.5px solid var(--primary); }
.ask .email { font: 400 clamp(22px, 4.4vw, 64px)/1.1 var(--display); letter-spacing: -.03em; color: var(--primary); text-decoration: none; overflow-wrap: anywhere; background: linear-gradient(var(--primary), var(--primary)) 0 100% / 100% 4px no-repeat; transition: background-size .3s var(--ease); }
.ask .email:hover { background-size: 100% 12px; }

/* Inner page opener */
.opener { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 24px 48px; align-items: end; padding-block: 40px 8px; }
.opener h1 { margin-bottom: 22px; }
.artfig { margin: 0; width: 100%; }   /* Every piece of inner-page art is a figure with a FIG. line under it */
.artfig .art, .artfig .terminal { display: block; width: 100%; }
.artfig .fig { margin-top: 8px; text-align: right; }
.opener .artfig { max-width: 340px; justify-self: end; }
@media (max-width: 860px) { .opener { grid-template-columns: 1fr; } .opener .artfig { max-width: 200px; justify-self: end; order: 0; margin-top: -8px; } }   /* P-049 F25: the title comes first; the art follows the intro */
@media (max-width: 700px) { .opener .artfig { max-width: 140px; } .opener .artfig .fig { font-size: 9px; letter-spacing: .12em; } }
.opener .artfig.wide { max-width: 560px; }
.opener:has(.artfig.wide) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 860px) { .opener:has(.artfig.wide) { grid-template-columns: 1fr; } .opener .artfig.wide { max-width: 360px; justify-self: center; } }
@media (max-width: 700px) { .opener .artfig.wide { max-width: 90%; width: 90%; justify-self: center; margin-top: 0; } .opener .artfig.wide .fig { text-align: center; } }
.stripe { display: block; width: 100%; height: 30px; margin: 34px 0 0; }

/* Services */
.service { padding-block: clamp(56px, 8vw, 112px) 0; scroll-margin-top: 16px; }
.service .head { display: grid; grid-template-columns: 150px minmax(0, 1fr) minmax(0, .9fr); gap: 20px 40px; align-items: start; }
.service .head .icon { width: 150px; height: 150px; }
.service .head .bite { font-size: clamp(30px, 3.4vw, 50px); margin-bottom: 14px; }
@media (max-width: 960px) { .service .head { grid-template-columns: minmax(0, 1fr); } .service .head .icon { width: 88px; height: 88px; } }
.pkgs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 36px 0 28px; }
.pkg { border: 1.5px solid var(--primary); border-radius: 10px; padding: 24px; background: var(--raised); display: flex; flex-direction: column; gap: 6px; min-width: 0; transition: box-shadow .2s var(--ease), translate .2s var(--ease); }
.pkg:hover { box-shadow: var(--print-lg); translate: -3px -3px; }
.pkg.top { background: var(--grain), var(--deep); color: var(--neutral); }
.pkg .name { font: 400 clamp(24px, 2.2vw, 30px)/1.1 var(--display); letter-spacing: -.01em; text-transform: none; }
.pkg .meta { font: 600 12px/16px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.pkg.top .meta { color: #cbbfa6; }
.pkg .scope { margin: 14px 0 22px; font-size: 17px; line-height: 1.45; }
.pkg .cta { margin-top: auto; display: block; padding: 12px 0 0; border-top: 1.5px solid currentColor; font: 600 15px/22px var(--sans); color: inherit; text-decoration: none; }
.pkg .cta::after { content: " \2192"; display: inline-block; transition: translate .2s var(--ease); }
.pkg .cta:hover, .pkg .cta:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.pkg .cta:hover::after { translate: 4px 0; }
.pkg.top .cta { color: var(--sun); }
@media (max-width: 860px) { .pkgs { grid-template-columns: 1fr; } }
.specs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; }
@media (max-width: 860px) { .specs { grid-template-columns: 1fr; } }
details.spec { border-top: 1.5px solid var(--hairline); }
details.spec summary { cursor: pointer; list-style: none; padding: 16px 0; font: 400 19px/24px var(--display); letter-spacing: -.01em; display: flex; justify-content: space-between; gap: 16px; }
details.spec summary::-webkit-details-marker { display: none; }
details.spec summary::after { content: "+"; font: 600 22px/1 var(--mono); transition: transform .25s var(--ease); }
details.spec[open] summary::after { transform: rotate(45deg); }
details.spec .body { padding: 0 0 18px; }
details.spec ul { margin: 0; padding-left: 20px; } details.spec li { margin-bottom: 6px; }

/* Portfolio */
.case { padding-block: clamp(64px, 9vw, 120px) 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px clamp(40px, 6vw, 96px); align-items: center; }
.case .num { font: 400 clamp(48px, 6vw, 92px)/.95 var(--display); white-space: nowrap; letter-spacing: -.04em; color: var(--primary); display: block; margin-bottom: 18px; }
.case .num small { display: block; font: 600 12px/16px var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin-top: 12px; }
.case.flip .pair { order: 2; }
.pair { position: relative; min-height: 0; padding: 0 0 18% 0; }
.pair figure { margin: 0; border: 1.5px solid var(--primary); border-radius: 10px; overflow: hidden; background: var(--raised); box-shadow: var(--print-lg); position: relative; }
.pair figure::after, .beat-art::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .14; mix-blend-mode: multiply; background-image: radial-gradient(var(--primary) .9px, transparent 1.1px); background-size: 5px 5px; }
.pair figure img { display: block; width: 100%; }
.pair .a { width: 84%; transform: rotate(-1.4deg); position: relative; z-index: 2; }
.pair .b { width: 64%; position: absolute; right: 0; bottom: 0; transform: rotate(2deg); z-index: 1; }
.pair[data-front="b"] .b { z-index: 3; }   /* site.js sets data-front from the tab (or card) last tapped */
.pair figure:not(:only-child) { cursor: pointer; }
.pair figcaption, .beat-art figcaption { position: absolute; left: 10px; bottom: 10px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pair figcaption { flex-direction: column; align-items: flex-start; width: max-content; max-width: calc(100% - 20px); }   /* narrow caption: stays clear of the front card that overlaps the back card's right side, so a tap on the tab lands */
.full { display: inline-block; background: var(--raised); color: var(--primary); font: 600 12px/14px var(--mono); letter-spacing: .1em; text-transform: uppercase; text-decoration: none; padding: 4px 8px; border: 1.5px solid var(--primary); border-radius: 3px; min-height: 24px; }
.full:hover { background: var(--sun); }
.pair .tab { display: block; background: var(--primary); color: var(--neutral); font: 600 12px/14px var(--mono); letter-spacing: .14em; text-transform: uppercase; padding: 4px 8px; border: 0; border-radius: 3px; cursor: pointer; min-height: 24px; }
.pair .tab:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; padding: 0; list-style: none; }
.chips li { font: 600 11px/14px var(--sans); letter-spacing: .1em; text-transform: uppercase; border: 2px solid var(--secondary); border-radius: 9999px; padding: 5px 11px; }   /* tags: sage outline, ink text */
.verdict { font: 400 clamp(20px, 1.8vw, 26px)/1.2 var(--display); letter-spacing: -.015em; margin: 6px 0 18px; }
@media (max-width: 860px) { .case { grid-template-columns: 1fr; } .case.flip .pair { order: 0; } }

/* FAQ */
.faq details { border-top: 1.5px solid var(--hairline); }
.faq details:last-child { border-bottom: 1.5px solid var(--hairline); }
.faq summary { cursor: pointer; list-style: none; padding: 20px 0; font: 400 clamp(19px, 1.6vw, 23px)/1.25 var(--display); letter-spacing: -.01em; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 600 24px/1 var(--mono); transition: transform .25s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .a { padding-bottom: 22px; }

/* Brochures */
.bros { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; margin-top: 48px; }
.bro { min-width: 0; }
.bro .cover { aspect-ratio: 8.5 / 11; border-radius: 6px; background: var(--grain), var(--deep); color: var(--neutral); padding: 20px; display: flex; flex-direction: column; justify-content: space-between; box-shadow: 4px 4px 0 var(--raised), 5px 5px 0 var(--primary), 9px 9px 0 var(--raised), 10px 10px 0 var(--primary); border: 1.5px solid var(--primary); transition: transform .3s var(--ease); margin-bottom: 22px; }
.bro:nth-child(odd) .cover { transform: rotate(-1.2deg); } .bro:nth-child(even) .cover { transform: rotate(1deg); }
.bro:hover .cover { transform: rotate(0) translateY(-6px); }
.bro .cover .eyebrow { color: var(--sun); margin: 0; }
.bro .cover b { font: 400 clamp(20px, 1.9vw, 26px)/1.1 var(--display); letter-spacing: -.02em; }
.bro .bars { display: grid; grid-template-rows: repeat(4, 7px); }
.bars i:nth-child(1) { background: var(--red); } .bars i:nth-child(2) { background: var(--orange); } .bars i:nth-child(3) { background: var(--sun); } .bars i:nth-child(4) { background: var(--green); }
@media (max-width: 960px) { .bros { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .bros { grid-template-columns: 1fr; } }

/* Contact */
.mail-big { font: 400 clamp(22px, 4.9vw, 74px)/1.05 var(--display); letter-spacing: -.035em; color: var(--primary); text-decoration: none; overflow-wrap: anywhere; display: inline-block; margin: 10px 0 30px; background: linear-gradient(var(--sun), var(--sun)) 0 92% / 100% 26% no-repeat; transition: background-size .35s var(--ease); }
.mail-big:hover { background-size: 100% 70%; }
.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; border-top: 1.5px solid var(--hairline); padding-top: 32px; }
.trio > div { min-width: 0; }
.trio h2 { font-size: clamp(22px, 2vw, 28px); line-height: 1.15; letter-spacing: -.015em; }
@media (max-width: 860px) { .trio { grid-template-columns: 1fr; gap: 24px; } }

/* Footer */
footer.site { margin-top: clamp(80px, 10vw, 140px); }
footer.site .wrap { padding-block: 72px 40px; display: grid; grid-template-columns: minmax(0, 2.2fr) repeat(3, minmax(0, 1fr)); gap: 32px 40px; }
footer.site .close { font: 400 clamp(26px, 2.8vw, 40px)/1.05 var(--display); letter-spacing: -.025em; margin: 0 0 14px; max-width: 16ch; }
footer.site .line { display: flex; gap: 22px; align-items: flex-start; }
footer.site .line > div { min-width: 0; }
footer.site .mini { flex: none; width: 132px; height: 80px; margin-top: 2px; }   /* P-049 F24: the still system; its box is fixed so the footer never shifts */
@media (max-width: 700px) { footer.site .line { gap: 16px; } footer.site .mini { width: 84px; height: 51px; margin-top: 0; } footer.site .close { max-width: none; } }
footer.site h2 { font: 600 12px/16px var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--sun); margin-bottom: 14px; }
footer.site ul { list-style: none; margin: 0; padding: 0; } footer.site li { margin-bottom: 8px; }
footer.site a { color: var(--neutral); }
footer.site .foot-mark { width: 16px; height: 16px; vertical-align: -3px; margin-right: 8px; }
footer.site .legal { grid-column: 1 / -1; color: #bdb29c; font-size: 13px; margin: 24px 0 0; border-top: 1px solid #f2e6ce33; padding-top: 20px; max-width: none; }
@media (max-width: 860px) { footer.site .wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); } footer.site .wrap > :first-child { grid-column: 1 / -1; } }
/* The email is one long word: give it the full row on a phone, and let it break if even that is too narrow. */
@media (max-width: 520px) { footer.site .wrap > div:nth-last-of-type(1) { grid-column: 1 / -1; } }
footer.site a[href^="mailto:"] { overflow-wrap: anywhere; }

/* 404 */
.lost { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: center; padding-block: 48px; }
@media (max-width: 860px) { .lost { grid-template-columns: minmax(0, 1fr); } }

/* Motion. Content is complete at rest: reveals move, never fade. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .reveal { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% cover 18%; }
    @keyframes rise { from { transform: translateY(26px); } to { transform: none; } }
  }
}
@media (prefers-reduced-motion: no-preference) {
  .svg-orbit .spin { animation: spin 48s linear infinite; }
  .art .spin { transform-origin: 150px 150px; transition: transform 2.4s var(--ease); }
  .art:hover .spin, .opener:hover .art .spin { transform: rotate(120deg); }
  @keyframes spin { to { transform: rotate(360deg); } }
  .paused .spin, .spin.paused { animation-play-state: paused; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  @view-transition { navigation: none; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .rotator button { display: none; }
}
@media print { header.top { position: static; } header.top::before, .top .hdr-cta, .menu-btn { display: none; } header.top nav, .rotator button, footer.site, .model canvas { display: none; } .night { background: var(--deep); } }

/* ===== You are the center (concept A) ===== */
.hero { background: radial-gradient(circle at 74% 50%, rgba(226,180,75,.26), transparent 36%), radial-gradient(circle at 74% 50%, rgba(226,180,75,.1), transparent 58%),
  linear-gradient(rgba(242,230,206,.045) 1px, transparent 1px) 0 0 / 56px 56px, linear-gradient(90deg, rgba(242,230,206,.045) 1px, transparent 1px) 0 0 / 56px 56px, var(--deep); }
.hero .stage { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); min-height: min(86vh, 820px); }
.hero .stage > * { min-width: 0; }
.hero h1 .you { color: var(--sun); overflow-wrap: normal; word-break: keep-all; }   /* site.js fitName shrinks a word that is wider than the column */
.namer { margin: 26px 0 28px; max-width: 460px; }
.namer label { display: block; font: 600 12px/16px var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--sun); margin-bottom: 8px; }
.namer .field { display: flex; gap: 8px; }
.namer input { flex: 1; min-width: 0; font: 400 20px/1.2 var(--display); letter-spacing: -.01em; color: var(--neutral); background: rgba(242,230,206,.06); border: 1.5px solid rgba(242,230,206,.5); border-radius: 6px; padding: 14px 16px; }
.namer input::placeholder { color: rgba(242,230,206,.45); }
.namer input:focus { outline: 2px solid var(--sun); outline-offset: 2px; border-color: var(--sun); }
.namer .reset { background: none; border: 1.5px solid rgba(242,230,206,.5); color: var(--neutral); border-radius: 6px; padding: 0 14px; font: 600 11px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.namer .fine { font: 400 13px/18px var(--mono); color: #c9c0ad; margin: 8px 0 0; }
.namer .change { background: none; border: 0; padding: 14px 0; margin: -14px 0; color: var(--sun); font: 500 11px/16px var(--mono); letter-spacing: .16em; text-transform: uppercase; cursor: pointer; text-decoration: underline dotted; text-decoration-thickness: 1px; text-underline-offset: 5px; }   /* small text link that reopens the terminal prompt: always looks tappable (phones have no hover), 44px tap height */
.namer .change::after { content: " \2192"; }
.namer .change:hover, .namer .change:focus-visible { color: var(--neutral); text-decoration-style: solid; }

/* The hero system: one rigid system turns. The sun (the visitor's business) rides the inner ring; the business's functions ride the outer ring; the heaviest shares the sun's bar.
   The steel machine (rings, bar, spindle, hub) is the thing we build, so it reads as made: tube rings, a bar with a brass cap, a hub with a brass bearing collar at the spindle's foot.
   Colour roles: steel for the mechanism, brass for fittings only, gold for the sun, shadows in a shade of the night ground, never black.
   Everything is CSS transforms in a gently tilted plane; the labels, spheres and spindle stand up to face the viewer. Lengths are cqw of the plane.
   Direction of record: flatter, close to the first flat orbit, but still 3D (tilt, lit spheres, soft shadows, the spindle). */
.system { position: relative; width: 100%; max-width: 640px; aspect-ratio: 1 / 1; justify-self: end; perspective: 1200px; --tilt: 44deg; }
.plane { position: absolute; inset: 2% 0 10%; container-type: size; transform-style: preserve-3d; transform: rotateX(var(--tilt)); --ri: 2.5cqw; }   /* --ri: the sun's wobble radius, the one knob for how close the sun sits to the barycenter (the planets' radius --ro comes from build_site.py) */
.plane > * { position: absolute; left: 50%; top: 50%; transform-style: preserve-3d; }
.orb { width: calc(var(--ro) * 2); aspect-ratio: 1 / 1; translate: -50% -50%; border-radius: 50%; border: 2.5px solid var(--machine);
  box-shadow: inset 0 0 0 1px rgba(195,201,191,.45), 0 0 0 .5px var(--machine-d); }   /* a steel tube: a light inner edge and a dark outer edge, both steps of steel */
.shadow { position: absolute; left: 0; top: 0; width: calc(var(--s) * 9cqw); height: calc(var(--s) * 9cqw); translate: -40% -40%; border-radius: 50%; background: radial-gradient(circle, var(--shade-deep), transparent 68%); }
.pool { position: absolute; left: 0; top: 0; width: 54cqw; height: 54cqw; translate: -50% -50%; border-radius: 50%; background: radial-gradient(circle, rgba(226,180,75,.26), rgba(226,180,75,.07) 44%, transparent 70%); }
.orb.outer { animation: orbit var(--t) linear infinite; }
.orb.inner { width: calc(var(--ri) * 2); border-color: var(--sun); border-width: 2px; }
/* The sun's carrier: its own crank on the spindle, turning at its own slower rate (a slow wobble about the barycenter). */
.carrier { width: 0; height: 0; animation: orbit var(--t) linear infinite; }
.sunbar { position: absolute; left: 0; top: 0; width: 5px; height: var(--ri); translate: -50% 0; border-radius: 3px; background: linear-gradient(90deg, var(--machine-d), var(--machine-l) 40%, var(--machine) 60%, var(--machine-d)); }
@keyframes orbit { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes counter { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }
.bar { position: absolute; left: 50%; top: calc(50% - var(--ro)); width: 5px; height: var(--ro); translate: -50% 0; border-radius: 3px;
  background: linear-gradient(90deg, var(--machine-d), var(--machine-l) 40%, var(--machine) 60%, var(--machine-d)); }   /* the planets' bar, steel: from the heaviest body in to the hub */
.bar::before, .bar::after { content: ""; position: absolute; left: 50%; width: 11px; height: 11px; translate: -50% -50%; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #efdca8, var(--fitting) 55%, var(--fitting-d)); }   /* a brass end cap at the outer body (a fitting); the sun covers its own end */
.bar::before { top: 0; } .bar::after { display: none; }
.hub { width: 7cqw; height: 7cqw; translate: -50% -50%; border-radius: 50%; border: 2px solid var(--machine); background: radial-gradient(circle, rgba(152,160,149,.3), rgba(152,160,149,.06) 60%, transparent 70%); box-shadow: inset 0 0 0 2.5px var(--fitting); }   /* the steel bearing the spindle stands in, with a brass collar */
.arm { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-style: preserve-3d; transform: rotate(var(--a)) translateY(calc(-1 * var(--r))) rotate(calc(-1 * var(--a))); }
.counter { position: absolute; left: 0; top: 0; transform-style: preserve-3d; animation: counter var(--t) linear infinite; }
.planet { position: absolute; left: 0; top: 0; transform: translate(-50%, -100%) rotateX(calc(-1 * var(--tilt))); transform-origin: 50% 100%;
  display: flex; flex-direction: column; align-items: center; color: var(--neutral); }
.planet { --b: calc(var(--s) * clamp(30px, 4.6cqw, 50px)); }
.planet .ball { position: relative; width: var(--b); aspect-ratio: 1 / 1; border-radius: 50%; overflow: hidden;
  background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--c) 70%, #000), color-mix(in srgb, var(--c) 30%, #000) 85%);
  box-shadow: 0 0 0 1.5px rgba(242,230,206,.35), 0 6px 14px var(--shade-deep); transition: transform .3s var(--ease); margin-bottom: calc(var(--b) / -2); }   /* the sphere sits centred on its ring, as in the flat orbit */
.planet .lit { position: absolute; inset: 0; border-radius: 50%; transform: rotate(var(--a)); animation: orbit var(--t) linear infinite;
  background: radial-gradient(circle at 50% 18%, #fff8e1 0 5%, transparent 6%), radial-gradient(circle at 50% 14%, var(--c) 0 24%, color-mix(in srgb, var(--c) 62%, #000) 58%, transparent 92%); }
.planet .stem { width: 1.5px; height: clamp(22px, 3.4cqw, 34px); background: linear-gradient(var(--fitting), rgba(165,138,84,.2)); }   /* a small brass joint */
.planet .pl { font: 600 11px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; background: rgba(19,30,34,.78); border: 1px solid rgba(242,230,206,.5); padding: 6px 9px; border-radius: 999px; white-space: nowrap;
  backdrop-filter: blur(4px); transition: background .2s, color .2s; }
/* The sun (P-049 F02): the same column as a planet (label, stem, sphere), so the name rides in a bubble above the sphere instead of inside it.
   Gold bubble, display face, a touch larger: clearly the main one. Its label sits at the planets' label height, so two bubbles could only meet
   side by side, and every planet is placed far enough from the sun (build_site.py PLANETS) that they never do. */
.planet.sun { --b: 15cqw; }
.planet.sun .ball.core { overflow: visible; background: radial-gradient(circle at 36% 30%, #fff4cc, #f0c75a 34%, #e2b44b 52%, #c8862c 82%, #8a5a1c);
  box-shadow: 0 0 0 1.5px rgba(242,230,206,.35), 0 0 50px 10px rgba(226,180,75,.28), inset -10px -12px 30px rgba(120,70,20,.45); }
.planet.sun .stem { height: 10px; width: 2px; background: var(--fitting); }
.planet.sun .pl { background: var(--sun); color: var(--primary); border: 1.5px solid var(--primary); padding: 7px 11px; width: max-content; max-width: 37cqw; text-transform: none; letter-spacing: -.02em;
  font: 400 clamp(13px, 2.6cqw, 17px)/1.05 var(--display); text-align: center; backdrop-filter: none; box-shadow: 0 3px 12px var(--shade-deep); }
.planet.sun .name { display: block; overflow-wrap: normal; word-break: keep-all; text-wrap: balance; }   /* site.js bsFit: 2 lines at most, breaks only between words, shrinks, then ends in an ellipsis */
.pin { width: 0; height: 0; transform: rotateX(calc(-1 * var(--tilt))); }
.pin i { position: absolute; left: -1.5px; bottom: 0; width: 3px; height: 8.8cqw; background: linear-gradient(90deg, var(--machine-d), var(--machine-l), var(--machine-d)); }   /* the steel spindle */
.pin b { position: absolute; left: -5px; bottom: 8.8cqw; width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, var(--neutral) 50%, #b9ab8e); box-shadow: 0 0 10px rgba(242,230,206,.7); }   /* the barycenter marker */
.pin::after { content: ""; position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--fitting-l); transform: rotateX(var(--tilt)); }   /* the brass collar at the spindle's foot */
.system.paused .outer, .system.paused .carrier, .system.paused .counter, .system.paused .lit { animation-play-state: paused; }
.hero.paused .star { animation-play-state: paused; }
.system.reverse .outer, .system.reverse .carrier, .system.reverse .counter, .system.reverse .lit { animation-direction: reverse; }
.system .pause { position: absolute; right: 0; bottom: 2%; background: none; border: 1px solid rgba(242,230,206,.5); color: var(--neutral); border-radius: 4px; font: 600 11px/14px var(--sans); letter-spacing: .1em; text-transform: uppercase; padding: 5px 9px; cursor: pointer; }
.fig { display: block; font: 600 10px/14px var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }   /* the FIG. line under a piece of art; it only describes the drawing */
.hero .star { position: absolute; left: var(--x); top: var(--y); width: var(--w); height: var(--w); opacity: .8; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) { .hero .star { animation: twinkle 3.6s ease-in-out var(--d) infinite alternate; } @keyframes twinkle { from { opacity: .35; transform: scale(.8); } to { opacity: .95; transform: scale(1.05); } } }
@media (max-width: 860px) { .hero .stage { grid-template-columns: 1fr; } .system { justify-self: center; max-width: 440px; } .system .pause { position: static; margin-top: 10px; } .system { aspect-ratio: auto; } .system .plane { position: relative; inset: auto; aspect-ratio: 1 / 1; margin: -6% 0 -14%; transform: rotateX(var(--tilt)); } .hero .star { display: none; } }

.close .rev { display: inline-block; }
@media (prefers-reduced-motion: no-preference) { .close:hover .rev { animation: spin 1.1s var(--ease); } }
/* Services as an editorial list */
.ways { list-style: none; margin: 56px 0 0; padding: 0; border-top: 2px solid var(--primary); }
.way { display: grid; grid-template-columns: 56px 92px minmax(0, 1.25fr) minmax(0, 1fr) auto; gap: 16px 28px; align-items: center; padding: 26px 8px; border-bottom: 2px solid var(--primary); color: var(--ink); text-decoration: none; position: relative; isolation: isolate; }
.way::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--sun); transform: scaleY(0); transform-origin: bottom; transition: transform .35s var(--ease); }
.way:hover::before, .way:focus-visible::before { transform: scaleY(1); }
.way .no { font: 600 14px/1 var(--mono); }
.way .icon { width: 84px; height: 84px; }
.way .what .eyebrow { margin-bottom: 4px; }
.way .h { display: block; font: 400 clamp(26px, 3vw, 44px)/1 var(--display); letter-spacing: -.03em; }
.way .b { font-size: 18px; line-height: 1.35; }
.way .from { font: 400 14px/1 var(--mono); white-space: nowrap; }
.way:hover .icon .ring { transform: rotate(140deg); }
@media (max-width: 860px) { .way { grid-template-columns: 64px minmax(0, 1fr); } .way .no { display: none; } .way .icon { width: 64px; height: 64px; grid-row: span 3; } }

/* Cobalt proof field: the second accent, used once */
.cobalt { background: radial-gradient(circle at 92% 12%, var(--orange) 0 12%, transparent 12.2%), radial-gradient(circle at 92% 12%, transparent 0 17%, rgba(242,230,206,.25) 17.2% 17.5%, transparent 17.7%), var(--grain), var(--cobalt); color: var(--neutral); overflow: hidden; }
.cobalt .eyebrow { color: var(--neutral); }
.cobalt .eyebrow::before { background: var(--sun); }
.cobalt .numbers > div { border-top-color: rgba(242,230,206,.45); }
.cobalt .numbers p { color: var(--neutral); }
.cobalt .numbers .n { color: var(--sun); }

/* The portfolio story */
.story { padding-top: clamp(56px, 8vw, 104px); }
.story-title { font-size: clamp(48px, 7.6vw, 120px); line-height: .95; letter-spacing: -.04em; margin-bottom: 48px; }
.beats { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(40px, 6vw, 96px) clamp(40px, 6vw, 96px); align-items: center; }
.beats > :nth-child(1) { order: 1; } .beats > :nth-child(2) { order: 2; } .beats > :nth-child(3) { order: 4; } .beats > :nth-child(4) { order: 3; } .beats > :nth-child(5) { order: 5; }
.beats > :nth-child(5) { grid-column: 1 / -1; max-width: 720px; }
.beat .step { font: 600 13px/1 var(--mono); letter-spacing: .2em; color: var(--muted); display: block; margin-bottom: 14px; }
.beat h3 { font-size: clamp(30px, 3.4vw, 52px); line-height: 1; letter-spacing: -.03em; margin-bottom: 16px; }
.beat .big-num { font: 400 clamp(44px, 5.4vw, 84px)/1 var(--display); letter-spacing: -.03em; color: var(--red); margin: 22px 0 6px; white-space: nowrap; }
.beat-art { margin: 0; border: 1.5px solid var(--primary); border-radius: 12px; overflow: hidden; box-shadow: 10px 10px 0 var(--primary); background: var(--raised); rotate: -1.2deg; position: relative; }
.beat-art.tilt { rotate: 1.4deg; }
.beat-art img { display: block; width: 100%; }
@media (max-width: 860px) { .beats { grid-template-columns: 1fr; } .beats > :nth-child(n) { order: 0; } .beat-art { box-shadow: 6px 6px 0 var(--primary); } }

/* The visitor's name in every opener */
.art-name { font: 400 22px/1 var(--display); fill: var(--primary); letter-spacing: -.01em; paint-order: stroke; stroke: var(--neutral); stroke-width: 5px; stroke-linejoin: round; }
/* The About terminal: the name glows on the screen in the phosphor colour; the nameplate text is tiny mono */
.crt-name { font: 600 14px/1 var(--mono); fill: var(--glass); letter-spacing: .04em; }
.plate-t { font: 600 7px/1 var(--mono); fill: var(--primary); letter-spacing: .14em; text-transform: uppercase; }
.plate-t.s { font-size: 5.5px; letter-spacing: .1em; }

/* Pages open from the center out */
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) { animation: none; }
  ::view-transition-new(root) { animation: .7s var(--ease) both vt-center; }
  @keyframes vt-center { from { clip-path: circle(0 at 50% 45%); } to { clip-path: circle(150% at 50% 45%); } }
}
@media (prefers-reduced-motion: reduce) { .orb, .carrier, .arm, .counter, .lit, .hero .star { animation: none !important; } .system .pause { display: none; } }

@media (max-width: 520px) { .hero .actions { flex-direction: column; align-items: stretch; } .hero .actions .btn { justify-content: center; } }

.hero .stage { align-items: start; } .hero .copy { padding-top: 3vh; }
/* Phones: copy and tagline, then the art, then the two buttons (the art keeps its aspect-ratio box, so nothing shifts) */
@media (max-width: 700px) { .hero .copy { display: contents; } .hero .copy > * { order: 1; } .hero .stage > .system, .hero .stage > .model { order: 2; } .hero .copy > .actions { order: 3; } .hero .stage { gap: 0; } .hero .namer { margin: 8px 0 12px; } .hero .system { margin-bottom: 8px; } .hero .copy > .actions { margin-top: 12px; } }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* The terminal boot (first visit only, built by site.js when no name is saved): a green CRT in the site palette over the whole page.
   The page underneath stays complete; the overlay exists only when the script runs. Skip or Escape opens the site as it is. */
.boot { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: 24px var(--gr) 24px var(--gl); background: var(--deep); color: var(--glass); font: 400 clamp(15px, 2.2vw, 20px)/1.6 var(--mono);
  background-image: radial-gradient(ellipse at 50% 45%, rgba(134,178,184,.12), transparent 62%), repeating-linear-gradient(0deg, transparent 0 3px, rgba(8,14,18,.3) 3px 4px); transition: opacity .45s var(--ease); }   /* static scanlines in a step down of the night ground, one soft glow, no flicker */
.boot.out { opacity: 0; pointer-events: none; }
html.booting { overflow: hidden; }
.boot .crt { width: min(100%, 720px); }
.boot p { margin: 0 0 .6em; max-width: none; text-shadow: 0 0 6px rgba(134,178,184,.55); }
.boot .bhead { color: var(--sun); letter-spacing: .14em; text-transform: uppercase; font-size: .78em; margin-bottom: 1.4em; }
.boot .bhead::before { content: "■ "; }
.boot .bline { text-transform: uppercase; letter-spacing: .04em; }
.boot .bform { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .6ch; margin: 0 0 .6em; }
.boot label { white-space: nowrap; letter-spacing: .06em; text-transform: uppercase; }
.boot .bfield { display: inline-flex; align-items: baseline; min-width: 0; }
.boot input { width: 1ch; min-width: 1ch; max-width: min(33ch, 100%); font: inherit; color: var(--neutral); background: none; border: 0; padding: 0; margin: 0; outline: 0; caret-color: transparent; text-shadow: 0 0 6px rgba(242,230,206,.5); }
.boot .cursor { display: inline-block; width: .7ch; height: 1.05em; translate: 0 .18em; background: var(--glass); box-shadow: 0 0 8px rgba(134,178,184,.7); }   /* a block in the CRT glow; it blinks about 1 Hz for 5 s, then holds */
.boot .breset { background: none; border: 0; color: var(--glass); font: inherit; font-size: .85em; letter-spacing: .1em; cursor: pointer; padding: 0 .4ch; margin-left: 1ch; opacity: .85; }
.boot .breset:hover, .boot .breset:focus-visible { color: var(--sun); opacity: 1; outline-color: var(--sun); }
.boot .bgo { display: block; flex-basis: 100%; width: max-content; margin-top: 1em; padding: 10px 16px; background: none; border: 1.5px solid var(--sun); border-radius: 4px; color: var(--sun); font: inherit; font-size: .85em; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.boot .bgo:hover, .boot .bgo:focus-visible { background: var(--sun); color: var(--deep); outline: 2px solid var(--sun); outline-offset: 2px; }
.boot .bgo:disabled { opacity: .5; cursor: default; }
.boot .bfine { font-size: .7em; margin-top: 1.2em; }
.boot .bstatus { color: var(--neutral); min-height: 1.6em; opacity: .9; text-transform: uppercase; letter-spacing: .04em; }
.boot .bskip { position: absolute; left: 50%; bottom: max(28px, env(safe-area-inset-bottom, 0px)); translate: -50% 0; background: none; border: 0; color: var(--glass); font: inherit; font-size: .85em; letter-spacing: .1em; cursor: pointer; padding: 10px 14px; opacity: .85; }
.boot .bskip:hover, .boot .bskip:focus-visible { color: var(--sun); opacity: 1; outline-color: var(--sun); }
@media (prefers-reduced-motion: no-preference) { .boot .cursor { animation: blink 1s steps(1) 5; } @keyframes blink { 50% { opacity: 0; } } }