/* ============================================================
   Freight Talent — prototype design system (standalone)
   REMUX editorial-cinematic, recoloured navy / white / orange.
   Self-contained (no Tailwind) so the prototype is fast + portable.
   Ported into the Tailwind build at Phase C.
   ============================================================ */

/* ---------- Tokens ---------- */
:root{
  --navy-950:#04111f;
  --navy-900:#06182b;
  --navy-800:#0a2540;
  --navy-700:#0e2e4d;
  --navy-600:#143a63;
  --navy:#003a5c;
  --navy-500:#005082;

  --ink:#0f172a;
  --slate:#41546b;
  --muted:#6b7c91;
  --line:#e4e9f0;
  --line-2:#eef2f7;

  --paper:#ffffff;
  --paper-2:#f6f9fc;
  --paper-3:#eef3f8;

  /* Transport Temps gold, from the logo (#C6A15B on #0B1F3A).
     Gold is far lighter than Freight Talent's orange, so two pairings that were
     fine there fail WCAG here: gold text on white is 2.43:1 and white text on a
     gold fill is 2.43:1. Two extra tokens carry those two jobs. Do not collapse
     them back into --accent. */
  --accent:#C6A15B;        /* brand gold — fills, rules, dots, focus rings       */
  --accent-2:#D8BE86;      /* light gold — accent TEXT ON DARK  (10.5:1 on navy) */
  --accent-deep:#A8843F;   /* hover / pressed on gold fills                      */
  --accent-ink:#8A6A2F;    /* accent TEXT ON LIGHT              (5.0:1 on white) */
  --accent-on:#04111f;     /* text ON a gold fill               (7.8:1)          */
  --accent-tint:#FBF6EA;   /* warm cream wash behind icon tiles                  */

  --r-sm:10px; --r:16px; --r-lg:24px; --r-xl:32px; --r-pill:999px;

  --sh-1:0 1px 2px rgba(8,24,40,.06), 0 1px 1px rgba(8,24,40,.04);
  --sh-2:0 10px 30px -12px rgba(8,24,40,.18);
  --sh-3:0 30px 60px -20px rgba(8,24,40,.30);
  --sh-accent:0 18px 40px -16px rgba(198,161,91,.55);

  --wrap:1280px;
  --wide:min(1680px,100%);
  --ease:cubic-bezier(.22,.61,.36,1);

  --font-d:"Plus Jakarta Sans",system-ui,sans-serif;
  --font-b:"Inter",system-ui,sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;font-family:var(--font-b);color:var(--ink);background:var(--paper);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;line-height:1.6;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--accent);color:var(--accent-on)}

/* ---------- Layout helpers ---------- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(20px,5vw,40px)}
.wide{width:100%;max-width:var(--wide);margin-inline:auto;padding-inline:clamp(20px,5vw,56px)}
.section{padding-block:clamp(64px,9vw,128px)}
.section-sm{padding-block:clamp(48px,6vw,84px)}
.center{text-align:center}
.lead{font-size:clamp(1.05rem,1.6vw,1.22rem);color:var(--slate);max-width:60ch}

/* ---------- Type ---------- */
.kicker{
  display:inline-flex;align-items:center;gap:.55em;
  font-family:var(--font-b);font-weight:700;font-size:.78rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--accent-ink);
}
.kicker::before{content:"";width:26px;height:2px;background:var(--accent);border-radius:2px}
.kicker.on-dark{color:var(--accent-2)}
.kicker.on-dark::before{background:var(--accent-2)}

.display{
  font-family:var(--font-d);font-weight:800;line-height:1.04;letter-spacing:-.02em;
  font-size:clamp(2.1rem,5vw,3.9rem);color:var(--ink);margin:.2em 0 .35em;
}
.display .hl{color:var(--accent-ink)}
h2.display{font-size:clamp(1.9rem,4vw,3.1rem)}
h3{font-family:var(--font-d);font-weight:700;letter-spacing:-.01em;line-height:1.15;margin:0}
.on-dark .display,.display.on-dark{color:#fff}
.on-dark .lead,.lead.on-dark{color:#c3d2e4}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  font-family:var(--font-d);font-weight:700;font-size:.98rem;line-height:1;
  padding:.95em 1.5em;border-radius:var(--r-pill);border:1.5px solid transparent;
  cursor:pointer;transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .2s,color .2s,border-color .2s;
  white-space:nowrap;
}
.btn .ar{transition:transform .25s var(--ease)}
.btn:hover .ar{transform:translateX(4px)}
.btn-accent{background:var(--accent);color:var(--accent-on);box-shadow:var(--sh-accent)}
.btn-accent:hover{background:var(--accent-deep);transform:translateY(-2px)}
.btn-navy{background:var(--navy-800);color:#fff}
.btn-navy:hover{background:var(--navy-700);transform:translateY(-2px)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--navy-800);transform:translateY(-2px)}
.btn-white{background:#fff;color:var(--navy-800)}
.btn-white:hover{transform:translateY(-2px);box-shadow:var(--sh-2)}
.btn-clear{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.34);backdrop-filter:blur(6px)}
.btn-clear:hover{background:rgba(255,255,255,.16);transform:translateY(-2px)}
.btn-lg{padding:1.1em 1.8em;font-size:1.05rem}

/* ---------- Chips / pills ---------- */
.chips{display:flex;flex-wrap:wrap;gap:.5rem}
.chip{
  display:inline-flex;align-items:center;gap:.45em;font-size:.85rem;font-weight:600;
  padding:.5em .9em;border-radius:var(--r-pill);background:var(--paper-3);color:var(--slate);
  border:1px solid var(--line);
}
.chip.glass{background:rgba(255,255,255,.1);color:#eaf2fb;border-color:rgba(255,255,255,.22);backdrop-filter:blur(8px)}
.chip .dot{width:7px;height:7px;border-radius:50%;background:var(--accent)}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:60;
  display:flex;align-items:center;gap:.7rem;
  padding:14px clamp(16px,2.5vw,26px);
  transition:background .35s var(--ease),box-shadow .35s var(--ease),padding .35s var(--ease);
}
.nav.clear{background:transparent}
.nav.solid{background:rgba(255,255,255,.92);backdrop-filter:blur(14px);box-shadow:var(--sh-1);padding-block:10px}
.brand{display:flex;align-items:center;gap:.6rem;flex-shrink:0}
.brand .mk{
  width:42px;height:42px;flex-shrink:0;display:grid;place-items:center;
}
.brand .mk img,.brand .mk svg{width:42px;height:42px;display:block}
.brand .wm{font-family:var(--font-d);line-height:1;flex-shrink:0}
.brand .wm b{display:block;font-weight:800;font-size:1.12rem;letter-spacing:-.01em}
.brand .wm span{display:block;font-size:.62rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;margin-top:3px;opacity:.7}
.nav.clear .brand .wm{color:#fff}
.nav.solid .brand .wm b{color:var(--ink)}
.nav.solid .brand .wm span{color:var(--accent-ink)}
/* FT mark only (wordmark removed) + recolouring tagline strapline beside it. */
.brand.lock{gap:0}
.brand.lock .lk{height:52px;width:auto;display:block}
.brand.lock .tag{margin-left:13px;
  font-family:var(--font-d);font-size:.62rem;font-weight:700;letter-spacing:.22em;
  line-height:1.4;text-transform:uppercase;max-width:7.4em;color:#fff;opacity:.7}
.nav.solid .brand.lock .tag{color:var(--accent-ink);opacity:1}
.footer .brand.lock .lk,.mmenu .brand.lock .lk{height:52px}
/* the flat transparent mark needs separation on dark surfaces (footer, mobile
   menu, transparent hero nav) — soft depth shadow + hairline light halo, never
   applied to the white solid nav */
.footer .brand.lock .lk,
.mmenu .brand.lock .lk,
.nav.clear .brand.lock .lk{
  filter:drop-shadow(0 2px 12px rgba(4,17,31,.6)) drop-shadow(0 0 1px rgba(255,255,255,.35));
}
@media(max-width:820px){.brand.lock .tag{display:none}}

.nav-links{display:flex;align-items:center;gap:.08rem;margin-left:auto;white-space:nowrap}
.nav-links a{
  font-family:var(--font-d);font-weight:600;font-size:.875rem;padding:.5em .5em;border-radius:var(--r-pill);
  transition:background .2s,color .2s;position:relative;
}
.nav.clear .nav-links a{color:#eaf2fb}
.nav.clear .nav-links a:hover{background:rgba(255,255,255,.12)}
.nav.solid .nav-links a{color:var(--slate)}
.nav.solid .nav-links a:hover{color:var(--ink);background:var(--paper-3)}
.nav-cta{display:flex;align-items:center;gap:.5rem;flex-shrink:0}
.nav .btn{padding:.62em .9em;font-size:.86rem}
.nav.clear .nav-cta .btn-ghost{color:#fff;border-color:rgba(255,255,255,.4)}

.burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px;margin-left:auto}
.burger span{width:26px;height:2.5px;border-radius:2px;background:#fff;transition:.3s var(--ease)}
.nav.solid .burger span{background:var(--ink)}

/* full-screen mobile menu */
.mmenu{
  position:fixed;inset:0;z-index:70;background:linear-gradient(160deg,var(--navy-900),var(--navy-800));
  display:flex;flex-direction:column;padding:24px clamp(20px,7vw,40px);
  opacity:0;visibility:hidden;transform:translateY(-12px);transition:.4s var(--ease);
}
.mmenu.open{opacity:1;visibility:visible;transform:none}
.mmenu .top{display:flex;align-items:center;justify-content:space-between}
.mmenu .x{background:none;border:0;color:#fff;font-size:2rem;cursor:pointer;line-height:1}
.mmenu nav{display:flex;flex-direction:column;gap:.2rem;margin-top:8vh}
.mmenu nav a{
  font-family:var(--font-d);font-weight:700;font-size:clamp(1.5rem,7vw,2.2rem);color:#fff;
  padding:.35em 0;border-bottom:1px solid rgba(255,255,255,.1);opacity:0;transform:translateY(14px);
}
.mmenu.open nav a{animation:mIn .5s var(--ease) forwards}
.mmenu.open nav a:nth-child(1){animation-delay:.06s}
.mmenu.open nav a:nth-child(2){animation-delay:.10s}
.mmenu.open nav a:nth-child(3){animation-delay:.14s}
.mmenu.open nav a:nth-child(4){animation-delay:.18s}
.mmenu.open nav a:nth-child(5){animation-delay:.22s}
.mmenu.open nav a:nth-child(6){animation-delay:.26s}
.mmenu.open nav a:nth-child(7){animation-delay:.30s}
.mmenu.open nav a:nth-child(8){animation-delay:.34s}
@keyframes mIn{to{opacity:1;transform:none}}
.mmenu .foot{margin-top:auto;display:flex;flex-direction:column;gap:.8rem}
.mmenu .foot .btn{width:100%}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden;color:#fff}
.hero-bg{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center;will-change:transform}
.hero-scrim{position:absolute;inset:0;z-index:1;
  background:
   linear-gradient(90deg,rgba(4,17,31,.86) 0%,rgba(4,17,31,.62) 42%,rgba(4,17,31,.18) 100%),
   linear-gradient(0deg,rgba(4,17,31,.7) 0%,rgba(4,17,31,0) 38%);
}
.hero .wrap{position:relative;z-index:2;padding-top:120px;padding-bottom:60px}
.hero-inner{max-width:780px}
.hero h1{font-family:var(--font-d);font-weight:800;line-height:1.02;letter-spacing:-.025em;
  font-size:clamp(2.5rem,6.4vw,5rem);margin:.18em 0 .3em}
.hero h1 .hl{color:var(--accent-2)}
.hero p.sub{font-size:clamp(1.08rem,1.8vw,1.35rem);color:#d6e2f0;max-width:60ch;margin:0 0 2rem}
.hero-cta{display:flex;flex-wrap:wrap;gap:.9rem}
.hero-trust{display:flex;flex-wrap:wrap;gap:1.4rem;margin-top:2.4rem;padding-top:1.6rem;border-top:1px solid rgba(255,255,255,.16)}
.hero-trust .t{display:flex;align-items:center;gap:.5rem;font-size:.92rem;color:#cdd9e8;font-weight:600}
.hero-trust .t svg{width:18px;height:18px;color:var(--accent-2);flex-shrink:0}
.scroll-hint{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:2;color:rgba(255,255,255,.7);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;display:flex;flex-direction:column;align-items:center;gap:8px}
.scroll-hint .line{width:1px;height:34px;background:linear-gradient(rgba(255,255,255,.7),transparent);animation:sh 1.8s var(--ease) infinite}
@keyframes sh{0%{transform:scaleY(.2);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}50.1%{transform-origin:bottom}100%{transform:scaleY(.2);transform-origin:bottom}}

/* ============================================================
   SPECIALISMS — numbered editorial grid
   ============================================================ */
.svc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;margin-top:2.6rem}
.svc{background:var(--paper);padding:2rem 1.6rem;position:relative;transition:background .3s var(--ease),transform .3s var(--ease)}
.svc .no{font-family:var(--font-d);font-weight:800;font-size:.9rem;color:var(--accent-ink);letter-spacing:.05em}
.svc h3{font-size:1.18rem;margin:.7rem 0 .5rem}
.svc p{font-size:.92rem;color:var(--muted);margin:0}
.svc .go{margin-top:1.1rem;display:inline-flex;align-items:center;gap:.4em;font-weight:700;font-size:.86rem;color:var(--navy-800);opacity:0;transform:translateX(-6px);transition:.3s var(--ease)}
.svc:hover{background:var(--paper-2)}
.svc:hover .go{opacity:1;transform:none}
.svc::after{content:"";position:absolute;left:0;top:0;height:3px;width:0;background:var(--accent);transition:width .35s var(--ease)}
.svc:hover::after{width:100%}

/* ============================================================
   FEATURE ROWS — why choose us
   ============================================================ */
.featrows{display:grid;grid-template-columns:repeat(2,1fr);gap:0 3.5rem;margin-top:2.4rem}
.featrow{display:flex;gap:1.2rem;padding:1.7rem 0;border-top:1px solid var(--line)}
.featrow .ic{width:48px;height:48px;border-radius:13px;flex-shrink:0;display:grid;place-items:center;background:var(--accent-tint);color:var(--accent-ink)}
.featrow .ic svg{width:24px;height:24px}
.featrow h3{font-size:1.12rem;margin-bottom:.35rem}
.featrow p{margin:0;font-size:.95rem;color:var(--slate)}

/* ============================================================
   PROCESS — 4 step with progress line
   ============================================================ */
.process{position:relative}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;margin-top:3rem;position:relative}
.proc-line{position:absolute;top:34px;left:6%;right:6%;height:2px;background:var(--line);z-index:0}
.proc-line i{position:absolute;inset:0;width:0;background:linear-gradient(90deg,var(--accent),var(--accent-2));transition:width .1s linear}
.step{position:relative;z-index:1;text-align:center}
.step .num{width:68px;height:68px;margin:0 auto 1.2rem;padding:0;box-sizing:border-box;border-radius:50%;display:grid;place-items:center;background:#fff;border:2px solid var(--line);font-family:var(--font-d);font-weight:800;font-size:1.3rem;line-height:1;color:var(--navy-800);transition:.3s var(--ease)}
.step.on .num{border-color:var(--accent);color:var(--accent-ink);box-shadow:var(--sh-accent)}
.step h3{font-size:1.08rem;margin-bottom:.4rem}
.step p{font-size:.9rem;color:var(--muted);margin:0}

/* ============================================================
   FULL-BLEED PHOTO BAND
   ============================================================ */
.band{position:relative;overflow:hidden;color:#fff}
.band-bg{position:absolute;inset:0;background-size:cover;background-position:center;z-index:0;will-change:transform}
.band-scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(4,17,31,.9),rgba(4,17,31,.55) 60%,rgba(4,17,31,.25))}
.band .wrap{position:relative;z-index:2}
.band .inner{max-width:620px;padding-block:clamp(72px,11vw,150px)}

/* ============================================================
   STATS / NUMBERS BAND
   ============================================================ */
.numbers{background:var(--navy-900);color:#fff}
.num-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.1);border-radius:var(--r-lg);overflow:hidden}
.num{background:var(--navy-900);padding:2.2rem 1.6rem;text-align:center}
.num .fig{font-family:var(--font-d);font-weight:800;font-size:clamp(2.2rem,4.6vw,3.4rem);letter-spacing:-.02em;line-height:1;color:#fff;font-variant-numeric:tabular-nums}
.num .fig .u{color:var(--accent-2)}
.num .cap{margin-top:.7rem;font-size:.9rem;color:#9fb2c7}

/* ============================================================
   CARDS — vacancies / testimonials
   ============================================================ */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-top:2.6rem}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:1.7rem;box-shadow:var(--sh-1);transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s}
.card:hover{transform:translateY(-5px);box-shadow:var(--sh-2);border-color:#cfdae7}
.vac .top{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;margin-bottom:1rem}
.vac h3{font-size:1.18rem}
.vac .sal{font-family:var(--font-d);font-weight:800;color:var(--navy-800);font-size:1.02rem;white-space:nowrap}
.vac .meta{display:flex;flex-wrap:wrap;gap:.5rem;margin:1rem 0}
.vac .meta .chip{font-size:.78rem;padding:.4em .75em}
.vac p{color:var(--slate);font-size:.93rem;margin:.6rem 0 1.2rem}
.vac .go{font-weight:700;color:var(--accent-ink);font-size:.9rem;display:inline-flex;gap:.4em;align-items:center}

.tcard{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:1.9rem;box-shadow:var(--sh-1)}
.tcard .q{font-family:var(--font-d);font-size:1.05rem;line-height:1.5;color:var(--ink);margin:0 0 1.3rem}
.tcard .who{display:flex;align-items:center;gap:.8rem}
.tcard .av{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,var(--navy-600),var(--navy-800));color:#fff;display:grid;place-items:center;font-weight:800;font-family:var(--font-d)}
.tcard .who b{display:block;font-size:.92rem}
.tcard .who span{font-size:.82rem;color:var(--muted)}
.stars{color:var(--accent-ink);letter-spacing:2px;font-size:.9rem;margin-bottom:1rem}

/* ============================================================
   DUAL CTA SPLIT
   ============================================================ */
.split{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;margin-top:2.4rem}
.split .pane{border-radius:var(--r-lg);padding:clamp(2rem,4vw,3rem);position:relative;overflow:hidden}
.split .emp{background:linear-gradient(160deg,var(--navy-800),var(--navy-950));color:#fff}
.split .can{background:var(--paper-2);border:1px solid var(--line)}
.split h3{font-size:clamp(1.4rem,2.4vw,1.9rem);font-family:var(--font-d);margin-bottom:.6rem}
.split .emp h3{color:#fff}
.split p{margin:0 0 1.6rem}
.split .emp p{color:#c3d2e4}
.split .can p{color:var(--slate)}
.split .pane .btn{margin-right:.6rem;margin-bottom:.6rem}

/* ============================================================
   CONTACT
   ============================================================ */
.contact-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(2rem,5vw,4.5rem);align-items:start;margin-top:2.4rem}
.field{margin-bottom:1.1rem}
.field label{display:block;font-weight:600;font-size:.86rem;margin-bottom:.45rem;color:var(--slate)}
.field input,.field select,.field textarea{
  width:100%;padding:.85em 1em;border:1.5px solid var(--line);border-radius:var(--r-sm);
  font:inherit;color:var(--ink);background:#fff;transition:border-color .2s,box-shadow .2s;
}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px rgba(198,161,91,.22)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.consent{display:flex;gap:.7rem;align-items:flex-start;font-size:.84rem;color:var(--muted);margin:.4rem 0 1.2rem}
.consent input{margin-top:3px}
.contact-aside .ci{display:flex;gap:1rem;padding:1.2rem 0;border-top:1px solid var(--line)}
.contact-aside .ci .ic{width:44px;height:44px;border-radius:12px;background:var(--accent-tint);color:var(--accent-ink);display:grid;place-items:center;flex-shrink:0}
.contact-aside .ci .ic svg{width:22px;height:22px}
.contact-aside .ci b{display:block;font-family:var(--font-d)}
.contact-aside .ci span{color:var(--slate);font-size:.92rem}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{background:var(--navy-950);color:#b8c6d8;padding-top:clamp(56px,7vw,88px)}
.footer .cols{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:2.5rem;padding-bottom:3rem;border-bottom:1px solid rgba(255,255,255,.1)}
.footer .brand .wm b{color:#fff}
.footer p{font-size:.92rem;max-width:34ch;margin:1rem 0 1.4rem}
.footer h4{font-family:var(--font-d);color:#fff;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;margin:0 0 1.1rem}
.footer ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.65rem}
.footer ul a{font-size:.92rem;color:#b8c6d8;transition:color .2s}
.footer ul a:hover{color:var(--accent-2)}
.footer .social{display:flex;gap:.7rem}
.footer .social a{width:40px;height:40px;border-radius:11px;background:rgba(255,255,255,.07);display:grid;place-items:center;color:#fff;transition:background .2s,transform .2s}
.footer .social a:hover{background:var(--accent);transform:translateY(-2px)}
.footer .social svg{width:19px;height:19px}
.subfoot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;padding:1.6rem 0;font-size:.84rem;color:#7d90a6}
.subfoot a{color:#7d90a6}
.subfoot a:hover{color:#fff}

/* ============================================================
   MOBILE STICKY BAR
   ============================================================ */
.mbar{position:fixed;left:0;right:0;bottom:0;z-index:55;display:none;
  grid-template-columns:1fr 1fr;gap:10px;padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.96);backdrop-filter:blur(12px);border-top:1px solid var(--line);box-shadow:0 -8px 24px -12px rgba(8,24,40,.25)}
.mbar .btn{width:100%;padding:.95em 1em;font-size:.95rem}

/* ============================================================
   REVEAL (reveal contract — JS hides then animates)
   ============================================================ */
.reveal{opacity:1;transform:none}
.js .reveal{opacity:0;transform:translateY(26px)}
.js .reveal.in{opacity:1;transform:none;transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .reveal.d1{transition-delay:.08s}
.js .reveal.d2{transition-delay:.16s}
.js .reveal.d3{transition-delay:.24s}
.js .reveal.d4{transition-delay:.32s}

.eyebrow-block{max-width:62ch}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1180px){
  .nav-links{display:none}
  .burger{display:flex}
  .nav-cta{display:none}
}
@media (max-width:1100px){
  .svc-grid{grid-template-columns:repeat(2,1fr)}
  .num-grid{grid-template-columns:repeat(2,1fr)}
  .featrows{grid-template-columns:1fr;gap:0}
  .footer .cols{grid-template-columns:1fr 1fr}
}
@media (max-width:820px){
  .cards{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr 1fr;gap:2rem 1rem}
  .proc-line{display:none}
  .split{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
  .field-row{grid-template-columns:1fr}
  .footer .cols{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .mbar{display:grid}
    body{padding-bottom:76px}
  .brand.lock .lk{height:46px}
  .svc-grid{grid-template-columns:1fr}
  .num-grid{grid-template-columns:1fr 1fr}
  .footer .cols{grid-template-columns:1fr}
  .hero .wrap{padding-top:104px}
  .subfoot{flex-direction:column}
  .scroll-hint{display:none}
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .js .reveal{opacity:1!important;transform:none!important}
  .hero-bg,.band-bg{transform:none!important}
}

/* ============================================================
   INNER-PAGE HELPERS (added Phase C)
   ============================================================ */
/* compact inner hero band */
.subhero{position:relative;overflow:hidden;color:#fff;padding:clamp(120px,16vw,190px) 0 clamp(48px,7vw,84px)}
.subhero-bg{position:absolute;inset:0;background-size:cover;background-position:center;z-index:0}
.subhero-scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(4,17,31,.92),rgba(4,17,31,.66) 60%,rgba(4,17,31,.42))}
.subhero .wrap{position:relative;z-index:2}
.subhero h1{font-family:var(--font-d);font-weight:800;line-height:1.04;letter-spacing:-.02em;font-size:clamp(2.1rem,5vw,3.6rem);margin:.2em 0 .35em;max-width:18ch}
.subhero p{font-size:clamp(1.05rem,1.6vw,1.25rem);color:#cfdcec;max-width:60ch;margin:0}
.subhero .hero-cta{margin-top:1.8rem}

/* breadcrumb */
.crumb{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;font-size:.82rem;color:#9fb2c7;margin-bottom:1rem}
.crumb a{color:#cfdcec}.crumb a:hover{color:#fff}.crumb .sep{opacity:.5}

/* generic two-col content */
.two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.two.flip .two-media{order:2}
.two-media{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-2);aspect-ratio:4/3;background-size:cover;background-position:center}
.prose p{color:var(--slate);margin:0 0 1rem}
.prose h3{margin:1.6rem 0 .6rem;font-size:1.25rem}
.ticks{list-style:none;padding:0;margin:1.2rem 0;display:grid;gap:.7rem}
.ticks li{display:flex;gap:.7rem;align-items:flex-start;color:var(--slate)}
.ticks li::before{content:"";flex-shrink:0;margin-top:.2em;width:20px;height:20px;border-radius:50%;background:var(--accent-tint);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%238A6A2F' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center}

/* simple 3-up info cards */
.icards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-top:2.6rem}
.icard{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:1.8rem;box-shadow:var(--sh-1);transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.icard:hover{transform:translateY(-5px);box-shadow:var(--sh-2)}
.icard .ic{width:50px;height:50px;border-radius:14px;display:grid;place-items:center;background:var(--accent-tint);color:var(--accent-ink);margin-bottom:1.1rem}
.icard .ic svg{width:26px;height:26px}
.icard h3{font-size:1.18rem;margin-bottom:.5rem}
.icard p{color:var(--slate);font-size:.95rem;margin:0}

/* sector/service link grid (cards with image) */
.tile-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-top:2.6rem}
.tile{position:relative;border-radius:var(--r-lg);overflow:hidden;min-height:280px;display:flex;flex-direction:column;justify-content:flex-end;color:#fff;padding:1.6rem;box-shadow:var(--sh-1);transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.tile>.tile-bg{position:absolute;inset:0;background-size:cover;background-position:center;z-index:0;transition:transform .5s var(--ease)}
.tile::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(0deg,rgba(4,17,31,.92),rgba(4,17,31,.25) 70%)}
.tile>*{position:relative;z-index:2}
.tile:hover{transform:translateY(-5px);box-shadow:var(--sh-3)}
.tile:hover .tile-bg{transform:scale(1.07)}
.tile h3{font-size:1.25rem;margin-bottom:.4rem}
.tile p{font-size:.9rem;color:#cfdcec;margin:0 0 .8rem}
.tile .go{font-weight:700;font-size:.86rem;color:#fff;display:inline-flex;gap:.4em;align-items:center}

/* jobs filter + list */
.jobs-bar{display:grid;grid-template-columns:2fr 1fr 1fr 1fr auto;gap:.8rem;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:1rem;box-shadow:var(--sh-1);margin-bottom:2rem}
.jobs-bar input,.jobs-bar select{padding:.75em .9em;border:1.5px solid var(--line);border-radius:var(--r-sm);font:inherit;background:#fff}
.jobs-bar input:focus,.jobs-bar select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px rgba(198,161,91,.22)}
.job-list{display:grid;gap:1rem}
.job-row{display:grid;grid-template-columns:1fr auto;gap:1rem;align-items:center;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:1.3rem 1.5rem;box-shadow:var(--sh-1);transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s}
.job-row:hover{transform:translateY(-3px);box-shadow:var(--sh-2);border-color:#cfdae7}
.job-row h3{font-size:1.15rem;margin-bottom:.5rem}
.job-row .meta{display:flex;flex-wrap:wrap;gap:.5rem}
.job-row .sal{font-family:var(--font-d);font-weight:800;color:var(--navy-800);white-space:nowrap;text-align:right}
.job-row .sal small{display:block;font-weight:600;color:var(--muted);font-size:.78rem;margin-top:.3rem}

/* blog */
.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem;margin-top:2.6rem}
.post{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-1);transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.post:hover{transform:translateY(-5px);box-shadow:var(--sh-2)}
.post .ph{aspect-ratio:16/9;background-size:cover;background-position:center}
.post .body{padding:1.5rem;display:flex;flex-direction:column;flex:1}
.post .tag{font-size:.74rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-ink)}
.post h3{font-size:1.15rem;margin:.6rem 0 .5rem}
.post p{color:var(--slate);font-size:.92rem;margin:0 0 1.2rem;flex:1}
.post .go{font-weight:700;color:var(--accent-ink);font-size:.88rem}
/* article body */
.article{max-width:760px;margin-inline:auto}
.article p,.article li{color:var(--ink);font-size:1.06rem;line-height:1.75}
.article h2{font-family:var(--font-d);font-size:1.7rem;margin:2.2rem 0 .8rem;letter-spacing:-.01em}
.article h3{font-family:var(--font-d);font-size:1.3rem;margin:1.8rem 0 .6rem}
.article ul{padding-left:1.2rem;display:grid;gap:.5rem;margin:1rem 0}
.article blockquote{margin:1.6rem 0;padding:1.2rem 1.5rem;border-left:4px solid var(--accent);background:var(--paper-2);border-radius:0 var(--r) var(--r) 0;font-family:var(--font-d);font-size:1.15rem}

/* FAQ */
.faq{max-width:820px}
.faq details{border-bottom:1px solid var(--line);padding:1.2rem 0}
.faq summary{font-family:var(--font-d);font-weight:700;font-size:1.08rem;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:1rem;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--accent-ink);font-size:1.5rem;transition:transform .25s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{margin:.9rem 0 0;color:var(--slate)}

/* FAQ section — dark photographic background, glass panel, light text */
.faq-section{position:relative;overflow:hidden;background:var(--navy-950);color:#fff}
.faq-section .faq-bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.5;z-index:0;will-change:transform}
.faq-section .faq-scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(4,17,31,.84) 0%,rgba(4,17,31,.7) 45%,rgba(4,17,31,.9) 100%)}
.faq-section .faq-glow{position:absolute;top:-140px;right:-120px;width:460px;height:460px;border-radius:50%;z-index:1;background:radial-gradient(circle,rgba(198,161,91,.22),transparent 70%);pointer-events:none}
.faq-section .wrap{position:relative;z-index:2}
.faq-panel{max-width:860px;margin-top:2rem;background:rgba(6,24,43,.5);border:1px solid rgba(255,255,255,.12);border-radius:20px;padding:.4rem 2.2rem;box-shadow:0 34px 70px -34px rgba(0,0,0,.6);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.faq-panel .faq{max-width:none}
.faq-section .faq details{border-bottom:1px solid rgba(255,255,255,.12)}
.faq-section .faq summary{color:#fff}
.faq-section .faq p{color:#c2d1e2}
@media (max-width:820px){.faq-panel{padding:.4rem 1.4rem;border-radius:16px}}
@media (prefers-reduced-motion:reduce){.faq-section .faq-bg{transform:none!important}}

/* Footer PDL credit — matches the subfoot, brand name highlighted in accent */
.subfoot .pdl{color:var(--accent-2);font-weight:600}
.subfoot .pdl:hover{color:#fff}

/* Employer band — background video layer over the static image (desktop + mobile) */
.band-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:0}
@media (max-width:768px){.band-video{object-position:68% 50%}}

@media (max-width:1100px){.icards,.tile-grid,.post-grid{grid-template-columns:repeat(2,1fr)}.jobs-bar{grid-template-columns:1fr 1fr}}
@media (max-width:820px){.two{grid-template-columns:1fr}.two.flip .two-media{order:0}.icards,.tile-grid,.post-grid{grid-template-columns:1fr}.job-row{grid-template-columns:1fr}.job-row .sal{text-align:left}.jobs-bar{grid-template-columns:1fr}}

/* ==========================================================================
   TRANSPORT TEMPS — dark-context accent guards
   Freight Talent never needed these: its orange reads on both grounds. TT's
   gold does not. --accent-ink (#8A6A2F) is tuned for text on white and drops
   to 3.79:1 on navy-950, so any accent text that lands inside a dark section
   is switched to --accent-2 by ancestor, not by the author remembering to add
   .on-dark. Belt and braces on purpose — the generators emit these classes
   5,000+ times and a missed modifier would be invisible until someone tried
   to read it.
   ========================================================================== */
.band .display .hl,
.band .kicker,
.numbers .display .hl,
.numbers .kicker,
.split .emp .display .hl,
.split .emp .kicker,
.faq-section .display .hl,
.faq-section .kicker,
.subhero .display .hl,
.subhero .kicker,
.hero .kicker{color:var(--accent-2)}

.band .kicker::before,
.numbers .kicker::before,
.split .emp .kicker::before,
.faq-section .kicker::before,
.subhero .kicker::before,
.hero .kicker::before{background:var(--accent-2)}

/* .faq summary '+' sits on navy inside .faq-section */
.faq-section .faq summary::after{color:var(--accent-2)}

/* Gold fills carry navy text, never white — 7.8:1 rather than 2.4:1 */
.band .btn-accent,
.faq-section .btn-accent,
.split .emp .btn-accent{color:var(--accent-on)}

/* ==========================================================================
   TRANSPORT TEMPS — components Freight Talent has no equivalent for.
   Everything else in the generated pages maps onto an FT component; these six
   do not, so they get real rules rather than falling through to browser
   defaults on 5,000+ pages.
   ========================================================================== */

/* Alternating section wash. FT does this with an inline style per section;
   a class is cleaner when a generator decides it by index parity. */
.section.alt{background:var(--paper-2)}

/* The coverage callout on a location page.
   ⛔ SUPERSEDED 5 September 2026. This comment used to read "the sentence that
   says we do NOT keep an office in the town the page is about". That sentence
   is GONE and must never come back — announcing an absence puts customers off
   (hard rule 7). The note now carries the FORWARD version: national reach, the
   worker matched to the seat, vetted before confirmation. It stays a bordered
   callout because it is a genuine selling point, not because it is a caveat. */
.tt-note{
  margin:1.6rem 0 0;padding:1rem 1.15rem;
  background:var(--accent-tint);
  border-left:4px solid var(--accent);
  border-radius:0 var(--r-sm) var(--r-sm) 0;
  color:var(--ink);font-size:.94rem;line-height:1.65;max-width:70ch;
}
.band .tt-note,.faq-section .tt-note{
  background:rgba(255,255,255,.06);border-left-color:var(--accent-2);color:#dbe6f2;
}

/* Small muted subheading above a group of links */
.tt-sub{
  color:var(--muted);font-size:.94rem;font-weight:600;
  margin:0 0 1rem;letter-spacing:.01em;
}

/* Live-shift feed empty state — the honest "nothing right now" line */
.tt-feed-empty{color:var(--muted);font-size:.96rem;line-height:1.65;margin:.8rem 0 0}

/* Region block on the locations index */
.tt-region{margin-bottom:2.6rem}
.tt-region h2{margin-bottom:.3rem}

/* Role chips carry a little more weight than plain nav chips */
.chip.chip-role{font-weight:700;background:var(--accent-tint);border-color:rgba(198,161,91,.38)}
.chip.chip-role:hover{background:#F6EEDC;border-color:var(--accent)}

/* Checkbox group — the brief's "what work are you looking for?" selector on the
   candidate registration form. A fieldset, not a div, so the legend is announced
   as the group label rather than floating as loose text. */
.field.workfor{border:1px solid var(--line);border-radius:var(--r);padding:1rem 1.15rem;margin-bottom:1.1rem}
.field.workfor legend{font-weight:600;font-size:.86rem;color:var(--slate);padding:0 .4rem}
.field.workfor .checks{display:grid;grid-template-columns:1fr 1fr;gap:.55rem .9rem;margin-top:.5rem}
.field.workfor .checks label{
  display:flex;align-items:center;gap:.55rem;font-size:.92rem;font-weight:500;
  color:var(--ink);cursor:pointer;margin:0;
}
.field.workfor .checks input{width:17px;height:17px;accent-color:var(--accent);flex-shrink:0;margin:0}
@media (max-width:560px){.field.workfor .checks{grid-template-columns:1fr}}

/* ==========================================================================
   PREMIUM PASS — 5 September 2026
   Photographic section grounds + the hero slideshow.
   ⛔ ADDITIVE ONLY. Nothing above this line was restructured.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. .photo — ONE primitive for "a section on a photograph".
   The idiom already existed FOUR times (.hero, .band, .faq-section, .tile),
   written out longhand each time. This is the same recipe, named once.
   .band-bg / .hero-bg / .faq-bg stay exactly as they were — 7,158 generated
   pages reference them and this must not touch a single one of them.
   USAGE: <section class="section photo"> + .photo-bg + .photo-scrim + .wrap
   ⛔ .section gives you padding ONLY — no position, no background. That is
      why .photo has to set position/overflow itself.
   ⛔ NEVER combine .photo with .alt — .section.alt paints --paper-2 straight
      over the photograph.
   -------------------------------------------------------------------------- */
.photo{position:relative;overflow:hidden;color:#fff;background:var(--navy-950)}
.photo>.photo-bg{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center;will-change:transform}
.photo>.photo-scrim{position:absolute;inset:0;z-index:1}
.photo>.wrap{position:relative;z-index:2}
/* scrim directions — v for full-width content, h for left-weighted content */
.photo-scrim.v{background:linear-gradient(180deg,rgba(4,17,31,.90) 0%,rgba(4,17,31,.72) 45%,rgba(4,17,31,.94) 100%)}
.photo-scrim.h{background:linear-gradient(90deg,rgba(4,17,31,.93) 0%,rgba(4,17,31,.70) 58%,rgba(4,17,31,.38) 100%)}
/* a gold light source, borrowed from .faq-glow — futurist register: one accent
   acting as a light, not a palette */
.photo-glow{position:absolute;top:-160px;right:-140px;width:520px;height:520px;border-radius:50%;z-index:1;
  background:radial-gradient(circle,rgba(198,161,91,.20),transparent 70%);pointer-events:none}
.photo .lead,.photo .prose p{color:#c8d6e6}

/* --- .numbers on a photograph (it was already navy, so this is a ground swap) */
.numbers.photo .num{background:rgba(6,24,43,.62);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.numbers.photo .num-grid{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.16)}

/* --- .process on a photograph: the six light-ground rules that would fail --- */
.process.photo .proc-line{background:rgba(255,255,255,.20)}
.process.photo .step .num{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.24);color:#fff;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.process.photo .step.on .num{border-color:var(--accent);color:var(--accent-2);background:rgba(198,161,91,.14)}
.process.photo .step h3{color:#fff}
.process.photo .step p{color:#b9c8da}

/* --- .split .emp on a photograph (replaces the flat CSS gradient) --- */
.split .emp.photo{background:var(--navy-950)}
.split .emp.photo>.photo-scrim{background:linear-gradient(150deg,rgba(4,17,31,.86),rgba(4,17,31,.94))}
.split .emp.photo>*:not(.photo-bg):not(.photo-scrim){position:relative;z-index:2}

/* --------------------------------------------------------------------------
   2. HERO SLIDESHOW
   Vanilla, ~70 lines of JS, zero dependencies. The estate's only crossfader
   (WEBSITE TEMPLATES/periscope) is welded to GSAP + ScrollTrigger + Lenis, and
   this site currently ships NO third-party JS at all. Three CDN loads to fade
   four images is not a trade worth making.
   ⛔ Slide 1 carries .on in the HTML, so the hero is complete with JS disabled
      or still loading. Do not move that class into JS.
   ⛔ The old .hero-bg carried data-parallax="10". It was REMOVED, not kept:
      rl.js parallax writes `transform` on the layer and Ken Burns needs the
      same property. Two writers, one property — they cannot share it.
   -------------------------------------------------------------------------- */
.hero-slides{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero-slide{position:absolute;inset:0;background-size:cover;background-position:center;
  opacity:0;transform:scale(1.06);transition:opacity 1200ms var(--ease);will-change:opacity,transform}
.hero-slide.on{opacity:1;animation:heroKB 8600ms linear forwards}
@keyframes heroKB{from{transform:scale(1.06)}to{transform:scale(1.15)}}

/* the showreel strip: dots + a caption naming what is on screen */
.hero-show{display:flex;align-items:center;gap:1.1rem;margin-top:1.8rem;flex-wrap:wrap}
.hero-dots{display:flex;gap:.5rem;margin:0;padding:0;list-style:none}
.hero-dot{width:44px;height:44px;padding:0;border:0;background:none;cursor:pointer;
  display:grid;place-items:center;border-radius:50%}
.hero-dot i{display:block;width:26px;height:3px;border-radius:2px;background:rgba(255,255,255,.30);
  position:relative;overflow:hidden;transition:background .3s var(--ease)}
.hero-dot[aria-current="true"] i{background:rgba(255,255,255,.30)}
.hero-dot[aria-current="true"] i::after{content:"";position:absolute;inset:0;transform-origin:left;
  background:var(--accent);animation:heroDot 8600ms linear forwards}
@keyframes heroDot{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.hero-dot:focus-visible{outline:2px solid var(--accent-2);outline-offset:2px}
.paused .hero-dot[aria-current="true"] i::after{animation-play-state:paused}
.paused .hero-slide.on{animation-play-state:paused}

.hero-cap{display:inline-flex;align-items:center;gap:.55rem;font-size:.82rem;font-weight:600;
  letter-spacing:.02em;color:#e8f0f9;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.22);
  border-radius:var(--r-pill);padding:.5em .95em;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.hero-cap b{color:var(--accent-2);font-weight:700}
.hero-pause{width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.08);color:#fff;cursor:pointer;display:grid;place-items:center;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);margin-left:auto}
.hero-pause:hover{background:rgba(255,255,255,.16)}
.hero-pause:focus-visible{outline:2px solid var(--accent-2);outline-offset:2px}
.hero-pause svg{width:14px;height:14px}
.hero-pause .i-play{display:none}
.paused .hero-pause .i-play{display:block}
.paused .hero-pause .i-pause{display:none}

/* the trust chip matching the live slide lifts — ties image to proposition */
.hero-trust .t{transition:color .45s var(--ease),opacity .45s var(--ease)}
.hero-trust .t.lit{color:#fff}
.hero-trust .t.lit svg{color:var(--accent)}

@media (max-width:700px){
  .hero-show{gap:.7rem;margin-top:1.4rem}
  .hero-cap{font-size:.76rem}
  .hero-pause{margin-left:0}
}

/* --------------------------------------------------------------------------
   3. Guards — a newly dark section must be added here or its gold text drops
   to 3.79:1. This is the list the original comment above warns about.
   -------------------------------------------------------------------------- */
.photo .display .hl,
.photo .kicker{color:var(--accent-2)}
.photo .kicker::before{background:var(--accent-2)}
.photo .btn-accent{color:var(--accent-on)}
.photo .chip{background:rgba(255,255,255,.10);color:#eaf2fb;border-color:rgba(255,255,255,.22);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.photo .chip:hover{background:rgba(255,255,255,.18);border-color:var(--accent)}
/* .ticks bakes --accent-ink into a data-URI glyph, so it needs a light twin */
.photo .ticks li{color:#c8d6e6}
.photo .ticks li::before{background-color:rgba(198,161,91,.18);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D8BE86' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")}
/* .icard is hard-coded background:#fff and would read as a white brick */
.photo .icard{background:rgba(6,24,43,.55);border-color:rgba(255,255,255,.14);color:#fff;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.photo .icard .ic{background:rgba(198,161,91,.16);color:var(--accent-2)}

/* --------------------------------------------------------------------------
   4. Reduced motion. The blanket *{animation:none} above kills the visuals but
   NOT a JS timer — rl-hero.js stops that itself. These stop the transforms.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .hero-slide,.photo>.photo-bg{transform:none!important}
  .hero-slide{opacity:0}
  .hero-slide.on{opacity:1}
}