:root{
  --paper:#EDEAE3;
  --ink:#1A1C20;
  --ink-70: rgba(26,28,32,.7);
  --ink-55: rgba(26,28,32,.66);
  --grid: rgba(26,28,32,.14);
  --route:#E0562C;
  --route-ink:#C4451F;
  --ok:#2F7A4F;
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-soft: cubic-bezier(.4, 0, .2, 1);
  --t-press: 120ms;
  --t-tap:   150ms;
  --t-menu:  200ms;
  --t-panel: 260ms;
  --t-enter: 520ms;
}
*{box-sizing:border-box;}
html{scroll-behavior:auto;}
:root{ color-scheme: light; }
html, body{ overscroll-behavior-y:none; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:'Inter','Helvetica Neue',Helvetica,Arial,sans-serif; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block;max-width:100%;}
a{color:inherit;}
button{font:inherit;}
.grid{
  display:grid; grid-template-columns:repeat(12,1fr); gap:24px;
  max-width:1400px; margin:0 auto; padding:0 40px;
}
@media (max-width:900px){ .grid{ grid-template-columns:repeat(6,1fr); padding:0 24px; gap:16px; } }
@media (max-width:560px){ .grid{ grid-template-columns:repeat(4,1fr); padding:0 18px; } }
header{ position:sticky; top:0; z-index:50; background:var(--paper); border-bottom:1px solid var(--ink); }
.nav{ display:flex; align-items:center; justify-content:space-between; }
.logo{ font-family:'Inter','Helvetica Neue',Helvetica,Arial,sans-serif; font-weight:900; font-size:22px; letter-spacing:-.01em; display:flex; align-items:center; gap:9px; text-decoration:none; }
.logo-icon{ width:26px; height:26px; flex:none; }
ul.menu{ display:flex; gap:0; list-style:none; margin:0; padding:0; }
ul.menu li{ margin-left:-1px; }
ul.menu li:first-child{ margin-left:0; }
ul.menu a,
ul.menu button{
  display:inline-flex; align-items:center; white-space:nowrap;
  font-family:inherit; border:0; cursor:pointer;
  font-size:13px; font-weight:600; text-decoration:none; color:var(--ink);
  text-transform:uppercase; letter-spacing:.04em;
  background:var(--paper); padding:11px 16px;
  transition:background-color var(--t-tap) var(--ease-soft), color var(--t-tap) var(--ease-soft);
}
ul.menu a:hover, ul.menu a:focus-visible,
ul.menu button:hover, ul.menu button:focus-visible{ background:var(--route); color:#fff; font-weight:700; }
@media (max-width:1040px){ ul.menu{ display:none; } }
.menu-toggle{
  display:none; flex-direction:column; justify-content:center; align-items:flex-end; gap:7px;
  width:32px; height:32px; background:none; border:none; cursor:pointer; padding:0;
}
.menu-toggle span{
  display:block; width:100%; height:2.5px; background:var(--route);
  transition:transform var(--t-menu) var(--ease-out), opacity var(--t-menu) var(--ease-out);
}
.menu-toggle.open span:nth-child(1){ transform:translateY(4.75px) rotate(45deg); }
.menu-toggle.open span:nth-child(2){ transform:translateY(-4.75px) rotate(-45deg); }
@media (max-width:1040px){ .menu-toggle{ display:flex; } }
.mobile-menu{
  position:absolute; top:100%; left:0; right:0; z-index:40;
  background:var(--paper); border-bottom:1px solid var(--ink);
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity var(--t-menu) var(--ease-out), transform var(--t-menu) var(--ease-out), visibility 0s linear var(--t-menu);
}
.mobile-menu-inner{ display:flex; flex-direction:column; }
.mobile-menu a,
.mobile-menu button{
  padding:18px 24px; text-decoration:none; color:var(--ink);
  font-family:inherit; border:0; border-top:1px solid var(--grid);
  background:none; text-align:left; cursor:pointer;
  font-weight:700; font-size:14px; text-transform:uppercase; letter-spacing:.04em;
  transition:background-color var(--t-tap) var(--ease-soft), color var(--t-tap) var(--ease-soft);
}
.mobile-menu a:hover, .mobile-menu a:focus-visible,
.mobile-menu button:hover, .mobile-menu button:focus-visible{ background:var(--route); color:#fff; }
.mobile-menu.open{
  opacity:1; visibility:visible; transform:translateY(0);
  transition:opacity var(--t-menu) var(--ease-out), transform var(--t-menu) var(--ease-out);
}
.btn{
  display:inline-flex; align-items:center; gap:8px; background:var(--route); color:var(--ink);
  font-weight:800; font-size:13px; text-transform:uppercase; letter-spacing:.03em;
  padding:14px 22px; border:none; cursor:pointer; text-decoration:none;
}
.btn:hover, .btn:focus-visible{ background:var(--ink); color:var(--paper); }
.btn:disabled{ opacity:.6; cursor:default; }
.btn.on-red{ background:var(--ink); color:var(--paper); }
.btn.on-red:hover{ background:var(--paper); color:var(--ink); }
.btn-ghost{
  display:inline-flex; align-items:center; background:none; cursor:pointer;
  border:1px solid var(--ink); color:var(--ink);
  font-weight:700; font-size:13px; text-transform:uppercase; letter-spacing:.03em;
  padding:13px 20px;
}
.btn-ghost:hover, .btn-ghost:focus-visible{ background:var(--ink); color:var(--paper); }
section.panel{ padding:0 0 104px; }
section.panel#showcase{ padding-top:0; }
.panel-red{ background:var(--route); color:var(--ink); padding-bottom:72px; position:relative; overflow-x:clip; overflow-y:visible; }
@media (max-width:900px){ section.panel{ padding-bottom:72px; } .panel-red{ padding-bottom:64px; } }
.dossier-bar{
  grid-column:1/-1; display:flex; justify-content:space-between; align-items:baseline; gap:16px;
  padding:16px 0; border-bottom:1px solid var(--grid);
  font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-55);
}
.panel-red .dossier-bar{ border-color:rgba(23,21,18,.3); color:var(--ink); }
h2.section-title{
  font-family:'Inter','Helvetica Neue',Helvetica,Arial,sans-serif; font-weight:900; font-size:clamp(28px,3.1vw,46px);
  letter-spacing:-.025em; line-height:1.02; margin:0 0 24px; text-wrap:balance;
}
.section-lede{ color:var(--ink-70); max-width:52ch; margin:0 0 44px; font-size:17px; }
.panel-red .section-lede{ color:var(--ink); }
.accent{ color:var(--route-ink); }
.mark{ font-weight:800; color:var(--route-ink); }
.dot-circle{
  display:inline-block; width:.16em; height:.16em; border-radius:50%;
  background:var(--route); margin-left:.07em; vertical-align:baseline;
  transform:translateY(-.03em);
}
#heroDot{ will-change:opacity; }
@media (prefers-reduced-motion: no-preference){
  .reveal{ opacity:0; transform:translateY(14px); transition:opacity var(--t-enter) var(--ease-out), transform var(--t-enter) var(--ease-out); }
  .reveal.in{ opacity:1; transform:none; }
}