/* ------------------------------------------------------------------ tokens */
:root{
  --accent:#D4157F;
  --accent-deep:#A80D63;
  --ink:#111111;
  --ink-soft:#3A3A3A;
  --white:#FFFFFF;
  --mint:#F6E1EC;   /* soft blush tint, the secondary ground */
  --display:"Archivo Black","Archivo Black Fallback",Impact,sans-serif;
  --body:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  --gutter:clamp(20px,5vw,72px);
  --maxw:1440px;
  --head-h:132px;
  --col-label:300px;   /* left label column on split sections */
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--white);color:var(--ink);
  font-family:var(--body);font-size:16px;line-height:1.5;
  font-weight:400;-webkit-font-smoothing:antialiased;
  /* clip, not hidden: overflow-x:hidden turns body into a scroll container and
     silently breaks position:sticky for everything inside it. */
  overflow-x:clip;
}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--display);font-weight:400;margin:0;letter-spacing:-.01em}
p{margin:0 0 1.15em}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;z-index:99;background:#fff;color:var(--accent);padding:10px 14px}

/* ------------------------------------------------------------------ header */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:50;
  height:var(--head-h);display:flex;align-items:center;
  justify-content:space-between;padding:0 var(--gutter);
  color:var(--accent);
}
/* Banner that slides in behind the nav once the page is scrolled.
   White on interior pages, accent magenta on the home hero. */
.site-header__bg{
  position:absolute;inset:0;z-index:0;
  background:var(--white);opacity:0;
  transition:opacity .5s ease;
  box-shadow:0 1px 0 rgba(0,0,0,.06);
}
.site-header--light .site-header__bg{background:var(--accent);box-shadow:none}
.site-header.is-banner .site-header__bg{opacity:1}
/* sub pages keep the white bar permanently, so it is never scroll-dependent */
.site-header:not(.site-header--light) .site-header__bg{opacity:1}
/* ...and their content starts below it rather than sliding underneath */
.site-header:not(.site-header--light) ~ main{padding-top:var(--head-h)}
.brand,.site-nav,.burger{position:relative;z-index:1}

/* Scroll position indicator, in place of relying on the native bar */
.scroll-progress{
  position:fixed;top:0;left:0;width:100%;height:4px;z-index:80;
  background:var(--accent);transform:scaleX(0);transform-origin:0 50%;
  will-change:transform;pointer-events:none;
}
/* pages that open straight into content get a little extra breathing room */
main > .split:first-child{padding-top:clamp(32px,5vw,72px)}

/* slimmer, on-brand native scrollbar */
html{scrollbar-width:thin;scrollbar-color:var(--accent) rgba(0,0,0,.06)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:rgba(0,0,0,.05)}
::-webkit-scrollbar-thumb{background:var(--accent);border-radius:6px;border:2px solid transparent;background-clip:content-box}
.brand{display:block;line-height:0}
.brand__mark{width:124px;height:auto}
.brand__mark--white{display:none;width:124px}
.site-header--light .brand__mark--orange{display:none}
.site-header--light .brand__mark--white{display:block}
.site-header--light,
.site-header--light .site-nav a,
.site-header--light .site-nav button{color:var(--white)}
/* dropdown panels are always white, so their links stay accent-coloured
   regardless of whether the header is in its light or dark variant */
.site-header .site-nav .sub a{color:var(--accent)}
.site-header .site-nav .sub a:hover{background:var(--accent);color:var(--white);text-decoration:none}
.site-header--light .burger span{background:var(--white)}
.site-nav{display:flex;align-items:center;gap:34px;font-size:20px}
.site-nav a,.site-nav button{
  color:var(--accent);text-decoration:none;background:none;border:0;
  font:inherit;cursor:pointer;padding:4px 0;
}
.site-nav a:hover,.site-nav button:hover{text-decoration:underline;text-underline-offset:4px}
.has-sub{position:relative}
.has-sub>button::after{content:"";display:inline-block;margin-left:6px;border:4px solid transparent;border-top-color:currentColor;transform:translateY(2px)}
.sub{
  position:absolute;left:50%;transform:translateX(-50%);top:100%;
  background:var(--white);min-width:150px;padding:8px 0;
  box-shadow:0 8px 28px rgba(0,0,0,.14);border-radius:4px;
  display:none;
}
.has-sub:hover .sub,.has-sub:focus-within .sub,.has-sub.open .sub{display:block}
.sub a{display:block;padding:10px 22px;white-space:nowrap;font-size:18px}
.social{display:inline-flex;gap:16px;margin-left:10px}
.social a{display:inline-flex}
.social svg{width:20px;height:20px}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px}
.burger span{display:block;width:24px;height:2px;background:var(--accent)}

/* ------------------------------------------------------------------- heroes */
.hero-home{
  position:relative;overflow:hidden;
  min-height:100vh;              /* fallback first for older iOS Safari */
  min-height:100svh;
  background:var(--accent-deep);
  display:flex;align-items:center;justify-content:center;text-align:center;
}
.hero-home__video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;z-index:0;pointer-events:none;
}
.hero-home__mark{position:relative;z-index:1}
.hero-home__mark img{width:min(460px,62vw);height:auto}
.hero-band{width:100%;aspect-ratio:16/5;overflow:hidden;background:var(--mint)}
.hero-band__img{width:100%;height:100%;object-fit:cover}
.hero-project{width:100%;height:min(78svh,820px);overflow:hidden;background:var(--mint)}
.hero-project__img{
  width:100%;height:100%;object-fit:cover;
  transform-origin:50% 50%;
  animation:kenburns 12s ease-in-out infinite alternate;
}
@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.12)}}

/* -------------------------------------------------------------- split layout */
.split{
  max-width:var(--maxw);margin:0 auto;padding:clamp(48px,7vw,96px) var(--gutter);
  display:grid;grid-template-columns:var(--col-label) minmax(0,1fr);gap:clamp(24px,4vw,64px);
}
.split--wide .split__body{max-width:none}
.sec-head{display:flex;align-items:baseline;gap:12px}
.sec-head__mark{color:var(--accent);font-size:20px;line-height:1}
.sec-head h2{font-size:clamp(20px,2vw,26px)}
.split__body{max-width:900px}
.lead{
  font-family:var(--body);font-weight:700;color:var(--accent);
  font-size:clamp(17px,1.5vw,20px);line-height:1.45;margin-bottom:2em;max-width:44em;
}
.prose{max-width:66ch;color:var(--ink-soft);font-size:15px;line-height:1.65}
.prose p{margin-bottom:1.3em}
.link-accent{color:var(--accent);text-decoration:underline;text-underline-offset:3px;font-size:14px}

/* ----------------------------------------------------------------- services */
.svc-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2vw,28px)}
.svc__img{aspect-ratio:1/1;border-radius:10px;overflow:hidden;background:var(--mint);margin-bottom:14px}
.svc__img img{width:100%;height:100%;object-fit:cover}
.svc__title{
  font-family:var(--body);font-weight:700;font-size:15px;color:var(--accent);
  text-decoration:underline;text-underline-offset:3px;margin-bottom:.7em;
}
.svc p{font-size:14px;line-height:1.6;color:var(--ink-soft)}

/* --------------------------------------------------------------------- team */
.person-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,40px);margin-top:clamp(32px,5vw,64px);max-width:1000px}
.person__img{display:block;aspect-ratio:4/5;border-radius:10px;overflow:hidden;background:var(--mint);margin-bottom:16px}
.person__img img{width:100%;height:100%;object-fit:cover}
.person h3{font-family:var(--body);font-weight:700;font-size:15px;margin-bottom:2px}
.person__role{font-size:14px;color:var(--ink-soft);margin-bottom:1em}

/* ---------------------------------------------------------------------- bio */
.bio-name{font-family:var(--body);font-weight:700;font-size:17px;margin-bottom:1.6em}
.bio-name span{font-weight:400;color:var(--ink-soft)}
.bio-cols{display:grid;grid-template-columns:300px minmax(0,1fr);gap:clamp(28px,4vw,56px);align-items:start}
/* The portrait and the registrations share one mint card, as on the original.
   All three bios use the card, so the column reads the same whether or not a
   principal carries registrations. */
.bio-portrait{background:var(--mint);border-radius:14px;padding:10px 10px 4px;overflow:hidden}
.bio-portrait img{border-radius:10px;width:100%;aspect-ratio:4/5;object-fit:cover;background:var(--mint)}
.bio-sub{font-family:var(--body);font-weight:700;font-size:14px;margin:1.5em 0 .7em;padding:0 6px;color:var(--white)}
.bio-regs{
  margin:0;padding:0 6px 18px;list-style:none;
  font-size:14px;color:var(--white);line-height:1.5;
}
.bio-regs li+li{margin-top:1em}

/* ----------------------------------------------------------- projects index */
.card-grid-wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter) clamp(56px,8vw,110px)}
.card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.4vw,34px)}
.card{position:relative;display:block;text-decoration:none;border-radius:12px;overflow:hidden;background:var(--mint);box-shadow:0 10px 30px rgba(0,0,0,.10)}
.card__img{aspect-ratio:4/3;overflow:hidden}
.card__img img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.card:hover .card__img img{transform:scale(1.05)}
.card::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:var(--accent);opacity:0;transition:opacity .35s;
}
.card:hover::after,.card:focus-visible::after{opacity:.88}
.card__label{
  position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;
  text-align:center;padding:18px;color:var(--white);font-weight:600;font-size:15px;
  letter-spacing:.01em;pointer-events:none;
  opacity:0;transform:translateY(8px);transition:opacity .3s ease,transform .3s ease;
}
.card:hover .card__label,.card:focus-visible .card__label{opacity:1;transform:none}

/* -------------------------------------------------------------- project page */
.proj-intro{
  max-width:var(--maxw);margin:0 auto;padding:clamp(40px,5.5vw,72px) var(--gutter);
  display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,.75fr);gap:clamp(28px,5vw,80px);
}
.proj-title{font-size:clamp(28px,3.2vw,44px);line-height:1.15;margin-bottom:.15em}
.proj-loc{font-size:clamp(15px,1.4vw,19px);color:var(--ink-soft);margin-bottom:1.6em}
.proj-q{color:var(--accent);font-weight:700;font-size:clamp(15px,1.25vw,17px);line-height:1.5;margin-bottom:1.8em;max-width:34em}
.meta{margin:.5em 0 0;font-size:14px}
.meta__row{margin-bottom:1.35em}
.meta dt{display:inline;font-weight:700}
.meta dd{display:inline;margin:0 0 0 .4em;color:var(--ink-soft)}

.pullquote{
  position:relative;max-width:var(--maxw);margin:0 auto;
  padding:clamp(48px,8vw,120px) var(--gutter);overflow:hidden;
}
.pullquote::before,.pullquote::after{
  content:"";position:absolute;background:var(--mint);border-radius:999px;z-index:0;
}
.pullquote::before{width:190px;height:78px;left:-40px;top:38%;transform:rotate(-38deg)}
.pullquote::after{width:230px;height:96px;right:-60px;bottom:12%;transform:rotate(-38deg)}
.pullquote blockquote{
  position:relative;z-index:1;margin:0 auto;max-width:1080px;
  font-family:var(--display);color:var(--accent);
  font-size:clamp(24px,3.9vw,55px);line-height:1.3;
}
.feature{width:100%;height:min(72svh,760px);overflow:hidden;background:var(--mint)}
.feature__img{width:100%;height:100%;object-fit:cover}

.gallery-wrap{max-width:var(--maxw);margin:0 auto;padding:clamp(40px,6vw,84px) var(--gutter)}
.gallery{
  display:flex;gap:clamp(14px,1.8vw,26px);
  overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;
  padding:4px 4px 18px;scrollbar-width:thin;scrollbar-color:var(--accent) var(--mint);
}
.gallery::-webkit-scrollbar{height:6px}
.gallery::-webkit-scrollbar-track{background:var(--mint);border-radius:999px}
.gallery::-webkit-scrollbar-thumb{background:var(--accent);border-radius:999px}
.gallery__item{
  margin:0;border-radius:12px;overflow:hidden;background:var(--mint);
  box-shadow:0 8px 26px rgba(0,0,0,.12);aspect-ratio:4/3;
  flex:0 0 clamp(215px,25vw,310px);scroll-snap-align:start;
}
.gallery__item img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.gallery__item:hover img{transform:scale(1.06)}
.proj-next{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter) clamp(48px,7vw,96px)}

/* ------------------------------------------------------------------- footer */
.site-footer{background:var(--accent);color:var(--white)}
.site-footer__in{
  max-width:var(--maxw);margin:0 auto;padding:clamp(40px,5vw,72px) var(--gutter);
  display:flex;align-items:flex-end;justify-content:space-between;gap:32px;flex-wrap:wrap;
}
.foot-brand{display:block;text-decoration:none;color:var(--white)}
.foot-brand img{width:150px;height:auto}
.foot-right{display:flex;flex-direction:column;align-items:flex-end;gap:16px}
.foot-social{display:flex;gap:10px}
.foot-social a{
  display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;
  border:1.5px solid var(--white);border-radius:7px;color:var(--white);
}
.foot-social a:hover{background:var(--white);color:var(--accent)}
.foot-mail{font-weight:700;font-size:14px;text-decoration:none}
.foot-mail:hover{text-decoration:underline;text-underline-offset:3px}

/* ---------------------------------------------------------------- responsive */
@media (max-width:1080px){
  .svc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .person-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .split{grid-template-columns:1fr;gap:22px}
  .proj-intro{grid-template-columns:1fr;gap:32px}
  .bio-cols{grid-template-columns:1fr}
  .bio-portrait img{max-width:320px}
}
@media (max-width:720px){
  :root{--head-h:88px}
  /* full-screen overlay menu */
  .site-nav{
    position:fixed;inset:0;z-index:60;background:var(--accent-deep);
    flex-direction:column;align-items:center;justify-content:center;
    gap:0;padding:calc(var(--head-h) + 20px) var(--gutter) 120px;
    display:none;overflow-y:auto;
  }
  .site-header.open .site-nav{display:flex}
  .site-header.open .site-nav a,
  .site-header.open .site-nav button{color:var(--white)}
  .site-nav > a,.has-sub > button{
    padding:18px 0;width:auto;text-align:center;font-size:32px;letter-spacing:-.01em;
  }
  .site-nav a:hover,.site-nav button:hover{text-decoration:none}
  .has-sub{width:auto;display:flex;flex-direction:column;align-items:center}
  .has-sub>button::after{
    content:"";display:inline-block;margin-left:12px;transform:translateY(-2px) rotate(45deg);
    width:13px;height:13px;border:0;border-top:2px solid currentColor;border-right:2px solid currentColor;
  }
  .sub{
    position:static;transform:none;display:none;box-shadow:none;background:none;
    padding:0 0 10px;min-width:0;border-radius:0;
  }
  .has-sub.open .sub{display:block}
  .sub a{text-align:center;font-size:21px;padding:12px 0}
  .site-header .site-nav .sub a{color:rgba(255,255,255,.82)}
  .site-header .site-nav .sub a:hover{background:none;color:var(--white)}
  /* social row pinned toward the bottom of the overlay */
  .social{position:absolute;left:0;right:0;bottom:64px;justify-content:center;margin:0;gap:34px}
  .social svg{width:26px;height:26px}
  /* burger turns into a close X while the menu is open */
  .burger{display:flex;z-index:70;position:relative}
  .site-header.open .burger span{background:#111}
  .site-header.open .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .site-header.open .burger span:nth-child(2){opacity:0}
  .site-header.open .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .burger span{transition:transform .25s ease,opacity .2s ease}
  /* keep the mark visible above the overlay, always white while open */
  .brand{z-index:70}
  .brand__mark,.brand__mark--white{width:92px}
  .site-header.open .brand__mark--orange{display:none}
  .site-header.open .brand__mark--white{display:block}
  .site-header.open .site-header__bg{opacity:0}
  body.nav-open{overflow:hidden}
  .social{margin:10px 0 0}
  .hero-band{aspect-ratio:3/2}
  .hero-project{height:56svh}
  .svc-grid,.card-grid,.person-grid{grid-template-columns:1fr}
  .gallery{grid-template-columns:repeat(2,minmax(0,1fr))}
  .site-footer__in{flex-direction:column;align-items:flex-start}
  .foot-right{align-items:flex-start}
  .pullquote blockquote{max-width:none}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .scroll-progress{transition:none}
}

/* project intro prose fills its grid column rather than the default measure */
.proj-intro__main .prose,
.proj-intro__main .prose p{max-width:none}

@media (prefers-reduced-motion:reduce){
  .hero-project__img{animation:none}
  .card__label,.card::after,.gallery__item img{transition:none}
}

/* --------------------------------------------------------------- lightbox */
.lightbox{
  position:fixed;inset:0;z-index:90;display:none;
  align-items:center;justify-content:center;gap:clamp(8px,2vw,28px);
  padding:clamp(16px,4vw,56px);
  background:rgba(17,17,17,.92);
}
.lightbox.is-open{display:flex}
.lightbox__img{
  max-width:min(1160px,80vw);max-height:86svh;
  width:auto;height:auto;object-fit:contain;border-radius:8px;
}
.lightbox__close,.lightbox__nav{
  background:none;border:0;color:var(--white);line-height:1;
  padding:10px 16px;font-family:var(--body);
}
.lightbox__close{
  position:absolute;top:clamp(10px,2vw,26px);right:clamp(10px,2vw,26px);
  font-size:40px;
}
.lightbox__nav{font-size:clamp(38px,5vw,64px);flex:0 0 auto}
.lightbox__close:hover,.lightbox__nav:hover{color:var(--accent)}
.lightbox__close:focus-visible,.lightbox__nav:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (max-width:720px){
  .lightbox__nav{font-size:32px;padding:8px}
  .lightbox__img{max-width:96vw}
}

/* ------------------------------------------------- project scroll layering */
/* The full-bleed images pin to the top of the viewport while the content
   panels that follow them ride up and cover them, so the page reads as a
   stack of tiles rather than one continuous scroll. This is what the original
   does between the lead image and the intro, and again between the feature
   image and the gallery.

   The images sit on the lower layer and stay in normal flow, so the page
   height is unchanged; only what you see on top of them changes. The panels
   need an opaque background of their own, otherwise the pinned image shows
   straight through them. */
.hero-project,
.feature{
  /* pinned below the header, not at 0: interior pages carry an opaque white
     bar, and pinning to 0 buries the top of the image behind it */
  position:sticky;top:var(--head-h);z-index:0;
}
.proj-intro,
.pullquote,
.gallery-wrap,
.proj-next,
.site-footer{
  position:relative;z-index:1;background:var(--white);
}
.site-footer{background:var(--accent)}

@media (prefers-reduced-motion:reduce){
  /* scroll-linked stacking is exactly the effect this setting asks us to drop */
  .hero-project,.feature{position:static}
}

/* ---------------------------------------------------------------- wordmark */
/* Type-set RVI mark, standing in until the studio supplies a logo file.     */
.wordmark{
  display:inline-block;font-family:var(--display);font-size:44px;line-height:1;
  letter-spacing:.02em;color:var(--accent);
}
.site-header--light .wordmark,.site-header.open .wordmark{color:var(--white)}
.wordmark--stack{display:inline-flex;flex-direction:column;align-items:center;color:var(--white)}
.wordmark--stack small{
  font-family:var(--body);font-weight:600;font-size:.24em;letter-spacing:.42em;
  text-transform:uppercase;margin-top:.7em;padding-left:.42em;
}
.foot-brand .wordmark{font-size:58px}
.wordmark--hero{font-size:clamp(96px,17vw,220px);margin:0}
@media (max-width:720px){.brand .wordmark{font-size:34px}}

/* ------------------------------------------------------- home slideshow */
/* Crossfading photographs under a magenta overlay, in place of the LILA
   video. Each slide holds for a few seconds with a slow push-in.            */
.hero-home__slides{position:absolute;inset:0;z-index:0}
.hero-home__slide{
  position:absolute;inset:0;background:center/cover no-repeat;
  opacity:0;animation:slide 24s infinite;
}
.hero-home__slide:nth-child(2){animation-delay:6s}
.hero-home__slide:nth-child(3){animation-delay:12s}
.hero-home__slide:nth-child(4){animation-delay:18s}
@keyframes slide{
  0%{opacity:0;transform:scale(1)}
  6%{opacity:1}
  25%{opacity:1}
  31%{opacity:0;transform:scale(1.08)}
  100%{opacity:0}
}
.hero-home__overlay{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:var(--accent);mix-blend-mode:multiply;opacity:.78;
}
@media (prefers-reduced-motion:reduce){
  .hero-home__slide{animation:none}
  .hero-home__slide:first-child{opacity:1}
}

/* ---------------------------------------------------- portrait placeholders */
/* Magenta panels with a monogram until headshots arrive.                     */
.person__img--ph,.bio-portrait__ph{
  display:flex;align-items:center;justify-content:center;
  background:var(--accent);color:var(--white);text-decoration:none;
  font-family:var(--display);
}
.person__img--ph span{font-size:clamp(72px,9vw,120px);opacity:.9}
.bio-portrait__ph{aspect-ratio:4/5;border-radius:10px;font-size:120px;max-width:320px}
.bio-portrait{background:var(--mint)}
.bio-sub,.bio-regs{color:var(--ink)}