/* ==========================================================================
   Python Group — homepage
   Art direction: white gallery mat, hairline architecture, bronze used sparingly,
   charcoal for the dark passages. One family (Manrope), three weights.
   ========================================================================== */

/* 1. Tokens ---------------------------------------------------------------- */
@property --intro-s { syntax: '<number>'; inherits: true; initial-value: 1; }

:root {
  --bronze: #765B40;
  --white: #FFFFFF;
  --charcoal: #282724;
  --grey: #A8A7A4;            /* decoration + text on charcoal only */
  --ink-2: #6A6965;           /* secondary text on white (5.4:1) */
  --ink-3: #8D8C88;           /* large inactive type on white (3.4:1) */
  --hair: rgba(40, 39, 36, .16);
  --hair-dark: rgba(255, 255, 255, .18);

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

  --g: clamp(20px, 3.2vw, 56px);          /* page gutter */
  --cg: clamp(12px, 1.6vw, 28px);         /* column gap */
  --hh: 72px;                             /* header height */
  --sec: clamp(96px, 14vw, 220px);        /* section rhythm */

  --ease: cubic-bezier(.16, .84, .24, 1);
  --ease-io: cubic-bezier(.76, 0, .24, 1);
}

@media (max-width: 720px) { :root { --hh: 64px; } }

/* 2. Base ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--hh); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
html.menu-open, html.intro-lock { overflow: hidden; }

body {
  margin: 0;
  background: var(--white);
  color: var(--charcoal);
  font-family: var(--font);
  font-weight: 400;
  font-size: clamp(16px, 1.05vw + 8px, 18px);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

:focus-visible { outline: 2px solid var(--bronze); outline-offset: 4px; }
.dark :focus-visible, .menu :focus-visible, .intro :focus-visible { outline-color: var(--white); }

.skip {
  position: fixed; left: var(--g); top: -80px; z-index: 300;
  background: var(--charcoal); color: var(--white); padding: .7rem 1rem; font-size: .85rem;
}
.skip:focus { top: 12px; }

.wrap { padding-inline: var(--g); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--cg); }

.dark { background: var(--charcoal); color: var(--white); }

/* 3. Type ------------------------------------------------------------------ */
.label {
  font-size: .7rem; font-weight: 500; letter-spacing: .24em; text-transform: uppercase;
  color: var(--ink-2); display: flex; gap: 1.1em; align-items: baseline;
}
.label span { color: var(--bronze); }
.dark .label { color: var(--grey); }
.dark .label span { color: var(--white); }

.display {
  font-weight: 300; letter-spacing: -.018em; line-height: 1.14;
  font-size: clamp(1.7rem, 2.7vw, 3rem);
}
.display--sm { font-size: clamp(1.45rem, 2.1vw, 2.3rem); line-height: 1.18; letter-spacing: -.014em; }
.display--xl { font-size: clamp(2rem, 3.8vw, 4.2rem); line-height: 1.08; letter-spacing: -.02em; }

/* Masked line reveal. Lines are authored in markup for considered breaks. */
.ln { display: block; overflow: hidden; padding-bottom: .14em; margin-bottom: -.14em; }
.ln > span { display: block; }
.ln--indent { padding-left: clamp(0px, 7vw, 8.5rem); }

.link-quiet, .link-arrow {
  font-size: .7rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  padding-bottom: .35em; transition: background-size .6s var(--ease);
}
.link-quiet:hover, .link-arrow:hover { background-size: 100% 1px; }
.link-arrow::after { content: '\2192'; margin-left: .9em; display: inline-block; transition: transform .5s var(--ease); }
.link-arrow:hover::after { transform: translateX(6px); }

/* Placeholders: unmistakable, easy to find and remove */
.ph { font-size: .8rem; line-height: 1.5; color: var(--bronze); }
.ph b {
  font-size: .62rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
  border: 1px dashed currentColor; padding: .15em .55em; margin-right: .7em; white-space: nowrap;
}
.dark .ph { color: var(--grey); }

/* 4. Opening sequence ------------------------------------------------------ */
.intro { display: none; }
.is-intro .intro {
  display: grid; place-items: center; position: fixed; inset: 0; z-index: 200;
  background: var(--white); clip-path: inset(0);
}
.intro__mark {
  height: clamp(64px, 9vw, 96px); width: auto; mix-blend-mode: multiply;
  opacity: 0; transform: translateY(14px);
  animation: intro-in 1.1s .15s var(--ease) forwards;
}
.intro__line {
  position: absolute; left: 50%; top: calc(50% + clamp(62px, 7vw, 88px));
  width: min(180px, 34vw); height: 1px; background: var(--bronze);
  transform: translateX(-50%) scaleX(0);
  animation: intro-line 1.3s .35s var(--ease-io) forwards;
}
.intro.is-leaving { clip-path: inset(0 0 100% 0); transition: clip-path 1.15s var(--ease-io); }
@keyframes intro-in { to { opacity: 1; transform: none; } }
@keyframes intro-line { to { transform: translateX(-50%) scaleX(1); } }

/* 5. Header + menu --------------------------------------------------------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100; height: var(--hh);
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; column-gap: clamp(20px, 3vw, 48px);
  padding-inline: var(--g); background: var(--white);
  border-bottom: 1px solid transparent;
  transition: transform .7s var(--ease), border-color .4s;
}
.site-header.is-scrolled { border-bottom-color: var(--hair); }
.site-header.is-hidden { transform: translateY(-100%); }
.has-motion:not(.hero-ready) .site-header { transform: translateY(-100%); }

.site-header__brand img { height: 36px; width: auto; mix-blend-mode: multiply; }
.site-header__descriptor {
  font-size: .7rem; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--ink-2);
}
.site-header__actions { display: flex; align-items: center; gap: clamp(20px, 3vw, 44px); }

.menu-toggle { display: inline-flex; align-items: center; gap: .9rem; padding: .6rem 0; }
.menu-toggle__label { font-size: .7rem; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; }
.menu-toggle__bars { position: relative; width: 26px; height: 10px; }
.menu-toggle__bars i {
  position: absolute; left: 0; width: 100%; height: 1px; background: currentColor;
  transition: transform .6s var(--ease), top .6s var(--ease);
}
.menu-toggle__bars i:first-child { top: 0; }
.menu-toggle__bars i:last-child { top: 9px; }
.menu-open .menu-toggle__bars i:first-child { top: 4px; transform: rotate(45deg); }
.menu-open .menu-toggle__bars i:last-child { top: 4px; transform: rotate(-45deg); }

@media (max-width: 720px) {
  .site-header { grid-template-columns: 1fr auto; }
  .site-header__descriptor { display: none; }
  .site-header__brand img { height: 32px; }
}
@media (max-width: 440px) { .site-header__actions .link-quiet { display: none; } }

.menu {
  position: fixed; inset: var(--hh) 0 0 0; z-index: 90;
  background: var(--charcoal); color: var(--white);
  clip-path: inset(0 0 100% 0); visibility: hidden;
  transition: clip-path .95s var(--ease-io), visibility 0s .95s;
  overflow-y: auto;
}
.menu-open .menu { clip-path: inset(0); visibility: visible; transition: clip-path .95s var(--ease-io), visibility 0s; }
.menu__inner {
  min-height: 100%; padding: clamp(28px, 6vh, 72px) var(--g) clamp(28px, 5vh, 56px);
  display: grid; grid-template-columns: minmax(0, 1fr); column-gap: clamp(32px, 6vw, 120px);
}
.menu__main { display: flex; flex-direction: column; justify-content: space-between; gap: 3rem; min-height: 100%; }
.menu__preview { display: none; }
@media (min-width: 900px) {
  .menu__inner { grid-template-columns: minmax(0, 1.5fr) minmax(0, .8fr); }
  .menu__preview {
    display: block; position: sticky; top: 0; align-self: start; overflow: hidden; background: #1d1c1a;
    height: min(calc(100svh - var(--hh) - 8rem), 640px); margin-top: .4rem;
  }
  .menu__preview img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
    clip-path: inset(0 0 100% 0); transform: scale(1.14);
    transition: clip-path 1s var(--ease-io), transform 1.6s var(--ease);
  }
  .menu__preview img.is-active { clip-path: inset(0); transform: scale(1); z-index: 1; }
  .menu__nav a { transition: transform .9s var(--ease), color .4s, padding-left .6s var(--ease), opacity .4s; }
  .menu__nav:hover a:not(:hover):not(:focus-visible) { opacity: .38; }
}
.menu__nav li { overflow: hidden; border-top: 1px solid var(--hair-dark); }
.menu__nav li:last-child { border-bottom: 1px solid var(--hair-dark); }
.menu__nav a {
  display: flex; align-items: baseline; gap: clamp(16px, 3vw, 48px);
  font-weight: 300; letter-spacing: -.015em; line-height: 1.2;
  font-size: clamp(1.35rem, 2.5vw, 2.5rem); padding: .32em 0;
  transform: translateY(105%); transition: transform .9s var(--ease), color .4s, padding-left .6s var(--ease);
}
.menu-open .menu__nav a { transform: none; }
.menu-open .menu__nav li:nth-child(1) a { transition-delay: .25s, 0s, 0s; }
.menu-open .menu__nav li:nth-child(2) a { transition-delay: .31s, 0s, 0s; }
.menu-open .menu__nav li:nth-child(3) a { transition-delay: .37s, 0s, 0s; }
.menu-open .menu__nav li:nth-child(4) a { transition-delay: .43s, 0s, 0s; }
.menu-open .menu__nav li:nth-child(5) a { transition-delay: .49s, 0s, 0s; }
.menu-open .menu__nav li:nth-child(6) a { transition-delay: .55s, 0s, 0s; }
.menu__nav a span { font-size: .7rem; letter-spacing: .24em; color: var(--grey); font-weight: 500; min-width: 2.4em; }
@media (hover: hover) {
  .menu__nav a:hover { padding-left: clamp(8px, 1.5vw, 24px); }
}
.menu__foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; flex-wrap: wrap; }
.menu__tag { font-weight: 400; font-size: 1.1rem; letter-spacing: -.01em; }
.menu__meta { font-size: .85rem; color: var(--grey); }

/* 6. Hero ------------------------------------------------------------------ */
.hero { position: relative; height: 100svh; min-height: 560px; }
.hero__frame {
  --in: var(--g);
  position: absolute; inset: var(--hh) 0 0 0; overflow: hidden;
  clip-path: inset(var(--in));
  background: var(--charcoal);
}
.has-motion:not(.hero-ready) .hero__frame { clip-path: inset(calc(var(--in) + 14svh) var(--in) var(--in)); }
.has-motion:not(.hero-settled) .hero__frame { transition: clip-path 1.9s var(--ease-io); }

.hero__media { position: absolute; inset: -6% 0; }
.hero__media img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%;
  transform: translate3d(var(--mx, 0px), calc(var(--ty, 0px) + var(--my, 0px)), 0) scale(calc(var(--sc, 1.04) * var(--intro-s)));
  will-change: transform;
}
html { --intro-s: 1; }
html.has-motion:not(.hero-ready) { --intro-s: 1.18; }
html.has-motion { transition: --intro-s 3s var(--ease); }

.hero__shade {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(26, 25, 23, .62) 0%, rgba(26, 25, 23, .22) 38%, rgba(26, 25, 23, 0) 62%);
}
.hero__content {
  position: absolute; z-index: 2; color: var(--white);
  left: calc(var(--g) + clamp(20px, 3vw, 48px)); right: calc(var(--g) + clamp(20px, 3vw, 48px));
  bottom: calc(var(--g) + clamp(20px, 3.4vw, 52px));
  display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem;
}
.hero__title {
  font-weight: 300; letter-spacing: -.02em; line-height: 1.08;
  font-size: clamp(1.9rem, 3.7vw, 4.1rem);
}
.hero__title .ln--indent { padding-left: clamp(0px, 4vw, 5rem); }
.hero__aside { font-size: .82rem; line-height: 1.55; text-align: right; flex: none; max-width: 22ch; padding-bottom: .6rem; }
.hero__note { margin-top: .6rem; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; opacity: .7; font-weight: 500; }
.hero__scroll { display: block; width: 1px; height: 54px; margin: 1.4rem 0 0 auto; background: rgba(255, 255, 255, .35); position: relative; overflow: hidden; }
.hero__scroll::after { content: ''; position: absolute; inset: 0; background: var(--white); transform: translateY(-100%); animation: scroll-cue 2.4s var(--ease-io) infinite; }
@keyframes scroll-cue { 0% { transform: translateY(-100%); } 55% { transform: translateY(0); } 100% { transform: translateY(100%); } }

.has-motion .hero__title .ln > span { transform: translateY(112%); transition: transform 1.3s var(--ease) calc(.55s + var(--i, 0) * .14s); }
.has-motion.hero-ready .hero__title .ln > span { transform: none; }
.has-motion .hero__aside { opacity: 0; transform: translateY(14px); }
.has-motion.hero-ready .hero__aside { opacity: 1; transform: none; transition: opacity 1.2s 1.3s var(--ease), transform 1.2s 1.3s var(--ease); }

@media (max-width: 720px) {
  .hero__content { flex-direction: column; align-items: flex-start; gap: 1.4rem; }
  .hero__aside { text-align: left; max-width: none; padding: 0; }
  .hero__scroll { display: none; }
  .hero__media img { object-position: 12% 50%; }
  .hero__title { font-size: clamp(1.9rem, 8vw, 2.9rem); }
  .hero__title .ln--indent { padding-left: 1.1em; }
}

/* 7. Statement ------------------------------------------------------------- */
.statement { padding-block: var(--sec) calc(var(--sec) * .55); }
.statement__label { grid-column: 1 / 4; padding-top: .9rem; }
.statement__text {
  grid-column: 4 / 13;
  font-weight: 300; letter-spacing: -.012em; line-height: 1.34;
  font-size: clamp(1.3rem, 2.15vw, 2.4rem);
}
.statement__foot {
  grid-column: 4 / 13; margin-top: clamp(40px, 6vw, 96px);
  display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem;
  border-top: 1px solid var(--hair); padding-top: 1.6rem;
  font-size: .95rem; color: var(--ink-2);
}
.has-motion .statement__text .w { opacity: .14; transition: opacity .5s var(--ease); }
.has-motion .statement__text .w.on { opacity: 1; }

@media (max-width: 899px) {
  .statement__label, .statement__text, .statement__foot { grid-column: 1 / -1; }
  .statement__label { margin-bottom: 2rem; }
}

/* 8. Principles ------------------------------------------------------------ */
.principles { padding-bottom: var(--sec); }
.principles__list { grid-column: 1 / 7; }
.principles__media { grid-column: 8 / 13; }

.pr { min-height: 72svh; display: flex; flex-direction: column; justify-content: center; border-top: 1px solid var(--hair); padding-block: 3rem; }
.pr:last-child { border-bottom: 1px solid var(--hair); }
.pr__n { font-size: .7rem; font-weight: 500; letter-spacing: .24em; color: var(--bronze); margin-bottom: 1.4rem; }
.pr__title {
  font-weight: 300; letter-spacing: -.015em; line-height: 1.2; font-size: clamp(1.35rem, 2.1vw, 2.3rem);
  transition: color .7s var(--ease);
}
.js .pr .pr__title { color: var(--ink-3); }
.js .pr.is-active .pr__title { color: var(--charcoal); }
.pr__copy { margin-top: 1.4rem; max-width: 34ch; color: var(--ink-2); }
.pr__inline { display: none; }

.principles__sticky {
  position: sticky; top: calc(var(--hh) + var(--g));
  height: calc(100svh - var(--hh) - var(--g) * 2); min-height: 420px;
  display: flex; flex-direction: column; gap: 1rem;
}
.principles__stack { position: relative; flex: 1; overflow: hidden; background: var(--charcoal); }
.principles__stack img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  clip-path: inset(0 0 100% 0); transform: scale(1.12);
  transition: clip-path 1.2s var(--ease-io), transform 1.8s var(--ease);
}
.principles__stack img.is-active { clip-path: inset(0); transform: scale(1); z-index: 1; }
.principles__stack img[data-pr-img="0"] { object-position: 52% 50%; }
.principles__cap { font-size: .72rem; letter-spacing: .16em; font-weight: 500; text-transform: uppercase; color: var(--ink-2); display: flex; justify-content: space-between; }
.principles__cap em { font-style: normal; letter-spacing: .14em; }
.principles__cap b { font-weight: 500; }
.principles__cap span { color: var(--bronze); }

@media (max-width: 899px) {
  .principles__list { grid-column: 1 / -1; }
  .principles__media { display: none; }
  .pr { min-height: 0; padding-block: 2.4rem 2.8rem; }
  .js .pr .pr__title { color: var(--charcoal); }
  .pr__inline { display: block; margin-top: 2rem; aspect-ratio: 5 / 4; overflow: hidden; }
  .pr__inline img { width: 100%; height: 100%; object-fit: cover; }
}

/* 9. Full-bleed band ------------------------------------------------------- */
.band { position: relative; height: 100svh; min-height: 520px; overflow: hidden; background: var(--charcoal); color: var(--white); }
.band__media { position: absolute; inset: -10% 0; transform: translate3d(0, var(--ty, 0px), 0); will-change: transform; }
.band__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.band__fade { position: absolute; inset: auto 0 0 0; height: 34%; background: linear-gradient(to top, var(--charcoal), rgba(40, 39, 36, 0)); pointer-events: none; }
.band::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to right, rgba(26, 25, 23, .5), rgba(26, 25, 23, 0) 60%); pointer-events: none; z-index: 1; }
.band__content { position: absolute; z-index: 2; inset: auto 0 clamp(36px, 6vw, 88px) 0; display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; }
.band__line { font-weight: 300; letter-spacing: -.016em; line-height: 1.12; font-size: clamp(1.5rem, 2.7vw, 3rem); }
.band__cap { font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 500; opacity: .75; white-space: nowrap; padding-bottom: .8rem; }
@media (max-width: 720px) { .band__content { flex-direction: column; align-items: flex-start; gap: 1rem; } .band__cap { padding: 0; } }

/* 10. Services ------------------------------------------------------------- */
.services { padding-block: calc(var(--sec) * .8) var(--sec); }
.services__head { margin-bottom: clamp(56px, 9vw, 150px); }
.services__head .label { grid-column: 1 / 4; padding-top: 1rem; }
.services__head .display { grid-column: 4 / 13; }

.services__body { align-items: start; row-gap: 5rem; }
.svc--a { grid-column: 1 / 8; }
.svc--b { grid-column: 9 / 13; margin-top: clamp(80px, 16vw, 260px); }

.svc__fig { position: relative; overflow: hidden; background: #1d1c1a; }
.svc--a .svc__fig { aspect-ratio: 5 / 4; }
.svc--b .svc__fig { aspect-ratio: 4 / 5; }
.reveal__inner { position: absolute; inset: -7% 0; transform: translate3d(0, var(--ty, 0px), 0); will-change: transform; }
.reveal__inner img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s var(--ease); }
.svc--a .reveal__inner img { object-position: 50% 40%; }

.svc__text { margin-top: 1.8rem; max-width: 40ch; }
.svc__n { font-size: .7rem; font-weight: 500; letter-spacing: .24em; color: var(--grey); }
.svc__text h3 { margin: .9rem 0 .9rem; font-weight: 300; letter-spacing: -.012em; line-height: 1.2; font-size: clamp(1.25rem, 1.7vw, 1.8rem); }
.svc__text > p:not(.svc__n):not(.ph) { color: #D6D5D2; }
.svc__text .ph { margin-top: 1.2rem; }

@media (hover: hover) { .svc__fig:hover .reveal__inner img { transform: scale(1.045); } }

@media (max-width: 899px) {
  .services__head .label, .services__head .display { grid-column: 1 / -1; }
  .services__head .label { margin-bottom: 2rem; }
  .svc--a, .svc--b { grid-column: 1 / -1; }
  .svc--b { margin-top: 0; width: 84%; margin-left: auto; }
}

/* 11. Horizontal sequence -------------------------------------------------- */
.seq { background: var(--white); }
.seq__sticky { position: relative; }
.seq__scroller { overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scroll-padding-inline: var(--g); padding-block: var(--sec); scrollbar-width: none; }
.seq__scroller::-webkit-scrollbar { display: none; }
.seq__track { display: flex; align-items: flex-end; gap: clamp(24px, 4vw, 72px); padding-inline: var(--g); width: max-content; }

.seq__intro { width: min(86vw, 560px); flex: none; align-self: center; scroll-snap-align: start; }
.seq__intro .display { margin: 2rem 0 1.8rem; font-size: clamp(1.6rem, 2.6vw, 2.9rem); }
.seq__lede { max-width: 32ch; color: var(--ink-2); }
.seq__intro .ph { margin-top: 1.8rem; max-width: 40ch; }
.seq__hint { margin-top: 2.6rem; font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 500; display: flex; align-items: center; gap: 1rem; color: var(--ink-2); }
.seq__hint i { width: 56px; height: 1px; background: currentColor; }

.frame { --fh: clamp(300px, 60svh, 640px); flex: none; height: auto; scroll-snap-align: center; }
.frame img { height: var(--fh); width: auto; aspect-ratio: var(--ar); object-fit: cover; }
.frame--wide { --fh: clamp(150px, 28svh, 300px); align-self: center; }
.frame:nth-of-type(2) { margin-bottom: clamp(0px, 10svh, 120px); }
.frame:nth-of-type(4) { margin-bottom: clamp(0px, 14svh, 160px); }
.frame figcaption { margin-top: 1rem; display: flex; gap: 1.1rem; font-size: .85rem; color: var(--ink-2); }
.frame figcaption span { color: var(--bronze); font-weight: 500; min-width: 1.4em; }

.seq__outro { width: min(78vw, 420px); flex: none; align-self: center; scroll-snap-align: end; }
.seq__note { font-size: .9rem; color: var(--ink-2); border-top: 1px solid var(--hair); padding-top: 1.2rem; }

.seq__progress { display: none; }

/* Pinned (desktop, motion allowed): vertical scroll drives horizontal travel */
.seq.is-pinned .seq__sticky { position: sticky; top: 0; height: 100svh; overflow: hidden; display: flex; align-items: center; }
.seq.is-pinned .seq__scroller { overflow: hidden; width: 100%; padding-block: calc(var(--hh) + 2rem) 3rem; }
.seq.is-pinned .seq__track { will-change: transform; }
.seq.is-pinned .seq__progress { display: block; position: absolute; left: var(--g); right: var(--g); bottom: clamp(20px, 4svh, 40px); height: 1px; background: var(--hair); }
.seq__progress i { display: block; height: 100%; background: var(--bronze); transform-origin: left; transform: scaleX(0); }

@media (max-width: 899px) {
  .frame { --fh: clamp(280px, 52svh, 460px); }
  .frame--wide { --fh: 150px; }
  .frame:nth-of-type(2), .frame:nth-of-type(4) { margin-bottom: 0; }
  .seq__track { align-items: flex-start; }
  .seq__intro, .seq__outro { align-self: flex-start; }
}

/* 12. Work ----------------------------------------------------------------- */
.work { padding-block: calc(var(--sec) * .6) var(--sec); border-top: 1px solid var(--hair); margin-inline: var(--g); padding-inline: 0; }
.work .wrap { padding-inline: 0; }
.work .label { grid-column: 1 / 4; padding-top: .9rem; }
.work__title { grid-column: 4 / 13; }
.work__index { grid-column: 4 / 13; margin-top: clamp(48px, 7vw, 100px); }
.ph-row { display: grid; grid-template-columns: 3.4rem 1.5fr 1fr .5fr; gap: 1rem; padding: 1.3rem 0; border-top: 1px dashed rgba(118, 91, 64, .5); color: var(--bronze); font-size: .9rem; }
.ph-row:last-child { border-bottom: 1px dashed rgba(118, 91, 64, .5); }
.ph-row span:first-child { font-weight: 500; letter-spacing: .16em; font-size: .72rem; padding-top: .2rem; }
.work__note { grid-column: 4 / 11; margin-top: 2rem; color: var(--ink-2); font-size: .95rem; }
@media (max-width: 899px) {
  .work .label, .work__title, .work__index, .work__note { grid-column: 1 / -1; }
  .work .label { margin-bottom: 2rem; }
  .ph-row { grid-template-columns: 2.6rem 1fr 1fr; }
  .ph-row span:last-child { display: none; }
}

/* 13. Contact -------------------------------------------------------------- */
.contact { padding-top: calc(var(--sec) * .85); }
.contact .label { grid-column: 1 / -1; margin-bottom: clamp(32px, 5vw, 72px); }
.contact__title { grid-column: 1 / -1; }
.contact__title .ln--indent { padding-left: clamp(0px, 6vw, 8rem); }
.contact__body { grid-column: 7 / 13; margin-top: clamp(48px, 7vw, 104px); }
.contact__body > p { font-size: clamp(1rem, 1.25vw, 1.2rem); line-height: 1.6; letter-spacing: 0; font-weight: 300; color: #E7E6E3; max-width: 34ch; }

.btn {
  position: relative; display: inline-flex; align-items: center; overflow: hidden; margin-top: 2.2rem;
  border: 1px solid var(--white); padding: 1.15rem 2.1rem;
  font-size: .7rem; font-weight: 500; letter-spacing: .24em; text-transform: uppercase;
  transition: color .5s var(--ease);
}
.btn span { position: relative; z-index: 1; }
.btn::before { content: ''; position: absolute; inset: 0; background: var(--white); transform: translateY(101%); transition: transform .6s var(--ease); }
.btn:hover, .btn:focus-visible { color: var(--charcoal); }
.btn:hover::before, .btn:focus-visible::before { transform: none; }

.contact__details { margin-top: clamp(40px, 5vw, 72px); border-top: 1px solid var(--hair-dark); }
.contact__details > div { display: grid; grid-template-columns: 6rem 1fr; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--hair-dark); }
.contact__details dt { font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 500; color: var(--grey); padding-top: .25rem; }

.contact__strip { position: relative; margin-top: var(--sec); width: 100%; height: max(150px, 21.75vw); overflow: hidden; }
.contact__strip img { opacity: .9; }

@media (max-width: 899px) { .contact__body { grid-column: 1 / -1; } }

/* 14. Footer --------------------------------------------------------------- */
.site-footer { border-top: 1px solid var(--hair-dark); padding-block: clamp(56px, 8vw, 120px) 2rem; }
.site-footer__grid { display: grid; grid-template-columns: 1.2fr 1.2fr 1fr; gap: 3rem var(--cg); align-items: start; }
.site-footer__logo { width: clamp(44px, 4.5vw, 64px); height: auto; }
.site-footer__col { display: flex; flex-direction: column; gap: .6rem; font-size: .9rem; color: #D6D5D2; }
.site-footer__col a { width: fit-content; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .5s var(--ease); }
.site-footer__col a:hover { background-size: 100% 1px; }
.site-footer__tag { font-weight: 400; color: var(--white); font-size: 1.2rem; letter-spacing: -.01em; margin-bottom: .4rem; }
.site-footer__legal { grid-column: 1 / -1; padding-top: 1.6rem; border-top: 1px solid var(--hair-dark); font-size: .75rem; color: var(--grey); }
@media (max-width: 720px) { .site-footer__grid { grid-template-columns: 1fr; } }

/* 15. Scroll reveals ------------------------------------------------------- */
.has-motion [data-reveal="lines"] .ln > span { transform: translateY(112%); transition: transform 1.25s var(--ease) calc(var(--i, 0) * .12s); }
.has-motion [data-reveal="lines"].is-in .ln > span { transform: none; }

.has-motion .reveal { clip-path: inset(100% 0 0 0); transition: clip-path 1.5s var(--ease-io); }
.has-motion .reveal.is-in { clip-path: inset(0); }
.has-motion .reveal .reveal__inner img { transform: scale(1.2); }
.has-motion .reveal.is-in .reveal__inner img { transform: scale(1); }

.has-motion [data-fade] { opacity: 0; transform: translateY(26px); transition: opacity 1.1s var(--ease), transform 1.1s var(--ease); }
.has-motion [data-fade].is-in { opacity: 1; transform: none; }

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


/* 17. Wow layer ------------------------------------------------------------ */

/* Raking light that follows the cursor across the facade; dusk deepens on scroll */
.hero__night {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(18, 16, 14, .35), rgba(18, 16, 14, .92));
  opacity: calc(var(--night, 0) * .66);
}
.hero__light {
  position: absolute; z-index: 1; left: 0; top: 0; width: 76vmax; height: 76vmax; margin: -38vmax 0 0 -38vmax; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 232, 190, 1), rgba(255, 220, 170, .5) 38%, rgba(255, 214, 160, 0) 100%);
  mix-blend-mode: overlay; opacity: 0; transform: translate3d(70%, 40%, 0);
  will-change: transform, opacity;
}
.has-motion.hero-ready .hero__light { opacity: calc(.7 + var(--night, 0) * .3); transition: opacity 1.6s 1s var(--ease); }
.hero__shade, .hero__content { z-index: 2; }
@media (pointer: coarse) {
  .has-motion.hero-ready .hero__light { animation: light-drift 16s ease-in-out infinite alternate; }
}
@keyframes light-drift { from { transform: translate3d(38vw, 36vh, 0); } to { transform: translate3d(86vw, 52vh, 0); } }

/* "Lights coming on" as the full-bleed band enters */
.band__dim { position: absolute; inset: 0; z-index: 1; background: #14110d; opacity: .5; pointer-events: none; }

/* Letter-by-letter headlines (split in JS, masked by the line) */
.wd { display: inline-block; white-space: nowrap; }
.ch { display: inline-block; }
.has-motion [data-chars] .ln > span { transform: none !important; transition: none !important; }
.has-motion [data-chars] .ch {
  transform: translate3d(0, 110%, 0);
  transition: transform 1.6s cubic-bezier(.22, 1, .36, 1) calc(var(--d, 0) * 1ms);
}
.has-motion [data-chars].is-in .ch,
.has-motion.hero-ready .hero__title[data-chars] .ch { transform: none; }

/* Magnetic controls */
[data-magnetic] { transition: transform .55s var(--ease); }
.btn[data-magnetic] { transition: transform .55s var(--ease), color .5s var(--ease); }

/* Contact details */
.contact__details dd { margin: 0; font-size: 1.05rem; font-weight: 300; letter-spacing: .01em; }
.contact__details dd a { color: var(--white); background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .6s var(--ease); padding-bottom: .15em; }
.contact__details dd a:hover, .contact__details dd a:focus-visible { background-size: 100% 1px; }

/* Process ------------------------------------------------------------------ */
.process { padding-block: var(--sec) calc(var(--sec) * .5); }
.process__label { grid-column: 1 / 4; padding-top: .9rem; }
.process__head { grid-column: 4 / 13; }
.process__lede { margin-top: 1.8rem; max-width: 46ch; color: var(--ink-2); font-weight: 300; line-height: 1.65; }
.process__list { grid-column: 4 / 13; margin-top: clamp(48px, 7vw, 110px); list-style: none; padding: 0; }
.step { display: grid; grid-template-columns: 3.4rem minmax(0, .9fr) minmax(0, 1.3fr); column-gap: var(--cg); padding-block: clamp(1.4rem, 2.4vw, 2.2rem); border-top: 1px solid var(--hair); }
.step:last-child { border-bottom: 1px solid var(--hair); }
.step__n { font-size: .7rem; font-weight: 500; letter-spacing: .24em; color: var(--bronze); padding-top: .45rem; }
.step h3 { margin: 0; font-weight: 300; letter-spacing: -.012em; line-height: 1.25; font-size: clamp(1.15rem, 1.5vw, 1.55rem); }
.step p { margin: 0; color: var(--ink-2); font-weight: 300; line-height: 1.65; max-width: 52ch; }
.process__assure { grid-column: 4 / 13; margin-top: clamp(40px, 5vw, 72px); padding: 1.6rem 0 0; }
.process__assure-t { font-size: .7rem; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--bronze); margin: 0 0 .8rem; }
.process__assure p:last-child { margin: 0; max-width: 58ch; font-weight: 300; line-height: 1.65; color: var(--charcoal); }
@media (max-width: 900px) {
  .process__label, .process__head, .process__list, .process__assure { grid-column: 1 / -1; }
  .process__label { margin-bottom: 1.4rem; }
  .step { grid-template-columns: 2.6rem 1fr; row-gap: .6rem; }
  .step p { grid-column: 2; }
}
.site-footer__lbp { margin-top: .9rem; max-width: 34ch; font-size: .82rem; line-height: 1.55; color: var(--grey); }
.site-footer__legal a { text-decoration: underline; text-underline-offset: 3px; margin-left: .6em; }

/* Privacy / legal page ------------------------------------------------------ */
.legal-head { display: flex; align-items: center; justify-content: space-between; padding: 22px var(--g); }
.legal-head img { height: 36px; width: auto; mix-blend-mode: multiply; }
.legal-head a:last-child { font-size: .7rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; }
.legal { max-width: 760px; margin: 0 auto; padding: clamp(56px, 9vw, 130px) var(--g) clamp(72px, 10vw, 150px); }
.legal h1 { font-weight: 300; letter-spacing: -.018em; line-height: 1.15; font-size: clamp(1.8rem, 3vw, 2.8rem); margin: 0 0 .6rem; }
.legal .legal__meta { color: var(--ink-2); font-size: .85rem; margin-bottom: 3rem; }
.legal h2 { font-weight: 400; font-size: 1.05rem; letter-spacing: -.005em; margin: 2.6rem 0 .7rem; padding-top: 1.6rem; border-top: 1px solid var(--hair); }
.legal p, .legal li { font-weight: 300; line-height: 1.75; color: #3b3a37; }
.legal ul { padding-left: 1.2rem; }
.legal a { text-decoration: underline; text-underline-offset: 3px; }

/* About + Instagram */
.ig { display: inline-flex; width: 40px; height: 40px; align-items: center; justify-content: center; border: 1px solid currentColor; border-radius: 50%; opacity: .8; transition: opacity .4s var(--ease), background-color .4s var(--ease), color .4s var(--ease); margin-top: .6rem; }
.ig:hover, .ig:focus-visible { opacity: 1; background: var(--white); color: var(--charcoal); }
.site-footer__col a.ig { background-image: none; }
.menu__foot .ig { margin-top: 1.2rem; }
.about { padding-block: var(--sec) calc(var(--sec) * .6); }
.about__label { grid-column: 1 / 4; padding-top: .9rem; }
.about__body { grid-column: 4 / 13; }
.about__cols { margin-top: clamp(36px, 5vw, 72px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--cg) clamp(24px, 3vw, 48px); }
.about__cols p { margin: 0; color: var(--ink-2); font-weight: 300; line-height: 1.7; font-size: .95rem; }
.about__ig { display: inline-flex; align-items: center; gap: .9rem; margin-top: clamp(32px, 4vw, 56px); font-size: .72rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--bronze); }
.about__ig svg { transition: transform .5s var(--ease); }
.about__ig:hover svg { transform: scale(1.12); }
@media (max-width: 900px) {
  .about__label, .about__body { grid-column: 1 / -1; }
  .about__label { margin-bottom: 1.4rem; }
  .about__cols { grid-template-columns: 1fr; gap: 1.2rem; }
}
.ig { flex: none; }
.site-footer__col a.ig { width: 40px; min-width: 40px; height: 40px; }

/* ===== Revisions ===== */
/* Header: P centred, descriptor appears then fades away */
.site-header { grid-template-columns: 1fr auto 1fr; }
.site-header__brand { grid-column: 2; justify-self: center; display: block; line-height: 0; }
.site-header__descriptor { grid-column: 1; grid-row: 1; justify-self: start; margin: 0; white-space: nowrap; }
.site-header__actions { grid-column: 3; grid-row: 1; justify-self: end; }
.has-motion .site-header__descriptor { opacity: 0; transform: translateX(-10px); }
.has-motion.hero-ready .site-header__descriptor { animation: desc-cycle 6.4s cubic-bezier(.22, 1, .36, 1) 1.1s both; }
.has-motion .site-header__brand:hover ~ .site-header__descriptor,
.has-motion .site-header__brand:focus-visible ~ .site-header__descriptor { opacity: 1; transform: none; animation: none; transition: opacity .6s var(--ease), transform .6s var(--ease); }
@keyframes desc-cycle {
  0% { opacity: 0; transform: translateX(-10px); letter-spacing: .38em; }
  16% { opacity: 1; transform: none; letter-spacing: .24em; }
  76% { opacity: 1; transform: none; letter-spacing: .24em; }
  100% { opacity: 0; transform: translateX(10px); letter-spacing: .24em; }
}
/* Enquire + Menu share one baseline */
.site-header__actions { align-items: center; }
.site-header__actions .link-quiet, .menu-toggle { display: inline-flex; align-items: center; height: 40px; padding: 0; line-height: 1; }
.site-header__actions .link-quiet { background-position: 0 calc(50% + .75em); }
.menu-toggle__label { line-height: 1; }
.menu-toggle__bars { height: 10px; align-self: center; }
@media (max-width: 899px) { .site-header__descriptor { display: none; } }

/* Craft slider: always fits the viewport height, soft edges instead of hard crops */
.frame { --fh: clamp(200px, calc(100svh - var(--hh) - 13rem), 600px); }
.frame--wide { --fh: clamp(110px, calc((100svh - var(--hh) - 13rem) * .5), 280px); }
.frame:nth-of-type(2) { margin-bottom: clamp(0px, 6svh, 90px); }
.frame:nth-of-type(4) { margin-bottom: clamp(0px, 8svh, 110px); }
.seq.is-pinned .seq__scroller { padding-block: calc(var(--hh) + 1.5rem) 4rem; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 3.5%, #000 96.5%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 3.5%, #000 96.5%, transparent 100%); }
@media (max-width: 899px) { .frame { --fh: clamp(260px, 52svh, 440px); } .frame--wide { --fh: 150px; } }

/* About: one cohesive block */
.about__text { margin-top: clamp(32px, 4vw, 56px); max-width: 62ch; }
.about__text p { margin: 0 0 1.4rem; color: var(--ink-2); font-weight: 300; line-height: 1.8; font-size: 1.05rem; }
.about__text p:last-child { margin-bottom: 0; }

/* Footer: links beside the logo, copy to the right */
.site-footer__grid { grid-template-columns: auto auto 1fr; column-gap: clamp(40px, 7vw, 120px); }
.site-footer__about { justify-self: end; text-align: right; align-items: flex-end; }
.site-footer__about .site-footer__lbp { margin-left: auto; }
@media (max-width: 720px) {
  .site-footer__grid { grid-template-columns: 1fr; }
  .site-footer__about { justify-self: start; text-align: left; align-items: flex-start; }
  .site-footer__about .site-footer__lbp { margin-left: 0; }
}