html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 1rem)}
body{background:var(--color-bg);color:var(--color-text);font-family:var(--font-sans);font-size:var(--fs-body);line-height:1.7;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
::selection{background:var(--color-olive);color:var(--color-on-dark)}
:focus-visible{outline:2px solid var(--color-gold-text);outline-offset:4px}

.container{width:100%;max-width:var(--container-max);margin-inline:auto;padding-inline:var(--gutter)}
.skip-link{position:absolute;left:var(--gutter);top:-4rem;z-index:100;background:var(--color-olive);color:var(--color-on-dark);padding:.75rem 1.25rem;font-size:var(--fs-ui);letter-spacing:var(--track-ui);text-transform:uppercase}
.skip-link:focus{top:1rem}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* type */
.eyebrow{font-size:var(--fs-eyebrow);letter-spacing:var(--track-eyebrow);text-transform:uppercase;color:var(--color-gold-text);font-weight:600}
.display{font-family:var(--font-serif);font-weight:300;line-height:1.02;letter-spacing:-.005em}
.h2{font-size:var(--fs-h2);line-height:1.06}
.display em{font-style:italic}
.lead{font-size:var(--fs-lead);line-height:1.75;color:var(--color-muted);max-width:34rem}
.icon{width:1.25rem;height:1.25rem;stroke:currentColor;fill:none;stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.9rem;min-height:3.25rem;padding:0 1.9rem;font-size:var(--fs-ui);font-weight:600;letter-spacing:var(--track-ui);text-transform:uppercase;border:1px solid transparent;border-radius:var(--radius-ui);transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)}
.btn__arrow{transition:transform var(--dur-fast) var(--ease)}
.btn:hover .btn__arrow,.btn:focus-visible .btn__arrow,.link-arrow:hover .btn__arrow{transform:translateX(5px)}
.btn--primary{background:var(--color-olive);color:var(--color-on-dark)}
.btn--primary:hover{background:var(--color-olive-deep)}
.btn--secondary{border-color:var(--color-gold);color:var(--color-olive)}
.btn--secondary:hover{background:var(--color-olive);border-color:var(--color-olive);color:var(--color-on-dark)}
.btn--sm{min-height:2.5rem;padding:0 1.25rem}
.link-arrow{display:inline-flex;align-items:center;gap:.8rem;font-size:var(--fs-ui);font-weight:600;letter-spacing:var(--track-ui);text-transform:uppercase;color:var(--color-olive);padding-bottom:.35rem;border-bottom:1px solid var(--color-gold)}

/* reveal: only hidden when JS is present, so content never depends on scripts */
.js [data-reveal]{opacity:0;transform:translateY(18px);transition:opacity var(--dur-slow) var(--ease),transform var(--dur-slow) var(--ease);transition-delay:var(--reveal-delay,0s)}
.js [data-reveal].is-visible{opacity:1;transform:none}
.js [data-reveal="image"]{opacity:1;transform:none;clip-path:inset(0 0 10% 0);transition:clip-path 1.3s var(--ease);transition-delay:var(--reveal-delay,0s)}
.js [data-reveal="image"].is-visible{clip-path:inset(0)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
  .js [data-reveal]{opacity:1;transform:none;clip-path:none}
}
