@charset "UTF-8";
/* =====================================================================
   GCC — Site chrome and section patterns
   Depends on tokens.css + main.css.
   ===================================================================== */

/* ================================================================ HEADER
   Solid at all times. The bar is a piece of furniture, not a veil over the
   photograph — it keeps the same weight on every page and every theme. */
.site-header {
  position: fixed; inset-inline: 0; top: 0;
  z-index: var(--z-header);
  height: var(--header-h);
  display: flex; align-items: center;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  transition: height var(--dur-3) var(--ease-both),
              box-shadow var(--dur-3) var(--ease-both);
}
.site-header .wrap-wide {
  display: flex; align-items: center;
  gap: clamp(var(--sp-4), 2vw, var(--sp-7));
  width: 100%;
}
.site-header.is-stuck { height: var(--header-h-stuck); box-shadow: var(--sh-sm); }

.brand { display: flex; align-items: center; flex-shrink: 0; }
.brand img { height: 48px; width: auto; transition: height var(--dur-3) var(--ease-both); }
.site-header.is-stuck .brand img { height: 38px; }

/* ---------------------------------------------------------------- nav */
.nav { display: flex; align-items: center; gap: 2px; margin-inline: auto; }
.nav a {
  position: relative;
  padding: 10px 13px;
  font-size: var(--t-small);
  font-weight: var(--fw-medium);
  color: var(--text-soft);
  white-space: nowrap;
  transition: color var(--dur-1) var(--ease-both);
}
.nav a:hover { color: var(--text-strong); }
.nav a.is-active { color: var(--brand); font-weight: var(--fw-semi); }
/* The active mark is a rule under the word, set on the bar's own baseline. */
.nav a.is-active::after {
  content: '';
  position: absolute; left: 13px; right: 13px; bottom: -2px;
  height: 2.5px; border-radius: 2px;
  background: var(--brand);
}

.header-actions { display: flex; align-items: center; gap: var(--sp-3); flex-shrink: 0; }

/* ---------------------------------------------------------------- phone block
   The number is the loudest thing in the bar after the logo: for this trade
   most enquiries arrive as a call, not a form. */
.header-phone {
  display: flex; align-items: center; gap: var(--sp-3);
  padding-inline-end: var(--sp-2);
}
.header-phone__ico {
  width: 36px; height: 36px; flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: var(--r-pill);
  background: var(--brand-soft);
  color: var(--brand);
}
.header-phone__txt { display: flex; flex-direction: column; line-height: 1.25; }
.header-phone__num {
  font-family: var(--font-num);
  font-size: var(--t-body);
  font-weight: var(--fw-bold);
  color: var(--text-strong);
  letter-spacing: -.01em;
  white-space: nowrap;
}
.header-phone:hover .header-phone__num { color: var(--brand); }
.header-phone__hrs {
  font-size: var(--t-caption);
  color: var(--text-muted);
  white-space: nowrap;
}

@media (max-width: 1360px) { .header-phone__hrs { display: none; } }
@media (max-width: 1200px) { .header-phone { display: none; } }

.icon-btn {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  color: var(--text-soft);
  background: transparent;
  transition: all var(--dur-1) var(--ease-both);
}
.icon-btn:hover { color: var(--brand); border-color: var(--brand); background: var(--brand-soft); }

/* ---------------------------------------------------------------- language picker */
.lang { position: relative; }
.lang-btn {
  display: inline-flex; align-items: center; gap: 7px;
  height: 42px; padding-inline: 13px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text-soft);
  font-size: var(--t-label);
  font-weight: var(--fw-semi);
  transition: all var(--dur-1) var(--ease-both);
}
.lang-btn:hover { color: var(--brand); border-color: var(--brand); background: var(--brand-soft); }
.lang-btn .chev { transition: transform var(--dur-2) var(--ease-both); }
.lang.is-open .lang-btn .chev { transform: rotate(180deg); }
.lang-code { font-family: var(--font-num); letter-spacing: .04em; }

.lang-menu {
  position: absolute; right: 0; top: calc(100% + 8px);
  width: 292px;
  max-height: min(70vh, 440px);
  overflow-y: auto;
  padding: var(--sp-2);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-xl);
  z-index: var(--z-dropdown);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--dur-2) var(--ease-both),
              transform var(--dur-2) var(--ease-out),
              visibility var(--dur-2);
}
.lang.is-open .lang-menu { opacity: 1; visibility: visible; transform: none; }

.lang-menu__head {
  padding: 8px 10px 10px;
  font-size: var(--t-caption);
  font-weight: var(--fw-semi);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--text-faint);
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: var(--sp-2);
}
.lang-opt {
  display: flex; align-items: center; gap: var(--sp-3);
  width: 100%;
  padding: 9px 10px;
  border-radius: var(--r-sm);
  color: var(--text-soft);
  font-size: var(--t-small);
  text-align: left;
  transition: background-color var(--dur-1) var(--ease-both), color var(--dur-1) var(--ease-both);
}
.lang-opt:hover { background: var(--surface-3); color: var(--text-strong); }
.lang-opt.is-current { background: var(--brand-soft); color: var(--brand); font-weight: var(--fw-semi); }
.lang-opt__native { flex: 1; }
.lang-opt__en { font-size: var(--t-caption); color: var(--text-faint); }
.lang-opt.is-current .lang-opt__en { color: var(--brand); opacity: .75; }
.lang-opt__tick { opacity: 0; flex-shrink: 0; }
.lang-opt.is-current .lang-opt__tick { opacity: 1; }
.lang-opt[aria-disabled="true"] { opacity: .45; cursor: default; }
.lang-opt[aria-disabled="true"]:hover { background: transparent; color: var(--text-soft); }
.lang-opt__soon {
  font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-faint); border: 1px solid var(--line); border-radius: var(--r-xs);
  padding: 2px 5px;
}

.burger { display: none; }

/* ---------------------------------------------------------------- mobile drawer */
.drawer {
  position: fixed; inset: 0; z-index: var(--z-drawer);
  background: var(--bg);
  padding: var(--sp-5) var(--gutter) var(--sp-9);
  overflow-y: auto;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform var(--dur-4) var(--ease-out), visibility var(--dur-4);
}
.drawer.is-open { transform: none; visibility: visible; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-7); }
.drawer-head img { height: 36px; width: auto; }
.drawer nav { display: flex; flex-direction: column; }
.drawer nav a {
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--line-soft);
  font-family: var(--font-display);
  font-size: var(--t-h4);
  font-weight: var(--fw-semi);
  color: var(--text-strong);
  display: flex; align-items: center; justify-content: space-between;
}
.drawer nav a.is-active { color: var(--brand); }
.drawer-cta { margin-top: var(--sp-7); display: grid; gap: var(--sp-3); }
.drawer-meta {
  margin-top: var(--sp-8); padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
  color: var(--text-muted); font-size: var(--t-small);
}
.drawer-meta a { display: inline-flex; align-items: center; min-height: 44px; }

/* The bar carries a lot: logo, nav, language, phone, theme, CTA. Things are
   shed in order of how much they earn their place as the window narrows. */
@media (max-width: 1560px) {
  .lang-btn .lang-name { display: none; }
}
@media (max-width: 1440px) {
  .site-header .wrap-wide { gap: var(--sp-4); }
  .nav a { padding-inline: 10px; }
}
@media (max-width: 1100px) {
  .nav { display: none; }
  .burger { display: grid; }
  .header-actions .btn { display: none; }
}
@media (max-width: 460px) {
  .lang-btn .lang-name { display: none; }
}

/* ================================================================ HERO
   Split composition: the argument on the left over paper, the site photograph
   on the right, bleeding off the edge and dissolving into the page. */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(1100px 560px at 6% 12%, var(--hero-wash-a) 0%, transparent 62%),
    radial-gradient(900px 500px at 42% 96%, var(--hero-wash-b) 0%, transparent 66%),
    var(--hero-bg);
  padding-top: calc(var(--header-h) + var(--sp-8));
  padding-bottom: var(--sp-9);
}

/* ---------------------------------------------------------------- photo */
.hero-photo { position: relative; }
.hero-slide {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 900ms var(--ease-both);
}
.hero-slide.is-active { opacity: 1; }
.hero-slide img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: var(--focal, center);
  transform: scale(1.06);
  transition: transform 9000ms linear;
}
.hero-slide.is-active img { transform: scale(1); }

.hero-inner { position: relative; z-index: 2; }
.hero-body { max-width: 42rem; }

/* ---------------------------------------------------------------- badge */
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: 8px 15px 8px 11px;
  border-radius: var(--r-pill);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--sh-sm);
  font-size: var(--t-label);
  font-weight: var(--fw-semi);
  color: var(--text-soft);
  margin-bottom: var(--sp-6);
}
.hero-eyebrow svg { color: var(--brand); }

.hero h1 {
  color: var(--text-strong);
  font-size: var(--t-display);
  font-weight: var(--fw-extra);
  line-height: 1.04;
  letter-spacing: var(--ls-display);
  margin-bottom: var(--sp-5);
  text-wrap: balance;
}
.hero-sub {
  max-width: 46ch;
  font-size: var(--t-body-lg);
  color: var(--text-soft);
  margin-bottom: var(--sp-7);
}

/* ---------------------------------------------------------------- fact strip
   Three verifiable numbers, ruled apart. Not a feature grid — these are
   figures from the order book, so they are set as data. */
.hero-facts {
  display: flex; align-items: stretch;
  flex-wrap: wrap;
  gap: 0;
  margin-bottom: var(--sp-7);
}
.hero-fact {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 0 var(--sp-6) 0 0;
  margin-right: var(--sp-6);
  border-right: 1px solid var(--line);
}
.hero-fact:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.hero-fact__ico {
  width: 42px; height: 42px; flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: var(--r-pill);
  border: 1.5px solid var(--brand-border);
  background: var(--brand-soft);
  color: var(--brand);
}
.hero-fact__txt { display: flex; flex-direction: column; line-height: 1.3; }
.hero-fact__k {
  font-size: var(--t-small);
  font-weight: var(--fw-bold);
  color: var(--text-strong);
}
.hero-fact__v { font-size: var(--t-caption); color: var(--text-muted); }
.hero-fact__txt { min-width: 0; }
/* Only the side-by-side strip needs the labels held on one line. */
@media (min-width: 1024px) {
  .hero-fact__k, .hero-fact__v { white-space: nowrap; }
}

.hero-cta { display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: center; }

/* ---------------------------------------------------------------- trust line */
.hero-trust {
  display: flex; align-items: center; gap: var(--sp-4);
  margin-top: var(--sp-8);
  flex-wrap: wrap;
}
.hero-trust__logos { display: flex; align-items: center; }
.hero-trust__logos img,
.hero-trust__logos span {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: var(--r-pill);
  background: var(--surface);
  border: 2px solid var(--bg);
  box-shadow: var(--sh-xs);
  object-fit: contain;
  padding: 5px;
  font-size: var(--t-caption);
  font-weight: var(--fw-bold);
  color: var(--text-soft);
}
.hero-trust__logos > * + * { margin-left: -12px; }
.hero-trust__txt { display: flex; flex-direction: column; line-height: 1.35; }
.hero-trust { min-width: 0; }
.hero-trust__txt { min-width: 0; }
.hero-trust__txt b { font-size: var(--t-small); color: var(--text-strong); font-weight: var(--fw-semi); }
.hero-trust__txt span { font-size: var(--t-caption); color: var(--text-muted); }

/* ---------------------------------------------------------------- stats panel
   Dark glass laid over the foot of the photograph, the way a data plate is
   riveted onto a machine. */
.hero-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-radius: var(--r-lg);
  overflow: hidden;
  background: rgba(6, 16, 34, .74);
  border: 1px solid rgba(255, 255, 255, .16);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  box-shadow: var(--sh-xl);
}
.hero-stat {
  padding: var(--sp-5) var(--sp-4);
  border-right: 1px solid rgba(255, 255, 255, .13);
  display: flex; flex-direction: column; gap: 3px;
  min-width: 0;
}
.hero-stat:last-child { border-right: 0; }
.hero-stat__ico { color: rgba(255,255,255,.6); margin-bottom: 3px; }
.hero-stat__v {
  font-family: var(--font-num);
  font-size: clamp(1.25rem, 1.4vw, 1.6rem);
  font-weight: var(--fw-bold);
  color: #fff;
  letter-spacing: -.02em;
  line-height: 1.1;
}
.hero-stat__v .suffix { color: var(--sun-400); }
.hero-stat__k {
  font-size: var(--t-caption);
  color: rgba(255, 255, 255, .68);
  line-height: 1.3;
}

/* ---------------------------------------------------------------- controls */
.hero-controls {
  display: flex; align-items: center; gap: var(--sp-4);
  margin-top: var(--sp-5);
}
.hero-dots { display: flex; gap: 8px; }
.hero-dots button {
  position: relative;
  width: 26px; height: 3px;
  border-radius: 2px;
  background: var(--line-strong);
  transition: background-color var(--dur-3) var(--ease-both), width var(--dur-3) var(--ease-both);
}
.hero-dots button::after {
  content: '';
  position: absolute; left: -6px; right: -6px; top: 50%;
  transform: translateY(-50%); height: 44px;
}
.hero-dots button[aria-current="true"] { background: var(--brand); width: 44px; }

.hero-arrows { display: flex; gap: var(--sp-2); }
.hero-arrow {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  color: var(--text-soft);
  background: var(--surface);
  transition: all var(--dur-1) var(--ease-both);
}
.hero-arrow:hover { color: var(--brand); border-color: var(--brand); background: var(--brand-soft); }

.hero-count {
  font-family: var(--font-num);
  font-size: var(--t-label);
  color: var(--text-muted);
  letter-spacing: .04em;
}
.hero-count b { color: var(--text-strong); font-weight: var(--fw-bold); }

/* ---------------------------------------------------------------- foot row
   Slider controls under the text on the left, the data plate over the photo
   on the right — one row, aligned to the same baseline. */
.hero-foot {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--sp-6);
}

/* ---------------------------------------------------------------- desktop split */
@media (min-width: 1024px) {
  .hero { padding-bottom: 0; min-height: 40rem; display: flex; align-items: center; }

  /* The photograph leaves the flow and runs to the right edge of the window,
     dissolving into the page rather than stopping at a hard seam. */
  .hero-photo {
    position: absolute;
    top: 0; bottom: 0;
    inset-inline-start: 46%;
    inset-inline-end: 0;
    z-index: 1;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 21%);
    mask-image: linear-gradient(to right, transparent 0, #000 21%);
  }

  .hero-inner { width: 100%; }
  .hero-body {
    max-width: 34rem;
    padding-block: var(--sp-9) calc(var(--sp-12) + var(--sp-8));
  }

  .hero-foot {
    position: absolute;
    inset-inline: 0;
    bottom: var(--sp-9);
    z-index: 3;
  }
  .hero-controls { margin-top: 0; flex-shrink: 0; }
  .hero-stats { width: min(38rem, 45vw); flex-shrink: 0; }
}

@media (min-width: 1024px) and (max-width: 1280px) {
  .hero-photo { inset-inline-start: 51%; }
  .hero-body { max-width: 30rem; }
  .hero-stats { width: min(29rem, 43vw); }
  .hero-stat { padding: var(--sp-4) var(--sp-3); }
}

/* ---------------------------------------------------------------- stacked */
@media (max-width: 1023.98px) {
  .hero { display: flex; flex-direction: column; }
  .hero-inner { order: 1; }
  .hero-photo {
    order: 2;
    margin: var(--sp-8) var(--gutter) 0;
    height: clamp(14rem, 46vw, 22rem);
    border-radius: var(--r-lg);
    overflow: hidden;
    background: var(--surface-3);
  }
  .hero-foot { order: 3; margin-top: var(--sp-6); flex-wrap: wrap; }
  .hero-stats { width: 100%; }
  .hero-controls { margin-top: 0; }
}

@media (max-width: 640px) {
  .hero-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-stat:nth-child(2) { border-right: 0; }
  .hero-stat:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,.13); }
  .hero-fact { border-right: 0; margin-right: 0; padding-right: 0; width: 100%; }
  .hero-facts { gap: var(--sp-4); }
  .hero-arrows { display: none; }
}

/* ================================================================ STATS BAR
   The inline figure strip used on inner pages. One hairline grid, equal cells,
   numbers set in the tabular face so columns line up down the row. */
.stats-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.stats-bar .stat {
  background: var(--surface);
  padding: var(--sp-6) var(--sp-5);
  display: flex; flex-direction: column; gap: 4px;
  min-width: 0;
  transition: background-color var(--dur-2) var(--ease-both);
}
.stats-bar .stat:hover { background: var(--surface-2); }

/* ================================================================ SERVICE CARD */
.svc { display: flex; flex-direction: column; gap: var(--sp-3); height: 100%; }
.svc h3 { font-size: var(--t-h4); margin: 0; }
.svc .ico-box { margin-bottom: var(--sp-2); }
.svc p { color: var(--text-muted); font-size: var(--t-small); margin: 0; }
.svc-foot {
  margin-top: auto; padding-top: var(--sp-5);
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  border-top: 1px solid var(--line-soft);
}
.svc-note { font-size: var(--t-caption); color: var(--text-faint); }
.svc-go { color: var(--brand); display: inline-flex; transition: transform var(--dur-2) var(--ease-out); }
.card--lift:hover .svc-go { transform: translateX(3px); }

/* ================================================================ PROJECT CARD */
.proj { display: block; height: 100%; }
.proj .frame { border-radius: var(--r-lg) var(--r-lg) 0 0; }
.proj-body { padding: var(--sp-5); }
.proj-meta { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.proj h3 { font-size: var(--t-h4); margin-bottom: 6px; }
.proj-loc { display: flex; align-items: center; gap: 6px; color: var(--text-muted); font-size: var(--t-small); }
.proj .badge--capacity { position: absolute; top: var(--sp-3); left: var(--sp-3); z-index: 2; }

/* Every project sits in an identical cell. Equal rows plus a fixed image
   ratio mean the titles and the meta rows line up straight across. */
.portfolio {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: var(--sp-6);
}
.portfolio > * { min-width: 0; }
.proj .frame { aspect-ratio: 4 / 3; }
.proj-body { display: flex; flex-direction: column; gap: var(--sp-2); }
@media (max-width: 1080px) { .portfolio { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .portfolio { grid-template-columns: minmax(0, 1fr); } }

/* List view reuses the same card. */
#project-grid[data-view="list"] { grid-template-columns: 1fr; }
#project-grid[data-view="list"] .proj { display: grid; grid-template-columns: 300px 1fr; }
#project-grid[data-view="list"] .proj--feature { grid-column: span 1; }
#project-grid[data-view="list"] .proj .frame { aspect-ratio: 16/10; height: 100%; border-radius: var(--r-lg) 0 0 var(--r-lg); }
@media (max-width: 720px) {
  #project-grid[data-view="list"] .proj { grid-template-columns: 1fr; }
  #project-grid[data-view="list"] .proj .frame { border-radius: var(--r-lg) var(--r-lg) 0 0; }
}

/* ================================================================ CLIENT STRIP */
/* The client strip is a divider, not a section: tight padding, hairlines top
   and bottom, so it separates the work above from the work below. */
.client-strip {
  padding-block: var(--sp-7);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  background: var(--surface);
}
.client-strip__label {
  text-align: center;
  font-size: var(--t-caption);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  font-weight: var(--fw-semi);
  color: var(--text-faint);
  margin-bottom: var(--sp-5);
}

.marquee {
  overflow: hidden; position: relative;
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.marquee-track { display: flex; gap: var(--sp-11); width: max-content; animation: marquee 52s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%) } }
.marquee-item {
  display: flex; align-items: center; justify-content: center;
  height: 52px; min-width: 140px;
  color: var(--text-muted);
  font-family: var(--font-display);
  font-size: var(--t-body);
  font-weight: var(--fw-semi);
  white-space: nowrap;
  transition: color var(--dur-2) var(--ease-both);
}
.marquee-item:hover { color: var(--text-strong); }
.marquee-item img { max-height: 38px; width: auto; object-fit: contain; filter: grayscale(1); opacity: .62; transition: all var(--dur-2) var(--ease-both); }
.marquee-item:hover img { filter: none; opacity: 1; }

/* ================================================================ FLEET SCROLLER */
.hscroll {
  display: flex; gap: var(--sp-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: var(--sp-4);
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  scrollbar-width: none;
}
.hscroll::-webkit-scrollbar { display: none; }
.hscroll > * { scroll-snap-align: start; flex: 0 0 clamp(228px, 25vw, 276px); }

.fleet-card { display: flex; flex-direction: column; gap: var(--sp-3); height: 100%; }
.fleet-qty {
  font-family: var(--font-num);
  font-size: 2.35rem; font-weight: var(--fw-extra);
  line-height: 1; letter-spacing: -.035em;
  color: var(--brand);
  font-variant-numeric: tabular-nums;
}
.fleet-card h4 { font-size: var(--t-body); margin: 0; }
.fleet-card p { font-size: var(--t-small); color: var(--text-muted); margin: 0; }

/* ================================================================ TIMELINE */
.timeline { position: relative; padding-left: 34px; }
.timeline::before {
  content: '';
  position: absolute; left: 8px; top: 8px; bottom: 8px;
  width: 1px;
  background: linear-gradient(to bottom, var(--brand), var(--line) 18%, var(--line) 88%, transparent);
}
.tl-item { position: relative; padding-bottom: var(--sp-9); }
.tl-item:last-child { padding-bottom: 0; }
.tl-item::before {
  content: '';
  position: absolute; left: -30px; top: 7px;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--bg); border: 2px solid var(--brand);
}
.tl-year {
  font-family: var(--font-num);
  font-size: var(--t-label); font-weight: var(--fw-bold);
  letter-spacing: .06em;
  color: var(--brand); margin-bottom: 4px;
}
.tl-item h3 { font-size: var(--t-h4); margin-bottom: 6px; }
.tl-item p { color: var(--text-muted); margin: 0; max-width: 62ch; font-size: var(--t-small); }

/* ================================================================ FOUNDER QUOTE */
.quote-block { position: relative; }
.quote-block blockquote {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.1vw, 1.95rem);
  font-weight: var(--fw-semi);
  line-height: 1.34;
  letter-spacing: -.02em;
  color: var(--text-strong);
  margin: 0 0 var(--sp-6);
  max-width: 26ch;
  border: 0; padding: 0;
}
.quote-block blockquote::before {
  content: '\201C';
  display: block;
  font-size: 3.4rem; line-height: .7;
  color: var(--brand);
  margin-bottom: var(--sp-3);
}
.quote-attr { display: flex; align-items: center; gap: var(--sp-3); }
.quote-attr img { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; }
.quote-attr .n { font-weight: var(--fw-semi); color: var(--text-strong); }
.quote-attr .d { font-size: var(--t-small); color: var(--text-muted); }

/* ================================================================ WHY LIST */
.why-item { display: flex; gap: var(--sp-4); align-items: flex-start; }
.why-num {
  font-family: var(--font-num);
  font-size: var(--t-label); font-weight: var(--fw-bold);
  color: var(--brand);
  padding-top: 3px; min-width: 26px;
  font-variant-numeric: tabular-nums;
}
.why-item h4 { font-size: var(--t-body); margin-bottom: 4px; }
.why-item p { color: var(--text-muted); font-size: var(--t-small); margin: 0; }

/* ================================================================ CTA BAND */
.cta-band {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-xl);
  background: var(--deep-2);
  color: #fff;
  padding: clamp(36px, 5vw, 72px);
  isolation: isolate;
}
[data-theme="dark"] .cta-band { background: var(--surface-2); border: 1px solid var(--line); }

/* Panel geometry, drawn not decorated. */
.cta-band::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: linear-gradient(115deg, transparent 42%, #000 100%);
  -webkit-mask-image: linear-gradient(115deg, transparent 42%, #000 100%);
}
.cta-band h2 { max-width: 20ch; color: #fff; }
.cta-band p { color: rgba(255,255,255,.72); max-width: 52ch; font-size: var(--t-body-lg); }
[data-theme="dark"] .cta-band h2 { color: var(--text-strong); }
[data-theme="dark"] .cta-band p { color: var(--text-muted); }
.cta-band__inner {
  display: grid;
  grid-template-columns: 1.4fr minmax(258px, .8fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
@media (max-width: 860px) { .cta-band__inner { grid-template-columns: 1fr; } }

/* ================================================================ PAGE BANNER */
.page-banner {
  position: relative;
  padding-top: calc(var(--header-h) + clamp(44px, 6vw, 88px));
  padding-bottom: clamp(44px, 6vw, 88px);
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background: var(--bg-subtle);
  isolation: isolate;
}
.page-banner h1 { margin-bottom: var(--sp-3); }
.page-banner p { color: var(--text-muted); max-width: 62ch; font-size: var(--t-body-lg); margin: 0; }
.page-banner .crumbs { margin-bottom: var(--sp-4); }

/* Photographic variant runs white on a dark scrim.
   The :has() rules are the safety net: three pages build this banner by hand
   rather than through page_banner(), and two of them shipped without the
   modifier class, which left dark type sitting on a dark photograph. Keying
   off the presence of the image itself means the treatment cannot be
   forgotten again. */
.page-banner--photo,
.page-banner:has(.page-banner__img) { border-bottom: 0; background: var(--deep); }
.page-banner__img { position: absolute; inset: 0; z-index: -2; }
.page-banner__img img { width: 100%; height: 100%; object-fit: cover; object-position: var(--focal, center); }
.page-banner__img::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(4,12,26,.92) 8%, rgba(4,12,26,.62) 48%, rgba(4,12,26,.44) 100%);
}
.page-banner:has(.page-banner__img) h1,
.page-banner--photo h1 { color: #fff; }
.page-banner:has(.page-banner__img) p,
.page-banner--photo p { color: rgba(255,255,255,.78); }
.page-banner:has(.page-banner__img) .crumbs,
.page-banner--photo .crumbs { color: rgba(255,255,255,.84); }
.page-banner:has(.page-banner__img) .crumbs a,
.page-banner--photo .crumbs a { color: rgba(255,255,255,.84); }
.page-banner--photo .crumbs a:hover { color: #fff; }
.page-banner:has(.page-banner__img) .crumbs [aria-current],
.page-banner--photo .crumbs [aria-current] { color: #fff; }
.page-banner--photo .crumbs li + li::before { color: rgba(255,255,255,.55); }

/* Badges in the strip sit on the photograph too. */
.page-banner:has(.page-banner__img) .badge,
.page-banner--photo .badge {
  background: rgba(255,255,255,.13);
  border-color: rgba(255,255,255,.26);
  color: #FFFFFF;
}
.page-banner:has(.page-banner__img) .badge--capacity,
.page-banner--photo .badge--capacity { background: var(--sun-500); color: var(--ink-950); border-color: transparent; }

/* ================================================================ GALLERY */
.masonry { columns: 3 282px; column-gap: var(--sp-4); }
.masonry > * { break-inside: avoid; margin-bottom: var(--sp-4); display: block; }

.lightbox {
  position: fixed; inset: 0; z-index: var(--z-modal);
  display: none; place-items: center;
  background: rgba(4, 12, 8, .95);
  backdrop-filter: blur(6px);
  padding: var(--sp-6);
}
.lightbox.is-open { display: grid; }
.lightbox img { max-width: min(1180px, 94vw); max-height: 84vh; object-fit: contain; border-radius: var(--r-md); }
.lightbox-cap { text-align: center; color: rgba(255,255,255,.72); font-size: var(--t-small); margin-top: var(--sp-4); }
.lightbox .icon-btn { color: #fff; border-color: rgba(255,255,255,.28); }
.lightbox .icon-btn:hover { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.5); color: #fff; }
.lightbox-close { position: absolute; top: var(--sp-5); right: var(--sp-5); }
.lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); }
.lightbox-nav.prev { left: var(--sp-5); }
.lightbox-nav.next { right: var(--sp-5); }

/* ================================================================ FILTER BAR */
.filter-bar {
  display: flex; flex-wrap: wrap; gap: var(--sp-3);
  align-items: center;
  padding: var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  margin-bottom: var(--sp-7);
}
.filter-bar .select,
.filter-bar .input { width: auto; min-width: 152px; flex: 0 1 auto; }
.view-toggle { display: flex; gap: 2px; margin-left: auto; padding: 3px; background: var(--surface-3); border-radius: var(--r-sm); }
.view-toggle button {
  width: 36px; height: 34px;
  display: grid; place-items: center;
  border-radius: var(--r-xs);
  color: var(--text-muted);
  transition: all var(--dur-1) var(--ease-both);
}
.view-toggle button.is-active { background: var(--surface); color: var(--brand); box-shadow: var(--sh-xs); }

/* ================================================================ FOOTER */
.site-footer {
  position: relative;
  background: var(--deep);
  color: rgba(255,255,255,.72);
  padding-top: var(--sp-12);
  margin-top: var(--sp-11);
}
[data-theme="dark"] .site-footer { background: var(--bg-sunken); border-top: 1px solid var(--line); }

.footer-grid {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr 1.35fr;
  gap: var(--sp-9) var(--sp-7);
  padding-bottom: var(--sp-10);
}
@media (max-width: 980px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }

.footer-col h4 {
  font-size: var(--t-caption);
  font-weight: var(--fw-semi);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: rgba(255,255,255,.60);
  margin-bottom: var(--sp-4);
}
.footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.footer-col li { margin: 0; }
.footer-col a { color: rgba(255,255,255,.72); font-size: var(--t-small); }
.footer-col a:hover { color: var(--sun-400); }
.footer-about { max-width: 42ch; color: rgba(255,255,255,.70); font-size: var(--t-small); }
.footer-brand img { height: 42px; width: auto; margin-bottom: var(--sp-5); }

.footer-contact li { display: flex; gap: 11px; align-items: flex-start; color: rgba(255,255,255,.72); font-size: var(--t-small); }
.footer-contact svg { flex-shrink: 0; margin-top: 3px; color: var(--sun-400); }

.footer-creds { display: flex; flex-wrap: wrap; gap: var(--sp-2); padding-bottom: var(--sp-6); }
.site-footer .footer-creds .badge {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.13);
  color: rgba(255,255,255,.82);
  font-size: 11px;
}
.site-footer .footer-creds .badge--accent { background: rgba(30,149,0,.16); border-color: rgba(30,149,0,.3); color: var(--green-300); }

.footer-legal {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--sp-4);
  padding-block: var(--sp-5);
  border-top: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.62);
  font-size: var(--t-small);
}
.footer-legal nav { display: flex; flex-wrap: wrap; gap: var(--sp-5); }
.footer-legal a:hover { color: var(--sun-400); }

.socials { display: flex; gap: var(--sp-2); margin-top: var(--sp-5); }
.socials a {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: var(--r-sm);
  color: rgba(255,255,255,.7);
  transition: all var(--dur-1) var(--ease-both);
}
.socials a:hover { color: #fff; background: var(--brand); border-color: var(--brand); }

/* ================================================================ FLOATING ACTIONS */
.floaters {
  position: fixed; right: var(--sp-5); bottom: var(--sp-5);
  z-index: var(--z-sticky);
  display: flex; flex-direction: column; gap: 10px;
}
.floaters a, .floaters button {
  width: 50px; height: 50px;
  display: grid; place-items: center;
  border-radius: var(--r-md);
  box-shadow: var(--sh-lg);
  color: #fff;
  transition: transform var(--dur-1) var(--ease-both), box-shadow var(--dur-2) var(--ease-both);
}
.floaters a:hover, .floaters button:hover { transform: translateY(-2px); box-shadow: var(--sh-xl); }
.fl-wa   { background: #1FA855; }
.fl-call { background: var(--brand); }
.fl-top {
  background: var(--surface);
  color: var(--text-soft);
  border: 1px solid var(--line-strong);
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-2) var(--ease-both), transform var(--dur-1) var(--ease-both);
}
.fl-top.is-visible { opacity: 1; pointer-events: auto; }

@media (max-width: 560px) {
  .floaters { right: 12px; bottom: 12px; }
  .floaters a, .floaters button { width: 46px; height: 46px; }
}

/* ================================================================ MAP */
#map {
  height: clamp(420px, 62vh, 660px);
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  overflow: hidden;
  z-index: var(--z-base);
}
.leaflet-popup-content-wrapper { background: var(--surface); color: var(--text); border-radius: var(--r-md); }
.leaflet-popup-tip { background: var(--surface); }

/* ================================================================ PRELOADER */
.preloader {
  position: fixed; inset: 0; z-index: 999;
  display: grid; place-items: center;
  background: var(--bg);
  transition: opacity 460ms var(--ease-both), visibility 460ms;
}
.preloader.is-done { opacity: 0; visibility: hidden; }
.preloader svg { width: 68px; height: 68px; }
.preloader .pl-panel { opacity: 0; animation: pl-panel 900ms var(--ease-out) .2s forwards; }
.preloader .pl-struct { stroke-dasharray: 90; stroke-dashoffset: 90; animation: pl-draw 760ms var(--ease-out) forwards; }
.preloader .pl-struct:nth-child(2) { animation-delay: 80ms; }
.preloader .pl-struct:nth-child(3) { animation-delay: 160ms; }
.preloader .pl-struct:nth-child(4) { animation-delay: 240ms; }
@keyframes pl-draw  { to { stroke-dashoffset: 0 } }
@keyframes pl-panel { from { opacity: 0; transform: translateY(-6px) } to { opacity: 1; transform: none } }

/* ================================================================ TOUCH TARGETS
   Audited at 390px: hero dots were 3px, footer links 16px. These grow the
   hit area on touch and on narrow screens without changing the look. */
@media (pointer: coarse), (max-width: 640px) {
  .brand, .icon-btn, .lang-btn { min-width: 44px; min-height: 44px; }
  .footer-col a,
  .footer-contact a,
  .footer-legal a { display: inline-flex; align-items: center; min-height: 44px; }
  .footer-col ul { gap: 0; }
  .link-u { min-height: 44px; }
  .crumbs a { display: inline-flex; align-items: center; min-height: 40px; }
  .lang-opt { min-height: 46px; }
}

/* ================================================================ THEME SWAPS
   Both logo treatments ship in the markup and CSS picks one, so switching
   theme needs no JavaScript and there is no flash of the wrong artwork. */
.brand-logo--dark, .drawer-head .brand-logo--dark { display: none; }
[data-theme="dark"] .brand-logo--light { display: none; }
[data-theme="dark"] .brand-logo--dark  { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .brand-logo--light { display: none; }
  :root:not([data-theme]) .brand-logo--dark  { display: block; }
}

/* The toggle shows the theme you would switch TO, not the one you are in. */
.theme-ico-dark { display: none; }
[data-theme="dark"] .theme-ico-light { display: none; }
[data-theme="dark"] .theme-ico-dark  { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .theme-ico-light { display: none; }
  :root:not([data-theme]) .theme-ico-dark  { display: block; }
}

/* Preloader mark */
.preloader img { width: 68px; height: 68px; animation: pl-panel 900ms var(--ease-out) both; }

/* ================================================================ ABOUT MEDIA
   An offset pair with a figure sitting across the seam — an architectural
   composition rather than another grid of equal boxes. */
.about-media {
  position: relative;
  display: grid;
  grid-template-columns: 1.12fr .88fr;
  grid-template-rows: minmax(0, 1.9fr) minmax(0, 1fr);
  gap: var(--sp-4);
  min-height: 30rem;
  height: 100%;
}
/* Aspect ratios are dropped here: these frames are sized by the grid so the
   column fills to the same depth as the text beside it. */
.about-media .frame { aspect-ratio: auto; height: 100%; }
.about-media__a { grid-area: 1 / 1 / 3 / 2; margin: 0; }
.about-media__b { grid-area: 1 / 2 / 2 / 3; margin: 0; }
.about-media__stat {
  grid-area: 2 / 2 / 3 / 3;
  position: static;
  display: flex; flex-direction: column; justify-content: center;
  gap: 4px;
  padding: var(--sp-5);
  box-shadow: var(--sh-md);
  background: var(--surface);
}
@media (max-width: 620px) {
  .about-media { grid-template-columns: 1fr 1fr; grid-template-rows: 13rem auto; min-height: 0; gap: var(--sp-3); }
  .about-media__stat { padding: var(--sp-4); }
}

/* ================================================================ LOGO SIZING
   The mark is wide (2.6:1), so a 40px height left it visually tiny next to
   the navigation. Height is set from the header so the two stay in step. */
.brand img { height: 52px; }
.site-header.is-stuck .brand img { height: 42px; }
.drawer-head img:not(.icon-btn) { height: 44px; }
.footer-brand img { height: 66px; }

/* Over the hero photograph the light-artwork variant is the legible one,
   regardless of which colour theme the visitor is in. */

/* Arrows sit at the end of the text column. Pushing them to the page edge
   collides with the floating call buttons. */
.hero-controls { position: relative; }

/* ================================================================ HEADER SCRIM
   Over a photograph the navigation and the mark need separation from whatever
   happens to be behind them. A short top scrim does that without dimming the
   image the way a full overlay would. */
.hero::before {
  content: '';
  position: absolute; inset-inline: 0; top: 0;
  height: calc(var(--header-h) + 56px);
  background: linear-gradient(to bottom, rgba(4,12,26,.62) 0%, rgba(4,12,26,.28) 55%, transparent 100%);
  z-index: 1;
  pointer-events: none;
}
.hero-inner { z-index: 2; }

/* =====================================================================
   HANDSET
   Two goals. First, correctness: at 360px the burger was being pushed off
   the right edge, which left a phone with no way into the navigation at all.
   Second, feel: on a phone the primary actions belong under the thumb, not
   floating over the content, so the floating bubbles become a fixed bottom
   bar the way a native app would place them.
   ===================================================================== */

/* ---------------------------------------------------------------- header fit */
@media (max-width: 900px) {
  .site-header { height: 64px; }
  .site-header.is-stuck { height: 58px; }
  .site-header .wrap-wide { gap: var(--sp-2); padding-inline: 14px; }
  .brand img,
  .site-header.is-stuck .brand img { height: 34px; }

  /* The language control keeps its globe and code and drops the rest: the
     full native name is what was consuming the width the burger needed. */
  .lang-btn { padding: 8px 9px; gap: 5px; }
  .lang-btn .lang-name { display: none; }
  .lang-btn .chev { display: none; }
  .icon-btn { width: 40px; height: 40px; }
  .header-actions { gap: 6px; margin-inline-start: auto; }
  .burger { display: grid; }
}

@media (max-width: 380px) {
  .brand img,
  .site-header.is-stuck .brand img { height: 30px; }
  .lang-btn .lang-code { display: none; }
  .lang-btn { padding: 8px; }
}

/* ---------------------------------------------------------------- bottom bar */
.appbar { display: none; }

@media (max-width: 900px) {
  .appbar {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: var(--z-sticky);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: color-mix(in srgb, var(--surface) 94%, transparent);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    border-top: 1px solid var(--line);
    /* Clears the home indicator on a notched handset. */
    padding-bottom: env(safe-area-inset-bottom, 0px);
    box-shadow: 0 -6px 24px -12px rgba(7, 12, 22, .28);
  }
  .appbar a, .appbar button {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px;
    min-height: 58px;
    padding: 8px 4px 9px;
    color: var(--text-muted);
    font-size: 10.5px;
    font-weight: var(--fw-semi);
    letter-spacing: .01em;
    background: none;
    -webkit-tap-highlight-color: transparent;
  }
  .appbar a:active, .appbar button:active { background: var(--surface-3); }
  .appbar svg { color: currentColor; }
  .appbar .is-primary { color: var(--brand); }
  .appbar .is-primary svg { color: var(--brand); }

  /* The bar sits over the page, so the page ends above it. */
  body { padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px)); }

  /* Its job is now done by the bar. Only "back to top" survives, moved clear. */
  .floaters .fl-wa,
  .floaters .fl-call { display: none; }
  .floaters {
    right: 12px;
    bottom: calc(58px + 12px + env(safe-area-inset-bottom, 0px));
  }
}

/* ---------------------------------------------------------------- drawer */
@media (max-width: 900px) {
  /* Full-height sheet with targets sized for a thumb, not a cursor. */
  .drawer nav a {
    min-height: 54px;
    display: flex; align-items: center; justify-content: space-between;
    font-size: var(--t-body-lg);
    font-weight: var(--fw-semi);
  }
  .drawer { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + var(--sp-6)); }
}

/* ---------------------------------------------------------------- reading */
@media (max-width: 640px) {
  /* A display face set for a 1440px canvas is too tight on a 360px one. */
  .hero h1 { font-size: clamp(1.9rem, 8.4vw, 2.5rem); line-height: 1.08; }
  .page-banner h1 { font-size: clamp(1.75rem, 7.6vw, 2.25rem); }
  .section { padding-block: clamp(40px, 9vw, 64px); }
  .section--sm { padding-block: clamp(28px, 7vw, 44px); }

  /* Full-width controls read as app buttons and are easier to hit. */
  .hero-cta { display: grid; grid-template-columns: 1fr; gap: var(--sp-3); }
  .hero-cta .btn { width: 100%; }
  .section-head--split { gap: var(--sp-5); }
  .section-head--split > .btn { width: 100%; justify-content: center; }

  /* Media never sets its own width larger than the column it sits in. */
  img, video, canvas, svg.chart { max-width: 100%; height: auto; }
  .card { padding: var(--sp-5); }
  .cta-band { padding: var(--sp-7) var(--sp-5); border-radius: var(--r-lg); }
  .band { padding: var(--sp-6) var(--sp-5); }
  .band__lead { gap: var(--sp-4); }

  /* A table that has not been given the stacked treatment scrolls rather than
     squeezing its columns to nothing. One that has must not be given a floor
     width, or the stacked cards inherit it and push the page sideways. */
  .table-scroll { -webkit-overflow-scrolling: touch; }
  .table:not(.table--stack) { min-width: 34rem; }
}

@media (max-width: 420px) {
  .hero-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-grid { gap: var(--sp-7); }
  .masonry { columns: 1; }
}

/* ================================================================ FLEET ART
   The drawing sits flush in the head of the card, bled to its edges, so the
   ornamental band along the foot of the illustration meets the card's own
   padding and reads as part of the card rather than a pasted-in picture. */
.fleet-art {
  margin: calc(var(--sp-6) * -1) calc(var(--sp-6) * -1) var(--sp-1);
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  background: var(--surface-3);
}
.fleet-art img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--dur-5) var(--ease-out);
}
.card--lift:hover .fleet-art img { transform: scale(1.04); }
@media (max-width: 640px) {
  .fleet-art { margin: calc(var(--sp-5) * -1) calc(var(--sp-5) * -1) var(--sp-1); }
}