/* ==========================================================================
   Deal Logistik · main stylesheet
   Tokens → fonts → base → components → sections → pages → footer → motion
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fonts (self-hosted, latin + latin-ext, only the weights in use)
   -------------------------------------------------------------------------- */
@font-face{font-family:"Barlow";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/barlow-latin-600.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Barlow";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/barlow-latin-ext-600.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}
@font-face{font-family:"Barlow";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/barlow-latin-700.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Barlow";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/barlow-latin-ext-700.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}
@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/source-sans-3-latin-400.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/source-sans-3-latin-ext-400.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}
@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/source-sans-3-latin-600.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/source-sans-3-latin-ext-600.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}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/ibm-plex-mono-latin-500.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/ibm-plex-mono-latin-ext-500.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}

/* --------------------------------------------------------------------------
   2. Design tokens
   -------------------------------------------------------------------------- */
:root {
  --primary: #0B1B33;
  --secondary: #132A4F;
  --accent: #F27A21;
  --accent-hover: #D9660F;
  --accent-soft: rgba(242, 122, 33, .14);
  --dark: #081120;
  --light: #F4F6F9;
  --light-alt: #EAEEF3;
  --white: #FFFFFF;
  --gray: #66717F;
  --gray-light: #A9B2BE;
  --text: #1C2533;
  --text-light: rgba(255, 255, 255, .8);
  --text-light-muted: rgba(255, 255, 255, .62);
  --line: rgba(11, 27, 51, .12);
  --line-strong: rgba(11, 27, 51, .3);
  --line-dark: rgba(255, 255, 255, .14);

  --font-display: "Barlow", "Source Sans 3", system-ui, sans-serif;
  --font-body: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --dur: .35s;
  --dur-slow: .6s;

  --radius: 14px;
  --radius-sm: 8px;
  --shadow-sm: 0 1px 2px rgba(8, 17, 32, .06), 0 8px 24px -12px rgba(8, 17, 32, .18);
  --shadow-lg: 0 32px 64px -32px rgba(8, 17, 32, .45);

  --header-h: 80px;
  --section-y: clamp(4rem, 8vw, 7.5rem);
  --gutter: 1.25rem;
}

/* --------------------------------------------------------------------------
   3. Base
   -------------------------------------------------------------------------- */
html { scroll-padding-top: calc(var(--header-h) + 1rem); overflow-x: hidden; overflow-x: clip; }
body { font-family: var(--font-body); color: var(--text); background: var(--light); overflow-x: hidden; overflow-x: clip; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body.menu-open { overflow: hidden; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: 700; color: inherit; letter-spacing: -.01em; }
p { margin-bottom: 1rem; }
img, svg, picture { display: block; max-width: 100%; }
picture > img { width: 100%; height: auto; }
address { font-style: normal; margin: 0; }
ul, ol { padding-left: 1.25rem; }
a { transition: color var(--dur), opacity var(--dur); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 2px;
}
main:focus { outline: none; }

.container { padding-inline: var(--gutter); }
@media (min-width: 768px) { .container { padding-inline: 2rem; } }
@media (min-width: 1200px) { .container { padding-inline: 2.5rem; } }

.skip-link { position: absolute; left: 1rem; top: -4rem; z-index: 1000; padding: .75rem 1.25rem; background: var(--accent); color: var(--primary); font-weight: 600; border-radius: var(--radius-sm); transition: top .2s; }
.skip-link:focus { top: 1rem; outline-offset: 0; }

.mono { font-family: var(--font-mono); }
.cover-img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.img-missing { background: linear-gradient(135deg, var(--secondary), var(--dark)); min-height: 240px; border-radius: var(--radius); }

/* Icons */
.icon { width: 1.4em; height: 1.4em; flex: none; }
.icon-xs { width: .9em; height: .9em; }
.icon-sm { width: 1.15em; height: 1.15em; }
.icon-lg { width: 2rem; height: 2rem; }
.icon-xl { width: 3.25rem; height: 3.25rem; }

/* --------------------------------------------------------------------------
   4. Typography
   -------------------------------------------------------------------------- */
.display-1, .display-2, .display-3 { font-family: var(--font-display); font-weight: 700; margin: 0 0 1.25rem; text-wrap: balance; }
.display-1 { font-size: clamp(2.5rem, 5.5vw, 4.25rem); line-height: 1.04; letter-spacing: -.022em; }
.display-2 { font-size: clamp(1.95rem, 3.6vw, 3rem); line-height: 1.08; letter-spacing: -.018em; }
.display-3 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); line-height: 1.14; letter-spacing: -.012em; }

.kicker { display: flex; align-items: center; gap: .75rem; margin: 0 0 1rem; font-family: var(--font-mono); font-weight: 500; font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.kicker::before { content: ""; flex: none; width: 28px; height: 2px; background: currentColor; }
.kicker-light { color: var(--accent); }

.lede { font-size: clamp(1.08rem, 1.35vw, 1.25rem); line-height: 1.55; color: var(--gray); max-width: 44ch; }
.lede-light { color: var(--text-light); }
.text-muted-light { color: var(--text-light-muted); }

.list-heading { font-size: .8rem; font-family: var(--font-mono); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--gray); margin: 1.5rem 0 .75rem; }

.section-head { max-width: 46rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section-head .lede { max-width: 56ch; }
.section-head-light { color: var(--white); }
.section-foot { margin-top: clamp(2rem, 4vw, 3rem); }

/* --------------------------------------------------------------------------
   5. Buttons, links, chips, lists
   -------------------------------------------------------------------------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; font-family: var(--font-display); font-weight: 600; font-size: 1rem; letter-spacing: .01em; line-height: 1.2; border-width: 1.5px; transition: transform var(--dur) var(--ease-out), background-color var(--dur), border-color var(--dur), color var(--dur), box-shadow var(--dur); }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn .icon { width: 1.1em; height: 1.1em; transition: transform var(--dur) var(--ease-out); }
.btn:hover .icon { transform: translateX(3px); }
.btn-accent { background: var(--accent); border-color: var(--accent); color: var(--primary); }
.btn-accent:hover, .btn-accent:focus-visible { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--primary); }
.btn-primary { background: var(--primary); border-color: var(--primary); color: var(--white); }
.btn-primary:hover, .btn-primary:focus-visible { background: var(--secondary); border-color: var(--secondary); color: var(--white); }
.btn-outline-primary { color: var(--primary); border-color: var(--line-strong); background: transparent; }
.btn-outline-primary:hover, .btn-outline-primary:focus-visible { background: var(--primary); border-color: var(--primary); color: var(--white); }
.btn-outline-light { color: var(--white); border-color: rgba(255, 255, 255, .45); background: transparent; }
.btn-outline-light:hover, .btn-outline-light:focus-visible { background: rgba(255, 255, 255, .1); border-color: var(--white); color: var(--white); }
.btn-lg { padding: 1rem 1.9rem; font-size: 1.06rem; }
.btn-sm { padding: .6rem 1.1rem; font-size: .92rem; }
@media (pointer: coarse) { .btn { min-height: 44px; } }

.btn-row { display: flex; flex-wrap: wrap; gap: .75rem 1rem; }
.btn-row-center { justify-content: center; }

.link-arrow { display: inline-flex; align-items: center; gap: .4rem; font-family: var(--font-display); font-weight: 600; color: var(--primary); }
.link-arrow .icon { transition: transform var(--dur) var(--ease-out); }
.link-arrow:hover { color: var(--accent-hover); text-decoration: none; }
.link-arrow:hover .icon { transform: translateX(4px); }

.chip-list { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; margin: 1.5rem 0 0; }
.chip { padding: .4rem .85rem; border: 1px solid var(--line-strong); border-radius: 999px; font-family: var(--font-mono); font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; color: var(--primary); }

.check-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.check-list li { display: flex; align-items: flex-start; gap: .65rem; line-height: 1.5; }
.check-list .icon { margin-top: .2em; color: var(--accent); }
.check-list-light { color: var(--text-light); }

.badge-soon, .tile-badge { display: inline-block; padding: .18rem .5rem; border-radius: 999px; font-family: var(--font-mono); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; background: var(--accent-soft); color: var(--accent); vertical-align: middle; }
.nav-badge { display: inline-block; padding: .16rem .5rem; border-radius: 999px; font-family: var(--font-mono); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; border: 1px solid rgba(255, 255, 255, .35); color: rgba(255, 255, 255, .7); vertical-align: middle; }

/* Sections */
.section-light, .section-light-alt, .section-dark { padding-block: var(--section-y); position: relative; }
.section-light { background: var(--light); }
.section-light-alt { background: var(--light-alt); }
.section-dark { background: var(--primary); color: var(--white); }
.section-dark .display-2, .section-dark .display-3 { color: var(--white); }

/* Breadcrumbs */
.breadcrumbs { margin-bottom: 1.5rem; font-family: var(--font-mono); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; margin: 0; }
.breadcrumbs li + li::before { content: "/"; margin-right: .5rem; opacity: .4; }
.breadcrumbs a { color: rgba(255, 255, 255, .7); }
.breadcrumbs a:hover { color: var(--white); }
.breadcrumbs [aria-current] { color: var(--white); }
.breadcrumbs-dark a { color: var(--gray); }
.breadcrumbs-dark [aria-current] { color: var(--primary); }

/* --------------------------------------------------------------------------
   6. Header
   -------------------------------------------------------------------------- */
.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: var(--header-h); color: var(--white); background: var(--primary); box-shadow: 0 1px 0 var(--line-dark); transition: background-color var(--dur-slow) var(--ease-out), box-shadow var(--dur-slow); }
body.has-dark-hero .site-header:not(.is-scrolled):not(.is-menu-open) { background: transparent; box-shadow: none; }
body.has-dark-hero .site-header:not(.is-scrolled):not(.is-menu-open)::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(8, 17, 32, .6), rgba(8, 17, 32, 0)); pointer-events: none; }
.site-header.is-scrolled { background: rgba(11, 27, 51, .78); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 8px 32px -16px rgba(8, 17, 32, .6), 0 1px 0 var(--line-dark); }
body.has-light-hero main { padding-top: var(--header-h); }

.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; height: var(--header-h); }

.brand { display: inline-flex; align-items: center; gap: .75rem; color: inherit; text-decoration: none; }
.brand:hover { color: inherit; text-decoration: none; }
.brand-logo { display: block; line-height: 0; }
.brand-logo img { display: block; height: 54px; width: auto; }
.brand-footer .brand-logo img { height: 48px; }

.main-nav { display: none; }
.main-nav-list { display: flex; align-items: center; gap: .25rem; list-style: none; margin: 0; padding: 0; }
.nav-link { position: relative; display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .85rem; font-family: var(--font-display); font-weight: 600; font-size: .98rem; letter-spacing: .02em; white-space: nowrap; color: rgba(255, 255, 255, .82); text-decoration: none; border-radius: var(--radius-sm); }
.nav-link::after { content: ""; position: absolute; left: .85rem; right: .85rem; bottom: .2rem; height: 2px; background: rgba(255, 255, 255, .85); transform: scaleX(0); transform-origin: left; transition: transform var(--dur) var(--ease-out); }
.nav-link:hover, .nav-link:focus-visible { color: var(--white); text-decoration: none; }
.nav-link:hover::after, .nav-link.is-active::after { transform: scaleX(1); }
.nav-link.is-active { color: var(--white); }
.nav-link-shop .nav-badge { margin-left: .1rem; }

.header-actions { display: flex; align-items: center; gap: .5rem; }
.header-cta { display: none; }

/* Language switcher */
.lang-switch { position: relative; }
.lang-toggle { display: inline-flex; align-items: center; gap: .35rem; padding: .5rem .65rem; background: transparent; border: 1px solid rgba(255, 255, 255, .25); border-radius: var(--radius-sm); color: var(--white); font-family: var(--font-mono); font-size: .8rem; letter-spacing: .1em; cursor: pointer; transition: border-color var(--dur), background-color var(--dur); }
.lang-toggle:hover, .lang-toggle[aria-expanded="true"] { border-color: rgba(255, 255, 255, .6); background: rgba(255, 255, 255, .06); }
.lang-caret { transition: transform var(--dur); }
.lang-toggle[aria-expanded="true"] .lang-caret { transform: rotate(180deg); }
.lang-menu { position: absolute; top: calc(100% + .5rem); right: 0; min-width: 11rem; margin: 0; padding: .4rem; list-style: none; background: var(--white); color: var(--primary); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); z-index: 20; }
.lang-menu[hidden] { display: none; }
.lang-option { display: flex; align-items: center; gap: .75rem; padding: .6rem .75rem; border-radius: 6px; color: var(--primary); text-decoration: none; font-size: .95rem; }
.lang-option .lang-code { font-family: var(--font-mono); font-size: .74rem; letter-spacing: .1em; color: var(--gray); width: 1.6rem; }
.lang-option:hover, .lang-option:focus-visible { background: var(--light-alt); color: var(--primary); text-decoration: none; }
.lang-option.is-active { background: var(--accent-soft); }
.lang-option.is-active .lang-code { color: var(--accent-hover); }

/* Hamburger */
.nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; background: transparent; border: 0; color: var(--white); cursor: pointer; border-radius: var(--radius-sm); }
.nav-toggle-box { position: relative; width: 22px; height: 16px; display: block; }
.nav-toggle-bar { position: absolute; left: 0; width: 100%; height: 2px; background: currentColor; border-radius: 2px; transition: transform var(--dur) var(--ease-in-out), opacity var(--dur), top var(--dur) var(--ease-in-out); }
.nav-toggle-bar:nth-child(1) { top: 0; }
.nav-toggle-bar:nth-child(2) { top: 7px; }
.nav-toggle-bar:nth-child(3) { top: 14px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { top: 7px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) { top: 7px; transform: rotate(-45deg); }

/* Mobile menu */
.mobile-menu { position: fixed; top: var(--header-h); left: 0; right: 0; bottom: 0; background: var(--primary); color: var(--white); overflow-y: auto; opacity: 0; transition: opacity var(--dur) var(--ease-out); z-index: 90; }
.mobile-menu[hidden] { display: none; }
.mobile-menu.is-open { opacity: 1; }
.mobile-menu-inner { display: flex; flex-direction: column; gap: 2rem; padding-top: 1.5rem; padding-bottom: 3rem; min-height: 100%; }
.mobile-nav-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-dark); }
.mobile-nav-link { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.05rem 0; border-bottom: 1px solid var(--line-dark); font-family: var(--font-display); font-weight: 600; font-size: 1.45rem; color: var(--white); text-decoration: none; transform: translateY(14px); opacity: 0; transition: transform .5s var(--ease-out), opacity .5s var(--ease-out); }
.mobile-nav-link .icon { color: var(--accent); }
.mobile-nav-link.is-active { color: var(--accent); }
.mobile-nav-link:hover { color: var(--accent); text-decoration: none; }
.mobile-menu.is-open .mobile-nav-link { transform: none; opacity: 1; }
.mobile-menu.is-open .mobile-nav-list li:nth-child(1) .mobile-nav-link { transition-delay: .05s; }
.mobile-menu.is-open .mobile-nav-list li:nth-child(2) .mobile-nav-link { transition-delay: .1s; }
.mobile-menu.is-open .mobile-nav-list li:nth-child(3) .mobile-nav-link { transition-delay: .15s; }
.mobile-menu.is-open .mobile-nav-list li:nth-child(4) .mobile-nav-link { transition-delay: .2s; }
.mobile-menu.is-open .mobile-nav-list li:nth-child(5) .mobile-nav-link { transition-delay: .25s; }
.mobile-cta { align-self: stretch; }
.mobile-meta { display: flex; flex-direction: column; gap: .75rem; padding-top: 1rem; border-top: 1px solid var(--line-dark); color: var(--text-light); }
.mobile-meta-link { display: inline-flex; align-items: center; gap: .6rem; color: var(--text-light); text-decoration: none; }
.mobile-meta-link .icon { color: var(--accent); }
.mobile-lang { display: flex; gap: 1.25rem; list-style: none; margin: .5rem 0 0; padding: 0; }
.mobile-lang a { color: var(--text-light-muted); font-family: var(--font-mono); font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; }
.mobile-lang a.is-active { color: var(--accent); }

@media (min-width: 992px) {
  .main-nav { display: block; }
  .nav-toggle { display: none; }
  .header-cta { display: inline-flex; margin-left: .5rem; }
  .mobile-menu { display: none !important; }
}
@media (max-width: 991.98px) {
  :root { --header-h: 66px; }
  .brand-logo img { height: 40px; }
}
@media (max-width: 359.98px) { .brand-logo img { height: 34px; } }

/* --------------------------------------------------------------------------
   7. Home · Hero
   -------------------------------------------------------------------------- */
.hero { position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end; min-height: 100vh; min-height: 100svh; background: var(--primary); color: var(--white); overflow: hidden; }
.hero-media { position: absolute; inset: 0; z-index: -1; }
.hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% center; }
.hero-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 17, 32, .55) 0%, rgba(8, 17, 32, .25) 45%, rgba(8, 17, 32, .9) 100%), linear-gradient(90deg, rgba(8, 17, 32, .8) 0%, rgba(8, 17, 32, .25) 55%, rgba(8, 17, 32, .1) 100%); }
.hero-network { position: absolute; top: 0; right: -6%; width: 72%; height: 100%; opacity: .95; pointer-events: none; }
.hero-content { position: relative; padding-top: calc(var(--header-h) + clamp(3rem, 8vw, 6rem)); padding-bottom: clamp(2.5rem, 6vw, 5rem); max-width: 68rem; }
.hero-title { margin: 0 0 1.5rem; font-family: var(--font-display); font-weight: 700; font-size: clamp(2.6rem, 7vw, 5.6rem); line-height: 1.02; letter-spacing: -.025em; text-wrap: balance; }
.hero-line { display: block; overflow: hidden; padding-bottom: .12em; margin-bottom: -.12em; }
.hero-line-inner { display: block; }
.hero-lede { max-width: 40rem; margin-bottom: 2rem; font-size: clamp(1.1rem, 1.6vw, 1.35rem); line-height: 1.55; color: var(--text-light); }
.hero-strip { border-top: 1px solid var(--line-dark); background: rgba(8, 17, 32, .55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.hero-strip-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; padding-top: 1rem; padding-bottom: 1rem; }
.route-strip { display: flex; flex-wrap: wrap; gap: .5rem 0; list-style: none; margin: 0; padding: 0; }
.route-strip li { display: flex; align-items: center; gap: .55rem; font-family: var(--font-mono); font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .78); }
.route-strip li:not(:last-child)::after { content: ""; width: clamp(1.25rem, 3vw, 2.5rem); height: 1px; margin: 0 .85rem; background: rgba(255, 255, 255, .35); }
.route-strip-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--white); box-shadow: 0 0 0 3px rgba(255, 255, 255, .12); }
.route-strip li:first-child .route-strip-dot, .route-strip li:last-child .route-strip-dot { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.route-strip-note { margin: 0; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }

@media (max-width: 767.98px) {
  .hero { min-height: 92vh; min-height: 92svh; }
  .hero-network { right: -30%; width: 120%; opacity: .55; }
  .hero-img { object-position: 55% center; }
  .route-strip-note { display: none; }
}

/* --------------------------------------------------------------------------
   8. Home · Intro
   -------------------------------------------------------------------------- */
.intro-grid { display: grid; gap: 2rem; }
.intro-body .lede { color: var(--text); }
.intro-statement { position: relative; margin: clamp(2.5rem, 5vw, 4rem) 0 0; padding: 1.5rem 0 0 1.75rem; border-left: 3px solid var(--accent); }
.intro-statement p { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: clamp(1.35rem, 2.4vw, 1.9rem); line-height: 1.3; color: var(--primary); max-width: 30ch; }
.intro-statement::before { content: ""; position: absolute; left: -3px; top: 0; width: 3px; height: 1.25rem; background: var(--primary); }
@media (min-width: 992px) {
  .intro-grid { grid-template-columns: 5fr 7fr; gap: 4rem; align-items: start; }
  .intro-statement { margin-left: calc((100% / 12) * 5 + 2rem); }
}

/* --------------------------------------------------------------------------
   9. Home · Services preview
   -------------------------------------------------------------------------- */
.service-grid { display: grid; gap: 1.25rem; }
.service-card { position: relative; display: flex; flex-direction: column; gap: .75rem; padding: 1.75rem; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); transition: transform var(--dur-slow) var(--ease-out), box-shadow var(--dur-slow) var(--ease-out), border-color var(--dur); }
.service-card::before { content: ""; position: absolute; left: 1.75rem; right: 1.75rem; top: 0; height: 3px; background: var(--accent); border-radius: 0 0 3px 3px; transform: scaleX(0); transform-origin: left; transition: transform var(--dur-slow) var(--ease-out); }
.service-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: transparent; }
.service-card:hover::before { transform: scaleX(1); }
.service-card-icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 14px; background: var(--accent-soft); color: var(--accent-hover); transition: background-color var(--dur), color var(--dur); }
.service-card:hover .service-card-icon { background: var(--primary); color: var(--accent); }
.service-card-title { font-size: 1.25rem; margin: .25rem 0 0; }
.service-card-text { margin: 0; color: var(--gray); flex-grow: 1; }
.service-card-more { display: inline-flex; align-items: center; gap: .4rem; margin-top: .5rem; font-family: var(--font-display); font-weight: 600; font-size: .95rem; color: var(--primary); text-decoration: none; }
.service-card-more .icon { transition: transform var(--dur) var(--ease-out); }
.service-card:hover .service-card-more .icon { transform: translateX(4px); }
.service-card:focus-within { box-shadow: 0 0 0 3px var(--accent); }
@media (min-width: 640px) { .service-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .service-grid { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } }

/* --------------------------------------------------------------------------
   10. Home · Process
   -------------------------------------------------------------------------- */
.process-flow { position: relative; margin-top: 1rem; }
.process-track { display: none; }
.process-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.75rem; }
.process-step { position: relative; display: grid; grid-template-columns: 56px 1fr; column-gap: 1.25rem; align-items: start; }
.process-step::before { content: ""; position: absolute; left: 27px; top: 60px; bottom: -1.75rem; width: 2px; background: var(--line-dark); }
.process-step:last-child::before { display: none; }
.process-step-node { grid-row: 1 / span 3; display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: var(--secondary); border: 2px solid rgba(255, 255, 255, .16); color: var(--white); transition: background-color var(--dur-slow), border-color var(--dur-slow), color var(--dur-slow), transform var(--dur-slow) var(--ease-out); }
.process-step-index { font-size: .72rem; letter-spacing: .16em; color: var(--accent); }
.process-step-title { margin: .1rem 0 .35rem; font-size: 1.2rem; color: var(--white); }
.process-step-text { margin: 0; color: var(--text-light-muted); max-width: 36ch; }
.process-step.is-active .process-step-node { background: var(--primary); border-color: var(--accent); color: var(--accent); transform: scale(1.06); }
.process-marker { position: absolute; top: 50%; left: 0; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; background: var(--accent); color: var(--primary); box-shadow: 0 0 0 8px var(--accent-soft); z-index: 4; }   /* above the circles: at rest the truck sits on its station */
@media (min-width: 992px) {
  .process-track { display: block; position: absolute; left: 10%; right: 10%; top: 28px; height: 8px; margin-top: -4px; }
  .process-track > svg { width: 100%; height: 8px; display: block; }
  .process-steps { grid-template-columns: repeat(5, 1fr); gap: 1.5rem; }
  .process-step { display: flex; flex-direction: column; align-items: center; text-align: center; }
  .process-step::before { display: none; }
  .process-step-node { position: relative; z-index: 3; margin-bottom: 1.25rem; }
  .process-step-text { max-width: 24ch; }
  .process-marker { display: none; }
  .process-marker .icon { width: 26px; height: 26px; }   /* the truck fills the 44px disc instead of inheriting the 8px track height */
  html.has-motion .process-marker { display: flex; }
}

/* --------------------------------------------------------------------------
   11. Home · Why
   -------------------------------------------------------------------------- */
.why-grid { display: grid; gap: 3rem; }
.why-sticky .btn { margin-top: .5rem; }
.value-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.value-row { display: grid; grid-template-columns: auto auto 1fr; column-gap: 1.25rem; align-items: start; padding: 1.5rem 0; border-bottom: 1px solid var(--line); transition: padding-left var(--dur-slow) var(--ease-out); }
.value-row:hover { padding-left: .5rem; }
.value-index { font-size: .78rem; letter-spacing: .14em; color: var(--accent); padding-top: .35rem; }
.value-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: var(--white); border: 1px solid var(--line); color: var(--primary); }
.value-body h3 { font-size: 1.2rem; margin: .35rem 0 .35rem; }
.value-body p { margin: 0; color: var(--gray); max-width: 46ch; }
@media (min-width: 992px) {
  .why-grid { grid-template-columns: 5fr 7fr; gap: 5rem; align-items: start; }
  .why-sticky { position: sticky; top: calc(var(--header-h) + 2.5rem); }
}

/* --------------------------------------------------------------------------
   12. Home · Network
   -------------------------------------------------------------------------- */
.network-grid { display: grid; gap: 3rem; align-items: center; }
.network-visual { position: relative; padding: 1rem; border: 1px solid var(--line-dark); border-radius: var(--radius); background: radial-gradient(circle at 50% 40%, rgba(19, 42, 79, .9), rgba(8, 17, 32, .9)); box-shadow: var(--shadow-lg); }
.network-svg { width: 100%; height: auto; }
.legend { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; list-style: none; margin: 1.75rem 0 0; padding: 0; font-family: var(--font-mono); font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-light-muted); }
.legend li { display: flex; align-items: center; gap: .55rem; }
.legend-dot { width: 12px; height: 12px; border-radius: 50%; }
.legend-dot-hub { background: var(--primary); box-shadow: 0 0 0 2.5px var(--accent); width: 10px; height: 10px; }
.legend-dot-depot { background: var(--white); }
.legend-dot-dc { background: transparent; border: 2px solid var(--white); }
.legend-dot-warehouse { border-radius: 2px; background: rgba(255, 255, 255, .7); }
.legend-line { width: 22px; height: 1.5px; background: rgba(255, 255, 255, .5); }
@media (min-width: 992px) { .network-grid { grid-template-columns: 5fr 7fr; gap: 4rem; } }

/* --------------------------------------------------------------------------
   13. Home · Operations
   -------------------------------------------------------------------------- */
.ops { position: relative; isolation: isolate; display: flex; align-items: center; min-height: 82vh; padding-block: var(--section-y); color: var(--white); overflow: hidden; background: var(--dark); }
.ops-media { position: absolute; inset: 0; z-index: -1; }
.ops-media picture, .ops-media img { position: absolute; inset: 0; width: 100%; height: 100%; }
html.has-motion .ops-media picture { top: -12%; height: 124%; }
.ops-overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8, 17, 32, .85) 0%, rgba(8, 17, 32, .55) 50%, rgba(8, 17, 32, .3) 100%); }
.ops-panel { max-width: 36rem; padding: clamp(1.75rem, 4vw, 3rem); background: rgba(8, 17, 32, .6); border: 1px solid var(--line-dark); border-radius: var(--radius); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.ops-panel .check-list { margin: .5rem 0 2rem; }
@media (min-width: 640px) { .ops-panel .check-list { grid-template-columns: 1fr 1fr; column-gap: 1.25rem; } }

/* --------------------------------------------------------------------------
   14. Home · Career preview
   -------------------------------------------------------------------------- */
.career-preview-grid { display: grid; gap: 2.5rem; align-items: center; }
.career-preview-copy .btn { margin-top: .5rem; }
.career-preview-media { position: relative; margin: 0; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-lg); aspect-ratio: 4 / 3; }
.career-preview-media picture, .career-preview-media img { width: 100%; height: 100%; object-fit: cover; }
.media-tag { position: absolute; left: 1.25rem; bottom: 1.25rem; padding: .45rem .8rem; background: rgba(8, 17, 32, .75); color: var(--white); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; border-radius: 6px; backdrop-filter: blur(6px); }
@media (min-width: 992px) { .career-preview-grid { grid-template-columns: 6fr 6fr; gap: 4rem; } }

/* --------------------------------------------------------------------------
   15. Final CTA
   -------------------------------------------------------------------------- */
.cta-final { overflow: hidden; isolation: isolate; text-align: center; background: var(--dark); }
.cta-final-glow { position: absolute; left: 50%; top: -30%; width: 70vw; max-width: 900px; aspect-ratio: 1; transform: translateX(-50%); background: radial-gradient(circle, rgba(242, 122, 33, .28) 0%, rgba(242, 122, 33, 0) 60%); z-index: -1; pointer-events: none; }
.cta-final-route { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 40%; z-index: -1; }
.cta-final-inner { max-width: 46rem; margin: 0 auto; }
.cta-final-inner .lede { margin-inline: auto; max-width: 52ch; margin-bottom: 2rem; }

/* --------------------------------------------------------------------------
   16. Sub-page hero
   -------------------------------------------------------------------------- */
.page-hero { position: relative; isolation: isolate; display: flex; align-items: flex-end; min-height: 64vh; min-height: 64svh; padding-top: calc(var(--header-h) + 4rem); padding-bottom: clamp(2.5rem, 6vw, 5rem); background: var(--primary); color: var(--white); overflow: hidden; }
.page-hero-media { position: absolute; inset: 0; z-index: -1; }
.page-hero-media picture, .page-hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.page-hero-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 17, 32, .55), rgba(8, 17, 32, .85)), linear-gradient(90deg, rgba(8, 17, 32, .55), rgba(8, 17, 32, .05)); }
.page-hero-lines { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 60%; }
.page-hero-content { position: relative; max-width: 60rem; }
.page-hero .display-1 { max-width: 20ch; }
.page-hero .btn-row { margin-top: 1.5rem; }

/* --------------------------------------------------------------------------
   17. Services page
   -------------------------------------------------------------------------- */
.service-index { position: sticky; top: var(--header-h); z-index: 50; background: rgba(244, 246, 249, .92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.service-index-list { display: flex; gap: .25rem; list-style: none; margin: 0; padding: .5rem 0; overflow-x: auto; scrollbar-width: none; }
.service-index-list::-webkit-scrollbar { display: none; }
.service-index-list li { flex: none; }
.service-index-list a { display: inline-flex; align-items: center; gap: .5rem; padding: .55rem .85rem; border-radius: 999px; font-family: var(--font-display); font-weight: 600; font-size: .92rem; color: var(--primary); white-space: nowrap; text-decoration: none; transition: background-color var(--dur), color var(--dur); }
.service-index-list a .mono { font-size: .7rem; letter-spacing: .12em; color: var(--accent); }
.service-index-list a:hover, .service-index-list a.is-current { background: var(--primary); color: var(--white); }
.service-index-list a:hover .mono, .service-index-list a.is-current .mono { color: var(--accent); }

.service-detail { padding-block: var(--section-y); scroll-margin-top: calc(var(--header-h) + 4rem); }
.service-detail:nth-child(even) { background: var(--light-alt); }
.service-detail-grid { display: grid; gap: 2.5rem; align-items: center; }
.service-detail-media { position: relative; margin: 0; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-lg); aspect-ratio: 4 / 3; background: var(--primary); }
.service-detail-media picture, .service-detail-media img { width: 100%; height: 100%; object-fit: cover; }
.service-detail-index { position: absolute; top: 1.25rem; left: 1.25rem; padding: .4rem .7rem; background: rgba(8, 17, 32, .7); color: var(--accent); font-size: .74rem; letter-spacing: .16em; border-radius: 6px; backdrop-filter: blur(6px); }
.service-detail-icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; margin-bottom: 1.25rem; border-radius: 14px; background: var(--primary); color: var(--accent); }
.service-detail-copy .lede { color: var(--text); }
.service-detail-copy .link-arrow { margin-top: 1.75rem; }
@media (min-width: 992px) {
  .service-detail-grid { grid-template-columns: 1fr 1fr; gap: 5rem; }
  .service-detail.is-reverse .service-detail-media { order: 2; }
}

.parcel-grid { display: grid; gap: 3rem; align-items: center; }
.parcel-note { display: flex; align-items: flex-start; gap: .6rem; margin: 1.5rem 0 0; padding: 1rem 1.25rem; border: 1px solid var(--line-dark); border-radius: var(--radius-sm); color: var(--text-light); font-size: .95rem; }
.parcel-note .icon { color: var(--accent); margin-top: .15em; }
.parcel-svg { width: 100%; height: auto; }
.parcel-icon { width: 24px; height: 24px; color: var(--white); transform: translate(28px, 208px); }
@media (min-width: 992px) { .parcel-grid { grid-template-columns: 7fr 5fr; gap: 5rem; } }

/* --------------------------------------------------------------------------
   18. Career page
   -------------------------------------------------------------------------- */
.tile-grid { display: grid; gap: 1.25rem; list-style: none; margin: 0; padding: 0; }
.tile { position: relative; padding: 1.75rem; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); transition: transform var(--dur-slow) var(--ease-out), box-shadow var(--dur-slow) var(--ease-out); }
.tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.tile-icon { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; margin-bottom: 1.1rem; border-radius: 14px; background: var(--accent-soft); color: var(--accent-hover); }
.tile h3 { font-size: 1.15rem; margin-bottom: .4rem; }
.tile p { margin: 0; color: var(--gray); }
.tile-badge { position: absolute; top: 1.25rem; right: 1.25rem; }
@media (min-width: 640px) { .tile-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .tile-grid { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } .tile-grid-4 { grid-template-columns: repeat(4, 1fr); } }

.two-lists { display: grid; gap: 2rem; }
.two-lists-col { padding: 2rem; border: 1px solid var(--line-dark); border-radius: var(--radius); background: rgba(255, 255, 255, .03); }
.two-lists-title { font-size: 1.25rem; margin-bottom: 1.25rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line-dark); color: var(--white); }
.two-lists-col:first-child .two-lists-title { color: var(--accent); }
@media (min-width: 768px) { .two-lists { grid-template-columns: 1fr 1fr; gap: 2rem; } }

.jobs-empty { display: flex; align-items: center; gap: .75rem; padding: 1.5rem; background: var(--white); border: 1px dashed var(--line-strong); border-radius: var(--radius); color: var(--gray); }
.jobs-empty .icon { color: var(--accent); }
.job-list { display: grid; gap: 1rem; }
.job { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: box-shadow var(--dur-slow), border-color var(--dur); }
.job[open], .job:hover { box-shadow: var(--shadow-sm); }
.job[open] { border-color: var(--line-strong); }
.job-summary { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem; padding: 1.5rem 1.75rem; cursor: pointer; list-style: none; }
.job-summary::-webkit-details-marker { display: none; }
.job-title { font-size: 1.3rem; margin: 0 0 .5rem; }
.job-meta { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin: 0 0 .6rem; font-size: .9rem; color: var(--gray); }
.job-meta span { display: inline-flex; align-items: center; gap: .35rem; }
.job-meta .icon { color: var(--accent); }
.job-summary-text { margin: 0; color: var(--text); }
.job-toggle { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); color: var(--primary); transition: transform var(--dur) var(--ease-out), background-color var(--dur), color var(--dur); }
.job[open] .job-toggle { transform: rotate(180deg); background: var(--primary); color: var(--white); border-color: var(--primary); }
.job-body { padding: 0 1.75rem 1.75rem; border-top: 1px solid var(--line); }
.job-body > p { padding-top: 1.5rem; }
.job-columns { display: grid; gap: 1.5rem; margin: .5rem 0 1.75rem; }
.job-column h4 { font-size: .8rem; font-family: var(--font-mono); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--gray); margin-bottom: .75rem; }
.job-unsolicited { border-style: dashed; }
@media (min-width: 768px) { .job-columns { grid-template-columns: repeat(3, 1fr); } }

.mini-steps { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 1rem; }
.mini-steps li { display: flex; gap: 1rem; align-items: flex-start; }
.mini-steps-index { flex: none; width: 2.25rem; height: 2.25rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--primary); color: var(--accent); font-size: .74rem; letter-spacing: .1em; }
.mini-steps strong { display: block; font-family: var(--font-display); font-size: 1.05rem; }
.mini-steps span:not(.mini-steps-index) { color: var(--gray); }

/* --------------------------------------------------------------------------
   19. Contact page
   -------------------------------------------------------------------------- */
.info-grid { display: grid; gap: 1.25rem; list-style: none; margin: 0; padding: 0; }
.info-card { padding: 1.75rem; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); }
.info-card h3 { font-size: .8rem; font-family: var(--font-mono); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--gray); margin: 1rem 0 .5rem; }
.info-card-icon { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 14px; background: var(--accent-soft); color: var(--accent-hover); }
.info-card-value { display: block; font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; color: var(--primary); text-decoration: none; }
.info-card-sub { display: inline-block; margin-top: .5rem; font-size: .92rem; color: var(--gray); }
.info-card-text { color: var(--gray); margin-bottom: .75rem; }
.info-card-hours { list-style: none; padding: 0; margin: 0; display: grid; gap: .25rem; }
.info-card-hours li { display: flex; justify-content: space-between; gap: 1rem; font-size: .98rem; }
.info-card-accent { background: var(--primary); color: var(--white); border-color: var(--primary); }
.info-card-accent .info-card-icon { background: rgba(255, 255, 255, .08); color: var(--accent); }
.info-card-accent h3 { color: var(--text-light-muted); }
.info-card-accent .info-card-text { color: var(--text-light); }
.info-card-accent .link-arrow { color: var(--accent); }
@media (min-width: 640px) { .info-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .info-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } }

.map-grid { display: grid; gap: 2.5rem; align-items: center; }
.map-address { font-size: 1.15rem; line-height: 1.5; margin-bottom: 1.5rem; }
.map-frame { position: relative; aspect-ratio: 16 / 10; border-radius: var(--radius); overflow: hidden; background: var(--primary); box-shadow: var(--shadow-lg); }
.map-frame picture, .map-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.map-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.map-consent { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .75rem; padding: 1.5rem; text-align: center; background: rgba(8, 17, 32, .55); color: var(--white); backdrop-filter: blur(3px); }
.map-consent p { margin: 0; max-width: 34ch; }
.map-consent-small { font-size: .85rem; color: var(--text-light-muted); }
.map-consent-small a { color: var(--white); text-decoration: underline; }
.map-consent-static { background: rgba(8, 17, 32, .45); }
.map-revoke { display: inline-block; margin-top: .75rem; padding: 0; background: none; border: 0; color: var(--gray); font-size: .85rem; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.map-revoke:hover, .map-revoke:focus-visible { color: var(--primary); }
@media (min-width: 992px) { .map-grid { grid-template-columns: 5fr 7fr; gap: 4rem; } }

/* --------------------------------------------------------------------------
   20. Shop page
   -------------------------------------------------------------------------- */
.shop-hero { position: relative; isolation: isolate; display: flex; align-items: flex-end; min-height: 60vh; padding-top: calc(var(--header-h) + 4rem); overflow: hidden; }
.shop-hero-bg { position: absolute; inset: 0; z-index: -1; }
.shop-hero-bg svg { width: 100%; height: 100%; }
.shop-hero-content { position: relative; max-width: 56rem; }
.shop-hero .kicker .badge-soon { margin-left: .25rem; }
.shop-note { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; margin-top: clamp(2.5rem, 5vw, 4rem); padding: 1.75rem 2rem; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); }
.shop-note p { margin: 0; max-width: 46ch; color: var(--gray); }
.tile-soon { opacity: .96; }

/* --------------------------------------------------------------------------
   21. Legal pages
   -------------------------------------------------------------------------- */
.legal-layout { max-width: 48rem; }
.legal-head { margin-bottom: 2.5rem; }
.legal-block { margin-bottom: 2.25rem; }
.legal-block h2 { font-size: 1.35rem; margin-bottom: .75rem; }
.legal-block p, .legal-block li { color: var(--text); }
.legal-dl { display: grid; grid-template-columns: 1fr; gap: .35rem 1.5rem; margin: 0; }
.legal-dl dt { font-family: var(--font-mono); font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gray); margin-top: .5rem; }
.legal-dl dd { margin: 0; }
.legal-pending { color: var(--gray); font-style: italic; border-bottom: 1px dashed var(--line-strong); }
.legal-notice { display: flex; gap: .65rem; align-items: flex-start; padding: 1rem 1.25rem; background: var(--accent-soft); border-radius: var(--radius-sm); color: var(--primary); font-size: .95rem; }
.legal-notice .icon { color: var(--accent-hover); margin-top: .15em; }
@media (min-width: 640px) { .legal-dl { grid-template-columns: 14rem 1fr; } .legal-dl dt { margin-top: 0; } }

/* --------------------------------------------------------------------------
   22. Error pages
   -------------------------------------------------------------------------- */
.error-page { min-height: 100vh; min-height: 100svh; display: flex; align-items: center; padding-top: calc(var(--header-h) + 3rem); background: var(--primary); }
.error-grid { display: grid; gap: 3rem; align-items: center; }
.error-copy .lede { margin-bottom: 2rem; }
.error-route { width: 100%; height: auto; }
.error-route-break { animation: error-pulse 2.8s ease-in-out infinite; transform-origin: 330px 210px; transform-box: view-box; }
@keyframes error-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
@media (min-width: 992px) { .error-grid { grid-template-columns: 6fr 6fr; gap: 5rem; } }

/* --------------------------------------------------------------------------
   23. Forms
   -------------------------------------------------------------------------- */
.form-layout { display: grid; gap: 2.5rem; align-items: start; }
.form-intro .check-list { margin: .5rem 0 1.5rem; }
.form-note { display: flex; gap: .6rem; align-items: flex-start; margin: 1.5rem 0 0; padding: 1rem 1.25rem; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: .92rem; color: var(--gray); }
.form-note .icon { color: var(--accent); margin-top: .15em; }
.form-panel { padding: clamp(1.5rem, 3vw, 2.5rem); background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.form-grid { display: grid; gap: 1.25rem; }
.form-field-full { grid-column: 1 / -1; }
.form-label { font-family: var(--font-display); font-weight: 600; font-size: .95rem; color: var(--primary); }
.form-required { color: var(--accent-hover); }
.form-optional { font-family: var(--font-mono); font-weight: 500; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--gray); margin-left: .25rem; }
.form-control, .form-select { font-size: 1rem; color: var(--text); background-color: var(--light); }
.form-control:focus, .form-select:focus { background-color: var(--white); }
.form-control.is-invalid, .form-select.is-invalid { border-color: #C0392B; background-image: none; }
.form-error { margin: .4rem 0 0; font-size: .88rem; color: #B03A2E; }
.form-hint { margin: .4rem 0 0; font-size: .86rem; color: var(--gray); }
.form-errors-summary { margin: 0 0 1.25rem; padding: .85rem 1rem; border-left: 3px solid #C0392B; background: rgba(192, 57, 43, .06); color: #8E2A1F; font-weight: 600; }
.form-alert { display: flex; gap: .75rem; align-items: flex-start; margin: 0 0 1.25rem; padding: 1rem 1.25rem; border-radius: var(--radius-sm); background: rgba(192, 57, 43, .08); border: 1px solid rgba(192, 57, 43, .3); color: #8E2A1F; }
.form-alert .icon { color: #C0392B; margin-top: .15em; }
.form-alert p { margin: 0; }
.form-uploads { margin: 1.75rem 0 0; padding: 1.5rem; border: 1px dashed var(--line-strong); border-radius: var(--radius-sm); }
.form-uploads legend { float: none; width: auto; padding: 0 .5rem; font-family: var(--font-display); font-weight: 600; font-size: 1rem; }
.form-uploads > .form-hint { margin: 0 0 1.25rem; }
.file-field { position: relative; }
.file-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; z-index: 2; }
.file-field-ui { display: flex; align-items: center; gap: .6rem; min-height: 3.1rem; padding: .7rem 1rem; background: var(--light); border: 1.5px solid #C4CCD8; border-radius: var(--radius-sm); color: var(--gray); font-size: .95rem; transition: border-color var(--dur), background-color var(--dur); }
.file-field-ui .icon { color: var(--accent); }
.file-field-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-field:hover .file-field-ui, .file-input:focus-visible + .file-field-ui { border-color: var(--accent); background: var(--white); }
.file-field.has-file .file-field-ui { color: var(--primary); border-color: var(--primary); }
.file-field.is-invalid .file-field-ui { border-color: #C0392B; }
.form-check-field { margin-top: 1.5rem; }
.form-check { display: flex; gap: .75rem; padding-left: 0; }
.form-check-input { flex: none; width: 1.25rem; height: 1.25rem; margin: .15rem 0 0; }
.form-check-label { font-size: .95rem; color: var(--text); }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.75rem; }
.form-required-note { margin: 0; font-size: .85rem; color: var(--gray); }
.hp-field { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.form-success { display: flex; flex-direction: column; align-items: flex-start; gap: .75rem; padding: 1rem 0; }
.form-success .icon-xl { color: var(--accent); }
.form-success h3 { font-size: 1.5rem; margin: .5rem 0 0; }
.form-success p { color: var(--gray); max-width: 44ch; }
.form-success .btn { margin-top: .5rem; }
.dl-form.is-sending { opacity: .7; pointer-events: none; }
@media (min-width: 640px) { .form-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 992px) { .form-layout { grid-template-columns: 5fr 7fr; gap: 4rem; } .form-intro { position: sticky; top: calc(var(--header-h) + 2rem); } }

/* --------------------------------------------------------------------------
   24. Footer
   -------------------------------------------------------------------------- */
.site-footer { background: var(--dark); color: var(--text-light); padding: 2rem 0 2.5rem; }
.footer-route svg { width: 100%; height: 40px; }
.footer-grid { display: grid; gap: 2.5rem 2rem; padding: 2.5rem 0 3rem; }
.footer-brand { max-width: 22rem; }
.brand-footer { color: var(--white); margin-bottom: 1.25rem; }
.footer-about { color: var(--text-light-muted); line-height: 1.6; }
.social-list { display: flex; gap: .5rem; list-style: none; margin: 1rem 0 0; padding: 0; }
.social-list a { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--line-dark); color: var(--white); transition: background-color var(--dur), border-color var(--dur); }
.social-list a:hover { background: var(--accent); border-color: var(--accent); color: var(--primary); }
.footer-heading { font-size: .78rem; font-family: var(--font-mono); font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); margin: 0 0 1.1rem; }
.footer-subheading { font-size: .78rem; font-family: var(--font-mono); font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--text-light-muted); margin: 1.5rem 0 .75rem; }
.footer-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.footer-list a { color: var(--text-light); text-decoration: none; display: inline-flex; align-items: center; gap: .55rem; }
.footer-list a:hover { color: var(--white); text-decoration: underline; text-underline-offset: 3px; }
.footer-contact .icon, .footer-address .icon { color: var(--accent); }
.footer-address, .footer-line { display: flex; gap: .55rem; align-items: flex-start; }
.footer-line .icon { color: var(--accent); flex: 0 0 auto; margin-top: .2rem; }
.footer-hours { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; font-size: .95rem; }
.footer-hours li { display: flex; justify-content: space-between; gap: 1rem; }
.footer-note { margin: .75rem 0 0; font-size: .88rem; color: var(--text-light-muted); }
.footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 2rem; padding-top: 1.5rem; border-top: 1px solid var(--line-dark); font-size: .88rem; color: var(--text-light-muted); }
.footer-bottom p { margin: 0; }
.footer-lang { display: flex; gap: 1.25rem; list-style: none; margin: 0; padding: 0; }
.footer-lang a { color: var(--text-light-muted); font-family: var(--font-mono); font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; }
.footer-lang a.is-active, .footer-lang a:hover { color: var(--white); }
@media (min-width: 640px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } .footer-brand { grid-column: 1 / -1; } }
@media (min-width: 992px) { .footer-grid { grid-template-columns: 2.2fr 1fr 1fr 1.3fr 1fr; gap: 2rem 2.5rem; } .footer-brand { grid-column: auto; } }

/* --------------------------------------------------------------------------
   24b. Scroll-scrubbed hero video (home)
   Five static-hero gates below must match assets/js/hero-scrub.js character for character.
   -------------------------------------------------------------------------- */
:root { --tshadow: 0 1px 2px rgba(5, 9, 16, .95), 0 3px 12px rgba(5, 9, 16, .78), 0 10px 44px rgba(5, 9, 16, .8); }
.hero-scrub { position: relative; height: 1000vh; background: var(--primary); color: var(--white); }
.hero-scrub-stage { position: sticky; top: 0; height: 100vh; overflow: hidden; isolation: isolate; }
.hero-scrub-stage::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 12vh; background: linear-gradient(180deg, rgba(11, 27, 51, 0), rgba(11, 27, 51, .92)); pointer-events: none; }
.hero-scrub-media { position: absolute; inset: 0; z-index: -1; background: var(--primary); }
.hero-scrub-poster { position: absolute; inset: 0; background-image: var(--poster-jpg); background-size: cover; background-position: 50% center; opacity: 0; transition: opacity .5s var(--ease-out); }
@supports (background-image: image-set(url("a.jpg") type("image/jpeg"))) { .hero-scrub-poster { background-image: var(--poster); } }
.hero-scrub-poster.is-in { opacity: 1; }
.hero-scrub-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% center; opacity: 0; transition: opacity .8s var(--ease-out); transform: translateZ(0); will-change: transform; }
.hero-scrub-stage.video-ready .hero-scrub-video { opacity: 1; }
.hero-scrub-stage.video-failed .hero-scrub-video { display: none; }
.hero-scrub-scrim { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(8, 17, 32, .55) 0%, rgba(8, 17, 32, .3) 30%, rgba(8, 17, 32, 0) 45%), linear-gradient(180deg, rgba(8, 17, 32, .35) 0%, rgba(8, 17, 32, 0) 22%, rgba(8, 17, 32, 0) 72%, rgba(8, 17, 32, .35) 100%); }
.hero-scrub-scrim::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8, 17, 32, .82) 0%, rgba(8, 17, 32, .74) 30%, rgba(8, 17, 32, .62) 44%, rgba(8, 17, 32, .3) 58%, rgba(8, 17, 32, 0) 70%); opacity: var(--k-settle, 0); opacity: max(var(--k-settle, 0), var(--k-vig, 0)); }   /* the arrival vignette: the left half dims from band 4 (the docking) through the settle, holding the captions, the title and both CTAs */

/* Bands: one grid cell below the header, four positions across five beats */
.hero-scrub-bands { position: absolute; inset: 0; pointer-events: none; }
.hero-scrub-bands .container { position: relative; display: grid; align-items: center; height: 100%; padding-top: var(--header-h); box-sizing: border-box; }
.band { grid-area: 1 / 1; position: relative; max-width: 40rem; opacity: 0; text-shadow: var(--tshadow); --k: 0; }
.band.is-on { pointer-events: auto; }
.band .btn { text-shadow: none; }
.band:not(.is-on) .btn { visibility: hidden; }
.band::before { content: ""; position: absolute; inset: -16% -12%; z-index: -1; pointer-events: none; border-radius: 40%; opacity: calc(.3 + .7 * var(--k, 1)); background: radial-gradient(ellipse 78% 68% at 40% 50%, rgba(5, 9, 16, .5) 0%, rgba(5, 9, 16, .34) 46%, rgba(5, 9, 16, 0) 78%); }
.band-2::before, .band-4::before { background: radial-gradient(ellipse 78% 68% at 40% 50%, rgba(5, 9, 16, .55) 0%, rgba(5, 9, 16, .38) 46%, rgba(5, 9, 16, 0) 78%); }
.band-1 { align-self: start; margin-top: 6vh; }
.band-2 { align-self: end; margin-bottom: 30vh; }
.band-3 { align-self: center; margin-bottom: 24vh; max-width: 34rem; }   /* sits above the horizon line, clear of the hub lights */
.band-4 { align-self: end; margin-bottom: 30vh; max-width: 34rem; }
.band-settle { align-self: center; max-width: 32rem; }

/* Type over footage: weight 600, short measures */
.kicker-scrub { color: rgba(255, 255, 255, .62); margin-bottom: 1.1rem; }
.kicker-scrub::before { background: var(--accent); }
.band .hero-title { font-weight: 600; font-size: clamp(2.2rem, 4.2vw, 3.8rem); line-height: 1.05; letter-spacing: -.015em; max-width: 14ch; margin: 0 0 1.25rem; }
.band-line { display: block; }
.band-1 .band-line { --kc: clamp(0, (var(--k, 0) - var(--th, 0)) * 2.8, 1); opacity: var(--kc); transform: scale(calc(.92 + .08 * var(--kc))); transform-origin: left top; }
.band-1 .band-line:nth-child(1) { --th: 0; }
.band-1 .band-line:nth-child(2) { --th: .15; }
.band-lines { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.9rem, 3.2vw, 2.8rem); line-height: 1.12; letter-spacing: -.012em; max-width: 22ch; margin: 0; }
.band-2 .band-line { --kc: clamp(0, (var(--k, 0) - var(--th, 0)) * 2.8, 1); opacity: var(--kc); transform: translateX(calc((1 - var(--kc)) * -28px)); }
.band-2 .band-line:nth-child(1) { --th: 0; }
.band-2 .band-line:nth-child(2) { --th: .2; }
.band-title { font-family: var(--font-display); font-weight: 600; font-size: clamp(2rem, 3.6vw, 3.2rem); line-height: 1.1; letter-spacing: -.015em; max-width: 20ch; margin: 0; }
.split { display: inline; }
.split .w { display: inline-block; white-space: pre; }
.band-3 .split .w { --kc: clamp(0, (var(--k, 0) - var(--th, 0)) * 2.8, 1); opacity: var(--kc); transform: translateY(calc((1 - var(--kc)) * -24px)); }
.band-statement { position: relative; font-family: var(--font-display); font-weight: 600; font-size: clamp(2rem, 4vw, 3.6rem); line-height: 1.1; letter-spacing: -.015em; margin: 0; max-width: 18ch; }
.band-statement .blur-soft { position: absolute; inset: 0; filter: blur(10px); opacity: calc(1 - var(--k, 0)); }
.band-statement .blur-sharp { display: block; opacity: var(--k, 0); transform: scale(calc(.96 + .04 * var(--k, 0))); transform-origin: left center; }
.band-settle .hero-title { font-size: clamp(2.2rem, 3.6vw, 3.4rem); max-width: 19ch; }
.band-settle .split .w { --kc: clamp(0, (var(--k, 0) - var(--th, 0)) * 2.8, 1); opacity: var(--kc); transform: translateY(calc((1 - var(--kc)) * .45em)); }
.band-settle .hero-lede { --ks: clamp(0, (var(--k, 0) - .5) * 3, 1); opacity: var(--ks); transform: translateY(calc((1 - var(--ks)) * 14px)); max-width: 44ch; margin-bottom: 1.75rem; }
.band-settle .btn-row { --kb: clamp(0, (var(--k, 0) - .7) * 4, 1); opacity: var(--kb); transform: translateY(calc((1 - var(--kb)) * 14px)); }
:lang(tr) .band-3 .band-title, :lang(tr) .band-settle .hero-title, :lang(en) .band-settle .hero-title { font-size: clamp(2rem, 3.2vw, 3rem); }

/* The route strip rides up from the stage edge during the settle: the bridge into the page */
.hero-scrub-strip { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; border-top: 1px solid var(--line-dark); background: rgba(8, 17, 32, .55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); --kr: clamp(0, (var(--k-settle, 0) - .8) * 5, 1); transform: translateY(calc((1 - var(--kr)) * 100%)); opacity: var(--kr); }

/* One quiet object: the scroll cue that doubles as the loading line */
.hero-scrub-cue { position: absolute; left: 50%; bottom: 1.75rem; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: .6rem; transform: translateX(-50%); font-family: var(--font-mono); font-size: .7rem; letter-spacing: .14em; color: rgba(255, 255, 255, .5); text-shadow: var(--tshadow); transition: opacity .5s; }
.cue-line { position: relative; width: 1px; height: 40px; background: rgba(255, 255, 255, .16); overflow: hidden; }
.cue-line::after { content: ""; position: absolute; inset: 0; background: rgba(255, 255, 255, .7); transform-origin: top; animation: cue-draw 2.4s var(--ease-in-out) infinite; }
.cue-fill { position: absolute; inset: 0; background: var(--accent); transform-origin: top; transform: scaleY(calc(1 - var(--ld, 126) / 126)); opacity: 0; transition: opacity .3s, transform .2s linear; }
.hero-scrub-cue.is-loading .cue-fill { opacity: 1; }
.hero-scrub-cue.is-loading .cue-line::after { opacity: 0; animation-play-state: paused; }
.hero-scrub-cue.is-hidden { opacity: 0; }
.hero-scrub-cue.is-hidden .cue-line::after { animation-play-state: paused; }
@keyframes cue-draw { 0% { transform: scaleY(0); opacity: 1; } 55% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }

@media (max-height: 720px) {
  .band-settle .hero-title { font-size: clamp(1.9rem, 3.4vw, 2.8rem); }
  .band-settle .hero-lede { font-size: 1.05rem; margin-bottom: 1.25rem; }
  .band-2, .band-4 { margin-bottom: 22vh; }
}
@media (max-height: 560px) { .hero-scrub-cue { display: none; } }
@media (orientation: portrait) { .hero-scrub-poster { background-position: 62% center; } .hero-scrub-video { object-position: 62% center; } }
@media (min-width: 2000px) { .hero-scrub-bands .container { max-width: none; padding-inline: 6vw; } }

/* Static hero as the gated fallback */
.hero-static-gated { display: none; }
.hero-static-gated .hero-network { display: none; }
@media (max-width: 720px) { .hero-static-gated .hero-img { object-position: 78% center; } }
@media (max-width: 720px), (orientation: portrait) and (max-width: 1024px), (orientation: portrait) and (pointer: coarse), (orientation: landscape) and (pointer: coarse) and (max-height: 560px), (prefers-reduced-motion: reduce) {
  .hero-scrub { display: none; }
  .hero-static-gated { display: flex; }
}
html.no-js .hero-scrub { display: none; }
html.no-js .hero-static-gated { display: flex; }

/* Header over the scrub: one accent, glass when scrolled, no duplicate CTA during the settle */
.header-cta { transition: opacity .3s, transform var(--dur) var(--ease-out), background-color var(--dur), border-color var(--dur), color var(--dur), box-shadow var(--dur); }
body.hero-settle-on .header-cta { opacity: 0; pointer-events: none; }

/* --------------------------------------------------------------------------
   25. Motion (only when JS + motion preference allow it)
   -------------------------------------------------------------------------- */
html.has-motion .reveal:not(.is-revealed), html.has-motion .reveal-item:not(.is-revealed) { opacity: 0; }
html.has-motion .hero-in { opacity: 0; }
html.has-motion .hero-line-inner { transform: translateY(110%); }
html.has-motion .hero .net-line { stroke-dasharray: 2000; stroke-dashoffset: 2000; }
html.has-motion .hero .net-node, html.has-motion .hero-net-pulses { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  .hero-net-pulses, .net-pulses { display: none; }
}

/* ============================================================
   24c · Light header: the client's full-colour logo needs a light bar (2026-09-17)
   ============================================================ */
.site-header { color: var(--primary); background: rgba(255, 255, 255, .96); box-shadow: 0 1px 0 var(--line); }
body.has-dark-hero .site-header:not(.is-scrolled):not(.is-menu-open) { background: rgba(255, 255, 255, .96); box-shadow: 0 1px 0 var(--line); }
body.has-dark-hero .site-header:not(.is-scrolled):not(.is-menu-open)::after { display: none; }
.site-header.is-scrolled { background: rgba(255, 255, 255, .88); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 8px 32px -18px rgba(8, 17, 32, .35), 0 1px 0 var(--line); }
.site-header.is-menu-open { background: var(--white); }
.nav-link { color: rgba(11, 27, 51, .78); }
.nav-link:hover, .nav-link:focus-visible, .nav-link.is-active { color: var(--primary); }
.nav-link::after { background: var(--accent); }
.site-header .nav-badge { border-color: rgba(11, 27, 51, .3); color: rgba(11, 27, 51, .62); }
.lang-toggle { border-color: rgba(11, 27, 51, .22); color: var(--primary); }
.lang-toggle:hover, .lang-toggle[aria-expanded="true"] { border-color: rgba(11, 27, 51, .5); background: rgba(11, 27, 51, .05); }
.nav-toggle { color: var(--primary); }
.site-header .brand:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }

/* ============================================================
   24d · Light footer: the logo keeps its original colours, so the footer is a light surface too (2026-09-17)
   ============================================================ */
.site-footer { background: var(--light); color: var(--primary); border-top: 1px solid var(--line); }
.brand-footer { color: var(--primary); }
.footer-about { color: var(--gray); }
.footer-subheading { color: var(--gray); }
.footer-list a { color: rgba(11, 27, 51, .82); }
.footer-list a:hover { color: var(--primary); }
.footer-address { color: rgba(11, 27, 51, .82); }
.footer-hours { color: rgba(11, 27, 51, .82); }
.footer-note { color: var(--gray); }
.footer-bottom { border-top-color: var(--line); color: var(--gray); }
.footer-lang a { color: var(--gray); }
.footer-lang a.is-active, .footer-lang a:hover { color: var(--primary); }
.social-list a { color: var(--primary); }

/* ============================================================
   24e · Footer on phones: everything centred (2026-09-17)
   ============================================================ */
@media (max-width: 639.98px) {
  .footer-grid { text-align: center; justify-items: center; }
  .footer-brand { margin-left: auto; margin-right: auto; }
  .brand-footer { display: inline-flex; }
  .footer-brand .brand-logo { margin: 0 auto; }
  .social-list { justify-content: center; }
  .footer-list a, .footer-address, .footer-line { justify-content: center; }
  .footer-address span, .footer-line > span { text-align: left; }
  .footer-bottom { flex-direction: column; justify-content: center; text-align: center; gap: .5rem; }
  .footer-lang { justify-content: center; }
}

/* ============================================================
   24f · Mobile menu after scrolling (2026-09-17)
   The glass header uses backdrop-filter, which turns the fixed menu panel inside it into a child of the
   66px header box, so it collapsed to zero height once the page was scrolled. While the menu is open the
   header drops the filter. The language row in the menu is centred.
   ============================================================ */
.site-header.is-menu-open { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--white); box-shadow: 0 1px 0 var(--line); }
.mobile-meta { align-items: center; text-align: center; }
.mobile-lang { justify-content: center; margin-top: .25rem; }