/* EDES site layout. Requires tokens.css + components.css. */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 56px; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-text);
  font-weight: var(--fw-text);
  font-size: var(--fs-body);
  line-height: var(--lh-text);
  letter-spacing: var(--tr-body);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: var(--ink); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.skip { position: absolute; left: -9999px; top: 8px; background: var(--paper); padding: 8px 12px; z-index: 50; }
.skip:focus { left: 8px; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Type helpers ---------- */
.serif { font-family: var(--font-display); font-weight: var(--fw-heading); }
.detail { font-size: var(--fs-detail); line-height: var(--lh-detail); }
.muted { color: var(--text-muted); }
.num { font-feature-settings: "tnum"; }

/* ---------- Nav (ref: oblikworks.com) ---------- */
.nav { position: sticky; top: 0; z-index: 20; background: var(--bg); }
.nav .grid { padding-block: 14px; align-items: baseline; font-size: var(--fs-detail); line-height: var(--lh-detail); }
.nav a { color: var(--ink); text-decoration: none; }
.nav a:hover { color: var(--muted); }
.nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.nav .logo { grid-column: 1 / 3; font-family: var(--font-display); font-size: var(--fs-lead); letter-spacing: var(--tr-heading); }
.nav .main, .nav .end { display: none; gap: 16px; }
.nav sup { font-size: var(--fs-micro); vertical-align: top; margin-left: 1px; color: var(--muted); }
.nav .grey { color: var(--muted); }
.nav .menu-btn { grid-column: 3 / -1; justify-self: end; font: inherit; background: none; border: 0; padding: 0; color: var(--ink); cursor: pointer; }
.nav .panel {
  grid-column: 1 / -1; display: none; flex-direction: column; gap: var(--s-3);
  padding-block: var(--s-8) var(--s-6);
  font-family: var(--font-display); font-weight: var(--fw-heading);
  font-size: var(--fs-h2); letter-spacing: var(--tr-heading); line-height: 1.1;
}
.nav .panel .grey { font-family: var(--font-text); font-size: var(--fs-detail); letter-spacing: 0; margin-top: var(--s-4); }
.nav.open .panel { display: flex; }
/* Full link bar from 1100px; Menu button below that (tablet included) */
@media (min-width: 1100px) {
  .nav .menu-btn, .nav .panel, .nav.open .panel { display: none; }
  .nav .main, .nav .end { display: flex; }
  .nav .end { justify-content: flex-end; }
  .nav .logo { grid-column: 1 / 4; }
  .nav .main { grid-column: 4 / 10; gap: 24px; justify-content: center; }
  .nav .end { grid-column: 10 / -1; }
}

/* ---------- Hero ---------- */
.hero { padding-block: var(--s-10) var(--s-9); }
.hero h1 {
  grid-column: 1 / -1; max-width: 15ch;
  font-family: var(--font-display); font-weight: var(--fw-heading);
  font-size: var(--fs-hero); line-height: var(--lh-display); letter-spacing: var(--tr-display);
}
.hero .sub { grid-column: 1 / -1; max-width: 38ch; margin-top: var(--s-6); font-size: var(--fs-lead); font-weight: var(--fw-lead); }
.hero .actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-7); }
@media (min-width: 1100px) { .hero .sub, .hero .actions { grid-column: 4 / -1; } }

/* ---------- Photos ---------- */
.photo { grid-column: 1 / -1; position: relative; background: var(--line); overflow: hidden; }
.photo img { width: 100%; height: 100%; object-fit: cover; }
.photo figcaption { margin-top: var(--s-2); font-size: var(--fs-micro); line-height: var(--lh-detail); color: var(--muted); }
.ratio-wide { aspect-ratio: 16 / 9; }
.ratio-photo { aspect-ratio: 4 / 3; }
@media (min-width: 1100px) { .ratio-wide { aspect-ratio: 21 / 9; } }
/* Placeholder for photography still to be shot */
.ph { display: flex; align-items: flex-end; padding: var(--s-3); background: var(--line); color: var(--muted); font-size: var(--fs-micro); line-height: var(--lh-detail); }

/* ---------- Facts: bento grid ---------- */
.facts { padding-top: var(--s-9); }
.bento {
  grid-column: 1 / -1; list-style: none; padding: 0;
  display: grid; grid-template-columns: subgrid; grid-auto-flow: row dense;
  row-gap: var(--grid-gutter);
}
.card {
  grid-column: 1 / -1;
  position: relative;
  display: flex; flex-direction: column; gap: var(--s-5);
  padding: var(--s-6);
  background: var(--raised);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-raised);
}
.card .label { font-size: var(--fs-detail); line-height: var(--lh-detail); color: var(--muted); }
.card .value { font-size: var(--fs-lead); line-height: 1.4; max-width: 34ch; }
.card .fig {
  display: block; font-family: var(--font-figure); font-weight: var(--fw-text);
  letter-spacing: var(--tr-figure); line-height: 1; font-feature-settings: "tnum";
  font-size: clamp(2.25rem, 1.4rem + 2.4vw, 3.5rem);
}
.card .fig { white-space: nowrap; }
.card .note { font-size: var(--fs-detail); color: var(--muted); margin-top: var(--s-2); }
.card .bottom { margin-top: auto; }

/* Icon well: recessed square, concentric with the card corner */
.well {
  width: 44px; height: 44px; display: grid; place-items: center;
  border-radius: var(--radius-inner); background: var(--well); box-shadow: var(--shadow-well);
}
.well .icon { width: 22px; height: 22px; }

/* Capacity: hero card with a range bar */
.card.cap .fig { font-size: clamp(2.75rem, 1.2rem + 5vw, 5.5rem); }
.range { margin-top: var(--s-7); }
.range .track {
  position: relative; height: 12px; border-radius: 999px;
  background: var(--well); box-shadow: var(--shadow-well);
}
.range .fill {
  position: absolute; top: 2px; bottom: 2px; left: 40%; right: 2px;
  border-radius: 999px; background: var(--ink);
}
.range .ticks { display: flex; justify-content: space-between; margin-top: var(--s-2); font-size: var(--fs-micro); color: var(--muted); font-feature-settings: "tnum"; }

/* Production model: stage chips */
.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); list-style: none; padding: 0; }
.chips li {
  padding: 6px 10px; font-size: var(--fs-detail); line-height: 1.2;
  border-radius: var(--radius-chip); background: rgba(255,255,255,.55); box-shadow: var(--shadow-chip);
}

.card.iso > div, .card.ship > div { display: grid; gap: var(--s-1); margin-top: auto; }
/* Placement: 4 cols (phone) */
.card.brands { grid-column: 1 / 3; }
.card.since  { grid-column: 3 / -1; }
@media (max-width: 719px) {
  .card.brands, .card.since { padding: var(--s-5); }
  .card.brands .fig, .card.since .fig { font-size: 2.25rem; }
}
/* 6 cols (tablet) */
@media (min-width: 720px) {
  .card.cap    { grid-column: 1 / -1; }
  .card.brands { grid-column: 1 / 4; }
  .card.since  { grid-column: 4 / -1; }
  .card.model  { grid-column: 1 / -1; }
  .card.team   { grid-column: 1 / 4; }
  .card.iso    { grid-column: 4 / -1; }
  .card.ship   { grid-column: 1 / -1; }
}
/* 12 cols (desktop): tall capacity card left, everything else packs right */
@media (min-width: 1100px) {
  .bento { grid-template-rows: minmax(220px, auto) minmax(220px, auto) auto; }
  .card.cap    { grid-column: 1 / 7;  grid-row: 1 / 3; padding: var(--s-8); }
  .card.brands { grid-column: 7 / 10; grid-row: 1; }
  .card.since  { grid-column: 10 / -1; grid-row: 1; }
  .card.model  { grid-column: 7 / -1; grid-row: 2; }
  .card.team   { grid-column: 1 / 5;  grid-row: 3; }
  .card.iso    { grid-column: 5 / 9;  grid-row: 3; }
  .card.ship   { grid-column: 9 / -1; grid-row: 3; }
}

/* ---------- Section: rail + field ---------- */
.section { padding-block: var(--s-10); }
.section > .grid { border-top: var(--rule-w) solid var(--rule-strong); padding-top: var(--s-6); row-gap: var(--s-6); }
.section .rail h2 {
  font-family: var(--font-display); font-weight: var(--fw-heading);
  font-size: var(--fs-h3); line-height: var(--lh-heading); letter-spacing: var(--tr-heading);
}
.lede { max-width: var(--measure); font-size: var(--fs-lead); font-weight: var(--fw-lead); }
.more { display: inline-block; margin-top: var(--s-6); font-size: var(--fs-detail); text-underline-offset: 3px; }

/* Services: plain rows, not cards */
.services { display: grid; gap: var(--s-7); margin-top: var(--s-8); }
@media (min-width: 720px) { .services { grid-template-columns: repeat(3, 1fr); gap: var(--grid-gutter); } }
.services article { border-top: 1px solid var(--rule-strong); padding-top: var(--s-4); }
.services h3 { font-family: var(--font-display); font-weight: var(--fw-heading); font-size: var(--fs-h4); line-height: 1.2; letter-spacing: var(--tr-heading); margin-bottom: var(--s-3); }
.services p { color: var(--text-muted); max-width: 36ch; }

/* Process: sticky counter (option E). A real sequence, so numbered. */
.process { display: grid; gap: var(--s-6); }
.process .counter { display: none; }
.process ol { list-style: none; padding: 0; counter-reset: step; }
.process li {
  counter-increment: step;
  display: grid; grid-template-columns: 3rem 1fr; column-gap: var(--s-4); align-content: start;
  padding-block: var(--s-6); border-top: 1px solid var(--rule);
}
.process li::before {
  content: counter(step); grid-row: span 2;
  font-family: var(--font-figure); font-size: var(--fs-h4); letter-spacing: var(--tr-figure); line-height: 1.2; font-feature-settings: "tnum";
}
.process li:first-child { border-top: 0; padding-top: 0; }
.process h3 { font-family: var(--font-display); font-weight: var(--fw-heading); font-size: var(--fs-h3); line-height: var(--lh-heading); letter-spacing: var(--tr-heading); }
.process li p { grid-column: 2; margin-top: var(--s-2); max-width: 46ch; color: var(--muted); }
@media (min-width: 1100px) {
  .process { grid-template-columns: 1fr 2fr; gap: var(--grid-gutter); }
  .process .counter { display: block; position: sticky; top: 96px; align-self: start; }
  .process .counter .n { font-family: var(--font-figure); font-size: var(--fs-fig); letter-spacing: var(--tr-figure); line-height: 1; font-feature-settings: "tnum"; }
  .process .counter .of { margin-top: var(--s-2); font-size: var(--fs-detail); color: var(--muted); }
  .process li { grid-template-columns: 1fr; min-height: 40vh; }
  .process li:last-child { min-height: 0; }
  .process li::before { display: none; }
  .process li p { grid-column: 1; }
}

/* About */
.about { display: grid; gap: var(--s-7); }
@media (min-width: 1100px) { .about { grid-template-columns: 5fr 4fr; gap: var(--grid-gutter); align-items: start; } }
.about blockquote { margin-top: var(--s-7); padding-left: var(--s-4); border-left: 1px solid var(--rule-strong); font-family: var(--font-display); font-weight: var(--fw-heading); font-size: var(--fs-h4); line-height: 1.3; letter-spacing: var(--tr-heading); max-width: 30ch; }

/* ---------- Dark band ---------- */
.band { background: var(--ink); color: var(--paper); }
.band > .grid { border-top: 0; padding-top: 0; }
.band .rail h2 { color: var(--paper); }
.band .quote { font-family: var(--font-display); font-weight: var(--fw-heading); font-size: var(--fs-h2); line-height: 1.2; letter-spacing: var(--tr-heading); max-width: 26ch; }
.band .who { margin-top: var(--s-5); color: var(--silver); font-size: var(--fs-detail); }
.band .cta { margin-top: var(--s-10); display: grid; gap: var(--s-6); }
@media (min-width: 720px) { .band .cta { grid-template-columns: 1fr auto; align-items: end; } }
.band .cta p { color: var(--silver); max-width: 40ch; }
.band .cta p strong { display: block; color: var(--paper); font-family: var(--font-display); font-weight: var(--fw-heading); font-size: var(--fs-h3); letter-spacing: var(--tr-heading); line-height: 1.15; margin-bottom: var(--s-3); }
.band a:not(.btn) { color: var(--paper); }

/* ---------- Footer ---------- */
.footer { padding-block: var(--s-9) var(--s-7); font-size: var(--fs-detail); line-height: 1.5; }
.footer .grid { row-gap: var(--s-7); }
.footer .col { grid-column: span 2; }
.footer .brand { grid-column: 1 / -1; font-family: var(--font-display); font-size: var(--fs-h3); letter-spacing: var(--tr-heading); line-height: 1; }
.footer h2 { font-size: var(--fs-micro); font-weight: var(--fw-text); color: var(--muted); margin-bottom: var(--s-2); }
.footer a { text-decoration: none; }
.footer a:hover { text-decoration: underline; text-underline-offset: 3px; }
.footer ul { list-style: none; padding: 0; }
.footer .legal { grid-column: 1 / -1; color: var(--muted); font-size: var(--fs-micro); border-top: 1px solid var(--rule); padding-top: var(--s-4); }
@media (min-width: 720px) { .footer .brand { grid-column: 1 / 3; } .footer .col { grid-column: span 1; } .footer .col.wide { grid-column: span 2; } }
@media (min-width: 1100px) { .footer .brand { grid-column: 1 / 4; } .footer .col { grid-column: span 2; } .footer .col.wide { grid-column: span 3; } }
.about .photo { grid-column: auto; }

/* ---------- Full-bleed hero (home) ---------- */
.hero-full { position: relative; min-height: 100svh; display: grid; align-items: end; color: var(--paper); background: var(--ink); }
.hero-full .bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero-full .bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.6s ease; }
.hero-full .bg img.on { opacity: 1; z-index: 1; }
.hero-full .bg img.prev { opacity: 1; }
.hero-full .bg::after { z-index: 2; }
.hero-full .bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgba(0,0,0,.55) 0, rgba(0,0,0,0) 140px),
    linear-gradient(to top, rgba(0,0,0,.85) 0%, rgba(0,0,0,.6) 55%, rgba(0,0,0,.45) 100%);
}
.hero-full .grid { position: relative; width: 100%; padding-block: var(--s-11) var(--s-9); row-gap: 0; }
.hero-full h1 {
  grid-column: 1 / -1; max-width: 16ch;
  font-family: var(--font-display); font-weight: var(--fw-heading);
  font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--tr-display);
}
.hero-full .sub { grid-column: 1 / -1; max-width: 46ch; margin-top: var(--s-6); font-size: var(--fs-lead); font-weight: var(--fw-lead); color: rgba(255,255,255,.86); }
.hero-full .actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-7); }
@media (min-width: 1100px) {
  .hero-full h1 { grid-column: 1 / 10; }
  .hero-full .sub { grid-column: 1 / 7; }
}

/* Nav over the hero: white until the hero scrolls away */
.home .nav { position: fixed; left: 0; right: 0; background: transparent; transition: background-color .2s ease; }
.home .nav:not(.solid):not(.open) a,
.home .nav:not(.solid):not(.open) .menu-btn { color: var(--paper); }
.home .nav:not(.solid):not(.open) .grey,
.home .nav:not(.solid):not(.open) sup { color: rgba(255,255,255,.7); }
.home .nav.solid, .home .nav.open { background: var(--bg); }
.home .nav.open { bottom: 0; overflow-y: auto; }

/* Ghost button for photos (ref: baseline.agency ghost) */
.btn-ghost { --btn-bg: rgba(255,255,255,.18); --btn-fg: var(--paper); --btn-bg2: var(--paper); --btn-fg2: var(--ink); }
.btn-ghost .base { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }

/* Icons in content */
.services .icon-lg { display: block; margin-bottom: var(--s-5); }
.footer li, .footer p.ic { display: flex; gap: var(--s-2); align-items: flex-start; }
.footer .icon { margin-top: 2px; color: var(--muted); }

/* ---------- Logo marquee (hero) ---------- */
.logos { grid-column: 1 / -1; margin-top: var(--s-9); }
.logos .logos-label { font-size: var(--fs-micro); line-height: var(--lh-detail); color: rgba(255,255,255,.7); margin-bottom: var(--s-4); }
.marquee {
  display: flex; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.marquee .track {
  display: flex; align-items: center; flex: none;
  gap: var(--s-10); padding-right: var(--s-10);
  list-style: none; margin: 0; padding-left: 0;
  animation: marquee 60s linear infinite;
}
.marquee:hover .track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-100%); } }
/* Each logo sits in a fixed-height slot so real SVG logos can be dropped in */
.logo-slot { height: 48px; display: flex; align-items: center; flex: none; color: rgba(255,255,255,.88); }
.logo-slot img { height: var(--h, 24px); width: auto; filter: brightness(0) invert(1); opacity: .88; }
.logo-slot .wordmark { font-size: var(--fs-h4); font-weight: var(--fw-strong); letter-spacing: -0.01em; white-space: nowrap; }
.logo-slot .wordmark small { font-size: var(--fs-detail); font-weight: var(--fw-text); color: rgba(255,255,255,.6); margin-left: var(--s-2); }
.logo-slot.ph {
  width: 128px; justify-content: center; padding: 0;
  border: 1px dashed rgba(255,255,255,.35); border-radius: var(--radius-chip);
  background: none; color: rgba(255,255,255,.5); font-size: var(--fs-micro);
}
@media (prefers-reduced-motion: reduce) {
  .marquee { -webkit-mask-image: none; mask-image: none; }
  .marquee .track { animation: none; flex-wrap: wrap; gap: var(--s-5) var(--s-8); padding-right: 0; flex: 1; }
  .marquee .track[aria-hidden="true"] { display: none; }
}

/* ---------- Inner page header ---------- */
.page-head { padding-block: var(--s-10) var(--s-8); }
.page-head h1 {
  grid-column: 1 / -1; max-width: 16ch;
  font-family: var(--font-display); font-weight: var(--fw-heading);
  font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--tr-display);
}
.page-head .sub { grid-column: 1 / -1; max-width: 46ch; margin-top: var(--s-6); font-size: var(--fs-lead); font-weight: var(--fw-lead); }
/* Sub and actions sit left, under the heading */

/* Long-form text in the field column */
.prose { max-width: var(--measure); }
.prose p + p { margin-top: var(--s-4); }
.prose .lede + p { margin-top: var(--s-6); }

/* ---------- Stat cards (4 up) ---------- */
.stats { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; row-gap: var(--grid-gutter); list-style: none; padding: 0; }
.stats .card { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto 1fr; column-gap: var(--s-3); row-gap: var(--s-7); align-items: center; padding: var(--s-5); }
.stats .card .num { grid-column: 1 / -1; align-self: end; }
.stats .card .fig { font-size: clamp(1.75rem, 1.2rem + 1.4vw, 2.5rem); }
.stats .card .note { display: block; margin-top: var(--s-1); }
.stats .card:nth-child(odd)  { grid-column: 1 / 3; }
.stats .card:nth-child(even) { grid-column: 3 / -1; }
@media (max-width: 719px) {
  .stats .card { grid-template-columns: 1fr; row-gap: var(--s-3); }
  .stats .card .num { margin-top: var(--s-3); }
  .stats .card .label { min-height: 2.8em; display: flex; align-items: flex-end; }
  .stats .card .note { min-height: 2.8em; }
}
@media (min-width: 720px) {
  .stats .card:nth-child(odd)  { grid-column: 1 / 4; }
  .stats .card:nth-child(even) { grid-column: 4 / -1; }
}
@media (min-width: 1100px) {
  .stats .card:nth-child(n) { grid-column: span 3; }
}

/* ---------- Values (2 x 2) ---------- */
.values { display: grid; gap: var(--s-8) var(--grid-gutter); }
@media (min-width: 720px) { .values { grid-template-columns: 1fr 1fr; } }
.values article { border-top: 1px solid var(--rule-strong); padding-top: var(--s-4); }
.values h3 { font-family: var(--font-display); font-weight: var(--fw-heading); font-size: var(--fs-h4); line-height: 1.2; letter-spacing: var(--tr-heading); margin-bottom: var(--s-3); }
.values p { color: var(--muted); max-width: 40ch; }

/* ---------- Motto band ---------- */
.motto { font-family: var(--font-display); font-weight: var(--fw-heading); font-size: var(--fs-h1); line-height: 1.1; letter-spacing: var(--tr-display); max-width: 20ch; }
.motto-note { margin-top: var(--s-6); color: var(--silver); max-width: 46ch; }

/* ---------- Closing call to action ---------- */
.cta-block .actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-7); }

/* ---------- Spec sheet (label | value rows) ---------- */
.spec { display: grid; grid-template-columns: 1fr; }
.spec dt, .spec dd { padding-block: var(--s-4); }
.spec dt { color: var(--muted); font-size: var(--fs-detail); line-height: var(--lh-detail); padding-bottom: 0; border-top: 1px solid var(--rule); }
.spec dd { padding-top: var(--s-2); }
.spec dd .tbc { color: var(--muted); }
@media (min-width: 720px) {
  .spec { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); column-gap: var(--grid-gutter); }
  .spec dt, .spec dd { border-top: 1px solid var(--rule); padding-block: var(--s-4); }
  .spec dt { padding-top: calc(var(--s-4) + 3px); }
}

/* ---------- Sector cards (uniforms page) ---------- */
.sectors-grid { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; row-gap: var(--grid-gutter); list-style: none; padding: 0; }
.sectors-grid .card { grid-column: span 2; gap: var(--s-3); padding: var(--s-5); }
.sectors-grid h3 { font-family: var(--font-display); font-weight: var(--fw-heading); font-size: var(--fs-h4); line-height: 1.2; letter-spacing: var(--tr-heading); }
.sectors-grid p { color: var(--muted); font-size: var(--fs-detail); line-height: 1.5; }
@media (max-width: 479px) { .sectors-grid .card { grid-column: 1 / -1; } }
@media (min-width: 720px) { .sectors-grid .card { grid-column: span 3; } }
@media (min-width: 1100px) { .sectors-grid .card { grid-column: span 3; min-height: 168px; } }

/* Two-column feature list */
.feature-list { list-style: none; padding: 0; display: grid; gap: 0 var(--grid-gutter); }
@media (min-width: 720px) { .feature-list { grid-template-columns: 1fr 1fr; } }
.feature-list li { display: flex; gap: var(--s-3); align-items: baseline; padding-block: var(--s-3); border-top: 1px solid var(--rule); }
.feature-list li::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--ink); transform: translateY(-2px); }

/* ---------- Contact page ---------- */
.contact-layout { grid-column: 1 / -1; display: grid; gap: var(--s-9); }
@media (min-width: 1100px) { .contact-layout { grid-template-columns: subgrid; } .contact-layout .details { grid-column: 1 / 4; } .contact-layout .form-card { grid-column: 4 / -1; } }
.form-card { background: var(--raised); box-shadow: var(--shadow-raised); border-radius: var(--radius-card); padding: var(--s-6); }
@media (min-width: 720px) { .form-card { padding: var(--s-8); } }
.details { display: grid; gap: var(--s-7); align-content: start; }
.details h2 { font-size: var(--fs-micro); font-weight: var(--fw-text); color: var(--muted); margin-bottom: var(--s-2); }
.details p, .details li { font-size: var(--fs-body); line-height: 1.5; }
.details ul { list-style: none; padding: 0; }
.details a { text-underline-offset: 3px; }
.details .big-link { font-family: var(--font-display); font-weight: var(--fw-heading); font-size: var(--fs-h3); letter-spacing: var(--tr-heading); text-decoration: none; }
.details .big-link:hover { text-decoration: underline; }
.hours { display: grid; grid-template-columns: auto 1fr; gap: var(--s-1) var(--s-4); font-feature-settings: "tnum"; }
.hours dt { color: var(--muted); }
.hours dd { margin: 0; }
.photo.ratio-photo img { border-radius: var(--radius-inner); }
.card .fig .unit { font-size: .45em; letter-spacing: 0; margin-left: .15em; vertical-align: baseline; }

/* ---------- Made by women (black band) ---------- */
.women-band { padding-block: var(--s-11); }
.women-band > .grid { border-top: 0; padding-top: 0; }
.women-e { grid-column: 1 / -1; display: grid; gap: var(--s-9); }
.women-e .pct {
  font-family: var(--font-figure); color: var(--paper); font-feature-settings: "tnum";
  font-size: clamp(4.5rem, 2.5rem + 5vw, 7rem); letter-spacing: -0.05em; line-height: .8;
}
.women-e .pct-note { margin-top: var(--s-3); font-size: var(--fs-detail); color: var(--silver); }
.women-e .bottom { margin-top: var(--s-8); }
.women-e h2 {
  font-family: var(--font-display); font-weight: 400; color: var(--paper);
  font-size: var(--fs-h2); line-height: 1.08; letter-spacing: var(--tr-heading);
  text-wrap: balance;
}
.women-e .bottom p {
  margin-top: var(--s-4); max-width: 58ch; color: var(--silver);
  font-size: var(--fs-body); line-height: 1.6; text-wrap: pretty;
}
.women-e .bottom h2 + p { margin-top: var(--s-5); }
.women-e .bottom p:last-child { margin-bottom: -0.3em; } /* trim descender space so the last line sits on the photo's bottom edge */
.women-e figure { margin: 0; position: relative; }
.women-e img {
  display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 62%;
  border-radius: 2px; filter: grayscale(1) contrast(1.06);
}
.women-e figcaption { margin-top: var(--s-3); font-size: var(--fs-detail); color: var(--silver); }
@media (min-width: 1100px) {
  /* Text column stretches to the photo's height: number pinned to the top edge, copy to the bottom edge */
  .women-e { grid-template-columns: subgrid; align-items: stretch; }
  .women-e .txt { grid-column: 1 / 7; display: flex; flex-direction: column; justify-content: space-between; padding-right: var(--s-8); }
  .women-e .bottom { margin-top: var(--s-6); }
  /* Photo keeps a 16:11 frame, and only grows taller if the text column is taller (narrow desktops) */
  .women-e figure { grid-column: 7 / -1; align-self: stretch; }
  .women-e figure::before { content: ""; display: block; padding-top: 68.75%; }
  .women-e img { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; }
  .women-e figcaption { position: absolute; top: 100%; left: 0; }
}


/* ---------- Uniforms and tenders panel (home) ---------- */
.tender > .grid { border-top: 0; padding-top: 0; }
.tender-panel {
  grid-column: 1 / -1; display: grid; gap: var(--s-8);
  background: var(--paper); border-radius: var(--radius-card); box-shadow: var(--shadow-raised);
  padding: var(--s-8) var(--s-5);
}
.tender-panel .kicker { font-size: var(--fs-detail); color: var(--muted); margin-bottom: var(--s-4); }
.tender-panel h2 {
  font-family: var(--font-display); font-weight: var(--fw-heading); letter-spacing: var(--tr-heading);
  font-size: var(--fs-h1); line-height: 1.08; text-wrap: balance;
}
.tender-panel .lede { margin-top: var(--s-5); color: var(--muted); max-width: 46ch; }
.tender-panel .acts { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-7); }
.tender-panel .side { display: grid; gap: var(--s-5); align-content: start; }
.tender-panel .side h3 { font-size: var(--fs-detail); color: var(--muted); font-weight: var(--fw-text); }
.tender-panel .pts { grid-column: 1 / -1; list-style: none; margin: 0; padding: var(--s-6) 0 0; border-top: 1px solid var(--line); display: grid; gap: var(--s-6); }
.tender-panel .pts h3 { font-weight: var(--fw-strong); font-size: var(--fs-body); margin: var(--s-3) 0 var(--s-2); }
.tender-panel .pts p { font-size: var(--fs-small); line-height: 1.5; color: var(--muted); }
@media (min-width: 720px) {
  .tender-panel { padding: var(--s-9) var(--s-7); }
  .tender-panel .pts { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1100px) {
  .tender-panel { grid-template-columns: 7fr 5fr; padding: var(--s-10) var(--s-9); }
}

/* What We Make banner (uniforms page) */
.tender-panel.make .cta .lede { margin-top: 0; }
.spec-rows { grid-column: 1 / -1; display: grid; gap: var(--s-5); padding-top: var(--s-7); border-top: 1px solid var(--line); }
.spec-row { display: grid; gap: var(--s-1) var(--s-6); align-items: baseline; }
@media (min-width: 720px) { .spec-row { grid-template-columns: 200px 1fr; } }
.spec-row h3 { display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-detail); font-weight: var(--fw-text); color: var(--ink); }
.spec-row h3 .icon { width: 16px; height: 16px; color: var(--muted); }
.spec-row p { font-size: var(--fs-small); line-height: 1.7; color: var(--muted); }
.tender-panel > * { min-width: 0; }
@media (min-width: 720px) { .spec-row p > span:not(.sep) { white-space: nowrap; } }
.spec-row .sep { color: var(--silver); padding-inline: var(--s-1); }
/* Rotator: one row at a time, looping Construction > Uniform details > Insignia and labelling */
.js .spec-rows[data-rotate] { display: grid; }
.js .spec-rows[data-rotate] .spec-row { grid-area: 1 / 1; opacity: 0; transform: translateX(-24px); transition: opacity .5s ease, transform .5s ease; pointer-events: none; }
.js .spec-rows[data-rotate] .spec-row.active { opacity: 1; transform: none; pointer-events: auto; }
.js .spec-rows[data-rotate] .spec-row.leaving { opacity: 0; transform: translateX(24px); }
@media (prefers-reduced-motion: reduce) {
  .js .spec-rows[data-rotate] .spec-row { grid-area: auto; opacity: 1; transform: none; transition: none; }
}
@media (min-width: 1100px) { .tender-panel.make { grid-template-columns: 7fr 5fr; column-gap: var(--s-9); align-items: end; } }

/* FAQ accordion */
.faq { border-bottom: 1px solid var(--rule); }
.faq-item { border-top: 1px solid var(--rule); }
.faq-item summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--s-5);
  padding-block: var(--s-5); font-family: var(--font-display); font-weight: var(--fw-heading);
  font-size: var(--fs-h4); line-height: 1.25; letter-spacing: var(--tr-heading);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .icon { flex: none; transition: transform .25s ease; }
.faq-item[open] summary .icon { transform: rotate(45deg); }
.faq-item summary:hover { color: var(--muted); }
.faq-item summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.faq-item p { padding-bottom: var(--s-6); max-width: var(--measure); color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .faq-item summary .icon { transition: none; } }

/* Language switch (nav) */
.lang-switch { display: inline-flex; align-items: baseline; }
.lang-switch a + a::before { content: "/"; content: "/" / ""; display: inline-block; margin-inline: 8px; color: var(--silver); }
.lang-switch a[aria-current] { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.lang-switch a { color: var(--muted); }
.lang-switch a[aria-current] { color: var(--ink); }
.nav .panel .lang-switch { font-family: var(--font-text); font-size: var(--fs-detail); letter-spacing: 0; margin-top: var(--s-4); }
@media (min-width: 1100px) { .nav .end { gap: 24px; align-items: baseline; } }

/* ---------- Services page ---------- */
.svc-tag { display: flex; align-items: center; gap: var(--s-2); margin-top: var(--s-3); font-size: var(--fs-detail); color: var(--muted); }
.svc-tag .icon { width: 16px; height: 16px; }
.svc .field .lede { max-width: 52ch; }
.svc-inc { margin-top: var(--s-5); font-size: var(--fs-small); line-height: 1.7; color: var(--muted); max-width: 70ch; }
.svc-inc .sep { color: var(--silver); padding-inline: var(--s-1); }
@media (min-width: 720px) { .svc-inc > span:not(.sep) { white-space: nowrap; } }
.svc-overview > .grid { row-gap: var(--s-8); }
.ov-title { grid-column: 1 / -1; text-align: center; font-family: var(--font-display); font-weight: var(--fw-heading); font-size: var(--fs-h2); line-height: var(--lh-heading); letter-spacing: var(--tr-heading); }
.ov-cols { grid-column: 1 / -1; list-style: none; margin: 0; padding: 0; display: grid; gap: var(--grid-gutter); }
@media (min-width: 720px) { .ov-cols { grid-template-columns: repeat(3, 1fr); } }
.ov-cols .ov-card { grid-column: auto; display: grid; align-content: start; gap: var(--s-7); padding: var(--s-6); }
.ov-head { display: flex; align-items: center; gap: var(--s-3); }
.ov-head h3 { font-family: var(--font-display); font-weight: var(--fw-heading); font-size: var(--fs-h4); letter-spacing: var(--tr-heading); color: var(--ink); }
.ov-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
.ov-card a { font-family: var(--font-text); font-size: var(--fs-body); line-height: 1.4; color: var(--ink); text-decoration: none; }
.ov-card a:hover { color: var(--muted); }
.svc { scroll-margin-top: 56px; }
.tender-panel .svc-tag { margin: 0 0 var(--s-4); }
.tender-panel .svc-inc { margin-top: var(--s-4); }

/* Client reviews carousel (home) */
.reviews { display: grid; gap: var(--s-8); }
.reviews .slides { display: grid; }
.reviews .slide { grid-area: 1 / 1; margin: 0; opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility 0s linear .5s; }
.reviews .slide.on { opacity: 1; visibility: visible; transition: opacity .5s ease; }
.reviews-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-5); }
.dots { display: flex; align-items: center; gap: 0; margin-left: calc(-1 * var(--s-1)); }
.dots button { display: grid; place-items: center; height: var(--s-6); padding: 0 var(--s-1); background: none; border: 0; cursor: pointer; }
.dots button span { display: block; width: 6px; height: 6px; border-radius: 999px; background: rgba(255,255,255,.35); transition: width .35s ease, background-color .35s ease; }
.dots button:hover span { background: rgba(255,255,255,.7); }
.dots button[aria-current="true"] span { width: var(--s-5); background: var(--paper); }
.dots button:focus-visible { outline: 2px solid var(--paper); outline-offset: 2px; border-radius: 4px; }
.band .g-rating { font-size: var(--fs-detail); color: var(--silver); text-underline-offset: 3px; }
.band .g-rating:hover { color: var(--paper); }
@media (prefers-reduced-motion: reduce) { .reviews .slide, .dots button span { transition: none; } }

/* Dark banner card (home quote CTA) */
.quote-cta { padding-top: var(--s-10); }
.tender-panel.dark { background: var(--ink); color: var(--paper); box-shadow: none; }
.tender-panel.dark .lede { color: var(--silver); }

/* Keep the hero parallax inside the hero */
.hero-full { overflow: clip; }

/* Request a Quote: nav button and page header actions */
.nav .nav-cta { align-self: center; font-size: var(--fs-detail); }
.nav .nav-cta > span { padding: 0.3rem 0.7rem; gap: 0.35rem; }
.nav .nav-cta .icon { width: 14px; height: 14px; }
.nav .nav-cta:hover { color: inherit; }
@media (min-width: 1100px) { .nav .end { align-items: center; } }
.home .nav:not(.solid):not(.open) .nav-cta { --btn-bg: var(--paper); --btn-fg: var(--ink); --btn-bg2: var(--grey); --btn-fg2: var(--ink); }
.nav .panel .panel-cta { align-self: flex-start; margin-top: var(--s-4); font-family: var(--font-text); font-weight: var(--fw-text); letter-spacing: var(--tr-ui); font-size: var(--fs-body); }
.page-head .actions, .g-head .actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-7); }

.nav .end > * { flex-shrink: 0; white-space: nowrap; }
@media (min-width: 1100px) and (max-width: 1279px) { .nav .end { gap: 16px; } }

/* Gallery filter sticks right under the nav, whatever its height */