/* ============================================================================
   VESPER SUPPLY — Stylesheet
   ----------------------------------------------------------------------------
   BRAND TOKENS LIVE IN ONE PLACE (see :root below).
   To swap in your real brand colors and fonts, edit ONLY the block marked
   "BRAND — EDIT HERE". Nothing else in this file hardcodes a brand color.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   BRAND — EDIT HERE
   ------------------------------------------------------------------------ */
:root {
  /* --- Core brand palette -------------------------------------------------
     Taken directly from BRANDING/COLOR PALETTE/Vesper Colors Miguel.jpeg.
     These five are the brand. Everything else in this file is derived. */
  --brand-ink:        #252A2E;  /* darkest charcoal   RGB 37,42,46    */
  --brand-ink-raised: #283238;  /* elevated charcoal  RGB 40,50,56    */
  --brand-steel:      #42677A;  /* mid steel blue     RGB 66,103,122  */
  --brand-sky:        #75B7D9;  /* light blue         RGB 117,183,217 */
  --brand-white:      #FFFFFF;

  /* --- Derived neutrals ---------------------------------------------------
     Not new brand hues: tints and shades of the charcoal/steel above, needed
     for body text, borders and light surfaces. Each is contrast-checked.  */
  --brand-slate-700:  #37444C;  /* body text on light      8.9:1 on white */
  --brand-slate-600:  #4A5A64;  /* muted text on light     7.1:1 on white */
  --brand-slate-400:  #7D8B94;  /* labels on dark only, decorative        */
  --brand-slate-200:  #C2CCD3;  /* light text on dark surfaces            */
  --brand-line:       #DCE3E7;  /* hairlines on light                     */
  --brand-paper:      #F2F5F7;  /* sunken light surface                   */
  --brand-sky-wash:   #EAF2F7;  /* palest tint of the sky blue            */
  --brand-sky-line:   #D2E2EC;  /* divider that reads against the wash    */

  --brand-danger: #C0392B;

  /* --- Typefaces ----------------------------------------------------------
     Archivo — closely matches the geometric grotesque in the Vesper wordmark.
     Display / headlines.
     Avenir carries everything that is not a heading, including the small
     letterspaced labels that used to be set in a mono face. */
  /* Display — Archivo Expanded Bold. SIL Open Font Licensed, fsType 0, so it
     is free to serve. "Archivo Expanded" picks up a local install; "Archivo"
     is the variable font from Google, which needs the font-stretch below to
     resolve to the same expanded cut. */
  --font-display: "Archivo Expanded", "Archivo", "Helvetica Neue", Arial, sans-serif;
  /* Body — Avenir ships with macOS/iOS, so Apple visitors get the real face.
     Mulish is the loaded fallback for everyone else. */
  --font-body:    "Avenir Next", "Avenir", "Mulish",
                  -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* ---------------------------------------------------------------------------
   SEMANTIC TOKENS — map brand values onto roles. Components reference these,
   never the raw brand values above.
   ------------------------------------------------------------------------ */
:root {
  --surface:          var(--brand-white);
  --surface-sunken:   var(--brand-paper);
  --surface-inverse:  var(--brand-ink);
  --surface-raised:   var(--brand-ink-raised);

  --text-strong:      var(--brand-ink);
  --text:             var(--brand-slate-700);
  --text-muted:       var(--brand-slate-600);
  --text-on-dark:     var(--brand-white);
  --text-on-dark-mut: var(--brand-slate-200);

  /* --accent is the light blue, used ONLY on dark surfaces (6.6:1 on ink).
     --accent-on-light is the steel blue, the text-safe variant for light
     surfaces (6.1:1 on white). Never swap them. */
  --accent:           var(--brand-sky);
  --accent-on-light:  var(--brand-steel);
  --accent-bright:    #96CBE6;

  --line:             var(--brand-line);
  --line-dark:        rgba(255, 255, 255, 0.14);

  /* Solution cards: a tint of the brand sky rather than plain white, and the
     steel blue as the hover fill. Text goes white on hover (6.1:1 on steel). */
  --card-surface:     var(--brand-sky-wash);
  --card-line:        var(--brand-sky-line);
  --card-hover:       var(--brand-steel);

  /* Shared panel treatment — one diagonal wash, used by every card on the
     page so the sections read as one family. Two variants because half the
     cards sit on white and half on the charcoal. */
  --panel-wash-light: linear-gradient(160deg,
                        rgba(117, 183, 217, 0.20) 0%,
                        rgba(117, 183, 217, 0.05) 46%,
                        rgba(117, 183, 217, 0.05) 100%);
  --panel-wash-dark:  linear-gradient(160deg,
                        rgba(117, 183, 217, 0.10) 0%,
                        rgba(255, 255, 255, 0.02) 46%,
                        rgba(255, 255, 255, 0.02) 100%);
  --panel-line-dark:  rgba(255, 255, 255, 0.09);

  --focus:            var(--brand-sky);

  /* Spacing scale — marketing-page density (spacious end of the scale). */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  --radius-sm: 2px;
  --radius:    4px;
  --radius-lg: 8px;
  --radius-pill: 999px;

  --shell: 1240px;
  --shell-narrow: 880px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 240ms;
}

/* ---------------------------------------------------------------------------
   RESET / BASE
   ------------------------------------------------------------------------ */
*,
*::before,
*::after { box-sizing: border-box; }

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-stretch: 125%;          /* selects the expanded cut of the variable font */
  color: var(--text-strong);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.12;           /* all-caps has no descenders, so tighter */
  letter-spacing: 0.01em;      /* caps need a little air to stay legible */
  margin: 0;
  text-wrap: balance;
}

/* Small headings need proportionally more tracking than large ones. */
.rfq__title { letter-spacing: 0.045em; }

p { margin: 0; text-wrap: pretty; }

a { color: inherit; }

ul { margin: 0; padding: 0; list-style: none; }

button { font: inherit; color: inherit; }

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--surface-inverse);
  color: var(--text-on-dark);
  padding: var(--space-3) var(--space-5);
  font-family: var(--font-body);
  font-size: 0.8125rem;
}
.skip-link:focus { left: var(--space-4); top: var(--space-4); }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------------------------
   LAYOUT PRIMITIVES
   ------------------------------------------------------------------------ */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--space-5);
}

@media (min-width: 768px) {
  .shell { padding-inline: var(--space-7); }
}

.band { padding-block: var(--space-9); }

@media (min-width: 768px) {
  .band { padding-block: var(--space-10); }
}

.band--sunken  { background: var(--surface-sunken); }
.band--inverse { background: var(--surface-inverse); color: var(--text-on-dark-mut); }
.band--inverse h2,
.band--inverse h3,
.band--inverse h4 { color: var(--text-on-dark); }

/* ---------------------------------------------------------------------------
   TYPE PATTERNS
   ------------------------------------------------------------------------ */
.eyebrow {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-on-light);
  margin: 0 0 var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.eyebrow::before {
  content: "";
  width: 24px;
  height: 1px;
  background: currentColor;
  flex: none;
}

.band--inverse .eyebrow { color: var(--accent); }

.section-title {
  font-size: clamp(1.125rem, 0.9rem + 1.4vw, 1.75rem);
  max-width: 22ch;
}

.section-lede {
  margin-top: var(--space-5);
  max-width: 62ch;
  font-size: 1.0625rem;
  color: var(--text-muted);
}

.band--inverse .section-lede { color: var(--text-on-dark-mut); }

.section-head { margin-bottom: var(--space-8); }

/* ---------------------------------------------------------------------------
   BUTTONS
   ------------------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  min-height: 48px;
  padding: var(--space-3) var(--space-6);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              color var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}

.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn__arrow { transition: transform var(--dur) var(--ease); }
.btn:hover .btn__arrow { transform: translateX(3px); }

.btn--primary {
  background: var(--accent);
  color: var(--brand-ink);
  border-color: var(--accent);
}
.btn--primary:hover { background: var(--accent-bright); border-color: var(--accent-bright); }

.btn--ghost {
  background: transparent;
  color: var(--text-on-dark);
  border-color: rgba(255, 255, 255, 0.28);
}
.btn--ghost:hover { border-color: var(--accent); color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  .btn, .btn__arrow { transition: none; }
  .btn:hover { transform: none; }
  .btn:hover .btn__arrow { transform: none; }
}

/* ---------------------------------------------------------------------------
   HEADER
   ------------------------------------------------------------------------ */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  transition: background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
  border-bottom: 1px solid transparent;
}

.site-header.is-stuck {
  background: rgba(37, 42, 46, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom-color: var(--line-dark);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  min-height: 76px;
}

/* Logo ---------------------------------------------------------------------
   Placeholder wordmark + mark. To use your own logo file, replace the
   contents of <a class="logo"> in index.html with an <img>. */
.logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 44px;          /* tap target, independent of artwork height */
  min-width: 44px;           /* the compact isotype is only 38px wide */
  text-decoration: none;
  color: var(--text-on-dark);
  flex: none;
}

/* Real brand artwork from BRANDING/LOGO, cropped to content.
   The reversed (-light) variants are used on the dark header and footer. */


.logo__lockup-img { height: 26px; width: auto; }

@media (min-width: 768px) {
  .logo__lockup-img { height: 32px; }
}

/* --- Header lockup -> isotype swap ---------------------------------------
   Both images are stacked in one box. Only the box's width animates, and it
   is derived from a single height token times each artwork's aspect ratio:
     lockup  862 / 178 = 4.843
     isotype 340 / 235 = 1.447
   Keeping it arithmetic means re-cropping the art only changes the ratios. */
.logo__stack {
  --logo-h: 26px;
  position: relative;
  display: block;
  height: var(--logo-h);
  width: calc(var(--logo-h) * 4.843);
  transition: width var(--dur) var(--ease);
}

@media (min-width: 768px) {
  .logo__stack { --logo-h: 32px; }
}

.logo__full,
.logo__mark {
  position: absolute;
  inset: 0 auto 0 0;
  height: 100%;
  width: auto;
  transition: opacity var(--dur) var(--ease);
}

.logo__mark { opacity: 0; }

.site-header.is-compact .logo__stack { width: calc(var(--logo-h) * 1.447); }
.site-header.is-compact .logo__full  { opacity: 0; }
.site-header.is-compact .logo__mark  { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .logo__stack,
  .logo__full,
  .logo__mark { transition: none; }
}

/* Nav ---------------------------------------------------------------------- */
.nav { display: none; }

@media (min-width: 1024px) {
  .nav {
    display: flex;
    align-items: center;
    gap: var(--space-6);
  }
}

.nav__link {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-decoration: none;
  color: var(--brand-slate-200);
  padding-block: var(--space-2);
  position: relative;
  transition: color var(--dur) var(--ease);
}

.nav__link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease);
}

.nav__link:hover { color: var(--text-on-dark); }
.nav__link:hover::after,
.nav__link.is-active::after { transform: scaleX(1); }
.nav__link.is-active { color: var(--text-on-dark); }

.header__cta { display: none; }
@media (min-width: 1024px) { .header__cta { display: inline-flex; } }

/* Mobile menu -------------------------------------------------------------- */
.menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: var(--radius-pill);
  color: var(--text-on-dark);
  cursor: pointer;
}

@media (min-width: 1024px) { .menu-toggle { display: none; } }

.menu-toggle__bars { width: 16px; height: 10px; position: relative; }
.menu-toggle__bars::before,
.menu-toggle__bars::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 1.5px;
  background: currentColor;
  transition: transform var(--dur) var(--ease);
}
.menu-toggle__bars::before { top: 0; }
.menu-toggle__bars::after  { bottom: 0; }

.menu-toggle[aria-expanded="true"] .menu-toggle__bars::before { transform: translateY(4.25px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars::after  { transform: translateY(-4.25px) rotate(-45deg); }

/* Language switcher --------------------------------------------------------
   Lives on dark ground in both places it appears: the fixed header (over the
   hero, and over the stuck dark bar) and the mobile nav panel. Flags are
   inline SVG so they cost no request and stay crisp; the EN/ES code beside
   each one carries the meaning, since a flag names a country rather than a
   language. */
.lang {
  display: none;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
}

.lang--mobile {
  display: inline-flex;
  margin-top: var(--space-4);
}

@media (min-width: 1024px) {
  .lang { display: inline-flex; }

  /* With the switcher present the header has four children. Centre the nav
     on its own margins so the quote button and the switcher stay paired at
     the right edge instead of being spread apart by space-between. */
  .site-header__inner { justify-content: flex-start; }
  .nav { margin-inline: auto; }
}

.lang__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 11px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: rgba(255, 255, 255, 0.72);
  font-family: inherit;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.lang__btn:hover { color: #fff; }

.lang__btn.is-current {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}

.lang__btn:focus-visible {
  outline: 2px solid var(--brand-sky);
  outline-offset: 2px;
}

.lang__flag {
  display: block;
  width: 20px;
  height: 10.53px;
  border-radius: 1.5px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
  /* Two saturated flags shout in a header this restrained. The inactive one
     sits back in grey and only the selected language carries colour, which
     also makes the current choice readable at a glance. */
  filter: grayscale(1);
  opacity: 0.6;
  transition: filter var(--dur) var(--ease), opacity var(--dur) var(--ease);
}

.lang__btn.is-current .lang__flag,
.lang__btn:hover .lang__flag { filter: none; opacity: 1; }

.lang__code { line-height: 1; }

/* Roomier targets on the touch panel. */
.lang--mobile .lang__btn { padding: 11px 18px; font-size: 0.76rem; }
.lang--mobile .lang__flag { width: 24px; height: 12.63px; }

@media (prefers-reduced-motion: reduce) {
  .lang__btn, .lang__flag { transition: none; }
}

.mobile-nav {
  position: fixed;
  inset: 76px 0 auto 0;
  z-index: 99;
  background: var(--surface-inverse);
  border-bottom: 1px solid var(--line-dark);
  padding: var(--space-4) 0 var(--space-6);
  display: none;
}

.mobile-nav.is-open { display: block; }
@media (min-width: 1024px) { .mobile-nav.is-open { display: none; } }

.mobile-nav__link {
  display: block;
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--line-dark);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: 0.06em;
  text-decoration: none;
  color: var(--text-on-dark);
}

.mobile-nav .btn { margin-top: var(--space-5); width: 100%; }

/* ---------------------------------------------------------------------------
   HERO
   ------------------------------------------------------------------------ */
.hero {
  position: relative;
  background: var(--surface-inverse);
  color: var(--text-on-dark);
  padding-block: calc(76px + var(--space-9)) var(--space-9);
  overflow: hidden;
  isolation: isolate;
}

@media (min-width: 768px) {
  .hero { padding-block: calc(76px + var(--space-10)) var(--space-10); }
}

/* Photographic base, blurred and pushed back under a steel-blue wash, so it
   reads as atmosphere and the globe stays the thing you look at.
   The blur is on its own layer: blurring the element that also carries the
   gradients would soften those too, and blur bleeds transparent pixels in
   from the edges, hence the inset and scale. */
.hero__photo {
  position: absolute;
  inset: -4%;
  z-index: -2;
  background: url("MEDIA/hero-plant-night.jpg") center / cover no-repeat;
  filter: blur(2.5px) saturate(0.82);
  transform: scale(1.04);
  opacity: 0.70;
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(120% 90% at 78% 8%, rgba(117, 183, 217, 0.16) 0%, transparent 55%),
    radial-gradient(90% 70% at 12% 100%, rgba(66, 103, 122, 0.34) 0%, transparent 60%),
    /* Directional wash rather than an even one: heavy on the left so the
       headline sits on near-solid charcoal, lifting across to the right where
       only the globe is, which is where the refinery actually reads. */
    linear-gradient(100deg,
      rgba(37, 42, 46, 0.88) 0%,
      rgba(37, 42, 46, 0.78) 34%,
      rgba(34, 56, 74, 0.50) 66%,
      rgba(24, 38, 52, 0.56) 100%);
}


.hero__inner {
  display: grid;
  gap: var(--space-8);
  align-items: center;
}

@media (min-width: 1024px) {
  .hero__inner {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: var(--space-8);
  }
}

.hero .eyebrow { color: var(--accent); }

.hero__title {
  color: var(--text-on-dark);
  font-size: clamp(1.375rem, 0.85rem + 2.35vw, 2.5rem);
  font-weight: 700;
  letter-spacing: 0;        /* large caps need less tracking than small ones */
  max-width: 15ch;
}

.hero__title strong { color: var(--accent); }

.hero__lede {
  margin-top: var(--space-6);
  max-width: 54ch;
  font-size: 1.0625rem;
  color: var(--text-on-dark-mut);
}

.hero__actions {
  margin-top: var(--space-7);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

/* Hero spec strip — mono data row, echoes an instrument datasheet. */
.hero__specs {
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line-dark);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
}

@media (min-width: 560px) {
  .hero__specs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.spec__value {
  font-family: var(--font-display);
  font-stretch: 125%;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--text-on-dark);
  letter-spacing: 0.02em;
}

.spec__label {
  margin-top: var(--space-1);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-slate-400);
}

/* ---------------------------------------------------------------------------
   EQUIPMENT LIST
   Names only — no invented descriptions. Same panel treatment as the rest of
   the cards so the section still reads as part of the family.
   ------------------------------------------------------------------------ */
.kit {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fill, minmax(262px, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.kit__item {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-height: 76px;
  /* Tighter side padding: the longest single word only just fits otherwise,
     and it is unbreakable, so a few pixels decide whether it wraps badly. */
  padding: var(--space-4);
  border: 1px solid var(--card-line);
  border-radius: var(--radius-lg);
  background: var(--panel-wash-light);
  font-family: var(--font-display);
  font-stretch: 125%;
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  /* "Instrumentation" is one long unbreakable word in a very wide face.
     min-width lets the flex child shrink instead of pushing out of the tile;
     overflow-wrap is a last resort for viewports narrower than we target. */
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--text-strong);
  transition: background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              color var(--dur) var(--ease);
}

/* One line icon per item, drawn to the actual equipment rather than a
   generic shape — a buyer in this industry reads these at a glance. */
.kit__icon {
  flex: none;
  width: 28px;
  height: 28px;
  color: var(--accent-on-light);
  transition: color var(--dur) var(--ease);
}

.kit__item:hover {
  background: var(--card-hover);
  border-color: var(--card-hover);
  color: var(--brand-white);
}

.kit__item:hover .kit__icon { color: var(--brand-white); }

/* ---------------------------------------------------------------------------
   SPLIT / DIFFERENTIATOR
   ------------------------------------------------------------------------ */
/* ---------------------------------------------------------------------------
   ABOUT LAYOUT — illustration left, copy right.
   Mirrors the hero (copy left, globe right) so the two sections zig-zag.
   ------------------------------------------------------------------------ */
.about__layout {
  display: grid;
  gap: var(--space-7);
  align-items: center;
}

@media (min-width: 900px) {
  .about__layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.88fr);
    gap: var(--space-8);
  }
}

/* Media column: below the copy on mobile, beside it from 900px up. */
.about__media { order: 2; }

@media (min-width: 900px) {
  .about__media { order: 0; }
}

/* ---------------------------------------------------------------------------
   IMAGE SLIDER
   Crossfade rather than a horizontal track: the slides are stacked, so a
   fixed aspect box holds its height and nothing reflows between images.
   ------------------------------------------------------------------------ */
.slider {
  position: relative;
  aspect-ratio: 3 / 2;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--card-line);
  background: var(--brand-ink);
}

.slider__track {
  margin: 0;
  padding: 0;
  list-style: none;
  position: absolute;
  inset: 0;
}

.slider__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 700ms var(--ease);
}

.slider__slide.is-current { opacity: 1; }

.slider__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Dots sit on a gradient so they stay legible over any photograph. */
.slider__dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-7) var(--space-4) var(--space-4);
  background: linear-gradient(to top, rgba(19, 28, 37, 0.72), transparent);
}

.slider__dot {
  position: relative;   /* the 44px hit area below anchors to this, not .slider */
  width: 34px;
  height: 4px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.38);
  cursor: pointer;
  transition: background-color var(--dur) var(--ease);
}

/* The visible bar is 4px, but the hit area needs to clear 44px. */
.slider__dot::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}

.slider__dot:hover { background: rgba(255, 255, 255, 0.66); }
.slider__dot.is-current { background: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  .slider__slide { transition: none; }
}

.about__copy { text-align: left; }

.about__copy .section-head { margin-bottom: var(--space-7); }

.about__text {
  display: grid;
  gap: var(--space-5);
  margin-top: var(--space-6);
}

.about__text p {
  max-width: 58ch;
  color: var(--text-muted);
}

/* Mission / Vision pair — two equal statements side by side. */
.duo {
  display: grid;
  gap: var(--space-5);
  align-items: stretch;
}

@media (min-width: 900px) {
  .duo { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8); }
}

/* Equal-height panels. No accent rule on top — the tag pill carries the
   labelling instead, which keeps both columns visually balanced. */
.duo__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-6);
  background: var(--panel-wash-dark);
  border: 1px solid var(--panel-line-dark);
  border-radius: var(--radius-lg);
  transition: border-color var(--dur) var(--ease);
}

@media (min-width: 900px) {
  .duo__item { padding: var(--space-7); }
}

.duo__item:hover { border-color: rgba(117, 183, 217, 0.42); }

.duo__tag {
  align-self: flex-start;
  margin: 0;
  padding: var(--space-2) var(--space-4);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-on-dark);
}

/* Push the supporting copy to the bottom so both panels align. */
.duo__body {
  margin-top: auto;
  font-size: 0.9375rem;
  color: var(--text-on-dark-mut);
}





/* ---------------------------------------------------------------------------
   CTA BAND
   ------------------------------------------------------------------------ */
.cta-band {
  background: var(--surface-inverse);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(70% 120% at 85% 50%, rgba(117, 183, 217, 0.16) 0%, transparent 60%);
}

/* Contact band layout lives in the CONTACT section further down. */

/* ---------------------------------------------------------------------------
   FOOTER
   ------------------------------------------------------------------------ */
.site-footer {
  background: var(--brand-ink);
  color: var(--brand-slate-200);
  border-top: 1px solid var(--line-dark);
  padding-block: var(--space-8) var(--space-6);
}

.footer__top {
  display: grid;
  gap: var(--space-7);
  padding-bottom: var(--space-7);
  border-bottom: 1px solid var(--line-dark);
}

@media (min-width: 768px) { .footer__top { grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); gap: var(--space-8); } }

.footer__blurb { font-size: 0.875rem; max-width: 40ch; margin-top: var(--space-5); }

.footer__heading {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand-slate-400);
  margin-bottom: var(--space-4);
}

.footer__list { display: grid; gap: var(--space-3); }

.footer__link {
  font-size: 0.875rem;
  text-decoration: none;
  color: var(--brand-slate-200);
  transition: color var(--dur) var(--ease);
}
.footer__link:hover { color: var(--accent); }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-4);
  padding-top: var(--space-6);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-slate-400);
}

/* ---------------------------------------------------------------------------
   SCROLL REVEAL
   ------------------------------------------------------------------------ */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 600ms var(--ease), transform 600ms var(--ease);
}

.reveal.is-revealed { opacity: 1; transform: none; }

.reveal[data-delay="1"] { transition-delay: 80ms; }
.reveal[data-delay="2"] { transition-delay: 160ms; }
.reveal[data-delay="3"] { transition-delay: 240ms; }
.reveal[data-delay="4"] { transition-delay: 320ms; }
.reveal[data-delay="5"] { transition-delay: 400ms; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------------------------------------------------------------------------
   MISSION & VISION
   ------------------------------------------------------------------------ */


.values {
  margin-top: var(--space-7);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.value {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-on-dark);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-pill);
  padding: var(--space-2) var(--space-5);
}

/* ---------------------------------------------------------------------------
   CONTACT — details + RFQ form
   The contact band is dark, so headings and lede need the inverse treatment.
   ------------------------------------------------------------------------ */
.cta-band { color: var(--text-on-dark-mut); }
.cta-band h2, .cta-band h3 { color: var(--text-on-dark); }
.cta-band .eyebrow { color: var(--accent); }
.cta-band .section-lede { color: var(--text-on-dark-mut); }

.contact { display: grid; gap: var(--space-7); align-items: start; }

@media (min-width: 900px) {
  .contact { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--space-8); }
}

.contact__details { display: grid; gap: var(--space-4); }

@media (min-width: 560px) {
  .contact__details { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.contact-card {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-5);
  min-height: 48px;
  border: 1px solid var(--panel-line-dark);
  border-radius: var(--radius-lg);
  background: var(--panel-wash-dark);
  text-decoration: none;
  color: var(--text-on-dark);
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

a.contact-card:hover { border-color: rgba(117, 183, 217, 0.42); }

.contact-card__icon { width: 20px; height: 20px; color: var(--accent); }

.contact-card__label {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-slate-400);
}

.contact-card__value { font-size: 0.9375rem; line-height: 1.45; }

/* RFQ form ---------------------------------------------------------------- */
.rfq {
  display: grid;
  gap: var(--space-5);
  padding: var(--space-6);
  border: 1px solid var(--panel-line-dark);
  border-radius: var(--radius-lg);
  background: var(--panel-wash-dark);
}

@media (min-width: 640px) { .rfq { padding: var(--space-7); } }

.rfq__title { font-size: 0.9375rem; }

.field { display: grid; gap: var(--space-2); }

.field__label {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-slate-200);
}

.field__input {
  width: 100%;
  min-height: 48px;
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--text-on-dark);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius);
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.field__input:hover { border-color: rgba(255, 255, 255, 0.32); }

.field__input:focus {
  outline: none;
  border-color: var(--accent);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 0 0 3px rgba(117, 183, 217, 0.22);
}

.field__input--area { resize: vertical; min-height: 112px; line-height: 1.5; }

/* Native select needs an explicit arrow once the background is restyled. */
select.field__input {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%2375B7D9' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-4) center;
  padding-right: var(--space-7);
}

select.field__input option { color: #111; background: #fff; }

.field__hint { font-size: 0.8125rem; color: var(--brand-slate-400); }

.field__error { font-size: 0.8125rem; color: #FF9C92; }

.field__input[aria-invalid="true"] { border-color: #FF9C92; }

.rfq__submit { justify-self: start; }

.rfq__status { font-size: 0.875rem; color: var(--accent); min-height: 1.25rem; }

/* ---------------------------------------------------------------------------
   SUB-BLOCKS — a titled group inside a section, used to fold several themes
   into one section without spawning new top-level sections.
   ------------------------------------------------------------------------ */
.block { margin-top: var(--space-9); }

.block__title {
  font-size: clamp(0.9375rem, 0.88rem + 0.4vw, 1.0625rem);
  margin-bottom: var(--space-7);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--line);
}

.band--inverse .block__title { border-bottom-color: var(--line-dark); }

/* ---------------------------------------------------------------------------
   MANIFESTO — the large mission / vision statement
   ------------------------------------------------------------------------ */
.manifesto {
  font-family: var(--font-display);
  font-stretch: 125%;
  font-size: clamp(1rem, 0.9rem + 0.75vw, 1.3125rem);
  line-height: 1.35;
  letter-spacing: 0;
  font-weight: 600;
  color: var(--text-strong);
  max-width: 26ch;
  margin-bottom: var(--space-8);
}

.band--inverse .manifesto { color: var(--text-on-dark); }

/* Inside the Mission/Vision pair the statement fills its column. */
/* The manifesto is a full sentence, not a title — all-caps would wreck its
   readability at this length, so it deliberately stays sentence case. */
.duo .manifesto { max-width: none; margin-bottom: 0; }

/* ---------------------------------------------------------------------------
   BLOCK HEAD — title with controls on the right
   ------------------------------------------------------------------------ */
.block__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  margin-bottom: var(--space-7);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--line);
}

/* The border/spacing move up to .block__head, so the title inside it is bare. */
.block__head .block__title {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0;
}

.band--inverse .block__head { border-bottom-color: var(--line-dark); }

/* ---------------------------------------------------------------------------
   HORIZONTAL CARD SCROLLER
   Native overflow scrolling does the work — touch, trackpad and shift+wheel
   all function with no JS. Arrows and arrow-key support are enhancements.
   ------------------------------------------------------------------------ */
.scroller__nav { display: flex; gap: var(--space-2); flex: none; }

/* Hidden when every card already fits; main.js sets this. */
.scroller__nav[hidden] { display: none; }

.scroller__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--card-line);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--accent-on-light);
  cursor: pointer;
  transition: background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              color var(--dur) var(--ease),
              opacity var(--dur) var(--ease);
}

.scroller__btn svg { width: 16px; height: 16px; }

.scroller__btn:hover:not(:disabled) {
  background: var(--accent-on-light);
  border-color: var(--accent-on-light);
  color: var(--brand-white);
}

.scroller__btn:disabled { opacity: 0.3; cursor: not-allowed; }

.scroller {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;          /* Firefox */
  -ms-overflow-style: none;       /* old Edge */
  /* Room for the card lift on hover, and for the focus ring. */
  padding: 4px 4px var(--space-4);
  margin: -4px -4px 0;
}

.scroller::-webkit-scrollbar { display: none; }

.scroller__track {
  display: flex;
  gap: var(--space-5);
  align-items: stretch;
}

.ind-card {
  flex: 0 0 clamp(240px, 78vw, 296px);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6);
  background: var(--panel-wash-light);
  border: 1px solid var(--card-line);
  border-radius: var(--radius-lg);
  transition: background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              color var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}

@media (min-width: 640px) {
  .ind-card { flex-basis: 296px; }
}

/* Same hover language as the solution cards: steel fill, white type. */
.ind-card:hover {
  background: var(--card-hover);
  border-color: var(--card-hover);
  transform: translateY(-3px);
}

.ind-card__icon {
  width: 32px;
  height: 32px;
  color: var(--accent-on-light);
  transition: color var(--dur) var(--ease);
}

.ind-card__title { font-size: 0.875rem; letter-spacing: 0.045em; }

.ind-card__body {
  margin-top: auto;
  font-size: 0.9375rem;
  color: var(--text-muted);
  transition: color var(--dur) var(--ease);
}

.ind-card__num {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  color: var(--accent-on-light);
  transition: color var(--dur) var(--ease);
}

.ind-card:hover .ind-card__icon,
.ind-card:hover .ind-card__num,
.ind-card:hover .ind-card__title { color: var(--brand-white); }
.ind-card:hover .ind-card__body { color: rgba(255, 255, 255, 0.88); }

@media (prefers-reduced-motion: reduce) {
  .ind-card { transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease); }
  .ind-card:hover { transform: none; }
}

/* ---------------------------------------------------------------------------
   PRACTICE — staggered cards with an outlined numeral behind the text
   ------------------------------------------------------------------------ */
.practice {
  display: grid;
  gap: var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: practice;
}

@media (min-width: 900px) {
  /* Three level columns. Default grid stretch keeps the cards equal height,
     so they line up top and bottom regardless of copy length. */
  .practice { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.practice__item {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(160deg, rgba(117, 183, 217, 0.10) 0%, rgba(255, 255, 255, 0.02) 46%, rgba(255, 255, 255, 0.02) 100%);
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.practice__item:hover { border-color: rgba(117, 183, 217, 0.42); }

/* Big outlined numeral, sitting behind the copy. */
.practice__index {
  position: absolute;
  top: -14px;
  right: 4px;
  font-family: var(--font-display);
  font-stretch: 125%;
  font-size: 4.75rem;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.14);
  pointer-events: none;
  transition: -webkit-text-stroke-color var(--dur) var(--ease);
}

.practice__item:hover .practice__index { -webkit-text-stroke-color: rgba(117, 183, 217, 0.5); }

.practice__tag {
  position: relative;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}

.practice__title { position: relative; font-size: 0.875rem; letter-spacing: 0.045em; }

.practice__text { position: relative; font-size: 0.9375rem; color: var(--text-on-dark-mut); }

@media (prefers-reduced-motion: reduce) {
  .practice__item { transition: border-color var(--dur) var(--ease); }
}

/* ---------------------------------------------------------------------------
   GLOBE — orthographic projection, real coastline data.
   No frame: the sphere sits directly on the hero.
   ------------------------------------------------------------------------ */
.globe { position: relative; }

.globe__svg { width: 100%; height: auto; }

.globe__graticule { fill: none; stroke: rgba(255, 255, 255, 0.10); stroke-width: 1; }

.globe__land {
  fill: rgba(117, 183, 217, 0.22);
  stroke: rgba(117, 183, 217, 0.55);
  stroke-width: 0.8;
  stroke-linejoin: round;
}

.globe__rim { fill: none; stroke: rgba(117, 183, 217, 0.38); stroke-width: 1.2; }

/* Pinging location markers — a solid core with two ripples offset in time. */
.ping__core { fill: var(--accent-bright); }

.ping__wave {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.5;
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
}

.is-revealed .ping__wave { animation: ping 3200ms var(--ease) infinite; }
.is-revealed .ping__wave--b { animation-delay: 1600ms; }

@keyframes ping {
  0%   { transform: scale(0.6); opacity: 0; }
  12%  { opacity: 0.9; }
  100% { transform: scale(3.4); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .is-revealed .ping__wave { animation: none; opacity: 0.5; }
}

/* ---------------------------------------------------------------------------
   CUSTOM DOT CURSOR
   Only on devices with a fine pointer — never on touch, where there is no
   cursor to replace and hiding it would strand the user.
   The dot swaps between the two brand blues depending on whether it is over
   a dark or a light section, so it stays clearly visible on both: sky blue
   reads 6.6:1 on the charcoal, steel blue 6.1:1 on white. (A blend mode was
   tried first and could not work here — the transform on the parent creates
   a stacking context, which traps the blend so it never sees the page.)
   ------------------------------------------------------------------------ */
.cursor { display: none; }

@media (pointer: fine) {
  /* Only hide the native cursor once JS has confirmed it can draw ours,
     so a script failure never leaves the page with no cursor at all. */
  .has-dot-cursor,
  .has-dot-cursor a,
  .has-dot-cursor button,
  .has-dot-cursor summary,
  .has-dot-cursor [role="button"],
  .has-dot-cursor .scroller { cursor: none; }

  /* Form fields keep the native I-beam — losing it makes text hard to place. */
  .has-dot-cursor input,
  .has-dot-cursor textarea,
  .has-dot-cursor select { cursor: auto; }

  .has-dot-cursor .cursor {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    pointer-events: none;
    will-change: transform;
  }

  .cursor__dot {
    display: block;
    width: 10px;
    height: 10px;
    margin: -5px 0 0 -5px;
    border-radius: var(--radius-pill);
    background: var(--brand-steel);
    transition: transform 200ms var(--ease),
                opacity 200ms var(--ease),
                background-color 160ms var(--ease);
  }

  /* Over a dark section, switch to the lighter blue. */
  .cursor.is-on-dark .cursor__dot { background: var(--brand-sky); }

  /* Grows over anything clickable. */
  .cursor.is-active .cursor__dot { transform: scale(3.4); }

  /* Hidden over form fields and when the pointer leaves the window. */
  .cursor.is-hidden .cursor__dot { opacity: 0; transform: scale(0.5); }
}

@media (prefers-reduced-motion: reduce) {
  .cursor__dot { transition: none; }
}

/* ---------------------------------------------------------------------------
   STATEMENT BLOCK — a short standalone passage with no heading above it,
   used for the integrity & compliance note.
   ------------------------------------------------------------------------ */
.statement-block { max-width: 68ch; }

.statement-block__body {
  font-size: 1.0625rem;
  color: var(--text-muted);
}

/* ---------------------------------------------------------------------------
   CONTACT BACKDROP — same approach as the hero
   ------------------------------------------------------------------------ */
.contact__photo {
  position: absolute;
  inset: -4%;
  z-index: -2;
  background: url("MEDIA/contact-port-sunset.jpg") center / cover no-repeat;
  /* The photograph is a warm sunset; desaturating hard is what lets the
     charcoal wash sit over it without going muddy. The silhouettes survive
     because they are almost black to begin with. */
  filter: blur(3px) saturate(0.28) brightness(0.9);
  transform: scale(1.05);
  opacity: 0.55;
  pointer-events: none;
}

/* The existing ::before on .cta-band supplies the wash; deepen it so the
   form panel and contact cards stay clearly readable on top. */
.cta-band::before {
  background:
    radial-gradient(70% 120% at 85% 40%, rgba(117, 183, 217, 0.14) 0%, transparent 60%),
    linear-gradient(180deg, rgba(37, 42, 46, 0.86) 0%, rgba(28, 44, 58, 0.80) 50%, rgba(19, 28, 37, 0.90) 100%);
}

/* Honeypot. Positioned off-screen rather than display:none — some bots skip
   hidden inputs, and this one only works if they fill it in. */
.rfq__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.rfq__status--error { color: #FF9C92; }
.rfq__status--ok { color: var(--accent); }