/* ==========================================================================
   Hilal — implementation of "Hilal Website.dc.html"
   Tokens, components and layout transcribed from the design doc's
   specimen sheet and annotation panels (grid / motion / type).
   ========================================================================== */

:root {
  /* Palette — names from the design doc's swatch row */
  --layl:    #1A0E08;
  --maghrib: #5D1707;
  --duha:    #FFEAD9;
  --fajr:    #FFF4E4;

  --rule-on-light: rgba(26, 14, 8, 0.2);
  --rule-on-dark:  rgba(255, 234, 217, 0.25);
  --ink-on-light:  rgba(26, 14, 8, 0.85);
  --ink-on-dark:   rgba(255, 234, 217, 0.6);

  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body:    'EB Garamond', Georgia, serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, monospace;
  --font-arabic:  'Amiri', 'Cormorant Garamond', serif;

  /* Type — fluid between the design's two artboards, 390px and 1440px */
  --fs-display-xl: clamp(52px, 4.95vw + 32.69px, 104px); /* 52 → 104 */
  --fs-display-l:  clamp(42px, 3.24vw + 29.37px, 76px);  /* 42 → 76  */
  --fs-display-m:  clamp(34px, 2.10vw + 25.83px, 56px);  /* 34 → 56  */
  --fs-display-s:  clamp(26px, 0.57vw + 23.77px, 32px);  /* 26 → 32  */
  --fs-body:       clamp(17px, 0.19vw + 16.26px, 19px);  /* 17 → 19  */
  --fs-label:      clamp(11px, 0.10vw + 10.63px, 12px);  /* 11 → 12  */
  --fs-label-sm:   clamp(10px, 0.10vw +  9.63px, 11px);  /* 10 → 11  */

  /* Grid — desktop 12col / 80px margins / 24px gutters, mobile 4col / 20px / 16px */
  --content-max: 1280px;  /* the 1440 artboard minus its two 80px margins */
  --margin:      clamp(20px, 5.71vw - 2.29px, 80px);  /* 20 → 80 */
  /* Horizontal gutter for every full-bleed band. Below 1440 it is just the
     fluid margin; above it, it grows so the content stays centred on the grid
     while backgrounds keep running edge to edge. At exactly 1440 the two
     expressions meet at 80px, so the artboard is reproduced unchanged. */
  --gutter-x:    max(var(--margin), calc((100% - var(--content-max)) / 2));
  --section-gap: clamp(96px, 6.10vw + 72.23px, 160px); /* 96 → 160 */
  --gutter: clamp(16px, 0.76vw + 13.03px, 24px);

  --nav-h: clamp(64px, 2.29vw + 55.09px, 88px); /* 64 → 88 */
  --bar-h: 40px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--fajr);
  color: var(--layl);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

:where(a, button):focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 12px 20px;
  background: var(--duha);
  color: var(--maghrib);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.skip-link:focus { left: 0; }

/* --------------------------------------------------------------------------
   Type primitives
   -------------------------------------------------------------------------- */

.label {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fs-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.label--sm { font-size: var(--fs-label-sm); }
.label--maghrib { color: var(--maghrib); }
.label--muted-dark { color: rgba(255, 234, 217, 0.55); }
.label--duha { color: var(--duha); }

.display {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  line-height: 1;
  margin: 0;
  text-wrap: pretty;
}
.display--xl { font-size: var(--fs-display-xl); }
.display--l  { font-size: var(--fs-display-l); line-height: 1.03; }
.display--m  { font-size: var(--fs-display-m); line-height: 1.05; }

/* Upright Cormorant — used for the "three ways in" card headings */
.heading-s {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-display-s);
  line-height: 1.15;
  margin: 0;
  text-wrap: pretty;
}

.prose { margin: 0; text-wrap: pretty; }
.prose--muted { color: var(--ink-on-light); }

.arabic {
  font-family: var(--font-arabic);
  direction: rtl;
}

/* Arrow glyph — set in EB Garamond with tracking reset, per the specimen sheet */
.arrow {
  font-family: var(--font-body);
  letter-spacing: 0;
  transition: transform 0.3s var(--ease);
}

/* --------------------------------------------------------------------------
   Buttons and links
   Specimen sheet: 56px tall, 0 28px, gap 12 → 20 on hover, arrow shifts 4px.
   -------------------------------------------------------------------------- */

.btn {
  height: 56px;
  padding: 0 28px;
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fs-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease);
}
.btn:hover .arrow, .btn:focus-visible .arrow { transform: translateX(4px); }

/* Primary on light: Maghrib ground darkening to Layl */
.btn--light { background: var(--maghrib); color: var(--duha); }
.btn--light:hover, .btn--light:focus-visible { background: var(--layl); }

/* Primary on dark: Duha ground lifting to Fajr */
.btn--dark { background: var(--duha); color: var(--maghrib); }
.btn--dark:hover, .btn--dark:focus-visible { background: var(--fajr); color: var(--layl); }

.link {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 10px;
  padding-bottom: 4px;
  border-bottom: 1px solid currentColor;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fs-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: padding-right 0.3s var(--ease), gap 0.3s var(--ease);
}
.link:hover, .link:focus-visible { gap: 22px; padding-right: 10px; }
.link:hover .arrow, .link:focus-visible .arrow { transform: translateX(4px); }

.link--maghrib { color: var(--maghrib); }
.link--duha { color: var(--duha); }

.tag {
  align-self: flex-start;
  width: fit-content;
  margin: 0;
  border: 1px solid rgba(26, 14, 8, 0.35);
  padding: 10px 16px;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fs-label-sm);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--maghrib);
}
.tag--on-dark {
  border-color: rgba(255, 234, 217, 0.45);
  color: var(--duha);
}

/* Social marks — 20px lettered placeholders, per the specimen sheet note.
   Swap the letters for the supplied line icons when they land. */
.social { display: flex; gap: 12px; }
.social a {
  width: 20px;
  height: 20px;
  border: 1px solid rgba(255, 234, 217, 0.6);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0;
  color: var(--duha);
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease);
}
.social a:hover, .social a:focus-visible { background: var(--duha); color: var(--layl); }

/* --------------------------------------------------------------------------
   Page shell
   -------------------------------------------------------------------------- */

.page { background: var(--fajr); }

.band { position: relative; padding: var(--section-gap) var(--gutter-x); }
.band--fajr { background: var(--fajr); color: var(--layl); }
.band--maghrib { background: var(--maghrib); color: var(--duha); }
.band--layl { background: var(--layl); color: var(--duha); }

/* Announcement bar */
.bar {
  min-height: var(--bar-h);
  background: var(--maghrib);
  color: var(--duha);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--gutter-x);
  text-align: center;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fs-label-sm);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.bar__long { display: none; }
@media (min-width: 1024px) {
  .bar { letter-spacing: 0.12em; }
  .bar__long { display: inline; }
  .bar__short { display: none; }
}

/* --------------------------------------------------------------------------
   Navigation — transparent over the hero, Fajr with a hairline once past it
   -------------------------------------------------------------------------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 40;
  height: var(--nav-h);
  padding: 0 var(--gutter-x);
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--duha);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color 0.4s var(--ease), color 0.4s var(--ease),
              border-color 0.4s var(--ease);
}
.nav.is-scrolled {
  background: var(--fajr);
  color: var(--layl);
  border-bottom-color: var(--rule-on-light);
}

.nav__brand { display: flex; align-items: center; gap: clamp(10px, 0.38vw + 8.5px, 14px); }
.nav__mark { height: clamp(26px, 0.57vw + 23.8px, 32px); width: auto; }
.nav.is-scrolled .nav__mark--cream { display: none; }
.nav__mark--maroon { display: none; }
.nav.is-scrolled .nav__mark--maroon { display: block; }
.nav__wordmark {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(24px, 0.57vw + 21.8px, 30px);
  line-height: 1;
}

.nav__links { display: none; }
@media (min-width: 1024px) {
  .nav__links { display: flex; align-items: center; gap: 40px; }
}
.nav__link {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fs-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding-bottom: 4px;
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--ease);
}
.nav__link:hover, .nav__link:focus-visible, .nav__link[aria-current="page"] {
  border-bottom-color: currentColor;
}

.nav__menu-btn {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
  cursor: pointer;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fs-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
@media (min-width: 1024px) { .nav__menu-btn { display: none; } }

/* Mobile menu, open state */
.menu {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: var(--maghrib);
  color: var(--duha);
  display: flex;
  flex-direction: column;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.35s var(--ease), visibility 0.35s var(--ease);
}
.menu.is-open { visibility: visible; opacity: 1; }
.menu__top {
  height: var(--nav-h);
  flex: none;
  padding: 0 var(--margin);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.menu__nav {
  flex: 1;
  padding: 40px var(--margin) 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
  overflow-y: auto;
}
.menu__nav a {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 46px;
  line-height: 1.1;
}
.menu__foot {
  padding: 0 var(--margin) 40px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
/* Hug the label rather than stretching across the column, per the artboard */
.menu__foot > .btn { align-self: flex-start; }
.menu__foot-inner {
  border-top: 1px solid var(--rule-on-dark);
  padding-top: 28px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
body.menu-open { overflow: hidden; }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  background: var(--layl);
  overflow: hidden;
  isolation: isolate;
  /* Pull the hero up under the transparent sticky nav, so the artboard's
     900px / 630px hero height includes the navigation row as designed. */
  margin-top: calc(-1 * var(--nav-h));
}
.hero--home  { min-height: clamp(720px, 17.14vw + 653.14px, 900px); }
.hero--about { min-height: clamp(560px,  6.67vw + 534.00px, 630px); }

/* The photograph sits under a stack of blend layers, exactly as specced:
   colour(Maghrib) → soft-light(Duha) → multiply(Layl) → gradient → grain. */
.hero__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: transform;
  /* Overscaled by 12% so the parallax drift (capped at 6% of hero height
     in main.js) can never expose an edge. */
  transform: scale(1.12);
}
.hero--home .hero__photo {
  filter: grayscale(1) contrast(0.88) brightness(1.06);
}
.hero--about .hero__photo {
  object-position: center 60%;
  filter: grayscale(1) contrast(0.8) brightness(1.02);
}

.hero__layer { position: absolute; inset: 0; pointer-events: none; }
.hero__layer--colour { background: var(--maghrib); mix-blend-mode: color; }
.hero__layer--soft { background: var(--duha); mix-blend-mode: soft-light; }
.hero--home  .hero__layer--soft { opacity: 0.35; }
.hero--about .hero__layer--soft { opacity: 0.3; }
.hero__layer--multiply { background: var(--layl); mix-blend-mode: multiply; }
.hero--home  .hero__layer--multiply { opacity: 0.32; }
.hero--about .hero__layer--multiply { opacity: 0.45; }
.hero--home .hero__layer--fade {
  background: linear-gradient(to bottom, rgba(26,14,8,0) 52%, rgba(26,14,8,0.6) 78%, var(--layl) 100%);
}
.hero--about .hero__layer--fade {
  background: linear-gradient(to bottom, rgba(26,14,8,0.25) 40%, rgba(26,14,8,0.7) 74%, var(--layl) 100%);
}
@media (max-width: 1023px) {
  .hero--home .hero__layer--fade {
    background: linear-gradient(to bottom, rgba(26,14,8,0) 45%, rgba(26,14,8,0.65) 78%, var(--layl) 100%);
  }
  .hero--about .hero__layer--fade {
    background: linear-gradient(to bottom, rgba(26,14,8,0.25) 35%, rgba(26,14,8,0.72) 70%, var(--layl) 100%);
  }
}
.hero__layer--grain {
  background-image: url(assets/grain.svg);
  background-size: 220px;
  opacity: 0.1;
  mix-blend-mode: overlay;
}

.hero__content {
  position: absolute;
  left: var(--gutter-x);
  right: var(--gutter-x);
  bottom: clamp(32px, 3.81vw + 17.14px, 72px);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 48px;
}
.hero__copy { display: flex; flex-direction: column; gap: clamp(20px, 1.14vw + 15.5px, 32px); }
.hero--home .hero__copy { max-width: 845px; }
.hero--about .hero__copy { max-width: 1050px; gap: clamp(20px, 0.76vw + 17.03px, 28px); }
.hero__lede { max-width: 519px; color: var(--duha); }
.hero__eyebrow { display: flex; align-items: center; gap: clamp(12px, 1.14vw + 7.5px, 24px); flex-wrap: wrap; color: var(--duha); }
.hero__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  margin-top: 4px;
}
.hero__meta { display: none; }
@media (min-width: 1024px) {
  .hero__actions { flex-direction: row; align-items: center; gap: 40px; margin-top: 8px; }
  .hero__meta { display: block; padding-bottom: 6px; color: var(--duha); flex: none; }
}
.hero__meta-inline { color: var(--duha); }
@media (min-width: 1024px) { .hero__meta-inline { display: none; } }
.display--hero { color: var(--duha); }

/* Crescent — a single quarter arc that draws itself once on load */
.crescent {
  position: absolute;
  border-radius: 50%;
  overflow: visible;
  pointer-events: none;
}
.crescent circle {
  fill: none;
  stroke: rgba(255, 234, 217, 0.3);
  stroke-width: 1;
  /* r = 449.5 → C ≈ 2824.6; a quarter of it is ≈ 706.2 */
  stroke-dasharray: 706.2 2118.4;
  stroke-dashoffset: 706.2;
  transition: stroke-dashoffset 1.8s var(--ease);
}
.crescent.is-drawn circle { stroke-dashoffset: 0; }

/* Placements transcribed from the artboards (rotation = design angle + 135°,
   because an SVG dash run starts at 3 o'clock while border-left starts at 135°) */
.crescent--hero {
  top: -120px; right: -180px; width: 460px; height: 460px;
  transform: rotate(159deg);
}
.crescent--cta {
  top: -180px; right: -140px; width: 440px; height: 440px;
  transform: rotate(169deg);
}
@media (min-width: 1024px) {
  .crescent--hero {
    top: -230px; right: -300px; width: 900px; height: 900px;
    transform: rotate(161deg);
  }
  .crescent--cta {
    top: -320px; right: -220px; width: 840px; height: 840px;
    transform: rotate(173deg);
  }
}

/* --------------------------------------------------------------------------
   Home — "One community. Three ways in."
   -------------------------------------------------------------------------- */

.ways { position: relative; }
.ways__grid {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 48px;
  margin-top: 56px;
}
.ways__item {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
  padding-top: 24px;
}
.ways__item > .link { margin-top: 0; }
@media (min-width: 1024px) {
  .ways__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 96px; }
  .ways__item { gap: 20px; padding: 32px 48px 0 48px; }
  .ways__item:not(:first-child) { border-left: 1px solid var(--rule-on-light); }
  .ways__item:first-child { padding-left: 0; padding-right: 48px; }
  .ways__item:last-child { padding-right: 0; }
  .ways__item > .link { margin-top: 12px; }
}

/* Optional 12-column overlay, mirroring the doc's showGrid spec toggle */
.grid-overlay {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--gutter-x); right: var(--gutter-x);
  background: repeating-linear-gradient(to right,
    rgba(93,23,7,0.07) 0, rgba(93,23,7,0.07) 84.67px,
    transparent 84.67px, transparent 108.67px);
  pointer-events: none;
  display: none;
}
body.show-grid .grid-overlay { display: block; }

/* --------------------------------------------------------------------------
   The Sighting band
   -------------------------------------------------------------------------- */

.sighting {
  display: flex;
  flex-direction: column;
  gap: 28px;
  align-items: flex-start;
}
.sighting__head { display: flex; flex-direction: column; gap: 28px; align-items: flex-start; }
.sighting__body { display: flex; flex-direction: column; gap: 28px; align-items: flex-start; }
.sighting .btn { margin-top: 8px; }
@media (min-width: 1024px) {
  .sighting {
    display: grid;
    /* The artboard's 617 / 144 / 519 split, expressed proportionally so it
       also holds at laptop widths. At the 1280 content measure these resolve
       to exactly 617px, 144px and 519px; below that they scale together
       instead of overflowing. */
    grid-template-columns: 617fr 519fr;
    column-gap: 11.25%;
    align-items: end;
  }
  .sighting__head, .sighting__body { gap: 40px; }
  .sighting .btn { margin-top: 0; }
}

/* --------------------------------------------------------------------------
   About — numbered sections
   -------------------------------------------------------------------------- */

.about-sections { display: flex; flex-direction: column; gap: var(--section-gap); position: relative; }

.row {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-top: 24px;
}
@media (min-width: 1024px) {
  .row {
    display: grid;
    grid-template-columns: 278px 1fr;
    column-gap: 135px;
    padding-top: 32px;
  }
}
.row__body { max-width: 710px; }
.row__body--wide { max-width: 845px; }

/* "What we do" — Back. / Gather. / Build. */
.deeds { display: flex; flex-direction: column; }
.deed {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
  padding-top: 24px;
}
.deed:first-child { padding-top: 0; }
.deed:not(:first-child) { border-top: 1px solid var(--rule-on-light); }
.deed__term {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--fs-display-s);
  line-height: 1;
  color: var(--maghrib);
  margin: 0;
}
.deed__stack { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
@media (min-width: 1024px) {
  .deed {
    display: grid;
    grid-template-columns: 160px 1fr;
    column-gap: 32px;
    align-items: baseline;
    padding: 36px 0;
  }
  .deed:first-child { padding-top: 0; }
  .deed:last-child { padding-bottom: 0; }
  .deed__stack { gap: 16px; }
}

/* "How we work" — a stack of hairline-separated statements */
.tenets { display: flex; flex-direction: column; }
.tenets p { margin: 0; padding: 20px 0; }
.tenets p:first-child { padding-top: 0; }
.tenets p:last-child { padding-bottom: 0; }
.tenets p:not(:first-child) { border-top: 1px solid var(--rule-on-light); }
@media (min-width: 1024px) {
  .tenets p { padding: 24px 0; }
}

/* About CTA band.
   `isolation` is what lets the negative-z crescent paint above the band's own
   maroon background instead of behind it — same trick as the hero. */
.cta { position: relative; overflow: hidden; isolation: isolate; }
.cta__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: flex-start;
  max-width: 845px;
}
.cta__actions { display: flex; flex-direction: column; align-items: flex-start; gap: 32px; }
@media (min-width: 1024px) {
  .cta__inner { gap: 48px; }
  .cta__actions { flex-direction: row; align-items: center; gap: 40px; }
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.footer {
  background: var(--layl);
  color: var(--duha);
  padding: clamp(64px, 4.57vw + 46.2px, 112px) var(--gutter-x) clamp(32px, 1.52vw + 26.1px, 48px);
}
.footer__top {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-bottom: 56px;
}
.footer__monogram { height: clamp(40px, 1.52vw + 34.1px, 56px); width: auto; align-self: flex-start; }
@media (min-width: 1024px) {
  .footer__top { flex-direction: row; justify-content: space-between; align-items: center; padding-bottom: 88px; }
}
.footer__cols {
  display: flex;
  flex-direction: column;
  gap: 36px;
  padding-top: 32px;
}
@media (min-width: 1024px) {
  .footer__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gutter); padding-top: 40px; }
}
.footer__col { display: flex; flex-direction: column; gap: 14px; }
@media (min-width: 1024px) { .footer__col { gap: 18px; } }
.footer__col .label { color: var(--ink-on-dark); }
.footer__list { display: flex; flex-direction: column; gap: 12px; }
.footer__list a { width: fit-content; }
.footer__list a:hover, .footer__list a:focus-visible { text-decoration: underline; text-underline-offset: 4px; }
.footer__legal {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-top: 1px solid var(--rule-on-dark);
  margin-top: 48px;
  padding-top: 20px;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fs-label-sm);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 234, 217, 0.75);
}
@media (min-width: 1024px) {
  .footer__legal { flex-direction: row; justify-content: space-between; align-items: center; margin-top: 64px; padding-top: 24px; }
}
.footer__disclaimer {
  margin: 24px 0 0;
  max-width: 860px;
  font-size: 11px;
  line-height: 1.6;
  color: var(--ink-on-dark);
}
@media (min-width: 1024px) { .footer__disclaimer { margin-top: 28px; } }

/* --------------------------------------------------------------------------
   Motion — per the doc's "Motion — for the build" panel.
   Hero copy fades up over 1.2s once the photograph has loaded; hairline rules
   draw left to right as each section enters; nothing bouncy, nothing looping.
   -------------------------------------------------------------------------- */

.rule { position: relative; border-top: 1px solid transparent; }
.rule::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--rule-on-light);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.9s var(--ease);
}
.rule.is-in::before { transform: scaleX(1); }
.rule--on-dark::before { background: var(--rule-on-dark); }

.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 1.2s var(--ease), transform 1.2s var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }
/* Stagger the hero's own lines slightly so the headline leads */
.reveal--d1 { transition-delay: 0.08s; }
.reveal--d2 { transition-delay: 0.16s; }
.reveal--d3 { transition-delay: 0.24s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
  .reveal { opacity: 1; transform: none; }
  .rule::before { transform: scaleX(1); }
  .crescent circle { stroke-dashoffset: 0; }
}