/* =========================================================
   GOSU — Corporate / Holding site
   Design system: hexagonal nexus · data (cool) + energy (warm)
   ========================================================= */

:root{
  /* Palette — map-ink base, with a cool/warm duality that mirrors
     the business: data & survey (cyan) vs. energy & efficiency (amber) */
  --ink:      #0B1620;
  --ink-2:    #0F1E2A;
  --ink-3:    #162937;
  --surface:  #122433;
  --surface-2:#16303f;
  --mist:     #E9F0EF;
  --mist-dim: #C4D2D0;
  --mute:     #7C9491;
  --cyan:     #45E0C8;
  --cyan-deep:#1FA793;
  --amber:    #FFB14E;
  --amber-deep:#E08A2B;
  --line:     rgba(124,148,145,0.18);
  --line-2:   rgba(124,148,145,0.32);
  --glow-cyan: rgba(69,224,200,0.14);

  --maxw: 1200px;
  --gut: clamp(20px, 5vw, 64px);

  --f-display: "Bricolage Grotesque", "Hanken Grotesk", system-ui, sans-serif;
  --f-body: "Hanken Grotesk", system-ui, -apple-system, sans-serif;
  --f-mono: "Space Mono", ui-monospace, "SFMono-Regular", monospace;

  --r: 14px;
  --r-lg: 22px;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  background:var(--ink);
  color:var(--mist);
  font-family:var(--f-body);
  font-size:17px;
  line-height:1.6;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  -webkit-tap-highlight-color:transparent;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--cyan); color:var(--ink); }

/* ---------- Layout helpers ---------- */
.wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut); }
.section{ padding-block:clamp(72px,11vw,140px); position:relative; }
.section--tight{ padding-block:clamp(54px,8vw,90px); }

.eyebrow{
  font-family:var(--f-mono);
  font-size:12.5px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--cyan);
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.eyebrow::before{
  content:""; width:26px; height:1px; background:var(--cyan); opacity:.7;
}
.eyebrow--amber{ color:var(--amber); }
.eyebrow--amber::before{ background:var(--amber); }

h1,h2,h3,h4{ font-family:var(--f-display); font-weight:800; line-height:1.04; letter-spacing:-0.02em; }
h2{ font-size:clamp(30px,4.6vw,54px); }
h3{ font-size:clamp(21px,2.4vw,28px); font-weight:700; letter-spacing:-0.01em; }
p{ color:var(--mist-dim); }
.lead{ font-size:clamp(18px,2vw,21px); color:var(--mist-dim); line-height:1.55; }

.mono{ font-family:var(--f-mono); }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--f-mono); font-size:13.5px; letter-spacing:0.04em;
  padding:14px 22px; border-radius:100px;
  border:1px solid transparent; cursor:pointer;
  transition:transform .25s cubic-bezier(.2,.7,.2,1), background .25s, border-color .25s, color .25s;
  white-space:nowrap;
}
.btn .ar{ transition:transform .25s cubic-bezier(.2,.7,.2,1); }
.btn:hover .ar{ transform:translateX(4px); }
.btn--primary{ background:var(--cyan); color:#062019; }
.btn--primary:hover{ background:#5fe9d4; transform:translateY(-2px); }
.btn--ghost{ border-color:var(--line-2); color:var(--mist); }
.btn--ghost:hover{ border-color:var(--cyan); color:var(--cyan); }
.btn--amber{ background:var(--amber); color:#2a1700; }
.btn--amber:hover{ background:#ffbf6b; transform:translateY(-2px); }

/* ---- Language toggle ---- */
.lang-toggle{ display:inline-flex; border:1px solid var(--line-2); border-radius:100px; overflow:hidden; }
.lang-toggle button{
  background:none; border:none; color:var(--mute); cursor:pointer;
  font-family:var(--f-mono); font-size:12px; letter-spacing:.06em;
  padding:9px 13px; min-width:44px; min-height:40px; transition:background .2s,color .2s;
}
.lang-toggle button[aria-pressed="true"]{ background:var(--cyan); color:#062019; }
.lang-toggle button:not([aria-pressed="true"]):hover{ color:var(--mist); }
.lang-toggle--panel{ align-self:flex-start; margin-bottom:8px; }

/* ---- Bilingual anti-flash: hide briefly only for ES first paint ---- */
body{ transition:opacity .25s ease; }
html.i18n-pending body{ opacity:0; }

/* ---------- Header ---------- */
.site-head{
  position:sticky; top:0; z-index:60;
  backdrop-filter:blur(14px);
  background:color-mix(in srgb, var(--ink) 78%, transparent);
  border-bottom:1px solid var(--line);
}
.nav{ display:flex; align-items:center; justify-content:space-between; height:72px; }
.brand{ display:flex; align-items:center; gap:12px; font-family:var(--f-display); font-weight:800; letter-spacing:0.02em; font-size:20px; }
.brand img{ width:34px; height:34px; }
.brand span{ color:var(--mist); }
.brand small{ font-family:var(--f-mono); font-weight:400; font-size:10px; letter-spacing:.2em; color:var(--mute); display:block; margin-top:-3px; }
.nav-links{ display:flex; align-items:center; gap:34px; }
.nav-links a{ font-size:15px; color:var(--mist-dim); position:relative; padding-block:6px; transition:color .2s; }
.nav-links a:hover, .nav-links a[aria-current="page"]{ color:var(--mist); }
.nav-links a[aria-current="page"]::after{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:1.5px;
  background:var(--cyan);
}
.nav-cta{ display:flex; align-items:center; gap:14px; }
.nav-toggle{ display:none; background:none; border:1px solid var(--line-2); border-radius:8px; width:42px; height:42px; cursor:pointer; flex-direction:column; gap:5px; align-items:center; justify-content:center; }
.nav-toggle span{ width:18px; height:1.6px; background:var(--mist); transition:.3s; }

/* ---------- Hero ---------- */
.hero{ position:relative; padding-top:clamp(60px,9vw,110px); padding-bottom:clamp(60px,9vw,120px); overflow:hidden; }
.hero-bg{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.hero-bg svg{ width:100%; height:100%; }
.hero-grid-fade{ position:absolute; inset:0; background:radial-gradient(120% 90% at 70% 10%, transparent 35%, var(--ink) 78%); z-index:1; }
.hero .wrap{ position:relative; z-index:2; }
.hero-readout{
  font-family:var(--f-mono); font-size:11.5px; color:var(--mute);
  letter-spacing:.12em; display:flex; gap:18px; flex-wrap:wrap; margin-bottom:30px;
}
.hero-readout b{ color:var(--cyan); font-weight:400; }
.hero h1{
  font-size:clamp(44px,8.2vw,104px);
  line-height:.97;
  max-width:14ch;
  margin-bottom:26px;
}
.hero h1 .warm{
  background:linear-gradient(105deg,var(--amber),var(--cyan));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.hero-sub{ max-width:54ch; font-size:clamp(17px,1.8vw,20px); color:var(--mist-dim); }
.hero-actions{ display:flex; gap:14px; margin-top:38px; flex-wrap:wrap; }
.hero-meta{
  margin-top:64px; display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden;
}
.hero-meta div{ background:var(--ink-2); padding:22px; }
.hero-meta .n{ font-family:var(--f-display); font-size:clamp(26px,3.6vw,38px); font-weight:800; color:var(--mist); letter-spacing:-.02em; }
.hero-meta .l{ font-family:var(--f-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--mute); margin-top:6px; }

/* ---------- Pipeline (the ecosystem) ---------- */
.pipeline{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:54px; }
.stage{
  position:relative; padding:26px 22px 28px; border:1px solid var(--line);
  border-radius:var(--r); background:linear-gradient(180deg,var(--ink-2),var(--ink));
  overflow:hidden; transition:border-color .3s, transform .3s;
}
.stage:hover{ border-color:var(--line-2); transform:translateY(-4px); }
.stage .step{ font-family:var(--f-mono); font-size:12px; color:var(--cyan); letter-spacing:.1em; }
.stage h3{ margin:16px 0 8px; }
.stage p{ font-size:14.5px; color:var(--mute); }
.stage .brandtag{ margin-top:18px; font-family:var(--f-mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--mist-dim); display:flex; align-items:center; gap:8px; }
.stage .brandtag::before{ content:""; width:7px; height:7px; border-radius:2px; background:var(--cyan); transform:rotate(45deg); }
.stage:nth-child(4) .step{ color:var(--amber); }
.stage:nth-child(4) .brandtag::before{ background:var(--amber); }
.stage .ghost{ position:absolute; right:-14px; bottom:-22px; font-family:var(--f-display); font-weight:800; font-size:120px; color:rgba(255,255,255,.025); line-height:1; pointer-events:none; }

/* ---------- Section intro ---------- */
.intro{ display:grid; grid-template-columns:1.1fr 1fr; gap:44px; align-items:end; margin-bottom:54px; }
.intro h2{ max-width:16ch; }
.intro p{ max-width:46ch; }
@media(max-width:780px){ .intro{ grid-template-columns:1fr; gap:18px; align-items:start; } }

/* ---------- Brand cards ---------- */
.brand-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.brandcard{
  position:relative; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:34px; background:var(--ink-2); overflow:hidden;
  transition:border-color .3s, transform .3s; display:flex; flex-direction:column; min-height:280px;
}
.brandcard:hover{ border-color:var(--line-2); transform:translateY(-4px); }
.brandcard::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(80% 60% at 100% 0%, var(--glow-cyan), transparent 70%);
  opacity:0; transition:opacity .4s;
}
.brandcard:hover::before{ opacity:1; }
.brandcard .code{ font-family:var(--f-mono); font-size:11.5px; letter-spacing:.16em; color:var(--mute); text-transform:uppercase; }
.brandcard h3{ font-size:30px; margin:14px 0 6px; position:relative; }
.brandcard .role{ font-family:var(--f-mono); font-size:12.5px; color:var(--cyan); letter-spacing:.04em; margin-bottom:16px; }
.brandcard p{ font-size:15px; color:var(--mist-dim); position:relative; }
.brandcard .tags{ margin-top:auto; padding-top:22px; display:flex; flex-wrap:wrap; gap:8px; }
.brandcard .tags span{ font-family:var(--f-mono); font-size:11px; letter-spacing:.04em; color:var(--mute); border:1px solid var(--line); border-radius:100px; padding:5px 11px; }
.brandcard .go{ position:absolute; top:30px; right:30px; width:40px; height:40px; border-radius:50%; border:1px solid var(--line-2); display:grid; place-items:center; color:var(--mist); transition:.3s; }
.brandcard:hover .go{ background:var(--cyan); color:var(--ink); border-color:var(--cyan); transform:rotate(-45deg); }
.brandcard--nexus .role{ color:var(--amber); }
.brandcard--nexus .go:hover, .brandcard--nexus:hover .go{ background:var(--amber); }
.brandcard--nexus::before{ background:radial-gradient(80% 60% at 100% 0%, rgba(255,177,78,.13), transparent 70%); }

/* ---------- Thesis / manifesto ---------- */
.thesis{ position:relative; }
.thesis-quote{
  font-family:var(--f-display); font-weight:700; letter-spacing:-.02em;
  font-size:clamp(26px,4.4vw,50px); line-height:1.1; max-width:18ch;
}
.thesis-quote em{ font-style:normal; color:var(--cyan); }
.thesis-grid{ display:grid; grid-template-columns:1.3fr 1fr; gap:54px; align-items:center; }
.thesis-points{ display:grid; gap:2px; background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
.thesis-points div{ background:var(--ink); padding:22px 24px; display:flex; gap:16px; align-items:flex-start; }
.thesis-points .k{ font-family:var(--f-mono); font-size:12px; color:var(--cyan); padding-top:3px; min-width:30px; }
.thesis-points p{ font-size:15px; margin:0; }
.thesis-points b{ color:var(--mist); font-weight:600; }
@media(max-width:820px){ .thesis-grid{ grid-template-columns:1fr; gap:34px; } }

/* ---------- Integrated case ---------- */
.case{
  border:1px solid var(--line); border-radius:var(--r-lg);
  background:linear-gradient(135deg,var(--ink-2),var(--ink));
  padding:clamp(28px,5vw,56px); position:relative; overflow:hidden;
}
.case-flow{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin-top:36px; }
.case-flow .node{ position:relative; padding-right:24px; }
.case-flow .node:not(:last-child)::after{
  content:"→"; position:absolute; right:0; top:2px; color:var(--cyan); font-family:var(--f-mono); opacity:.5;
}
.case-flow .num{ font-family:var(--f-mono); font-size:11px; letter-spacing:.14em; color:var(--mute); }
.case-flow h4{ font-family:var(--f-display); font-size:17px; font-weight:700; margin:10px 0 6px; }
.case-flow p{ font-size:13.5px; color:var(--mute); }
@media(max-width:760px){ .case-flow{ grid-template-columns:1fr 1fr; gap:24px 20px; } .case-flow .node:not(:last-child)::after{ display:none; } }

/* ---------- CTA band ---------- */
.cta-band{ position:relative; overflow:hidden; border-top:1px solid var(--line); }
.cta-inner{ text-align:center; max-width:42ch; margin-inline:auto; }
.cta-inner h2{ margin-bottom:18px; }
.cta-inner .btn{ margin-top:14px; }

/* ---------- Footer ---------- */
.site-foot{ border-top:1px solid var(--line); padding-block:64px 40px; background:var(--ink-2); }
.foot-top{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:34px; }
.foot-brand p{ font-size:14px; color:var(--mute); max-width:34ch; margin-top:18px; }
.foot-col h5{ font-family:var(--f-mono); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--mute); margin-bottom:16px; font-weight:400; }
.foot-col a{ display:block; font-size:14.5px; color:var(--mist-dim); padding-block:6px; transition:color .2s; }
.foot-col a:hover{ color:var(--cyan); }
.foot-bot{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; margin-top:54px; padding-top:26px; border-top:1px solid var(--line); }
.foot-bot p{ font-family:var(--f-mono); font-size:12px; color:var(--mute); }
.foot-bot .ko{ color:var(--cyan); }

/* ---------- Page header (interior pages) ---------- */
.page-head{ padding-top:clamp(50px,7vw,90px); padding-bottom:clamp(36px,5vw,60px); position:relative; overflow:hidden; }
.page-head h1{ font-size:clamp(38px,6.5vw,76px); line-height:1; max-width:16ch; margin:22px 0 0; }
.page-head .lead{ max-width:56ch; margin-top:24px; }

/* ---------- Generic content grid ---------- */
.feature-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.feature{
  border:1px solid var(--line); border-radius:var(--r); padding:28px; background:var(--ink-2);
  transition:border-color .3s, transform .3s;
}
.feature:hover{ border-color:var(--line-2); transform:translateY(-3px); }
.feature .hx{ width:34px; height:38px; margin-bottom:18px; }
.feature h3{ font-size:19px; margin-bottom:10px; }
.feature p{ font-size:14.5px; color:var(--mute); }

/* ---------- Audience selector (solutions) ---------- */
.aud{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.audcard{ border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; background:var(--ink-2); transition:border-color .3s,transform .3s; display:flex; flex-direction:column; }
.audcard:hover{ border-color:var(--line-2); transform:translateY(-4px); }
.audcard .top{ padding:30px 28px 24px; border-bottom:1px solid var(--line); }
.audcard .top .who{ font-family:var(--f-mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--cyan); }
.audcard h3{ margin:14px 0 0; font-size:24px; }
.audcard .body{ padding:24px 28px 30px; display:flex; flex-direction:column; gap:14px; flex:1; }
.audcard ul{ list-style:none; display:grid; gap:11px; }
.audcard li{ font-size:14.5px; color:var(--mist-dim); display:flex; gap:11px; align-items:flex-start; }
.audcard li::before{ content:""; width:6px; height:6px; background:var(--cyan); transform:rotate(45deg); margin-top:8px; flex:none; }

/* ---------- Brand detail rows ---------- */
.brandrow{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:48px; align-items:center; padding-block:clamp(40px,6vw,72px); border-top:1px solid var(--line); }
.brandrow:nth-child(even) .br-media{ order:2; }
.br-head .code{ font-family:var(--f-mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--mute); }
.br-head h2{ font-size:clamp(34px,5vw,56px); margin:10px 0 4px; }
.br-head .role{ font-family:var(--f-mono); color:var(--cyan); font-size:14px; }
.brandrow p{ margin-top:18px; max-width:48ch; }
.br-list{ list-style:none; margin-top:22px; display:grid; gap:10px; }
.br-list li{ font-size:14.5px; color:var(--mist-dim); display:flex; gap:11px; }
.br-list li::before{ content:"—"; color:var(--cyan); }
.br-media{ border:1px solid var(--line); border-radius:var(--r-lg); aspect-ratio:4/3; background:linear-gradient(135deg,var(--ink-2),var(--surface)); position:relative; overflow:hidden; display:grid; place-items:center; }
.br-media .hexmark{ width:46%; opacity:.9; }
.br-media .coords{ position:absolute; bottom:16px; left:18px; font-family:var(--f-mono); font-size:10.5px; color:var(--mute); letter-spacing:.1em; }
@media(max-width:820px){ .brandrow{ grid-template-columns:1fr; gap:28px; } .brandrow:nth-child(even) .br-media{ order:0; } }

/* ---------- About: values ---------- */
.values{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
.values div{ background:var(--ink-2); padding:32px; }
.values .vk{ font-family:var(--f-mono); font-size:12px; color:var(--cyan); letter-spacing:.1em; }
.values h3{ margin:14px 0 8px; font-size:21px; }
.values p{ font-size:14.5px; color:var(--mute); }

.stat-strip{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; margin-top:40px; }
.stat-strip div{ background:var(--ink); padding:28px 24px; }
.stat-strip .n{ font-family:var(--f-display); font-weight:800; font-size:clamp(28px,4vw,42px); letter-spacing:-.02em; }
.stat-strip .n .u{ color:var(--cyan); }
.stat-strip .l{ font-family:var(--f-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--mute); margin-top:8px; }

/* ---------- Contact ---------- */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start; }
.contact-paths{ display:grid; gap:14px; }
.pathcard{ border:1px solid var(--line); border-radius:var(--r); padding:24px; background:var(--ink-2); display:flex; gap:18px; align-items:flex-start; transition:border-color .3s; }
.pathcard:hover{ border-color:var(--line-2); }
.pathcard .ic{ width:42px; height:46px; flex:none; }
.pathcard h3{ font-size:18px; margin-bottom:6px; }
.pathcard p{ font-size:14px; color:var(--mute); }
.pathcard a{ color:var(--cyan); font-family:var(--f-mono); font-size:13px; margin-top:8px; display:inline-block; }
form{ display:grid; gap:16px; }
.field{ display:grid; gap:8px; }
.field label{ font-family:var(--f-mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--mute); }
.field input, .field select, .field textarea{
  background:var(--ink-2); border:1px solid var(--line); border-radius:10px;
  padding:14px 16px; color:var(--mist); font-family:var(--f-body); font-size:15px;
  transition:border-color .2s;
}
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--cyan); }
.field textarea{ min-height:130px; resize:vertical; }
.form-note{ font-family:var(--f-mono); font-size:11.5px; color:var(--mute); }
@media(max-width:820px){ .contact-grid{ grid-template-columns:1fr; gap:40px; } }

/* ---------- Reveal animation ---------- */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.in{ opacity:1; transform:none; }

/* ---------- Responsive ---------- */
@media(max-width:980px){
  .pipeline{ grid-template-columns:repeat(2,1fr); }
  .feature-grid, .aud{ grid-template-columns:1fr; }
  .foot-top{ grid-template-columns:1fr 1fr; gap:34px 20px; }
}
@media(max-width:760px){
  .nav-links, .nav-cta .btn{ display:none; }
  .nav-toggle{ display:flex; }
  .nav-cta{ gap:10px; }
  .brand small{ font-size:9px; }
  .brand-grid{ grid-template-columns:1fr; }
  .hero-meta{ grid-template-columns:repeat(3,1fr); margin-top:44px; }
  .hero-meta div{ padding:15px 12px; }
  .hero-meta .n{ font-size:19px; }
  .hero-meta .l{ font-size:9.5px; letter-spacing:.08em; }
  .stat-strip{ grid-template-columns:repeat(2,1fr); }
  .values{ grid-template-columns:1fr; }
  .foot-top{ grid-template-columns:1fr 1fr; }
  .foot-brand{ grid-column:1 / -1; }
  body{ font-size:16px; }
}
@media(max-width:430px){
  .hero-meta .n{ font-size:17px; }
  .case-flow{ grid-template-columns:1fr; }
  .case-flow .node{ padding-right:0; }
}

/* Mobile nav panel */
.mobile-nav{
  position:fixed; inset:0 0 0 auto; width:min(86vw,360px); z-index:80;
  background:var(--ink-2); border-left:1px solid var(--line);
  transform:translateX(100%); transition:transform .4s cubic-bezier(.2,.7,.2,1);
  padding:90px 32px 40px; display:flex; flex-direction:column; gap:6px;
}
.mobile-nav.open{ transform:none; }
.mobile-nav a{ font-family:var(--f-display); font-weight:700; font-size:24px; padding-block:12px; border-bottom:1px solid var(--line); }
.mobile-nav .btn{ margin-top:24px; justify-content:center; }
.scrim{ position:fixed; inset:0; background:rgba(5,12,18,.6); backdrop-filter:blur(2px); z-index:70; opacity:0; pointer-events:none; transition:opacity .3s; }
.scrim.open{ opacity:1; pointer-events:auto; }
.nav-close{ position:absolute; top:24px; right:24px; background:none; border:1px solid var(--line-2); border-radius:8px; width:42px; height:42px; color:var(--mist); cursor:pointer; font-size:20px; }

@media(prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
  .reveal{ opacity:1; transform:none; }
  html{ scroll-behavior:auto; }
}