/* =========================================================================
   SEVEN POINTS — Construction & General Trading
   Stylesheet

   1. Tokens          8. Proof band        15. Footer
   2. Base            9. Discipline strip  16. Gallery
   3. Layout          10. Services         17. Motion
   4. Type & labels   11. Statement        18. Tablet  (≤1099px)
   5. Buttons         12. Stories          19. Mobile  (≤767px)
   6. Navigation      13. Projects         20. Reduced motion
   7. Hero & About    14. Partners/Contact
   ========================================================================= */

/* 1. TOKENS ------------------------------------------------------------- */
:root {
  --black: #080808;
  --dark: #111111;
  --off: #F5F4F0;
  --yellow: #FCAF41;
  --grey: #8E8E8E;

  --ink-soft: #45443F;          /* body text on off-white */
  --ink-muted: #6B6A65;         /* secondary text on off-white */
  --line-light: rgba(8, 8, 8, .14);
  --line-dark: rgba(245, 244, 240, .14);

  --font: "Manrope", "Helvetica Neue", Arial, sans-serif;

  --pad: 5vw;                   /* page side padding */
  --max: 1500px;                /* content width */
  --nav-h: 88px;
  --nav-h-scrolled: 68px;

  /* Type scale */
  --fs-display: clamp(44px, 6.4vw, 124px);
  --fs-h1: clamp(44px, 6.2vw, 120px);
  --fs-h2: clamp(36px, 4.4vw, 80px);
  --fs-stage: clamp(40px, 4.6vw, 80px);
  --fs-num: clamp(64px, 7.4vw, 140px);

  --ease: cubic-bezier(.19, 1, .22, 1);   /* long, soft ease-out */
  --ease-io: cubic-bezier(.65, 0, .35, 1);
}

/* 2. BASE --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--black); }

body {
  margin: 0;
  background: var(--black);
  color: var(--off);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { list-style: none; padding: 0; }
em { font-style: normal; }

:focus-visible { outline: 2px solid var(--yellow); outline-offset: 3px; }

.skip-link {
  position: fixed; top: 12px; left: 12px; z-index: 300;
  padding: 12px 18px; background: var(--yellow); color: var(--black);
  font-weight: 700; font-size: 14px;
  transform: translateY(-160%); transition: transform .3s var(--ease);
}
.skip-link:focus { transform: none; }

/* 3. LAYOUT ------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: calc(var(--max) + var(--pad) * 2);
  margin-inline: auto;
  padding-inline: var(--pad);
}

section { position: relative; }

/* 4. TYPE & LABELS ------------------------------------------------------ */
.hero__title, .about__title, .services__title, .statement__title,
.story__title, .projects__title, .partners__title, .contact__title,
.contact__sub, .stage__title, .chapter__statement {
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: -.035em;
  line-height: .96;
}
.hero__title em, .about__title em, .services__title em,
.statement__title em, .contact__title em { color: var(--yellow); }

/* Small section label — "about us", "what we do" … */
.label {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 12px; line-height: 1; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--black);
}
.label::before { content: ""; width: 7px; height: 7px; background: var(--yellow); flex: none; }
.label--light { color: var(--off); }

/* Headline line masks (used by the reveal animation) */
.ln { display: block; overflow: hidden; padding-bottom: .07em; margin-bottom: -.07em; }
.ln > span { display: block; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  padding-bottom: 6px; border-bottom: 1px solid currentColor;
}
.link-arrow::after { content: "→"; transition: transform .4s var(--ease); }
.link-arrow:hover::after { transform: translateX(6px); }

/* 5. BUTTONS ------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 54px; padding: 0 30px;
  font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  border: 1px solid transparent; border-radius: 0;
  transition: background-color .35s ease, color .35s ease, border-color .35s ease;
  white-space: nowrap;
}
.btn--light { background: var(--off); color: var(--black); }
.btn--light:hover { background: var(--yellow); }
.btn--ghost-light { border-color: rgba(245, 244, 240, .45); color: var(--off); }
.btn--ghost-light:hover { border-color: var(--off); background: rgba(245, 244, 240, .08); }
.btn--dark { background: var(--black); color: var(--off); }
.btn--dark:hover { background: #262626; }
.btn--line-dark { border-color: var(--black); color: var(--black); }
.btn--line-dark:hover { background: var(--black); color: var(--yellow); }

/* 6. NAVIGATION --------------------------------------------------------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  height: var(--nav-h);
  color: var(--off);
  transition: height .5s var(--ease), background-color .5s ease, border-color .5s ease, transform .7s var(--ease), opacity .8s ease;
  border-bottom: 1px solid transparent;
}
.nav.is-scrolled {
  height: var(--nav-h-scrolled);
  background: rgba(8, 8, 8, .94);
  border-bottom-color: var(--line-dark);
}
.nav__inner {
  height: 100%;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  max-width: calc(var(--max) + var(--pad) * 2);
  margin-inline: auto; padding-inline: var(--pad);
}
.nav__brand { display: inline-flex; align-items: center; gap: 12px; justify-self: start; }
.nav__logo { width: auto; height: 54px; transition: height .5s var(--ease); }
.nav.is-scrolled .nav__logo { height: 42px; }

.nav__links { display: flex; gap: 40px; transition-delay: .08s; }
.nav__links a, .nav__contact {
  position: relative; font-size: 14px; font-weight: 500;
  color: rgba(245, 244, 240, .78); padding: 8px 0;
  transition: color .3s ease;
}
.nav__links a::after, .nav__contact::after {
  content: ""; position: absolute; left: 50%; bottom: 0;
  width: 4px; height: 4px; margin-left: -2px; background: var(--yellow);
  transform: scale(0); transition: transform .4s var(--ease);
}
.nav__links a:hover, .nav__contact:hover, .nav__links a.is-current, .nav__contact.is-current { color: var(--off); }
.nav__links a.is-current::after, .nav__contact.is-current::after { transform: scale(1); }
.nav__contact { justify-self: end; }

.nav__burger { display: none; }

/* Full-screen mobile menu */
.menu {
  position: fixed; inset: 0; z-index: 90;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: calc(64px + 7vh) var(--pad) 36px;
  background: var(--black);
  clip-path: inset(0 0 100% 0);
  visibility: hidden;
  transition: clip-path .8s var(--ease-io), visibility 0s linear .8s;
}
.menu-open .menu { clip-path: inset(0); visibility: visible; transition: clip-path .8s var(--ease-io), visibility 0s; }
.menu__links { display: flex; flex-direction: column; }
.menu__links a {
  display: flex; align-items: baseline; gap: 16px;
  padding: 10px 0; border-bottom: 1px solid var(--line-dark);
  font-size: clamp(34px, 10vw, 60px); font-weight: 500; line-height: 1.1;
  letter-spacing: -.03em; text-transform: uppercase;
  opacity: 0; transform: translateY(24px);
  transition: opacity .5s ease, transform .8s var(--ease), color .3s ease;
}
.menu__links a span { font-size: 12px; letter-spacing: .1em; color: var(--yellow); font-weight: 600; }
.menu__links a:hover { color: var(--yellow); }
.menu-open .menu__links a { opacity: 1; transform: none; }
.menu-open .menu__links a:nth-child(1) { transition-delay: .25s; }
.menu-open .menu__links a:nth-child(2) { transition-delay: .30s; }
.menu-open .menu__links a:nth-child(3) { transition-delay: .35s; }
.menu-open .menu__links a:nth-child(4) { transition-delay: .40s; }
.menu-open .menu__links a:nth-child(5) { transition-delay: .45s; }
.menu-open .menu__links a:nth-child(6) { transition-delay: .50s; }
.menu__foot { display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--grey); }
.menu__foot a { color: var(--off); }
.menu-open { overflow: hidden; }

/* 7. HERO --------------------------------------------------------------- */
.hero {
  height: 100vh; height: 100svh; min-height: 620px;
  overflow: hidden;
  color: var(--off);
  background: var(--black);
}
.hero__media { position: absolute; inset: 0; transform: scale(1.04); }
.hero__media img, .hero__media video { width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; }
.hero::before, .hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.hero::before {           /* cinematic grade */
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(8,8,8,.62) 0%, rgba(8,8,8,.08) 26%, rgba(8,8,8,.18) 52%, rgba(8,8,8,.88) 100%),
    linear-gradient(90deg, rgba(8,8,8,.45) 0%, rgba(8,8,8,0) 60%);
}
.hero::after {            /* deepens as the page scrolls (set by JS) */
  z-index: 1; background: var(--black); opacity: var(--shade, 0);
}
.hero__content {
  position: absolute; left: 0; right: 0; bottom: 8vh; z-index: 2;
}
.hero__title { font-size: var(--fs-display); margin: 26px 0 44px; }
.hero__row {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 40px;
  padding-top: 28px; border-top: 1px solid rgba(245, 244, 240, .22);
}
.hero__copy { max-width: 36ch; font-size: 17px; line-height: 1.6; color: rgba(245, 244, 240, .82); }
.hero__actions { display: flex; gap: 12px; }
.hero__cue {
  position: absolute; z-index: 2; right: var(--pad); top: 50%;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  transform: translateY(-50%);
  font-size: 11px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase;
  color: rgba(245, 244, 240, .7);
}
.hero__cue span { writing-mode: vertical-rl; }
.hero__cue i { position: relative; width: 1px; height: 64px; background: rgba(245, 244, 240, .25); overflow: hidden; }
.hero__cue i::after {
  content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 40%;
  background: var(--yellow); animation: cue 2.4s var(--ease-io) infinite;
}
.hero.is-offscreen .hero__cue i::after { animation-play-state: paused; }
@keyframes cue { 0% { transform: translateY(-100%); } 100% { transform: translateY(260%); } }

/* ABOUT ------------------------------------------------------------------
   The off-white panel is drawn by ::before, which widens from 92% to 100%
   as it rises over the hero (value --s is set by JS).                    */
.about {
  isolation: isolate;
  color: var(--black);
  padding: 20vh 0 6vh;
}
.about::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--off);
  transform: scaleX(var(--s, 1)); transform-origin: 50% 0;
}
.about__intro {
  display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px;
}
.about__intro .label { grid-column: 1 / -1; }
.about__title { grid-column: 1 / -1; font-size: var(--fs-h1); margin: 34px 0 0; }
.about__lead {
  grid-column: 7 / 12; margin-top: 56px;
  font-size: clamp(18px, 1.4vw, 22px); line-height: 1.55; color: var(--ink-soft);
}

.about__body {
  display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px;
  margin-top: 18vh;
}
.about__aside { grid-column: 1 / 4; position: relative; }
.chapters {
  position: sticky; top: calc(68px + 7vh);
  display: flex; flex-direction: column;
  border-top: 1px solid var(--line-light);
}
.chapters a {
  position: relative;
  display: flex; align-items: baseline; gap: 18px;
  padding: 18px 0 18px 0;
  border-bottom: 1px solid var(--line-light);
  font-size: clamp(17px, 1.35vw, 22px); font-weight: 500; letter-spacing: -.01em;
  color: #A3A29C;
  transition: color .4s ease, padding-left .6s var(--ease);
}
.chapters a span { font-size: 12px; font-weight: 600; letter-spacing: .08em; color: #A3A29C; transition: color .4s ease; }
.chapters a::before {
  content: ""; position: absolute; left: 0; top: 50%;
  width: 22px; height: 2px; background: var(--yellow);
  transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease);
}
.chapters a:hover { color: var(--black); }
.chapters a.is-active { color: var(--black); padding-left: 38px; }
.chapters a.is-active span { color: var(--black); }
.chapters a.is-active::before { transform: scaleX(1); }
.chapters__progress { display: none; }
@media (min-width: 1100px) {
  .chapters { padding-left: 30px; }
  .chapters a { padding-left: 0; }
  .chapters a.is-active { padding-left: 14px; }
  .chapters a::before { left: -30px; width: 0; }
  .chapters__progress {
    display: block; position: absolute; left: 0; top: 0; bottom: 0; width: 1px;
    background: var(--line-light);
  }
  .chapters__progress::before {           /* filled part of the line */
    content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 100%;
    background: var(--yellow); transform: scaleY(var(--p, 0)); transform-origin: top;
  }
  .chapters__progress i {                 /* travelling dot */
    position: absolute; left: -4px; top: calc(var(--p, 0) * 100%);
    width: 9px; height: 9px; margin-top: -4px; border-radius: 50%;
    background: var(--yellow); box-shadow: 0 0 0 6px rgba(252, 175, 65, .2), 0 0 18px rgba(252, 175, 65, .6);
  }
}

.about__chapters { grid-column: 5 / -1; }
.chapter { padding-bottom: 18vh; scroll-margin-top: 110px; }
.chapter:last-child { padding-bottom: 8vh; }
.chapter__label {
  display: flex; gap: 16px; align-items: baseline;
  padding-top: 18px; border-top: 1px solid var(--black);
  font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  margin-bottom: 48px;
}
.chapter__label span { color: var(--ink-muted); }
.chapter__statement { font-size: var(--fs-h2); }
.chapter__text { max-width: 46ch; margin-top: 36px; font-size: 18px; color: var(--ink-soft); }

/* Who we are */
.who__media { aspect-ratio: 16 / 10; overflow: hidden; background: #E4E2DC; }
.who__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.stats { display: grid; grid-template-columns: 1fr 1fr; margin-top: 64px; border-top: 1px solid var(--line-light); }
.stats__item {
  display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 14px;
  padding: 34px 24px 40px 0;
  border-bottom: 1px solid var(--line-light);
}
.stats__item:nth-child(even) { padding-left: 28px; border-left: 1px solid var(--line-light); }
.stats dd { font-size: var(--fs-num); font-weight: 300; line-height: .9; letter-spacing: -.05em; }
.stats dd em { color: var(--yellow); font-weight: 400; }
.stats dd.stats__word { font-size: clamp(48px, 5vw, 96px); font-weight: 400; letter-spacing: -.04em; line-height: 1.02; }
.stats dt { font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-muted); }

/* Vision and mission follow the same type and spacing as the About section. */
#who > .chapter__text { margin-top: 0; margin-bottom: 36px; }
.philosophy { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; margin-bottom: 48px; }
.philosophy__item h4 { font-size: 18px; font-weight: 600; margin-bottom: 12px; }
.philosophy__item p { font-size: 16px; line-height: 1.75; color: var(--ink-soft); }
html[dir="rtl"] .philosophy__item p { line-height: 1.85; }
@media (max-width: 767px) {
  .philosophy { grid-template-columns: minmax(0, 1fr); gap: 28px; margin-bottom: 36px; }
}

/* Values */
.values { border-top: 1px solid var(--line-light); }
.value {
  display: grid; grid-template-columns: 110px minmax(0, 1fr) minmax(0, 1.15fr); gap: 24px; align-items: baseline;
  padding: 38px 0; border-bottom: 1px solid var(--line-light);
}
.value__num { font-size: clamp(36px, 3.2vw, 56px); font-weight: 300; line-height: 1; letter-spacing: -.04em; color: var(--yellow); }
.value__title { font-size: clamp(24px, 2.2vw, 38px); font-weight: 500; text-transform: uppercase; letter-spacing: -.02em; line-height: 1; }
.value__text { font-size: 16px; color: var(--ink-soft); max-width: 38ch; }

/* Team & founders */
#team .ticker { margin-top: 64px; }
.founders { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 72px; max-width: 880px; }
.founder__frame { aspect-ratio: 4 / 5; overflow: hidden; background: #E4E2DC; }
.founder__photo { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; transition: transform 1.6s var(--ease); }
.founder:hover .founder__photo { transform: scale(1.03); }
.founder figcaption {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line-light);
}
.founder__name { font-weight: 500; font-size: clamp(20px, 1.7vw, 28px); letter-spacing: -.02em; }
.founder__role { font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-muted); white-space: nowrap; }

/* 8. PROOF BAND --------------------------------------------------------- */
.proof { background: var(--yellow); color: var(--black); padding: 12vh 0; }
.proof__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.proof__item {
  display: flex; flex-direction: column; gap: 18px;
  padding: 8px 2vw 8px 2vw;
  border-left: 1px solid rgba(8, 8, 8, .22);
}
.proof__item:first-child { padding-left: 0; border-left: 0; }
.proof__num { font-size: clamp(44px, 5vw, 86px); font-weight: 500; line-height: .9; letter-spacing: -.05em; text-transform: uppercase; }
.proof__label { font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }

/* 9. DISCIPLINE STRIP (ticker) ------------------------------------------ */
.ticker { overflow: hidden; white-space: nowrap; }
.ticker__track { display: inline-flex; animation: ticker 70s linear infinite; }
.ticker:hover .ticker__track, .ticker.is-offscreen .ticker__track { animation-play-state: paused; }
.ticker span {
  display: inline-flex; align-items: center; gap: 34px; padding-right: 34px;
  font-size: 13px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
}
.ticker span::after { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--yellow); }
.ticker--dark { background: var(--black); color: var(--off); padding: 24px 0; border-bottom: 1px solid var(--line-dark); }
.ticker--light { color: var(--black); padding: 22px 0; border-top: 1px solid var(--line-light); border-bottom: 1px solid var(--line-light); }
@keyframes ticker { to { transform: translateX(-50%); } }

/* 10. SERVICES ---------------------------------------------------------- */
.services { background: var(--dark); color: var(--off); padding: 18vh 0 10vh; }
.services__head {
  display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; align-items: end;
}
.services__head .label { grid-column: 1 / -1; }
.services__title { grid-column: 1 / 9; font-size: var(--fs-h1); margin-top: 34px; }
.services__intro { grid-column: 9 / 13; font-size: 17px; color: #A9A8A3; max-width: 34ch; }

.services__body {
  display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); column-gap: 6vw;
  margin-top: 14vh;
}
.services__media { position: relative; }
.services__frame {
  position: sticky; top: 12vh;
  height: 76vh; overflow: hidden; background: #1a1a1a;
}
.services__frame img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: scale(1.06);
  transition: opacity .6s ease, transform 1.1s var(--ease);
}
.services__frame img.is-active { opacity: 1; transform: none; }
.services__frame img[data-stage="0"] { object-position: 50% 50%; }
.services__frame img[data-stage="1"] { object-position: 50% 40%; }
.services__frame img[data-stage="2"] { object-position: 40% 50%; }
.services__frame img[data-stage="3"] { object-position: 50% 50%; }
.services__count {
  position: absolute; left: 24px; bottom: 20px; z-index: 2;
  font-size: 12px; font-weight: 600; letter-spacing: .18em; color: rgba(245,244,240,.75);
}
.services__current { color: var(--yellow); }
.services__frame::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 30%;
  background: linear-gradient(0deg, rgba(8,8,8,.55), rgba(8,8,8,0)); pointer-events: none;
}

.stage {
  min-height: 76vh;
  display: flex; flex-direction: column; justify-content: center;
  padding: 6vh 0;
  opacity: .22; transition: opacity .5s ease;
}
.stage.is-active { opacity: 1; }
.stage__img { display: none; }
.stage__num { font-size: 14px; font-weight: 600; letter-spacing: .16em; color: var(--yellow); }
.stage__title { font-size: var(--fs-stage); margin: 18px 0 40px; }
.stage__list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; border-top: 1px solid var(--line-dark); }
.stage__list li {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 0; border-bottom: 1px solid var(--line-dark);
  font-size: 15px; font-weight: 500;
}
.stage__list li::before { content: ""; width: 6px; height: 6px; background: var(--yellow); flex: none; }
.stage__text { margin-top: 32px; max-width: 44ch; font-size: 16px; color: #A9A8A3; }

/* 11. STATEMENT --------------------------------------------------------- */
.statement { background: var(--off); color: var(--black); padding: 20vh 0 16vh; overflow: hidden; }
.statement__title { font-size: var(--fs-display); }
.statement__foot {
  display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; align-items: end;
  margin-top: 12vh;
}
.statement__foot p { grid-column: 7 / 11; font-size: 18px; color: var(--ink-soft); }
.statement__foot .link-arrow { grid-column: 11 / 13; justify-self: end; white-space: nowrap; }

/* 12. STORIES ------------------------------------------------------------
   Desktop: pinned 100vh stage; each new photo is revealed from the bottom.
   Mobile: three stacked full-screen sections.                           */
.stories { background: var(--black); }
.story { position: relative; isolation: isolate; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden; color: var(--off); }
.story__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.story::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(8,8,8,.35) 0%, rgba(8,8,8,0) 35%, rgba(8,8,8,.25) 60%, rgba(8,8,8,.85) 100%);
}
.story__text {
  position: absolute; left: 0; right: 0; bottom: 9vh; z-index: 2;
  display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; align-items: end;
}
.story__count { grid-column: 1 / -1; font-size: 12px; font-weight: 600; letter-spacing: .2em; color: var(--yellow); margin-bottom: 26px; }
.story__title { grid-column: 1 / 8; font-size: clamp(52px, 8vw, 150px); }
.story__copy { grid-column: 9 / 13; font-size: 18px; line-height: 1.6; color: rgba(245,244,240,.86); max-width: 34ch; }
.stories__bar { display: none; }

.story:nth-child(1) .story__img { object-position: 50% 55%; }
.story:nth-child(2) .story__img { object-position: 50% 50%; }
.story:nth-child(3) .story__img { object-position: 35% 55%; }

/* 13. PROJECTS ---------------------------------------------------------- */
.projects { background: var(--off); color: var(--black); padding: 18vh 0 16vh; }
.projects__title { font-size: var(--fs-h1); margin-top: 34px; }
.projects__list {
  display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; row-gap: 16vh;
  margin-top: 12vh;
}
.project--wide { grid-column: 1 / 10; }
.project--narrow { grid-column: 6 / 13; }
.project__media {
  position: relative;
  display: block; width: 100%; overflow: hidden; background: #E4E2DC;
  aspect-ratio: 16 / 10;
}
.project--narrow .project__media { aspect-ratio: 3 / 2; }
.project__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.4s var(--ease);
}
.project__media:hover img, .project__media:focus-visible img { transform: scale(1.025); }
/* Each project's photo crop is set in Pages CMS → Projects → "Hero photo crop". */

.project__meta {
  display: grid; grid-template-columns: 64px minmax(0, 1fr) auto auto; column-gap: 24px; align-items: baseline;
  margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--line-light);
}
.project__index {
  justify-self: start;
  font-size: 13px; font-weight: 600; letter-spacing: .08em;
  padding-bottom: 4px; border-bottom: 2px solid var(--yellow);
}
.project__name h3 { font-size: clamp(22px, 2.2vw, 36px); font-weight: 500; letter-spacing: -.025em; line-height: 1.1; text-transform: uppercase; }
.project__name p { margin-top: 8px; font-size: 14px; color: var(--ink-muted); }
.project__place { font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-muted); }
.project__open {
  font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  padding-bottom: 4px; border-bottom: 1px solid currentColor;
  transition: color .3s ease;
}
.project__open::after { content: " →"; }
.project__open:hover { color: #9a6a14; }

/* 14. PARTNERS & CONTACT ------------------------------------------------ */
.partners { background: var(--black); color: var(--off); padding: 18vh 0; }
.partners__grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; }
.partners__head { grid-column: 1 / 7; }
.partners__title { font-size: clamp(38px, 5.2vw, 100px); margin-top: 34px; }
.partners__body { grid-column: 7 / 13; padding-top: 58px; }
.partners__lead { font-size: clamp(20px, 1.7vw, 26px); line-height: 1.5; color: var(--off); max-width: 32ch; }
.commitments { margin-top: 64px; border-top: 1px solid var(--line-dark); }
.commitments li {
  display: grid; grid-template-columns: 56px 1fr; column-gap: 16px;
  padding: 26px 0; border-bottom: 1px solid var(--line-dark);
}
.commitments span { grid-row: span 2; font-size: 12px; font-weight: 600; letter-spacing: .1em; color: var(--yellow); padding-top: 5px; }
.commitments strong { font-size: 19px; font-weight: 500; }
.commitments p { font-size: 15px; color: var(--grey); margin-top: 4px; }

/* Ready for real testimonials & logos */
.testimonials { display: grid; gap: 48px; margin-top: 64px; }
.testimonial blockquote { font-size: 20px; line-height: 1.55; margin: 24px 0; }
.testimonial__logo { height: 40px; width: auto; opacity: .85; }
.testimonial figcaption { display: flex; flex-direction: column; font-size: 14px; color: var(--grey); }
.testimonial figcaption strong { color: var(--off); font-weight: 600; }
.logos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin-top: 64px; background: var(--line-dark); }
.logos li { background: var(--black); display: grid; place-items: center; padding: 28px; }
.logos img { max-height: 40px; width: auto; opacity: .7; filter: grayscale(1); transition: opacity .3s; }
.logos li:hover img { opacity: 1; }

.contact { background: var(--yellow); color: var(--black); padding: 18vh 0 14vh; }
.contact__title { font-size: clamp(44px, 7.4vw, 136px); }
.contact__sub { font-size: clamp(34px, 4.6vw, 86px); margin-top: 22px; color: rgba(8, 8, 8, .42); }
.contact__row {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 40px;
  margin-top: 12vh; padding-top: 30px; border-top: 1px solid rgba(8, 8, 8, .25);
}
.contact__copy { max-width: 40ch; font-size: 17px; }
.contact__actions { display: flex; gap: 12px; }

/* 15. FOOTER ------------------------------------------------------------ */
.footer { background: var(--black); color: #CFCDC7; padding: 14vh 0 36px; font-size: 15px; }
.footer__grid { display: grid; grid-template-columns: 2fr repeat(4, 1fr); gap: 32px; }
.footer__logo { width: 132px; height: auto; }
.footer__name { margin-top: 26px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; font-size: 13px; color: var(--off); line-height: 1.8; }
.footer__name span { font-weight: 500; color: var(--grey); letter-spacing: .12em; }
.footer h4 { font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--grey); margin-bottom: 18px; }
.footer ul { display: flex; flex-direction: column; gap: 8px; }
.footer a { transition: color .3s ease; }
.footer a:hover { color: var(--yellow); }
.footer__bottom {
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  margin-top: 12vh; padding-top: 26px; border-top: 1px solid var(--line-dark);
  font-size: 13px; color: var(--grey);
}

/* 16. GALLERY ----------------------------------------------------------- */
.gallery {
  width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0;
  border: 0; background: var(--black); color: var(--off);
  overflow-y: auto; overscroll-behavior: contain;
}
.gallery::backdrop { background: var(--black); }
.gallery[open] { animation: galleryIn .6s var(--ease); }
@keyframes galleryIn { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }
.gallery__bar {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: center; gap: 24px;
  padding: 20px var(--pad);
  background: rgba(8, 8, 8, .88); border-bottom: 1px solid var(--line-dark);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.gallery__title { font-size: 15px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.gallery__count { font-size: 13px; color: var(--grey); margin-right: auto; white-space: nowrap; }
.gallery__close {
  min-height: 44px; padding: 0 22px; border: 1px solid rgba(245,244,240,.4);
  font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
}
.gallery__close:hover { border-color: var(--yellow); color: var(--yellow); }
.gallery__list { display: flex; flex-direction: column; gap: 4vw; padding: 5vw var(--pad) 8vw; }
.gallery__list figure { width: 100%; max-width: 1400px; margin-inline: auto; }
.gallery__list img { width: 100%; height: auto; background: #151515; }
.gallery__list figcaption { margin-top: 12px; font-size: 13px; color: var(--grey); }
.gallery-open { overflow: hidden; }

/* 17. MOTION -------------------------------------------------------------
   Only active when JavaScript runs (html.js) and motion is allowed.      */
.js [data-reveal="lines"] .ln > span {
  transform: translateY(110%);
  transition: transform .75s cubic-bezier(.16, 1, .3, 1);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.js [data-reveal="lines"].is-in .ln > span { transform: none; }

.js [data-reveal="fade"] { opacity: 0; transform: translateY(16px); transition: opacity .5s ease .1s, transform .6s cubic-bezier(.16, 1, .3, 1) .1s; }
.js [data-reveal="fade"].is-in { opacity: 1; transform: none; }

.js [data-reveal="img"] { clip-path: inset(14% 0 0 0); transition: clip-path .9s var(--ease); }
.js [data-reveal="img"] img { transform: scale(1.12); transition: transform 1.1s var(--ease); }
.js [data-reveal="img"].is-in { clip-path: inset(0); }
.js [data-reveal="img"].is-in img { transform: none; }

/* Pinned stories — desktop only */
@media (min-width: 900px) {
  .js .stories.is-pinned { height: 330vh; }
  .js .stories.is-pinned .stories__pin { position: sticky; top: 0; height: 100vh; overflow: hidden; }
  .js .stories.is-pinned .story { position: absolute; inset: 0; height: 100%; min-height: 0; }
  /* Each new photo slides up from below while its contents counter-move,
     so it reads as a reveal. The movement itself is in section 23. */
  .js .stories.is-pinned .story .ln > span { transform: translateY(108%); transition: transform .7s var(--ease); }
  .js .stories.is-pinned .story .ln + .ln > span { transition-delay: .06s; }
  .js .stories.is-pinned .story.is-active .ln > span { transform: none; }
  .js .stories.is-pinned .story__copy, .js .stories.is-pinned .story__count { opacity: 0; transition: opacity .45s ease; }
  .js .stories.is-pinned .story.is-active .story__copy,
  .js .stories.is-pinned .story.is-active .story__count { opacity: 1; transition-delay: .12s; }
  .js .stories.is-pinned .stories__bar {
    position: absolute; z-index: 3; right: var(--pad); top: 50%; transform: translateY(-50%);
    display: flex; flex-direction: column; gap: 8px;
  }
  .stories__bar i { position: relative; width: 2px; height: 56px; background: rgba(245,244,240,.25); overflow: hidden; }
  .stories__bar i::after {
    content: ""; position: absolute; inset: 0; background: var(--yellow);
    transform: scaleY(var(--f, 0)); transform-origin: top;
  }
}

/* 18. TABLET (≤1099px) -------------------------------------------------- */
@media (max-width: 1099px) {
  :root { --pad: 40px; --nav-h: 72px; --nav-h-scrolled: 72px; }
  .nav__inner { grid-template-columns: 1fr auto; }
  .nav__links, .nav__contact { display: none; }
  .nav__burger {
    display: grid; place-items: center; justify-self: end;
    position: relative; width: 44px; height: 44px; margin-right: -10px;
  }
  .nav__burger span {
    position: absolute; left: 11px; width: 22px; height: 1.5px; background: var(--off);
    transition: transform .5s var(--ease), top .5s var(--ease);
  }
  .nav__burger span:first-child { top: 17px; }
  .nav__burger span:last-child { top: 25px; }
  .menu-open .nav__burger span:first-child { top: 21px; transform: rotate(45deg); }
  .menu-open .nav__burger span:last-child { top: 21px; transform: rotate(-45deg); }
  .menu-open .nav { background: transparent; border-bottom-color: transparent; }

  .hero__cue { display: none; }

  .about__lead { grid-column: 4 / -1; }

  /* About chapters: sticky horizontal bar */
  .about__body { display: block; margin-top: 12vh; }
  .about__aside {
    position: sticky; top: var(--nav-h); z-index: 5;
    margin-inline: calc(var(--pad) * -1); padding-inline: var(--pad);
    background: var(--off);
  }
  .chapters {
    position: static; flex-direction: row; gap: 28px;
    overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    border-top: 0; border-bottom: 1px solid var(--line-light);
  }
  .chapters::-webkit-scrollbar { display: none; }
  .chapters a { flex: none; border-bottom: 0; padding: 18px 0 16px; font-size: 15px; gap: 10px; }
  .chapters a.is-active { padding-left: 0; }
  .chapters a::before { top: auto; bottom: -1px; width: 100%; }
  .chapters__progress { display: none !important; }
  .about__chapters { margin-top: 48px; }
  .chapter { scroll-margin-top: calc(var(--nav-h) + 72px); padding-bottom: 12vh; }

  .proof__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 48px; }
  .proof__item:nth-child(3) { padding-left: 0; border-left: 0; }

  .services__title { grid-column: 1 / -1; }
  .services__intro { grid-column: 1 / 9; margin-top: 32px; }

  .statement__foot p { grid-column: 1 / 10; }
  .statement__foot .link-arrow { grid-column: 10 / 13; }
  .partners__title { font-size: clamp(38px, 8vw, 80px); }

  .story__title { grid-column: 1 / -1; }
  .story__copy { grid-column: 1 / 9; margin-top: 24px; }

  .project--wide { grid-column: 1 / 12; }
  .project--narrow { grid-column: 4 / 13; }

  .partners__head, .partners__body { grid-column: 1 / -1; }
  .partners__body { padding-top: 56px; }

  .footer__grid { grid-template-columns: repeat(2, 1fr); row-gap: 48px; }
  .footer__brand { grid-column: 1 / -1; }
}

/* Services stack below 900px */
@media (max-width: 899px) {
  .services__body { display: block; margin-top: 10vh; }
  .services__media { display: none; }
  .stage { min-height: 0; opacity: 1; padding: 0 0 12vh; }
  .stage__img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; margin-bottom: 32px; }
}

/* 19. MOBILE (≤767px) --------------------------------------------------- */
@media (max-width: 767px) {
  :root { --pad: 20px; --nav-h: 64px; --nav-h-scrolled: 64px; }
  body { font-size: 15px; }

  .nav__logo, .nav.is-scrolled .nav__logo { height: 42px; }

  .hero { min-height: 560px; }
  .hero__media img { object-position: 38% 50%; }
  .hero__content { bottom: 28px; }
  .hero__title { margin: 20px 0 28px; }
  .hero__row { flex-direction: column; align-items: stretch; gap: 26px; padding-top: 22px; }
  .hero__copy { font-size: 16px; }
  .hero__actions { flex-direction: column; }
  .hero__actions .btn { width: 100%; }

  .about { padding-top: 14vh; }
  .about__title { margin-top: 26px; font-size: clamp(36px, 11.4vw, 60px); }
  /* On phones the About headline flows as one text block instead of fixed lines */
  .about__title .ln, .about__title .ln > span { display: inline; overflow: visible; padding: 0; margin: 0; }
  .js .about__title[data-reveal="lines"] .ln > span { transform: none; }
  .js .about__title[data-reveal="lines"] { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .8s var(--ease); }
  .js .about__title[data-reveal="lines"].is-in { opacity: 1; transform: none; }
  .about__lead { grid-column: 1 / -1; margin-top: 36px; font-size: 18px; }
  .chapters { gap: 22px; }
  .chapter__label { margin-bottom: 32px; }
  .who__media { aspect-ratio: 4 / 3; }
  .stats { margin-top: 40px; }
  .stats__item { padding: 26px 14px 28px 0; gap: 10px; }
  .stats__item:nth-child(even) { padding-left: 16px; }
  .stats dd { font-size: clamp(52px, 16vw, 72px); }
  .stats dd.stats__word { font-size: clamp(34px, 10vw, 46px); }
  .stats dt { font-size: 11px; letter-spacing: .1em; }

  .value { grid-template-columns: 56px minmax(0, 1fr); row-gap: 10px; padding: 28px 0; }
  .value__text { grid-column: 2; font-size: 15px; }
  .value__num { font-size: 32px; }
  .chapter__statement { font-size: clamp(32px, 9.4vw, 44px); }
  .chapter__text { font-size: 16px; }
  .founders { grid-template-columns: minmax(0, 1fr); margin-top: 48px; }
  .founder figcaption { flex-direction: column; gap: 6px; }

  .proof { padding: 10vh 0; }
  .proof__grid { row-gap: 40px; }
  .proof__item { gap: 12px; padding: 4px 0 4px 16px; }
  .proof__item:nth-child(odd) { padding-left: 0; border-left: 0; }
  .proof__num { font-size: clamp(32px, 10.5vw, 50px); }
  .proof__label { font-size: 11px; letter-spacing: .12em; }

  .ticker--dark { padding: 18px 0; }
  .ticker span { font-size: 12px; gap: 24px; padding-right: 24px; }

  .services { padding: 12vh 0 4vh; }
  .services__head { display: block; }
  .services__title { margin-top: 26px; }
  .services__intro { margin-top: 26px; font-size: 16px; }
  .stage__title { margin: 14px 0 28px; }
  .stage__list { grid-template-columns: 1fr; }
  .stage__text { font-size: 15px; margin-top: 24px; }

  .statement { padding: 14vh 0 12vh; }
  .statement__foot { display: block; margin-top: 8vh; }
  .statement__foot p { font-size: 16px; }
  .statement__foot .link-arrow { margin-top: 28px; }

  .story { height: 88svh; min-height: 520px; }
  .story__text { display: block; bottom: 36px; }
  .story__count { display: block; margin-bottom: 18px; }
  .story__title { font-size: clamp(46px, 13.6vw, 64px); }
  .story__copy { font-size: 16px; margin-top: 18px; }
  .story:nth-child(1) .story__img { object-position: 30% 55%; }
  .story:nth-child(3) .story__img { object-position: 25% 55%; }

  .projects { padding: 12vh 0; }
  .projects__list { display: flex; flex-direction: column; gap: 72px; margin-top: 8vh; }
  .project__media, .project--narrow .project__media { aspect-ratio: 4 / 3; }
  .project__meta { grid-template-columns: 48px minmax(0, 1fr); row-gap: 16px; column-gap: 12px; }
  .project__place { grid-column: 2; }
  .project__open { grid-column: 2; justify-self: start; }

  .partners { padding: 12vh 0; }
  .partners__body { padding-top: 40px; }
  .partners__lead { font-size: 19px; }
  .commitments { margin-top: 44px; }
  .commitments li { grid-template-columns: 40px 1fr; }
  .logos { grid-template-columns: repeat(2, 1fr); }

  .contact { padding: 12vh 0 10vh; }
  .contact__row { flex-direction: column; align-items: stretch; margin-top: 8vh; gap: 28px; }
  .contact__actions { flex-direction: column; }
  .contact__actions .btn { width: 100%; }

  .footer { padding-top: 10vh; }
  .footer__grid { grid-template-columns: 1fr 1fr; row-gap: 40px; column-gap: 20px; }
  .footer__bottom { margin-top: 8vh; flex-direction: column; }

  .gallery__bar { gap: 14px; padding: 12px var(--pad); }
  .gallery__title { font-size: 13px; }
}

/* 21. PREMIUM LAYER ------------------------------------------------------
   Hero drift, hiding navigation, project hover label, smooth scrolling.  */

/* Hero photo: settles from 1.04 to 1 while the intro panel lifts (runs once, then idle) */
.hero__media img { transition: transform 2.4s cubic-bezier(.16, 1, .3, 1); }

.nav.is-hidden { transform: translateY(-100%); }
.menu-open .nav.is-hidden { transform: none; }

/* Project hover label that follows the pointer */
.project__cursor {
  position: absolute; left: 0; top: 0; z-index: 2;
  display: grid; place-items: center;
  width: 104px; height: 104px; border-radius: 50%;
  background: var(--yellow); color: var(--black);
  font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0);
  transition: transform .5s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .project__media { cursor: none; }
  .project__media:hover .project__cursor { transform: translate(-50%, -50%) scale(1); }
}
@media (hover: none), (pointer: coarse) { .project__cursor { display: none; } }

/* Smooth-scroll library helpers */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* 22. INTRO — Seven Points logo animation ---------------------------------
   Markup: index.html (top of <body>)   Logic: sp-script.js ("Intro")
   Classes on <html>:
     .is-intro        intro is on screen (set in <head>, before first paint)
     .is-intro-full   first visit this session · .is-intro-short  repeat visit
     .is-intro-exit   panel lifts away          · .is-intro-reveal nav + headline appear
   Full timeline (seconds from first paint), about 7.2s in total:
     0.00–2.20  outline draws: building → 7 & tower → letters
     2.20–2.70  completed outline holds
     2.70–3.90  fills #FCAF41 (fill 0→1, stroke 1→0)
     3.90–5.00  solid logo holds, scale .98 → 1.025
     5.00–6.40  panel lifts (exit starts at 5.0s once the hero photo is ready; never after 6.0s)
     5.70–6.80  large logo fades, 1.025 → 1.06
     6.10–7.00  navbar, headline, text and buttons, lightly staggered
     7.20       loader removed from the page
   Only transform, opacity and SVG stroke/fill are animated. */
.loader { display: none; }
.is-intro .loader {
  display: block;
  position: fixed; inset: 0; z-index: 500;
  width: 100%; height: 100vh; height: 100svh;
}
.is-intro:not(.is-intro-exit) { overflow: hidden; }
.is-intro-exit .loader { pointer-events: none; }

.loader__panel {
  position: absolute; inset: 0;
  background: var(--black);
  transition: transform 1.4s cubic-bezier(.76, 0, .24, 1), opacity .25s ease;
}
.loader__stage {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  transition: opacity 1.1s cubic-bezier(.45, 0, .55, 1) .7s, transform 1.1s cubic-bezier(.45, 0, .55, 1) .7s;
}
.loader__logo {
  display: block;
  width: clamp(200px, 60vw, 270px); height: auto;
  overflow: visible;
  transform: scale(.98);
}
@media (min-width: 768px) { .loader__logo { width: clamp(320px, 24vw, 430px); } }

/* Each shape of the logo: invisible fill, yellow outline ready to be drawn.
   --len is the shape's real outline length (measured in index.html). */
.loader__part {
  fill: var(--yellow);
  fill-opacity: 0;
  stroke: var(--yellow);
  stroke-width: .5;
  stroke-linejoin: miter;
  stroke-dasharray: var(--len, 2000);
  stroke-dashoffset: var(--len, 2000);
}
.loader__part--type { fill: var(--loader-type-fill, var(--off)); stroke-width: .3; }
/* Wordmark fills off-white, as in the official white-text logo.
   For an all-yellow logo, add to :root →  --loader-type-fill: #FCAF41;  */

.is-intro-full .loader__part {
  animation:
    introDraw var(--t) cubic-bezier(.65, 0, .35, 1) var(--d) forwards,
    introFill 1.2s cubic-bezier(.45, 0, .55, 1) 2.7s forwards;
}
.is-intro-full .loader__logo { animation: introScale 1.1s cubic-bezier(.45, 0, .55, 1) 3.9s forwards; }
@keyframes introDraw  { to { stroke-dashoffset: 0; } }
@keyframes introFill  { to { fill-opacity: 1; stroke-opacity: 0; } }
@keyframes introScale { from { transform: scale(.98); } to { transform: scale(1.025); } }

/* Exit: panel lifts, large logo fades (it never flies to the navbar) */
.is-intro-full.is-intro-exit .loader__panel { transform: translate3d(0, -100%, 0); }
.is-intro-exit .loader__stage { opacity: 0; transform: scale(1.035); }

/* Repeat visit: no logo, a 250ms fade only */
.is-intro-short .loader__stage { display: none; }
.is-intro-short.is-intro-exit .loader__panel { opacity: 0; }

/* What waits behind the intro */
.nav__brand, .nav__links, .nav__contact, .nav__burger { transition: opacity .7s ease, transform .9s cubic-bezier(.16, 1, .3, 1); }
.nav__contact, .nav__burger { transition-delay: .16s; }
.is-intro:not(.is-intro-reveal) .nav__brand,
.is-intro:not(.is-intro-reveal) .nav__links,
.is-intro:not(.is-intro-reveal) .nav__contact,
.is-intro:not(.is-intro-reveal) .nav__burger { opacity: 0; transform: translateY(-8px); }
.is-intro:not(.is-intro-exit) .hero__media img { transform: scale(1.04); }
/* Hero entrance order: line 1 → line 2 → description → buttons */
.hero__title .ln > span { transition-delay: calc(.2s + var(--i, 0) * .14s) !important; }
.hero__copy { transition-delay: .5s !important; }
.hero__actions { transition-delay: .62s !important; }

/* 20. REDUCED MOTION ---------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .js [data-reveal] , .js [data-reveal] img, .js [data-reveal] .ln > span { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .ticker { white-space: normal; }
  .ticker__track { animation: none; flex-wrap: wrap; row-gap: 10px; }
  .hero__media { transform: none !important; }
  .loader { display: none !important; }
  .is-intro .nav__brand, .is-intro .nav__links, .is-intro .nav__contact, .is-intro .nav__burger { opacity: 1 !important; transform: none !important; }
  .stage { opacity: 1; }
}

/* 23. SCROLL EFFECTS -------------------------------------------------------
   The motion that follows the scroll, as CSS scroll-driven animations: the
   browser runs them in step with the scroll on the graphics card, with no
   script and no redrawing while the page moves. (A script used to move
   these parts frame by frame; on wide screens that made the browser redraw
   large areas constantly, which showed up as flicker and stutter.) Each
   animation reproduces the motion the script used to make.
   Browsers without this feature (older Safari, Firefox) skip this section:
   sp-script.js then moves the hero, About panel and statement as before,
   and the photo section is stacked as on phones.                        */
@supports (animation-timeline: view()) {
  @keyframes sp-hero-media  { from { transform: translate3d(0, 0, 0) scale(1.04); } to { transform: translate3d(0, 16vh, 0) scale(1.08); } }
  @keyframes sp-hero-copy   { from { transform: translate3d(0, 0, 0); opacity: 1; } 80% { opacity: 0; } to { transform: translate3d(0, -70px, 0); opacity: 0; } }
  @keyframes sp-hero-shade  { from { opacity: 0; } to { opacity: .65; } }
  @keyframes sp-panel       { from { transform: scaleX(.92); } to { transform: scaleX(1); } }
  @keyframes sp-drift-right { from { transform: translate3d(-4.5vw, 0, 0); } to { transform: translate3d(4.5vw, 0, 0); } }
  @keyframes sp-drift-left  { from { transform: translate3d(4.5vw, 0, 0); } to { transform: translate3d(-4.5vw, 0, 0); } }
  @keyframes sp-slide-in    { from { translate: 0 100vh; } to { translate: 0 0; } }
  @keyframes sp-counter     { from { translate: 0 -100vh; } to { translate: 0 0; } }
  @keyframes sp-zoom-first  { from { scale: 1.0625; } to { scale: 1.0125; } }
  @keyframes sp-zoom        { from { scale: 1.08; } to { scale: 1.0125; } }

  @media (prefers-reduced-motion: no-preference) {
    .hero      { view-timeline-name: --sp-hero; }
    .about     { view-timeline-name: --sp-about; }
    .statement { view-timeline-name: --sp-statement; }
    .stories   { view-timeline-name: --sp-stories; }

    /* Hero, while it scrolls away: the photo drifts down 16vh and grows
       1.04 → 1.08, the words lift 70px and are gone by 80%, the shade deepens */
    .hero__media {
      animation: sp-hero-media auto linear both;
      animation-timeline: --sp-hero; animation-range: exit 0% exit 100%;
      will-change: transform;   /* draw the photo once; the zoom then costs nothing */
    }
    .hero__content {
      animation: sp-hero-copy auto linear both;
      animation-timeline: --sp-hero; animation-range: exit 0% exit 100%;
    }
    .hero::after {
      animation: sp-hero-shade auto linear both;
      animation-timeline: --sp-hero; animation-range: exit 0% exit 100%;
    }

    /* About: the light panel widens from 92% to full width as it rises
       (complete when its top edge is 15% below the top of the screen) */
    .about::before {
      animation: sp-panel auto linear both;
      animation-timeline: --sp-about; animation-range: entry 0% entry 85%;
    }

    /* Statement: lines slide sideways in alternating directions while it crosses the screen */
    .statement__title .ln:nth-child(odd) {
      animation: sp-drift-right auto linear both;
      animation-timeline: --sp-statement; animation-range: cover 0% cover 100%;
    }
    .statement__title .ln:nth-child(even) {
      animation: sp-drift-left auto linear both;
      animation-timeline: --sp-statement; animation-range: cover 0% cover 100%;
    }
  }

  /* Pinned photos (desktop). 0% → 100% is the scroll through the pinned section.
     Photos 2 and 3 slide up from below while their picture, shade and words
     counter-move; every picture eases out of a slight zoom. */
  @media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
    .js .stories.is-pinned .story,
    .js .stories.is-pinned .story__img,
    .js .stories.is-pinned .story__text,
    .js .stories.is-pinned .story::after {
      animation-duration: auto; animation-timing-function: linear; animation-fill-mode: both;
    }
    /* draw each photo once; sliding and zooming it then costs nothing */
    .js .stories.is-pinned .story,
    .js .stories.is-pinned .story__img { will-change: transform; }
    /* Photo 1: zoom 1.0625 → 1.0125 during the first third */
    .js .stories.is-pinned .story:nth-child(1) .story__img {
      animation-name: sp-zoom-first;
      animation-timeline: --sp-stories; animation-range: contain 0% contain 33.333%;
    }
    /* Photo 2: slides in from 23.3% to 43.3%; zoom 1.08 → 1.0125 from 21.7% to 66.7% */
    .js .stories.is-pinned .story:nth-child(2) {
      animation-name: sp-slide-in;
      animation-timeline: --sp-stories; animation-range: contain 23.333% contain 43.333%;
    }
    .js .stories.is-pinned .story:nth-child(2) .story__text,
    .js .stories.is-pinned .story:nth-child(2)::after {
      animation-name: sp-counter;
      animation-timeline: --sp-stories; animation-range: contain 23.333% contain 43.333%;
    }
    .js .stories.is-pinned .story:nth-child(2) .story__img {
      animation-name: sp-counter, sp-zoom;
      animation-timeline: --sp-stories, --sp-stories;
      animation-range: contain 23.333% contain 43.333%, contain 21.667% contain 66.667%;
    }
    /* Photo 3: slides in from 56.7% to 76.7%; zoom from 55% to 100% */
    .js .stories.is-pinned .story:nth-child(3) {
      animation-name: sp-slide-in;
      animation-timeline: --sp-stories; animation-range: contain 56.667% contain 76.667%;
    }
    .js .stories.is-pinned .story:nth-child(3) .story__text,
    .js .stories.is-pinned .story:nth-child(3)::after {
      animation-name: sp-counter;
      animation-timeline: --sp-stories; animation-range: contain 56.667% contain 76.667%;
    }
    .js .stories.is-pinned .story:nth-child(3) .story__img {
      animation-name: sp-counter, sp-zoom;
      animation-timeline: --sp-stories, --sp-stories;
      animation-range: contain 56.667% contain 76.667%, contain 55% contain 100%;
    }
  }
}