/* ft-hidden-guard v1 */
[hidden]{display:none!important;}
:root{
  --space-xs: 8px;
  --space-sm: 13px;
  --space-md: 28px;
  --space-lg: 49px;
  --space-xl: 99px;
  --card-padding-y: 24px;
  --card-padding-x: 22px;
  --card-gap: 17px;
  --card-radius: 21px;
  --card-border-width: 1px;
  --card-min-height: 324px;
  --card-min-col-width: 292px;
  --btn-padding-y: 16px;
  --btn-padding-x: 29px;
  --btn-radius: 6px;
  --btn-gap-from-text: 21px;
  --grid-gap: 29px;
  --lh-heading: 1.20;
  --lh-body: 1.56;
  --ls-heading: 0.040em;

  /* Earthen palette, fired clay, ironstone, bone paper */
  --bone: #efe6d6;
  --bone-2: #e7dcc6;
  --bone-3: #ddceb1;
  --ink: #2a1a10;
  --ink-soft: #4b3322;
  --clay: #8a3a1a;
  --clay-deep: #5e2410;
  --terracotta: #b15a2e;
  --moss: #4f5a2a;
  --rule: #6b4a2e;

  --serif-display: "Hoefler Text", "Cormorant Garamond", "Apple Garamond", "Garamond", "Times New Roman", serif;
  --serif-body: "Iowan Old Style", "Palatino Linotype", "Palatino", "Book Antiqua", Georgia, serif;
  --sans-caps: "Trajan Pro", "Optima", "Avenir Next", "Avenir", "Gill Sans", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; min-width: 0; }
img, svg, video { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font: inherit; }

html{ background: var(--bone); color: var(--ink); }
body{
  margin:0;
  font-family: var(--serif-body);
  line-height: var(--lh-body);
  font-size: 17px;
  background:
    radial-gradient(900px 600px at 12% -8%, rgba(177,90,46,0.10), transparent 60%),
    radial-gradient(700px 500px at 100% 0%, rgba(94,36,16,0.08), transparent 65%),
    var(--bone);
  background-attachment: fixed;
}
body::before{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='4'/><feColorMatrix values='0 0 0 0 0.16  0 0 0 0 0.10  0 0 0 0 0.06  0 0 0 0.07 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  mix-blend-mode: multiply;
  opacity:.55;
  z-index: 1;
}
main, header, footer{ position:relative; z-index:2; }
/* Site drawer also needs to sit above the noise layer */
.site-drawer{ position:relative; z-index:2; }

/* Headings */
h1,h2,h3,h4{ font-family: var(--serif-display); line-height: var(--lh-heading); letter-spacing: var(--ls-heading); color: var(--ink); font-weight: 600; }
h1{ font-size: clamp(34px, 5.2vw, 64px); }
h2{ font-size: clamp(26px, 3.2vw, 38px); }
h3{ font-size: clamp(19px, 1.8vw, 23px); }

a{ color: var(--clay-deep); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover{ color: var(--clay); }

p{ margin: 0 0 var(--space-sm); }

/* Buttons */
.btn{
  display:inline-block;
  padding: var(--btn-padding-y) var(--btn-padding-x);
  border-radius: var(--btn-radius);
  font-family: var(--sans-caps);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid var(--ink);
  cursor: pointer;
  transition: transform .25s ease, background-color .25s ease, color .25s ease;
}
.btn--ink{ background: var(--ink); color: var(--bone); }
.btn--ink:hover{ background: var(--clay-deep); color: var(--bone); transform: translateY(-1px); }
.btn--ghost{ background: transparent; color: var(--ink); }
.btn--ghost:hover{ background: var(--ink); color: var(--bone); }
.btn--sm{ padding: 10px 18px; font-size: 11.5px; }

/* Header */
.site-header{ width:100%; }
.site-header--transparent-over-hero{ position:absolute; top:0; left:0; right:0; background:transparent; }
.site-header--solid{ background: var(--bone-2); border-bottom: 1px solid rgba(42,26,16,0.18); }
.site-header__inner{
  max-width: 1240px; margin: 0 auto;
  padding: var(--space-md) var(--space-md);
  display:flex; align-items:center; gap: var(--space-md);
  flex-wrap: wrap;
}
.brandmark{ display:flex; align-items:baseline; gap: 10px; text-decoration:none; color: var(--ink); }
.brandmark__glyph{ font-size: 24px; color: var(--clay); }
.brandmark__word{ font-family: var(--serif-display); font-size: 26px; letter-spacing: 0.06em; }
.brandmark__sub{ font-family: var(--sans-caps); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft); margin-left: 10px; }
.brandmark--footer .brandmark__word{ font-size: 22px; }

/* Hamburger menu toggle */
.menu-toggle{
  background: transparent;
  border: 1px solid var(--ink);
  border-radius: 4px;
  padding: 8px 10px;
  cursor: pointer;
  color: var(--ink);
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s ease;
}
.menu-toggle:hover{ background: var(--ink); color: var(--bone); }

/* Age pill, push to far right after toggle */
.site-header__inner .age-pill{
  order: 3;
  margin-left: 0;
}
.site-header__inner .menu-toggle{
  order: 2;
  margin-left: auto;
}
.site-header__inner .brandmark{
  order: 1;
}

/* Site drawer, inside header, below inner row */
.site-drawer{
  background: var(--bone-2);
  border-bottom: 1px solid rgba(42,26,16,0.18);
  display: flex;
  flex-direction: column;
  padding: var(--space-sm) var(--space-md);
  gap: var(--space-sm);
}
.site-drawer:not([hidden]){ display: flex; }
.site-drawer a{
  font-family: var(--sans-caps); text-transform: uppercase; letter-spacing: 0.16em;
  font-size: 12px; color: var(--ink); text-decoration:none;
  padding: var(--space-xs) 0;
  border-bottom: 1px solid rgba(107,74,46,0.2);
}
.site-drawer a:hover{ color: var(--clay-deep); }

.site-nav{ display:flex; gap: var(--space-md); margin-left:auto; flex-wrap:wrap; }
.site-nav a{
  font-family: var(--sans-caps); text-transform: uppercase; letter-spacing: 0.16em;
  font-size: 12px; color: var(--ink); text-decoration:none;
  padding-bottom: 4px; border-bottom: 1px solid transparent;
}
.site-nav a:hover{ border-bottom-color: var(--clay); color: var(--clay-deep); }

.age-pill{
  display:inline-block; padding: 6px 12px;
  border: 1px solid var(--ink); border-radius: 999px;
  font-family: var(--sans-caps); font-size: 11px; letter-spacing: 0.18em;
}

/* HERO, type-only-centred */
.hero{
  padding: 120px var(--space-md) var(--space-xl);
  position: relative;
  overflow: hidden;
  text-align: center;
}
.hero__compass{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 0;
  width: min(440px, 70vw);
  height: auto;
  color: var(--clay);
  opacity: 0.08;
}
/* Roman numeral filigree, repositioned to left margin */
.hero__numeral{
  position: absolute;
  top: 50%;
  left: 6%;
  transform: translateY(-50%);
  font-family: var(--serif-display);
  font-style: italic;
  font-size: clamp(160px, 28vw, 360px);
  line-height: 1;
  color: var(--clay);
  opacity: 0.055;
  pointer-events: none;
  z-index: 0;
  letter-spacing: -0.04em;
  user-select: none;
  text-align: left;
}
.hero__inner--centred{
  position: relative;
  z-index: 1;
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
}
.hero__eyebrow{
  font-family: var(--sans-caps); text-transform: uppercase;
  letter-spacing: 0.28em; font-size: 11px; color: var(--clay-deep);
  margin: 0;
}
.hero__h1{ margin: 0; display:flex; flex-direction:column; gap: 6px; align-items: center; }
.hero__h1-small{
  font-family: var(--sans-caps); text-transform: uppercase;
  letter-spacing: 0.36em; font-size: 13px; color: var(--ink-soft);
}
.hero__h1-display{
  font-family: var(--serif-display);
  font-size: clamp(32px, 5.0vw, 62px);
  line-height: 1.10;
  color: var(--ink);
  max-width: 18ch;
}
.hero__h1-italic{
  font-family: var(--serif-display); font-style: italic; font-weight: 400;
  font-size: clamp(17px, 1.5vw, 21px); color: var(--clay-deep);
}
.hero__rule{ color: var(--rule); height: 20px; width: 100%; max-width: 600px; }
.hero__rule svg{ width:100%; height:100%; }
.hero__sub{ font-size: 18px; max-width: 56ch; color: var(--ink-soft); margin: 0; }
.hero__chips{ display:flex; gap: 8px; flex-wrap:wrap; justify-content: center; margin: 0; }
.chip{
  font-family: var(--sans-caps); text-transform: uppercase;
  letter-spacing: 0.16em; font-size: 11px;
  padding: 6px 12px; border:1px solid var(--rule); color: var(--ink-soft);
  background: rgba(255,255,255,0.18);
  border-radius: 2px;
}
.hero__cta{ display:flex; gap: var(--btn-gap-from-text); flex-wrap:wrap; justify-content: center; margin: 0; }

/* Legacy hero plate (kept for brand pages that may reference it) */
.hero__plate{
  position:relative; min-height: 460px;
  display:grid; grid-template-columns: 1fr; gap: var(--space-md);
  align-items:start;
}
.hero__seal{
  position:absolute; right: 0; bottom: 0;
  width: 200px; height: 200px;
  color: var(--clay-deep);
}
@media (prefers-reduced-motion: no-preference){
  .hero__seal{ animation: rotateSeal 80s linear infinite; }
}
@keyframes rotateSeal{ to{ transform: rotate(360deg); } }
.hero__filigree{ color: var(--rule); opacity: .6; height: 320px; }
.hero__filigree svg{ height:100%; width:100%; }

/* Generic section header */
.sec-head{ max-width: 1240px; margin: 0 auto var(--space-lg); padding: 0 var(--space-md); }
.sec-head__fol{ font-family: var(--sans-caps); text-transform: uppercase; letter-spacing: 0.28em; font-size: 11px; color: var(--clay-deep); margin: 0 0 var(--space-sm); }
.sec-head__h2{ margin: 0 0 var(--space-sm); }
.sec-head__lede{ max-width: 64ch; font-size: 18px; color: var(--ink-soft); }

/* OPERATORS / PLATES */
.operators{ padding: var(--space-xl) 0; }
.plates{
  list-style:none; padding: 0 var(--space-md); margin: 0 auto;
  max-width: 1240px;
  display:flex; flex-direction:column; gap: var(--space-lg);
}
.plate{
  position:relative;
  background: linear-gradient(180deg, #f5ecda, #ece1c8);
  border: var(--card-border-width) solid var(--rule);
  border-radius: var(--card-radius);
  padding: var(--card-padding-y) var(--card-padding-x);
  min-height: var(--card-min-height);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.4),
    0 2px 0 rgba(94,36,16,0.05),
    0 14px 28px -22px rgba(42,26,16,0.45);
  display:grid; gap: var(--card-gap);
}
.plate__head{
  display:grid;
  grid-template-columns: 80px 1fr auto;
  gap: var(--card-gap);
  align-items: end;
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid rgba(107,74,46,0.45);
}
.plate__roman{
  font-family: var(--serif-display); font-style: italic;
  font-size: 56px; color: var(--clay); line-height: 1;
}
.plate__title h3{ margin: 0 0 4px; font-size: 28px; letter-spacing: 0.02em; }
.plate__legal{ margin: 0; font-size: 13px; font-style: italic; color: var(--ink-soft); }
.plate__rating{ text-align:right; font-family: var(--serif-display); color: var(--clay-deep); }
.plate__rating-num{ font-size: 44px; font-weight: 600; }
.plate__rating-den{ font-size: 16px; color: var(--ink-soft); margin-left: 4px; }
.plate__blurb{ font-size: 17px; color: var(--ink-soft); margin: 0; max-width: 70ch; }
.plate__specs{
  display:grid; grid-template-columns: repeat(3, minmax(0,1fr));
  gap: var(--card-gap);
  margin: 0; padding: var(--space-sm) 0;
  border-top: 1px dashed rgba(107,74,46,0.5);
  border-bottom: 1px dashed rgba(107,74,46,0.5);
}
.plate__specs > div{ display:flex; flex-direction:column; gap: 4px; }
.plate__specs dt{ font-family: var(--sans-caps); font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--clay-deep); }
.plate__specs dd{ margin: 0; font-size: 14.5px; color: var(--ink); }
.plate__foot{ display:flex; gap: var(--btn-gap-from-text); flex-wrap:wrap; }
.plate__orla{ color: var(--rule); opacity:.6; height: 14px; }
.plate__orla svg{ width:100%; height:100%; }

/* METHODOLOGY pillars */
.methodology{ padding: var(--space-xl) 0; background: linear-gradient(180deg, transparent, rgba(177,90,46,0.06), transparent); }
.pillars{
  list-style:none; padding: 0 var(--space-md); margin: 0 auto;
  max-width: 1240px;
  display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--grid-gap);
}
.pillars li{
  display:grid; grid-template-columns: 60px 1fr; gap: var(--card-gap);
  background: rgba(255,255,255,0.25);
  border-left: 3px solid var(--clay);
  padding: var(--card-padding-y) var(--card-padding-x);
  border-radius: 4px;
}
.pillars__num{ font-family: var(--serif-display); font-style: italic; font-size: 42px; color: var(--clay); line-height: 1; }
.pillars__body h3{ margin: 0 0 8px; }
.pillars__body p{ margin: 0; color: var(--ink-soft); }

/* ABOUT block grid */
.about{ padding: var(--space-xl) 0; }
.about__grid{
  max-width: 1240px; margin: 0 auto; padding: 0 var(--space-md);
  display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--grid-gap);
}
.about__block{
  background: rgba(255,255,255,0.32);
  border: 1px solid rgba(107,74,46,0.45);
  padding: var(--card-padding-y) var(--card-padding-x);
  border-radius: 6px;
}
.about__block--wide{ grid-column: 1 / -1; }
.about__block h2{ margin-top: 0; }
.about__note{ margin-top: var(--space-sm); font-style: italic; color: var(--ink-soft); }

.regs{ list-style: none; padding: 0; margin: var(--space-sm) 0; display:grid; gap: 6px; }
.regs li{ display:grid; grid-template-columns: 180px 1fr; gap: var(--space-sm); padding: 6px 0; border-bottom: 1px dotted rgba(107,74,46,0.5); }
.regs li span{ font-family: var(--sans-caps); font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--clay-deep); }

.kyc{ list-style: none; padding: 0; margin: 0; display:grid; gap: var(--card-gap); }
.kyc li{ display:grid; grid-template-columns: 44px 1fr; gap: var(--card-gap); align-items:start; }
.kyc__n{
  display:grid; place-items:center;
  width:44px; height:44px;
  border-radius: 50%;
  background: var(--clay); color: var(--bone);
  font-family: var(--serif-display); font-weight: 600;
}
.kyc__body h3{ margin: 0 0 4px; }
.kyc__body p{ margin: 0; color: var(--ink-soft); }

.faq details{
  border-top: 1px solid rgba(107,74,46,0.4);
  padding: var(--space-sm) 0;
}
.faq details:last-of-type{ border-bottom: 1px solid rgba(107,74,46,0.4); }
.faq summary{
  cursor:pointer;
  font-family: var(--serif-display); font-size: 19px;
  color: var(--ink);
  list-style: none;
  display:flex; justify-content:space-between; gap: var(--space-md);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; color: var(--clay); font-size: 22px; line-height: 1; }
.faq details[open] summary::after{ content:"–"; }
.faq details p{ margin-top: var(--space-sm); color: var(--ink-soft); }

/* FOOTER centered-compact / logo-strip-then-legal */
.site-footer{
  background: #1a120c;
  color: #e6d8be;
  padding: var(--space-xl) var(--space-md) var(--space-lg);
  border-top: 4px solid var(--clay-deep);
}
.site-footer .brandmark{ color: var(--bone); }
.site-footer .brandmark__glyph{ color: var(--terracotta); }
.site-footer a{ color: #e6d8be; }
.site-footer a:hover{ color: var(--bone); }
.site-footer__inner{
  max-width: 920px; margin: 0 auto;
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap: var(--space-md);
}
.site-footer__tag{ font-style: italic; max-width: 50ch; color: #cdb892; margin: 0; }
.site-footer__nav{ display:flex; flex-wrap:wrap; justify-content:center; gap: var(--space-md); }
.site-footer__nav a{
  font-family: var(--sans-caps); text-transform: uppercase;
  letter-spacing: 0.18em; font-size: 11.5px; text-decoration:none;
}
.regulator-strip{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  gap: var(--space-md);
  padding: var(--space-md) 0;
  width:100%;
  border-top: 1px solid rgba(255,255,255,0.12);
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.regulator-strip a{
  display:inline-flex; align-items:center; justify-content:center;
  background: transparent; padding: 0; border: none;
  transition: opacity .25s ease;
  opacity: .92;
}
.regulator-strip a:hover{ background: rgba(255,255,255,0.06); }
.regulator-strip img{ max-height: 56px; width:auto; background: transparent; padding: 0; border: none; }
.site-footer__contact{ font-size: 14px; margin: 0; color: #cdb892; }
.site-footer__disclaimer{ font-size: 12.5px; max-width: 68ch; color: #b8a17a; margin: 0; }
.site-footer__affiliate{ font-size: 12.5px; color: #b8a17a; margin: 0; }
.site-footer__copy{ font-family: var(--sans-caps); letter-spacing: 0.22em; font-size: 11px; color: #8c7a59; margin: 0; }

/* AGE GATE */
.age-gate{
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(20,12,7,0.86);
  backdrop-filter: blur(2px);
}
.age-gate:not([hidden]){ display:flex; align-items:center; justify-content:center; padding: var(--space-md); }
.age-gate__panel{
  max-width: 520px;
  background: var(--bone);
  border: 1px solid var(--rule);
  padding: var(--space-lg);
  border-radius: 6px;
  text-align: center;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,0.5);
}
.age-gate__kicker{ font-family: var(--sans-caps); text-transform: uppercase; letter-spacing: 0.28em; font-size: 11px; color: var(--clay-deep); margin:0 0 var(--space-sm); }
.age-gate__row{ display:flex; gap: var(--space-md); justify-content:center; flex-wrap:wrap; margin: var(--space-md) 0; }
.age-gate__legal{ font-size: 12px; color: var(--ink-soft); margin: 0; }

/* COOKIE BANNER */
.cookie-banner{
  position: fixed; left:0; right:0; bottom:0; z-index: 9998;
  background: #1a120c; color: #e6d8be;
  border-top: 3px solid var(--clay);
}
.cookie-banner:not([hidden]){ display:block; }
.cookie-banner__inner{
  max-width: 1240px; margin: 0 auto;
  padding: var(--space-md);
  display:flex; gap: var(--space-md); align-items:center; flex-wrap:wrap;
}
.cookie-banner__inner p{ margin: 0; flex: 1 1 320px; font-size: 14px; }
.cookie-banner__row{ display:flex; gap: var(--space-sm); align-items:center; flex-wrap:wrap; }
.cookie-banner__link{ font-family: var(--sans-caps); text-transform: uppercase; letter-spacing: 0.16em; font-size: 11.5px; }
.cookie-banner .btn--ink{ background: var(--bone); color: var(--ink); border-color: var(--bone); }
.cookie-banner .btn--ghost{ color: #e6d8be; border-color: #e6d8be; }

/* 404 + minors */
.error, .minors, .policy, .brand{
  max-width: 880px; margin: 0 auto;
  padding: var(--space-xl) var(--space-md);
}
.error{ text-align:center; }
.error__fol, .minors__fol, .brand__fol, .policy__fol{
  font-family: var(--sans-caps); text-transform: uppercase; letter-spacing: 0.28em; font-size: 11px; color: var(--clay-deep);
}
.error__roman{
  font-family: var(--serif-display); font-style: italic;
  font-size: clamp(120px, 22vw, 240px); line-height: .8; margin: var(--space-md) 0;
  color: var(--clay);
}
.minors__links{ margin: var(--space-md) 0; }
.minors__legal{ margin-top: var(--space-lg); font-style: italic; color: var(--ink-soft); }

/* BRAND page */
.brand__crumbs{ font-family: var(--sans-caps); text-transform: uppercase; letter-spacing: 0.18em; font-size: 11px; color: var(--ink-soft); margin: 0 0 var(--space-sm); }
.brand__head{
  display:grid; grid-template-columns: 220px 1fr; gap: var(--space-lg);
  align-items:center;
  padding: var(--space-md) 0;
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  margin: var(--space-md) 0;
}
.brand__logo-wrap{
  background: #1a120c; padding: var(--space-md);
  border-radius: 8px;
  display:grid; place-items:center; min-height: 140px;
}
.brand__logo-wrap img{ max-height: 96px; width:auto; }
.brand__legal{ font-style: italic; color: var(--ink-soft); margin: 4px 0; }
.brand__rating{ font-family: var(--serif-display); font-size: 20px; color: var(--clay-deep); margin: 4px 0 0; }
.brand__cta{ margin: var(--space-md) 0 var(--space-lg); }
.brand__copy h2{ margin-top: var(--space-lg); }
.brand__specs{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--card-gap); margin: 0; padding: var(--space-md) 0; border-top: 1px dashed var(--rule); border-bottom: 1px dashed var(--rule); }
.brand__specs > div{ display:flex; flex-direction:column; gap: 4px; }
.brand__specs dt{ font-family: var(--sans-caps); font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--clay-deep); }
.brand__specs dd{ margin: 0; font-size: 15px; }
.brand__cons{ padding-left: 1.2em; }
.brand__back{ margin-top: var(--space-lg); }

/* POLICY pages */
.policy h2{ margin-top: var(--space-lg); }
.policy__back{ margin-top: var(--space-lg); }

/* Motion: rich, page-load reveals + scroll reveals */
@media (prefers-reduced-motion: no-preference){
  .hero__h1-small, .hero__h1-display, .hero__h1-italic, .hero__sub, .hero__chips, .hero__cta, .hero__eyebrow{
    opacity: 0; transform: translateY(10px);
    animation: rise .9s ease forwards;
  }
  .hero__eyebrow{ animation-delay: .05s; }
  .hero__h1-small{ animation-delay: .12s; }
  .hero__h1-display{ animation-delay: .22s; }
  .hero__h1-italic{ animation-delay: .42s; }
  .hero__rule svg path{
    stroke-dasharray: 700;
    stroke-dashoffset: 700;
    animation: drawRule 1.6s ease forwards .8s;
  }
  .hero__sub{ animation-delay: .55s; }
  .hero__chips{ animation-delay: .7s; }
  .hero__cta{ animation-delay: .85s; }
  .plate{ opacity: 0; transform: translateY(18px); transition: opacity .8s ease, transform .8s ease; }
  .plate.is-in{ opacity: 1; transform: translateY(0); }
  .plate__rating-num{ display:inline-block; }
  .plate.is-in .plate__rating-num{ animation: typewheel .9s cubic-bezier(.2,.7,.2,1); }
  .pillars li, .about__block{ opacity:0; transform: translateY(14px); transition: opacity .7s ease, transform .7s ease; }
  .pillars li.is-in, .about__block.is-in{ opacity:1; transform: translateY(0); }
}
@keyframes rise{ to{ opacity: 1; transform: translateY(0); } }
@keyframes drawRule{ to{ stroke-dashoffset: 0; } }
@keyframes typewheel{
  0%{ transform: translateY(-10px); opacity:.2; }
  50%{ transform: translateY(3px); opacity:1; }
  100%{ transform: translateY(0); opacity:1; }
}

/* Responsive */
@media (max-width: 900px){
  .hero{ padding-top: 80px; }
  .hero__numeral{ left: 2%; font-size: clamp(100px, 22vw, 220px); opacity: 0.04; }
  .hero__inner--centred{ gap: var(--space-sm); }
  .hero__plate{ min-height: 300px; }
  .plate__head{ grid-template-columns: 60px 1fr; }
  .plate__rating{ grid-column: 1 / -1; text-align: right; }
  .plate__specs{ grid-template-columns: 1fr; }
  .pillars, .about__grid{ grid-template-columns: 1fr; }
  .brand__head{ grid-template-columns: 1fr; }
  .brand__specs{ grid-template-columns: 1fr; }
  .regs li{ grid-template-columns: 1fr; }
  .site-nav{ margin-left: 0; width:100%; }
}