/* ==========================================================================
   ÆTERA — holding page for aeteralabs.com

   Built from the live try.aeteralabs.com stylesheet: the same Palette B
   tokens, the same two self-hosted faces, the same type ladder and the same
   hero. Designed at 390px first; the one desktop layer starts at 900px, the
   breakpoint the live site uses.

   Backgrounds are only --night (the live black) and --basalt (the live grey).
   ========================================================================== */

@font-face{
  font-family:'Instrument Serif'; font-style:normal; font-weight:400; font-display:swap;
  src:url('fonts/instrument-serif-400-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:'Instrument Serif'; font-style:normal; font-weight:400; font-display:swap;
  src:url('fonts/instrument-serif-400-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;
}
/* Manrope is one variable file; 300, 400 and 500 all read from it. */
@font-face{
  font-family:'Manrope'; font-style:normal; font-weight:300 500; font-display:swap;
  src:url('fonts/manrope-variable-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:'Manrope'; font-style:normal; font-weight:300 500; font-display:swap;
  src:url('fonts/manrope-variable-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;
}

:root{
  --night:#0A0A0A; --basalt:#1A1A1A;
  --bone:#F1EDE5; --warm-grey:#B5AC9C; --border:#33291A;
  --champagne:#B8892E; --champagne-lift:#D0A44A; --champagne-deep:#8F6A22;

  /* the live hero's desktop grid texture: bone at 3% on --night */
  --hero-grid:
    repeating-linear-gradient(0deg, rgba(241,237,229,0.03) 0 1px, rgba(241,237,229,0) 1px 84px),
    repeating-linear-gradient(90deg, rgba(241,237,229,0.03) 0 1px, rgba(241,237,229,0) 1px 84px);

  --serif:'Instrument Serif', Georgia, serif;
  --sans:'Manrope', system-ui, -apple-system, sans-serif;

  --bar-h:32px;
  --nav-h:64px;
  --gutter:clamp(18px, 4vw, 64px);
  --maxw:1240px;

  --t-2:160ms; --t-3:240ms; --t-4:500ms;
  --ease:cubic-bezier(0.22, 1, 0.36, 1);

  /* the live type ladder (mobile values) */
  --fs-3xs:9.5px; --fs-2xs:10.5px; --fs-xs:11px; --fs-sm:12px; --fs-md:13px;
  --fs-base:14px; --fs-lg:16px; --fs-xl:18px; --fs-2xl:20px;
  --fs-hero:clamp(34px, 5.4vw, 60px);
  --fs-hero-link:clamp(10.5px, 1.05vw, 12px);
  --fs-hero-sub:clamp(9px, 0.78vw, 10px);
  --fs-h1-mast:clamp(29px, 3.5vw, 44px);
  --fs-h2-sec:clamp(26px, 2.9vw, 39px);

  /* the reassurance cards, deliberately one step below the live sizes */
  --fs-promise-h:16.5px;
  --fs-promise-p:11.5px;
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:var(--nav-h); background:var(--night);}
body{
  margin:0; background:var(--night); color:var(--bone);
  font-family:var(--sans); font-weight:300;
  font-size:var(--fs-lg); line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{display:block; max-width:100%;}
h1,h2,h3,h4{margin:0; font-weight:400; letter-spacing:-0.01em;}
p{margin:0;}
ul,ol{margin:0; padding:0; list-style:none;}
a{color:inherit;}
strong{font-weight:500; color:var(--bone);}

.wrap{width:100%; max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter);}
.display{font-family:var(--serif); font-weight:400; line-height:1.02; letter-spacing:-0.015em;}
.label{display:block; font-size:var(--fs-3xs); letter-spacing:0.2em; text-transform:uppercase; color:var(--champagne); font-weight:500;}
.vh{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:44px; padding:15px 30px; border:1px solid var(--champagne);
  background:var(--champagne); color:var(--night);
  font-size:var(--fs-xs); font-weight:500; letter-spacing:0.18em; text-transform:uppercase;
  text-decoration:none; cursor:pointer;
  transition:background var(--t-3) var(--ease), border-color var(--t-3) var(--ease);
}
.btn:hover{background:var(--champagne-lift); border-color:var(--champagne-lift);}
.btn:focus-visible{outline:2px solid var(--champagne-lift); outline-offset:3px;}

/* ==========================================================================
   ANNOUNCEMENT BAR
   ========================================================================== */
.announce{
  height:var(--bar-h); display:flex; align-items:center; justify-content:center;
  padding:0 var(--gutter); background:var(--basalt); border-bottom:1px solid var(--border);
  text-align:center; white-space:nowrap; overflow:hidden;
}
.announce p{font-size:var(--fs-3xs); letter-spacing:0.2em; text-transform:uppercase; font-weight:500; color:var(--bone); text-overflow:ellipsis; overflow:hidden;}

/* ==========================================================================
   HEADER — the live nav, solid black, pinned
   ========================================================================== */
.nav{
  position:sticky; top:0; z-index:100; height:var(--nav-h);
  display:flex; align-items:center;
  background:var(--night); border-bottom:1px solid var(--border);
}
.nav .wrap{display:flex; align-items:center; gap:26px;}
.brand{flex:0 0 auto; display:flex; align-items:center; min-height:44px; text-decoration:none;}
.brand img{height:19px; width:auto;}
.navlinks{display:none;}
.navtools{display:flex; align-items:center; gap:6px; flex:0 0 auto; margin-left:auto;}

/* the live language selector: gold-bordered code box, now a <details> */
.lang{position:relative;}
.lang summary{
  display:flex; align-items:center; justify-content:center;
  min-width:44px; min-height:44px; cursor:pointer; list-style:none;
}
.lang summary::-webkit-details-marker{display:none;}
.lang summary:focus-visible{outline:none;}
.lang-box{
  display:flex; align-items:center; gap:8px;
  border:1px solid var(--champagne-deep); padding:7px 11px;
  font-size:var(--fs-xs); letter-spacing:0.16em; text-transform:uppercase; line-height:1.4;
  color:var(--bone);
  transition:color var(--t-3) var(--ease), border-color var(--t-3) var(--ease);
}
.lang summary:hover .lang-box, .lang[open] .lang-box{color:var(--champagne); border-color:var(--champagne);}
.lang summary:focus-visible .lang-box{outline:2px solid var(--champagne); outline-offset:2px;}
.chev{width:12px; height:12px; stroke:currentColor; fill:none; stroke-width:1.8; transition:transform var(--t-3) var(--ease);}
.lang[open] .chev{transform:rotate(180deg);}
.lang-menu{
  position:absolute; top:calc(100% + 6px); right:0; z-index:5;
  min-width:150px; padding:6px 0;
  background:var(--basalt); border:1px solid var(--border);
}
.lang-menu a{
  display:flex; align-items:center; min-height:44px; padding:0 16px;
  font-size:var(--fs-sm); color:var(--warm-grey); letter-spacing:0.02em; text-decoration:none;
  transition:color var(--t-2) var(--ease);
}
.lang-menu a:hover, .lang-menu a:focus-visible{color:var(--bone);}

/* the chat line icon sits where the live cart icon was, in the same style */
.chat{
  display:flex; align-items:center; justify-content:center; width:44px; height:44px;
  color:var(--warm-grey); text-decoration:none; transition:color var(--t-3) var(--ease);
}
.chat:hover, .chat:focus-visible{color:var(--bone);}
.chat svg{width:19px; height:19px; stroke:currentColor; fill:none; stroke-width:1.3; stroke-linecap:round; stroke-linejoin:round;}

/* ==========================================================================
   HERO — the live hero: headline, lightbox, link, lockup, cue.
   The whole stack fits the first screen: the section is the viewport minus
   the bar and the header, and the photo takes whatever height is left.
   ========================================================================== */
.hero{
  position:relative; overflow:hidden;
  height:calc(100vh - var(--bar-h) - var(--nav-h));
  height:calc(100svh - var(--bar-h) - var(--nav-h));
  min-height:420px;
  display:flex; align-items:center;
  padding:clamp(10px, 2.2vh, 28px) 0 clamp(44px, 5.6vh, 64px);
  background-color:var(--night);
}
.hero-inner{
  width:100%; height:100%; max-width:960px; margin:0 auto; padding:0 var(--gutter);
  display:flex; flex-direction:column; align-items:center; text-align:center;
}
.hero-copy{position:relative; z-index:2; flex:0 0 auto; width:100%;}
.hero h1{font-size:var(--fs-hero); line-height:1.06;}
.hero-media{
  position:relative; z-index:1;
  flex:1 1 0; min-height:0; width:100%;
  margin:clamp(6px, 1.4vh, 20px) 0;
  display:flex; align-items:center; justify-content:center;
}
/* never cropped: both dimensions auto, both maxima 100%, contain */
.hero-lightbox{
  display:block; width:auto; height:auto; max-width:100%; max-height:100%;
  object-fit:contain; object-position:center;
}
.hero-tail{position:relative; z-index:1; flex:0 0 auto; width:100%; display:flex; flex-direction:column; align-items:center;}
/* An underlined, letterspaced text link. The anchor is a 44px tap target;
   the underline sits on the text, exactly as on the live site. */
.hero-link{
  display:inline-flex; align-items:center; min-height:44px; margin:-6px 0;
  font-size:var(--fs-hero-link); letter-spacing:0.24em; text-transform:uppercase;
  font-weight:500; color:var(--bone); text-decoration:none;
  transition:color var(--t-3) var(--ease);
}
.hero-link span{padding-bottom:7px; border-bottom:1px solid var(--champagne); transition:border-color var(--t-3) var(--ease);}
.hero-link:hover{color:var(--champagne-lift);}
.hero-link:hover span{border-bottom-color:var(--champagne-lift);}
.hero-link:focus-visible{outline:2px solid var(--champagne-lift); outline-offset:4px;}
.hero-sub{margin-top:clamp(12px, 2.2vh, 24px);}
.hero-sub span{
  display:block; font-size:var(--fs-hero-sub); letter-spacing:0.18em;
  text-transform:uppercase; color:var(--warm-grey); font-weight:300; line-height:1.9;
}
.scrollcue{
  position:absolute; left:0; right:0; bottom:clamp(10px, 1.5vh, 22px); z-index:3;
  display:flex; align-items:center; justify-content:center; gap:12px;
  font-size:var(--fs-3xs); letter-spacing:0.22em; text-transform:uppercase; color:var(--warm-grey);
}
.scrollcue .bar{width:34px; height:1px; background:var(--champagne);}

/* THE PARALLAX, in CSS. The photo, the link, the lockup and the cue climb at
   the live rate -- 1.34x page scroll, the live HERO_LIFT of 0.34 -- and fade
   as they go; the headline scrolls with the page. A linear 0 -> -340px over
   the first 1000px of scroll is exactly -0.34px per pixel. Off entirely
   under reduced motion, and simply static where scroll timelines are not
   supported. */
@keyframes hero-lift{from{transform:translate3d(0,0,0);} to{transform:translate3d(0,-340px,0);}}
@keyframes hero-fade{from{opacity:1;} to{opacity:0;}}
@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: scroll()){
    .hero-lift{
      animation:hero-lift linear both, hero-fade linear both;
      animation-timeline:scroll(root block), scroll(root block);
      animation-range:0px 1000px, 0px 58svh;
      will-change:transform, opacity;
    }
  }
}

/* ==========================================================================
   QUALITY — the live four reassurance cards, compact
   ========================================================================== */
.promises{padding:22px 0 20px;}
.promise-grid{
  display:grid; grid-template-columns:1fr 1fr;
  border:1px solid var(--border); background:var(--basalt);
}
.promise{
  display:flex; flex-direction:column; align-items:flex-start;
  gap:6px; padding:12px 11px;
  border-right:1px solid var(--border);
}
.promise:nth-child(2n){border-right:0;}
.promise:nth-child(-n+2){border-bottom:1px solid var(--border);}
.promise svg{
  width:22px; height:22px; stroke:var(--champagne); fill:none;
  stroke-width:1.1; stroke-linecap:round; stroke-linejoin:round;
  transition:transform var(--t-4) var(--ease);
}
.promise:hover svg{transform:translateY(-2px);}
.promise .hair{width:22px; height:1px; background:var(--border);}
.promise h3{font-family:var(--serif); font-size:var(--fs-promise-h); line-height:1.2; max-width:14ch;}
.promise p{font-size:var(--fs-promise-p); line-height:1.5; color:var(--warm-grey); max-width:28ch;}
.promise .pl{display:block;}
.promise .pl + .pl{margin-top:4px;}

/* ==========================================================================
   SECTION FURNITURE
   ========================================================================== */
.sec{padding:clamp(42px, 4.2vw, 64px) 0;}
.sec-head{margin-bottom:clamp(18px, 2.1vw, 28px);}
.sec-head h2, .contact h2{font-family:var(--serif); font-size:var(--fs-h2-sec); line-height:1.06;}
.label + h2{margin-top:14px;}
.sec-head p{margin-top:8px; max-width:60ch; color:var(--warm-grey); font-size:var(--fs-lg); text-wrap:pretty;}
.sec-head p a{
  color:var(--champagne); text-decoration:none; border-bottom:1px solid var(--champagne-deep);
  transition:color var(--t-2) var(--ease), border-color var(--t-2) var(--ease);
}
.sec-head p a:hover{color:var(--champagne-lift); border-color:var(--champagne-lift);}

/* ==========================================================================
   COLLECTION — names and sizes only
   ========================================================================== */
.groups{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:0 18px;}
/* Each group spans two rows of the parent grid (heading, list) through
   subgrid, so a heading that wraps in one column pushes its whole row down
   rather than knocking one list out of line with its neighbour. */
.group{display:grid; grid-row:span 2; grid-template-rows:subgrid; row-gap:0; margin-bottom:28px;}
.group h3{align-self:end;}
.group h3{
  font-size:var(--fs-2xs); letter-spacing:0.2em; text-transform:uppercase; line-height:1.4;
  color:var(--champagne); font-weight:500;
  padding-bottom:10px; border-bottom:1px solid var(--border);
}
.group li{padding:9px 0 10px; border-bottom:1px solid var(--border);}
.pname{display:block; font-family:var(--serif); font-size:var(--fs-xl); line-height:1.2; color:var(--bone);}
.psize{display:block; margin-top:3px; font-size:var(--fs-sm); letter-spacing:0.04em; color:var(--warm-grey);}

/* ==========================================================================
   ABOUT — grey, the wordmark as its heading
   ========================================================================== */
.about{
  background:var(--basalt); border-top:1px solid var(--border); border-bottom:1px solid var(--border);
  padding:clamp(42px, 4.2vw, 64px) 0;
}
.about-mark{margin-top:16px;}
.about-mark img{height:clamp(30px, 3.4vw, 46px); width:auto;}
.about-copy{margin-top:22px; max-width:62ch;}
.about-copy p{color:var(--warm-grey); font-size:var(--fs-lg); line-height:1.7;}
.about-copy p + p{margin-top:12px;}

/* ==========================================================================
   QUESTIONS — the live accordion, on native <details>
   ========================================================================== */
.acc{border-top:1px solid var(--border); max-width:80ch;}
.acc-item{border-bottom:1px solid var(--border);}
.acc-q{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:20px 0; cursor:pointer; list-style:none;
  font-family:var(--serif); font-size:var(--fs-2xl); line-height:1.3; color:var(--bone);
  transition:color var(--t-2) var(--ease);
}
.acc-q::-webkit-details-marker{display:none;}
.acc-q:hover{color:var(--champagne-lift);}
.acc-q:focus-visible{outline:2px solid var(--champagne); outline-offset:4px;}
.pm{position:relative; width:13px; height:13px; flex:0 0 auto;}
.pm::before, .pm::after{content:''; position:absolute; background:var(--champagne); transition:transform var(--t-3) var(--ease);}
.pm::before{top:6px; left:0; width:13px; height:1px;}
.pm::after{left:6px; top:0; width:1px; height:13px;}
.acc-item[open] .pm::after{transform:scaleY(0);}
.acc-a{padding:0 0 24px; max-width:70ch; color:var(--warm-grey); line-height:1.85; font-size:var(--fs-lg);}
.acc-a p + p{margin-top:10px;}
.acc-a .btn{margin-top:14px;}

.coinlist{margin:14px 0 18px; display:grid; grid-template-columns:repeat(2, 1fr); gap:1px;}
.coinlist li{
  background:var(--basalt); box-shadow:0 0 0 1px var(--border);
  padding:10px 12px; font-size:var(--fs-sm); letter-spacing:.01em; line-height:1.5; color:var(--bone);
  display:flex; flex-direction:column; gap:2px;
}
.coinlist li span{font-size:var(--fs-2xs); letter-spacing:.12em; text-transform:uppercase; color:var(--warm-grey);}
.faq-steps{list-style:none; counter-reset:faqstep; margin:18px 0 0; padding:0;}
.faq-steps li{
  counter-increment:faqstep; position:relative;
  padding:0 0 0 34px; margin:0 0 12px;
  font-size:var(--fs-base); line-height:1.65; color:var(--warm-grey);
}
.faq-steps li::before{
  content:counter(faqstep); position:absolute; left:0; top:1px;
  width:22px; height:22px; border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  font-size:var(--fs-xs); color:var(--champagne); font-variant-numeric:tabular-nums;
}
.faq-warn{
  margin-top:20px; padding:14px 16px; border:1px solid var(--champagne-deep);
  font-size:var(--fs-md); line-height:1.7; color:var(--bone);
}

/* ==========================================================================
   CONTACT — one unmistakable button
   ========================================================================== */
.contact{border-top:1px solid var(--border); text-align:center;}
.contact .wrap{display:flex; flex-direction:column; align-items:center;}
.contact-lead{margin:14px 0 22px; color:var(--warm-grey); font-size:var(--fs-lg);}
.contact-lead .click{display:none;}
.wa-btn{
  display:flex; align-items:center; justify-content:center; gap:12px;
  width:100%; max-width:360px; height:52px; padding:0 20px;
  background:var(--champagne); border:1px solid var(--champagne); color:var(--night);
  font-size:var(--fs-xs); font-weight:500; letter-spacing:0.14em; text-transform:uppercase; white-space:nowrap;
  text-decoration:none; cursor:pointer;
  box-shadow:0 12px 30px -10px rgba(184,137,46,0.55), 0 2px 6px rgba(0,0,0,0.45);
  transition:background var(--t-3) var(--ease), border-color var(--t-3) var(--ease),
             box-shadow var(--t-3) var(--ease), transform var(--t-3) var(--ease);
}
.wa-btn:hover{
  background:var(--champagne-lift); border-color:var(--champagne-lift); transform:translateY(-2px);
  box-shadow:0 18px 38px -10px rgba(208,164,74,0.65), 0 3px 8px rgba(0,0,0,0.5);
}
.wa-btn:active{transform:translateY(0);}
.wa-btn:focus-visible{outline:2px solid var(--champagne-lift); outline-offset:4px;}
.wa-btn svg{flex:0 0 auto; stroke:currentColor; fill:none; stroke-linecap:round; stroke-linejoin:round;}
.wa-chat{width:20px; height:20px; stroke-width:1.5;}
.wa-arrow{width:18px; height:18px; stroke-width:1.6; transition:transform var(--t-3) var(--ease);}
.wa-btn:hover .wa-arrow{transform:translateX(3px);}
.phone{margin-top:16px; font-size:var(--fs-base); letter-spacing:0.08em; color:var(--warm-grey); font-variant-numeric:tabular-nums;}

/* ==========================================================================
   FOOTER — the live footer, grey
   ========================================================================== */
.foot{background:var(--basalt); border-top:1px solid var(--border); padding:clamp(34px, 3.6vw, 52px) 0 0;}
.foot-top{
  display:grid; grid-template-columns:max-content max-content; justify-content:start;
  gap:24px 32px; align-items:start; padding-bottom:22px;
}
.foot-brand{grid-column:1 / -1;}
.foot-brand img{height:20px; width:auto; margin-bottom:14px;}
.foot-brand p{font-size:var(--fs-base); color:var(--warm-grey); line-height:1.6;}
.foot-brand .tag{color:var(--bone); font-family:var(--serif); font-size:var(--fs-xl); margin-bottom:2px;}
.foot-col h4{
  font-size:var(--fs-2xs); letter-spacing:0.18em; text-transform:uppercase; line-height:1.4;
  color:var(--champagne); font-weight:500; white-space:nowrap; margin-bottom:4px;
}
.foot-col a{
  display:flex; align-items:center; min-height:44px; min-width:44px;
  font-size:var(--fs-base); color:var(--warm-grey); text-decoration:none; white-space:nowrap;
  transition:color var(--t-2) var(--ease);
}
.foot-col a:hover, .foot-col a:focus-visible{color:var(--bone);}
.foot-col .handle{margin-top:6px; font-size:var(--fs-sm); letter-spacing:0.04em; color:var(--warm-grey);}
.foot-legal{
  display:flex; flex-direction:column; gap:8px;
  padding:22px 0 28px; border-top:1px solid var(--border);
  font-size:var(--fs-3xs); letter-spacing:0.16em; text-transform:uppercase; line-height:1.7; color:var(--warm-grey);
}

/* ==========================================================================
   404
   ========================================================================== */
.nf{padding:clamp(64px, 9vw, 120px) 0;}
.nf h1{font-family:var(--serif); font-size:var(--fs-h1-mast); line-height:1.05;}
.nf p{margin-top:14px; max-width:60ch; color:var(--warm-grey);}
.nf-link{margin-top:22px;}

/* ==========================================================================
   DESKTOP — 900px and up: the live desktop type ladder and layouts
   ========================================================================== */
@media (min-width:900px){
  :root{
    --bar-h:36px;
    --nav-h:74px;
    --fs-3xs:13px; --fs-2xs:14px; --fs-xs:14.5px; --fs-sm:15.5px; --fs-md:16.5px;
    --fs-base:17.5px; --fs-lg:19.5px; --fs-xl:21.5px; --fs-2xl:23.5px;
    --fs-hero:clamp(34px, 6.05vw, 67px);
    --fs-h1-mast:clamp(29px, 3.92vw, 49px);
    --fs-h2-sec:clamp(26px, 3.25vw, 44px);
    --fs-hero-link:14px;
    --fs-hero-sub:13px;
    --fs-promise-h:20px;
    --fs-promise-p:14.5px;
  }
  .navlinks{display:flex; gap:24px; margin-left:auto;}
  .navlinks a{
    display:inline-flex; align-items:center; min-height:44px;
    font-size:var(--fs-2xs); letter-spacing:0.17em; text-transform:uppercase;
    color:var(--warm-grey); text-decoration:none; transition:color var(--t-3) var(--ease);
  }
  .navlinks a:hover, .navlinks a:focus-visible{color:var(--bone);}
  .navlinks + .navtools{margin-left:0; padding-left:22px; border-left:1px solid var(--border);}

  .hero{background-image:var(--hero-grid);}

  .promises{padding:28px 0 26px;}
  .promise-grid{grid-template-columns:repeat(4, 1fr);}
  .promise{gap:9px; padding:22px 22px 24px;}
  .promise:nth-child(-n+2){border-bottom:0;}
  .promise:nth-child(2n){border-right:1px solid var(--border);}
  .promise:last-child{border-right:0;}
  .promise svg{width:30px; height:30px;}
  .promise .hair{width:26px;}

  .groups{grid-template-columns:repeat(4, minmax(0, 1fr)); gap:0 36px;}
  .group{margin-bottom:44px;}
  .group h3{font-size:var(--fs-3xs); letter-spacing:0.16em;}

  .about .wrap{display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.5fr); gap:64px; align-items:start;}
  .about-copy{margin-top:0;}

  .coinlist{grid-template-columns:repeat(3, 1fr);}

  .foot-top{grid-template-columns:minmax(0, 1.5fr) max-content max-content; gap:32px 72px;}
  .foot-brand{grid-column:auto;}
  .foot-legal{flex-direction:row; justify-content:space-between;}
}
/* "Click" only where there is a mouse to click with */
@media (min-width:900px) and (hover:hover){
  .contact-lead .tap{display:none;}
  .contact-lead .click{display:inline;}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation:none !important; transition-duration:0.01ms !important;}
}