/* =========================================================
   OZOFRYN — v5 Redesign
   Restrained corporate stylesheet
   White canvas · charcoal type · accent used sparingly
   ========================================================= */

:root{
  /* ---- Brand ---- */
  --ink:        #16181D;   /* primary charcoal text */
  --ink-soft:   #454A55;   /* secondary body text */
  --ink-mute:   #767C88;   /* tertiary / meta text */
  --line:       #E3E5EA;   /* hairline borders */
  --line-soft:  #EEF0F3;
  --surface:    #FFFFFF;   /* page canvas — mandated white */
  --surface-alt:#F6F7F9;   /* alternating section tint */
  --surface-dark:#0A1606;  /* closing band — dark green, derived from the brand accent (client feedback: "still dark blue" after the footer went green) */
  --surface-dark-soft:#0C1B08;  /* footer — dark green, one step lighter than the closing band, same relationship as the original navy pair */

  --accent:       #358611;  /* approved brand accent (dark green) — now used confidently, not sparingly (client feedback: v1 lacked color) */
  --accent-deep:  #2A6A0E;  /* hover/active state for accent-filled elements */
  --accent-tint:  #EFF7E8;  /* light accent wash for section backgrounds */
  --accent-ink:   #FFFFFF;  /* text sitting on accent */
  --link:       #23306B;   /* restrained blue for links, not neon */

  --tbc-bg:     #FBF6E8;
  --tbc-border: #E4CE8B;
  --tbc-text:   #6B5211;  /* darkened from #8A6A16 for contrast — matches .tbc-note, which independently used this shade for its smaller text (6.9:1 vs 4.7:1 on --tbc-bg) */

  /* ---- Type ----
     Client reference: Bunker Partner (bunkerpartner.com) — Lexend used site-wide
     for a rounder, warmer feel than the brand guideline's Oswald/Inter/Open Sans.
     One family, three weights, still three "roles" per DESIGN.md's Three-Role Rule. */
  --font-display: 'Lexend', 'Segoe UI', Arial, sans-serif;
  --font-ui:      'Lexend', 'Segoe UI', Arial, sans-serif;
  --font-body:    'Lexend', 'Segoe UI', Arial, sans-serif;
  --nav-h: 76px;

  /* ---- Supplementary size scale ----
     Sits below the 5 structural typography roles (display/headline/title/body/label)
     documented in DESIGN.md. These are reused UI-density steps, not separate roles —
     shared across font-family contexts (Inter chrome and Open Sans content alike). */
  --text-2xs:     .72rem;   /* tag pills, filename chips */
  --text-sm:      .82rem;   /* breadcrumb, meta labels, form consent/legal text */
  --text-meta:    .85rem;   /* hero meta, disclaimer notes */
  --text-caption: .9rem;    /* placeholder captions, footer body/links */
  --text-body-sm: .94rem;   /* nav links, card copy, list rows — a touch below base body */
  --text-control: .95rem;   /* buttons, form inputs, hero meta emphasis */

  /* ---- Rhythm ----
     Client reference: Bunker Partner (bunkerpartner.com) — measured via
     getComputedStyle(), their sections use edge-to-edge Elementor containers
     (max-width: min(100%, 2560px), ~30-32px fixed padding), not a centered
     column. Widened from 1200px so sections fill the viewport the same way. */
  --container: 2200px;
  --gap: clamp(1.25rem, 2.4vw, 2rem);
  --section-y: clamp(3.5rem, 7vw, 6.5rem);
}

*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
html.js-ready [data-reveal]{ opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s ease; }
html.js-ready [data-reveal].is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  html.js-ready [data-reveal]{ opacity:1; transform:none; transition:none; }
}

body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink-soft);
  background:var(--surface);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{
  font-family:var(--font-display);
  color:var(--ink);
  font-weight:500;
  line-height:1.18;
  margin:0 0 .6em;
  letter-spacing:-0.02em;
}
/* Heading scale matched to Bunker Partner (getComputedStyle() at 1920px:
   h1 102px/500/-2px, h2 50px/500/-2px) — weight and tracking dropped to their
   lighter, tighter values now that size carries the emphasis. Client felt the
   first pass (max 102px) read too big, so the ceiling was pulled back ~22%
   toward Bunker Partner's own narrower-viewport size (measured 80px at 1014px)
   while keeping the same weight/tracking treatment. */
h1{ font-size:clamp(2.5rem, 4.75vw, 5rem); }
h2{ font-size:clamp(1.75rem, 3.2vw, 2.5rem); }
h3{ font-size:clamp(1.25rem, 1.7vw, 1.5rem); }
h4{ font-size:1.1rem; }
p{ margin:0 0 1em; max-width:70ch; }
a{ color:var(--link); text-decoration:none; }
a.text-link{
  color:var(--ink);
  border-bottom:1px solid var(--ink);
  padding-bottom:2px;
  font-weight:700;
  display:inline-flex;
  align-items:center;
  gap:.4em;
  transition:border-color .2s ease, color .2s ease;
}
a.text-link:hover{ color:var(--accent-deep); border-color:var(--accent-deep); }
a.text-link svg{ width:14px; height:14px; flex:none; transition:transform .2s ease; }
a.text-link:hover svg{ transform:translateX(3px); }

ul{ margin:0 0 1em; padding-left:1.15em; }
li{ margin-bottom:.35em; }

img{ max-width:100%; display:block; }

.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:clamp(1.25rem, 4vw, 2.5rem);
}

section{ padding-block:var(--section-y); }
section.alt{ background:var(--surface-alt); }
section.tight{ padding-block: clamp(2rem, 4vw, 3.25rem); }
.section-border-top{ border-top:1px solid var(--line); }

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.55em;
  font-family:var(--font-ui);
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--accent-deep);
  margin-bottom:.9em;
}
.eyebrow::before{
  content:"";
  width:22px; height:2px;
  background:var(--accent);
  flex:none;
}

.lede{
  font-size:1.1rem;
  color:var(--ink-soft);
  max-width:62ch;
}

.grid{ display:grid; gap:var(--gap); }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:900px){
  .grid-3,.grid-4{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:640px){
  .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; }
}

.two-col{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2rem,5vw,4.5rem);
  align-items:start;
}
@media (max-width:860px){ .two-col{ grid-template-columns:1fr; } }

/* ---------------------------------------------------------
   Buttons — restrained: solid ink or outline only
   --------------------------------------------------------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.55em;
  padding:.9em 1.6em;
  font-family:var(--font-ui);
  font-size:var(--text-control);
  font-weight:700;
  letter-spacing:.01em;
  border-radius:12px;
  border:1px solid transparent;
  cursor:pointer;
  transition:background-color .2s ease, color .2s ease, border-color .2s ease, transform .15s ease;
  white-space:nowrap;
}
.btn:active{ transform:translateY(1px); }
.btn-primary{
  background:var(--accent);
  color:#fff;
  border-color:var(--accent);
}
.btn-primary:hover{ background:var(--accent-deep); border-color:var(--accent-deep); }
.btn-outline{
  background:transparent;
  color:var(--ink);
  border-color:var(--ink);
}
.btn-outline:hover{ background:var(--ink); color:#fff; }
.btn-on-dark{
  background:transparent;
  color:#fff;
  border-color:rgba(255,255,255,.5);
}
.btn-on-dark:hover{ background:#fff; color:var(--ink); border-color:#fff; }
.btn-accent-line{ position:relative; }
.btn-accent-line::after{
  content:"";
  position:absolute; left:1.6em; right:1.6em; bottom:-6px;
  height:2px; background:var(--accent);
  opacity:0; transition:opacity .2s ease;
}
.cta-row{ display:flex; flex-wrap:wrap; gap:1rem; align-items:center; margin-top:1.75rem; }

/* ---------------------------------------------------------
   TBC / confirmation-pending copy markers
   --------------------------------------------------------- */
.tbc{
  background:var(--tbc-bg);
  border:1px dashed var(--tbc-border);
  color:var(--tbc-text);
  padding:.05em .45em;
  border-radius:3px;
  font-style:normal;
  cursor:help;
}
.tbc-note{
  display:flex;
  gap:.7em;
  align-items:flex-start;
  background:var(--tbc-bg);
  border:1px solid var(--tbc-border);
  color:var(--tbc-text);
  padding:.9em 1.1em;
  border-radius:6px;
  font-size:var(--text-caption);
  margin:1.25em 0;
}
.tbc-note svg{ flex:none; width:18px; height:18px; margin-top:.15em; }

/* ---------------------------------------------------------
   Header / Nav
   --------------------------------------------------------- */
.skip-link{
  position:absolute; left:-9999px; top:0;
  background:var(--ink); color:#fff; padding:.75em 1.25em; z-index:200;
}
.skip-link:focus{ left:1em; top:1em; }

.nav{
  position:sticky; top:0; z-index:100;
  background:#fff;
  border-bottom:1px solid transparent;
  transition:border-color .25s ease, box-shadow .25s ease;
}
.nav.is-scrolled{ border-color:var(--line); box-shadow:0 1px 0 rgba(0,0,0,.02); }
.nav__bar{
  height:var(--nav-h);
  display:flex; align-items:center; justify-content:space-between;
  gap:1.5rem;
}
.nav__logo{ display:flex; align-items:center; flex:none; }
.nav__logo img{ height:38px; width:auto; }

.nav__links{ display:flex; align-items:center; gap:2rem; margin:0; padding:0; list-style:none; }
.nav__links > li{ position:relative; margin:0; }
.nav__links a{
  font-family:var(--font-ui);
  color:var(--ink);
  font-weight:600;
  font-size:var(--text-body-sm);
  display:flex; align-items:center; gap:.35em;
  padding:.5em 0;
}
.nav__links a:hover{ color:var(--accent-deep); }
.nav__links .nav__has-sub > a svg{ width:11px; height:11px; transition:transform .2s ease; }

.nav__sub{
  position:absolute; top:100%; left:-1.1em;
  min-width:220px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:8px;
  box-shadow:0 14px 34px rgba(15,20,30,.09);
  margin:0; padding:.5em;
  opacity:0; visibility:hidden; transform:translateY(6px);
  transition:opacity .18s ease, transform .18s ease, visibility .18s ease;
  list-style:none;
}
.nav__has-sub:hover .nav__sub,
.nav__has-sub:focus-within .nav__sub{
  opacity:1; visibility:visible; transform:translateY(0);
}
.nav__sub a{ padding:.65em .75em; border-radius:6px; font-weight:600; }
.nav__sub a:hover{ background:var(--surface-alt); }
.nav__sub-desc{ display:block; font-weight:400; font-size:var(--text-sm); color:var(--ink-mute); margin-top:.1em; }

.nav__actions{ display:flex; align-items:center; gap:1.25rem; flex:none; }
.nav__toggle{
  display:none; flex:none;
  width:40px; height:40px;
  background:transparent; border:1px solid var(--line); border-radius:6px;
  flex-direction:column; align-items:center; justify-content:center; gap:4px;
  cursor:pointer; padding:0;
}
.nav__toggle .bar{
  display:block; width:18px; height:2px; background:var(--ink);
  transition:transform .2s ease, opacity .2s ease;
}
.nav.is-open .nav__toggle .bar:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.nav.is-open .nav__toggle .bar:nth-child(2){ opacity:0; }
.nav.is-open .nav__toggle .bar:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

.nav__cta{ display:none; }
.nav__cta .btn-primary{ color:#fff; }

@media (max-width:960px){
  .nav__toggle{ display:flex; }
  .nav__links{
    position:fixed; inset:var(--nav-h) 0 0 0;
    background:#fff;
    flex-direction:column; align-items:stretch;
    padding:1.5rem clamp(1.25rem,4vw,2.5rem);
    gap:0;
    transform:translateX(100%);
    transition:transform .25s ease;
    overflow-y:auto;
  }
  .nav.is-open .nav__links{ transform:translateX(0); }
  .nav__links > li{ border-bottom:1px solid var(--line); }
  .nav__links a{ padding:1em 0; justify-content:space-between; width:100%; }
  .nav__sub{
    position:static; opacity:1; visibility:visible; transform:none;
    box-shadow:none; border:none; padding:0 0 .5em; display:none;
  }
  .nav__has-sub.is-open .nav__sub{ display:block; }
  .nav__has-sub.is-open > a svg{ transform:rotate(180deg); }
  .nav__actions .btn-primary{ display:none; }
  .nav__cta{ display:list-item; border-bottom:none !important; margin-top:1rem; }
  .nav__cta a{ justify-content:center; }
}

/* ---------------------------------------------------------
   Hero — full-bleed video background, per brief
   --------------------------------------------------------- */
.hero{
  position:relative;
  display:flex;
  align-items:center;
  min-height:clamp(560px, 82vh, 800px);
  overflow:hidden;
  padding-block:clamp(6rem,14vw,8rem) clamp(3rem,6vw,4rem);
  color:#fff;
}
.hero__media{
  position:absolute; inset:0; z-index:0;
  background:var(--surface-dark); /* shows while video loads / if it fails */
}
.hero__media video,
.hero__media img{
  width:100%; height:100%; object-fit:cover; display:block;
}
.hero__scrim{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(100deg,
    rgba(14,20,32,.88) 0%,
    rgba(14,20,32,.66) 40%,
    rgba(14,20,32,.32) 72%,
    rgba(14,20,32,.14) 100%);
}
.hero__content{ position:relative; z-index:2; width:100%; }
.hero h1{ color:#fff; margin-bottom:.5em; max-width:16ch; }
.hero .lede{ color:rgba(255,255,255,.88); font-size:1.15rem; max-width:54ch; }
.hero__meta{
  display:flex; gap:1.5rem; flex-wrap:wrap;
  margin-top:2.25rem; padding-top:1.75rem; border-top:1px solid rgba(255,255,255,.22);
}
.hero__meta div{ font-size:var(--text-meta); color:rgba(255,255,255,.72); }
.hero__meta strong{ display:block; color:#fff; font-size:var(--text-control); margin-bottom:.15em; }
@media (max-width:640px){
  .hero{ min-height:clamp(480px, 88vh, 640px); }
}

.page-hero{
  padding-block:clamp(2.75rem,6vw,4.5rem) clamp(2.25rem,5vw,3.25rem);
  border-bottom:1px solid var(--line);
}
.page-hero .lede{ font-size:1.08rem; }
.breadcrumb{
  display:flex; align-items:center; gap:.5em;
  font-family:var(--font-ui);
  font-size:var(--text-sm); color:var(--ink-mute); margin-bottom:1.25em;
}
.breadcrumb a{ color:var(--ink-mute); }
.breadcrumb a:hover{ color:var(--accent-deep); }

/* ---------------------------------------------------------
   Media placeholder system
   Drop a file at the path shown and it replaces the block
   automatically — no markup edits required.
   --------------------------------------------------------- */
.media{
  position:relative;
  width:100%;
  aspect-ratio:var(--ar, 4/3);
  overflow:hidden;
  border-radius:8px;
  background:var(--surface-alt);
  border:1px solid var(--line);
}
.media img, .media video{
  width:100%; height:100%; object-fit:cover; border-radius:0; border:0;
}
.media__placeholder{
  position:absolute; inset:0;
  display:none;
  flex-direction:column; align-items:center; justify-content:center;
  text-align:center; gap:.6em;
  padding:1.5rem;
  background:
    repeating-linear-gradient(135deg, var(--surface-alt), var(--surface-alt) 10px, #EFF1F4 10px, #EFF1F4 20px);
  color:var(--ink-mute);
}
.media__placeholder svg{ width:30px; height:30px; opacity:.55; }
.media__placeholder strong{
  display:block; color:var(--ink-soft); font-size:var(--text-caption); max-width:34ch; line-height:1.4;
}
.media__placeholder code{
  font-family:'SFMono-Regular', Consolas, monospace;
  font-size:var(--text-2xs);
  background:#fff;
  border:1px solid var(--line);
  padding:.25em .5em;
  border-radius:4px;
  color:var(--ink-mute);
}

/* ---------------------------------------------------------
   Division panels (Bunkering / Bulk Trading) — the ONE
   card treatment used at this scale, per brief §13
   --------------------------------------------------------- */
.divisions{ gap:var(--gap); }
.division-card{
  --card-pad: clamp(1.75rem,3vw,2.5rem);
  border:1px solid var(--line);
  border-radius:10px;
  padding:var(--card-pad);
  display:flex; flex-direction:column; height:100%;
  background:#fff;
  transition:border-color .2s ease, box-shadow .2s ease;
  overflow:hidden;
}
.division-card:hover{ border-color:var(--accent); box-shadow:0 18px 40px rgba(15,20,30,.06); }
.division-card__media{
  aspect-ratio:16/9;
  flex:none;
  overflow:hidden;
  margin:calc(var(--card-pad) * -1) calc(var(--card-pad) * -1) 1.5rem;
}
.division-card__media img{ width:100%; height:100%; object-fit:cover; display:block; }
.division-card__tag{
  display:inline-block;
  font-family:var(--font-ui);
  font-size:var(--text-2xs); font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink);
  padding:.3em .7em;
  border:1px solid var(--line);
  border-radius:100px;
  margin-bottom:1.1em;
  width:fit-content;
}
.division-card p{ color:var(--ink-soft); flex:1; }
.division-card .text-link{ margin-top:.5em; }

/* ---------------------------------------------------------
   Product cards (the four true categories) — brief §13
   --------------------------------------------------------- */
.product-card{
  border:1px solid var(--line);
  border-radius:10px;
  padding:1.75rem;
  background:#fff;
  height:100%;
}
.product-card h3{ margin-bottom:.4em; }
.product-card p{ font-size:var(--text-body-sm); margin-bottom:.75em; }
.product-card__meta{ font-size:var(--text-sm); color:var(--ink-mute); border-top:1px solid var(--line-soft); padding-top:.9em; margin-top:auto; }
.product-card__meta div{ margin-bottom:.35em; }
.product-card__meta b{ color:var(--ink-soft); font-weight:700; }

/* ---------------------------------------------------------
   Numbered process steps — Home §8 "How Ozofryn works"
   --------------------------------------------------------- */
.steps{ counter-reset:step; }
.step{ display:flex; gap:1.25rem; padding:1.5rem 0; border-top:1px solid var(--line); }
.step:last-child{ border-bottom:1px solid var(--line); }
.step__num{
  flex:none; width:2.4rem; font-weight:700; color:var(--accent-deep);
  font-variant-numeric:tabular-nums; font-size:1rem; padding-top:.1em;
}
.step__body h4{ margin-bottom:.3em; }
.step__body p{ margin:0; font-size:var(--text-body-sm); }

/* ---------------------------------------------------------
   Simple line icons wrap
   --------------------------------------------------------- */
.icon{ width:20px; height:20px; flex:none; stroke:currentColor; fill:none; stroke-width:1.6; }

/* ---------------------------------------------------------
   Info list (label / value) — used for market & office facts
   --------------------------------------------------------- */
.fact-list{ list-style:none; padding:0; margin:0; }
.fact-list li{
  display:grid; grid-template-columns:9.5rem 1fr; gap:1rem;
  padding:.85em 0; border-top:1px solid var(--line-soft);
  font-size:var(--text-body-sm);
}
.fact-list li:first-child{ border-top:none; }
.fact-list dt, .fact-list b.k{ color:var(--ink); font-weight:700; }
@media (max-width:560px){ .fact-list li{ grid-template-columns:1fr; gap:.2rem; } }

/* ---------------------------------------------------------
   Tables (product / market comparison)
   --------------------------------------------------------- */
.table-wrap{ overflow-x:auto; border:1px solid var(--line); border-radius:8px; }
table.data{ width:100%; border-collapse:collapse; min-width:560px; font-size:.92rem; }
table.data th, table.data td{ text-align:left; padding:.9em 1.1em; border-bottom:1px solid var(--line-soft); vertical-align:top; }
table.data th{ font-family:var(--font-ui); background:var(--surface-alt); font-size:.75rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-mute); }
table.data tr:last-child td{ border-bottom:none; }

/* ---------------------------------------------------------
   Forms — enquiry forms (Bunkering / Bulk)
   --------------------------------------------------------- */
form.enquiry{ background:var(--surface-alt); border:1px solid var(--line); border-radius:12px; padding:clamp(1.5rem,3vw,2.5rem); }
.form-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1rem 1.25rem; }
@media (max-width:640px){ .form-grid{ grid-template-columns:1fr; } }
.field{ display:flex; flex-direction:column; }
.field.full{ grid-column:1/-1; }
.field label{ font-family:var(--font-ui); font-size:var(--text-sm); font-weight:700; color:var(--ink); margin-bottom:.4em; }
.field input, .field select, .field textarea{
  font-family:var(--font-body); font-size:var(--text-control); color:var(--ink);
  background:#fff; border:1px solid #CBCFD6; border-radius:6px; padding:.75em .85em;
  width:100%;
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--ink);
}
.field textarea{ resize:vertical; min-height:100px; }
.form-consent{ font-size:var(--text-sm); color:var(--ink-mute); margin:1.25rem 0 0; }
.form-consent a{ color:var(--ink-mute); text-decoration:underline; }
form.is-sent .form-fields{ display:none; }
.form-success{ display:none; text-align:center; padding:2rem 1rem; }
form.is-sent .form-success{ display:block; }
.form-success svg{ width:40px; height:40px; margin-bottom:1rem; color:var(--ink); }
.form-error-msg{
  display:none; align-items:flex-start; gap:.6em;
  background:#FBF0EF; border:1px solid #E7BDB8; color:#963A32;
  padding:.85em 1em; border-radius:6px; font-size:var(--text-sm);
  margin-top:1rem;
}
form.is-error .form-error-msg{ display:flex; }
.form-error-msg svg{ flex:none; width:18px; height:18px; margin-top:.1em; }

/* ---------------------------------------------------------
   Closing / contact band (dark, used once per page max)
   --------------------------------------------------------- */
.band-dark{
  background:var(--surface-dark);
  color:#D7DAE2;
}
.band-dark h2{ color:#fff; }
.band-dark .lede{ color:#B7BCC9; }
.band-dark .fact-list li{ border-color:rgba(255,255,255,.1); }
.band-dark .fact-list b.k{ color:#fff; }
.band-dark hr{ border-color:rgba(255,255,255,.12); }

/* ---------------------------------------------------------
   Accent band — full-bleed Verified Green section, white text.
   The green sibling of .band-dark: one confident color moment
   per page (client feedback: site read as "fully white,
   lacking contrast"). Uses accent-deep, not accent, for a
   safer white-text contrast margin (6.6:1 vs 4.6:1) and so a
   full section doesn't read as one giant button.
   --------------------------------------------------------- */
.band-accent{
  background:var(--accent-deep);
  color:#EAF3E3;
}
.band-accent h2, .band-accent h3, .band-accent h4{ color:#fff; }
.band-accent .lede{ color:#DCEACF; }
.band-accent .na-note{ color:#CFE0C3; }
.band-accent .eyebrow{ color:#fff; }
.band-accent .eyebrow::before{ background:#fff; }
.band-accent .step,
.band-accent .step:last-child{ border-color:rgba(255,255,255,.22); }
.band-accent .step__num{ color:#fff; }
.band-accent .btn-outline{
  color:#fff;
  border-color:rgba(255,255,255,.5);
}
.band-accent .btn-outline:hover{ background:#fff; color:var(--accent-deep); border-color:#fff; }

/* ---------------------------------------------------------
   Footer
   --------------------------------------------------------- */
.footer{ background:var(--surface-dark-soft); color:#AEB3C0; padding-block:3.5rem 2rem; }
.footer__top{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:2.5rem; padding-bottom:2.5rem; border-bottom:1px solid rgba(255,255,255,.1); }
@media (max-width:820px){ .footer__top{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .footer__top{ grid-template-columns:1fr; } }
.footer__logo{ height:34px; width:auto; margin-bottom:1em; }
.footer p{ color:#9CA1B0; font-size:var(--text-caption); }
.footer h5{ font-family:var(--font-ui); color:#fff; font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; margin-bottom:1em; }
.footer ul{ list-style:none; padding:0; margin:0; }
.footer li{ margin-bottom:.65em; }
.footer a{ color:#C4C8D3; font-size:var(--text-caption); }
.footer a:hover{ color:#fff; }
.footer__bottom{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem;
  padding-top:1.75rem; font-size:var(--text-sm); color:#8A909D;
}
.footer__tagline{ color:#9CA1B0; }
.footer__legal-links{ display:flex; gap:1.25rem; flex-wrap:wrap; }
.footer__legal-links a{ color:#8A909D; font-size:var(--text-sm); }
.footer__legal-links a:hover{ color:#fff; }

/* ---------------------------------------------------------
   Small taxonomy pill (homepage portfolio line)
   --------------------------------------------------------- */
.tag-pill{
  border:1px solid var(--line); border-radius:100px;
  padding:.5em 1.1em; font-size:var(--text-caption); font-weight:700;
  color:var(--ink); background:#fff;
}

/* ---------------------------------------------------------
   Misc utility
   --------------------------------------------------------- */
.center{ text-align:center; }
.mx-auto{ margin-inline:auto; }
.stack-sm > * + *{ margin-top:.75rem; }
.mt-0{ margin-top:0; }
.na-note{ font-size:var(--text-meta); color:var(--ink-mute); }
hr.rule{ border:none; border-top:1px solid var(--line); margin:2.5rem 0; }