/* Self-hosted webfonts.
   Downloaded from Google Fonts and served from this origin instead, which
   removes a render-blocking third-party stylesheet, two preconnects and a DNS
   lookup from the critical path - and means no visitor IP is ever handed to
   Google, which is what the German Google Fonts rulings turned on.
   unicode-range is preserved, so a browser still fetches only the subsets it
   actually needs. Regenerate with scripts/localize-fonts.ps1 if the families
   are ever changed. */
/* vietnamese */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url(../fonts/fraunces-01.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url(../fonts/fraunces-02.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url(../fonts/fraunces-03.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/jetbrainsmono-04.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/jetbrainsmono-05.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/jetbrainsmono-06.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/jetbrainsmono-07.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/jetbrainsmono-08.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/jetbrainsmono-09.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/jetbrainsmono-04.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/jetbrainsmono-05.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/jetbrainsmono-06.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/jetbrainsmono-07.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/jetbrainsmono-08.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/jetbrainsmono-09.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url(../fonts/plusjakartasans-10.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* vietnamese */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url(../fonts/plusjakartasans-11.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url(../fonts/plusjakartasans-12.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url(../fonts/plusjakartasans-13.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   Diether Valeroso — Remote Customer Support
   Palette sampled directly from the client's logo:
     brass  #C9A255   deep brass #C68F16   cream #F5F1EC
   Layout is container-driven (@container / cqi) rather than viewport-driven,
   so every block reflows against whatever box it is placed in.
   ========================================================================== */

/* ---------- 1. tokens ---------- */
:root {
  --ink:        #0A1628;
  --ink-2:      #0E1D33;
  --ink-3:      #142640;
  --line:       #1E3350;
  --line-soft:  #17293f;

  --brass:      #C9A255;
  --brass-hi:   #DFBE7C;
  --brass-deep: #C68F16;   /* logo wordmark brass — dark grounds only */
  --brass-ink:  #8A6410;   /* same hue, darkened to clear AA on --paper (4.78:1) */
  --brass-dim:  rgba(201,162,85,.22);

  --paper:      #F5F1EC;
  --paper-2:    #EBE5DB;
  --paper-3:    #DED6C8;
  --steel:      #7FB3D5;

  --on-ink:     #DCE3ED;
  --on-ink-dim: #8FA0B6;
  --on-pap:     #16202E;
  --on-pap-dim: #5A6675;

  /* fluid rhythm */
  --gut:   clamp(1.15rem, .7rem + 2.1vw, 2.75rem);
  --bay:   clamp(3.75rem, 2rem + 7.5vw, 9rem);
  --shell: 78rem;

  /* fluid type */
  --t-xs:  clamp(.7rem,  .67rem + .14vw, .78rem);
  --t-sm:  clamp(.82rem, .78rem + .18vw, .93rem);
  --t-bd:  clamp(.97rem, .92rem + .26vw, 1.09rem);
  --t-md:  clamp(1.06rem, .98rem + .38vw, 1.28rem);
  --t-lg:  clamp(1.3rem,  1.1rem + .95vw, 1.95rem);
  --t-xl:  clamp(1.75rem, 1.28rem + 2.1vw, 3.1rem);
  --t-2xl: clamp(2.3rem,  1.4rem + 4.1vw, 4.9rem);

  --f-disp: "Fraunces", "Fraunces Fallback", "Iowan Old Style", Georgia, serif;
  --f-body: "Plus Jakarta Sans", "Jakarta Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "JetBrains Mono", "Mono Fallback", ui-monospace, "SF Mono", Menlo, monospace;

  --r-sm: 3px;
  --r-md: 5px;
  --ease: cubic-bezier(.22,.61,.36,1);

  /* fine print-like grain, keeps large flat fields from looking synthetic */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}


/* ---------- 1b. metric-matched fallbacks ----------
   Measured in-browser against the exact instances the page renders: Fraunces
   at opsz 144 (the heading axis) sets 14.9% narrower than Georgia, Plus Jakarta
   Sans at weight 350 is 6.3% wider than Arial, JetBrains Mono at 500 is 9.1%
   wider than Consolas. Measuring the default axis instead of the rendered one
   left a 2% error - enough to re-wrap a balanced headline and shift the page. Left unadjusted, the swap when the webfonts arrive
   reflows every headline and shoves the hero image down the page - which was
   the whole of this build's 0.175 cumulative layout shift.

   These overrides make the fallback occupy the same space as the real font, so
   the swap is invisible and the shift is zero. */
@font-face {
  font-family: "Fraunces Fallback";
  src: local("Georgia"), local("Times New Roman"), local("Liberation Serif");
  size-adjust: 85.11%;
  ascent-override: 98%;
  descent-override: 26%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Jakarta Fallback";
  src: local("Arial"), local("Helvetica Neue"), local("Liberation Sans");
  size-adjust: 106.26%;
  ascent-override: 104%;
  descent-override: 22%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Mono Fallback";
  src: local("Consolas"), local("Menlo"), local("DejaVu Sans Mono");
  size-adjust: 109.13%;
  ascent-override: 102%;
  descent-override: 30%;
  line-gap-override: 0%;
}

/* ---------- 2. reset ---------- */
*,*::before,*::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--f-body);
  font-size: var(--t-bd);
  line-height: 1.62;
  font-weight: 350;
  color: var(--on-ink);
  background: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
body::before {
  /* Global grain. Sits above page content but BELOW the floating chrome
     (back-to-top 800, header 900, cookie notice 950). Above them it tinted
     the UI and left contrast checkers unable to resolve a real background
     colour behind the cookie buttons. */
  content: ""; position: fixed; inset: 0; z-index: 700;
  background-image: var(--grain);
  opacity: .16; pointer-events: none; mix-blend-mode: overlay;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; color: inherit; }
ul, ol { list-style: none; padding: 0; }

:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip {
  position: absolute; left: 50%; top: -4rem; transform: translateX(-50%);
  z-index: 10001; background: var(--brass); color: var(--ink);
  padding: .7rem 1.3rem; font: 500 var(--t-sm)/1 var(--f-mono);
  letter-spacing: .06em; text-transform: uppercase; transition: top .2s var(--ease);
}
.skip:focus { top: .8rem; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- 3. type primitives ---------- */
h1,h2,h3 {
  font-family: var(--f-disp);
  font-optical-sizing: none;
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -.018em;
  text-wrap: balance;
}
p { text-wrap: pretty; }

.eyebrow {
  display: flex; align-items: center; gap: .6rem;
  font: 500 var(--t-xs)/1 var(--f-mono);
  letter-spacing: .19em; text-transform: uppercase;
  color: var(--on-ink-dim);
  margin-bottom: clamp(1rem, .6rem + 1.2vw, 1.7rem);
}
.eyebrow--brass { color: var(--brass); }
.eyebrow .num {
  color: var(--brass);
  padding-right: .6rem; margin-right: .1rem;
  border-right: 1px solid var(--brass-dim);
}
.sec--paper .eyebrow { color: var(--on-pap-dim); }
.sec--paper .eyebrow .num { color: var(--brass-ink); border-color: rgba(138,100,16,.35); }

.ico {
  width: 1.25rem; height: 1.25rem; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}
.ico--xs { width: .95rem; height: .95rem; stroke-width: 1.7; }
.ico--lg { width: 1.7rem; height: 1.7rem; stroke-width: 1.35; }

/* ---------- 4. shell + sections ---------- */
.shell {
  width: min(100% - (var(--gut) * 2), var(--shell));
  margin-inline: auto;
}

.sec {
  position: relative;
  padding-block: var(--bay);
  container-type: inline-size;
}
.sec--dark  { background: var(--ink);   color: var(--on-ink); }
.sec--paper { background: var(--paper); color: var(--on-pap); }
.sec--rule  { border-top: 1px solid var(--line-soft); }

.sec--paper h1, .sec--paper h2, .sec--paper h3 { color: var(--on-pap); }

.sec__head { max-width: 46rem; margin-bottom: clamp(2.4rem, 1.4rem + 3.4vw, 4.5rem); }
.sec__h2 { font-size: var(--t-xl); font-variation-settings: "opsz" 144, "wght" 400; }
.sec__sub {
  margin-top: clamp(.9rem, .6rem + .8vw, 1.4rem);
  font-size: var(--t-md); color: var(--on-ink-dim); max-width: 44ch;
}
.sec--paper .sec__sub { color: var(--on-pap-dim); }

.sec__head--split { max-width: none; display: grid; gap: clamp(1.2rem, .6rem + 2vw, 3rem); }
@container (min-width: 52rem) {
  .sec__head--split { grid-template-columns: 1.15fr .85fr; align-items: end; }
  .sec__head--split .sec__sub { margin-top: 0; padding-bottom: .35rem; }
}

/* ---------- 5. buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  /* Explicitly transparent. Without this, a real <button> picks up the UA
     default `buttonface`, which resolves to a grey box on a dark colour-scheme
     - visible on the cookie notice, and enough to fail contrast at 4.12:1. */
  background: none;
  padding: clamp(.72rem, .6rem + .4vw, .95rem) clamp(1.15rem, .9rem + .8vw, 1.75rem);
  font: 500 var(--t-sm)/1 var(--f-body);
  letter-spacing: .015em;
  border: 1px solid transparent; border-radius: var(--r-sm);
  cursor: pointer; white-space: nowrap;
  transition: background .25s var(--ease), color .25s var(--ease),
              border-color .25s var(--ease), transform .25s var(--ease);
}
.btn--brass { background: var(--brass); color: #14100A; border-color: var(--brass); font-weight: 600; }
.btn--brass:hover { background: var(--brass-hi); border-color: var(--brass-hi); transform: translateY(-1px); }
.btn--ghost { border-color: rgba(220,227,237,.3); color: var(--on-ink); }
.btn--ghost:hover { border-color: var(--brass); color: var(--brass); }
.btn--sm { padding: .6rem 1.05rem; font-size: var(--t-xs); }
.btn--full { width: 100%; }
.btn .ico { transition: transform .25s var(--ease); }
.btn:hover .ico { transform: translate(2px,-2px); }

.lnk {
  display: inline-flex; align-items: center; gap: .5rem;
  margin-top: 1.6rem; padding-bottom: .3rem;
  font: 500 var(--t-sm)/1 var(--f-body);
  color: var(--brass); border-bottom: 1px solid var(--brass-dim);
  transition: border-color .25s var(--ease), gap .25s var(--ease);
}
.lnk:hover { border-color: var(--brass); gap: .8rem; }

/* ---------- 6. preloader ---------- */
/* Failsafe: if the script never runs — blocked, failed, or errored — the
   overlay must not trap the page. This hides it after four seconds with no
   JavaScript involved. JS still dismisses it far sooner in the normal case. */
@keyframes pre-failsafe { to { opacity: 0; visibility: hidden; } }

.preloader {
  position: fixed; inset: 0; z-index: 10000;
  animation: pre-failsafe 1ms linear 4s forwards;
  display: grid; place-items: center;
  background: var(--ink);
  transition: opacity .6s var(--ease), visibility .6s var(--ease);
}
.preloader.is-done { opacity: 0; visibility: hidden; }
.preloader__inner { display: grid; justify-items: center; gap: 1.6rem; }

.preloader__signal { position: relative; display: grid; place-items: center; width: 8rem; height: 8rem; }
.preloader__mark { width: 3.1rem; height: auto; position: relative; z-index: 2;
                   animation: mark-in .8s var(--ease) both; }
.preloader__arc {
  position: absolute; inset: 0; margin: auto;
  width: 3.6rem; height: 3.6rem;
  border: 1px solid var(--brass); border-radius: 50%;
  opacity: 0; animation: ping 2.4s var(--ease) infinite;
}
.preloader__arc:nth-child(2) { animation-delay: .8s; }
.preloader__arc:nth-child(3) { animation-delay: 1.6s; }

@keyframes ping {
  0%   { transform: scale(.85); opacity: 0; }
  18%  { opacity: .5; }
  100% { transform: scale(2.3); opacity: 0; }
}
@keyframes mark-in { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }

.preloader__label {
  font: 500 var(--t-xs)/1 var(--f-mono);
  letter-spacing: .3em; text-transform: uppercase; color: var(--brass);
}
.preloader__track { width: 11rem; height: 1px; background: var(--line); overflow: hidden; }
.preloader__bar   { display: block; height: 100%; width: 40%; background: var(--brass);
                    animation: sweep 1.3s var(--ease) infinite; }
@keyframes sweep { 0% { transform: translateX(-110%); } 100% { transform: translateX(320%); } }

/* ---------- 7. header ---------- */
.head {
  position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 900;
  transition: background .35s var(--ease), border-color .35s var(--ease),
              backdrop-filter .35s var(--ease);
  border-bottom: 1px solid transparent;
}
.head.is-stuck {
  background: rgba(10,22,40,.86);
  backdrop-filter: blur(14px) saturate(1.3);
  border-bottom-color: var(--line-soft);
}
.head__in {
  display: flex; align-items: center; gap: var(--gut);
  padding-block: clamp(.75rem, .55rem + .7vw, 1.15rem);
  container-type: inline-size;
}

/* Both marks are the client's own artwork: the full lockup normally, and the
   official site-icon monogram once the header runs out of room. */
.brand { display: flex; align-items: center; margin-inline-end: auto; }
.brand__lockup { width: clamp(14rem, 10rem + 8vw, 18rem); height: auto; }
.brand__mark   { display: none; width: clamp(2.4rem, 2rem + 2.5vw, 2.9rem); height: auto; }
/* Only fall back to the bare monogram on genuinely tiny headers; phones from
   ~360px up still get the full lockup, and at a readable size. */
@container (max-width: 20rem) {
  .brand__lockup { display: none; }
  .brand__mark   { display: block; }
}

.nav__list { display: flex; align-items: center; gap: clamp(1rem, .5rem + 1.4vw, 2.1rem); }
.nav__list a {
  position: relative; font-size: var(--t-sm); font-weight: 400;
  color: var(--on-ink-dim); transition: color .25s var(--ease);
}
.nav__list a::after {
  content: ""; position: absolute; left: 0; bottom: -.35rem;
  width: 100%; height: 1px; background: var(--brass);
  transform: scaleX(0); transform-origin: right; transition: transform .3s var(--ease);
}
.nav__list a:hover { color: var(--paper); }
.nav__list a:hover::after { transform: scaleX(1); transform-origin: left; }

.nav__cta { display: none; }   /* header already carries the CTA on wide screens */

.head__act { display: flex; align-items: center; gap: .8rem; }
.burger {
  display: none; place-items: center;
  width: 2.6rem; height: 2.6rem; padding: 0;
  background: none; border: 1px solid var(--line); border-radius: var(--r-sm);
  color: var(--paper); cursor: pointer;
}
.burger__shut { display: none; }
.head.is-open .burger__open { display: none; }
.head.is-open .burger__shut { display: block; }

@media (max-width: 60rem) {
  .burger { display: grid; }
  .head__act .btn { display: none; }
  .nav {
    position: fixed; inset: 0 0 auto; top: 0; z-index: -1;
    padding: 6rem var(--gut) 2.5rem;
    background: var(--ink-2); border-bottom: 1px solid var(--line);
    box-shadow: 0 26px 50px rgba(3, 9, 20, .55);
    transform: translateY(-100%); transition: transform .45s var(--ease);
  }
  .head.is-open .nav { transform: none; }
  .nav__list { flex-direction: column; align-items: flex-start; gap: 1.35rem; }
  .nav__list a { font-size: var(--t-lg); font-family: var(--f-disp); color: var(--paper); }
  .nav__cta { display: block; margin-top: .6rem; }
  .nav__cta a { font-family: var(--f-body); font-size: var(--t-sm); color: #14100A; }
  .nav__cta a::after { display: none; }
}

/* ---------- 8. hero ---------- */
.hero {
  position: relative; isolation: isolate;
  padding-block: clamp(7.5rem, 5rem + 12vw, 12rem) 0;
  container-type: inline-size;
  overflow: hidden;
}
.hero__bg { position: absolute; inset: 0; z-index: -3; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 68% 50%; }
.hero__veil {
  position: absolute; inset: 0; z-index: -2;
  background:
    linear-gradient(100deg, var(--ink) 8%, rgba(10,22,40,.93) 38%, rgba(10,22,40,.52) 68%, rgba(10,22,40,.75) 100%),
    linear-gradient(to bottom, rgba(10,22,40,.7) 0%, transparent 22%, rgba(10,22,40,.9) 88%, var(--ink) 100%);
}

.hero__in { display: grid; gap: clamp(2rem, 1rem + 4vw, 3.5rem); align-items: end; }
@container (min-width: 58rem) {
  .hero__in { grid-template-columns: minmax(0,1.12fr) minmax(0,.88fr); }
}

.hero__copy { padding-bottom: clamp(2.5rem, 1.5rem + 4vw, 5.5rem); max-width: 40rem; }
.hero__h1 {
  font-size: var(--t-2xl);
  font-variation-settings: "opsz" 144, "wght" 400;
  color: #fff;
}
.hero__h1 em {
  font-style: italic; color: var(--brass);
  font-variation-settings: "opsz" 144, "wght" 400;
}
.hero__lead {
  margin-top: clamp(1.1rem, .8rem + 1.1vw, 1.8rem);
  font-size: var(--t-md); color: var(--on-ink); max-width: 40ch;
}
.hero__cta {
  display: flex; flex-wrap: wrap; gap: .8rem;
  margin-top: clamp(1.6rem, 1.1rem + 1.6vw, 2.4rem);
}

.stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
  gap: clamp(1rem, .5rem + 1.4vw, 2rem);
  margin-top: clamp(2.2rem, 1.5rem + 2.4vw, 3.4rem);
  padding-top: clamp(1.3rem, .9rem + 1.2vw, 1.9rem);
  border-top: 1px solid var(--line);
}
.stat__k {
  font: 400 var(--t-xs)/1.3 var(--f-mono);
  letter-spacing: .13em; text-transform: uppercase; color: var(--on-ink-dim);
}
.stat__v { display: flex; align-items: baseline; gap: .3rem; margin-top: .5rem; }
.stat__n {
  font-family: var(--f-disp); font-variation-settings: "opsz" 144, "wght" 400;
  font-size: clamp(1.8rem, 1.3rem + 1.9vw, 2.7rem); line-height: 1; color: var(--brass);
}
.stat__u { font: 500 var(--t-xs)/1 var(--f-mono); letter-spacing: .1em; color: var(--on-ink-dim); }

.hero__fig { position: relative; justify-self: center; width: 100%; max-width: 30rem; }
/* Stacked, a full-height figure would swallow the fold — rein it in against
   the hero's own width, not the viewport's. */
@container (max-width: 58rem) {
  .hero__fig { max-width: min(19rem, 58cqi); }
}
.hero__plate {
  position: absolute; z-index: -1;
  left: 50%; bottom: 0; translate: -50% 0;
  width: min(88%, 24rem); aspect-ratio: 1;
  background: radial-gradient(ellipse at 50% 62%, rgba(201,162,85,.3), transparent 66%);
  filter: blur(6px);
}
.hero__fig .cutout--hero {
  width: 100%; height: auto;
  filter: drop-shadow(0 26px 46px rgba(3,9,20,.62));
}
.hero__badge {
  position: absolute; z-index: 2;
  left: 0; bottom: clamp(2.5rem, 1.5rem + 4vw, 5.5rem);
  display: grid; gap: .3rem;
  padding: .7rem .95rem;
  background: rgba(14,29,51,.82);
  backdrop-filter: blur(9px);
  border: 1px solid var(--line);
  border-left: 2px solid var(--brass);
  border-radius: var(--r-sm);
}
.hero__badge-k {
  font: 400 clamp(.56rem,.53rem + .1vw,.64rem)/1.2 var(--f-mono);
  letter-spacing: .14em; text-transform: uppercase; color: var(--on-ink-dim);
}
.hero__badge-v { font-size: var(--t-sm); font-weight: 600; color: var(--brass); }
@container (max-width: 58rem) { .hero__badge { left: auto; right: 0; } }

/* cut-out compositing: JPEG colour layer + 8-bit alpha mask.
   Keeps the <img> semantics and alt text while cutting ~93% of the weight
   a transparent PNG of the same figure would have cost. */
/* Paths are relative to THIS stylesheet, never root-relative. The theme
   lives under /wp-content/themes/<name>/ in WordPress, so "/assets/img/..."
   resolves to the domain root and 404s — which silently drops the mask and
   leaves the cut-out showing as a rectangle with its background plate. */
.cutout[src*="navy-suit"]     { --mask: url("../img/diether-valeroso-navy-suit-cutout-mask.png"); }
.cutout[src*="arms-crossed"]  { --mask: url("../img/diether-valeroso-arms-crossed-cutout-mask.png"); }
.cutout[src*="with-laptop"]   { --mask: url("../img/diether-valeroso-with-laptop-cutout-mask.png"); }
.cutout[src*="seated-tablet"] { --mask: url("../img/diether-valeroso-seated-tablet-cutout-mask.png"); }

.cutout {
  -webkit-mask-image: var(--mask);  mask-image: var(--mask);
  -webkit-mask-size: 100% 100%;     mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;   mask-repeat: no-repeat;
  -webkit-mask-position: center;    mask-position: center;
}

/* Cropped variant. A full-body figure is roughly 1:2.7, which runs off the
   bottom of any sane layout. Fitting the picture AND its mask with `cover`
   from the same origin keeps the two in register, so we can crop to a portrait
   box rather than shrink him to a sliver — and a second gradient mask layer
   fades the cut edge out instead of slicing his torso off square. */
.cutout--crop {
  width: 100%; height: auto;
  object-fit: cover; object-position: 50% 0;
  -webkit-mask-image: var(--mask), linear-gradient(to bottom, #000 56%, rgba(0,0,0,0) 97%);
          mask-image: var(--mask), linear-gradient(to bottom, #000 56%, rgba(0,0,0,0) 97%);
  -webkit-mask-size: cover, 100% 100%;      mask-size: cover, 100% 100%;
  -webkit-mask-position: 50% 0, 0 0;        mask-position: 50% 0, 0 0;
  -webkit-mask-repeat: no-repeat, no-repeat; mask-repeat: no-repeat, no-repeat;
  -webkit-mask-composite: source-in;        mask-composite: intersect;
}

/* ---------- 9. tool marquee ---------- */
.marquee {
  position: relative; overflow: hidden;
  border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft);
  background: rgba(10,22,40,.5);
  padding-block: clamp(.75rem, .6rem + .5vw, 1.05rem);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
/* Seamless loop. JS pads the group out until it is at least as wide as the
   marquee, then clones it once — so translating by exactly -50% lands the copy
   precisely where the original started, at any viewport width. Without the
   padding step a narrow group leaves a visible gap on wide screens. */
.marquee__row {
  display: flex; align-items: center;
  width: max-content;
  font: 400 var(--t-xs)/1 var(--f-mono);
  letter-spacing: .22em; text-transform: uppercase; color: var(--on-ink-dim);
}
.marquee__row.is-live { animation: slide 38s linear infinite; }
.marquee__group { display: flex; align-items: center; }
.marquee__group li { display: flex; align-items: center; white-space: nowrap; }
.marquee__group li::after {
  content: "\00B7"; color: var(--brass);
  margin-inline: clamp(.9rem, .6rem + 1.1vw, 1.8rem);
}
@keyframes slide { to { transform: translateX(-50%); } }

/* ---------- 10. service cards ---------- */
/* Six cards, so only 1 / 2 / 3 columns divide evenly — auto-fit would land on
   four at desktop and strand two in a half-empty row. */
.cards {
  display: grid; gap: 1px;
  grid-template-columns: minmax(0, 1fr);
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
}
@container (min-width: 30rem) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (min-width: 58rem) { .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.card {
  container-type: inline-size;
  padding: clamp(1.6rem, 1.1rem + 1.8vw, 2.6rem);
  background: var(--ink);
  transition: background .35s var(--ease);
}
.card:hover { background: var(--ink-2); }
.card__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; }
.card__top .ico { color: var(--brass); }
.card__num { font: 400 var(--t-xs)/1 var(--f-mono); letter-spacing: .14em; color: var(--line); }
.card:hover .card__num { color: var(--brass-dim); }
.card__h3 {
  font-size: var(--t-lg); font-variation-settings: "opsz" 72, "wght" 400;
  margin-bottom: .7rem; color: var(--paper);
}
.card p { font-size: var(--t-sm); color: var(--on-ink-dim); }

/* ---------- 11. about ---------- */
.about { display: grid; gap: clamp(2.2rem, 1.2rem + 4vw, 4.5rem); align-items: center; }
@container (min-width: 56rem) { .about { grid-template-columns: .82fr 1.18fr; } }
@container (max-width: 56rem) { .about__media { max-width: 26rem; margin-inline: auto; width: 100%; } }

.about__media { position: relative; padding-bottom: clamp(2.5rem, 1.5rem + 4vw, 4.5rem); }
.frame { position: relative; overflow: hidden; border-radius: var(--r-md); }
.frame img { width: 100%; height: auto; }
.frame::after {
  content: ""; position: absolute; inset: 0;
  box-shadow: inset 0 0 0 1px rgba(10,22,40,.14);
  border-radius: inherit; pointer-events: none;
}
.frame--inset {
  position: absolute; right: clamp(-.5rem, -2vw, 0rem); bottom: 0;
  width: clamp(7.5rem, 5rem + 16cqi, 12.5rem);
  border: 5px solid var(--paper);
  box-shadow: 0 16px 34px rgba(10,22,40,.2);
}

.about__copy .lede {
  font-size: var(--t-md); color: var(--on-pap);
  margin-bottom: 1.1rem; font-weight: 400;
}
.about__copy p + p { margin-top: 1.1rem; }
.about__copy p { color: var(--on-pap-dim); }
.about__copy .sec__h2 { margin-bottom: clamp(1.2rem, .8rem + 1.2vw, 1.9rem); }

.facts {
  display: grid; gap: .85rem;
  margin-top: clamp(1.8rem, 1.2rem + 1.8vw, 2.6rem);
  padding-top: clamp(1.4rem, 1rem + 1.2vw, 2rem);
  border-top: 1px solid var(--paper-3);
}
.facts li { display: flex; align-items: center; gap: .75rem; font-size: var(--t-sm); color: var(--on-pap-dim); }
.facts .ico { color: var(--brass-ink); }
.facts strong { color: var(--on-pap); font-weight: 600; }

/* ---------- 12. timeline ---------- */
.tl { display: grid; gap: 1px; background: var(--line-soft); border-block: 1px solid var(--line-soft); }
.tl__item {
  container-type: inline-size;
  display: grid; gap: clamp(.9rem, .5rem + 1.4vw, 2.5rem);
  padding-block: clamp(1.8rem, 1.2rem + 2vw, 3rem);
  background: var(--ink);
}
@container (min-width: 50rem) { .tl__item { grid-template-columns: 15rem 1fr; } }

.tl__when { display: grid; gap: .35rem; align-content: start; }
.tl__yr {
  font: 500 var(--t-sm)/1 var(--f-mono); letter-spacing: .1em; color: var(--brass);
}
.tl__where { font-size: var(--t-xs); color: var(--on-ink-dim); letter-spacing: .02em; }

.tl__h3 {
  font-size: var(--t-lg); font-variation-settings: "opsz" 72, "wght" 400;
  color: var(--paper); margin-bottom: 1rem;
}
.tl__h3 span { color: var(--brass); font-family: var(--f-body); font-size: .7em; }
.tl__what > p { font-size: var(--t-sm); color: var(--on-ink-dim); }

.tl__pts { display: grid; gap: .8rem; }
.tl__pts li {
  position: relative; padding-left: 1.5rem;
  font-size: var(--t-sm); color: var(--on-ink-dim);
}
.tl__pts li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: .45rem; height: 1px; background: var(--brass);
}
.tl__item--award .tl__what { border-left: 2px solid var(--brass); padding-left: 1.4rem; }
.tl__item--award .tl__h3 { color: var(--brass); margin-bottom: .5rem; }

/* ---------- 13. process steps + image band ---------- */
.steps {
  display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  background: var(--paper-3);
  border: 1px solid var(--paper-3);
}
.step { padding: clamp(1.5rem, 1rem + 1.6vw, 2.3rem); background: var(--paper); }
.step__n {
  display: block; margin-bottom: 1rem;
  font: 500 var(--t-xs)/1 var(--f-mono); letter-spacing: .16em; color: var(--brass-ink);
}
.step__h3 {
  font-size: var(--t-md); font-variation-settings: "opsz" 48, "wght" 500;
  margin-bottom: .6rem; letter-spacing: -.008em;
}
.step p { font-size: var(--t-sm); color: var(--on-pap-dim); }

/* Six frames, one per service. Fixed 2-up / 3-up rather than auto-fit so every
   row stays full — an auto-fit 4-column run would strand two. */
.band {
  display: grid; gap: clamp(.5rem, .3rem + .7vw, 1rem);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: clamp(2rem, 1.2rem + 2.6vw, 3.5rem);
}
@container (min-width: 56rem) { .band { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.band__fig { overflow: hidden; border-radius: var(--r-md); }
.band__fig img {
  width: 100%; height: 100%; aspect-ratio: 4/3; object-fit: cover;
  filter: saturate(.9) contrast(1.02);
  transition: transform .7s var(--ease), filter .5s var(--ease);
}
.band__fig:hover img { transform: scale(1.05); filter: saturate(1) contrast(1.04); }

/* ---------- 14. toolkit ---------- */
.chips {
  display: flex; flex-wrap: wrap; gap: .6rem;
  margin-bottom: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
}
.chip {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .6rem 1rem;
  font-size: var(--t-sm); color: var(--paper);
  background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--r-sm);
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.chip:hover { border-color: var(--brass-dim); background: var(--ink-3); }
.chip__k {
  font: 400 clamp(.55rem,.52rem + .1vw,.62rem)/1 var(--f-mono);
  letter-spacing: .14em; text-transform: uppercase; color: var(--brass);
  padding-right: .6rem; border-right: 1px solid var(--line);
}

.split { display: grid; gap: clamp(1.8rem, 1rem + 3.4vw, 4rem); align-items: center; }
@container (min-width: 52rem) { .split { grid-template-columns: .8fr 1.2fr; } }
.split__fig { position: relative; justify-self: center; width: 100%; max-width: 21rem; }
.split__fig::after {
  content: ""; position: absolute; inset: auto 0 0; height: 55%; z-index: -1;
  background: radial-gradient(ellipse at 50% 100%, rgba(201,162,85,.2), transparent 70%);
}
.split__fig img {
  aspect-ratio: 3 / 4;
  border-radius: var(--r-md);
  filter: drop-shadow(0 20px 38px rgba(3,9,20,.55));
}
.split__h3 {
  font-size: var(--t-lg); font-variation-settings: "opsz" 96, "wght" 400;
  color: var(--paper); margin-bottom: 1rem;
}
.split__copy p { font-size: var(--t-sm); color: var(--on-ink-dim); }
.split__copy p + p { margin-top: 1rem; }

/* ---------- 15. location band ---------- */
.loc {
  position: relative; isolation: isolate; overflow: hidden;
  padding-block: clamp(4.5rem, 3rem + 8vw, 8.5rem);
  container-type: inline-size;
}
.loc__bg { position: absolute; inset: 0; z-index: -2; }
.loc__bg img { width: 100%; height: 100%; object-fit: cover; }
.loc::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(92deg, var(--ink) 4%, rgba(10,22,40,.9) 42%, rgba(10,22,40,.42) 100%);
}
.loc__in { max-width: 42rem; position: relative; z-index: 1; }

/* Standing figure against the dusk skyline — only once the band is wide
   enough that he will not crowd the copy. */
.loc__fig { display: none; }
@container (min-width: 60rem) {
  .loc__fig {
    display: block; position: absolute; z-index: 0;
    right: clamp(1rem, 4cqi, 6rem); bottom: 0;
    width: clamp(11rem, 21cqi, 16rem);
    aspect-ratio: 2 / 3;
  }
}
.loc__h2 {
  font-size: var(--t-xl); font-variation-settings: "opsz" 144, "wght" 400; color: #fff;
}
.loc__p { margin-top: 1.2rem; font-size: var(--t-md); color: var(--on-ink); max-width: 42ch; }

/* ---------- 16. faq ---------- */
.faq { max-width: 52rem; }
.acc { border-top: 1px solid var(--paper-3); }
.acc__item { border-bottom: 1px solid var(--paper-3); }
.acc__q {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding-block: clamp(1.1rem, .8rem + 1vw, 1.65rem);
  font-family: var(--f-disp); font-variation-settings: "opsz" 48, "wght" 500;
  font-size: var(--t-md); line-height: 1.3; letter-spacing: -.01em;
  cursor: pointer; list-style: none;
  transition: color .25s var(--ease);
}
.acc__q::-webkit-details-marker { display: none; }
.acc__q:hover { color: var(--brass-ink); }
.acc__ico {
  flex: none; color: var(--brass-ink);
  transition: transform .35s var(--ease);
}
.acc__item[open] .acc__ico { transform: rotate(45deg); }
.acc__a { padding-bottom: clamp(1.1rem, .8rem + 1vw, 1.6rem); max-width: 62ch; }
.acc__a p { font-size: var(--t-sm); color: var(--on-pap-dim); }
.acc__item[open] .acc__a { animation: reveal .4s var(--ease); }
@keyframes reveal { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ---------- 17. contact ---------- */
.contact__in { display: grid; gap: clamp(2.4rem, 1.4rem + 4vw, 4.5rem); align-items: start; }
@container (min-width: 54rem) { .contact__in { grid-template-columns: 1fr 1fr; } }

/* Third column only when there is genuinely room for it. */
.contact__fig { display: none; }
@container (min-width: 70rem) {
  .contact__in { grid-template-columns: 18.5rem 1fr 1fr; }
  .contact__fig { display: block; align-self: end; position: relative; }
  .contact__fig img { aspect-ratio: 3 / 4; }
  .contact__fig::after {
    content: ""; position: absolute; inset: auto 0 0; height: 50%; z-index: -1;
    background: radial-gradient(ellipse at 50% 100%, rgba(201,162,85,.18), transparent 72%);
  }
}

.lines {
  display: grid; gap: 1px; margin-top: clamp(2rem, 1.4rem + 2vw, 3rem);
  background: var(--line-soft); border-block: 1px solid var(--line-soft);
}
.lines a {
  display: grid; grid-template-columns: auto 1fr; align-items: center;
  gap: .3rem 1rem; padding: 1.15rem .25rem;
  background: var(--ink); transition: background .3s var(--ease), padding-left .3s var(--ease);
}
.lines a:hover { background: var(--ink-2); padding-left: 1rem; }
.lines .ico { grid-row: span 2; color: var(--brass); }
.lines__k {
  font: 400 var(--t-xs)/1 var(--f-mono);
  letter-spacing: .14em; text-transform: uppercase; color: var(--on-ink-dim);
}
.lines__v { font-size: var(--t-sm); color: var(--paper); }

.contact__form {
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--r-md);
  container-type: inline-size;
}
.field { margin-bottom: 1.15rem; }
.field label {
  display: block; margin-bottom: .5rem;
  font: 400 var(--t-xs)/1 var(--f-mono);
  letter-spacing: .13em; text-transform: uppercase; color: var(--on-ink-dim);
}
.field .opt { color: var(--line); letter-spacing: .08em; }
.field input, .field textarea {
  width: 100%; padding: .8rem .95rem;
  font-size: var(--t-sm); color: var(--paper);
  background: var(--ink); border: 1px solid var(--line); border-radius: var(--r-sm);
  transition: border-color .25s var(--ease), background .25s var(--ease);
  resize: vertical;
}
.field input:focus, .field textarea:focus { outline: none; border-color: var(--brass); background: #0b1929; }
.field.is-bad input, .field.is-bad textarea { border-color: #B8563F; }
.field__err {
  min-height: 0; margin-top: .4rem;
  font: 400 var(--t-xs)/1.4 var(--f-mono); color: #E08A72;
}
.field__hint { margin-top: .45rem; font-size: var(--t-xs); color: var(--on-ink-dim); opacity: .8; }
.field ::placeholder { color: #4C5D74; opacity: 1; }

/* Honeypot — off-screen rather than display:none, which bots skip. */
.hp {
  position: absolute; left: -9999px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}

.form__note.is-bad { color: #E08A72; }
.form__note.is-good { color: var(--brass); }
.form__note {
  margin-top: 1rem; font-size: var(--t-sm); color: var(--brass); text-align: center;
}

/* ---------- 18. footer ---------- */
.foot {
  background: var(--ink-2); border-top: 1px solid var(--line);
  padding-top: clamp(3rem, 2rem + 4vw, 5rem);
  container-type: inline-size;
}
.foot__in {
  display: grid; gap: clamp(2rem, 1.2rem + 3vw, 4rem);
  padding-bottom: clamp(2.5rem, 1.6rem + 3vw, 4rem);
}
@container (min-width: 52rem) { .foot__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); } }

.foot__brand img { width: clamp(15rem, 12rem + 14vw, 21rem); height: auto; }
.foot__blurb { margin-top: 1.3rem; font-size: var(--t-sm); color: var(--on-ink-dim); max-width: 40ch; }

.foot__nav {
  display: grid; gap: 2rem;
  /* Equal columns. 15.5rem is what the email address needs on one line, so
     auto-fit collapses to a single column rather than squeezing it. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15.5rem), 1fr));
}
.foot__h {
  font: 500 var(--t-xs)/1 var(--f-mono);
  letter-spacing: .19em; text-transform: uppercase; color: var(--brass);
  margin-bottom: 1.1rem;
}
.foot__nav ul { display: grid; gap: .7rem; }
.foot__nav a { font-size: var(--t-sm); color: var(--on-ink-dim); transition: color .25s var(--ease); }
.foot__nav a:hover { color: var(--brass); }

.foot__direct a {
  display: inline-flex; align-items: center; gap: .6rem;
  overflow-wrap: anywhere;
}
.foot__direct .ico { color: var(--brass); flex: none; transition: transform .25s var(--ease); }
.foot__direct a:hover .ico { transform: translateY(-1px); }

.foot__base {
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center;
  /* trailing space keeps the fixed back-to-top button off the last line */
  padding-block: 1.5rem; padding-inline-end: 3.6rem;
  border-top: 1px solid var(--line);
  font: 400 var(--t-xs)/1.5 var(--f-mono); letter-spacing: .06em; color: var(--on-ink-dim);
}
.foot__loc { display: flex; align-items: center; gap: .5rem; }
.foot__loc .ico { color: var(--brass); }

.foot__by { width: 100%; padding-top: 1.1rem; border-top: 1px solid var(--line-soft); }
.foot__by a {
  color: var(--brass); border-bottom: 1px solid var(--brass-dim);
  transition: border-color .25s var(--ease), color .25s var(--ease);
}
.foot__by a:hover { color: var(--brass-hi); border-color: var(--brass-hi); }
@container (min-width: 46rem) { .foot__by { width: auto; padding-top: 0; border-top: 0; } }

/* ---------- 19. back to top ---------- */
.totop {
  position: fixed; right: var(--gut); bottom: var(--gut); z-index: 800;
  display: grid; place-items: center; width: 2.9rem; height: 2.9rem;
  background: var(--brass); color: #14100A; border-radius: 50%;
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .3s var(--ease), visibility .3s var(--ease),
              transform .3s var(--ease), background .25s var(--ease);
}
.totop.is-on { opacity: 1; visibility: visible; transform: none; }
.totop:hover { background: var(--brass-hi); }
.totop .ico { transform: rotate(-45deg); stroke-width: 1.8; }

/* ---------- 19b. cookie notice + privacy sheet ---------- */
/* Fixed and translated in, so it never reserves layout space and cannot
   contribute to cumulative layout shift. */
.cookie {
  position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 950;
  /* Fully opaque, not rgba+blur: a translucent bar leaves the button text
     contrast unresolvable (and it measured 4.12:1 against the blended
     result). Solid navy makes it a true 6.34:1, and drops a costly
     backdrop-filter repaint on every scroll frame. */
  background: var(--ink-2);
  border-top: 1px solid var(--line);
  box-shadow: 0 -18px 44px rgba(3, 9, 20, .5);
  transform: translateY(102%);
  transition: transform .5s var(--ease);
}
.cookie.is-up { transform: none; }
.cookie__in {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem clamp(1.2rem, .8rem + 2vw, 2.6rem);
  padding-block: clamp(.9rem, .7rem + .9vw, 1.35rem);
}
.cookie__copy { flex: 1 1 22rem; min-width: 0; }
.cookie__t {
  display: flex; align-items: center; gap: .5rem;
  font: 500 var(--t-xs)/1 var(--f-mono);
  letter-spacing: .17em; text-transform: uppercase; color: var(--brass);
  margin-bottom: .5rem;
}
.cookie__d { font-size: var(--t-sm); color: var(--on-ink-dim); max-width: 72ch; }
.cookie__more {
  padding: 0; background: none; border: 0; cursor: pointer;
  font: inherit; color: var(--brass);
  border-bottom: 1px solid var(--brass-dim);
  transition: border-color .25s var(--ease);
}
.cookie__more:hover { border-color: var(--brass); }
.cookie__act { display: flex; flex-wrap: wrap; gap: .6rem; margin-inline-start: auto; }
.cookie.is-up ~ .totop { transform: translateY(-4.6rem); }

.foot__privacy {
  padding: 0; background: none; border: 0; cursor: pointer;
  font: inherit; color: var(--brass);
  border-bottom: 1px solid var(--brass-dim);
  transition: border-color .25s var(--ease), color .25s var(--ease);
}
.foot__privacy:hover { color: var(--brass-hi); border-color: var(--brass-hi); }

.sheet {
  /* The UA stylesheet centres a modal dialog with `margin: auto`, which this
     sheet's own reset (`* { margin: 0 }`) was wiping out — leaving it pinned
     to the top-left corner. Restore it explicitly. */
  margin: auto;
  width: min(100% - 2rem, 44rem); max-height: min(86vh, 46rem);
  padding: 0; border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--ink-2); color: var(--on-ink);
  overflow: auto;
}
.sheet::backdrop { background: rgba(4, 10, 20, .74); backdrop-filter: blur(3px); }
.sheet__in { position: relative; padding: clamp(1.6rem, 1.1rem + 2vw, 2.8rem); }
.sheet__x {
  position: absolute; inset-block-start: .9rem; inset-inline-end: .9rem;
  display: grid; place-items: center; width: 2.2rem; height: 2.2rem;
  background: none; border: 1px solid var(--line); border-radius: var(--r-sm);
  color: var(--on-ink-dim); cursor: pointer;
  transition: color .25s var(--ease), border-color .25s var(--ease);
}
.sheet__x:hover { color: var(--brass); border-color: var(--brass-dim); }
.sheet__h2 {
  font-size: var(--t-lg); font-variation-settings: "opsz" 96, "wght" 400;
  color: var(--paper); margin-bottom: 1.4rem;
}
.sheet__h3 {
  font-size: var(--t-sm); font-family: var(--f-body); font-weight: 600;
  letter-spacing: .01em; color: var(--brass);
  margin-top: 1.5rem; margin-bottom: .45rem;
}
.sheet__in p { font-size: var(--t-sm); color: var(--on-ink-dim); }
.sheet__in strong { color: var(--paper); font-weight: 600; }
.sheet__in code {
  font: 400 .92em/1 var(--f-mono); color: var(--brass);
  background: var(--ink); padding: .15em .4em; border-radius: 2px;
}
.sheet__list { display: grid; gap: .5rem; margin: .7rem 0 0; }
.sheet__list li {
  position: relative; padding-left: 1.4rem;
  font-size: var(--t-sm); color: var(--on-ink-dim);
}
.sheet__list li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: .45rem; height: 1px; background: var(--brass);
}
.sheet__list + p, .sheet__in p + p { margin-top: .95rem; }
.sheet__act {
  display: flex; flex-wrap: wrap; gap: .6rem; justify-content: flex-end;
  margin-top: 2rem; padding-top: 1.3rem; border-top: 1px solid var(--line);
}

/* ---------- 19c. 404 ---------- */
.oops {
  min-height: 100svh;
  display: grid; place-items: center; text-align: center;
  padding: calc(var(--bay) + 4rem) var(--gut) var(--bay);
  container-type: inline-size;
}
.oops__in { max-width: 44rem; }
.oops__mark { width: clamp(2.8rem, 2.4rem + 1.6vw, 3.6rem); height: auto; margin: 0 auto clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem); }
.oops__code {
  font: 500 var(--t-xs)/1 var(--f-mono);
  letter-spacing: .3em; text-transform: uppercase; color: var(--brass);
  margin-bottom: 1.2rem;
}
.oops__h1 { font-size: var(--t-2xl); font-variation-settings: "opsz" 144, "wght" 400; color: #fff; }
.oops__p {
  margin: clamp(1rem, .8rem + 1vw, 1.5rem) auto clamp(1.8rem, 1.4rem + 1.6vw, 2.6rem);
  max-width: 40ch; font-size: var(--t-md); color: var(--on-ink-dim);
}
.oops__cta { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; }
.oops__links {
  margin-top: clamp(2.6rem, 2rem + 2.6vw, 4rem);
  padding-top: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem);
  border-top: 1px solid var(--line);
}
.oops__links-h {
  font: 400 var(--t-xs)/1 var(--f-mono);
  letter-spacing: .17em; text-transform: uppercase; color: var(--on-ink-dim);
  margin-bottom: 1.1rem;
}
.oops__links ul {
  display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; justify-content: center;
}
.oops__links a {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: var(--t-sm); color: var(--on-ink);
  padding-bottom: .2rem; border-bottom: 1px solid transparent;
  transition: color .25s var(--ease), border-color .25s var(--ease);
}
.oops__links a:hover { color: var(--brass); border-bottom-color: var(--brass-dim); }
.oops__links .ico { color: var(--brass); }

/* ---------- 19d. standard pages (privacy policy etc.) ---------- */
/* NB: namespaced dv-page, not page. WordPress puts a bare "page" class on
   <body> for every Page — including a static front page — so a generic .page
   rule silently applies to the whole document and pushed the homepage down by
   the height of this padding. */
.dv-page { padding-top: calc(var(--bay) + 4rem); }
.dv-page__in { max-width: 46rem; }
.dv-page__thumb { margin-bottom: clamp(1.6rem, 1.2rem + 2vw, 2.6rem); }
.prose { font-size: var(--t-bd); color: var(--on-pap-dim); }
.prose > * + * { margin-top: 1.15rem; }
.prose h2 {
  font-size: var(--t-lg); font-variation-settings: "opsz" 96, "wght" 400;
  color: var(--on-pap); margin-top: 2.4rem;
}
.prose h3 {
  font-size: var(--t-md); font-variation-settings: "opsz" 48, "wght" 500;
  color: var(--on-pap); margin-top: 1.9rem;
}
.prose a { color: var(--brass-ink); border-bottom: 1px solid rgba(138,100,16,.35); }
.prose a:hover { border-bottom-color: var(--brass-ink); }
.prose strong { color: var(--on-pap); font-weight: 600; }
.prose code {
  font: 400 .92em/1 var(--f-mono); color: var(--brass-ink);
  background: var(--paper-2); padding: .15em .4em; border-radius: 2px;
}
.prose ul, .prose ol { display: grid; gap: .55rem; padding-left: 1.3rem; }
.prose ul li { list-style: disc; }
.prose ol li { list-style: decimal; }
.prose blockquote {
  padding-left: 1.2rem; border-left: 2px solid var(--brass);
  font-size: var(--t-md); color: var(--on-pap);
}
.dv-page__pages, .pagination { margin-top: 2.4rem; font-size: var(--t-sm); }
.pagination .page-numbers {
  display: inline-block; padding: .4rem .75rem; margin-right: .3rem;
  border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--on-ink-dim);
}
.pagination .page-numbers.current,
.pagination .page-numbers:hover { border-color: var(--brass); color: var(--brass); }

/* ---------- 20. scroll reveal ---------- */
.rv { opacity: 0; transform: translateY(16px); }
.rv.is-in { opacity: 1; transform: none; transition: opacity .7s var(--ease), transform .7s var(--ease); }

@media (prefers-reduced-motion: reduce) {
  .rv, .rv.is-in { opacity: 1; transform: none; transition: none; }
  .marquee__row { animation: none; }
  .preloader__arc, .preloader__bar, .preloader__mark { animation: none; }
  .preloader__arc { opacity: .3; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ---------- 21. print ---------- */
@media print {
  .preloader, .head, .totop, .marquee, .hero__bg, .hero__veil, .contact__form { display: none !important; }
  body { background: #fff; color: #000; }
  body::before { display: none; }
  .sec, .hero, .loc { padding-block: 1.5rem; background: #fff !important; color: #000 !important; }
  h1,h2,h3,p,li { color: #000 !important; }
  a { text-decoration: underline; }
}