/* ==========================================================================
   Crossworld Freighters — Design System
   Built to Crossworld Brand Guidelines v1.0 (August 2026).
   Charcoal ground, Crossworld Red as accent, Archivo + IBM Plex Sans.
   The four-stop mark gradient is reserved for the logo mark ONLY —
   never on type, panels or backgrounds.
   ========================================================================== */

/* Fonts are loaded via <link rel="preconnect"> + stylesheet in each page head —
   an @import here would serialise the request behind this file. */

:root{
  /* --- Brand core ------------------------------------------------------ */
  --brand-red:#CE1B22;      /* Crossworld Red — primary accent           */
  --brand-charcoal:#23262A; /* Crossworld Charcoal — dark ground         */

  /* Charcoal ramp, derived from #23262A */
  --navy-950:#16181B;
  --navy-900:#1C1F22;
  --navy-800:#23262A;
  --navy-700:#2E3238;
  --navy-600:#3C4147;

  /* Red ramp. --teal-* / --cyan-* names retained so existing rules keep
     resolving; values are now brand-correct. */
  --teal-400:#CE1B22;       /* accent red, AA on white (5.5:1)           */
  --teal-300:#FF8A8E;       /* red tint for small text on charcoal (6.7:1)*/
  --cyan-400:#FF3C42;       /* bright red, graphics only                 */
  --brand-ink:#CE1B22;      /* red text on light grounds                 */
  --brand-deep:#B9151B;     /* deep red, hovers and borders              */
  --gold-400:#f0b64c;
  --gold-300:#f7ce82;

  /* --- Neutrals (brand guideline values) ------------------------------- */
  --ink-950:#23262A;        /* primary text                              */
  --ink-700:#4A4D52;        /* secondary text                            */
  --ink-500:#4A4D52;        /* secondary text                            */
  --ink-300:#B9BCC0;        /* tertiary text on charcoal                 */
  --ink-100:#FFFFFF;
  --paper:#FFFFFF;          /* paper                                     */
  --paper-dim:#F6F6F4;      /* panels                                    */
  --rule:#E6E6E4;           /* rules                                     */
  --white:#ffffff;

  --glass-fill:rgba(255,255,255,0.05);
  --glass-fill-strong:rgba(255,255,255,0.085);
  --glass-border:rgba(255,255,255,0.16);
  --glass-border-soft:rgba(255,255,255,0.09);

  --shadow-lg:0 30px 80px -20px rgba(22,24,27,0.45);
  --shadow-md:0 18px 40px -14px rgba(22,24,27,0.28);
  --shadow-glow:0 0 0 1px rgba(206,27,34,0.25), 0 0 40px -8px rgba(206,27,34,0.4);

  --font-head:'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-body:'IBM Plex Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-mono:'IBM Plex Mono', 'Consolas', monospace;

  --radius-sm:10px;
  --radius-md:16px;
  --radius-lg:26px;
  --radius-pill:100px;

  --ease:cubic-bezier(.22,.87,.24,1);
}

/* ---------------------------------------------------------------------- */
/* Reset */
/* ---------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;}
/* scroll-padding keeps #anchor targets clear of the fixed header */
html{scroll-behavior:smooth;scroll-padding-top:110px;}
body,h1,h2,h3,h4,p,figure,blockquote{margin:0;}
ul[class],ol[class]{list-style:none;margin:0;padding:0;}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;}
input,textarea,select{font:inherit;color:inherit;}
svg{display:block;}

body{
  font-family:var(--font-body);
  background:var(--paper);
  color:var(--ink-950);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

::selection{background:var(--teal-400);color:var(--navy-950);}

::-webkit-scrollbar{width:10px;}
::-webkit-scrollbar-track{background:var(--navy-950);}
::-webkit-scrollbar-thumb{background:var(--navy-600);border-radius:10px;}

.container{
  width:100%;
  max-width:1240px;
  margin:0 auto;
  padding:0 clamp(20px,4vw,40px);
}

section{position:relative;}

/* ---------------------------------------------------------------------- */
/* Typography */
/* ---------------------------------------------------------------------- */
h1,h2,h3,h4{font-family:var(--font-head);font-weight:600;letter-spacing:-0.01em;line-height:1.08;color:var(--navy-950);}
h1{font-size:clamp(2.4rem,5.2vw,4.4rem);}
h2{font-size:clamp(1.9rem,3.6vw,3rem);}
h3{font-size:clamp(1.25rem,2vw,1.6rem);}
h4{font-size:1.05rem;}

.on-dark h1,.on-dark h2,.on-dark h3,.on-dark h4,.on-dark p,.on-dark,
.surface-dark h1,.surface-dark h2,.surface-dark h3,.surface-dark h4{color:var(--ink-100);}

p{color:var(--ink-700);}
.on-dark p,.surface-dark p,.site-footer p{color:var(--ink-300);}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--brand-ink);
  font-weight:500;
}
.surface-dark .eyebrow,.on-dark .eyebrow{color:var(--teal-300);}
.eyebrow::before{
  content:'';
  width:7px;height:7px;border-radius:50%;
  background:var(--teal-400);
  box-shadow:0 0 0 4px rgba(206,27,34,.18);
}

.lede{font-size:clamp(1rem,1.3vw,1.2rem);color:var(--ink-500);max-width:56ch;}
.on-dark .lede,.surface-dark .lede{color:var(--ink-300);}

.mono{font-family:var(--font-mono);letter-spacing:.03em;}

/* ---------------------------------------------------------------------- */
/* Buttons */
/* ---------------------------------------------------------------------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:14px 26px;
  border-radius:var(--radius-pill);
  font-weight:600;
  font-size:.95rem;
  white-space:nowrap;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
  cursor:pointer;
}
.btn svg{width:16px;height:16px;transition:transform .3s var(--ease);}
.btn:hover svg{transform:translate(3px,-2px);}

/* Flat Crossworld Red — the brand gradient is reserved for the mark.
   White on #CE1B22 = 5.5:1, clears AA. */
.btn-primary{
  background:var(--brand-red);
  color:#ffffff;
  box-shadow:0 12px 26px -12px rgba(206,27,34,.5);
}
.btn-primary:hover{background:var(--brand-deep);transform:translateY(-2px);box-shadow:0 16px 32px -10px rgba(206,27,34,.6);}

.btn-ghost{
  background:transparent;
  border:1.5px solid var(--glass-border);
  color:var(--ink-100);
}
.btn-ghost:hover{border-color:var(--teal-400);background:rgba(206,27,34,.08);}

.btn-dark{
  background:var(--navy-950);
  color:var(--ink-100);
  border:1.5px solid rgba(255,255,255,.08);
}
.btn-dark:hover{transform:translateY(-2px);border-color:var(--teal-400);}

.btn-sm{padding:10px 18px;font-size:.85rem;}
.btn-block{width:100%;justify-content:center;}

/* ---------------------------------------------------------------------- */
/* Header / Nav */
/* ---------------------------------------------------------------------- */
.site-header{
  position:fixed;
  top:0;left:0;right:0;
  z-index:1000;
  padding:18px 0;
  transition:padding .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
  border-bottom:1px solid transparent;
}
/* The frosted background lives on a pseudo-element, NOT on .site-header itself.
   backdrop-filter creates a containing block for position:fixed descendants —
   with it on the header, the off-canvas .main-nav stopped being fixed to the
   viewport once .is-scrolled applied, and got clipped to the header's height. */
.site-header::before{
  content:'';
  position:absolute;
  inset:0;
  z-index:-1;
  opacity:0;
  background:rgba(22,24,27,.82);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  transition:opacity .35s var(--ease);
  pointer-events:none;
}
.site-header.is-scrolled::before{opacity:1;}
.site-header .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}
.site-header.is-scrolled{
  padding:12px 0;
  border-bottom:1px solid var(--glass-border-soft);
  box-shadow:0 10px 30px -12px rgba(0,0,0,.4);
}

.brand{display:flex;align-items:center;gap:12px;}
/* Master lockup artwork from the brand pack. The white lockup is the correct
   variant on charcoal grounds (header and footer). */
.brand-lockup{height:46px;width:auto;flex-shrink:0;display:block;}
.site-header.is-scrolled .brand-lockup{height:40px;transition:height .35s var(--ease);}
@media (max-width:520px){.brand-lockup{height:38px;}}

.main-nav{display:flex;align-items:center;gap:2px;}
.main-nav a{
  padding:10px 16px;
  border-radius:var(--radius-pill);
  font-size:.9rem;
  font-weight:500;
  color:var(--ink-300);
  transition:color .25s var(--ease), background .25s var(--ease);
}
.main-nav a:hover{color:var(--ink-100);background:var(--glass-fill);}
.main-nav a.is-active{color:#ffffff;background:var(--brand-deep);}

.header-cta{display:flex;align-items:center;gap:14px;}

.nav-toggle{
  display:none;
  width:44px;height:44px;
  border-radius:50%;
  border:1px solid var(--glass-border);
  align-items:center;justify-content:center;
  flex-shrink:0;
}
.nav-toggle span{display:block;width:18px;height:1.5px;background:var(--ink-100);position:relative;transition:background .2s;}
.nav-toggle span::before,.nav-toggle span::after{
  content:'';position:absolute;left:0;width:18px;height:1.5px;background:var(--ink-100);transition:transform .3s var(--ease);
}
.nav-toggle span::before{top:-6px;}
.nav-toggle span::after{top:6px;}
.nav-toggle.is-open span{background:transparent;}
.nav-toggle.is-open span::before{transform:translateY(6px) rotate(45deg);}
.nav-toggle.is-open span::after{transform:translateY(-6px) rotate(-45deg);}

/* ---------------------------------------------------------------------- */
/* Dark hero surfaces & background fx */
/* ---------------------------------------------------------------------- */
.surface-dark{
  background:
    radial-gradient(1100px 620px at 82% -10%, rgba(206,27,34,.10), transparent 60%),
    radial-gradient(900px 500px at 8% 8%, rgba(255,60,66,.06), transparent 55%),
    linear-gradient(180deg,var(--navy-950),var(--navy-900) 55%,var(--navy-800));
  color:var(--ink-100);
  position:relative;
  isolation:isolate;
  overflow:hidden;
}
.grid-overlay{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:56px 56px;
  mask-image:linear-gradient(180deg, rgba(0,0,0,.9), transparent 75%);
  pointer-events:none;
  z-index:0;
}
.noise-veil::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg, transparent, rgba(22,24,27,.5));
  z-index:0;
}

[data-tilt]{transition:transform .15s ease-out;transform:perspective(1200px) rotateX(0deg) rotateY(0deg);will-change:transform;}
[data-tilt] .route-dot{cursor:pointer;}

.glow-orb{
  position:absolute;border-radius:50%;
  filter:blur(60px);
  opacity:.55;
  pointer-events:none;
  z-index:0;
}

/* ---------------------------------------------------------------------- */
/* Glass card */
/* ---------------------------------------------------------------------- */
.glass{
  background:var(--glass-fill);
  border:1px solid var(--glass-border-soft);
  border-radius:var(--radius-md);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}

.card{
  background:var(--white);
  border:1px solid var(--rule);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-md);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:rgba(206,27,34,.35);}

/* ---------------------------------------------------------------------- */
/* Section chrome */
/* ---------------------------------------------------------------------- */
.section{padding:clamp(72px,10vw,128px) 0;}
.section-tight{padding:clamp(48px,6vw,80px) 0;}

.section-head{max-width:680px;margin-bottom:clamp(36px,5vw,64px);}
.section-head.centered{margin-inline:auto;text-align:center;}
.section-head .eyebrow{margin-bottom:16px;}
.section-head h2{margin-top:16px;}
.section-head .lede{margin-top:18px;}
.section-head.centered .lede{margin-inline:auto;}

.tilt-divider{
  position:absolute;left:0;right:0;height:90px;
  background:inherit;
  clip-path:polygon(0 0,100% 100%,100% 100%,0 100%);
}

.diag-cut-top{clip-path:polygon(0 40px, 100% 0, 100% 100%, 0 100%);}

/* ---------------------------------------------------------------------- */
/* Stat band */
/* ---------------------------------------------------------------------- */
.stat-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  background:var(--glass-border-soft);
  border:1px solid var(--glass-border-soft);
  border-radius:var(--radius-md);
  overflow:hidden;
}
.stat-cell{
  background:rgba(22,24,27,.35);
  padding:32px 24px;
  text-align:center;
}
.stat-num{
  font-family:var(--font-head);
  font-size:clamp(2rem,4vw,3rem);
  font-weight:700;
  color:var(--teal-300);
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:2px;
}
.stat-label{
  margin-top:8px;
  font-size:.82rem;
  color:var(--ink-300);
  font-weight:500;
}

/* ---------------------------------------------------------------------- */
/* Route / map motifs */
/* ---------------------------------------------------------------------- */
.route-dot{animation:pulse-dot 2.4s ease-in-out infinite;}
@keyframes pulse-dot{
  0%,100%{opacity:1;r:4;}
  50%{opacity:.35;r:6;}
}
.route-path{stroke-dasharray:6 8;animation:dash-move 26s linear infinite;}
@keyframes dash-move{to{stroke-dashoffset:-1000;}}

/* ---------------------------------------------------------------------- */
/* Reveal-on-scroll */
/* ---------------------------------------------------------------------- */
[data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease), transform .8s var(--ease);}
[data-reveal].is-visible{opacity:1;transform:translateY(0);}
[data-reveal="fade"]{transform:none;}
[data-reveal-delay="1"]{transition-delay:.08s;}
[data-reveal-delay="2"]{transition-delay:.16s;}
[data-reveal-delay="3"]{transition-delay:.24s;}
[data-reveal-delay="4"]{transition-delay:.32s;}
[data-reveal-delay="5"]{transition-delay:.4s;}

/* ---------------------------------------------------------------------- */
/* Grids & layout helpers */
/* ---------------------------------------------------------------------- */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,64px);align-items:center;}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.grid-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;}
.flex-between{display:flex;align-items:center;justify-content:space-between;gap:16px;}

/* ---------------------------------------------------------------------- */
/* Service / feature cards */
/* ---------------------------------------------------------------------- */
.icon-tile{
  width:52px;height:52px;
  border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg, rgba(206,27,34,.16), rgba(255,60,66,.1));
  border:1px solid rgba(206,27,34,.25);
  color:var(--teal-400);
  flex-shrink:0;
}
.icon-tile svg{width:26px;height:26px;}

.feature-card{padding:32px;display:flex;flex-direction:column;gap:16px;}
.feature-card h3{margin-top:4px;}
.feature-card p{font-size:.94rem;}

.pill-tag{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 14px;
  border-radius:var(--radius-pill);
  font-size:.76rem;
  font-weight:600;
  background:var(--paper-dim);
  color:var(--navy-700);
}
.on-dark .pill-tag{background:var(--glass-fill);color:var(--teal-300);border:1px solid var(--glass-border-soft);}



/* ---------------------------------------------------------------------- */
/* Forms */
/* ---------------------------------------------------------------------- */
.field{display:flex;flex-direction:column;gap:8px;}
.field label{font-size:.82rem;font-weight:600;color:var(--ink-700);}
.on-dark .field label{color:var(--ink-300);}
.field input,.field select,.field textarea{
  padding:14px 16px;
  border-radius:var(--radius-sm);
  border:1.5px solid var(--rule);
  background:var(--white);
  font-size:.95rem;
  transition:border-color .25s, box-shadow .25s;
}
.on-dark .field input,.on-dark .field select,.on-dark .field textarea{
  background:rgba(255,255,255,.04);
  border-color:var(--glass-border-soft);
  color:var(--ink-100);
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--teal-400);box-shadow:0 0 0 4px rgba(206,27,34,.15);
}
.field textarea{resize:vertical;min-height:120px;}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}

/* ---------------------------------------------------------------------- */
/* Footer */
/* ---------------------------------------------------------------------- */
.site-footer{background:var(--navy-950);color:var(--ink-300);position:relative;overflow:hidden;}
.footer-top{padding:clamp(56px,7vw,88px) clamp(20px,4vw,40px) 48px;border-bottom:1px solid rgba(255,255,255,.08);}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;}
.footer-col h4{color:var(--ink-100);margin-bottom:18px;font-size:.85rem;letter-spacing:.06em;text-transform:uppercase;font-family:var(--font-mono);font-weight:500;}
.footer-col a{display:block;padding:6px 0;font-size:.92rem;color:var(--ink-300);transition:color .2s;}
.footer-col a:hover{color:var(--teal-300);}
.footer-bottom{padding:26px clamp(20px,4vw,40px);display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.82rem;color:var(--ink-300);}
.group-strip{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:18px 22px;border-radius:var(--radius-md);
  background:var(--glass-fill);border:1px solid var(--glass-border-soft);
  margin-bottom:40px;
}
.group-strip .sep{width:1px;height:18px;background:var(--glass-border);}
.group-chip{font-size:.78rem;font-weight:600;color:var(--ink-300);}
.group-chip.is-live{color:var(--teal-300);}
.social-row{display:flex;gap:10px;margin-top:18px;}
.social-row a{
  width:38px;height:38px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--glass-border-soft);color:var(--ink-300);
}
.social-row a:hover{border-color:var(--teal-400);color:var(--teal-300);}
.social-row a svg{width:16px;height:16px;}

/* ---------------------------------------------------------------------- */
/* Utility */
/* ---------------------------------------------------------------------- */
/* Unmissable marker for content awaiting real data — must be empty before launch.
   Search the project for "needs-input" to find every remaining one. */
.needs-input{
  display:inline-block;
  background:repeating-linear-gradient(45deg,#ffe9a8,#ffe9a8 8px,#ffdc7a 8px,#ffdc7a 16px);
  color:#5c4405;
  border:1px dashed #b8860b;
  border-radius:4px;
  padding:1px 7px;
  font-family:var(--font-mono);
  font-size:.82em;
  font-weight:600;
}

.text-center{text-align:center;}
.mt-8{margin-top:8px;} .mt-16{margin-top:16px;} .mt-24{margin-top:24px;} .mt-32{margin-top:32px;} .mt-48{margin-top:48px;}
.mb-16{margin-bottom:16px;} .mb-24{margin-bottom:24px;}
.gap-12{gap:12px;} .gap-16{gap:16px;}
.flex{display:flex;} .items-center{align-items:center;} .justify-center{justify-content:center;}
.w-full{width:100%;}
.hide-mobile{display:initial;}
.show-mobile{display:none;}

/* ---------------------------------------------------------------------- */
/* Page hero shared */
/* ---------------------------------------------------------------------- */
.page-hero{padding:calc(clamp(72px,10vw,128px) + 60px) 0 clamp(64px,8vw,96px);}
.breadcrumb{display:flex;align-items:center;gap:8px;font-size:.82rem;color:var(--ink-300);margin-bottom:20px;}
.breadcrumb .sep{opacity:.5;}
.breadcrumb .current{color:var(--teal-300);}

/* ---------------------------------------------------------------------- */
/* Responsive */
/* ---------------------------------------------------------------------- */
/* The off-canvas menu and its toggle MUST switch on at the same breakpoint.
   Previously the nav hid at 1024px but the toggle only appeared at 720px,
   leaving tablet widths with no navigation at all. */
@media (max-width:1024px){
  .grid-2{grid-template-columns:1fr;}
  .grid-3{grid-template-columns:1fr 1fr;}
  .stat-grid{grid-template-columns:repeat(2,1fr);}
  .footer-grid{grid-template-columns:1fr 1fr;row-gap:36px;}

  .main-nav{
    position:fixed;top:0;right:0;bottom:0;
    width:min(80vw,340px);
    background:var(--navy-950);
    flex-direction:column;
    align-items:stretch;
    padding:100px 28px 40px;
    gap:4px;
    transform:translateX(100%);
    /* visibility keeps the closed panel out of the tab order */
    visibility:hidden;
    transition:transform .4s var(--ease), visibility 0s linear .4s;
    box-shadow:-20px 0 50px rgba(0,0,0,.4);
    display:flex;
    overflow-y:auto;
  }
  .main-nav.is-open{
    transform:translateX(0);
    visibility:visible;
    transition:transform .4s var(--ease), visibility 0s;
  }
  .main-nav a{padding:14px 16px;font-size:1.05rem;}
  .nav-toggle{display:flex;}
  .header-cta .btn-ghost{display:none;}
}
@media (max-width:860px){
  .field-row{grid-template-columns:1fr;}
}
@media (max-width:720px){
  .grid-3{grid-template-columns:1fr;}
  .grid-4{grid-template-columns:1fr 1fr;}
  .stat-grid{grid-template-columns:1fr 1fr;}
  .footer-grid{grid-template-columns:1fr;}
  .hide-mobile{display:none;}
  .show-mobile{display:initial;}
}
@media (max-width:520px){
  .stat-grid{grid-template-columns:1fr;}
  .grid-4{grid-template-columns:1fr;}
}

/* Nav scrim for mobile menu */
.nav-scrim{
  position:fixed;inset:0;background:rgba(22,24,27,.6);
  opacity:0;pointer-events:none;transition:opacity .35s;z-index:900;
}
.nav-scrim.is-open{opacity:1;pointer-events:auto;}

/* ---------------------------------------------------------------------- */
/* Focus states — keyboard users must always see where they are           */
/* ---------------------------------------------------------------------- */
:focus-visible{
  outline:3px solid var(--gold-400);
  outline-offset:3px;
  border-radius:4px;
}
.surface-dark :focus-visible,
.site-footer :focus-visible{outline-color:var(--gold-300);}
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible{outline-offset:0;}

/* Skip link — first tab stop on every page */
.skip-link{
  position:absolute;
  left:16px;top:-100px;
  z-index:2000;
  padding:12px 20px;
  border-radius:0 0 10px 10px;
  background:var(--gold-400);
  color:var(--navy-950);
  font-weight:700;
  font-size:.9rem;
  transition:top .2s var(--ease);
}
.skip-link:focus{top:0;}

/* ---------------------------------------------------------------------- */
/* Reduced motion — this site runs ~20 looping animations by default      */
/* ---------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  /* reveal-on-scroll must not leave content invisible */
  [data-reveal]{opacity:1 !important;transform:none !important;}
  [data-tilt]{transform:none !important;}
}