/* Reset + base */
*, *::before, *::after { box-sizing: border-box; }
html, body, h1, h2, h3, h4, p, ul, ol, li, figure, blockquote, fieldset, legend { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img, picture, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
select, button, input, textarea { font-family: inherit; font-size: inherit; line-height: inherit; font-weight: inherit; color: inherit; }
textarea { outline: none; resize: vertical; }
fieldset { border: 0; min-width: 0; }
[hidden] { display: none !important; }

html {
  font-size: 62.5%;
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;
  background: var(--off-black);
}
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: clip; }

body {
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.5;
  font-weight: 400;
  color: var(--night-black);
  background: var(--white);
  overflow-x: clip;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
body.preloaderActive { overflow: hidden; }
html:has(body.preloaderActive) { overflow: hidden; }

::selection { background: var(--off-black); color: var(--white); }

:focus-visible { outline: .15rem dashed currentColor; outline-offset: .3rem; }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.skipLink {
  position: fixed; top: 1rem; left: 1rem; z-index: 10000;
  background: var(--white); color: var(--off-black); padding: 1rem 1.6rem; border-radius: .6rem;
  font-size: var(--fs-s); transform: translateY(-200%); transition: transform .3s var(--ease-ui);
}
.skipLink:focus { transform: translateY(0); }

/* Type scale (mirrors the reference type classes) */
.font-3XL, .font-XXL, .font-XL, .font-L, .font-M, .font-XM, .font-S, .font-S--semibold, .font-XS, .font-XS--semibold {
  font-family: var(--font); font-weight: 400; color: inherit; letter-spacing: 0;
}
.font-3XL { font-size: var(--fs-3xl); line-height: 100%; letter-spacing: -.02em; }
.font-XXL { font-size: var(--fs-xxl); line-height: 110%; letter-spacing: -.015em; }
.font-XL  { font-size: var(--fs-xl);  line-height: 110%; letter-spacing: -.01em; }
.font-L   { font-size: var(--fs-l);   line-height: 110%; letter-spacing: -.01em; }
.font-M   { font-size: var(--fs-m);   line-height: 130%; }
.font-XM  { font-size: var(--fs-xm);  line-height: 130%; }
.font-S, .font-S--semibold { font-size: var(--fs-s); line-height: 135%; }
.font-S--semibold { font-weight: 600; }
.font-XS, .font-XS--semibold { font-size: var(--fs-xs); line-height: 140%; }
.font-XS--semibold { font-weight: 600; }

/* Grid template: [full] gutter [main] N columns [main] gutter [full] */
[data-grid] {
  display: grid;
  gap: var(--row-gap) var(--column-gap);
  grid-template-columns: [full-start] minmax(1.5rem, 1fr) [main-start] repeat(4, minmax(0, 100px)) [main-end] minmax(1.5rem, 1fr) [full-end];
  grid-template-rows: auto;
}
@media (min-width: 480px) {
  [data-grid] { grid-template-columns: [full-start] minmax(1.5rem, 1fr) [main-start] repeat(6, minmax(0, 100px)) [main-end] minmax(1.5rem, 1fr) [full-end]; }
}
@media (min-width: 768px) {
  [data-grid] { grid-template-columns: [full-start] minmax(3rem, 1fr) [main-start] repeat(12, minmax(0, 100px)) [main-end] minmax(3rem, 1fr) [full-end]; }
}
@media (min-width: 1280px) {
  [data-grid] { grid-template-columns: [full-start] minmax(4rem, 1fr) [main-start] repeat(20, minmax(50px, 80px)) [main-end] minmax(4rem, 1fr) [full-end]; }
}

/* Chamfered corner motif */
.cut-tl { clip-path: polygon(var(--cut) 0, 100% 0, 100% 100%, 0 100%, 0 var(--cut)); }
.cut-tr { clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%); }
.cut-br { clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%); }

/* Scroll-reveal base states (set only when JS + motion are available) */
.js-motion [data-reveal] { opacity: 0; }
[data-imageanimate] {
  clip-path: inset(40% 0 0 0); opacity: .2; overflow: hidden;
  transition: clip-path 1.2s var(--ease-reveal), opacity 1.2s var(--ease-reveal);
}
[data-imageanimate] img { scale: 1.5; transition: scale 1.2s var(--ease-reveal), transform .3s ease-in-out; }
[data-imageanimate='true'] { clip-path: inset(0 0 0 0); opacity: 1; }
[data-imageanimate='true'] img { scale: 1; }
.no-js [data-imageanimate], .reduced [data-imageanimate] { clip-path: none; opacity: 1; }
.no-js [data-imageanimate] img, .reduced [data-imageanimate] img { scale: 1; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}