/* ==========================================================================
   ERATEX — New Age of Technology
   Palette: official ERATEX brand colours (#043E3C teal, #00A9AE bright teal,
   #CC0000 red). Edit the tokens in :root to rebrand the whole page.
   ========================================================================== */

/* ---------- Fonts (self-hosted, no external requests) ---------- */
@font-face{
  font-family:'Inter';font-style:normal;font-weight:300 800;font-display:swap;
  src:url('../assets/fonts/inter-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Inter';font-style:normal;font-weight:300 800;font-display:swap;
  src:url('../assets/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ---------- Brand tokens ---------- */
:root{
  --ink:        #03100F;   /* page ground — near black, teal cast */
  --ink-2:      #061A18;
  --teal:       #043E3C;   /* ERATEX brand teal — official palette */
  --teal-2:     #0E5F5A;
  --teal-3:     #0A4745;
  --cyan:       #00A9AE;   /* ERATEX bright teal — official palette */
  --red:        #CC0000;   /* ERATEX red — sampled from the supplied logo */
  --red-2:      #D12C3A;   /* brighter red from the palette sheet, for hovers */
  --white:      #FFFFFF;
  --muted:      #B9C8C7;
  --line:       rgba(185,200,199,.16);

  --ff: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --pad: clamp(20px, 5vw, 88px);
  --r: 14px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{margin:0;padding:0}
body{
  background:var(--ink);color:var(--white);font-family:var(--ff);
  font-weight:400;line-height:1.5;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img,svg,canvas{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3,p{margin:0}
::selection{background:var(--red);color:var(--white)}

body.is-locked{overflow:hidden;height:100%}

/* ---------- Shared type ---------- */
.h2{
  font-size:clamp(2.1rem,6.2vw,5.2rem);line-height:.98;font-weight:600;
  letter-spacing:-.035em;
}
.eyebrow{
  display:flex;align-items:center;gap:.6em;
  font-size:clamp(.68rem,1.3vw,.78rem);font-weight:500;
  letter-spacing:.28em;text-transform:uppercase;color:var(--muted);
}
.eyebrow.center{justify-content:center}
.eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--red);flex:none}

/* ==========================================================================
   PRELOADER
   ========================================================================== */
.loader{
  position:fixed;inset:0;z-index:200;background:var(--teal);
  display:grid;place-items:center;
}
.loader__inner{display:grid;justify-items:center;gap:26px;padding:0 24px}
.loader__logo{width:clamp(150px,26vw,230px);height:auto}
.loader__bar{width:min(240px,60vw);height:2px;background:rgba(255,255,255,.18);overflow:hidden}
.loader__bar span{display:block;height:100%;width:0;background:var(--red)}
.loader__count{
  position:absolute;right:var(--pad);bottom:calc(var(--pad) - 10px);
  font-size:clamp(2.6rem,9vw,5.5rem);font-weight:300;letter-spacing:-.05em;
  color:rgba(255,255,255,.22);font-variant-numeric:tabular-nums;
}


/* ==========================================================================
   NAV
   ========================================================================== */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:120;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:20px var(--pad);
  transition:background-color .45s var(--ease),backdrop-filter .45s var(--ease),padding .45s var(--ease);
}
.nav.is-stuck{
  background:rgba(3,16,15,.72);backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);padding:14px var(--pad);
  border-bottom:1px solid var(--line);
}
.nav__brand img{width:clamp(96px,11vw,138px);height:auto}
.nav__links{display:flex;gap:clamp(16px,2.4vw,34px)}
.nav__links a{
  font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  position:relative;padding:4px 0;transition:color .3s
}
.nav__links a::after{
  content:'';position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--red);
  transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease)
}
.nav__links a:hover{color:var(--white)}
.nav__links a:hover::after{transform:scaleX(1);transform-origin:left}
.nav__cta{
  border:1px solid var(--line);border-radius:100px;padding:9px 20px;
  font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;
  position:relative;overflow:hidden;isolation:isolate
}
.nav__cta span{position:relative;z-index:1;transition:color .35s var(--ease)}
.nav__cta::before{
  content:'';position:absolute;inset:0;background:var(--red);
  transform:translateY(101%);transition:transform .42s var(--ease)
}
.nav__cta:hover::before{transform:translateY(0)}
.nav__cta:hover span{color:var(--white)}
@media (max-width:720px){ .nav__links{display:none} }

/* ==========================================================================
   1 · HERO
   ========================================================================== */
.hero{
  position:relative;min-height:100svh;overflow:hidden;
  display:grid;place-items:end center;isolation:isolate;
}
.hero__gl{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.hero__glow{
  position:absolute;left:50%;top:52%;translate:-50% -50%;z-index:0;
  width:min(120vh,120vw);aspect-ratio:1;pointer-events:none;
  background:radial-gradient(circle at 50% 50%, rgba(12,88,85,.55) 0%, rgba(8,62,60,.28) 38%, transparent 68%);
}
.hero__figure{
  position:absolute;left:50%;bottom:0;translate:-50% 0;z-index:1;
  line-height:0;pointer-events:none;will-change:transform;
}
/* height lives on the image itself: a percentage here would resolve
   against an auto-sized grid row and collapse back to the natural 1400px */
.hero__figure img{
  height:min(94svh,940px);width:auto;max-width:none;
  filter:drop-shadow(0 0 70px rgba(12,88,85,.75)) drop-shadow(0 22px 60px rgba(0,0,0,.6));
  opacity:.96;
}
/* scrim: seats the headline and fades the figure into the ticker */
.hero::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:62%;z-index:1;
  pointer-events:none;
  background:linear-gradient(to top,var(--ink) 0%,rgba(3,16,15,.92) 26%,rgba(3,16,15,.45) 62%,transparent 100%);
}
.hero__type{
  position:relative;z-index:2;width:100%;padding:0 var(--pad) clamp(74px,13vh,150px);
  text-align:center;pointer-events:none;
}
.hero__title{
  font-size:clamp(2.1rem,8.2vw,8.4rem);line-height:.9;font-weight:200;
  letter-spacing:-.03em;text-transform:uppercase;
  text-shadow:0 6px 44px rgba(3,16,15,.75);
}
.hero__title .line{display:block;overflow:hidden}
.hero__title .line>span{display:block;will-change:transform}
.hero__sub{
  margin-top:clamp(14px,2.4vh,26px);font-size:clamp(.7rem,1.5vw,.84rem);
  letter-spacing:.4em;text-transform:uppercase;color:var(--muted);
}
.hero__scroll{
  position:absolute;left:50%;bottom:22px;translate:-50% 0;z-index:3;
  width:1px;height:54px;background:var(--line);overflow:hidden
}
.hero__scroll span{
  display:block;width:100%;height:50%;background:var(--red);
  animation:scrollCue 2.1s var(--ease) infinite
}
@keyframes scrollCue{0%{transform:translateY(-100%)}60%,100%{transform:translateY(200%)}}

/* ==========================================================================
   2 · SECTOR TICKER
   ========================================================================== */
.ticker{
  position:relative;z-index:4;overflow:hidden;background:var(--teal);
  padding:clamp(14px,2.2vw,22px) 0;border-block:1px solid rgba(255,255,255,.07);
}
.ticker__track{display:flex;align-items:center;gap:clamp(18px,3vw,40px);width:max-content;will-change:transform}
.ticker__track span{
  font-size:clamp(.8rem,1.9vw,1.15rem);font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(255,255,255,.62);white-space:nowrap
}
.ticker__track i{width:6px;height:6px;border-radius:50%;background:var(--red);flex:none}

/* ==========================================================================
   3 · 3D PRODUCTS
   ========================================================================== */
.three-d{position:relative;padding:clamp(80px,13vh,150px) 0 clamp(60px,9vh,110px);overflow:hidden}
.three-d__gl{position:absolute;inset:0;width:100%;height:100%;z-index:0;opacity:.85}
.three-d__head{position:relative;z-index:1;padding:0 var(--pad);display:grid;gap:18px;margin-bottom:clamp(38px,6vh,70px)}

.rail{position:relative;z-index:1;overflow:hidden}
.rail__track{display:flex;gap:clamp(16px,2.2vw,34px);padding:0 var(--pad);width:max-content;will-change:transform}

/* mobile / reduced-motion: native swipe instead of a pinned scrub */
.rail.is-native,.story__rail.is-native{
  overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;scrollbar-width:none
}
.rail.is-native::-webkit-scrollbar,.story__rail.is-native::-webkit-scrollbar{display:none}
.rail.is-native .rail__track,.story__rail.is-native .story__track{transform:none!important}
.rail.is-native .card,.story__rail.is-native .step{scroll-snap-align:center}

.card{
  position:relative;flex:none;
  width:clamp(280px,84vw,620px);aspect-ratio:3/2;border-radius:var(--r);overflow:hidden;
  background:var(--ink-2);border:1px solid var(--line);isolation:isolate;
}
.card__media{position:absolute;inset:0;overflow:hidden}
.card__media img{
  width:100%;height:100%;object-fit:cover;
  filter:saturate(.72) contrast(1.06) brightness(.78);
  transform:scale(1.06);transition:transform 1.1s var(--ease),filter .7s var(--ease);
  will-change:transform;
}
.card::after{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(3,16,15,.05) 30%,rgba(3,16,15,.85) 100%);
}
.card:hover .card__media img{transform:scale(1.13);filter:saturate(.95) contrast(1.04) brightness(.9)}
.card__meta{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:clamp(18px,2.4vw,30px)}
.card__meta h3{
  font-size:clamp(1.9rem,5vw,3.1rem);font-weight:600;letter-spacing:-.03em;line-height:1;
}
.card__meta p{margin-top:.5em;font-size:clamp(.76rem,1.5vw,.9rem);color:var(--muted);letter-spacing:.02em}
.card__idx{
  position:absolute;top:clamp(14px,2vw,22px);right:clamp(14px,2vw,22px);z-index:2;
  font-size:.72rem;letter-spacing:.2em;color:var(--muted);
  border:1px solid var(--line);border-radius:100px;padding:5px 11px;
  background:rgba(3,16,15,.35);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)
}
.card::before{
  content:'';position:absolute;left:0;top:0;width:100%;height:2px;z-index:3;
  background:var(--red);transform:scaleX(0);transform-origin:left;
  transition:transform .55s var(--ease)
}
.card:hover::before{transform:scaleX(1)}

.rail__bar{
  position:relative;z-index:1;margin:clamp(28px,5vh,56px) var(--pad) 0;
  height:2px;background:var(--line);overflow:hidden
}
.rail__bar span{display:block;height:100%;width:0;background:var(--red)}

/* When the section is pinned it must fit the viewport exactly, so the
   cards are sized from the available height instead of the page width. */
@media (min-width:820px) and (prefers-reduced-motion:no-preference){
  .three-d{
    height:100svh;padding:0;
    display:flex;flex-direction:column;justify-content:center;
    gap:clamp(18px,3.2vh,44px);
  }
  .three-d__head{margin-bottom:0;gap:12px}
  .three-d__head .h2{font-size:clamp(2rem,4.2vw,3.9rem)}
  .card{height:min(52svh,520px);width:auto}
  .rail__bar{margin-top:0}
}

/* ==========================================================================
   3b · INSIDE THE EXPERIENCE
   ========================================================================== */
.lede{
  margin-top:6px;max-width:34ch;color:var(--muted);
  font-size:clamp(.88rem,1.5vw,1.05rem);line-height:1.45;
}

.inside{padding:clamp(64px,11vh,130px) var(--pad) clamp(70px,12vh,150px)}
.inside > .eyebrow{margin-bottom:clamp(26px,4vh,44px)}

.showcase{
  position:relative;margin:0 0 clamp(28px,4.5vh,52px);
  aspect-ratio:1200/554;overflow:hidden;
  border:1px solid var(--line);border-radius:var(--r);background:var(--ink-2);
}
.showcase video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
}
.showcase::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 90px rgba(3,16,15,.5);
  border-radius:inherit;
}
@media (max-width:560px){ .showcase{aspect-ratio:4/3} }

.caps{
  list-style:none;margin:0 0 clamp(30px,5vh,58px);padding:0;
  display:grid;gap:clamp(8px,1.1vw,14px);
  grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
}
.caps li{
  display:flex;align-items:center;gap:12px;
  padding:14px 16px;border:1px solid var(--line);border-radius:100px;
  background:linear-gradient(120deg,rgba(4,62,60,.42),rgba(6,26,24,.42));
  font-size:clamp(.76rem,1.3vw,.88rem);color:var(--muted);
  transition:border-color .4s var(--ease),color .4s var(--ease),background-color .4s var(--ease);
}
.caps li svg{
  width:20px;height:20px;flex:none;
  fill:none;stroke:var(--cyan);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;
}
.caps li:hover{border-color:rgba(0,169,174,.5);color:var(--white)}

/* 5 stills, three tidy rows on desktop */
.mosaic{
  display:grid;gap:clamp(8px,1.1vw,14px);
  grid-template-columns:repeat(6,1fr);
  grid-auto-rows:clamp(150px,15vw,240px);
}
.mosaic figure{margin:0;position:relative;overflow:hidden;border-radius:var(--r);border:1px solid var(--line);background:var(--ink-2)}
.mosaic img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:saturate(.82) brightness(.82);transform:scale(1.04);
  transition:transform 1.1s var(--ease),filter .7s var(--ease);
}
.mosaic figure:hover img{transform:scale(1.1);filter:saturate(1) brightness(.96)}
.mosaic figure::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(190deg,transparent 40%,rgba(3,16,15,.55));
}
.mosaic__a{grid-column:span 4;grid-row:span 2}
.mosaic__b{grid-column:span 2}
.mosaic__c{grid-column:span 2}
.mosaic__d{grid-column:span 3}
.mosaic__e{grid-column:span 3}
@media (max-width:900px){
  .mosaic{grid-template-columns:repeat(4,1fr);grid-auto-rows:clamp(130px,22vw,200px)}
  .mosaic__a{grid-column:span 4;grid-row:span 2}
  .mosaic__b,.mosaic__c,.mosaic__d,.mosaic__e{grid-column:span 2}
}
@media (max-width:560px){
  .mosaic{grid-template-columns:repeat(2,1fr);grid-auto-rows:clamp(120px,34vw,190px)}
  .mosaic__a{grid-column:span 2;grid-row:span 1}
  .mosaic__b,.mosaic__c,.mosaic__d,.mosaic__e{grid-column:span 1}
}

/* ==========================================================================
   4 · SOLUTIONS
   ========================================================================== */
.solutions{padding:clamp(80px,14vh,170px) var(--pad)}
.solutions__head{display:grid;gap:18px;margin-bottom:clamp(40px,7vh,80px)}

/* 7 tiles on a 6-column grid, three tidy rows:
   [wide 4 + 2] · [2 + 2 + 2] · [2 + wide 4]
   Equal row heights come from grid-auto-rows, not per-tile aspect ratios. */
.grid{
  display:grid;gap:clamp(10px,1.4vw,18px);
  grid-template-columns:repeat(6,1fr);
  grid-auto-rows:clamp(190px,23vw,330px);
  perspective:1200px;
}
.tile{
  position:relative;grid-column:span 2;height:100%;
  transform-style:preserve-3d;
  border-radius:var(--r);overflow:hidden;border:1px solid var(--line);
  background:var(--ink-2);display:block;isolation:isolate;
}
.tile--wide{grid-column:span 4}
.tile>img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) brightness(.62) contrast(1.08);
  transform:scale(1.05);
  transition:transform 1.1s var(--ease),filter .7s var(--ease);
}
.tile::after{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(200deg,rgba(8,62,60,.42),rgba(3,16,15,.82));
  transition:opacity .55s var(--ease)
}
.tile:hover>img{transform:scale(1.12);filter:grayscale(0) brightness(.8) contrast(1.03)}
.tile:hover::after{opacity:.68}
.tile__ico{
  position:absolute;top:clamp(16px,2vw,26px);left:clamp(16px,2vw,26px);z-index:2;
  width:clamp(30px,3.4vw,42px);height:auto;
  fill:none;stroke:var(--red);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
}
.tile h3{
  position:absolute;left:clamp(16px,2vw,26px);right:clamp(16px,2vw,26px);
  bottom:clamp(16px,2vw,26px);z-index:2;
  font-size:clamp(1rem,1.9vw,1.55rem);font-weight:500;letter-spacing:-.02em;line-height:1.1
}
@media (max-width:900px){
  .grid{grid-template-columns:repeat(4,1fr);grid-auto-rows:clamp(170px,26vw,260px)}
  .tile--wide{grid-column:span 4}
}
@media (max-width:560px){
  .grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:clamp(150px,40vw,230px)}
  .tile{grid-column:span 1}
  .tile--wide{grid-column:span 2}
}

/* ==========================================================================
   5 · STORY / TIMELINE
   ========================================================================== */
.story{
  position:relative;background:var(--teal);
  padding:clamp(70px,12vh,140px) 0;overflow:hidden;
}
.story__head{padding:0 var(--pad);margin-bottom:clamp(40px,7vh,80px)}
.story__rail{overflow:hidden}
.story__track{display:flex;gap:clamp(30px,6vw,110px);padding:0 var(--pad);width:max-content;will-change:transform}
.step{position:relative;flex:none;min-width:clamp(180px,26vw,300px);padding-top:34px}
.step i{
  position:absolute;left:0;top:12px;width:100%;height:1px;background:rgba(255,255,255,.2)
}
.step i::after{
  content:'';position:absolute;left:0;top:-4px;width:9px;height:9px;border-radius:50%;
  background:var(--red);box-shadow:0 0 0 5px rgba(204,0,0,.18)
}
.step__yr{
  display:block;font-size:clamp(2.6rem,7.5vw,6rem);font-weight:200;letter-spacing:-.05em;
  line-height:.9;color:rgba(255,255,255,.9);font-variant-numeric:tabular-nums
}
.step p{margin-top:.7em;font-size:clamp(.82rem,1.5vw,1rem);color:rgba(255,255,255,.6);line-height:1.4}

.story__aside{
  position:absolute;right:0;bottom:0;width:clamp(150px,24vw,340px);
  aspect-ratio:497/885;overflow:hidden;opacity:.5;pointer-events:none;
  -webkit-mask-image:linear-gradient(to left,#000 25%,transparent 100%);
  mask-image:linear-gradient(to left,#000 25%,transparent 100%);
}
.story__aside img{width:100%;height:100%;object-fit:cover;filter:saturate(.6)}
@media (max-width:760px){ .story__aside{display:none} }

@media (min-width:820px) and (prefers-reduced-motion:no-preference){
  .story{
    height:100svh;padding:0;
    display:flex;flex-direction:column;justify-content:center;gap:clamp(24px,5vh,60px);
  }
  .story__head{margin-bottom:0}
}

/* ==========================================================================
   6 · CLIENTS
   ========================================================================== */
.clients{padding:clamp(70px,12vh,140px) 0;overflow:hidden}
.clients .eyebrow{margin-bottom:clamp(34px,6vh,64px);padding:0 var(--pad)}
.marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee__row{display:flex;align-items:center;gap:clamp(40px,7vw,110px);width:max-content;will-change:transform}
.marquee__row img{
  height:clamp(30px,4.4vw,54px);width:auto;flex:none;
  opacity:.42;filter:grayscale(1);transition:opacity .45s var(--ease),transform .45s var(--ease)
}
.marquee__row img:hover{opacity:1;transform:scale(1.08)}

/* ==========================================================================
   7 · CONTACT
   ========================================================================== */
.contact{
  position:relative;overflow:hidden;padding:clamp(80px,15vh,180px) var(--pad);
  display:grid;grid-template-columns:1.4fr .6fr;gap:clamp(30px,5vw,70px);align-items:end;
  border-top:1px solid var(--line);
}
.contact__bg{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(75% 120% at 12% 100%, rgba(8,62,60,.72) 0%, transparent 62%),
    radial-gradient(50% 80% at 90% 0%, rgba(238,47,45,.14) 0%, transparent 70%);
}
.contact__main{position:relative;z-index:1}
.contact__logo{width:clamp(180px,26vw,330px);height:auto}
.contact__tag{
  margin-top:14px;font-size:clamp(.68rem,1.4vw,.8rem);letter-spacing:.36em;
  text-transform:uppercase;color:var(--muted)
}
.contact__rows{margin-top:clamp(34px,6vh,64px);display:grid;gap:2px;max-width:640px}
.row{
  display:flex;align-items:baseline;gap:18px;padding:14px 0;
  border-top:1px solid var(--line);position:relative;transition:padding-left .4s var(--ease)
}
.row span{
  font-size:.68rem;letter-spacing:.26em;color:var(--red);width:16px;flex:none;text-transform:uppercase
}
.row b{font-size:clamp(1rem,2.4vw,1.5rem);font-weight:400;letter-spacing:-.015em}
a.row:hover{padding-left:12px}
a.row::after{
  content:'';position:absolute;left:0;bottom:-1px;width:100%;height:1px;background:var(--red);
  transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)
}
a.row:hover::after{transform:scaleX(1);transform-origin:left}
.row--static b{color:var(--muted)}

.contact__qr{position:relative;z-index:1;justify-self:end}
.contact__qr img{
  width:clamp(96px,13vw,160px);height:auto;
  padding:12px;background:var(--white);border-radius:10px
}
@media (max-width:820px){
  .contact{grid-template-columns:1fr;align-items:start}
  .contact__qr{justify-self:start}
}

.foot{
  display:flex;flex-wrap:wrap;gap:10px 22px;justify-content:space-between;align-items:center;
  padding:22px var(--pad);border-top:1px solid var(--line);
  font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)
}
.foot__credit{
  text-transform:none;letter-spacing:.02em;font-size:.68rem;
  color:rgba(185,200,199,.5);text-align:center;flex:1 1 auto
}
.foot__credit a{text-decoration:underline;text-underline-offset:2px}
.foot__credit a:hover{color:var(--white)}

/* ==========================================================================
   FALLBACKS / A11Y
   ========================================================================== */
.no-webgl .hero__gl,.no-webgl .three-d__gl{display:none}
.no-webgl .hero{
  background:
    radial-gradient(70% 60% at 50% 62%, rgba(12,88,85,.5) 0%, transparent 70%),
    linear-gradient(180deg,var(--ink) 0%,var(--ink-2) 60%,var(--teal) 100%);
}
.no-webgl .three-d{background:linear-gradient(180deg,var(--ink) 0%,var(--ink-2) 100%)}

:where(a,button):focus-visible{outline:2px solid var(--red);outline-offset:4px;border-radius:4px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .hero__scroll{display:none}
  .rail__track,.story__track{width:auto;overflow-x:auto;flex-wrap:nowrap;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
  .card,.step{scroll-snap-align:center}
}