/* ==========================================================================
   WILLOW BEND — landscaper template
   Re-skin: edit the tokens below, swap assets/img/*, find-replace the brand
   name across the html files. Nothing else needs touching.
   ========================================================================== */

:root {
  /* palette */
  --ink: #212123;          /* dark sections, headings on white */
  --body: #333333;         /* paragraph text */
  --silver: #d0d0d0;       /* secondary text on dark */
  --paper: #ffffff;

  /* type */
  --font-display: "Epilogue", sans-serif;
  --font-body: "Archivo", sans-serif;      /* grotesk stand-in; swap for Akzidenz if licensed */
  --font-brand: "Lora", serif;             /* wordmark lockup */

  /* scale (desktop) */
  --display-xl: 88px;      /* page heroes, key statements — weight 300 */
  --display-lg: 64px;      /* sub-display, project titles — weight 400 */
  --display-md: 36px;      /* section subheads */
  --ui: 24px;              /* text links, menu, kickers */
  --body-size: 16px;

  /* layout */
  --rail: 20vw;            /* glass rail on the right, proportional at every width */
  --gutter: 52px;          /* left content margin */
  --header-h: 100px;
  --content-stop: 80vw;    /* white sections stop here; ink band fills the rest */
}

/* base ------------------------------------------------------------------ */

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: auto; }

body {
  font-family: var(--font-body);
  font-size: var(--body-size);
  font-weight: 400;
  line-height: 1.8;
  color: var(--body);
  background: var(--ink);   /* the right band under the rail is the page itself */
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

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

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--ink);
}

/* display type ----------------------------------------------------------- */

.display-xl {
  font-family: var(--font-display);
  font-size: var(--display-xl);
  font-weight: 300;
  line-height: 1.023;               /* 90/88 */
  letter-spacing: -0.02em;
  text-transform: lowercase;
}

.display-lg {
  font-family: var(--font-display);
  font-size: var(--display-lg);
  font-weight: 400;
  line-height: 1.4;                 /* 90/64 */
  letter-spacing: -0.02em;
  text-transform: lowercase;
}

.display-md {
  font-family: var(--font-display);
  font-size: var(--display-md);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-transform: lowercase;
}

.on-dark { color: var(--paper); }

.kicker {
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--paper);
}

/* arrow text link:  label | ->  ----------------------------------------- */

.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-family: var(--font-body);
  font-size: var(--ui);
  font-weight: 400;
  color: var(--ink);
  letter-spacing: 0.02em;
  transition: opacity 0.25s ease;
}



.arrow-link .bar {
  width: 1px;
  height: 34px;
  background: currentColor;
  flex: none;
}

.arrow-link .arr { flex: none; }

/* divider icon whose top and bottom edges sweep right on hover, then the
   right edge closes: the reference's sitewide arrow treatment */
.arrow-link .icon-box { position: relative; flex: none; width: 41px; height: 41px; }
.arrow-link .icon-box svg { display: block; width: 100%; height: 100%; overflow: visible; }
.arrow-link .icon-box svg line,
.arrow-link .icon-box svg path {
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  stroke-miterlimit: 10;
}
.arrow-link .icon-box::before {
  content: "";
  position: absolute;
  inset: 0 100% 0 0;
  border-top: 1.5px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transition: right 0.2s linear 0.1s;
}
.arrow-link .icon-box::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; right: 0;
  width: 2px;
  background: currentColor;
  clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%, 0% 100%, 100% 100%, 100% 100%, 0% 100%);
  transition: clip-path 0.1s linear;
}
.arrow-link:hover { opacity: 1; }
.arrow-link:hover .icon-box::before { right: 0; transition: right 0.2s linear; }
.arrow-link:hover .icon-box::after {
  clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 0% 50%, 0% 50%, 100% 50%, 100% 100%, 0% 100%);
  transition: clip-path 0.1s linear 0.2s;
}

.arrow-link.on-dark { color: var(--paper); }

/* thin long arrow, drawn once, reused everywhere */
.arr {
  width: 46px;
  height: 16px;
  position: relative;
}
.arr::before {
  content: "";
  position: absolute;
  left: 0; right: 2px;
  top: 50%;
  height: 1.5px;
  background: currentColor;
}
.arr::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 11px;
  height: 11px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: translateY(-50%) rotate(45deg) skew(8deg, 8deg);
  transform-origin: center;
}

/* header ------------------------------------------------------------------
   transparent over the hero; hides on scroll down; returns solid white
   with ink text on scroll up. */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--header-h);
  overflow: hidden;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0 0 32px;
  transition: transform 0.45s ease, background 0.3s ease;
}

.site-header.is-hidden { transform: translateY(-110%); }

.site-header.is-solid {
  background: var(--paper);
  border-bottom: 1px solid #212123;
}

.brand-lockup {
  display: inline-block;
  color: var(--paper);
  line-height: 1;
  transition: color 0.3s ease;
}

.brand-lockup .brand-name {
  font-family: var(--font-brand);
  font-weight: 500;
  font-size: 34px;
  letter-spacing: 0.01em;
  display: block;
}

.brand-lockup .brand-sub {
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  display: block;
  text-align: right;
  margin-top: 3px;
}

.site-header.is-solid .brand-lockup { color: var(--ink); }

.header-cta {
  position: absolute;
  left: 54vw;
  right: 0;
  top: 29px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.header-cta .arrow-link { font-size: 24px; gap: 11px; }

.header-cta .rule {
  width: 100%;             /* runs from the label to the viewport edge */
  height: 1px;
  background: currentColor;
  opacity: 0.85;
  margin-top: 29px;
  color: var(--paper);
}

.header-cta { color: var(--paper); }
.site-header.is-solid .header-cta,
.site-header.is-solid .header-cta .arrow-link.on-dark { color: var(--ink); }
.site-header.is-solid .header-cta .rule { opacity: 0; }

.blind {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

/* frost columns ------------------------------------------------------------
   each photo section carries its own frosted column on the right edge,
   flush with the band line; it scrolls away with its section. */

.frost {
  position: absolute;
  top: 0; bottom: 0; right: 0;
  width: var(--rail);
}

/* inside an 80vw band section the frost shifts out to the viewport edge */
.band > .frost { right: calc(0px - var(--rail)); }

.frost, .band > .frost {
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  pointer-events: none;
  z-index: 5;
}

/* tints: photo heroes and CTAs carry a milky white; band frosts stay clear */
.hero .frost, .cta-photo .frost { background: rgba(255, 255, 255, 0.5); }

/* featured slider: the right column previews the NEXT project, darkened,
   sliding in once the stage pins and away when it unpins */
.next-preview {
  position: absolute;
  top: 0; bottom: 0; right: 0;
  /* one px wider than the rail: the border-left then sits ON the paper side,
     so the line's right edge lands exactly where the ink band starts below */
  width: calc(var(--rail) + 1px);
  cursor: pointer;
  z-index: 8;
  border: 0;
  border-left: 1px solid rgba(255, 255, 255, 0.9);
  background: var(--ink);
  overflow: hidden;
  clip-path: inset(0 0 0 100%);
  transition: clip-path 0.85s cubic-bezier(0.33, 0, 0.2, 1);
}

.slider.preview-in .next-preview { clip-path: inset(0); pointer-events: auto; }

.next-preview .pv-img {
  position: absolute;
  inset: 0;
  /* the photo is viewport-locked (fixed attachment), so size it against the
     viewport deliberately: full height, anchored right — the column shows a
     proper tall crop of the photo, not the sky corner of a viewport-cover */
  background-size: auto 100vh;
  background-position: right top;
}

/* exposure drop lives on the column, not on the composited photo element —
   Safari can skip pseudo-elements of fixed-background layers */
.next-preview::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.62);
  z-index: 2;
  pointer-events: none;
}

.next-preview .arr {
  position: absolute;
  left: 50%;
  bottom: 128px;
  transform: translateX(-50%);
  width: 66px;
  height: 18px;
  color: var(--paper);
  z-index: 3;
}


/* page transition, matched to the reference anatomy:
   boot: the page skeleton shows white with its structural grid and a
   letter-fill wordmark (outline filling solid, left to right).
   wipe: a single full-viewport ink panel (grey wordmark centered) clips
   out left to right over 1s ease, its tail creeping across the rail.
   the rail furniture (hamburger, scroll cue, socials) then drops in.
   leave: the ink panel clips back in, then the browser navigates. */

.veil-boot {
  position: fixed;
  inset: 0;
  background: var(--paper);
  z-index: 1210;
  display: grid;
  place-items: center;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
}

body.is-loading .veil-boot { opacity: 1; visibility: visible; }

/* the wordmark sits on the ink cover, then fades just before the sweep */
.veil-ink .brand-lockup { opacity: 0; }
body.is-ready .veil-ink .brand-lockup { animation: veil-brand-out 0.45s ease 0.95s both; }

@keyframes veil-brand-out {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

/* the structural grid: four hairlines that hold, then erase in a stagger;
   the top line's right segment stays where the header rule lives */
.veil-boot .grid-line { position: absolute; background: #e3e3e5; }
.veil-boot .gl-v20 { left: calc(20% - 1px); top: 0; bottom: 0; width: 1px; transform-origin: bottom; }
.veil-boot .gl-v80 { left: calc(80% - 1px); top: 0; bottom: 0; width: 1px; transform-origin: top; }
.veil-boot .gl-htop-l { top: 99px; left: 0; width: 54vw; height: 1px; transform-origin: right; }
.veil-boot .gl-htop-r { top: 99px; left: 54vw; right: 0; height: 1px; }
.veil-boot .gl-hbot { bottom: 99px; left: 0; right: 0; height: 1px; transform-origin: right; }

body.is-ready .veil-boot .gl-hbot { animation: erase-x 0.3s ease 0.02s both; }
body.is-ready .veil-boot .gl-v20 { animation: erase-y 0.28s ease 0.14s both; }
body.is-ready .veil-boot .gl-htop-l { animation: erase-x 0.34s ease 0.3s both; }
body.is-ready .veil-boot .gl-v80 { animation: erase-y 0.5s ease 0.34s both; }

@keyframes erase-x { to { transform: scaleX(0); } }
@keyframes erase-y { to { transform: scaleY(0); } }

/* is-ready lands once the page has actually loaded (min hold applies) */
body.is-ready .veil-boot { animation: boot-off 1ms linear 0.9s both; }

@keyframes boot-off {
  to { opacity: 0; visibility: hidden; }
}

.boot-fill {
  position: relative;
  font-family: var(--font-brand);
  font-weight: 500;
  font-size: 46px;
  letter-spacing: 0.01em;
  line-height: 1;
}

.boot-fill .outline {
  color: transparent;
  -webkit-text-stroke: 1px #c6c6c9;
}

.boot-fill .solid {
  position: absolute;
  inset: 0;
  color: #47474a;
  clip-path: inset(0 100% 0 0);
}

body.is-loading .boot-fill .solid {
  animation: letter-fill 1.45s linear 0.12s both;
}

@keyframes letter-fill {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}

.veil-ink {
  position: fixed;
  inset: 0;
  background: var(--ink);
  z-index: 1200;
  display: grid;
  place-items: center;
  clip-path: inset(0 0 0 100%);
  pointer-events: none;
}

.veil-ink .brand-lockup { color: #8a8a8e; }
.veil-ink .brand-name { font-size: 46px; }

body.is-ready.is-loading .veil-ink {
  clip-path: inset(0);
  animation: veil-wipe-out 1s ease 1.4s both;
}

body.is-leaving .veil-ink {
  animation: veil-wipe-in 1s ease both;
  pointer-events: auto;
}

@keyframes veil-wipe-out {
  from { clip-path: inset(0); }
  to { clip-path: inset(0 0 0 100%); }
}
@keyframes veil-wipe-in {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0); }
}

/* the wipe reveals static furniture; only the hero title animates in after */
body.is-loading:not(.is-ready) .pin-title,
body.is-loading:not(.is-ready) .hero-title { opacity: 0; }
body.is-ready .pin-title,
body.is-ready .hero-title { animation: rise-in 0.9s ease 1.9s both; }

@keyframes rise-in {
  from { opacity: 0; transform: translateY(26px); }
  to { opacity: 1; transform: none; }
}
@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes drop-in {
  from { opacity: 0; transform: translateX(50%) translateY(-22px); }
  to { opacity: 1; transform: translateX(50%); }
}
@keyframes drop-in-cue {
  from { opacity: 0; transform: translateX(50%) translateY(-22px); }
  to { opacity: 1; transform: translateX(50%); }
}
@keyframes drop-in-social {
  from { opacity: 0; transform: translateX(50%) translateY(-22px); }
  to { opacity: 1; transform: translateX(50%); }
}

@media (prefers-reduced-motion: reduce) {
  .veil-boot, .veil-ink { display: none !important; }
  .hero-title { animation: none !important; opacity: 1 !important; }
  .reveal { transition: none !important; opacity: 1 !important; transform: none !important; }
}


.rail-toggle {
  position: fixed;
  top: 32px;
  right: calc(var(--rail) / 2);
  transform: translateX(50%);
  z-index: 980;
  transition: opacity 0.3s ease;
  width: 40px;
  height: 36px;
  background: none;
  border: 0;
  cursor: pointer;
}

.rail-toggle:focus:not(:focus-visible) { outline: none; }

.site-header.is-solid + .rail-toggle span { background: var(--ink); }

.rail-toggle span {
  position: absolute;
  left: 2px;
  width: 36px;
  height: 2px;
  background: #fff;
  transition: transform 0.35s ease, opacity 0.35s ease, top 0.35s ease;
}

.rail-toggle span:nth-child(1) { top: 9px; }
.rail-toggle span:nth-child(2) { top: 17px; }
.rail-toggle span:nth-child(3) { top: 25px; }

.rail-toggle[aria-expanded="true"] span:nth-child(1) { top: 17px; transform: rotate(45deg); }
.rail-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.rail-toggle[aria-expanded="true"] span:nth-child(3) { top: 17px; transform: rotate(-45deg); }

/* burger hides with the header on scroll-down, except while the drawer is open */
.site-header.is-hidden + .rail-toggle { opacity: 0; visibility: hidden; pointer-events: none; }
body.menu-open .rail-toggle { opacity: 1 !important; pointer-events: auto !important; }

.hero .rail-social {
  position: absolute;
  bottom: 44px;
  right: calc(var(--rail) / 2);
  transform: translateX(50%);
  display: flex;
  gap: 22px;
  z-index: 20;
}

.rail-social a { color: #fff; display: block; transition: opacity 0.25s ease; }
.rail-social a:hover { opacity: 0.6; }
.rail-social svg { width: 22px; height: 22px; display: block; }

/* scroll cue: lives in the hero, not the rail, so it leaves with the hero */
.scroll-cue {
  position: absolute;
  right: calc(var(--rail) / 2);
  top: 50%;
  transform: translateX(50%);
  color: var(--paper);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  z-index: 955;          /* above the frost so it stays crisp */
}

.scroll-cue .word {
  writing-mode: vertical-rl;
  font-family: var(--font-body);
  font-size: 15px;
  letter-spacing: 0.06em;
}

.scroll-cue .stem {
  width: 1.5px;
  height: 58px;
  background: currentColor;
  position: relative;
}

.scroll-cue .stem::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 12px;
  height: 12px;
  border-bottom: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: translateX(-50%) rotate(45deg);
  transform-origin: center;
}

/* menu drawer -------------------------------------------------------------- */

.menu-drawer {
  position: fixed;
  top: 0; right: 0;
  width: var(--rail);
  height: 100vh;
  height: 100dvh;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  background: rgba(33, 33, 35, 0.94);
  z-index: 960;
  transform: translateY(-100%);
  transition: transform 0.5s ease;
  padding: calc(var(--header-h) + 24px) 0 60px 48px;
  overflow-y: auto;
}

.menu-drawer nav {
  padding-top: 34px;
  margin-right: 40px;
}

.menu-drawer .drawer-social {
  position: absolute;
  bottom: 44px;
  left: 48px;
  display: flex;
  gap: 20px;
}

.menu-drawer .drawer-social a { color: var(--paper); transition: opacity 0.25s ease; }
.menu-drawer .drawer-social a:hover { opacity: 0.6; }
.menu-drawer .drawer-social svg { width: 20px; height: 20px; display: block; }

.menu-drawer.is-open { transform: translateY(0); }

.menu-drawer nav ul { list-style: none; }

.menu-drawer nav > ul > li { margin-bottom: 30px; }

.menu-drawer a,
.menu-drawer .submenu-toggle {
  font-family: var(--font-body);
  font-size: 19px;
  font-weight: 400;
  color: var(--paper);
  letter-spacing: 0.02em;
  text-transform: lowercase;
  background: none;
  border: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  transition: color 0.25s ease;
}

.menu-drawer a:hover,
.menu-drawer .submenu-toggle:hover { color: #8a8a8e; }

.menu-drawer li.is-current > a { color: #8a8a8e; pointer-events: none; }

.submenu-toggle .plus {
  position: relative;
  width: 14px;
  height: 14px;
  display: inline-block;
}
.submenu-toggle .plus::before,
.submenu-toggle .plus::after {
  content: "";
  position: absolute;
  background: currentColor;
  transition: transform 0.3s ease;
}
.submenu-toggle .plus::before { left: 0; right: 0; top: 6px; height: 1.5px; }
.submenu-toggle .plus::after { top: 0; bottom: 0; left: 6px; width: 1.5px; }
.submenu-toggle[aria-expanded="true"] .plus::after { transform: scaleY(0); }

.menu-drawer .submenu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}

.menu-drawer .submenu.is-open { max-height: 160px; }

.menu-drawer .submenu li { margin: 14px 0 0 26px; }

.menu-drawer .submenu a { font-size: 17px; color: var(--silver); }

/* sections ----------------------------------------------------------------- */

main { display: block; }

.band {                       /* white content band; ink shows to its right */
  background: var(--paper);
  width: var(--content-stop);
  padding-left: var(--gutter);
  padding-right: 64px;
}

.bleed {                      /* full-bleed photo/ink sections */
  width: 100%;
  position: relative;
}

/* hero */

.hero {
  position: relative;
  height: 100vh;
  height: 100dvh;
}

.hero .blind .fader,
.hero .fader {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--ink);
}

/* the headline pins at its spot and rides ~420px of scroll before releasing;
   blend difference flips it white-on-photo to ink-on-white by itself */
.pin-scope {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: calc(100vh + 420px);
  pointer-events: none;
  z-index: 40;
  mix-blend-mode: difference;   /* blend sits on the stacking context itself */
}

.pin-scope .pin-title {
  position: sticky;
  top: calc(100vh - 352px);
  margin-top: calc(100vh - 352px);
  padding-left: var(--gutter);
  color: var(--paper);
  max-width: 760px;
}

.hero .fader,
.slider .fader {
  position: absolute;
  inset: 0;
}

.fader .slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.6s ease;
}

.fader .slide.is-active { opacity: 1; }

.hero .fader .slide.zooming,
.gallery-panel .fader .slide.zooming {
  animation: ken-zoom 9s ease-out forwards;
}

@keyframes ken-zoom {
  from { transform: scale(1); }
  to { transform: scale(1.065); }
}

.hero-title {
  position: absolute;
  left: var(--gutter);
  bottom: 172px;
  color: var(--paper);
  z-index: 10;
  max-width: 760px;
}

/* the pinned title passes through this padding before the content starts */
.intro {
  position: relative;
  height: 1059px;          /* the reference's exact section height */
  padding-top: 229px;
  padding-bottom: 0;
}

.intro-title { margin-bottom: 64px; }

.intro .display-md { margin-bottom: 56px; }

.intro p { max-width: 420px; margin-bottom: 24px; }

.intro .arrow-link { margin-top: 40px; }

/* five-star gallery panel: bleeds right past the white band to the edge */

.gallery-panel {
  position: relative;
  height: 658px;
  margin-right: calc(0px - var(--rail) - 64px);   /* image runs to the viewport edge */
}

/* the photo is fixed at full size; a scroll-scrubbed right clip reveals it
   across the band line, both directions (the reference's mechanic) */
.gallery-panel .fader {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--ink);
  clip-path: inset(0 var(--scrub-clip, 20vw) 0 0);
}

.stars-lockup {
  position: absolute;
  left: 64px;
  bottom: 56px;
  color: var(--paper);
  display: flex;
  align-items: flex-start;
  gap: 10px;
  z-index: 5;
  font-family: var(--font-display);
}

.stars-lockup .five {
  font-size: 96px;
  font-weight: 200;
  line-height: 0.9;
}

.stars-lockup .stack {
  font-size: 30px;
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: 0.01em;
  text-transform: lowercase;
}

.stars-lockup .stack .stars {
  font-size: 17px;
  letter-spacing: 0.28em;
  vertical-align: 3px;
  margin-left: 10px;
}

/* full-bleed slider (featured projects) */

.slider {
  position: relative;
  height: calc(100vh + 34px);
}

.slider .stage,
.cta-photo .stage {
  position: relative;
  height: 100%;
  background: var(--ink);
}

@media (hover: hover) and (pointer: fine) {
  .slider .stage { cursor: none; }
  .slider .stage .next-preview { cursor: none; }
}

.slider .stage .blind .fader,
.cta-photo .stage .blind .fader {
  position: absolute;
  inset: 0;
}

/* the original's mechanism: the boxes scroll, the pixels stay viewport-locked.
   no-repeat + an ink backstop: nothing bright can ever bleed at a box edge */
.slider .stage .slide,
.cta-photo .stage .slide,
.next-preview .pv-img {
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-color: var(--ink);
}

.slider .stage .fader::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.1);   /* the slight exposure drop, filter-free */
}




/* the follower badge is the only cursor over the featured stage */
@media (hover: hover) and (pointer: fine) {
  .slider .stage, .slider .stage * { cursor: none; }
}

.slider .caption {
  position: absolute;
  left: var(--gutter);
  bottom: 238px;
  z-index: 10;
  color: var(--paper);
}

.slider .caption .kicker { display: block; margin-bottom: 6px; }

.slide-title { min-height: 90px; }

.slider .dashes {
  position: absolute;
  left: var(--gutter);
  bottom: 118px;
  display: flex;
  gap: 12px;
  z-index: 10;
}

.slider .dashes button {
  width: 24px;
  height: 14px;
  background: none;
  border: 0;
  cursor: pointer;
  position: relative;
  opacity: 0.45;
  transition: opacity 0.3s ease, width 0.3s ease;
}

.slider .dashes button::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  height: 1.5px;
  background: var(--paper);
}

.slider .dashes button.is-active { width: 48px; opacity: 1; }


/* plan section (design intro) */

.plan-section {
  position: relative;
  background: transparent;   /* ink body shows through beyond the band-limit */
  width: 100%;
  height: 1014px;            /* the reference's exact section box */
}

.plan-section .band-limit {
  position: absolute;
  inset: 0 var(--rail) 0 0;   /* ink band visible beyond the content stop */
  background: var(--paper);
}

.plan-art {
  position: absolute;
  left: 23vw;
  right: 0;
  top: 120px;
  height: calc(77vw * 0.5284);
  pointer-events: none;
  clip-path: inset(0 var(--scrub-clip, 20vw) 0 0);
  background: url("../img/plan-art.png") no-repeat;
  background-size: 100% auto;
}

.plan-art svg { display: none; }   /* source artwork lives in the markup */

/* the art spans 23vw..100vw; the band edge crosses it at 74.03%. the grey
   pass slides under the ink panel while the white pass continues over it,
   both riding the same scrub, so the drawing sweeps across the band line. */
.plan-art.plan-art-light { z-index: 0; }

.plan-section .rail-ink {
  position: absolute;
  top: -1px; right: 0; bottom: 0;   /* 1px up into the slider: no seam at the junction */
  width: var(--rail);
  background: var(--ink);
  z-index: 1;
  pointer-events: none;
}

.plan-art.plan-art-dark {
  background-image: url("../img/plan-art-white.png");
  opacity: 0.55;
  clip-path: inset(0 var(--scrub-clip, 20vw) 0 calc(100% - var(--rail)));
  z-index: 2;
}

.plan-copy {
  position: relative;
  z-index: 2;
  padding: 358px 0 260px var(--gutter);
  max-width: 560px;
}

.plan-copy .arrow-link { margin-top: 64px; }

/* big statement rows */

.statements .display-lg {
  font-size: 64px;
  line-height: 90px;
  font-weight: 400;
  letter-spacing: -1.28px;
  max-width: var(--end-col);
}

/* full-bleed CTA */

.cta-photo {
  position: relative;
  height: 800px;
}

.cta-photo .inner {
  position: absolute;
  left: var(--gutter);
  top: 402px;
  z-index: 10;
}

.cta-photo .display-xl { margin-bottom: 90px; max-width: 720px; }

/* question strip */

.question-strip { margin-top: 19px; }

.question-strip .arrow-link {
  width: 967px;
  max-width: 100%;
  height: 72px;
  display: flex;
  align-items: center;
  font-size: 24px;
  text-align: left;
}

.question-strip .arrow-link .label { flex: 1; padding-right: 40px; }
.question-strip .icon-box { width: 41px; height: 42px; }

/* footer ------------------------------------------------------------------- */

/* the end screen is an in-flow viewport-height layer pinned under the page:
   sticky at the viewport bottom, it stands still beneath main while the
   content slides up and reveals it, and the document simply ends with the
   legal bar. inside: a 101px white gap row, a flexing middle (min 360px)
   that centres the statements, then the 262px grid row and the 70px legal
   row. */
.page-end {
  position: sticky;
  bottom: 0;               /* rides beneath main (z1) while it reveals */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  --end-pl: calc(45.25vw - 600px);                  /* 51.6 @1440 … 124 @1600 … 305 @2000 */
  --end-col: min(1200px, calc(43.83vw + 471.5px));  /* content column, capped at 1200 */
}

/* the band-edge rule runs the full end screen, through the legal bar */
.page-end::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--content-stop);
  width: 1px;
  background: #a0a1a5;
}

.end-gap { height: 101px; flex: none; }

.end-mid {
  flex: 1 0 auto;
  min-height: 360px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: var(--end-pl);
}

.end-spacer { display: none; }

.site-footer { position: relative; }

.grid-row {
  /* Min height used to be a fixed 262px; the longer
     services column must grow or it bleeds into .legal-row. */
  min-height: 262px;
  height: auto;
  border-top: 1px solid #a0a1a5;
  padding: 0 0 48px var(--end-pl);
  position: relative;
}

main {
  position: relative;
  z-index: 1;              /* covers the sticky end screen until it reveals */
  background: var(--paper);
}

main::after {              /* the ink band lives with the content */
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: var(--rail);
  background: var(--ink);
  z-index: -1;
}

.footer-grid {
  width: var(--end-col);
  padding-top: 51px;
  display: grid;
  grid-template-columns: 400px repeat(3, 1fr);
}

.footer-grid h4 {
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: 500;
  line-height: 28.8px;
  color: var(--ink);
  margin-bottom: 32px;
}

.footer-grid .contact-lines p {
  font-size: 16px;
  line-height: 19px;
  margin: 0 0 14.4px;
}

.footer-grid nav a {
  display: block;
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--ink);
  margin-bottom: 12px;
  transition: opacity 0.25s ease;
}

/* First link reads as the column title (Home / All Services / About) */
.footer-grid nav a:first-child {
  font-size: 20px;
  line-height: 28.8px;
  margin-bottom: 20px;
}

.footer-grid nav a:last-child { margin-bottom: 0; }

.footer-grid nav a:hover { opacity: 0.5; }

.footer-brand {
  position: absolute;
  right: 0;
  top: 51px;
  width: var(--rail);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 42px;
}

.footer-brand .brand-lockup { color: var(--ink); text-align: left; }
.footer-brand .brand-lockup .brand-name { font-size: 38px; line-height: 0.95; }

.footer-social { display: flex; gap: 20px; }
.footer-social a { color: var(--ink); transition: opacity 0.25s ease; }
.footer-social a:hover { opacity: 0.5; }
.footer-social svg { width: 22px; height: 22px; display: block; }

.legal-row {
  min-height: 70px;
  height: auto;
  border-top: 1px solid #a0a1a5;
  padding: 20px 0 24px var(--end-pl);
  position: relative;
  background: var(--paper);
  z-index: 1;
}

.legal-bar {
  display: flex;
  width: var(--end-col);
  font-size: 14px;
  line-height: 14px;
  color: var(--ink);
}

.legal-bar .copyright { width: 400px; flex: none; }

.legal-bar a {
  width: calc((var(--end-col) - 400px) / 3);
  flex: none;
  transition: opacity 0.25s ease;
}
.legal-bar a:hover { opacity: 0.5; }

.legal-credit {
  position: absolute;
  top: 20px;
  right: 30px;
  width: calc(var(--rail) - 61px);
  text-align: center;
  font-size: 16px;
  line-height: 20px;
  color: var(--ink);
}

.legal-credit .studio {
  font-family: "Cormorant Garamond", "Cormorant", serif;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
  margin-left: 8px;
}

/* seo-only heading, visually hidden */
.visually-hidden-seo {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* cursor badge over the featured slider ------------------------------------ */

.cursor-badge {
  position: fixed;
  top: 0; left: 0;
  width: 118px;
  height: 118px;
  margin: -59px 0 0 -59px;
  z-index: 1050;
  pointer-events: none;
  color: var(--paper);
  opacity: 0;
  transition: opacity 0.2s ease;
  will-change: transform;
}

.cursor-badge.is-on { opacity: 1; }

/* four register lines whose arms extend past the corners */
.cursor-badge .cb-line { position: absolute; background: var(--paper); transition: all 0.45s ease; }
.cursor-badge .cb-h1 { left: 0; right: 0; top: 18px; height: 1px; }
.cursor-badge .cb-h2 { left: 0; right: 0; bottom: 18px; height: 1px; }
.cursor-badge .cb-v1 { top: 0; bottom: 0; left: 18px; width: 1px; }
.cursor-badge .cb-v2 { top: 0; bottom: 0; right: 18px; width: 1px; }

.cursor-badge .c-box {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.45;
  letter-spacing: 0.05em;
  white-space: pre-line;
  transition: opacity 0.25s ease;
}

/* mid-swap: the frame collapses to a small crosshair, text gone */
.cursor-badge.is-swapping .cb-h1 { left: 40px; right: 40px; top: 46px; }
.cursor-badge.is-swapping .cb-h2 { left: 40px; right: 40px; bottom: 46px; }
.cursor-badge.is-swapping .cb-v1 { top: 40px; bottom: 40px; left: 46px; }
.cursor-badge.is-swapping .cb-v2 { top: 40px; bottom: 40px; right: 46px; }
.cursor-badge.is-swapping .c-box { opacity: 0; }

@media (hover: none) { .cursor-badge { display: none; } }

/* reveals ------------------------------------------------------------------ */

/* entrance reveals: copy and images rise in once as they enter the viewport.
   armed only when js is running (html.js-anim); reduced motion keeps it off. */
.js-anim .reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.9s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.js-anim .reveal.is-in { opacity: 1; transform: none; }

/* page heroes on inner pages (shorter than home) */

.hero.hero-short { height: 78vh; min-height: 560px; }

/* generic two-column content row used on inner pages */

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  padding-top: 120px;
  padding-bottom: 120px;
}

/* intro: narrow text column, oversized gallery bleeding to the edge;
   the photo column starts higher than the text column, as on the reference */
.intro .split {
  grid-template-columns: 494px 1fr;
  gap: 56px;
  align-items: start;
}

.intro .split > div:first-child { padding-top: 254px; }

.split p { max-width: 460px; margin-bottom: 24px; }

/* mobile ------------------------------------------------------------------- */

@media (max-width: 1100px) {
  :root {
    --display-xl: 56px;
    --display-lg: 40px;
    --display-md: 28px;
    --gutter: 24px;
    --rail: 64px;
    --header-h: 74px;
    --content-stop: 100vw;
  }

  .band { width: 100%; padding-right: var(--gutter); }

  .page-end::before { display: none; }
  .next-preview { display: none; }
  .slider .stage .slide, .cta-photo .stage .slide { background-attachment: scroll; }


  .header-cta .label { display: none; }
  .header-cta { margin-right: 96px; }
  .header-cta .rule { width: calc(100vw - 160px); margin-top: 18px; }

  .brand-lockup .brand-name { font-size: 24px; }

  .glass-rail { width: 100%; height: var(--header-h); backdrop-filter: none; -webkit-backdrop-filter: none; background: none; }
  .rail-toggle { top: 20px; right: 20px; transform: none; }
  .rail-social, .hero .rail-social { display: none; }

  .scroll-cue { right: 22px; top: auto; bottom: 130px; transform: none; }

  .menu-drawer { width: 100vw; padding-left: var(--gutter); }

  .hero-title { bottom: 96px; right: var(--gutter); }
  .pin-scope { position: absolute; height: 100%; }
  .pin-scope .pin-title { position: absolute; top: auto; bottom: 96px; left: 0; right: var(--gutter); margin-top: 0; }
  .slider { height: 100vh; }
  .cta-photo { height: 100vh; }
  .next-preview { display: none; }
  .page-end { position: static; min-height: 0; z-index: auto; --end-pl: var(--gutter); --end-col: 100%; }
  .end-gap { height: 48px; }
  .end-mid { padding-right: var(--gutter); }
  .grid-row { height: auto; padding-bottom: 12px; }
  .legal-row { height: auto; padding: 0; }
  .end-spacer { display: none; }
  .gallery-panel { height: 64vw; margin-right: calc(0px - var(--gutter)); }
  .intro .split { grid-template-columns: 1fr; }
  .plan-art { position: relative; left: 0; width: 130%; top: 0; transform: none; margin: 0 0 60px; }

  .intro { padding-top: 140px; min-height: 0; }

  .slider .caption { bottom: 170px; }

  /* gallery: kill the desktop right-bleed, put the lockup on its own ink strip */
  .gallery-panel { margin-right: 0; background: var(--ink); }
  .gallery-panel img { height: 380px; }
  .stars-lockup { position: static; justify-content: center; padding: 30px 0 38px; }
  .stars-lockup .five { font-size: 64px; }
  .stars-lockup .stack { font-size: 22px; }

  .plan-copy { padding: 110px 0 60px var(--gutter); }
  .plan-art { position: relative; width: 130%; right: 0; top: 0; transform: none; margin: 0 0 60px; clip-path: none; }
  .plan-art.plan-art-dark { display: none; }
  .plan-section .rail-ink { display: none; }
  .plan-section .band-limit { inset: 0; }

  .split { grid-template-columns: 1fr; gap: 32px; padding-top: 70px; padding-bottom: 70px; }

  .footer-grid { grid-template-columns: 1fr 1fr; gap: 0 16px; padding: 48px 0 40px; }
  .footer-grid .col-contact { grid-column: 1 / -1; margin-bottom: 36px; }
  .footer-grid nav a { margin-bottom: 24px; }

  .footer-brand { position: static; width: 100%; flex-direction: row; justify-content: space-between; padding: 8px var(--gutter) 28px; }
  .footer-brand .brand-lockup .brand-name { font-size: 26px; }

  .legal-bar { flex-direction: column; align-items: flex-start; gap: 8px; padding: 20px var(--gutter); }
  .legal-bar > *, .legal-bar .copyright { width: auto; }

  .legal-credit { position: static; width: auto; text-align: left; padding: 0 var(--gutter) 26px; }

  .cta-photo .display-xl { margin-bottom: 48px; }

  .question-strip .arrow-link { font-size: 19px; }
}

/* legal pages ---------------------------------------------------------- */

.legal-title { padding: 220px 0 30px; }
.legal-title .legal-note { max-width: 460px; color: #6b6b70; margin-top: 26px; }
.legal-copy { padding: 34px 0; }
.legal-copy p { max-width: 640px; margin: 14px 0 0; }
.legal-copy .display-md { margin-bottom: 6px; }


/* subpage header: solid from the first frame — ink text, no cta rule, the
   bottom rule runs to the band line and the band-edge line crosses the header
   down from the very top of the viewport, as on the reference subpages. */
body.page-sub .site-header { background: var(--paper); }

body.page-sub .site-header::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: -1px;
  left: var(--content-stop);
  width: 1px;
  background: #a0a1a5;
}

body.page-sub .site-header::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: var(--content-stop);
  height: 1px;
  background: #a0a1a5;
}

body.page-sub .site-header .brand-lockup,
body.page-sub .site-header .header-cta,
body.page-sub .site-header .header-cta .arrow-link.on-dark { color: var(--ink); }
body.page-sub .site-header .header-cta .rule { display: none; }
body.page-sub .rail-toggle span { background: var(--ink); }

/* ---- staging overlay ---- */
.stage-banner {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 10000;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #8b1e1e;
  color: #fff;
  font-family: "Archivo", sans-serif;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
body { padding-top: 28px; }
.site-header { top: 28px !important; }
.rail-toggle { top: calc(28px + 1.25rem) !important; }