/* =========================================================================
   Flex Enterprise — Design System
   Structure/animation choreography adapted from the Influence Pro Trading
   reference build. Brand red and typeface (Manrope) are shared with the
   sibling Flex Logistics site, per client direction (see README).
   ========================================================================= */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, h5, h6, p, figure { margin: 0; }
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; padding: 0; cursor: pointer; appearance: none; -webkit-appearance: none; }
input, textarea { font: inherit; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: auto;
}

html, body {
  overflow-x: hidden;
  width: 100%;
}

/* Anchor-nav targets sit under the fixed header now that .header no longer
   scrolls away with the page — keep jumps (native scrollIntoView fallback,
   and the reduced-motion path) from landing underneath the bar. GSAP
   ScrollSmoother's own scrollTo() is offset separately in js/main.js. */
[id] { scroll-margin-top: calc(var(--header-h) + .5rem); }

/* ---------- Design tokens ---------- */
:root {
  /* Flex Enterprise brand palette — intentionally identical to the sibling
     Flex Logistics site's red (see --color-brand below), per client
     direction, since Flex Enterprise's own logo red wasn't confirmed as
     the group's brand color. Neutrals were already shared for
     brand-family consistency. */
  --color-white: #FFFFFF;
  /* Brand red matches the sibling Flex Logistics site exactly, per client
     direction — Flex Enterprise's logo red was not confirmed as the
     group's actual brand color, so this intentionally reuses Logistics'. */
  --color-brand: #911F12;
  --color-brand-dark: #6B160D;
  --color-brand-bright: #FF4A32;   /* micro-flash accent only (text reveal) */
  --color-brand-muted: #C9938C;
  --color-brand-tint: #F5E6E3;
  --color-charcoal: #1C1B1A;
  --color-slate: #4A4744;
  --color-gray: #766F68;
  --color-warm-gray-50: #FAF8F6;
  --color-warm-gray-100: #F2EEEA;
  --color-warm-gray-200: #E6E0D9;
  --color-border: #DED6CC;
  --color-border-dark: rgba(255, 255, 255, .16);
  --color-ink: #14100F;
  --color-ink-soft: #241D1B;
  --color-sky: #D2DDE9;
  --color-success: #2F6B4F;
  --color-error: #B3261E;

  /* Type — Manrope throughout, matching the sibling Flex Logistics site
     (one shared corporate typeface across the Flex family; brand
     differentiation comes from color/imagery, not a second display face). */
  --font-display: 'Manrope', 'Segoe UI', system-ui, Arial, sans-serif;
  --font-body: 'Manrope', 'Segoe UI', system-ui, Arial, sans-serif;

  /* Layout */
  --container-max: 1360px;
  --container-pad: clamp(1.25rem, 1rem + 2vw, 4rem);
  --header-h: clamp(4.5rem, 4rem + 2vw, 6rem);
  --section-pad-y: clamp(4rem, 3rem + 5vw, 8rem);
  --radius: 0px;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

@media (min-width: 1200px) {
  :root { --container-pad: clamp(2rem, 1rem + 3vw, 5rem); }
}

/* ---------- Base ---------- */
body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(1rem, .96rem + .2vw, 1.0625rem);
  line-height: 1.6;
  color: var(--color-slate);
  background: var(--color-warm-gray-50);
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--color-charcoal);
  line-height: 1.05;
  letter-spacing: -0.01em;
}

/* Weights pulled back from 700/800 to 500/600 — Manrope at heavy weights,
   set in all-caps, was reading as a visually different typeface from the
   sibling Flex Logistics site (which uses the same family at lighter
   weights, sentence case) even after both sites switched to Manrope. */
h1 { font-weight: 600; }
h2, h3, h4 { font-weight: 600; }

p { color: var(--color-slate); }

.text-muted { color: var(--color-gray); }

a.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--color-brand);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: .875rem;
  transition: color .25s var(--ease-out);
}
a.link-arrow svg { width: 1.1em; height: 1.1em; transition: transform .3s var(--ease-out); flex-shrink: 0; }
a.link-arrow:hover { color: var(--color-brand-dark); }
a.link-arrow:hover svg { transform: translateX(.25em); }

:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 3px;
}

.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: .8125rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--color-brand);
}
.eyebrow::before {
  content: '';
  width: .5em;
  height: .5em;
  background: var(--color-brand);
  border-radius: 50%;
  flex-shrink: 0;
}
.on-dark .eyebrow { color: var(--color-brand-muted); }
.on-dark .eyebrow::before { background: var(--color-brand-muted); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  padding: 1rem 1.9rem;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: .01em;
  transition: background-color .25s var(--ease-out), color .25s var(--ease-out), border-color .25s var(--ease-out), transform .25s var(--ease-out);
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--color-brand); color: var(--color-white); }
.btn--primary:hover { background: var(--color-brand-dark); }
.btn--sm { padding: .625rem 1.25rem; font-size: .8125rem; }
.btn--outline { background: transparent; color: var(--color-charcoal); border: 1.5px solid var(--color-charcoal); }
.btn--outline:hover { background: var(--color-charcoal); color: var(--color-white); }
.on-dark .btn--outline { color: var(--color-white); border-color: var(--color-border-dark); }
.on-dark .btn--outline:hover { background: var(--color-white); color: var(--color-ink); }

.btn-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(3.25rem, 3rem + 1vw, 4rem);
  height: clamp(3.25rem, 3rem + 1vw, 4rem);
  border-radius: 50%;
  background: var(--color-brand);
  color: var(--color-white);
  flex-shrink: 0;
  transition: background-color .25s var(--ease-out), transform .3s var(--ease-out);
}
.btn-circle svg { width: 38%; height: 38%; transition: transform .3s var(--ease-out); }
.btn-circle:hover { background: var(--color-brand-dark); }
.btn-circle:hover svg { transform: rotate(45deg); }
.btn-circle--mark {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.5rem;
  line-height: 1;
}
.btn-circle--light { background: var(--color-white); color: var(--color-ink); }
.btn-circle--light:hover { background: var(--color-warm-gray-100); }

/* ---------- Photo treatment (unifies mixed stock-photo sources) ---------- */
.photo {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(.92) contrast(1.04) brightness(.98);
}
.photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 16, 15, 0) 40%, rgba(20, 16, 15, .55) 100%);
  pointer-events: none;
}
.photo--flat::after { background: rgba(20, 16, 15, .18); }

/* =========================================================================
   Scroll text reveal (per-character, scroll-scrubbed, brand-flash)
   Same technique as the sibling Flex Logistics site: JS (js/main.js) splits
   [data-reveal] text into per-character spans; opacity is written per-frame
   from scroll progress, and a character "lights up" with a brief brand-
   flash the moment it crosses the reveal threshold. Replaces the previous
   GSAP SplitText line-reveal (dropped, along with the SplitText CDN plugin).
   ========================================================================= */
[data-reveal] .rword { display: inline-block; }
[data-reveal] .rchar {
  display: inline-block;
  opacity: .12;
  color: inherit;
  will-change: opacity;
}
[data-reveal] .rchar.is-lit { animation: char-flash .6s var(--ease-out) forwards; }
@keyframes char-flash {
  0% { color: currentColor; }
  35% { color: var(--color-brand-bright); }
  100% { color: currentColor; }
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal] .rchar { opacity: 1 !important; animation: none !important; }
}

/* =========================================================================
   Header + Menu
   ========================================================================= */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  padding-inline: var(--container-pad);
}
.header::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--color-warm-gray-50);
  box-shadow: 0 1px 0 rgba(20, 16, 15, .06);
  pointer-events: none;
}

.header__logo {
  display: flex;
  align-items: center;
  gap: .6rem;
  z-index: 2;
}
/* No background/padding chip — the logo renders as supplied, unboxed. */
.header__logo-chip {
  display: inline-flex;
  align-items: center;
}
.header__logo-chip img { height: clamp(1.75rem, 1.5rem + 1vw, 2.25rem); width: auto; display: block; }

/* ---------- Persistent top nav (desktop) — same pattern as the sibling
   Flex Logistics header: logo left, links + CTA in the bar itself, no
   full-screen takeover except on mobile. ---------- */
.header__nav {
  display: none;
  align-items: center;
  gap: clamp(1.125rem, 1.8vw, 1.75rem);
  flex: 1;
  justify-content: center;
}
.header__nav a {
  color: var(--color-charcoal);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .01em;
  text-transform: uppercase;
  padding: .5rem .125rem;
  position: relative;
  white-space: nowrap;
}
.header__nav a::after {
  content: '';
  position: absolute;
  left: .125rem; right: .125rem; bottom: 0;
  height: 2px;
  background: var(--color-brand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s var(--ease-out);
}
.header__nav a:hover, .header__nav a:focus-visible { color: var(--color-brand); }
.header__nav a:hover::after, .header__nav a:focus-visible::after { transform: scaleX(1); }

.header__actions { display: none; align-items: center; z-index: 2; }

.header__menu-button {
  position: relative;
  z-index: 2;
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
}
.header__menu-button svg {
  position: absolute;
  width: 1.6rem;
  height: 1.6rem;
  color: var(--color-charcoal);
  transition: opacity .3s var(--ease-out), transform .3s var(--ease-out);
}
.header__menu-button .icon-close { opacity: 0; transform: rotate(-45deg); }
.header__menu-button.active .icon-bars { opacity: 0; transform: rotate(45deg); }
.header__menu-button.active .icon-close { opacity: 1; transform: rotate(0deg); }

@media (min-width: 1200px) {
  .header__nav { display: flex; }
  .header__actions { display: flex; }
  .header__menu-button { display: none; }
}

.menu {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: var(--color-warm-gray-50);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .45s var(--ease-out), visibility .45s;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--container-pad);
}
.menu.active { opacity: 1; visibility: visible; pointer-events: all; }
body.lock { overflow: hidden; }

.menu__close {
  position: absolute;
  top: calc((var(--header-h) - 2.75rem) / 2);
  left: var(--container-pad);
  width: 2.75rem;
  height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-charcoal);
  border: 1px solid var(--color-border);
  border-radius: 50%;
  transition: border-color .25s var(--ease-out), color .25s var(--ease-out);
}
.menu__close svg { width: 1.1rem; height: 1.1rem; }
.menu__close:hover { color: var(--color-brand); border-color: var(--color-brand); }

.menu__nav {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}
.menu__nav a {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2rem, 3.5vw + 1rem, 3.25rem);
  letter-spacing: -.01em;
  color: var(--color-charcoal);
  padding: .3rem 0;
  position: relative;
  width: fit-content;
  overflow: hidden;
}
.menu__nav a span { display: block; transition: transform .4s var(--ease-out); }
.menu__nav a::after {
  content: '';
  position: absolute;
  left: 0; bottom: .2rem;
  height: 2px; width: 100%;
  background: var(--color-brand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s var(--ease-out);
}
.menu__nav a:hover::after { transform: scaleX(1); }

.menu__contacts {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 3rem;
  color: var(--color-gray);
  font-size: .95rem;
}
.menu__contacts a { color: var(--color-charcoal); }

/* =========================================================================
   Hero
   ========================================================================= */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  /* Was flex-end — with the shorter hero heading (see .hero__title below)
     that left a large empty gap between the header and the content block.
     Centering keeps the content roughly mid-frame regardless of how tall
     the heading happens to wrap. */
  justify-content: center;
  padding: calc(var(--header-h) + 1.5rem) var(--container-pad) clamp(2.5rem, 4vw, 4rem);
  overflow: hidden;
  background: var(--color-ink);
}
.hero__media {
  position: absolute;
  inset: -10% 0;
  z-index: 0;
}
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 65%;
  will-change: transform;
  transform: translateZ(0);
}
.hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  /* Darkened across the board (was .1/.05/.2/.55/.85/1) — the old top stops
     left the image nearly untouched behind the eyebrow/h1, and the new hero
     trust list/CTAs sit lower in the gradient than the old content did. */
  background: linear-gradient(180deg, rgba(0,0,0,.32) 0%, rgba(0,0,0,.22) 25%, rgba(0,0,0,.4) 50%, rgba(0,0,0,.7) 70%, rgba(0,0,0,.9) 88%, rgba(0,0,0,1) 100%);
}

.hero__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  text-align: left;
  align-items: flex-start;
}

.hero__title-row { display: flex; justify-content: flex-start; width: 100%; }
.hero__title {
  width: max-content;
  max-width: 90vw;
  font-size: clamp(2rem, 1.6rem + 3vw, 3.5rem);
  font-weight: 600;
  color: var(--color-white);
  letter-spacing: -.01em;
  line-height: 1.2;
  text-align: left;
  text-shadow: 0 2px 30px rgba(0, 0, 0, .35);
}
/* Each clause reveals independently; the <br> between them in the markup
   is a real line break now, not something the wrapping happens to do at
   certain viewport widths. */
.hero__title span[data-reveal] { display: block; }
.hero__row {
  position: relative;
  z-index: 2;
  align-self: flex-start;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: clamp(1.5rem, 4vw, 3rem);
  margin-top: clamp(2rem, 5vw, 3rem);
  padding-top: clamp(1.5rem, 3vw, 2.5rem);
  border-top: 1px solid var(--color-border-dark);
  max-width: 34rem;
}
.hero__lead { max-width: 100%; text-align: left; }
.hero__lead p.hero__lead-title {
  font-family: var(--font-display);
  font-weight: 700;
  /* Every brand-red variant tried here (muted, bright, dark + white shadow)
     read as washed out against the hero photo — the only text in this hero
     that's reliably legible over it is the white h1. Matching that white,
     with the same shadow formula as .hero__title, guarantees the same
     legibility; weight/size (not color) is what sets this line apart. */
  color: var(--color-white);
  text-shadow: 0 2px 20px rgba(0, 0, 0, .4);
  font-size: clamp(1.25rem, 1.05rem + .9vw, 1.7rem);
  margin-bottom: 0;
  line-height: 1.3;
  max-width: 34ch;
}

/* Eyebrow above the hero h1 — not using .on-dark (its muted brand red washes
   out against this specific busy photo, the same problem .hero__lead-title
   ran into above), so this overrides straight to white/bright instead. */
.hero__eyebrow { color: var(--color-white); margin-bottom: .85rem; }
.hero__eyebrow::before { background: var(--color-brand-bright); }

/* Three confirmed facts pulled from the "why" section below (#why) rather
   than new copy, so the hero isn't asserting anything not already said
   elsewhere on the page. */
.hero__trust {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
}
.hero__trust li {
  display: flex;
  align-items: center;
  gap: .65em;
  color: rgba(255, 255, 255, .88);
  font-size: .9rem;
  font-weight: 500;
}
.hero__trust svg { width: 1.1em; height: 1.1em; flex-shrink: 0; color: var(--color-brand-bright); }

.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 1.75rem; }
.hero__actions .btn--outline { color: var(--color-white); border-color: var(--color-border-dark); }
.hero__actions .btn--outline:hover { background: var(--color-white); color: var(--color-ink); }

/* ---------- Scroll cue ---------- */
/* Centered at the bottom of the hero, independent of both the content
   column and the inquiry form so it never sits underneath either one
   (it previously hugged the right edge, right where the inquiry panel
   lives at desktop widths, and rendered behind it). */
.hero__scroll-cue {
  display: none;
  position: absolute;
  bottom: clamp(2.5rem, 4vw, 4rem);
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  flex-direction: column;
  align-items: center;
  gap: .75rem;
}
.hero__scroll-cue span {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: .7rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .7);
}
.hero__scroll-cue-line {
  position: relative;
  width: 1px;
  height: 46px;
  background: var(--color-border-dark);
  overflow: hidden;
}
.hero__scroll-cue-line::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 40%;
  background: var(--color-brand);
  animation: scroll-cue-travel 2.2s ease-in-out infinite;
}
@keyframes scroll-cue-travel {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(250%); }
}

/* ---------- Hero two-column layout: headline/lead (left) + inquiry form (right) ---------- */
.hero__layout {
  position: relative;
  z-index: 2;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 5vw, 3.5rem);
}
.hero__main { display: flex; flex-direction: column; }

.hero__inquiry {
  position: relative;
  background: var(--color-white);
  padding: clamp(1.75rem, 3vw, 2.25rem);
  box-shadow: 0 2rem 4rem -1.5rem rgba(20, 16, 15, .55);
  text-align: left;
}
.hero__inquiry h3 { margin-top: .5rem; font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem); text-transform: none; }
.hero__inquiry .contact-form { margin-top: 1.25rem; gap: 1.1rem; }

@media (min-width: 1200px) {
  .hero { padding-bottom: clamp(3rem, 6vw, 5rem); }
  .hero__layout { grid-template-columns: 1.1fr .9fr; align-items: end; }
  .hero__content { width: 100%; align-self: flex-end; }
  /* Contained to a column now (not the full viewport), so the display type
     runs smaller than the original full-bleed treatment to avoid colliding
     with the inquiry panel beside it. Kept short (~2 lines) on purpose —
     an earlier, much larger size pushed the inquiry panel off-screen. */
  .hero__title { max-width: 100%; font-size: clamp(2.25rem, 1.7rem + 2.2vw, 3.75rem); }
  .hero__scroll-cue { display: flex; }
}

/* =========================================================================
   Section shell + alternating backgrounds
   ========================================================================= */
.section { position: relative; padding-block: var(--section-pad-y); }
.section--tight { padding-block: clamp(3rem, 2.5rem + 3vw, 5rem); }
.section--light { background: var(--color-warm-gray-50); }
.section--panel { background: var(--color-warm-gray-100); }
.section--dark { background: var(--color-ink); color: var(--color-white); }
.section--dark h2, .section--dark h3, .section--dark h4 { color: var(--color-white); }
.section--dark p { color: rgba(255,255,255,.72); }

.section-head {
  max-width: 50rem;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.section-head h2 {
  font-size: clamp(2.25rem, 1.7rem + 3.2vw, 4.25rem);
  font-weight: 600;
  line-height: 1.05;
  margin-top: .75rem;
}
/* ~40% of the site's main container (--container-max: 1360px), not of
   .section-head's own narrower 50rem box — using a plain percentage here
   would just be 40% of that already-narrow box, no wider than before. */
.section-head p { margin-top: clamp(1.75rem, 3vw, 2.75rem); font-size: 1.05rem; max-width: min(34rem, 100%); }
.section-head--wide { max-width: 62rem; }

/* ---------- Section-seam notch divider ---------- */
/* A reusable "pill bump" shape spanning the section width with a smooth
   raised tab at the center, filled with currentColor so it reads as an
   extension of whichever section it's attached to — same seam motif as
   the sibling Flex Logistics site. Static; color set per-use below. */
.notch {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: min(32.875rem, 88vw);
  aspect-ratio: 527 / 29;
  color: var(--color-warm-gray-50);
  z-index: 3;
  pointer-events: none;
}
.notch svg { width: 100%; height: 100%; display: block; fill: currentColor; }
.notch--top { top: -1px; }
.notch--top.is-flipped { transform: translateX(-50%) rotate(180deg); }
.notch--bottom { bottom: -1px; transform: translateX(-50%) rotate(180deg); }
.notch--bottom.is-flipped { transform: translateX(-50%); }
.notch.on-ink { color: var(--color-ink); }
.notch.on-light { color: var(--color-warm-gray-50); }
.notch.on-panel { color: var(--color-warm-gray-100); }
.notch.on-sky { color: var(--color-sky); }
.notch.on-brand { color: var(--color-brand); }
.notch.on-white { color: var(--color-white); }

/* Side placement: the exact same pill-bump shape used at section tops/
   bottoms, rotated 90° onto a vertical edge instead. The SVG is given its
   own natural (unrotated) dimensions — matching the path's real 527:29
   aspect ratio so it isn't stretched — then rotated around its center;
   the outer .notch--left box is sized to the resulting (swapped) visual
   footprint so the rotated SVG still centers correctly within it. */
.notch--left {
  top: 20%;
  left: -1px;
  transform: none;
  width: calc(14rem * 29 / 527);
  height: 14rem;
  aspect-ratio: auto;
}
.notch--left svg {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14rem;
  height: calc(14rem * 29 / 527);
  transform: translate(-50%, -50%) rotate(90deg);
}

@media (max-width: 767px) {
  .notch { width: 13rem; }
  .notch--left { height: 9rem; width: calc(9rem * 29 / 527); }
  .notch--left svg { width: 9rem; height: calc(9rem * 29 / 527); }
}

/* =========================================================================
   About / capability-drift cards ("benefits")
   ========================================================================= */
.about__grid {
  display: grid;
  gap: clamp(2.5rem, 4vw, 3rem);
  grid-template-columns: 1fr;
}
.about__card {
  padding-top: clamp(1.5rem, 2vw, 2rem);
  border-top: 1px solid var(--color-border);
}
.about__card-index {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 3.5rem;
  line-height: 1;
  color: var(--color-brand);
  margin-bottom: 1.25rem;
  display: block;
}
.about__card {
  opacity: 0;
  transform: translateY(24px);
}
.about__card.is-visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
}
.reduced-motion .about__card { opacity: 1; transform: none; }
.about__card h3 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); margin-bottom: .85rem; text-transform: none; font-weight: 600; }

@media (min-width: 1200px) {
  .about__grid { grid-template-columns: repeat(3, 1fr); align-items: start; }
  .about__card:nth-child(2) { margin-top: 3rem; }
  .about__card:nth-child(3) { margin-top: 6rem; }
}

/* =========================================================================
   "Why Flex Enterprise" — oversized statement + differentiators
   ========================================================================= */
.why {
  background: var(--color-ink);
  color: var(--color-white);
  overflow: hidden;
}
.why__statement {
  font-size: clamp(2rem, 1.6rem + 3vw, 3.75rem);
  font-weight: 600;
  color: var(--color-white);
  letter-spacing: -.01em;
  line-height: 1.05;
  max-width: 20ch;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.why__list {
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
  grid-template-columns: 1fr;
  border-top: 1px solid var(--color-border-dark);
  padding-top: clamp(2rem, 4vw, 3rem);
}
.why__item h3 {
  color: var(--color-white);
  font-size: clamp(1.3rem, 1.1rem + .8vw, 1.75rem);
  line-height: 1.25;
  margin-bottom: .6rem;
  text-transform: none;
}
.why__item p { color: rgba(255,255,255,.68); max-width: 32ch; }

@media (min-width: 1200px) {
  .why__list { grid-template-columns: repeat(3, 1fr); align-items: start; }
  .why__item h3 { min-height: 2.5em; }
  .why__item:nth-child(2) { border-left: 1px solid var(--color-border-dark); border-right: 1px solid var(--color-border-dark); padding-inline: clamp(1.5rem, 3vw, 2.5rem); }
}

/* ---------- Partnership transition band ---------- */
.partnership__grid {
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
  grid-template-columns: 1fr;
  align-items: center;
}
.partnership__text h2 {
  font-size: clamp(2.25rem, 1.6rem + 4vw, 4rem);
  font-weight: 600;
  line-height: 1.1;
  margin: .75rem 0 1.25rem;
}
.partnership__text p { max-width: 42ch; font-size: 1.05rem; }
.partnership__media {
  aspect-ratio: 4 / 3;
  order: -1;
}
@media (min-width: 1200px) {
  .partnership__grid { grid-template-columns: 1.1fr .9fr; }
  .partnership__media { order: 0; aspect-ratio: 5 / 6; margin-right: calc(var(--container-pad) * -1); }
}

/* ---------- Skip link ---------- */
.visually-hidden-focusable {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--color-brand);
  color: var(--color-white);
  padding: .75rem 1.25rem;
}
.visually-hidden-focusable:focus { left: 1rem; top: 1rem; }

/* =========================================================================
   Capabilities — bold full-bleed red block, mobile swiper / desktop pinned gallery
   ========================================================================= */
.capabilities {
  background: var(--color-brand);
  color: var(--color-white);
}
.capabilities .eyebrow { color: var(--color-white); }
.capabilities .eyebrow::before { background: var(--color-white); }
.capabilities .section-head h2 { color: var(--color-white); }
.capabilities .section-head p { color: rgba(255, 255, 255, .8); }

/* Plain vertical stack on mobile/tablet — no horizontal scroll. Each
   card is already image-then-text internally (.cap-card__media, then
   .cap-card__body); this just stacks the cards themselves instead of
   scrolling them sideways. */
.cap-scroll {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}
.cap-scroll__item { width: 100%; }
.cap-card { height: 100%; }
.cap-card__media { aspect-ratio: 4 / 3; }
.cap-card__body { padding-top: clamp(1.25rem, 2vw, 1.75rem); border-top: 1px solid var(--color-border-dark); margin-top: clamp(1.25rem, 2vw, 1.75rem); }
.cap-card__body h3 { font-size: 1.4rem; margin-bottom: .6rem; text-transform: none; font-weight: 600; color: var(--color-white); }
.cap-card__body p { font-size: .95rem; margin-bottom: 1.25rem; color: rgba(255, 255, 255, .78); }
.cap-card .link-arrow { color: var(--color-white); }
.cap-card .link-arrow:hover { color: var(--color-brand-muted); }

.cap-scroller { display: none; }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center p { margin-inline: auto; }
#capabilities .section-head h2 { font-size: clamp(2.25rem, 1.5rem + 4vw, 4.4rem); }

@media (min-width: 1200px) {
  .cap-scroll-wrap { display: none; }
  .cap-scroller {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(3rem, 6vw, 6rem);
    padding-inline: var(--container-pad);
    margin-top: clamp(3rem, 6vw, 5rem);
  }
  .cap-scroller__media {
    position: relative;
    height: calc(100vh - 4rem);
    max-height: 44rem;
  }
  .cap-scroller__images { position: relative; width: 100%; height: 100%; border-radius: 1rem; overflow: hidden; }
  .cap-scroller__images img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    visibility: hidden;
    transform: scale(1.08);
    transition: opacity 1s var(--ease-out), transform 1.6s var(--ease-out), visibility 1s;
  }
  .cap-scroller__images img.is-active {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
    transition-duration: 1.1s, 1.8s, 1.1s;
  }
  .reduced-motion .cap-scroller__images img { transition: none; transform: none; }

  /* The notch: a small shape painted in the section's own background color,
     laid over the media's right edge (the seam beside the text column) so it
     reads as a bite cut into the photo. Slides continuously with scroll
     progress via JS (see main.js). */
  .cap-scroller__notch {
    position: absolute;
    top: 0;
    right: -1px;
    z-index: 3;
    height: 17.9rem;
    width: auto;
    transform: scaleX(-1);
    pointer-events: none;
  }

  .cap-scroller__list { display: flex; flex-direction: column; padding-left: clamp(1rem, 3vw, 3rem); }
  .cap-item {
    padding-block: clamp(5rem, 42vh, 20rem);
    border-top: 1px solid var(--color-border-dark);
  }
  .cap-item__index {
    display: block;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.1rem;
    color: var(--color-brand-muted);
    margin-bottom: .75rem;
    opacity: .5;
    transition: opacity .3s var(--ease-out);
  }
  .cap-item h3 { font-size: 1.75rem; font-weight: 600; margin-bottom: .6rem; text-transform: none; color: rgba(255, 255, 255, .55); transition: color .3s var(--ease-out); }
  .cap-item p { max-width: 34ch; color: rgba(255, 255, 255, .45); transition: color .3s var(--ease-out); }
  .cap-item.is-active h3 { color: var(--color-white); }
  .cap-item.is-active p { color: rgba(255, 255, 255, .8); }
  .cap-item.is-active .cap-item__index { opacity: 1; }
  .cap-scroller__spacer { height: 42vh; }
}

/* =========================================================================
   Community — same pinned-media/notch/scrolling-list pattern as the
   capabilities gallery above, showing the full set of community-
   distribution photos instead of one static image.
   ========================================================================= */
.community-scroll-wrap { margin-inline: calc(var(--container-pad) * -1); margin-top: clamp(2.5rem, 5vw, 4rem); }
.community-scroll {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  gap: 1rem;
  padding-inline: var(--container-pad);
  padding-bottom: .5rem;
  scrollbar-width: none;
}
.community-scroll::-webkit-scrollbar { display: none; }
.community-scroll__item { flex: 0 0 90%; scroll-snap-align: start; }
.community-scroll__media { aspect-ratio: 3 / 4; }

/* Swipe hint — mobile/tablet only, where the gallery is a horizontal
   carousel rather than the desktop pinned/scrolling version. Same motif
   as the hero's .hero__scroll-cue-line (a short track with a colored
   segment traveling through it on loop), just rotated horizontal and
   with no label. */
.community-swipe-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1.25rem;
}
.community-swipe-hint__line {
  position: relative;
  width: 46px;
  height: 1px;
  background: var(--color-border);
  overflow: hidden;
  display: block;
}
.community-swipe-hint__line::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  width: 40%;
  background: var(--color-brand);
  animation: swipe-hint-travel 2.2s ease-in-out infinite;
}
@keyframes swipe-hint-travel {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(250%); }
}
@media (prefers-reduced-motion: reduce) {
  .community-swipe-hint__line::after { animation: none; }
}

.community-scroller { display: none; }

@media (min-width: 1200px) {
  .community-swipe-hint { display: none; }
  .community-scroll-wrap { display: none; }
  .community-scroller {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(3rem, 6vw, 6rem);
    margin-top: clamp(3rem, 6vw, 5rem);
  }
  .community-scroller__media {
    position: relative;
    height: calc(100vh - 4rem);
    max-height: 44rem;
  }
  .community-scroller__images { position: relative; width: 100%; height: 100%; border-radius: 1rem; overflow: hidden; }
  .community-scroller__images img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    visibility: hidden;
    transform: scale(1.08);
    transition: opacity 1s var(--ease-out), transform 1.6s var(--ease-out), visibility 1s;
  }
  .community-scroller__images img.is-active {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
    transition-duration: 1.1s, 1.8s, 1.1s;
  }
  .reduced-motion .community-scroller__images img { transition: none; transform: none; }

  .community-scroller__notch {
    position: absolute;
    top: 0;
    right: -1px;
    z-index: 3;
    height: 17.9rem;
    width: auto;
    transform: scaleX(-1);
    pointer-events: none;
  }

  .community-scroller__list { display: flex; flex-direction: column; padding-left: clamp(1rem, 3vw, 3rem); }
  .community-item {
    padding-block: clamp(4rem, 34vh, 16rem);
    border-top: 1px solid var(--color-border);
    display: flex;
    gap: 1rem;
    align-items: baseline;
  }
  .community-item:first-child { border-top: none; }
  .community-item__index {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--color-gray);
    flex-shrink: 0;
    opacity: .5;
    transition: opacity .3s var(--ease-out), color .3s var(--ease-out);
  }
  .community-item p { font-size: 1.15rem; color: var(--color-gray); transition: color .3s var(--ease-out); max-width: 26ch; }
  .community-item.is-active .community-item__index { opacity: 1; color: var(--color-brand); }
  .community-item.is-active p { color: var(--color-charcoal); }
  .community-scroller__spacer { height: 34vh; }
}

/* =========================================================================
   The handoff — light breather section between the two parallax sections
   ========================================================================= */
.handoff { background: var(--color-sky); }
.handoff__inner {
  max-width: 46rem;
  margin-inline: auto;
  text-align: center;
}
.handoff__inner h2 {
  font-size: clamp(2rem, 1.6rem + 3vw, 3.25rem);
  font-weight: 600;
  line-height: 1.15;
  margin-top: .75rem;
  margin-bottom: 1.5rem;
}
.handoff__inner p {
  font-size: 1.05rem;
  max-width: 42ch;
  margin-inline: auto;
}

/* =========================================================================
   Parallax sections (trading + logistics) — centered subject, text sides
   ========================================================================= */
.parallax-section {
  position: relative;
  /* Was 100vh with clamp(5rem,10vh,7rem) padding on top of that — with
     shorter heading/paragraph content the section ended up mostly empty
     space above and below. */
  min-height: 70vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--color-ink);
  padding-block: clamp(3rem, 6vh, 4.5rem);
}
.parallax-section__media {
  position: absolute;
  inset: -12% 0;
  z-index: 0;
}
.parallax-section__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  will-change: transform;
  transform: translateZ(0);
}
/* The source photo's subject sits low in the frame (mountains fill the top
   two-thirds) — bias the crop down so the ship stays the centered subject
   rather than being cropped out by a plain center-center crop. */
#trading .parallax-section__media img { object-position: 58% 78%; }
.parallax-section__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(20,16,15,.92) 0%, rgba(20,16,15,.55) 26%, rgba(20,16,15,.45) 50%, rgba(20,16,15,.55) 74%, rgba(20,16,15,.92) 100%);
}
.parallax-section__grid {
  position: relative;
  z-index: 2;
  width: 100%;
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr;
}
.parallax-section__col--right { justify-self: start; }
.parallax-section .eyebrow { margin-bottom: 1rem; }
.parallax-section h2 {
  color: var(--color-white);
  font-size: clamp(2.25rem, 1.6rem + 4vw, 4.75rem);
  font-weight: 600;
  line-height: 1.05;
  margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
  text-shadow: 0 1px 8px rgba(0,0,0,.55);
}
/* Each clause on its own line, deliberately — not left to wrap wherever
   the viewport happens to break it. */
.parallax-section h2 span[data-reveal] { display: block; }
.parallax-section p { color: rgba(255,255,255,.85); max-width: min(38rem, 100%); text-shadow: 0 1px 6px rgba(0,0,0,.9), 0 1px 2px rgba(0,0,0,.9); }
.parallax-section__cta { margin-top: 1.75rem; }
.parallax-section__facts {
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: .75rem;
}
.parallax-section__facts li {
  display: flex;
  gap: .6em;
  color: rgba(255,255,255,.9);
  font-size: 1.1rem;
  text-shadow: 0 1px 6px rgba(0,0,0,.9), 0 1px 2px rgba(0,0,0,.9);
}
.parallax-section__facts li::before { content: '—'; color: var(--color-brand-muted); flex-shrink: 0; }

@media (min-width: 1200px) {
  .parallax-section__grid { grid-template-columns: 1fr 1fr; align-items: center; }
  .parallax-section__col--right { justify-self: end; text-align: right; margin-left: auto; }
  .parallax-section__col--right .parallax-section__facts li { flex-direction: row-reverse; }
  .parallax-section__col--right p { margin-left: auto; }
}

/* =========================================================================
   FAQ
   ========================================================================= */
.faq { background: var(--color-warm-gray-100); }
.faq__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem 2.5rem;
  margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}
.faq__head h2 {
  font-size: clamp(2.25rem, 1.7rem + 3.2vw, 3.5rem);
  font-weight: 600;
  line-height: 1.05;
  color: var(--color-brand);
}
.faq__head p { max-width: 28ch; margin-top: .85rem; }

.accordion { border-bottom: 1px solid var(--color-border); }
.accordion__header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
  padding-block: 1.5rem;
  cursor: pointer;
}
.accordion__number { font-family: var(--font-display); font-weight: 800; color: var(--color-gray); font-size: .95rem; }
.accordion__title { font-size: 1.15rem; font-weight: 700; color: var(--color-charcoal); }
.accordion__icon { width: 1.5rem; height: 1.5rem; flex-shrink: 0; transition: transform .35s var(--ease-out); color: var(--color-brand); }
.accordion.open .accordion__icon { transform: rotate(180deg); }
.accordion__body { height: 0; overflow: hidden; }
.accordion__body-inner { padding-bottom: 1.5rem; max-width: 42rem; }

@media (min-width: 1200px) {
  .accordion__header { grid-template-columns: 3rem 1fr auto; }
  .accordion__body-inner { padding-left: 4rem; }
}

/* =========================================================================
   Footer
   ========================================================================= */
.footer {
  position: relative;
  background: var(--color-ink);
  color: var(--color-white);
  padding-top: clamp(3.5rem, 6vw, 6rem);
}
.footer__top {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  padding-bottom: clamp(3rem, 5vw, 4.5rem);
  border-bottom: 1px solid var(--color-border-dark);
}
.footer__brand p { color: rgba(255,255,255,.65); max-width: 32ch; margin-top: 1rem; }
.footer__logo { display: flex; }

/* Real logo file, light backdrop so its black wordmark stays legible on
   the dark footer — see the HTML comment above the markup. */
.footer-logo-chip {
  display: inline-flex;
  align-items: center;
  background: rgba(250, 248, 246, .95);
  border-radius: .5rem;
  padding: .625rem 1rem;
}
.footer-logo-chip img { height: clamp(2rem, 1.6rem + 2vw, 2.75rem); width: auto; display: block; }

.footer__cols { display: grid; gap: 2rem; grid-template-columns: repeat(2, 1fr); }
.footer__col h4 {
  font-family: var(--font-body);
  color: var(--color-brand-muted);
  font-size: .8125rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  margin-bottom: 1rem;
  font-weight: 700;
}
.footer__col ul { display: flex; flex-direction: column; gap: .65rem; }
.footer__col a { color: rgba(255,255,255,.78); font-size: .95rem; transition: color .25s var(--ease-out); }
.footer__col a:hover { color: var(--color-white); }
.footer__col address { font-style: normal; color: rgba(255,255,255,.78); font-size: .95rem; line-height: 1.6; }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  padding-block: 1.5rem;
  border-top: 1px solid var(--color-border-dark);
  font-size: .85rem;
  color: rgba(255,255,255,.55);
}
.footer__bottom a { color: rgba(255,255,255,.55); }
.footer__bottom a:hover { color: var(--color-white); }

@media (min-width: 1200px) {
  .footer__top { grid-template-columns: 1.2fr 2fr; }
  .footer__cols { grid-template-columns: repeat(3, 1fr); }
}

/* Contact-form submit feedback (js/main.js initAjaxForms) */
.form-message {
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  font-size: .9rem;
  margin: 0;
}
.form-message--success {
  background: rgba(47, 107, 79, .1);
  border: 1px solid var(--color-success);
  color: var(--color-success);
}
.form-message--error {
  background: rgba(179, 38, 30, .08);
  border: 1px solid var(--color-error);
  color: var(--color-error);
}
.form-message--error a { color: inherit; text-decoration: underline; }

/* =========================================================================
   Utility page shell (privacy / terms / 404)
   ========================================================================= */
.page-hero {
  padding: calc(var(--header-h) + 3rem) 0 var(--section-pad-y);
  background: var(--color-warm-gray-100);
}
.page-hero h1 { font-size: clamp(2.25rem, 1.75rem + 3vw, 3.75rem); font-weight: 600; line-height: 1.1; margin-top: .75rem; }
.page-hero__lead { margin-top: clamp(1.5rem, 3vw, 2rem); max-width: 42ch; font-size: 1.05rem; }

/* Photo variant (contact.html) — same dark-image-plus-gradient treatment
   as the homepage hero, instead of the plain light band used on the
   legal pages. */
.page-hero--photo {
  position: relative;
  overflow: hidden;
  background: var(--color-ink);
}
.page-hero--photo .page-hero__media {
  position: absolute;
  inset: -10% 0;
  z-index: 0;
}
.page-hero--photo .page-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 65%;
}
.page-hero--photo .page-hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.65) 100%);
}
.page-hero--photo .container { position: relative; z-index: 2; }
.page-hero--photo h1, .page-hero--photo .page-hero__lead { color: var(--color-white); }
.legal-content { padding-block: var(--section-pad-y); max-width: 54rem; }
.legal-content p, .legal-content li { margin-bottom: 1rem; color: var(--color-slate); }
.legal-content ul { padding-left: 1.25rem; list-style: disc; }

.legal-section {
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: 1.5rem;
  padding-block: clamp(2rem, 4vw, 2.75rem);
  border-top: 1px solid var(--color-border);
}
.legal-section:last-child { border-bottom: 1px solid var(--color-border); }
.legal-section__index {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.5rem;
  color: var(--color-brand);
  line-height: 1;
}
.legal-section h2 {
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  font-weight: 600;
  margin-bottom: .85rem;
}
.legal-section .link-arrow { display: inline-flex; }

/* ---------- Contact page ---------- */
.contact-grid {
  display: grid;
  gap: clamp(3rem, 6vw, 5rem);
  grid-template-columns: 1fr;
}
.contact-info__list {
  margin-top: clamp(1.5rem, 3vw, 2rem);
  display: flex;
  flex-direction: column;
  gap: clamp(1.75rem, 3vw, 2.5rem);
}
.contact-info__list h3 {
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--color-gray);
  margin-bottom: .5rem;
}
.contact-info__list .link-arrow { font-size: 1.15rem; text-transform: none; letter-spacing: 0; }
.contact-info__list address { font-style: normal; color: var(--color-slate); line-height: 1.6; }

.contact-form { margin-top: clamp(1.5rem, 3vw, 2rem); display: flex; flex-direction: column; gap: 1.5rem; }
.contact-form__row { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
.contact-form__field { display: flex; flex-direction: column; gap: .5rem; }
.contact-form label { font-size: .9rem; font-weight: 700; color: var(--color-charcoal); }
.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: .85rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-white);
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--color-charcoal);
  transition: border-color .25s var(--ease-out);
}
.contact-form input:focus,
.contact-form textarea:focus { border-color: var(--color-brand); }
.contact-form textarea { resize: vertical; }
.contact-form button { align-self: flex-start; }

/* Custom <select> — replaces the browser's default dropdown chrome (which
   read as an unstyled "stock" control next to the text inputs) with the
   same border/padding/focus treatment, plus a drawn chevron so it's still
   obviously a dropdown. */
.contact-form select {
  width: 100%;
  padding: .85rem 2.75rem .85rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background-color: var(--color-white);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23766F68' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 1.1rem;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--color-charcoal);
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  transition: border-color .25s var(--ease-out);
}
.contact-form select:focus { border-color: var(--color-brand); outline: none; }
.contact-form select:invalid { color: var(--color-gray); }

/* ---------- Contact form panel ----------
   Gets a static .notch--left (see the Section-seam notch divider rules
   above) on its left edge, 20% from the top — the exact same section-seam
   shape used everywhere else, just rotated onto a vertical edge and fixed
   in place rather than scroll-driven. */
.contact-form-wrap {
  position: relative;
  background: var(--color-white);
  padding: clamp(1.75rem, 3vw, 2.5rem);
  box-shadow: 0 1.5rem 3rem -1.5rem rgba(20, 16, 15, .25);
}

@media (min-width: 1200px) {
  .contact-grid { grid-template-columns: .8fr 1.2fr; }
  .contact-form__row { grid-template-columns: 1fr 1fr; }
  .contact-form-wrap { padding: clamp(2.25rem, 3vw, 3rem) clamp(2.25rem, 3vw, 3rem) clamp(2.25rem, 3vw, 3rem) clamp(2.75rem, 4vw, 3.5rem); }
}

.error-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--color-ink);
  color: var(--color-white);
  padding: var(--container-pad);
}
.error-page__code {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(4rem, 3rem + 10vw, 10rem);
  color: var(--color-brand-muted);
  line-height: 1;
}
.error-page h1 { color: var(--color-white); margin-top: 1rem; }
.error-page p { color: rgba(255,255,255,.7); margin-top: 1rem; max-width: 32ch; margin-inline: auto; }
.error-page .btn { margin-top: 2rem; }

/* =========================================================================
   Reduced motion: static, fully visible fallback
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
}
.reduced-motion .accordion__body { transition: none !important; }