/* Reset & base */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
html::-webkit-scrollbar, body::-webkit-scrollbar {
  display: none;
}
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* Match body bg at the html level so navigation between pages
     never shows a white flash before CSS / body paint. */
  background: #FAF8F4;
}
body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.65;
  color: var(--color-text);
  background: var(--color-bg);
  overflow-x: hidden;
}
img, svg, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; transition: color var(--duration-fast) var(--ease-out); }
a:hover { color: var(--color-primary); }
button { cursor: pointer; border: 0; background: none; font-family: inherit; color: inherit; }
ul, ol { list-style: none; }
input, select, textarea { font-family: inherit; font-size: inherit; }
::selection { background: var(--color-accent); color: var(--color-text-on-accent); }

/* Headings */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--color-text);
}
h1 { font-size: var(--text-h1); }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); }
h4 { font-size: var(--text-h4); }
p { color: var(--color-text-secondary); }

/* Layout */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--grid-margin);
}
.container--narrow {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 var(--grid-margin);
}
.section {
  padding: var(--space-16) 0;
  position: relative;
}
.section--tight { padding: var(--space-12) 0; }
.section--alt   { background: var(--color-bg-alt); }
.section--mint  { background: var(--color-bg-mint-soft); }
/* Trim padding between two contiguous same-tone sections — they share a bg,
   so the eye reads them as one block. Saves the doubled-padding gap. */
.section--alt + .section--alt {
  padding-top: var(--space-10);
}
.section:not(.section--alt):not(.section--dark) + .section:not(.section--alt):not(.section--dark) {
  padding-top: var(--space-10);
}
.section--tight:not(.section--alt):not(.section--dark) + .section--tight:not(.section--alt):not(.section--dark) {
  padding-top: var(--space-8);
}
/* Hairline separator between contiguous same-bg sections */
.section + .section:not(.section--alt):not(.section--dark)::before,
.section--alt + .section--alt::before {
  content: "";
  position: absolute;
  left: var(--grid-margin); right: var(--grid-margin);
  top: 0;
  height: 1px;
  background: var(--color-border);
  pointer-events: none;
}
.section--dark {
  background: var(--color-anchor);
  color: #fff;
}
.section--dark .section-label { color: var(--color-accent); }
.section--dark .section-title,
.section--dark h1, .section--dark h2, .section--dark h3 { color: #fff; }
.section--dark .section-subtitle,
.section--dark p { color: rgba(255,255,255,0.78); }

/* Section heading block */
.section-header {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--space-8);
  margin-bottom: var(--space-16);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--color-border);
  flex-wrap: wrap;
}
.section--dark .section-header { border-bottom-color: rgba(255,255,255,0.12); }
.section-header--center {
  flex-direction: column; align-items: center; text-align: center;
  border-bottom: 0;
  padding-bottom: 0;
}
.section-label {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-jakarta);
  font-size: var(--text-overline);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--color-primary);
  margin-bottom: var(--space-4);
}
.section-label::before {
  content: "";
  width: 28px; height: 1px;
  background: currentColor;
  display: inline-block;
}
.section-header--center .section-label::after {
  content: "";
  width: 28px; height: 1px;
  background: currentColor;
  display: inline-block;
}
.section-title {
  font-size: clamp(1.75rem, 3.4vw, 2.5rem);
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin-bottom: var(--space-4);
}
.section-subtitle {
  max-width: 580px;
  color: var(--color-text-secondary);
  font-size: 1.0625rem;
  line-height: 1.65;
}
.section-header--center .section-subtitle { margin: var(--space-3) auto 0; }

/* ─── Reveal-on-scroll — modern mask/clip variants ──────────
   Goal: dzinr-style cinematic reveals. Instead of fading from
   opacity 0 with translateY (which leaves elements invisible
   when the IO never fires), each variant has a SAFE final
   state. We mark every reveal as is-visible after a 1.6s
   wallclock fallback in JS, so content never stays hidden. */
.reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: none; }

.reveal--up    { transform: translateY(56px); }
.reveal--left  { transform: translateX(-48px); }
.reveal--right { transform: translateX(48px); }
.reveal--zoom  { transform: scale(0.96); }

/* Mask reveal — clip from bottom up. The most cinematic. */
.reveal--mask {
  opacity: 1; transform: none;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.1s var(--ease-out);
}
.reveal--mask.is-visible { clip-path: inset(0 0 0 0); }

/* Image clip reveal — used on media to slide an image in from a wipe. */
.reveal--clip {
  opacity: 1; transform: none;
  clip-path: inset(50% 0 50% 0);
  transition: clip-path 1.4s var(--ease-out);
}
.reveal--clip.is-visible { clip-path: inset(0 0 0 0); }

.reveal-stagger > * {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}
.reveal-stagger.is-visible > * { opacity: 1; transform: none; }
.reveal-stagger.is-visible > *:nth-child(1) { transition-delay: 0ms; }
.reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 90ms; }
.reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 180ms; }
.reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 270ms; }
.reveal-stagger.is-visible > *:nth-child(5) { transition-delay: 360ms; }
.reveal-stagger.is-visible > *:nth-child(6) { transition-delay: 450ms; }
.reveal-stagger.is-visible > *:nth-child(7) { transition-delay: 540ms; }
.reveal-stagger.is-visible > *:nth-child(8) { transition-delay: 630ms; }
.reveal-stagger.is-revealed > * { transition-delay: 0ms !important; }

/* Character-by-character mask title reveal. Wrap each word in
   <span class="word"><span class="line">word</span></span>. */
.title-reveal { display: inline-block; line-height: 1.1; }
.title-reveal .word {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
}
.title-reveal .line {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 1.05s var(--ease-out);
  transition-delay: var(--word-delay, 0ms);
}
.title-reveal.is-visible .line,
.is-visible > .title-reveal .line { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal--up, .reveal--left, .reveal--right, .reveal--zoom,
  .reveal--mask, .reveal--clip,
  .reveal-stagger > *, .title-reveal .line {
    opacity: 1 !important; transform: none !important; clip-path: none !important;
    filter: none !important; transition: none !important;
  }
}

/* Utilities */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.text-center { text-align: center; }

/* Material Symbols — reserve fixed glyph space + hide pre-load FOUC text.
   Before the icon font loads, <span>arrow_forward</span> would render as
   ~120px of body-font text. We clip it to 1em and fade in once loaded. */
.material-symbols-outlined {
  font-family: 'Material Symbols Outlined', sans-serif;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  font-weight: normal;
  font-style: normal;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  font-size: 1em;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  overflow: hidden;
  vertical-align: -0.18em;
  -webkit-font-feature-settings: 'liga';
  -moz-font-feature-settings: 'liga';
  font-feature-settings: 'liga';
  color: inherit;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 160ms var(--ease-out);
}
html.fonts-loaded .material-symbols-outlined { opacity: 1; }

@media (max-width: 768px) {
  .section { padding: var(--space-16) 0; }
  .section--tight { padding: var(--space-12) 0; }
  .section--alt + .section--alt,
  .section:not(.section--alt):not(.section--dark) + .section:not(.section--alt):not(.section--dark) {
    padding-top: var(--space-10);
  }
  .section-header { gap: var(--space-5); margin-bottom: var(--space-10); }
}
@media (max-width: 540px) {
  .section { padding: var(--space-12) 0; }
  .section-title { font-size: clamp(1.375rem, 6vw, 1.75rem); }
}