/* ON DERE — site styles.
   Layout: full-bleed animated hero, then alternating concrete / navy bands on a 1240px grid, content left-aligned. */
@font-face { font-family: "Forum"; src: url("../fonts/forum-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Forum"; src: url("../fonts/forum-latin-ext-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Forum"; src: url("../fonts/forum-cyrillic-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Onest"; src: url("../fonts/onest-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Onest"; src: url("../fonts/onest-latin-ext-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Onest"; src: url("../fonts/onest-cyrillic-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Onest"; src: url("../fonts/onest-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Onest"; src: url("../fonts/onest-latin-ext-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Onest"; src: url("../fonts/onest-cyrillic-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Onest"; src: url("../fonts/onest-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Onest"; src: url("../fonts/onest-latin-ext-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Onest"; src: url("../fonts/onest-cyrillic-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }

:root {
  /* brand, sampled from the ON DERE logo */
  --navy: #0A2350;        /* logo navy */
  --navy-deep: #061633;   /* night sky, footer */
  --navy-soft: #163A78;
  --gold: #C9982F;        /* logo gold */
  --gold-light: #EBCB7A;  /* gold on navy */
  --gold-ink: #85610F;    /* gold as text on light grounds (≥ 4.5:1) */
  --concrete: #EEF1F5;    /* light band */
  --paper: #FFFFFF;
  --ink: #0D1B33;
  --ink-2: #44526B;
  --line: #D3D9E3;
  --on-navy: #EEF2F9;
  --on-navy-2: #AEBBD3;
  --asphalt: #1B1E23;
  /* film grain for the dark bands: a 160px noise tile, white at 5 % */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  /* CAD drawing: AutoCAD dark model space and ACI layer colours */
  --cad-bg: #212830;
  --cad-grid: #2E3542;
  --cad-grid-major: #3B4454;
  --cad-ui: #2A313B;
  --cad-ui-2: #323A46;
  --cad-ui-line: #414B5A;
  --cad-ui-text: #C8D0DB;
  --cad-ui-dim: #8A95A5;
  --cad-ui-on: #5AB0FF;
  --cad-frame: #FFFFFF;
  --cad-axis: #FF3B30;
  --cad-edge: #FFFFFF;
  --cad-curb: #00D4FF;
  --cad-walk: #9AA0A8;
  --cad-hatch: #7A7F88;
  --cad-marking: #FFD60A;
  --cad-dim: #34C759;
  --cad-text: #FFFFFF;
  --cad-snap: #C8F03C;
  --cad-cursor: #FFFFFF;

  --f-display: "Forum", "Times New Roman", Georgia, serif;
  --f-body: "Onest", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --f-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; /* CAD command line only */

  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 72px; --s-9: 112px;
  --r-s: 4px; --r-m: 10px; --r-l: 18px;
  --wrap: 1240px;
  --ease: cubic-bezier(.2,.7,.2,1);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 400 17px/1.6 var(--f-body); color: var(--ink); background: var(--concrete); overflow-x: hidden; }
img { max-width: 100%; display: block; }
button, input, textarea { font: inherit; color: inherit; }
a { color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 3px; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--gold); color: var(--navy); padding: 8px 14px; border-radius: var(--r-s); }
.skip:focus { left: 12px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * max(24px, env(safe-area-inset-left, 0px))); margin-inline: auto; padding-left: max(24px, env(safe-area-inset-left, 0px)); padding-right: max(24px, env(safe-area-inset-right, 0px)); }
@media (max-width: 600px) { .wrap { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); } }

/* type scale (1.25 major third, display steps doubled) */
.h2 { font: 400 clamp(34px, 4.6vw, 56px)/1.08 var(--f-display); letter-spacing: .01em; margin: 0 0 var(--s-5); text-wrap: balance; color: inherit; }
.lead { font-size: clamp(19px, 1.6vw, 22px); line-height: 1.5; margin: 0 0 var(--s-5); max-width: 62ch; }
.sec-intro { margin: 0; color: var(--ink-2); max-width: 56ch; }
.prose p { margin: 0 0 var(--s-4); max-width: 64ch; color: var(--ink-2); }
.sec-head { margin-bottom: var(--s-7); display: grid; gap: var(--s-3); }
.sec-head .h2 { margin: 0; }
.sec-head--row { display: flex; justify-content: space-between; align-items: end; gap: var(--s-5); flex-wrap: wrap; }
@media (max-width: 900px) {
  /* phones: section heads sit on the centre line, content blocks span the full width under them */
  .sec-head, .process__head { justify-items: center; text-align: center; }
  .sec-head .sec-intro, .process__head .sec-intro { margin-inline: auto; }
  .sec-head--row { flex-direction: column; align-items: center; }
}
@media (max-width: 600px) { :root { --s-9: 72px; --s-7: 32px; } .h2 { font-size: clamp(30px, 8.6vw, 36px); } }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 26px; border-radius: var(--r-s); font-weight: 500; font-size: 16px; text-decoration: none; border: 1.5px solid transparent; cursor: pointer; transition: background .2s, color .2s, border-color .2s, transform .2s var(--ease); }
.btn:active { transform: translateY(1px); }
.btn--gold { background: linear-gradient(180deg, #E2B958, var(--gold)); color: var(--navy-deep); }
.btn--gold:hover { background: linear-gradient(180deg, #ECC86C, #D4A43A); }
.btn--ghost { border-color: rgba(238,242,249,.45); color: var(--on-navy); background: rgba(6,22,51,.25); backdrop-filter: blur(4px); }
.btn--ghost:hover { border-color: var(--gold-light); color: var(--gold-light); }
.btn--navy { background: var(--navy); color: #fff; }
.btn--navy:hover { background: var(--navy-soft); }
.btn[disabled] { opacity: .6; cursor: progress; }
.round { display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid var(--line); background: var(--paper); color: var(--ink); cursor: pointer; transition: border-color .2s, background .2s; }
.round:hover { border-color: var(--navy); }

/* header */
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 60; background: var(--navy-deep); }
.top { position: fixed; top: env(safe-area-inset-top, 0px); left: 0; right: 0; z-index: 50; transition: background .3s, box-shadow .3s; }
.top__in { max-width: calc(var(--wrap) + 48px); margin: 0 auto; padding: 12px max(24px, env(safe-area-inset-right, 0px)) 22px max(24px, env(safe-area-inset-left, 0px)); display: flex; align-items: center; gap: var(--s-5); }
.top.is-solid { background: rgba(6,22,51,.94); backdrop-filter: blur(10px); box-shadow: 0 1px 0 rgba(235,203,122,.18); }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; flex: none; }
.brand__mark { height: 40px; width: auto; }
.brand__word { height: 20px; width: auto; }
.nav { display: flex; gap: var(--s-5); margin-left: auto; }
.nav a { color: var(--on-navy); text-decoration: none; font-size: 15px; font-weight: 500; padding: 6px 0; position: relative; }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--gold-light); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); }
.nav a:hover::after, .nav a.is-active::after { transform: scaleX(1); }
.langs { display: flex; border: 1px solid rgba(238,242,249,.3); border-radius: var(--r-s); overflow: hidden; flex: none; }
.langs button { background: none; border: 0; color: var(--on-navy-2); font-size: 13px; font-weight: 700; letter-spacing: .06em; padding: 7px 10px; cursor: pointer; min-width: 40px; }
.langs button[aria-pressed="true"] { background: var(--gold); color: var(--navy-deep); }
.burger { display: none; width: 44px; height: 44px; border: 0; background: none; cursor: pointer; position: relative; flex: none; }
.burger span { position: absolute; left: 11px; right: 11px; height: 2px; background: var(--on-navy); transition: transform .3s, top .3s; }
.burger span:first-child { top: 17px; } .burger span:last-child { top: 25px; }
.burger[aria-expanded="true"] span:first-child { top: 21px; transform: rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { top: 21px; transform: rotate(-45deg); }
.progress { position: relative; height: 7px; }
.progress__road { position: absolute; inset: 0; background: radial-gradient(circle at 30% 40%, #857A66 0 1px, transparent 1.5px) 0 0/6px 6px, radial-gradient(circle at 70% 70%, #9A8F7A 0 1px, transparent 1.6px) 0 0/8px 7px, #5E5546; opacity: 0; transition: opacity .3s; }
.progress__done { position: absolute; left: 0; top: 0; bottom: 0; background: repeating-linear-gradient(90deg, transparent 0 10px, rgba(236,239,243,.85) 10px 22px, transparent 22px 34px) 0 3px/100% 1.5px no-repeat, radial-gradient(circle at 40% 50%, #2A2E36 0 .8px, transparent 1px) 0 0/5px 5px, #17191E; opacity: 0; transition: opacity .3s; }
.progress__roller { position: absolute; bottom: 2px; left: 0; width: 34px; height: 26px; transform: translateX(-50%); opacity: 0; transition: opacity .3s; pointer-events: none; overflow: visible; filter: drop-shadow(0 2px 2px rgba(0,0,0,.5)); }
.progress__roller .beacon { animation: beacon 1s ease-in-out infinite; }
.top.is-solid .progress__road, .top.is-solid .progress__roller, .top.is-solid .progress__done { opacity: 1; }
@keyframes beacon { 0%, 100% { opacity: .1; } 50% { opacity: 1; } }

/* loading screen */
.loader { position: fixed; inset: 0; z-index: 200; background: radial-gradient(900px 500px at 50% 30%, #163A78, transparent 70%), #050F26; display: grid; place-items: center; padding: 24px; transition: transform .85s cubic-bezier(.7,0,.2,1), opacity .6s; animation: loaderFailsafe 0s 9s forwards; }
.loader__in { display: grid; justify-items: center; gap: 18px; width: min(420px, 100%); }
.loader__mark { width: 120px; height: auto; animation: markIn .9s var(--ease) both; }
.loader__road { width: 100%; height: auto; overflow: hidden; border-radius: 4px; }
.loader__pct { font: 400 44px/1 var(--f-display); color: var(--gold-light); font-variant-numeric: tabular-nums; }
.loader__pct small { font-size: .5em; margin-left: 2px; }
.loader.is-done { transform: translateY(-100%); }
html.is-loading, html.is-loading body { overflow: hidden; }
@keyframes markIn { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes loaderFailsafe { to { visibility: hidden; opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .loader.is-done { transform: none; opacity: 0; } }

@media (max-width: 1080px) {
  .burger { display: block; }
  .nav { position: fixed; inset: 0 0 auto; top: 0; padding: calc(84px + env(safe-area-inset-top, 0px)) max(24px, env(safe-area-inset-right, 0px)) 32px max(24px, env(safe-area-inset-left, 0px)); background: var(--navy-deep); flex-direction: column; gap: 0; transform: translateY(-105%); transition: transform .4s var(--ease); z-index: -1; box-shadow: 0 20px 40px rgba(0,0,0,.35); }
  .nav.is-open { transform: none; }
  .nav a { font: 400 28px/1.2 var(--f-display); padding: 14px 0; border-bottom: 1px solid rgba(238,242,249,.12); }
  .nav a::after { display: none; }
  .langs { margin-left: auto; }
}
@media (min-width: 1081px) and (max-width: 1260px) { .top__in { gap: var(--s-4); } .nav { gap: 16px; } .nav a { font-size: 14px; } }
@media (max-width: 340px) { .brand__word { display: none; } }

/* phone navigation: the top bar keeps the logo and languages, sections move to a bottom bar + sheet */
.bnav, .msheet { display: none; }
@media (max-width: 900px) {
  :root { --bnav-h: 62px; --bnav-gap: 10px; --bnav-space: calc(var(--bnav-h) + var(--bnav-gap) + env(safe-area-inset-bottom, 0px)); }
  .burger, .nav { display: none; }
  .top__in { padding: 8px max(16px, env(safe-area-inset-right, 0px)) 15px max(16px, env(safe-area-inset-left, 0px)); gap: 12px; }
  .brand__mark { height: 34px; }
  .brand__word { height: 17px; }
  .langs button { min-width: 38px; padding: 6px 8px; }

  .bnav { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr); position: fixed; z-index: 56; left: 10px; right: 10px; bottom: calc(var(--bnav-gap) + env(safe-area-inset-bottom, 0px)); max-width: 520px; height: var(--bnav-h); margin-inline: auto; padding: 0 4px 8px; border-radius: 22px; background: rgba(6,22,51,.9); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); box-shadow: 0 16px 36px -14px rgba(0,0,0,.7), inset 0 0 0 1px rgba(235,203,122,.16); transition: transform .35s var(--ease), opacity .3s; }
  .bnav__item { position: relative; display: grid; justify-items: center; align-content: end; gap: 3px; min-width: 0; height: 100%; padding: 0 2px; border: 0; background: none; color: var(--on-navy-2); font: 500 11px/1.2 var(--f-body); text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: color .25s; }
  .bnav__item > svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s var(--ease); }
  .bnav__item > span:last-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .bnav__item::before { content: ""; position: absolute; top: 0; left: 50%; width: 20px; height: 3px; margin-left: -10px; border-radius: 0 0 3px 3px; background: var(--gold-light); transform: scaleX(0); transition: transform .3s var(--ease); }
  .bnav__item.is-active, .bnav__menu[aria-expanded="true"] { color: var(--gold-light); }
  .bnav__item.is-active::before { transform: none; }
  .bnav__item:active > svg { transform: scale(.9); }
  .bnav__call { color: var(--gold-light); }
  .bnav__call::before { display: none; }
  .bnav__fab { position: relative; display: grid; place-items: center; width: 54px; height: 54px; margin: -22px 0 1px; border-radius: 50%; background: linear-gradient(180deg, #E2B958, var(--gold)); color: var(--navy-deep); box-shadow: 0 0 0 5px rgba(6,22,51,.94), 0 12px 24px -6px rgba(201,152,47,.6); transition: transform .3s var(--ease); }
  .bnav__fab svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
  .bnav__fab::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--gold-light); opacity: 0; animation: fabPulse 3.2s 2s var(--ease) infinite; }
  .bnav__call:active .bnav__fab { transform: scale(.94); }
  .bnav__menu path { transform-box: view-box; transform-origin: 12px 12px; transition: transform .35s var(--ease), opacity .2s; }
  .bnav__menu[aria-expanded="true"] .bnav__m1 { transform: translateY(5px) rotate(45deg); }
  .bnav__menu[aria-expanded="true"] .bnav__m2 { opacity: 0; }
  .bnav__menu[aria-expanded="true"] .bnav__m3 { transform: translateY(-5px) rotate(-45deg); }
  /* the keyboard needs the room while the visitor types in the form */
  body:has(.form :is(input, textarea):focus) .bnav { transform: translateY(calc(100% + 24px)); opacity: 0; pointer-events: none; }

  .msheet { display: block; position: fixed; inset: 0; z-index: 55; visibility: hidden; pointer-events: none; transition: visibility 0s .45s; }
  .msheet.is-open { visibility: visible; pointer-events: auto; transition: none; }
  .msheet__shade { position: absolute; inset: 0; background: rgba(4,12,32,.6); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); opacity: 0; transition: opacity .4s; }
  .msheet.is-open .msheet__shade { opacity: 1; }
  .msheet__panel { position: absolute; left: 0; right: 0; bottom: 0; max-width: 560px; max-height: calc(100% - 56px - env(safe-area-inset-top, 0px)); margin-inline: auto; overflow-y: auto; overscroll-behavior: contain; padding: 10px max(16px, env(safe-area-inset-right, 0px)) calc(var(--bnav-space) + 30px) max(16px, env(safe-area-inset-left, 0px)); border-radius: 26px 26px 0 0; background: radial-gradient(420px 200px at 50% 0, rgba(22,58,120,.55), transparent 70%), var(--navy-deep); color: var(--on-navy); box-shadow: 0 -24px 60px rgba(0,0,0,.45), inset 0 1px 0 rgba(235,203,122,.22); transform: translateY(104%); transition: transform .45s var(--ease); }
  .msheet.is-open .msheet__panel { transform: none; }
  .msheet__grip { display: block; width: 40px; height: 4px; margin: 0 auto 14px; border-radius: 4px; background: rgba(238,242,249,.22); }
  .msheet__title { margin: 0 0 16px; text-align: center; font: 400 26px/1.1 var(--f-display); color: #fff; }
  .msheet__nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .msheet__nav a { display: flex; align-items: center; gap: 12px; min-width: 0; min-height: 58px; padding: 10px 14px; border-radius: 14px; background: rgba(238,242,249,.05); box-shadow: inset 0 0 0 1px rgba(238,242,249,.09); color: var(--on-navy); font-size: 15px; font-weight: 500; line-height: 1.2; text-decoration: none; transition: background .2s, box-shadow .2s, color .2s; -webkit-tap-highlight-color: transparent; }
  .msheet__nav a svg { flex: none; width: 24px; height: 24px; fill: none; stroke: var(--gold-light); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
  .msheet__nav a span { min-width: 0; overflow-wrap: anywhere; }
  .msheet__nav a.is-wide { grid-column: 1 / -1; justify-content: center; }
  .msheet__nav a.is-active { background: rgba(235,203,122,.12); box-shadow: inset 0 0 0 1px rgba(235,203,122,.5); color: #fff; }
  .msheet__nav a:active { background: rgba(235,203,122,.16); }
  .msheet__reach { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(238,242,249,.1); }
  .msheet__reach:empty { display: none; }
  .msheet__reach .btn { min-height: 50px; padding: 0 12px; }
  .msheet__reach .btn:only-child { grid-column: 1 / -1; }
  .msheet__reach svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; }
  .msheet.is-open .msheet__nav a, .msheet.is-open .msheet__reach .btn { animation: fade .45s var(--ease) both; }
  .msheet.is-open .msheet__nav a:nth-child(2) { animation-delay: .03s; } .msheet.is-open .msheet__nav a:nth-child(3) { animation-delay: .06s; }
  .msheet.is-open .msheet__nav a:nth-child(4) { animation-delay: .09s; } .msheet.is-open .msheet__nav a:nth-child(5) { animation-delay: .12s; }
  .msheet.is-open .msheet__nav a:nth-child(6) { animation-delay: .15s; } .msheet.is-open .msheet__nav a:nth-child(7) { animation-delay: .18s; }
  .msheet.is-open .msheet__reach .btn { animation-delay: .2s; }
  html.is-sheet, html.is-sheet body { overflow: hidden; }
}
@media (max-width: 374px) { .bnav__item { font-size: 10.5px; padding: 0 1px; } }
@keyframes fabPulse { 0% { opacity: .7; transform: scale(1); } 60%, 100% { opacity: 0; transform: scale(1.45); } }

/* hero: banner slider (js/banners.js). Each slide = media (scene svg / photo / video) + shade + text. */
.hero { position: relative; min-height: clamp(760px, 100svh, 1000px); background: #050F26; color: var(--on-navy); overflow: hidden; isolation: isolate; }
.hero__slides { position: absolute; inset: 0; }
.slide { position: absolute; inset: 0; display: flex; visibility: hidden; }
.slide.is-on, .slide.is-out { visibility: visible; }
.slide.is-on { z-index: 2; } .slide.is-out { z-index: 1; }
.slide__media { position: absolute; inset: 0; overflow: hidden; background: #050F26; }
.slide__media > svg, .slide__media > img, .slide__media > video { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; }
.slide__poster { transition: opacity .8s; }
.slide.is-playing .slide__poster { opacity: 0; }
.slide__shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(100deg, rgba(5,15,38,.72) 0%, rgba(5,15,38,.35) 38%, rgba(5,15,38,0) 62%); }
/* photos and videos: the admin sets how dark the shade is (--shade 0…0.9) */
.slide--image .slide__shade, .slide--video .slide__shade { background: linear-gradient(100deg, rgba(5,15,38,calc(var(--shade) + .25)) 0%, rgba(5,15,38,var(--shade)) 46%, rgba(5,15,38,calc(var(--shade) * .35)) 100%), linear-gradient(0deg, rgba(5,15,38,.6) 0%, rgba(5,15,38,0) 32%), linear-gradient(180deg, rgba(5,15,38,.55) 0%, rgba(5,15,38,0) 22%); }
.slide--image.is-on .slide__media > img { animation: kenBurns calc(var(--dur, 15s) + 3s) ease-out both; }
@keyframes kenBurns { from { transform: scale(1.12); } to { transform: scale(1.02); } }
.hero__in { position: relative; z-index: 2; padding-top: calc(120px + env(safe-area-inset-top, 0px)); padding-bottom: 130px; }
.hero__title { font: 400 clamp(40px, 5.4vw, 80px)/1.02 var(--f-display); letter-spacing: .005em; margin: 0 0 var(--s-5); max-width: 22ch; text-wrap: balance; color: #fff; text-shadow: 0 2px 30px rgba(5,15,38,.45); }
.hero__title .ln { display: block; overflow: hidden; }
.hero__title .ln > span { display: inline-block; }
.hero__sub { font-size: clamp(17px, 1.4vw, 20px); max-width: 54ch; color: #D6DEEC; margin: 0 0 var(--s-6); text-shadow: 0 1px 18px rgba(5,15,38,.5); }
.hero__cta { display: flex; gap: var(--s-3); flex-wrap: wrap; }
/* switching: the new slide is uncovered behind a gold line, like the edge of fresh asphalt */
.slide.is-enter { animation: wipeR 1.1s cubic-bezier(.7,0,.2,1) both; }
.slide.is-enter.is-back { animation-name: wipeL; }
.slide.is-on .hero__title .ln > span { animation: rise 1s .3s var(--ease) both; }
.slide.is-on .hero__sub, .slide.is-on .hero__cta { animation: fade .9s .55s var(--ease) both; }
.slide.is-out .slide__in { opacity: 0; transition: opacity .35s; }
.hero__wipe { position: absolute; top: 0; bottom: 0; left: 100%; z-index: 3; width: 3px; margin-left: -1px; background: linear-gradient(180deg, rgba(235,203,122,0), var(--gold-light) 18%, var(--gold) 82%, rgba(201,152,47,0)); box-shadow: 0 0 22px 5px rgba(235,203,122,.45); pointer-events: none; opacity: 0; }
.hero__wipe.is-go { animation: wipeBar 1.1s cubic-bezier(.7,0,.2,1) both; }
.hero__wipe.is-go.is-back { animation-name: wipeBarBack; }
.hero.is-static .slide, .hero.is-static .hero__wipe, .hero.is-static .slide .hero__title .ln > span, .hero.is-static .slide .hero__sub, .hero.is-static .slide .hero__cta, .hero.is-static .slide__media > img { animation: none !important; }
@keyframes wipeR { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }
@keyframes wipeL { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes wipeBar { 0% { left: 100%; opacity: 1; } 90% { opacity: 1; } 100% { left: 0%; opacity: 0; } }
@keyframes wipeBarBack { 0% { left: 0%; opacity: 1; } 90% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
@keyframes rise { from { transform: translateY(105%); } to { transform: none; } }
@keyframes fade { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
/* controls: one bar per banner fills over the interval, then the next banner comes */
.hero__ctrl { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; padding-bottom: 34px; pointer-events: none; }
.hero__ctrl-in { display: flex; align-items: center; gap: 24px; }
.hero__segs, .hero__btns { pointer-events: auto; }
.hero__segs { display: flex; gap: 10px; flex: 0 1 560px; min-width: 0; }
.hero__seg { flex: 1 1 0; min-width: 0; display: grid; gap: 9px; padding: 10px 0; border: 0; background: none; color: rgba(238,242,249,.55); font: 600 12px/1 var(--f-body); letter-spacing: .1em; text-align: left; cursor: pointer; transition: color .3s; -webkit-tap-highlight-color: transparent; }
.hero__seg:hover, .hero__seg.is-on { color: #fff; }
.hero__segbar { display: block; height: 3px; border-radius: 3px; background: rgba(238,242,249,.24); overflow: hidden; }
.hero__segbar b { display: block; height: 100%; background: linear-gradient(90deg, var(--gold), var(--gold-light)); transform: scaleX(0); transform-origin: left; }
.hero .hero__seg.is-on .hero__segbar b { animation: segFill var(--dur, 15s) linear forwards; animation-duration: var(--dur, 15s) !important; }
.hero.is-paused .hero__seg.is-on .hero__segbar b { animation-play-state: paused; }
.hero.is-manual .hero__seg.is-on .hero__segbar b { animation: none; transform: scaleX(1); }
@keyframes segFill { to { transform: scaleX(1); } }
.hero__btns { display: flex; gap: 8px; margin-left: auto; }
.hero__btn { display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border-radius: 50%; border: 1.5px solid rgba(238,242,249,.32); background: rgba(6,22,51,.35); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: var(--on-navy); cursor: pointer; transition: border-color .2s, color .2s, background .2s; -webkit-tap-highlight-color: transparent; }
.hero__btn:hover { border-color: var(--gold-light); color: var(--gold-light); }
.hero__btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hero__pause .i-play { display: none; } .hero__pause.is-play .i-play { display: block; fill: currentColor; stroke: none; } .hero__pause.is-play .i-pause { display: none; }
/* one tone for photos shot on different cameras (js/site.js sets data-tone from settings.photoTone); scans of documents and the lightbox keep their own colours */
html[data-tone="soft"] { --tone: saturate(.94) contrast(1.03) sepia(.05); }
html[data-tone="strong"] { --tone: saturate(.86) contrast(1.06) sepia(.13) hue-rotate(-5deg); }
html[data-tone] :is(.about__media img, .svc__frame img, .card img, .flag__media img, .flag__thumb img, .fleet__parkbtn img, .bay__stage--photo img, .bay__ph img, .gcard__img img, .phead__img, .slide--image .slide__media > img) { filter: var(--tone); }
html[data-tone] :is(.card, .flag__media, .flag__thumb):hover img { filter: none; }
/* scenes by day: the sky behind the text is bright, so the shade is stronger (data-tod is set by js/banners.js) */
.slide--scene[data-tod="day"] .slide__shade { background: linear-gradient(100deg, rgba(5,15,38,.78) 0%, rgba(5,15,38,.5) 40%, rgba(5,15,38,0) 66%); }
/* logo banners (js/scene-logo.js): the mark on the right, the text on the left; on a phone the mark sits under the text */
.lg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: flex-end; overflow: hidden; padding: 112px max(24px, calc((100vw - var(--wrap)) / 2)) 120px;
  background: radial-gradient(58% 72% at 72% 48%, rgba(22,58,120,.62), rgba(10,35,80,0) 72%), radial-gradient(42% 52% at 10% 100%, rgba(201,152,47,.10), rgba(201,152,47,0) 70%), var(--navy-deep); }
.lg__stage { position: relative; isolation: isolate; flex: none; width: min(46vw, 700px); aspect-ratio: 752 / 440; }
.lg__stage::before { content: ""; position: absolute; inset: -22% -16%; z-index: -1; background: radial-gradient(closest-side, rgba(201,152,47,.22), rgba(201,152,47,0) 72%); animation: lgBreath 6.5s ease-in-out infinite; }
.lg__mark { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: contain; }
.lg__dust, .lg__cv { position: absolute; pointer-events: none; }
.lg__dust { inset: 0; width: 100%; height: 100%; }
.lg__cv { left: -30%; top: -60%; width: 160%; height: 220%; }
/* a gold light runs across the mark: the stripe is a gradient masked by the mark itself */
.lg__shine { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen;
  -webkit-mask: var(--lg-mark) center / contain no-repeat; mask: var(--lg-mark) center / contain no-repeat;
  background: linear-gradient(104deg, rgba(255,247,222,0) 38%, rgba(255,247,222,.95) 50%, rgba(255,247,222,0) 62%) 135% 0 / 260% 100% no-repeat;
  animation: lgSweep 5.6s ease-in-out 1.9s infinite; }
.lg--shine .lg__mark { animation: lgIn 1.5s .25s var(--ease) both; }
/* floor by floor from the ground: the mark is uncovered in ten steps, a welding line climbs with it */
.lg--build .lg__mark { animation: lgBuild 4.4s steps(10, end) .35s both; }
.lg--build .lg__shine { animation-delay: 5.2s; }
.lg__weld { position: absolute; left: -7%; right: -7%; top: 100%; height: 2px; pointer-events: none;
  background: linear-gradient(90deg, rgba(235,203,122,0), var(--gold-light) 18%, #fff 50%, var(--gold-light) 82%, rgba(235,203,122,0)); box-shadow: 0 0 16px 3px rgba(235,203,122,.55);
  animation: lgWeld 4.4s steps(10, end) .35s both, lgOn .25s .1s both, lgOff .4s 4.85s forwards; }
.lg__spark { position: absolute; left: var(--x); top: -1px; width: 3px; height: 3px; border-radius: 50%; background: #FFF4D6; box-shadow: 0 0 7px 2px rgba(255,214,120,.9); opacity: 0; animation: lgSpark .85s ease-out infinite; }
.lg__grid { position: absolute; inset: -9% -7%; pointer-events: none; animation: lgGrid 6s ease-in-out .1s both;
  background: linear-gradient(rgba(235,203,122,.14) 1px, transparent 1px) 0 0 / 44px 44px, linear-gradient(90deg, rgba(235,203,122,.14) 1px, transparent 1px) 0 0 / 44px 44px;
  -webkit-mask: radial-gradient(closest-side, #000 55%, transparent); mask: radial-gradient(closest-side, #000 55%, transparent); }
@keyframes lgIn { from { opacity: 0; transform: translateY(18px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes lgSweep { 0% { background-position: 135% 0; } 45%, 100% { background-position: -35% 0; } }
@keyframes lgBreath { 0%, 100% { opacity: .75; transform: scale(1); } 50% { opacity: 1; transform: scale(1.06); } }
@keyframes lgBuild { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes lgWeld { from { top: 100%; } to { top: 0%; } }
@keyframes lgOn { from { opacity: 0; } to { opacity: 1; } }
@keyframes lgOff { from { opacity: 1; } to { opacity: 0; } }
@keyframes lgSpark { 0% { opacity: 1; transform: translate(0, 0); } 100% { opacity: 0; transform: translate(var(--dx), 42px) scale(.3); } }
@keyframes lgGrid { 0% { opacity: 0; } 12%, 62% { opacity: 1; } 100% { opacity: 0; } }
.lg.is-paused *, .lg.is-paused *::before, .lg.is-paused *::after { animation-play-state: paused !important; }
.lg.is-reset *, .lg.is-reset *::before, .lg.is-reset *::after { animation: none !important; }
.lg.is-still *, .lg.is-still *::before, .lg.is-still *::after { animation: none !important; }
.lg.is-still .lg__shine { display: none; }
@media (prefers-reduced-motion: reduce) { .lg *, .lg *::before, .lg *::after { animation: none !important; } .lg__shine, .lg__grid, .lg__weld { display: none; } }
/* the text keeps to the left of the mark, on the same centre line */
.slide--logo .hero__in { display: flex; flex-direction: column; justify-content: center; padding: 112px calc(min(46vw, 700px) + 56px) 120px 0; padding-left: max(24px, env(safe-area-inset-left, 0px)); }
.slide--logo .hero__title { font-size: clamp(34px, 4.3vw, 66px); }
@media (max-width: 900px) { .hero { min-height: max(620px, calc(100svh - var(--bnav-space))); } }
@media (max-width: 700px), (max-width: 900px) and (orientation: portrait) {
  /* text on the centre line at the top, the scene under it; the bottom bar floats over the road below */
  .slide--scene .slide__media { top: auto; height: 58%; }
  .slide--scene .slide__media::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 30%; z-index: 1; background: linear-gradient(180deg, #050F26, rgba(5,15,38,0)); pointer-events: none; }
  .hero__in { display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: calc(88px + env(safe-area-inset-top, 0px)); padding-bottom: 80px; }
  .hero__title { max-width: 14ch; margin-inline: auto; font-size: clamp(34px, 10.2vw, 46px); line-height: 1.04; margin-bottom: 16px; }
  .hero__sub { font-size: 16px; line-height: 1.55; max-width: 34ch; margin: 0 auto 22px; }
  .hero__cta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; width: 100%; max-width: 420px; }
  .hero__cta .btn { min-height: 48px; padding: 6px 10px; font-size: 15px; line-height: 1.2; text-align: center; }
  .hero__cta .btn:only-child { grid-column: 1 / -1; justify-self: center; min-width: 60%; }
  .slide__shade { background: linear-gradient(180deg, rgba(5,15,38,.82) 0%, rgba(5,15,38,.5) 44%, rgba(5,15,38,0) 62%); }
  .slide--scene[data-tod="day"] .slide__shade { background: linear-gradient(180deg, rgba(5,15,38,.9) 0%, rgba(5,15,38,.62) 44%, rgba(5,15,38,0) 62%); }
  .slide--image .slide__shade, .slide--video .slide__shade { background: linear-gradient(180deg, rgba(5,15,38,calc(var(--shade) + .35)) 0%, rgba(5,15,38,var(--shade)) 50%, rgba(5,15,38,calc(var(--shade) * .5)) 72%, rgba(5,15,38,.75) 100%); }
  .hero__ctrl { padding-bottom: 16px; }
  .hero__ctrl-in { justify-content: center; gap: 12px; }
  .hero__segs { flex: 0 1 260px; gap: 6px; }
  .hero__seg { padding: 12px 0; }
  .hero__segnum, .hero__prev, .hero__next { display: none; }
  .hero__btns { margin: 0; }
  .hero__btn { width: 36px; height: 36px; }
  .hero__btn svg { width: 16px; height: 16px; }
}
@media (max-width: 700px), (max-width: 900px) and (orientation: portrait) {
  .slide--logo .slide__media::before { height: 14%; }
  .lg { justify-content: center; padding: 0 20px 78px; }
  .lg__stage { width: min(86vw, 520px); }
  .slide--logo .hero__in { justify-content: flex-start; padding: calc(88px + env(safe-area-inset-top, 0px)) max(24px, env(safe-area-inset-right, 0px)) 80px max(24px, env(safe-area-inset-left, 0px)); }
  .slide--logo .hero__title { font-size: clamp(34px, 10.2vw, 46px); }
}

/* inner pages: a compact header, the scene of the page behind the title (js/phead.js) */
.phead { position: relative; overflow: hidden; background: #050F26; color: var(--on-navy); padding: calc(116px + env(safe-area-inset-top, 0px)) 0 clamp(40px, 4.5vw, 60px); isolation: isolate; }
.phead__bg { position: absolute; inset: 0; z-index: -1; }
.phead__art { position: absolute; inset: 0; -webkit-mask-image: linear-gradient(90deg, transparent 6%, #000 48%); mask-image: linear-gradient(90deg, transparent 6%, #000 48%); }
.phead__svg, .phead__img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.phead__img { object-fit: cover; }
.phead__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(5,15,38,.5) 0%, rgba(5,15,38,.12) 55%, transparent 100%); }
.phead.has-img .phead__art { display: none; }
.phead.has-img .phead__bg::after { background: linear-gradient(100deg, rgba(5,15,38,.85) 0%, rgba(5,15,38,.55) 55%, rgba(5,15,38,.35) 100%); }
.phead.no-art { background: radial-gradient(60% 140% at 88% 0%, rgba(22,58,120,.6), transparent 70%), #050F26; }
.phead.no-art .phead__bg::after { display: none; }
.phead__in { position: relative; display: grid; gap: 12px; justify-items: start; }
.crumbs { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--on-navy-2); }
.crumbs a { color: var(--on-navy-2); text-decoration: none; }
.crumbs a:hover { color: var(--gold-light); }
.crumbs__sep { width: 18px; height: 1.5px; background: var(--gold); opacity: .8; }
.crumbs [aria-current] { color: var(--gold-light); }
.phead__title { margin: 0; font: 400 clamp(38px, 4.8vw, 68px)/1.04 var(--f-display); color: #fff; text-wrap: balance; text-shadow: 0 0 18px rgba(5,15,38,.8); animation: fade .8s var(--ease) both; }
.phead__intro { margin: 0; max-width: 52ch; font-size: clamp(16px, 1.4vw, 19px); color: #D6DEEC; text-shadow: 0 0 14px rgba(5,15,38,.85), 0 1px 2px rgba(5,15,38,.6); animation: fade .8s .12s var(--ease) both; }
@media (max-width: 1180px) { .phead__art { inset: auto 0 0 auto; height: 84%; aspect-ratio: 1600 / 360; } }
@media (max-width: 900px) {
  .phead { padding: calc(88px + env(safe-area-inset-top, 0px)) 0 44px; }
  .phead__title { font-size: clamp(36px, 6vw, 48px); }
  .phead__intro { font-size: 16px; max-width: 40ch; }
}
@media (max-width: 700px) {
  .phead { padding: calc(80px + env(safe-area-inset-top, 0px)) 0 84px; text-align: center; }
  .phead__in { justify-items: center; }
  .phead__title { font-size: 36px; }
  .phead__intro { margin-inline: auto; font-size: 15.5px; }
  /* the scene is a strip along the bottom edge, wider than the screen so that its right part shows */
  .phead__art { inset: auto 0 0 auto; height: auto; width: min(118vw, 700px); aspect-ratio: 1600 / 360; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 48%); mask-image: linear-gradient(180deg, transparent 0, #000 48%); }
  .phead__bg::after { background: linear-gradient(180deg, rgba(5,15,38,.5) 0%, rgba(5,15,38,.2) 70%, transparent 100%); }
  .phead.has-img { padding-bottom: 56px; }
  .phead.no-art { padding-bottom: 48px; }
  .phead.has-img .phead__bg::after { background: linear-gradient(180deg, rgba(5,15,38,.7) 0%, rgba(5,15,38,.4) 70%, rgba(5,15,38,.2) 100%); }
}

/* "more" link next to a section title */
.more { display: inline-flex; align-items: center; gap: 10px; color: var(--navy); font-weight: 600; text-decoration: none; white-space: nowrap; }
.more svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s var(--ease); }
.more:hover svg { transform: translateX(4px); }
.more span { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat; transition: background-size .3s var(--ease); }
.more:hover span { background-size: 100% 1.5px; }

/* stats: the band is a strip of fresh road */
.stats { background: radial-gradient(circle at 20% 30%, #23272E 0 1px, transparent 1.5px) 0 0/7px 7px, radial-gradient(circle at 70% 60%, #15171B 0 1px, transparent 1.5px) 0 0/9px 9px, var(--asphalt); color: var(--on-navy); position: relative; }
.stats::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: repeating-linear-gradient(90deg, #E9ECF0 0 54px, transparent 54px 92px); opacity: .85; }
.stats::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 12px; background: linear-gradient(180deg, #D8DCE1 0 3px, #B2B8C0 3px); }
.stats__in { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-5); padding-block: 44px 52px; }
.stat { display: grid; gap: 6px; align-content: start; min-width: 0; }
.stat__num { font: 400 clamp(44px, 5vw, 68px)/1 var(--f-display); color: var(--gold-light); font-variant-numeric: tabular-nums; white-space: nowrap; }
.stat__num small { font-size: .5em; margin-left: 4px; }
.stat__label { font-size: 15px; color: var(--on-navy-2); line-height: 1.4; max-width: 24ch; }
@media (max-width: 820px) {
  .stats__in { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; padding-block: 30px 38px; }
  .stat { justify-items: center; text-align: center; padding: 18px 12px; }
  .stat:nth-child(odd) { border-right: 1px solid rgba(238,242,249,.12); }
  .stat:nth-child(n+3) { border-top: 1px solid rgba(238,242,249,.12); }
  .stat:last-child:nth-child(odd) { grid-column: 1 / -1; border-right: 0; }
  .stat__num { font-size: clamp(40px, 11vw, 56px); }
  .stat__label { font-size: 14px; }
}

/* sections */
.about, .services, .projects, .contact { padding-block: var(--s-9); }
.about { background: var(--concrete); }
.about__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(32px, 6vw, 88px); align-items: start; }
.about__media { position: relative; padding-bottom: 18%; }
.about__media img { border-radius: var(--r-m); object-fit: cover; height: auto; }
.about__media img:first-child { width: 84%; aspect-ratio: 1/1; box-shadow: 0 30px 60px -30px rgba(10,35,80,.5); }
.about__media img:last-child { position: absolute; right: 0; bottom: 0; width: 52%; aspect-ratio: 4/3; border: 6px solid var(--concrete); }
.about__body { min-width: 0; }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin: var(--s-6) 0 0; border-top: 1px solid var(--line); }
.facts div { padding: 18px 16px 18px 0; border-bottom: 1px solid var(--line); min-width: 0; }
.facts dt { font-size: 14px; color: var(--gold-ink); font-weight: 500; margin-bottom: 4px; }
.facts dd { margin: 0; font-weight: 500; }
@media (max-width: 900px) {
  .about__in { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .about__body { display: contents; }
  .about__body > .h2 { order: 1; text-align: center; }
  .about__body > .lead { order: 2; text-align: center; margin-inline: auto; }
  .about__media { order: 3; display: flex; gap: 10px; padding: 0; margin: 4px 0 28px; }
  .about__media img:first-child, .about__media img:last-child { position: static; flex: 1 1 0; min-width: 0; width: auto; aspect-ratio: 4/5; border: 0; box-shadow: 0 24px 40px -28px rgba(10,35,80,.6); }
  .about__media:has(img[hidden]) img { aspect-ratio: 4/3; }
  .about__body > .prose { order: 4; }
  .about__body > .facts { order: 5; }
  .facts div { padding: 16px 12px 16px 0; }
  .facts div:nth-child(even) { padding: 16px 0 16px 14px; border-left: 1px solid var(--line); }
  .facts div:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 340px) { .facts { grid-template-columns: minmax(0, 1fr); } .facts div:nth-child(even) { padding-left: 0; border-left: 0; } }

/* services */
.services { background: var(--paper); }
.svc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 72px); align-items: start; }
.svc__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.svc__item { border-bottom: 1px solid var(--line); }
.svc__btn { width: 100%; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 18px; align-items: center; padding: 22px 0; background: none; border: 0; text-align: left; cursor: pointer; color: var(--ink); }
.svc__icon { width: 44px; height: 44px; color: var(--navy); }
.svc__icon path, .svc__icon rect, .svc__icon circle, .svc__icon line, .svc__icon polyline { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.svc__title { font: 400 clamp(22px, 2vw, 28px)/1.2 var(--f-display); transition: color .2s; }
.svc__text { grid-column: 2; margin: 0; color: var(--ink-2); max-height: 0; overflow: hidden; opacity: 0; transition: max-height .45s var(--ease), opacity .35s, margin .3s; }
.svc__item.is-on .svc__title { color: var(--navy); }
.svc__item.is-on .svc__icon { color: var(--gold-ink); }
.svc__item.is-on .svc__text { max-height: 220px; opacity: 1; margin-top: 2px; }
.svc__thumb { display: none; }
.svc__view { position: sticky; top: 110px; }
.svc__frame { position: relative; aspect-ratio: 4/3.4; border-radius: var(--r-l); overflow: hidden; background: var(--navy); }
.svc__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06); transition: opacity .6s var(--ease), transform 1.4s var(--ease); }
.svc__frame img.is-on { opacity: 1; transform: none; }
@media (max-width: 900px) {
  .svc { grid-template-columns: minmax(0, 1fr); }
  .svc__view { display: none; }
  .svc__item.is-on .svc__thumb { display: block; grid-column: 1 / -1; width: 100%; aspect-ratio: 16/10; object-fit: cover; border-radius: var(--r-m); margin-top: 14px; }
  .svc__item.is-on .svc__text { max-height: 400px; }
  .svc__btn { gap: 14px; padding: 18px 0; }
}

/* process */
.process { background: var(--grain), var(--navy); color: var(--on-navy); padding-block: var(--s-9); overflow: hidden; }
.process .sec-intro { color: var(--on-navy-2); }
.process__head { display: grid; gap: var(--s-3); margin-bottom: var(--s-7); }
.process__head .h2 { margin: 0; }
.process__grid { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(260px, 1fr); gap: clamp(20px, 3vw, 48px); align-items: center; }
.xsec svg { border-radius: var(--r-l); box-shadow: 0 40px 80px -40px rgba(0,0,0,.6); }
.process__side { min-width: 0; display: grid; gap: 14px; }
.process__bar { height: 3px; border-radius: 3px; background: rgba(238,242,249,.14); overflow: hidden; display: none; }
.process__bar span { display: block; height: 100%; width: 0; background: var(--gold); transition: width .5s var(--ease); }
.process.is-scrub { min-height: 100vh; min-height: 100svh; padding-block: calc(86px + env(safe-area-inset-top, 0px)) 28px; display: flex; align-items: center; }
.process.is-scrub .process__in { width: 100%; }
.process.is-scrub .process__head { margin-bottom: var(--s-5); }
.process.is-scrub .process__bar { display: block; }
.process.is-scrub .layer { cursor: pointer; padding-block: 9px; }
.process.is-scrub .layer .layer__text { display: none; }
.process.is-scrub .layer.is-on .layer__text { display: block; }
.xsec { min-width: 0; }
.xsec svg { width: 100%; height: auto; display: block; overflow: hidden; }
.layers { list-style: none; margin: 0; padding: 0; counter-reset: l; display: grid; gap: 4px; }
.layer { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 4px 14px; padding: 14px 14px 14px 0; border-radius: var(--r-s); transition: background .3s, opacity .3s; counter-increment: l; }
.layer::before { content: attr(data-n); grid-row: span 2; width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid rgba(235,203,122,.5); display: grid; place-items: center; font-size: 14px; color: var(--gold-light); margin-left: 4px; font-variant-numeric: tabular-nums; }
.layer__name { font-weight: 700; }
.layer__thk { font-size: 14px; color: var(--gold-light); white-space: nowrap; font-variant-numeric: tabular-nums; }
.layer__text { grid-column: 2 / -1; margin: 0; color: var(--on-navy-2); font-size: 15px; line-height: 1.5; }
.process.is-scrub .layer { opacity: .38; }
.process.is-scrub .layer.is-done { opacity: .75; }
.process.is-scrub .layer.is-on { opacity: 1; background: rgba(235,203,122,.08); }
.process.is-scrub .layer.is-on::before { background: var(--gold); color: var(--navy-deep); border-color: var(--gold); }
.steps { display: none; }
@media (max-width: 900px) {
  .process__grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .process.is-scrub { padding-block: calc(78px + env(safe-area-inset-top, 0px)) calc(var(--bnav-space) + 14px); }
  .process.is-scrub .process__head { margin-bottom: 20px; }
  .process.is-scrub .h2 { font-size: 30px; }
  .process.is-scrub .sec-intro { font-size: 15px; }
  .process.is-scrub .layer:not(.is-on) { display: none; }
  .process.is-scrub .process__side { gap: 16px; }
  /* one numbered stop per layer, joined by a line: the stops fill in gold as the road grows */
  .process.is-scrub .steps { position: relative; display: flex; justify-content: space-between; max-width: 340px; width: 100%; margin: 0 auto; }
  .steps::before { content: ""; position: absolute; left: 17px; right: 17px; top: 50%; height: 2px; margin-top: -1px; background: rgba(235,203,122,.22); }
  .steps i { position: absolute; left: 17px; top: 50%; height: 2px; margin-top: -1px; width: 0; background: var(--gold); transition: width .5s var(--ease); }
  .steps span { position: relative; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid rgba(235,203,122,.45); background: var(--navy); color: var(--gold-light); font-size: 14px; font-variant-numeric: tabular-nums; cursor: pointer; transition: background .3s, color .3s, border-color .3s, transform .3s var(--ease); -webkit-tap-highlight-color: transparent; }
  .steps span.is-done { background: #2A3C63; border-color: var(--gold); }
  .steps span.is-on { background: var(--gold); border-color: var(--gold); color: var(--navy-deep); transform: scale(1.12); }
  .process.is-scrub .layer { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; gap: 4px; padding: 14px 16px; border-radius: var(--r-m); background: rgba(235,203,122,.08); box-shadow: inset 0 0 0 1px rgba(235,203,122,.16); }
  .process.is-scrub .layer::before { display: none; }
  .process.is-scrub .layer__text { grid-column: 1; }
  .process.is-scrub .process__bar { display: none; }
}
@media (max-height: 760px) and (min-width: 901px) { .process.is-scrub .process__head .sec-intro { display: none; } .process.is-scrub .layer { padding-block: 6px; } }

/* design: AutoCAD-style drawing (js/cad.js) */
.design { background: var(--paper); padding-block: var(--s-9); }
.design__head { margin-bottom: var(--s-6); }
.design__replay { gap: 8px; opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s, background .2s; }
.design.is-done .design__replay { opacity: 1; visibility: visible; }
.cad { border-radius: var(--r-m); overflow: hidden; background: var(--cad-ui); color: var(--cad-ui-text); box-shadow: 0 50px 90px -50px rgba(6,22,51,.75), 0 0 0 1px rgba(6,22,51,.1); }
.cad__top { display: flex; align-items: center; gap: 14px; height: 32px; padding: 0 14px; background: var(--cad-ui-2); border-bottom: 1px solid var(--cad-ui-line); }
.cad__dots { display: flex; gap: 6px; }
.cad__dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--cad-ui-line); }
.cad__file { font: 500 12px/1 var(--f-mono); color: var(--cad-ui-dim); letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cad__body { display: grid; grid-template-columns: 210px minmax(0, 1fr); }
.cad__layers { border-right: 1px solid var(--cad-ui-line); padding: 12px 0; min-width: 0; }
.cad-lp__h { padding: 0 14px 10px; font: 700 11px/1 var(--f-body); letter-spacing: .1em; text-transform: uppercase; color: var(--cad-ui-dim); }
.cad-lp__list { list-style: none; margin: 0; padding: 0; }
.cad-lp__list li { display: grid; grid-template-columns: 10px 11px 58px minmax(0, 1fr); gap: 7px; align-items: center; padding: 6px 12px 6px 10px; transition: background .25s; }
.cad-lp__list li::before { content: ""; width: 8px; height: 5px; border: solid var(--cad-dim); border-width: 0 0 2px 2px; transform: rotate(-45deg) translate(1px, -1px); opacity: 0; }
.cad-lp__list li.is-cur { background: color-mix(in srgb, var(--cad-ui-on) 16%, transparent); }
.cad-lp__list li.is-cur::before { opacity: 1; }
.cad-lp__list i { width: 11px; height: 11px; border-radius: 2px; background: var(--c); }
.cad-lp__list b { font: 600 11px/1.2 var(--f-mono); color: var(--cad-ui-text); }
.cad-lp__list span { font-size: 12px; line-height: 1.25; color: var(--cad-ui-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cad-lp__list li.is-cur span { color: var(--cad-ui-text); }
.cad__scroll { min-width: 0; background: var(--cad-bg); }
.cad__view { height: clamp(380px, calc(100svh - 330px), 640px); }
.cad__svg { display: block; width: 100%; height: 100%; user-select: none; -webkit-user-select: none; }
@media (hover: hover) { .cad.is-done .cad__svg { cursor: none; } }
.cad__cmd { padding: 7px 14px 8px; border-top: 1px solid var(--cad-ui-line); font: 400 12.5px/1.6 var(--f-mono); min-height: 72px; }
.cad-cmd__h { color: var(--cad-ui-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 1.6em; }
.cad-cmd__p { display: flex; align-items: center; white-space: nowrap; min-width: 0; }
.cad-cmd__pre { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.cad-cmd__in { flex: none; color: var(--cad-text); }
.cad-cmd__caret { flex: none; width: 7px; height: 1.1em; margin-left: 1px; background: var(--cad-ui-text); animation: cadCaret 1.06s steps(1) infinite; }
@keyframes cadCaret { 50% { opacity: 0; } }
.cad__status { display: flex; align-items: center; gap: 3px; height: 30px; padding: 0 10px; background: var(--cad-ui-2); border-top: 1px solid var(--cad-ui-line); font: 600 11px/1 var(--f-mono); color: var(--cad-ui-dim); white-space: nowrap; overflow: hidden; }
.cad-st__tabs { display: flex; gap: 2px; margin-right: 12px; }
.cad-st__tabs b { padding: 5px 9px; border-radius: 3px; font-weight: 600; }
.cad-st__tabs b.is-on { background: var(--cad-ui); color: var(--cad-ui-text); }
.cad-st__xy { margin-right: auto; color: var(--cad-ui-text); font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; }
.cad-st__tg { padding: 5px 7px; border-radius: 3px; }
.cad-st__tg.is-on { color: var(--cad-ui-on); background: color-mix(in srgb, var(--cad-ui-on) 14%, transparent); }
.cad-st__sc { margin-left: 8px; padding-left: 10px; border-left: 1px solid var(--cad-ui-line); color: var(--cad-ui-text); }
@media (max-width: 900px) {
  .cad__body { grid-template-columns: minmax(0, 1fr); } .cad__layers { display: none; }
  .design .wrap { display: flex; flex-direction: column; }
  .design__head { display: contents; }
  .design__head > div { display: grid; gap: var(--s-3); justify-items: center; text-align: center; margin-bottom: var(--s-6); }
  .design__replay { order: 2; align-self: center; margin-top: 18px; }
}
@media (max-width: 700px) {
  .cad__scroll { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: var(--cad-ui-line) transparent; }
  .cad__view { width: 820px; height: min(540px, calc(100svh - 300px)); min-height: 420px; }
  .cad__cmd { min-height: 0; padding: 6px 10px; font-size: 11px; }
  .cad-cmd__h:first-child { display: none; }
  .cad-st__tg, .cad-st__tabs b:last-child { display: none; }
}
/* drawing inside the SVG: world units are sheet millimetres, --lw keeps lines at screen pixels */
.cad-world path, .cad-world rect, .cad-world circle { fill: none; stroke-width: calc(var(--lw) * 1.15); stroke-linecap: butt; stroke-linejoin: round; }
.cad-world .cad-w0 { stroke-width: calc(var(--lw) * .8); }
.cad-world .cad-w2 { stroke-width: calc(var(--lw) * 1.7); }
.cad-world .cad-w3 { stroke-width: calc(var(--lw) * 2.5); }
.cad-grid .cad-g1 { stroke: var(--cad-grid); stroke-width: calc(var(--lw) * .9); }
.cad-grid .cad-g2 { stroke: var(--cad-grid-major); stroke-width: calc(var(--lw) * .9); }
.cad-L0 { stroke: var(--cad-frame); } .cad-La { stroke: var(--cad-axis); } .cad-Le { stroke: var(--cad-edge); } .cad-Lc { stroke: var(--cad-curb); }
.cad-Lw { stroke: var(--cad-walk); } .cad-Lh { stroke: var(--cad-hatch); } .cad-Lm { stroke: var(--cad-marking); } .cad-Ld { stroke: var(--cad-dim); } .cad-Lt { stroke: var(--cad-text); }
.cad-lt-c { stroke-dasharray: 10 1.6 .9 1.6; }
.cad-lt-m { stroke-dasharray: 6 18; }
.cad-lane { opacity: 0; }
.cad-world .cad-pbg { fill: var(--cad-bg); stroke: none; }
.cad-world .cad-pf { fill: var(--cad-hatch); stroke: none; }
.cad-world .cad-pft { fill: var(--cad-text); }
.cad-world .cad-af { stroke: none; }
.cad-world text { fill: var(--cad-text); stroke: none; font-family: var(--f-body); font-weight: 500; letter-spacing: .04em; }
.cad-world text.cad-Ld { fill: var(--cad-dim); letter-spacing: 0; }
.cad-world text.cad-tf { font-family: var(--f-display); font-weight: 400; letter-spacing: .03em; }
.cad-ui { pointer-events: none; }
.cad-xh { fill: none; stroke: var(--cad-cursor); stroke-width: 1; opacity: .85; shape-rendering: crispEdges; }
.cad-pb { fill: none; stroke: var(--cad-cursor); stroke-width: 1; shape-rendering: crispEdges; }
.cad-sm { fill: none; stroke: var(--cad-snap); stroke-width: 2; }
.cad-tipb { fill: var(--cad-ui-2); stroke: var(--cad-ui-line); }
.cad-tip { fill: var(--cad-ui-text); font: 500 11px var(--f-body); }
.cad-ucs path { fill: none; stroke-width: 1.4; }
.cad-ucs-x { stroke: var(--cad-axis); } .cad-ucs-y { stroke: var(--cad-dim); }
.cad-ucs-o { fill: none; stroke: var(--cad-ui-dim); }
.cad-ucs-t { fill: var(--cad-ui-dim); font: 700 11px var(--f-body); }
/* live drawing instead of a photo in the services list */
.svc__cad { position: absolute; inset: 0; background: var(--cad-bg); opacity: 0; transition: opacity .6s var(--ease); }
.svc__cad.is-on { opacity: 1; }
.svc__cad svg, .svc__thumb--cad svg { display: block; width: 100%; height: 100%; }
.svc__thumb--cad { background: var(--cad-bg); overflow: hidden; }

/* projects */
.projects { background: var(--concrete); }
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin: calc(-1 * var(--s-5)) 0 var(--s-6); }
.chip { border: 1.5px solid var(--line); background: var(--paper); color: var(--ink); border-radius: 999px; padding: 9px 18px; font-size: 15px; font-weight: 500; cursor: pointer; transition: background .2s, border-color .2s, color .2s; }
.chip:hover { border-color: var(--navy); }
.chip[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.card { position: relative; min-width: 0; height: 330px; border-radius: var(--r-m); overflow: hidden; border: 0; padding: 0; cursor: pointer; background: var(--navy); text-align: left; color: #fff; }
.card--w2 { grid-column: span 2; }
.card--w3 { grid-column: 1 / -1; }
.card img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 32%; transition: transform 1.2s var(--ease), filter .5s; }
.card:hover img, .card:focus-visible img { transform: scale(1.05); }
.card__cap { position: absolute; inset: auto 0 0 0; padding: 60px 20px 18px; background: linear-gradient(180deg, transparent, rgba(5,15,38,.88)); display: grid; gap: 2px; }
.card__meta { font-size: 13px; color: var(--gold-light); font-weight: 500; }
.card__title { font: 400 24px/1.15 var(--f-display); }
.card__n { position: absolute; top: 14px; right: 14px; background: rgba(5,15,38,.6); backdrop-filter: blur(6px); border-radius: 999px; padding: 4px 10px; font-size: 13px; }
.card__st { position: absolute; top: 14px; left: 14px; z-index: 1; padding: 5px 12px; border-radius: 999px; background: linear-gradient(180deg, #E2B958, var(--gold)); color: var(--navy-deep); font: 700 12px/1.2 var(--f-body); letter-spacing: .06em; text-transform: uppercase; }
.chip__n { margin-left: 6px; font-size: 12px; font-weight: 500; opacity: .6; font-variant-numeric: tabular-nums; }
/* the flagship object: a navy block with a big photo, small photos and the facts */
.flag { margin: 0 0 var(--s-7); }
.flag__in { display: grid; grid-template-columns: minmax(0, 1.28fr) minmax(0, 1fr); border-radius: var(--r-l); overflow: hidden; background: radial-gradient(640px 320px at 100% 0, rgba(201,152,47,.18), transparent 70%), var(--navy); color: var(--on-navy); box-shadow: 0 44px 80px -50px rgba(6,22,51,.85), 0 0 0 1px rgba(235,203,122,.16); }
.flag__gal { display: grid; grid-template-rows: minmax(0, 1fr) auto; min-width: 0; background: var(--navy-deep); }
.flag__media { position: relative; display: block; width: 100%; min-height: 380px; padding: 0; border: 0; background: #0A1A3C; cursor: pointer; overflow: hidden; }
.flag__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease), filter .5s; }
.flag__media:hover img, .flag__media:focus-visible img { transform: scale(1.04); }
.flag__tag { position: absolute; top: 16px; left: 16px; z-index: 1; display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 10px; border-radius: 999px; background: linear-gradient(180deg, #E2B958, var(--gold)); color: var(--navy-deep); font: 700 12px/1 var(--f-body); letter-spacing: .08em; text-transform: uppercase; box-shadow: 0 8px 20px -8px rgba(0,0,0,.5); }
.flag__tag svg { width: 15px; height: 15px; fill: currentColor; }
.flag__media .card__st { left: auto; right: 16px; top: 16px; }
.flag__thumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3px; margin-top: 3px; }
.flag__thumb { position: relative; aspect-ratio: 4 / 3; padding: 0; border: 0; background: #0A1A3C; cursor: pointer; overflow: hidden; }
.flag__thumb img { width: 100%; height: 100%; object-fit: cover; opacity: .88; transition: transform .6s var(--ease), opacity .3s, filter .5s; }
.flag__thumb:hover img, .flag__thumb:focus-visible img { transform: scale(1.07); opacity: 1; }
.flag__more { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(5,15,38,.68); font: 400 clamp(22px, 2.4vw, 30px)/1 var(--f-display); color: var(--gold-light); }
.flag__body { display: grid; gap: 14px; align-content: center; justify-items: start; min-width: 0; padding: clamp(26px, 3.6vw, 52px); }
.flag__meta { margin: 0; color: var(--gold-light); font-weight: 500; font-size: 14px; letter-spacing: .04em; }
.flag__title { margin: 0; font: 400 clamp(30px, 3.2vw, 46px)/1.08 var(--f-display); color: #fff; text-wrap: balance; }
.flag__loc { margin: -6px 0 0; color: var(--on-navy-2); }
.flag__text { margin: 0; max-width: 52ch; color: var(--on-navy-2); }
.flag__facts { width: 100%; margin: 4px 0; display: grid; border-top: 1px solid rgba(238,242,249,.14); }
.flag__facts div { display: grid; grid-template-columns: 108px minmax(0, 1fr); gap: 4px 14px; padding: 11px 0; border-bottom: 1px solid rgba(238,242,249,.14); font-size: 15px; line-height: 1.45; }
.flag__facts dt { color: var(--gold-light); font-weight: 500; }
.flag__facts dd { margin: 0; color: var(--on-navy); }
.flag__btn { margin-top: 6px; }
@media (max-width: 900px) {
  .flag__in { grid-template-columns: minmax(0, 1fr); }
  .flag__media { min-height: 0; aspect-ratio: 4 / 3; }
  .flag__body { justify-items: center; text-align: center; padding: 24px 20px 28px; }
  .flag__facts div { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 2px; }
}
@media (max-width: 900px) {
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card--w2, .card--w3, .card--t2 { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: calc(-1 * var(--s-3)); }
  .chip { padding: 11px 10px; text-align: center; }
  .chip:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .gallery { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .card { height: 260px; }
}

/* the list of completed works: a plain table, the number is the row of the owner's own list */
.works { background: var(--paper); padding-block: var(--s-9); }
.works__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: calc(-1 * var(--s-5)) 0 var(--s-4); scroll-margin-top: 104px; }
.works__count { margin: 0; font-size: 14px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.works__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.wrow { display: grid; grid-template-columns: 52px minmax(0, 1fr) minmax(0, .55fr) 152px; gap: 6px 24px; align-items: start; padding: 16px 0; border-bottom: 1px solid var(--line); }
.wrow--head { padding: 11px 0; font: 700 12px/1 var(--f-body); letter-spacing: .1em; text-transform: uppercase; color: var(--gold-ink); }
.wrow__n { font: 400 22px/1.2 var(--f-display); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.wrow__main { display: grid; gap: 4px; min-width: 0; }
.wrow__title { font-weight: 500; line-height: 1.4; }
.wrow__cat { font-size: 13px; color: var(--gold-ink); }
.wrow__cust, .wrow__year { font-size: 15px; line-height: 1.4; color: var(--ink-2); }
.wrow__year { font-variant-numeric: tabular-nums; white-space: nowrap; }
.wrow.is-mark { padding-left: 14px; margin-left: -14px; background: linear-gradient(90deg, rgba(201,152,47,.16), rgba(201,152,47,0) 75%); box-shadow: inset 3px 0 0 var(--gold); }
.wrow.is-mark .wrow__title { font-weight: 700; }
.works__note { margin: var(--s-5) 0 0; max-width: 78ch; font-size: 14px; line-height: 1.55; color: var(--ink-2); }
@media (max-width: 800px) {
  .wrow--head { display: none; }
  .wrow { grid-template-columns: 38px minmax(0, 1fr); gap: 4px 14px; padding: 14px 0; }
  .wrow__n { grid-row: 1 / span 3; font-size: 20px; }
  .wrow__year { grid-column: 2; grid-row: 1; font-size: 13px; font-weight: 500; color: var(--gold-ink); }
  .wrow__main { grid-column: 2; grid-row: 2; }
  .wrow__cust { grid-column: 2; grid-row: 3; font-size: 14px; }
  .wrow.is-mark { padding-left: 10px; margin-left: -10px; }
}

/* fleet page: a garage with one bay per machine; the drawing "starts" (see site.js renderFleet, art-fleet.js) */
.fleet { background: var(--paper); padding-block: var(--s-9); }
.fleet__park { position: relative; margin: 0 0 var(--s-8); border-radius: var(--r-l); overflow: hidden; box-shadow: 0 30px 50px -34px rgba(10,35,80,.6); }
.fleet__parkbtn { display: block; width: 100%; padding: 0; border: 0; background: var(--concrete); cursor: zoom-in; }
.fleet__parkbtn img { width: 100%; aspect-ratio: 21 / 8; object-fit: cover; object-position: 50% 60%; transition: transform 1.2s var(--ease); }
.fleet__parkbtn:hover img, .fleet__parkbtn:focus-visible img { transform: scale(1.03); }
.fleet__park figcaption { position: absolute; inset: auto 0 0 0; padding: 44px 24px 16px; color: #fff; font-size: 14.5px; background: linear-gradient(0deg, rgba(6,22,51,.84), rgba(6,22,51,0)); pointer-events: none; }
.fgroup + .fgroup { margin-top: var(--s-8); }
.fgroup__head { position: relative; display: flex; align-items: baseline; gap: 18px; margin: 0 0 var(--s-5); padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.fgroup__head::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 72px; height: 2px; background: var(--gold); }
.fgroup__no { font: 400 20px/1 var(--f-display); letter-spacing: .14em; color: var(--gold-ink); }
.fgroup__name { font: 400 clamp(24px, 2.6vw, 32px)/1.15 var(--f-display); margin: 0; }
.fgroup__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.bay { display: grid; grid-template-rows: auto 1fr; min-width: 0; border-radius: var(--r-l); overflow: hidden; background: var(--concrete); box-shadow: 0 0 0 1px var(--line), 0 28px 40px -34px rgba(10,35,80,.5); }
/* the stage: daylight outside, a roller door in front of it, a floor, the machine on the floor */
.bay__stage { position: relative; isolation: isolate; aspect-ratio: 16 / 10; overflow: hidden; background: linear-gradient(180deg, #8DB6E8 0%, #CFE1F6 56%, #FBEBC4 100%); }
.bay__stage::after { content: ""; position: absolute; z-index: 2; inset: auto 0 0 0; height: 15%; background: linear-gradient(180deg, #B9C4D5, #8E9BB1); box-shadow: inset 0 1px 0 rgba(255,255,255,.5); }
.bay__door { position: absolute; z-index: 1; inset: 0 0 15% 0; transform-origin: 50% 0; transition: transform 1s cubic-bezier(.5, 0, .2, 1);
  background: repeating-linear-gradient(180deg, #CAD3E1 0 11px, #AEBACD 11px 13px), #CAD3E1; box-shadow: inset 0 -12px 20px -12px rgba(10,35,80,.4), 0 8px 18px -6px rgba(10,35,80,.3); }
.bay__door::after { content: ""; position: absolute; inset: auto 0 0 0; height: 9px; background: linear-gradient(#8593AB, #5E6C84); }
.bay__stage.is-on .bay__door { transform: scaleY(.05); }
.bay__art { position: absolute; z-index: 3; left: 3%; right: 3%; top: 5%; bottom: 7%; }
.bay__art svg { display: block; width: 100%; height: 100%; overflow: visible; }
.bay__stage--photo { background: var(--navy-deep); }
.bay__stage--photo::after { display: none; }
.bay__stage--photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bay__start { position: absolute; z-index: 4; top: 12px; right: 12px; display: inline-flex; align-items: center; gap: 9px; height: 36px; padding: 0 15px 0 13px; border: 0; border-radius: 999px; background: rgba(10,35,80,.88); color: #fff; font: 500 13.5px/1 var(--f-body); cursor: pointer; transition: background .2s; }
.bay__start:hover { background: var(--navy); }
.bay__led { width: 9px; height: 9px; border-radius: 50%; background: #8896AD; box-shadow: 0 0 0 2px rgba(255,255,255,.18); transition: background .3s, box-shadow .3s; }
.bay__stage.is-on .bay__led { background: #3DDC97; box-shadow: 0 0 0 2px rgba(61,220,151,.25), 0 0 10px #3DDC97; }
.bay__body { display: grid; gap: 12px; align-content: start; padding: 22px 24px 24px; }
.bay__body h3 { font: 400 clamp(22px, 2.2vw, 27px)/1.2 var(--f-display); margin: 0; }
.bay__body p { margin: 0; color: var(--ink-2); font-size: 15.5px; }
.bay__specs { margin: 6px 0 0; border-top: 1px solid var(--line); }
.bay__specs div { display: flex; justify-content: space-between; gap: 18px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; line-height: 1.35; }
.bay__specs dt { flex: none; color: var(--ink-2); }
.bay__specs dd { margin: 0; text-align: right; font-weight: 500; }
.bay__photos { display: flex; gap: 8px; margin-top: 4px; }
.bay__ph { flex: none; width: 72px; height: 52px; padding: 0; border: 0; border-radius: 8px; overflow: hidden; cursor: zoom-in; background: var(--paper); box-shadow: 0 0 0 1px var(--line); }
.bay__ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.bay__ph:hover img, .bay__ph:focus-visible img { transform: scale(1.08); }
.fleet__note { margin: var(--s-7) 0 0; padding-top: 18px; border-top: 1px solid var(--line); color: var(--ink-2); font-size: 14px; max-width: 78ch; }
@media (max-width: 760px) {
  .fgroup__grid { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .bay__body { padding: 18px 18px 20px; }
  .fleet__parkbtn img { aspect-ratio: 16 / 9; }
  .fleet__park figcaption { padding: 30px 16px 12px; font-size: 13.5px; }
}
@media (prefers-reduced-motion: reduce) { .bay__start { display: none; } .bay__door { transition: none; } }

/* why */
.why { --why-img: url("../img/photos/night-rollers.webp"); background: var(--grain), linear-gradient(180deg, rgba(6,22,51,.86), rgba(6,22,51,.92)), var(--why-img) center/cover, var(--navy-deep); color: var(--on-navy); padding-block: var(--s-9); }
.why__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-6); margin-top: var(--s-6); }
.why__item { display: grid; gap: 10px; align-content: start; min-width: 0; }
.why__item svg { width: 40px; height: 40px; color: var(--gold-light); }
.why__item svg * { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.why__item h3 { font: 400 24px/1.2 var(--f-display); margin: 6px 0 0; }
.why__item p { margin: 0; color: var(--on-navy-2); font-size: 15px; }
@media (max-width: 900px) { .why__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  .why .h2 { text-align: center; }
  .why__grid { gap: 10px; margin-top: var(--s-5); }
  .why__item { justify-items: center; text-align: center; gap: 8px; padding: 20px 12px 18px; border-radius: 14px; background: rgba(238,242,249,.04); box-shadow: inset 0 0 0 1px rgba(235,203,122,.16); }
  .why__item svg { width: 34px; height: 34px; }
  .why__item h3 { font-size: 20px; margin: 2px 0 0; }
  .why__item p { font-size: 14px; line-height: 1.45; }
  .why__item:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 340px) { .why__grid { grid-template-columns: minmax(0, 1fr); } }

/* contact */
.contact { background: var(--concrete); }
.contact__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 88px); align-items: start; }
.contact__info { min-width: 0; }
.clist { margin: var(--s-6) 0 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
.clist div { display: grid; grid-template-columns: 130px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--line); }
.clist dt { font-size: 14px; color: var(--gold-ink); font-weight: 500; }
.clist dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; user-select: all; }
.clist dd a { text-decoration: none; }
.copy { border: 1px solid var(--line); background: var(--paper); border-radius: var(--r-s); padding: 6px 10px; font-size: 13px; cursor: pointer; color: var(--ink-2); }
.copy:hover { border-color: var(--navy); color: var(--navy); }
.maplink { display: inline-block; margin-top: var(--s-5); color: var(--navy); font-weight: 500; }
.form { background: var(--paper); border-radius: var(--r-l); padding: clamp(22px, 3vw, 40px); display: grid; gap: 18px; box-shadow: 0 30px 70px -40px rgba(10,35,80,.45); min-width: 0; }
.field { display: grid; gap: 6px; }
.field label { font-size: 14px; font-weight: 500; color: var(--ink-2); }
.field input, .field textarea { width: 100%; border: 1.5px solid var(--line); border-radius: var(--r-s); padding: 13px 14px; background: #FAFBFD; transition: border-color .2s, background .2s; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--navy); background: #fff; box-shadow: 0 0 0 3px rgba(201,152,47,.3); }
.field.is-bad input { border-color: #B42318; }
.field textarea { resize: vertical; min-height: 110px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form__status { margin: 0; min-height: 1.5em; font-weight: 500; }
.form__status.ok { color: #116B3A; }
.form__status.bad { color: #B42318; }
@media (max-width: 900px) {
  .contact__in { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
  .contact__info > .h2, .contact__info > .lead { text-align: center; margin-inline: auto; }
  .maplink { display: block; width: fit-content; margin-inline: auto; }
}
@media (max-width: 480px) { .clist div { grid-template-columns: minmax(0, 1fr) auto; } .clist dt { grid-column: 1 / -1; } }

/* about: licence and documents */
.docs { background: var(--concrete); padding-block: var(--s-9); }
.docs .sec-head { margin-bottom: var(--s-6); }
.docs__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
.doc { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; padding: 0; border: 0; border-radius: var(--r-l); overflow: hidden; background: var(--paper); color: var(--ink); text-align: left; cursor: pointer; box-shadow: 0 26px 50px -38px rgba(10,35,80,.6), 0 0 0 1px var(--line); transition: transform .35s var(--ease), box-shadow .35s; }
.doc:hover, .doc:focus-visible { transform: translateY(-4px); box-shadow: 0 36px 60px -36px rgba(10,35,80,.65), 0 0 0 1.5px var(--gold); }
.doc__sheet { display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; min-width: 0; overflow: hidden; aspect-ratio: 4 / 4.6; padding: 18px; background: #E3E8EF; }
.doc__sheet img { width: auto; height: auto; max-width: 100%; max-height: 100%; background: #fff; box-shadow: 0 12px 28px -10px rgba(10,35,80,.5); }
.doc__body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 7px; align-content: start; min-width: 0; padding: 20px 22px 24px; }
.doc__title { font: 400 22px/1.2 var(--f-display); }
.doc__meta { font-size: 13.5px; font-weight: 500; line-height: 1.4; color: var(--gold-ink); }
.doc__text { font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.doc__go { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; color: var(--navy); font-weight: 600; font-size: 15px; }
.doc__go svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s var(--ease); }
.doc:hover .doc__go svg { transform: translateX(4px); }
.scope { margin-top: var(--s-8); }
.scope__title { margin: 0 0 var(--s-4); font: 400 clamp(26px, 2.6vw, 34px)/1.15 var(--f-display); text-wrap: balance; }
.scope__list { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 56px; border-bottom: 1px solid var(--line); }
.scope__list li { break-inside: avoid; display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 14px; padding: 13px 0; border-top: 1px solid var(--line); font-size: 15px; line-height: 1.45; }
.scope__list b { font: 600 13px/1.65 var(--f-mono); color: var(--gold-ink); }
@media (max-width: 1000px) { .docs__grid { grid-template-columns: minmax(0, 1fr); max-width: 460px; margin-inline: auto; } }
@media (max-width: 800px) {
  .scope__title { text-align: center; }
  .scope__list { columns: 1; }
  .scope__list li { grid-template-columns: 68px minmax(0, 1fr); gap: 10px; }
}

/* about: the two enterprises of one owner */
.group { background: var(--paper); padding-block: var(--s-9); }
.group .sec-head { margin-bottom: var(--s-6); }
.group__grid { display: flex; align-items: stretch; }
.gcard { flex: 1 1 0; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 18px; padding: 28px; border-radius: var(--r-l); background: var(--concrete); box-shadow: 0 0 0 1px var(--line); }
.gcard--now { background: var(--navy); color: var(--on-navy); box-shadow: 0 30px 60px -40px rgba(10,35,80,.8); }
.gcard__meta { margin: 0 0 8px; font-size: 13px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--gold-ink); }
.gcard--now .gcard__meta { color: var(--gold-light); }
.gcard__name { margin: 0; font: 400 clamp(32px, 3.2vw, 44px)/1.05 var(--f-display); }
.gcard__imgs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.gcard__img { padding: 0; border: 0; border-radius: var(--r-m); overflow: hidden; aspect-ratio: 4 / 3; background: #D9DFE8; cursor: zoom-in; }
.gcard__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.gcard__img:hover img, .gcard__img:focus-visible img { transform: scale(1.06); }
.gcard__text { margin: 0; line-height: 1.55; color: var(--ink-2); }
.gcard--now .gcard__text { color: var(--on-navy-2); }
.gcard__facts { margin: 0; border-top: 1px solid var(--line); }
.gcard--now .gcard__facts { border-color: rgba(255,255,255,.16); }
.gcard__facts div { display: grid; grid-template-columns: 9em minmax(0, 1fr); gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 15px; line-height: 1.45; }
.gcard--now .gcard__facts div { border-color: rgba(255,255,255,.16); }
.gcard__facts dt { color: var(--ink-2); }
.gcard--now .gcard__facts dt { color: var(--on-navy-2); }
.gcard__facts dd { margin: 0; font-weight: 500; }
.group__link { flex: 0 0 72px; position: relative; display: grid; place-items: center; }
.group__link::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 2px dashed var(--gold); }
.group__link span { position: relative; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--gold); color: var(--navy); box-shadow: 0 0 0 6px var(--paper); }
.group__link svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.group__note { margin: var(--s-6) 0 0; max-width: 70ch; color: var(--ink-2); font-size: 15px; }
@media (max-width: 900px) {
  .group__grid { flex-direction: column; }
  .group__link { flex: 0 0 64px; }
  .group__link::before { left: 50%; right: auto; top: 0; bottom: 0; border-top: 0; border-left: 2px dashed var(--gold); }
  .gcard { padding: 22px; }
  .group__note { text-align: center; margin-inline: auto; }
}
@media (max-width: 480px) { .gcard__facts div { grid-template-columns: minmax(0, 1fr); gap: 2px; } }

/* footer */
.foot { --foot-anim: .5; position: relative; background: var(--grain), var(--navy-deep); color: var(--on-navy-2); padding-block: 0 calc(36px + env(safe-area-inset-bottom, 0px)); }
/* the animation lies over the navy footer at the strength set in the admin (50 % by default) and fades in from the top */
.foot__scene { height: clamp(180px, 20vw, 300px); margin-bottom: 48px; overflow: hidden; opacity: var(--foot-anim); -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 16%); mask-image: linear-gradient(180deg, transparent 0, #000 16%); }
.foot--plain { padding-top: clamp(40px, 5vw, 64px); }
/* "behind the content" (wide screens): the picture sits at the foot of the footer and the texts stand on it */
.foot--behind { overflow: hidden; padding-top: clamp(48px, 6vw, 88px); }
.foot--behind .foot__scene { position: absolute; inset: 0; height: auto; margin: 0; -webkit-mask-image: none; mask-image: none; }
.foot--behind .foot__in { position: relative; z-index: 1; text-shadow: 0 1px 10px rgba(6,22,51,.95), 0 0 3px rgba(6,22,51,.85); }
.foot__scene svg { width: 100%; height: 100%; display: block; }
.foot__scene { position: relative; }
.foot__gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 1s; }
.foot__scene.is-3d .foot__gl { opacity: 1; }
.foot__credits { display: block; margin-top: 6px; font-size: 12px; opacity: .6; }
.foot__in { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .8fr) minmax(0, 1fr); gap: var(--s-6) var(--s-7); align-items: start; }
.foot__brand { display: grid; gap: 18px; justify-items: start; }
.foot__logo { width: 150px; height: auto; }
.foot__text { margin: 0; max-width: 36ch; }
.foot__h { margin: 0 0 6px; font: 700 12px/1 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-light); }
.foot__col { display: grid; gap: 10px; align-content: start; min-width: 0; }
.foot__nav a, .foot__contacts a { text-decoration: none; color: var(--on-navy); width: fit-content; }
.foot__nav a:hover, .foot__contacts a:hover, .foot__nav a.is-active { color: var(--gold-light); }
.foot__contacts { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; overflow-wrap: anywhere; }
.foot__copy { grid-column: 1 / -1; margin: var(--s-4) 0 0; padding-top: var(--s-5); border-top: 1px solid rgba(238,242,249,.12); font-size: 14px; }
@media (max-width: 800px) {
  .foot__in { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6) var(--s-4); text-align: center; }
  .foot__brand { grid-column: 1 / -1; justify-items: center; }
  .foot__logo { width: 136px; }
  .foot__col { justify-items: center; }
  .foot__nav a, .foot__contacts a { margin-inline: auto; }
  .foot__copy { width: 100%; }
}
@media (max-width: 900px) {
  .foot { padding-bottom: calc(28px + var(--bnav-space)); }
  .foot__scene { height: clamp(200px, 52vw, 300px); margin-bottom: 36px; }
}

/* home: about is a teaser (title, lead, photos, link), the about page shows everything */
.about__more { display: none; margin-top: var(--s-5); }
[data-page="home"] .about .prose, [data-page="home"] .about .facts { display: none; }
[data-page="home"] .about__more { display: inline-flex; }
[data-page="home"] .projects__more { display: inline-flex; }
.projects__more { display: none; }
[data-page="home"] .filters { display: none; }
@media (max-width: 900px) { [data-page="home"] .about__body > .about__more { order: 4; align-self: center; } }

/* home: services as cards */
.svcs { background: var(--paper); padding-block: var(--s-9); }
.svcs__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.svc-card { position: relative; display: grid; grid-template-rows: auto auto 1fr auto; gap: 12px; min-width: 0; padding: 26px 24px 22px; border-radius: var(--r-l); background: var(--concrete); color: var(--ink); text-decoration: none; overflow: hidden; transition: background .3s, color .3s, transform .3s var(--ease), box-shadow .3s; }
.svc-card::after { content: ""; position: absolute; left: 24px; right: 24px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease); }
.svc-card:hover { background: var(--navy); color: #fff; transform: translateY(-4px); box-shadow: 0 30px 50px -30px rgba(10,35,80,.6); }
.svc-card:hover::after { transform: none; }
.svc-card__icon { width: 44px; height: 44px; color: var(--navy); transition: color .3s; }
.svc-card:hover .svc-card__icon { color: var(--gold-light); }
.svc-card__icon * { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.svc-card__title { font: 400 24px/1.2 var(--f-display); }
.svc-card__text { font-size: 15px; line-height: 1.5; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; transition: color .3s; }
.svc-card:hover .svc-card__text { color: var(--on-navy-2); }
.svc-card__go { justify-self: end; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--line); transition: border-color .3s, background .3s, color .3s; }
.svc-card:hover .svc-card__go { border-color: var(--gold); background: var(--gold); color: var(--navy-deep); }
.svc-card__go svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 900px) { .svcs__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  .svcs__grid { gap: 10px; }
  .svc-card { justify-items: center; text-align: center; gap: 10px; padding: 20px 12px 16px; border-radius: 14px; }
  .svc-card__icon { width: 36px; height: 36px; }
  .svc-card__title { font-size: 18px; }
  .svc-card__text { display: none; }
  .svc-card__go { justify-self: center; width: 32px; height: 32px; }
  .svc-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
/* living drawings of the services (js/art-svc.js): a navy tile with a blueprint grid; the scene is drawn with the .sv-* classes */
.sv-tile { position: relative; display: block; overflow: hidden; border-radius: var(--r-m); background: radial-gradient(120% 150% at 50% 120%, var(--navy-soft) 0%, var(--navy) 52%, var(--navy-deep) 100%); box-shadow: inset 0 0 0 1px rgba(238,242,249,.1); isolation: isolate; transition: box-shadow .3s; }
.sv-tile::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(238,242,249,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(238,242,249,.055) 1px, transparent 1px); background-size: 16px 16px; background-position: center; }
.sv { position: relative; display: block; width: 100%; height: 100%; --sv-w: 1.7px; }
.sv-k { fill: none; stroke: var(--on-navy); stroke-width: var(--sv-w); stroke-linecap: round; stroke-linejoin: round; }
.sv-d { fill: none; stroke: var(--on-navy-2); stroke-opacity: .65; stroke-width: calc(var(--sv-w) * .8); stroke-linecap: round; stroke-linejoin: round; }
.sv-g { fill: none; stroke: var(--gold-light); stroke-width: calc(var(--sv-w) * 1.2); stroke-linecap: round; stroke-linejoin: round; }
.sv-f { fill: rgba(238,242,249,.1); stroke: var(--on-navy); stroke-width: var(--sv-w); stroke-linejoin: round; }
.sv-fd { fill: rgba(238,242,249,.05); stroke: var(--on-navy-2); stroke-opacity: .55; stroke-width: calc(var(--sv-w) * .8); stroke-linejoin: round; }
.sv-fg { fill: var(--gold-light); stroke: none; }
.sv-fl { fill: rgba(235,203,122,.2); stroke: var(--gold-light); stroke-width: var(--sv-w); stroke-linejoin: round; }
.sv-w { fill: var(--on-navy); stroke: none; }
.sv-pp { stroke-width: calc(var(--sv-w) * 4.7); stroke-opacity: .2; stroke-linecap: butt; stroke-linejoin: round; }
.sv-thin { stroke-width: calc(var(--sv-w) * .6); }
.sv-bold { stroke-width: calc(var(--sv-w) * 1.6); }
.sv-heavy { stroke-width: calc(var(--sv-w) * 2); }
.svc-card__art { width: 100%; aspect-ratio: 8 / 3; }
.svc-card:hover .sv-tile { box-shadow: inset 0 0 0 1px rgba(235,203,122,.55); }
.svc__btn--art { grid-template-columns: 76px minmax(0, 1fr); }
.svc__art { width: 76px; aspect-ratio: 4 / 3; border-radius: 8px; --sv-w: 3.6px; }
.svc__art .sv { --sv-w: 3.6px; }
.svc__item.is-on .svc__art { box-shadow: inset 0 0 0 1.5px var(--gold); }
@media (max-width: 900px) { .svc__btn--art { grid-template-columns: 64px minmax(0, 1fr); } .svc__art { width: 64px; } }
@media (max-width: 600px) { .svc-card__art { aspect-ratio: 3 / 2; } }
.sec-head__txt { display: grid; gap: var(--s-3); }
.sec-head--row .more { margin-bottom: 6px; }

/* home: technology teaser with a live mini drawing */
.tease { background: var(--grain), var(--navy); color: var(--on-navy); padding-block: var(--s-9); overflow: hidden; }
.tease__in { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.tease__body { display: grid; gap: 18px; justify-items: start; }
.tease__body .h2 { margin: 0; }
.tease__text { margin: 0; color: var(--on-navy-2); max-width: 46ch; }
.tease__steps { list-style: none; margin: 4px 0 8px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 18px; }
.tease__steps li { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 500; }
.tease__steps span { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid rgba(235,203,122,.5); color: var(--gold-light); font-size: 13px; font-variant-numeric: tabular-nums; }
.tease__win { border-radius: var(--r-m); overflow: hidden; background: var(--cad-bg); box-shadow: 0 50px 90px -40px rgba(0,0,0,.7), 0 0 0 1px rgba(235,203,122,.12); }
.tease__bar { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; background: var(--cad-ui-2); border-bottom: 1px solid var(--cad-ui-line); }
.tease__bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--cad-ui-line); }
.tease__bar span { margin-left: 8px; font: 500 11px/1 var(--f-mono); color: var(--cad-ui-dim); }
.tease__win svg { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 760; }
.tease.no-cad .tease__media { display: none; }
@media (max-width: 900px) {
  .tease__in { grid-template-columns: minmax(0, 1fr); }
  .tease__body { justify-items: center; text-align: center; }
  .tease__text { margin-inline: auto; }
  .tease__steps { text-align: left; width: 100%; max-width: 420px; }
}
@media (max-width: 380px) { .tease__steps { grid-template-columns: minmax(0, 1fr); } }

/* call to action at the end of a page */
.cta { position: relative; background: var(--grain), radial-gradient(800px 300px at 85% 0%, rgba(201,152,47,.18), transparent 70%), var(--navy-deep); color: var(--on-navy); padding-block: clamp(56px, 7vw, 96px); overflow: hidden; }
.cta::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: repeating-linear-gradient(90deg, var(--gold) 0 54px, transparent 54px 92px); opacity: .7; }
.cta__in { display: flex; align-items: center; justify-content: space-between; gap: var(--s-6); flex-wrap: wrap; }
.cta__txt { display: grid; gap: 10px; max-width: 640px; }
.cta__txt .h2 { margin: 0; color: #fff; }
.cta__txt p { margin: 0; color: var(--on-navy-2); }
.cta__btns { display: flex; gap: 12px; flex-wrap: wrap; }
.cta__call svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
@media (max-width: 900px) {
  .cta__in { flex-direction: column; text-align: center; }
  .cta__txt { justify-items: center; }
  .cta__btns { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; max-width: 380px; }
}

/* page changes fade (browsers with cross-document view transitions) */
@view-transition { navigation: auto; }
.top { view-transition-name: top; }
.bnav { view-transition-name: bnav; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

/* lightbox */
.lb { position: fixed; inset: 0; z-index: 80; background: rgba(5,15,38,.88); backdrop-filter: blur(6px); display: grid; place-items: center; padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); animation: fade .3s both; }
.lb__box { position: relative; width: min(1100px, 100%); max-height: 100%; overflow: auto; background: var(--paper); border-radius: var(--r-l); display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); }
.lb__media { position: relative; background: #000; min-height: 280px; }
.lb__media img { width: 100%; height: 100%; max-height: 78vh; object-fit: contain; }
.lb__arrow { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,.92); }
.lb__arrow--l { left: 12px; } .lb__arrow--r { right: 12px; }
.lb__close { position: absolute; top: 12px; right: 12px; z-index: 2; }
.lb__body { padding: 56px 28px 28px; display: grid; gap: 10px; align-content: start; }
.lb__meta { margin: 0; color: var(--gold-ink); font-weight: 500; font-size: 14px; }
.lb__title { font: 400 30px/1.15 var(--f-display); margin: 0; }
.lb__body p { margin: 0; color: var(--ink-2); }
.lb__count { font-size: 14px; font-variant-numeric: tabular-nums; }
.lb__full { justify-self: start; color: var(--navy); font-weight: 600; font-size: 15px; }
@media (max-width: 760px) { .lb__box { grid-template-columns: minmax(0, 1fr); } .lb__body { padding: 20px; } }

/* object dialog: photos, story and facts of one object; a full screen on a phone */
.od { position: fixed; inset: 0; z-index: 82; display: grid; place-items: center; padding: max(20px, env(safe-area-inset-top, 0px)) max(20px, env(safe-area-inset-right, 0px)) max(20px, env(safe-area-inset-bottom, 0px)) max(20px, env(safe-area-inset-left, 0px)); background: rgba(5,15,38,.84); backdrop-filter: blur(8px); animation: odFade .25s var(--ease) both; }
.od[hidden] { display: none; }
.od__panel { position: relative; width: min(1200px, 100%); height: min(740px, 100%); display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); background: var(--paper); border-radius: var(--r-l); overflow: hidden; box-shadow: 0 30px 90px rgba(0,0,0,.5); animation: odIn .4s var(--ease) both; outline: none; }
.od--text .od__panel { width: min(680px, 100%); height: auto; max-height: 100%; grid-template-columns: minmax(0, 1fr); }
.od__media { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; min-width: 0; min-height: 0; background: #040B1C; }
.od__stage { position: relative; min-height: 0; overflow: hidden; touch-action: pan-y; }
.od__bg { position: absolute; inset: -30px; width: calc(100% + 60px); height: calc(100% + 60px); object-fit: cover; filter: blur(28px) brightness(.5) saturate(1.15); }
.od__img { position: relative; display: block; width: 100%; height: 100%; object-fit: contain; transition: opacity .22s ease; }
.od__img.is-swap { opacity: 0; }
.od__arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; background: rgba(255,255,255,.92); }
.od__arrow--l { left: 14px; } .od__arrow--r { right: 14px; }
.od__count { position: absolute; left: 14px; bottom: 14px; z-index: 2; padding: 5px 12px; border-radius: 999px; background: rgba(5,15,38,.62); backdrop-filter: blur(6px); color: #fff; font-size: 13px; font-variant-numeric: tabular-nums; }
.od__thumbs { position: relative; display: flex; gap: 6px; padding: 8px; overflow-x: auto; overscroll-behavior: contain; scrollbar-width: thin; background: #07122B; }
.od__th { flex: 0 0 auto; width: 86px; aspect-ratio: 4 / 3; padding: 0; border: 2px solid transparent; border-radius: 6px; overflow: hidden; background: #0A1A3C; opacity: .62; cursor: pointer; transition: opacity .2s, border-color .2s; }
.od__th:hover { opacity: 1; }
.od__th[aria-current="true"] { border-color: var(--gold); opacity: 1; }
.od__th img { display: block; width: 100%; height: 100%; object-fit: cover; }
.od__info { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; min-width: 0; min-height: 0; }
.od__scroll { overflow-y: auto; overscroll-behavior: contain; padding: 54px 34px 24px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-content: start; justify-items: start; }
.od--text .od__scroll { padding-bottom: 28px; }
.od__meta { margin: 0; color: var(--gold-ink); font-weight: 500; font-size: 14px; letter-spacing: .03em; }
.od__title { margin: 0; font: 400 clamp(28px, 2.6vw, 38px)/1.1 var(--f-display); color: var(--navy); text-wrap: balance; }
.od__loc { margin: -4px 0 0; color: var(--ink-2); }
.od__st { padding: 5px 12px; border-radius: 999px; background: linear-gradient(180deg, #E2B958, var(--gold)); color: var(--navy-deep); font: 700 12px/1.2 var(--f-body); letter-spacing: .06em; text-transform: uppercase; }
.od__text { margin: 0; max-width: 56ch; color: var(--ink-2); }
.od__facts { width: 100%; margin: 4px 0 0; display: grid; border-top: 1px solid var(--line); }
.od__facts div { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 4px 16px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.od__facts dt { color: var(--gold-ink); font-weight: 500; }
.od__facts dd { margin: 0; color: var(--ink); }
.od__nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border-top: 1px solid var(--line); background: var(--paper); }
.od__step { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 43%; padding: 9px 10px; border: 0; border-radius: var(--r-m); background: transparent; color: var(--navy); font: 500 14px/1.25 var(--f-body); cursor: pointer; transition: background .2s; }
.od__step:hover { background: rgba(10,35,80,.07); }
.od__step span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.od__step svg { flex: none; }
.od__n { font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.od__close { position: absolute; top: 14px; right: 14px; z-index: 4; }
@keyframes odFade { from { opacity: 0; } }
@keyframes odIn { from { opacity: 0; transform: translateY(22px) scale(.985); } }
@media (max-width: 900px) {
  .od__panel { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 46%) minmax(0, 1fr); height: min(860px, 100%); }
  .od--text .od__panel { grid-template-rows: auto; height: auto; }
  .od__scroll { padding: 22px 24px 20px; }
  .od__facts div { grid-template-columns: 96px minmax(0, 1fr); }
}
@media (max-width: 700px) {
  .od { padding: 0; background: var(--paper); backdrop-filter: none; }
  .od__panel { width: 100%; height: 100%; border-radius: 0; box-shadow: none; grid-template-rows: minmax(0, 42%) minmax(0, 1fr); }
  .od--text .od__panel { height: 100%; grid-template-rows: minmax(0, 1fr); }
  .od__close { top: max(12px, env(safe-area-inset-top, 0px)); right: max(12px, env(safe-area-inset-right, 0px)); background: rgba(255,255,255,.92); box-shadow: 0 2px 10px rgba(0,0,0,.25); }
  .od__th { width: 64px; }
  .od__arrow { width: 40px; height: 40px; }
  .od__scroll { padding: 18px max(18px, env(safe-area-inset-right, 0px)) 18px max(18px, env(safe-area-inset-left, 0px)); }
  .od--text .od__scroll { padding-top: calc(64px + env(safe-area-inset-top, 0px)); }
  .od__title { font-size: 28px; }
  .od__nav { padding: 8px max(10px, env(safe-area-inset-right, 0px)) calc(8px + env(safe-area-inset-bottom, 0px)) max(10px, env(safe-area-inset-left, 0px)); }
}
@media (prefers-reduced-motion: reduce) { .od, .od__panel { animation: none; } .od__img, .od__th { transition: none; } }

/* rows of the works list that open an object */
.wrow.is-link { position: relative; cursor: pointer; transition: box-shadow .2s; }
.wrow.is-link:hover { box-shadow: inset 0 0 0 999px rgba(10,35,80,.045); }
.wrow__hit { position: absolute; inset: 0; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.wrow__hit:focus-visible { outline: 2px solid var(--gold-ink); outline-offset: -2px; }
.wrow.is-link .wrow__title::after { content: ""; display: inline-block; width: .42em; height: .42em; margin-left: .6em; border-top: 2px solid var(--gold-ink); border-right: 2px solid var(--gold-ink); transform: rotate(45deg) translateY(-.12em); }
.wrow__ph { display: inline-flex; align-items: center; gap: 5px; margin-left: 12px; color: var(--ink-2); font-size: 13px; }
.wrow__ph svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; }

/* details: numbered sections with a thin gold rule, staggered reveal */
main { counter-reset: sec; }
:is(.sec-head, .about__body, .process__head, .tease__body, .contact__info) .h2, .why .wrap > .h2 { counter-increment: sec; }
:is(.sec-head, .about__body, .process__head, .tease__body, .contact__info) .h2::before, .why .wrap > .h2::before { content: counter(sec, decimal-leading-zero); display: block; width: fit-content; margin-bottom: 16px; padding-right: 68px;
  font: 600 13px/1 var(--f-body); letter-spacing: .2em; color: var(--gold-ink); background: linear-gradient(var(--gold), var(--gold)) 100% 50% / 52px 1px no-repeat; }
:is(.process__head, .tease__body) .h2::before, .why .wrap > .h2::before { color: var(--gold-light); background-image: linear-gradient(var(--gold-light), var(--gold-light)); }

/* 404 "Road closed" (public/404.html) */
.nf-page { background: var(--navy-deep); }
.nf { min-height: 100svh; display: grid; justify-items: center; align-content: center; gap: 12px; text-align: center; color: var(--on-navy);
  padding: calc(40px + env(safe-area-inset-top, 0px)) 24px calc(48px + env(safe-area-inset-bottom, 0px));
  background: var(--grain), radial-gradient(60% 50% at 50% 30%, rgba(22,58,120,.6), rgba(10,35,80,0) 70%), var(--navy-deep); }
.nf__brand img { width: 108px; height: auto; opacity: .95; }
.nf__art { width: min(100%, 520px); height: auto; margin-top: 8px; }
.nf__lamp { animation: nfBlink 1.1s step-end infinite; }
.nf__lamp--b { animation-delay: .55s; }
@keyframes nfBlink { 0% { opacity: 1; } 50% { opacity: .15; } }
.nf__code { margin: 6px 0 0; font: 400 clamp(64px, 12vw, 120px)/1 var(--f-display); letter-spacing: .04em; color: var(--gold-light); }
.nf__title { margin: 0; font: 400 clamp(32px, 5vw, 52px)/1.1 var(--f-display); color: #fff; }
.nf__text { margin: 4px 0 18px; max-width: 46ch; color: var(--on-navy-2); font-size: 17px; line-height: 1.55; }
@media (prefers-reduced-motion: reduce) { .nf__lamp { animation: none; } }
/* figures as an odometer (js/site.js odometer): wheels of digits roll up to the figure when it comes into view */
.odo { display: inline-flex; height: 1em; line-height: 1; overflow: hidden; vertical-align: top; }
.odo__d { display: block; height: 1em; overflow: hidden; }
.odo__w { display: flex; flex-direction: column; transform: translateY(0); transition: transform var(--t, 1.4s) cubic-bezier(.16, .84, .3, 1); }
.odo__w span { display: block; height: 1em; line-height: 1; text-align: center; }
.odo.is-on .odo__w { transform: translateY(calc(var(--d) * -1em)); }
.odo__s { display: block; height: 1em; }
/* cards come in one after another: js/site.js setupReveal puts .rv on them and takes it off at the end of the animation */
.rv { opacity: 0; }
.rv.is-in { animation: rvIn .7s var(--ease) both; animation-delay: calc(var(--i, 0) * 90ms); }
@keyframes rvIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
/* a slim ticker of the kinds of work between the home sections */
.marquee { background: var(--concrete); color: var(--navy); overflow: hidden; border-block: 1px solid var(--line); }
.marquee__track { display: flex; width: max-content; animation: marquee var(--mq-t, 40s) linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__half { display: flex; flex: none; }
.marquee__set { display: flex; flex: none; margin: 0; padding: 0; list-style: none; }
.marquee__item { display: flex; align-items: center; white-space: nowrap; padding: 22px 0; font: 600 13px/1 var(--f-body); letter-spacing: .22em; text-transform: uppercase; }
.marquee__item::after { content: ""; width: 7px; height: 7px; margin: 0 36px; background: var(--gold); transform: rotate(45deg); }
@keyframes marquee { to { transform: translateX(-50%); } }
.marquee.is-still .marquee__track { animation: none; width: auto; justify-content: center; }
.marquee.is-still .marquee__half + .marquee__half, .marquee.is-still .marquee__half .marquee__set + .marquee__set { display: none; }
.marquee.is-still .marquee__set { flex-wrap: wrap; justify-content: center; }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; width: auto; justify-content: center; } .marquee__half + .marquee__half, .marquee__half .marquee__set + .marquee__set { display: none; } .marquee__set { flex-wrap: wrap; justify-content: center; } }
/* the kind of project in the request form */
.field__lab { font-size: 14px; font-weight: 500; color: var(--ink-2); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.field--topics .chip { padding: 8px 14px; font-size: 14px; }
@media (max-width: 760px) { .field--topics .chip { padding: 10px 14px; } }

/* ---- map "where we work" (js/map.js): the Mary oasis on a navy tile, a bubble per place, a legend that filters the works ---- */
.geo { background: var(--concrete); padding-block: var(--s-9); scroll-margin-top: 80px; }
.geo__grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--s-6); align-items: start; }
.geo__map { min-width: 0; }
.geo__side { display: grid; gap: var(--s-4); }
.geo__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.geo__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 48px; padding: 8px 10px 8px 16px; border: 1.5px solid var(--line); border-radius: var(--r-m); background: var(--paper); color: var(--ink); font: 500 16px/1.25 var(--f-body); text-align: left; cursor: pointer; transition: border-color .2s, background .2s, color .2s, box-shadow .2s; }
.geo__row:hover, .geo__row.is-hover { border-color: var(--navy); box-shadow: 0 6px 16px -10px rgba(10,35,80,.45); }
.geo__row[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.geo__row:focus-visible { outline: 2px solid var(--gold-ink); outline-offset: 2px; }
.geo__name { min-width: 0; }
.geo__n { flex: none; min-width: 34px; padding: 4px 9px; border-radius: 999px; background: var(--concrete); color: var(--navy); font: 700 14px/1.2 var(--f-body); text-align: center; font-variant-numeric: tabular-nums; }
.geo__row[aria-pressed="true"] .geo__n { background: var(--gold); color: var(--navy-deep); }
.geo__row--all { border-style: dashed; }
.geo__row--all[aria-pressed="true"] { border-style: solid; }
.geo__note { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.geo__credit { margin: var(--s-5) 0 0; max-width: 90ch; font-size: 12.5px; line-height: 1.55; color: var(--ink-2); }

.gm { --gm-water: var(--cad-ui-on); --gm-k: 1; position: relative; overflow: hidden; border-radius: var(--r-l); background: radial-gradient(120% 140% at 50% 115%, var(--navy-soft) 0%, var(--navy) 52%, var(--navy-deep) 100%); box-shadow: inset 0 0 0 1px rgba(238,242,249,.1), 0 22px 44px -28px rgba(6,22,51,.6); isolation: isolate; }
.gm__svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.gm__svg path { fill: none; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.gm__grat { stroke: rgba(238,242,249,.07); stroke-width: 1px; }
.gm__road { stroke: var(--on-navy-2); stroke-opacity: .5; stroke-width: 1.3px; }
.gm__rail { stroke: var(--on-navy-2); stroke-opacity: .62; stroke-width: 1.4px; stroke-dasharray: 7 4; stroke-linecap: butt; }
.gm__canal { stroke: var(--gm-water); stroke-opacity: .72; stroke-width: 1.7px; }
.gm__river { stroke: var(--gm-water); stroke-width: 2.6px; }
.gm__flow { stroke: var(--on-navy); stroke-opacity: 0; stroke-width: 1.5px; stroke-dasharray: 1 11; transition: stroke-opacity .6s; }
.gm.is-live .gm__flow { stroke-opacity: .6; animation: gmFlow 2.6s linear infinite; }
@keyframes gmFlow { to { stroke-dashoffset: -12; } }

.gm__wl { position: absolute; z-index: 1; transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) translateY(-10px); font: italic 500 12px/1 var(--f-body); letter-spacing: .06em; white-space: nowrap; color: var(--gm-water); text-shadow: 0 0 4px var(--navy-deep), 0 0 9px var(--navy-deep); pointer-events: none; }

.gm__pin { position: absolute; z-index: 2; width: calc(var(--d) * var(--gm-k)); aspect-ratio: 1; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; transform: translate(-50%, -50%); background: var(--gold); color: var(--navy-deep); cursor: pointer; font-family: var(--f-body); box-shadow: 0 0 0 3px rgba(201,152,47,.3), 0 5px 14px rgba(6,22,51,.55); transition: transform .25s var(--ease), background .2s, box-shadow .2s, opacity .25s; }
.gm__pin b { font-size: clamp(11px, calc(var(--d) * var(--gm-k) * .42), 17px); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; pointer-events: none; }
.gm__pin:hover, .gm__pin.is-hover { transform: translate(-50%, -50%) scale(1.12); background: var(--gold-light); z-index: 4; }
.gm__pin:focus-visible { outline: 2px solid var(--on-navy); outline-offset: 3px; z-index: 4; }
.gm__pin.is-on { background: var(--gold-light); z-index: 3; box-shadow: 0 0 0 4px rgba(235,203,122,.5), 0 0 0 10px rgba(235,203,122,.16), 0 5px 14px rgba(6,22,51,.55); }
.gm.has-on .gm__pin:not(.is-on):not(:hover):not(.is-hover) { opacity: .6; }
.gm.is-live .gm__pin.is-on::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--gold-light); animation: gmPulse 2.2s ease-out infinite; pointer-events: none; }
@keyframes gmPulse { from { transform: scale(1); opacity: .8; } to { transform: scale(2); opacity: 0; } }

.gm__lab { position: absolute; white-space: nowrap; font: 600 13px/1.1 var(--f-body); color: var(--on-navy); text-shadow: 0 0 3px var(--navy-deep), 0 0 8px var(--navy-deep), 0 1px 2px var(--navy-deep); }
.gm__pin--r .gm__lab { left: calc(100% + 8px); top: 50%; transform: translateY(-50%); }
.gm__pin--l .gm__lab { right: calc(100% + 8px); top: 50%; transform: translateY(-50%); }
.gm__pin--t .gm__lab { bottom: calc(100% + 7px); left: 50%; transform: translateX(-50%); }
.gm__pin--b .gm__lab { top: calc(100% + 7px); left: 50%; transform: translateX(-50%); }
.gm__pin.is-on .gm__lab { color: var(--gold-light); }
.gm__ar { position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-top: 2.5px solid var(--gold-light); border-right: 2.5px solid var(--gold-light); transform: rotate(var(--ang, 0deg)) translateX(calc(var(--d) * var(--gm-k) / 2 + 9px)) rotate(45deg); pointer-events: none; }

.gm__foot { position: absolute; z-index: 3; left: 12px; bottom: 12px; display: flex; align-items: flex-end; gap: 14px; pointer-events: none; }
.gm__inset { display: grid; gap: 5px; justify-items: center; padding: 6px 6px 5px; border-radius: var(--r-s); background: rgba(6,22,51,.62); box-shadow: inset 0 0 0 1px rgba(238,242,249,.14); }
.gm__inset svg { display: block; width: 62px; height: auto; }
.gm__inset span { max-width: 84px; font: 600 9.5px/1.15 var(--f-body); letter-spacing: .05em; text-transform: uppercase; text-align: center; color: var(--on-navy-2); }
.gm__ob { fill: rgba(238,242,249,.08); stroke: var(--on-navy-2); stroke-width: 1px; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.gm__ow { fill: rgba(201,152,47,.24); stroke: var(--gold-light); stroke-width: 1.3px; vector-effect: non-scaling-stroke; }
.gm__od { fill: var(--gold-light); }
.gm__scale { display: grid; gap: 3px; width: var(--w); min-width: 36px; padding-bottom: 2px; font: 600 11px/1 var(--f-body); color: var(--on-navy-2); text-shadow: 0 0 4px var(--navy-deep); }
.gm__scale i { display: block; height: 6px; border: 1.5px solid var(--on-navy-2); border-top: 0; }
.gm__north { position: absolute; z-index: 3; right: 14px; top: 12px; display: grid; justify-items: center; gap: 3px; color: var(--on-navy-2); font: 700 11px/1 var(--f-body); pointer-events: none; }
.gm__north svg { width: 11px; height: 17px; fill: var(--on-navy-2); }

/* the pins pop in one after another when the map first comes into view */
.gm--wait .gm__pin { opacity: 0; }
.gm.is-in .gm__pin { animation: gmPop .55s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 80ms + 120ms); }
@keyframes gmPop { from { opacity: 0; transform: translate(-50%, -50%) scale(.2); } }

/* the place picked on the map, above the list of works */
.works__pl { display: inline-flex; align-items: center; gap: 10px; padding: 8px 12px 8px 16px; border: 1.5px solid var(--gold-ink); border-radius: 999px; background: var(--paper); color: var(--ink); font: 500 15px/1.2 var(--f-body); cursor: pointer; transition: background .2s; }
.works__pl:hover { background: var(--concrete); }
.works__pl b { font-weight: 700; }
.works__pl svg { width: 16px; height: 16px; flex: none; fill: none; stroke: var(--gold-ink); stroke-width: 2.4; stroke-linecap: round; }
.works__pl:focus-visible, .works__back:focus-visible { outline: 2px solid var(--gold-ink); outline-offset: 2px; }
.works__back { margin-left: auto; padding: 6px 0; border: 0; background: none; color: var(--gold-ink); font: 600 14px/1.2 var(--f-body); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.wrow--none { display: block; padding: 28px 0; color: var(--ink-2); }

@media (max-width: 900px) {
  .geo { padding-block: var(--s-8); }
  .geo__grid { grid-template-columns: 1fr; gap: var(--s-5); }
  .geo__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .geo__row--all { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .gm { --gm-k: .8; }
  .gm__lab { font-size: 11.5px; }
  .gm__wl { display: none; }
  .gm__foot { left: 8px; bottom: 8px; gap: 8px; }
  .gm__inset { padding: 4px; }
  .gm__inset svg { width: 44px; }
  .gm__inset span { display: none; }
  .gm__north { right: 9px; top: 8px; }
  .geo__list { grid-template-columns: 1fr; gap: 6px; }
  .geo__row { min-height: 46px; padding-block: 6px; font-size: 15.5px; }
}
@media (max-width: 400px) { .gm { --gm-k: .72; } }
@media (prefers-reduced-motion: reduce) { .gm.is-live .gm__flow, .gm.is-live .gm__pin.is-on::after, .gm.is-in .gm__pin { animation: none; } .gm--wait .gm__pin { opacity: 1; } }