/* RESET + BASE */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h-mobile) + 8px)}
@media (min-width:768px){html{scroll-padding-top:calc(var(--header-h) + 8px)}}
html,body{margin:0;padding:0;max-width:100vw;overflow-x:hidden}
body{
  font-family:var(--ff-body);
  color:var(--text);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg,video,iframe{max-width:100%;display:block}
figure{margin:0}
button{font-family:inherit;cursor:pointer;border:0;background:transparent;color:inherit;padding:0}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4{font-family:var(--ff-display);font-weight:600;color:var(--text);line-height:1.15;margin:0}
p{margin:0;color:var(--text-2)}
[hidden]{display:none !important}

/* Typo h2-h3-h4 */
h1{font-size:clamp(2.3rem,6vw,3.6rem);letter-spacing:-0.01em}
h2{font-size:clamp(1.7rem,3.5vw,2.4rem);letter-spacing:-0.005em}
h3{font-size:clamp(1.2rem,2vw,1.45rem)}
h4{font-size:1.05rem}

/* Selection */
::selection{background:var(--accent);color:#fff}
::-moz-selection{background:var(--accent);color:#fff}

/* Scrollbar */
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--accent) 60%,var(--text) 25%);border-radius:8px}
html{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--accent) 60%,var(--text) 25%) var(--bg)}

/* Focus */
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
button:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* Placeholder */
::placeholder{color:var(--text-mute);opacity:1}

/* Container */
.container{max-width:var(--container);margin:0 auto;padding:0 20px}
@media (min-width:768px){.container{padding:0 32px}}

/* Eyebrow */
.eyebrow{
  font-family:var(--ff-ui);
  text-transform:uppercase;
  letter-spacing:0.18em;
  font-size:0.74rem;
  color:var(--accent);
  font-weight:500;
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-bottom:14px;
}
.eyebrow::before{content:"";width:28px;height:1px;background:var(--accent)}

.section{padding:48px 0}
@media (min-width:768px){.section{padding:80px 0}}
.section--alt{background:var(--bg-alt)}
.section--dark{background:var(--primary);color:#fff}
.section--dark,
.section--dark :where(h1,h2,h3,h4,p,li,span,a,strong){color:#fff}
.section--dark p{color:rgba(255,255,255,0.82)}
.section--dark .eyebrow{color:var(--accent-on-dark)}
.section--dark .eyebrow::before{background:var(--accent-on-dark)}