/* ------------------------------------------------------------------ tokens */
:root{
  --accent:#FF5000;
  --accent-deep:#E8450F;
  --ink:#111111;
  --ink-soft:#3A3A3A;
  --white:#FFFFFF;
  --mint:#DCE7DD;
  --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 orange 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) url('/assets/img/home-bg-poster.jpg') center/cover no-repeat;
  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}
  .hero-home__video{display:none}
  .hero-home{background-image:url('/assets/img/home-bg-poster.jpg')}
}

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

/* ------------------------------------------------------------ brand cursor */
/* The modified "A" from the LILA mark, standing in for the pointer.          */
/* Fine pointers only, so touch devices and assistive setups are untouched.   */
/* Rotated 71.28deg so the left leg of the A stands vertical; the hotspot sits
   on the apex, which that rotation brings to the top of the glyph.            */
@media (hover:hover) and (pointer:fine){
  body{cursor:url("/assets/img/cursor-a.png") 2 0,auto}
  a,button,summary,label,select,[role="button"],.burger,.card,.gallery__item,
  /* .site-nav a and .site-nav button set cursor:pointer earlier and outrank a
     bare element selector, so they have to be named explicitly here. */
  .site-nav a,.site-nav button,.sub a{
    cursor:url("/assets/img/cursor-a-lg.png") 3 0,pointer;
  }
  input,textarea{cursor:text}

  /* Black reads fine on the accent orange; the lightbox is the one ground dark
     enough to swallow it, so that gets the white mark. */
  .lightbox{cursor:url("/assets/img/cursor-a-white.png") 2 0,auto}
  .lightbox button{cursor:url("/assets/img/cursor-a-lg-white.png") 3 0,pointer}
}

@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}
}