/* =========================================================
   project.css — shared stylesheet for /work/ project-detail pages.
   See CLAUDE.md §Project detail pages and .claude/design-system.md.
   Page-specific overrides: keep them inline on the element
   (e.g. .hero-bg background-image) or in a small per-page
   <style> block at the end of <head>.
   ========================================================= */

:root{
  --bg:#fff; --ink:#0a0a0a;
  --ink-60:rgba(10,10,10,.6); --ink-15:rgba(10,10,10,.15); --ink-08:rgba(10,10,10,.08);
  --ink-40:var(--ink-60);
  --inv-bg:#0a0a0a; --inv-ink:#fff;
  --inv-60:rgba(255,255,255,.6); --inv-15:rgba(255,255,255,.15);
  --inv-40:var(--inv-60); --inv-08:var(--inv-15);
  --placeholder:#111;
  --nav-h:84px; --nav-h-sm:60px; --jump-h:36px;
  --pad:max(28px,4vw); --pad-lg:max(44px,6vw,calc((100vw - 2000px) / 2));
  --sans:'Plus Jakarta Sans','Helvetica Neue',Helvetica,Arial,sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
  /* Type scale. See .claude/type-color.md */
  --t1:clamp(40px,5.5vw,88px);         /* Headline */
  --t-lede:clamp(28px,3.2vw,52px);     /* Lede (manifesto) */
  --t2:clamp(20px,1.7vw,28px);         /* Title */
  --t3:clamp(16px,1.1vw,18px);         /* Body */
  --t4:13px;                            /* Label */
  /* Spacing scale — 5 tiers. See .claude/type-color.md §3 */
  --s1:clamp(32px,3.2vw,56px);   /* Section padding */
  --s2:clamp(20px,2.4vw,36px);   /* Block separator */
  --s3:clamp(16px,1.8vw,28px);   /* List / grid item gap */
  --s4:12px;                      /* Text-to-text */
  --s5:6px;                       /* Caption couple */
  /* Legacy aliases */
  --sec-y:var(--s1);
  --sec-head-mb:var(--s2);
  --list-item-y:var(--s3);
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0;background:#0a0a0a}
html{overflow-x:clip;background:var(--inv-bg)}
body{background:var(--inv-bg);color:var(--ink);font-family:var(--sans);font-weight:400;font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;letter-spacing:-.01em;overflow-x:hidden;max-width:100vw;position:relative}
/* Page transition + fade-up live in css/transition.css (linked separately). */
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
ul,ol{list-style:none;padding:0;margin:0}
h1,h2,h3,h4,h5,h6,p,blockquote{margin:0}

/* Skip-to-content link — visible only on keyboard focus */
.skip-link{position:absolute;top:-100%;left:var(--pad-lg);padding:8px 16px;background:var(--ink);color:var(--inv-ink);font-size:var(--t4);z-index:200;border-radius:0 0 4px 4px;transition:top .2s}
.skip-link:focus-visible{top:0}

/* T4 label role: 500 weight, .12em tracking. (.spec-label is promoted to T2 - see below.) */
.micro,.hero-eyebrow,.section-num,.team-role,.team-footnote,.tile-caption,.rep-title,.pnav-eyebrow,.pnav-sub,.gallery-count,.lightbox-counter{font-weight:500!important;letter-spacing:.12em!important}
/* Button role: interactive CTAs, nav links - .2em tracking. */
.link{font-weight:500!important;letter-spacing:.2em!important}

.micro{font-family:var(--sans);font-size:13px;font-weight:400;letter-spacing:.06em;text-transform:lowercase;color:var(--ink-60)}
.micro--inv{color:var(--inv-60)}
.link{display:inline-flex;align-items:baseline;gap:.6em;font-family:var(--sans);font-size:13px;text-transform:lowercase;border-bottom:1px solid currentColor;padding-bottom:6px;transition:gap .3s var(--ease)}
.link-arrow{transition:transform .3s var(--ease)}
.link:hover{gap:1em}
.link:hover .link-arrow{transform:translateX(3px)}
.link--inv{color:var(--inv-ink)}

/* ── Navbar ── */
#navbar{view-transition-name:navbar;position:fixed;top:0;left:0;right:0;z-index:100;height:var(--nav-h);display:grid;grid-template-columns:1fr auto;align-items:center;padding:0 var(--pad);color:var(--inv-ink);transition:background .4s var(--ease),color .4s var(--ease),height .4s var(--ease),border-color .4s var(--ease);border-bottom:1px solid transparent}
#navbar.scrolled{height:var(--nav-h-sm);background:rgba(10,10,10,.94);border-bottom-color:rgba(255,255,255,.08);backdrop-filter:saturate(160%) blur(14px);-webkit-backdrop-filter:saturate(160%) blur(14px)}
/* Keep navbar opaque while the mobile menu is open so the logo stays legible. */
body.menu-open #navbar{background:rgba(10,10,10,.94);border-bottom-color:rgba(255,255,255,.08);backdrop-filter:saturate(160%) blur(14px);-webkit-backdrop-filter:saturate(160%) blur(14px)}
.nav-logo{display:inline-block;line-height:0}
.nav-logo-img{height:32px;width:auto;display:block}
.nav-links{display:flex;gap:clamp(18px,2.2vw,32px);font-family:var(--sans);font-size:15px;font-weight:500}
.nav-links a{padding:6px 0;color:var(--inv-ink);transition:color .25s var(--ease)}
.nav-links a:hover,.nav-links a.active,.nav-overlay a.active{color:var(--inv-60)}
.nav-toggle{display:none;width:28px;height:22px;flex-direction:column;justify-content:space-between}
.nav-toggle span{height:1px;background:currentColor;width:100%}
/* Mobile nav overlay: auto-height, 280ms slide-down. */
.nav-overlay{display:flex;position:fixed;top:0;left:0;right:0;z-index:99;background:var(--ink);color:var(--inv-ink);padding:var(--nav-h) var(--pad) var(--s2);flex-direction:column;gap:24px;font-size:28px;border-bottom:1px solid var(--inv-15);transform:translateY(-100%);opacity:0;pointer-events:none;transition:transform .28s var(--ease),opacity .22s var(--ease)}
.nav-overlay.is-open{transform:translateY(0);opacity:1;pointer-events:auto}
@media (max-width:800px){.nav-links{display:none}.nav-toggle{display:flex}}

/* ── Hero ──
   NOTE: each project page sets .hero-bg's background-image inline on the
   element (so per-project artwork is data, not style). */
.hero{position:relative;min-height:100svh;background:var(--inv-bg);color:var(--inv-ink);overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;padding:0 var(--pad-lg) clamp(56px,6vw,88px)}
/* Two layered animations:
   1. opacity 0→1 over 500ms with 200ms delay (matches home page hero, runs
      on first paint via the `backwards` fill).
   2. transform scale 1.04→1 over 2s (the existing slow ken-burns, triggered
      by .hero.is-loaded which JS adds on window.load). */
/* Hero image: 2s ken-burns zoom (kept) + fade-in synced with the 700/600 image
   timing from the shared system. The fade and zoom layer cleanly because they
   target different properties (opacity vs transform). */
.hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;transform:scale(1.08);transition:transform 3s var(--ease);animation:hero-bg-fade 700ms cubic-bezier(.4,0,.2,1) 300ms backwards}
@keyframes hero-bg-fade{from{opacity:0}to{opacity:1}}
.hero.is-loaded .hero-bg{transform:scale(1)}
@media (prefers-reduced-motion:reduce){.hero-bg{animation:none;transform:none;transition:none}}
.hero-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,10,.55) 0%,rgba(10,10,10,.15) 28%,rgba(10,10,10,.25) 60%,rgba(10,10,10,.82) 100%)}
.hero-inner{position:relative;z-index:2;padding-top:calc(var(--nav-h) + var(--s1))}
.hero-eyebrow{display:flex;align-items:center;gap:14px;margin-bottom:var(--s2);font-family:var(--sans);font-size:13px;letter-spacing:.04em;text-transform:lowercase;color:var(--inv-60)}
.hero-eyebrow-dot{width:6px;height:6px;border-radius:50%;background:var(--inv-ink);opacity:.7}
.hero-title{font-size:var(--t1);line-height:.96;letter-spacing:-.035em;font-weight:500;text-transform:none;max-width:14ch}
.hero-title em{font-style:normal;color:var(--inv-60)}
@media (max-width:760px){.hero-title{max-width:none}}

/* ── Jump nav (shared §9.7 pattern) ── */
.jump-nav{position:fixed;top:0;left:0;right:0;z-index:95;height:var(--jump-h);display:flex;align-items:stretch;gap:0;padding:0 var(--pad-lg);background:rgba(255,255,255,.97);border-bottom:1px solid var(--ink-08);backdrop-filter:saturate(160%) blur(14px);-webkit-backdrop-filter:saturate(160%) blur(14px);overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;transform:translateY(-100%);opacity:0;pointer-events:none;transition:transform .35s var(--ease),opacity .35s var(--ease)}
.jump-nav::-webkit-scrollbar{display:none}
.jump-nav.visible{transform:translateY(var(--nav-h-sm));opacity:1;pointer-events:auto}
.jump-nav-link{display:flex;align-items:center;padding:0 clamp(14px,2vw,24px);font-family:var(--sans);font-size:13px;font-weight:500;color:var(--ink-60);white-space:nowrap;position:relative;transition:color .25s var(--ease)}
.jump-nav-link:hover{color:var(--ink)}
.jump-nav-link.active{color:var(--ink)}
.jump-nav-link.active::after{content:'';position:absolute;left:clamp(14px,2vw,24px);right:clamp(14px,2vw,24px);bottom:6px;height:1px;background:var(--ink)}
.jump-nav-link:first-child{padding-left:0}                           /* align first label with section content at --pad-lg */
.jump-nav-link:first-child.active::after{left:0}
.jump-nav-spacer{flex:1}
.jump-nav-ctrl{display:flex;align-items:center;padding:0 clamp(14px,2vw,20px);font-family:var(--sans);font-size:13px;font-weight:500;color:var(--ink-60);white-space:nowrap;transition:color .25s var(--ease)}
.jump-nav-ctrl:hover{color:var(--ink)}
@media (max-width:640px){.jump-nav{padding:0 var(--pad)}}

/* ── Specs strip ── */
.specs{background:var(--bg);color:var(--ink);padding:var(--s1) var(--pad-lg);border-bottom:1px solid var(--ink-08);display:grid;grid-template-columns:repeat(5,1fr);gap:0}
.spec{padding:0 clamp(20px,2vw,36px);border-right:1px solid var(--ink-08);display:flex;flex-direction:column;gap:var(--s4)}
.spec:first-child{padding-left:0}
.spec:last-child{border-right:none;padding-right:0}
/* Spec cell heading: T2 sub-header (matches contact.html info-cell pattern). Title Case in HTML. */
.spec-label{font-family:var(--sans);font-size:var(--t2);font-weight:500;letter-spacing:0;line-height:1.2;color:var(--ink)}
.spec-val{font-size:var(--t3);font-weight:400;color:var(--ink-60);letter-spacing:-.01em;line-height:1.4}
@media (max-width:900px){.specs{grid-template-columns:1fr 1fr;gap:var(--s3) 0;padding:var(--s1) var(--pad-lg)}.spec{border-right:none;padding:0 clamp(16px,2vw,28px)}.spec:nth-child(odd){padding-left:0;border-right:1px solid var(--ink-08)}.spec:nth-child(even){padding-right:0}}
@media (max-width:520px){.specs{grid-template-columns:1fr}.spec{padding:0 !important;border-right:none !important;padding-bottom:var(--s3) !important;border-bottom:1px solid var(--ink-08)}.spec:last-child{border-bottom:none;padding-bottom:0 !important}}

/* ── Section scaffolding ── */
.section{background:var(--bg);color:var(--ink);padding:var(--s1) var(--pad-lg)}
.section--dark{background:var(--inv-bg);color:var(--inv-ink)}
.section-head{display:grid;grid-template-columns:1fr 2fr;gap:clamp(40px,5vw,100px);align-items:baseline;margin-bottom:var(--s2)}
.section-kicker{display:flex;flex-direction:column;gap:var(--s4)}
.section-num{font-family:var(--sans);font-size:13px;letter-spacing:.08em;color:var(--ink-60);text-transform:lowercase}
.section--dark .section-num{color:var(--inv-60)}
/* No margin-top: the parent .section-kicker already provides S4 spacing via its flex gap
   (between eyebrow and title). Keeping both would double the gap to 24px. */
.section-title{font-size:var(--t1);letter-spacing:-.035em;line-height:.96;font-weight:500;text-transform:none}
/* Section lede = primary content of its section, so full ink on both light and dark (matches home's morph body pattern). */
.section-lede{font-size:var(--t3);font-weight:400;line-height:1.6;color:var(--ink);max-width:52ch}
.section--dark .section-lede{color:var(--inv-ink)}
@media (max-width:760px){.section-head{grid-template-columns:1fr;gap:var(--s4)}}

/* ── Overview ──
   Inside .overview-col the lede reads at the same tier as the body
   paragraphs below it (same font-size, line-height, color), so the
   first paragraph doesn't visually out-shout the rest. Outside
   .overview-col (on other pages/sections), .section-lede keeps its
   larger standalone style. */
.overview-col{display:flex;flex-direction:column;gap:var(--s3);max-width:68ch}
.overview-col .section-lede{max-width:none;font-size:var(--t3);line-height:1.6}
.overview-body{display:flex;flex-direction:column;gap:var(--s3)}
/* Primary-content body text: full ink (inv-ink on dark section). */
.overview-body p{font-size:var(--t3);font-weight:400;line-height:1.6;color:var(--inv-ink);margin:0}
/* Pull-quote in overview's right column - T1 size, gray, right-aligned, vertically centered. */
.overview-pullquote{font-size:var(--t1);font-weight:400;letter-spacing:-.035em;line-height:.96;color:var(--ink-60);text-wrap:balance;text-align:right;align-self:center}
.section--dark .overview-pullquote{color:var(--inv-60)}

/* Overview grid layout: on desktop the pull-quote sits on the right, spanning the h2 + body rows.
   On mobile the order is head -> pull-quote -> body (pull-quote pulls up between the two). */
.overview-layout{grid-template-columns:7fr 5fr;grid-template-areas:"head pull" "body pull";column-gap:var(--s3);row-gap:var(--s4);align-items:start}
.overview-layout .section-kicker{grid-area:head}
.overview-layout .overview-pullquote{grid-area:pull}
.overview-layout .overview-col{grid-area:body}
@media (max-width:760px){
  .overview-layout{grid-template-columns:1fr;grid-template-areas:"head" "pull" "body"}
  .overview-layout .overview-pullquote{align-self:auto;text-align:left}
}

/* ── Gallery ── */
.gallery-wrap{background:var(--bg);color:var(--ink);padding:var(--s1) var(--pad-lg)}
.gallery-head{display:flex;justify-content:space-between;align-items:baseline;gap:32px;margin-bottom:var(--s2)}
.gallery-head .micro{color:var(--ink-60)}
.gallery-count{font-family:var(--sans);font-size:13px;letter-spacing:.08em;color:var(--ink-40);text-transform:lowercase}
/* Gallery tile system — uniform 3-col grid, every tile 4/3 aspect.
   tile-variant classes (--full/--wide/--tall/--sq) are reset to the default size
   so existing markup keeps working without a rewrite. */
.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5)}
.tile{position:relative;overflow:hidden;background:var(--placeholder);cursor:pointer;aspect-ratio:4/3}
.tile--sq,.tile--wide,.tile--tall,.tile--full{grid-column:auto;grid-row:auto;aspect-ratio:4/3}
.tile-bg{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform 1.1s var(--ease),filter 1.1s var(--ease)}
.tile:hover .tile-bg{transform:scale(1.04);filter:brightness(1.06)}
/* Tile captions are currently disabled site-wide.
   The HTML is intentionally preserved:
     - every .tile keeps its data-caption attribute (used as the
       lightbox img alt and as the source-of-truth caption text)
     - every .tile keeps its <span class="tile-caption"> element
   To re-enable hover captions, delete the `display:none` on
   .tile-caption below. The rest of the rules (position, hover
   fade-in) are left in place so captions return to their prior
   styling as soon as the hide is removed. */
.tile-caption{display:none;position:absolute;left:clamp(18px,1.8vw,28px);bottom:clamp(18px,1.8vw,28px);z-index:2;font-family:var(--sans);font-size:13px;letter-spacing:.08em;color:var(--inv-ink);text-transform:lowercase;opacity:0;transition:opacity .4s var(--ease);text-shadow:0 1px 6px rgba(0,0,0,.4)}
.tile:hover .tile-caption{opacity:1}
@media (max-width:900px){
  .gallery-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .gallery-grid{grid-template-columns:1fr}
}

/* ── Team ── */
.team{display:grid;grid-template-columns:repeat(2,1fr);border-top:1px solid var(--ink-15)}
.team-row{display:grid;grid-template-columns:1fr 1.4fr;gap:24px;padding:var(--s3) clamp(24px,2.4vw,36px);border-bottom:1px solid var(--ink-08);border-right:1px solid var(--ink-08);align-items:baseline}
/* Column 1 left edge aligns with the "Team" header; column 2 right edge aligns with grid right edge. */
.team-row:nth-child(odd){padding-left:0}
.team-row:nth-child(even){padding-right:0}
.team-row:nth-child(2n){border-right:none}
/* Team role keeps Title Case from HTML (no forced lowercase) - matches the site's quote-title convention. */
.team-role{font-family:var(--sans);font-size:13px;letter-spacing:.04em;color:var(--ink-60);font-weight:400}
.team-name{font-size:var(--t3);font-weight:400;color:var(--ink);letter-spacing:-.01em;line-height:1.35}
.team-name.is-us{font-weight:500}
.team-name.is-us::after{content:'';display:inline-block;width:6px;height:6px;background:var(--ink);border-radius:50%;margin-left:8px;vertical-align:middle;transform:translateY(-2px)}
.section--dark .team{border-top-color:var(--inv-15)}
.section--dark .team-row{border-bottom-color:var(--inv-15);border-right-color:var(--inv-15)}
.section--dark .team-role{color:var(--inv-60)}
.section--dark .team-name{color:var(--inv-ink)}
.section--dark .team-name.is-us::after{background:var(--inv-ink)}
/* AIA credential badge: 13px tier (out of T1-T4 was drift). */
.team-note{font-size:13px;vertical-align:super;line-height:0;margin-left:3px;color:var(--ink-60);font-weight:400}
.section--dark .team-note{color:var(--inv-60)}
.team-footnote{font-family:var(--sans);font-size:13px;letter-spacing:.04em;line-height:1.55;color:var(--ink-60);padding-top:var(--s3);white-space:nowrap}
.section--dark .team-footnote{color:var(--inv-60)}
.team-footnote .team-note{color:inherit;margin-left:0}
/* Mobile: single column list, every row flush-left (no alternating indentation from odd/even padding rules above). */
@media (max-width:760px){
  .team,.team-row{grid-template-columns:1fr}
  .team-row{border-right:none !important;padding-left:0 !important;padding-right:0 !important}
  .team-footnote{white-space:normal}
}

/* ── Reputation (matches company §reputation) ── */
.reputation{padding:var(--s1) var(--pad-lg);background:var(--bg)}
.rep-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:1px solid var(--ink-15)}
.rep-item{padding:var(--s3) clamp(24px,2.5vw,40px);border-bottom:1px solid var(--ink-15);display:flex;flex-direction:column;gap:var(--s2);margin:0}
/* Column 1 left edge aligns with the section header; column 2 right edge aligns with grid right edge. Matches company.html reputation. */
.rep-item:nth-child(odd){padding-left:0;border-right:1px solid var(--ink-15)}
.rep-item:nth-child(even){padding-right:0}
.rep-body{font-size:var(--t3);line-height:1.6;color:var(--ink);font-weight:400;text-wrap:pretty}
/* Attribution sits below quote with spacing only - no divider line. Matches company page. */
.rep-attrib{display:flex;flex-direction:column;gap:var(--s5);padding-top:var(--s3);margin-top:auto}
/* Attribution name matches home/company: T2 sub-header, 0 tracking. */
.rep-name{font-size:var(--t2);letter-spacing:0;font-weight:500;line-height:1.2}
.rep-title{font-family:var(--sans);font-size:13px;letter-spacing:.02em;color:var(--ink-60);line-height:1.45}
@media (max-width:760px){.rep-grid{grid-template-columns:1fr}.rep-item{border-right:none !important;padding:clamp(24px,4vw,36px) 0}}

/* ── Project nav (prev/next) ── */
.pnav{background:var(--inv-bg);color:var(--inv-ink);padding:var(--s1) var(--pad-lg);display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3vw,48px)}
.pnav-cell{display:flex;flex-direction:column;gap:var(--s4);transition:transform .45s var(--ease)}
.pnav-cell--next{text-align:right;align-items:flex-end}
.pnav-cell:hover{transform:translateX(-8px)}
.pnav-cell--next:hover{transform:translateX(8px)}
.pnav-eyebrow{font-family:var(--sans);font-size:13px;letter-spacing:.08em;color:var(--inv-60);text-transform:lowercase;display:inline-block;align-self:flex-start;border-bottom:1px solid currentColor;padding-bottom:var(--s5);transition:color .3s var(--ease)}
.pnav-cell--next .pnav-eyebrow{align-self:flex-end}
.pnav-title{font-size:var(--t2);font-weight:500;line-height:1.2;letter-spacing:0;color:var(--inv-ink);text-transform:none;transition:opacity .3s var(--ease)}
/* Keeps Title Case from HTML (no text-transform) so partner names like "OMA New York" read naturally. */
.pnav-sub{font-family:var(--sans);font-size:13px;letter-spacing:.04em;color:var(--inv-60);margin-top:var(--s5);transition:color .3s var(--ease)}
.pnav-arrow{display:inline-block;transition:transform .45s var(--ease)}
.pnav-cell:hover .pnav-arrow{transform:translateX(-5px)}
.pnav-cell--next:hover .pnav-arrow{transform:translateX(5px)}
.pnav-cell:hover .pnav-eyebrow,.pnav-cell:hover .pnav-sub{color:var(--inv-ink)}
@media (max-width:760px){.pnav{grid-template-columns:1fr}.pnav-cell--next{text-align:left;align-items:flex-start}.pnav-cell--next:hover{transform:translateX(-8px)}.pnav-cell--next .pnav-eyebrow{align-self:flex-start}}

/* ── CTA (matches home/company pattern) ── */
.cta{position:relative;background:var(--bg);padding:var(--s1) var(--pad-lg);overflow:hidden}
.cta-inner{position:relative;z-index:1;max-width:1200px}
.cta-h{font-size:var(--t1);line-height:.96;letter-spacing:-.035em;font-weight:500;margin-top:var(--s4);text-wrap:balance;white-space:nowrap}
@media (max-width:620px){.cta-h{white-space:normal}}

/* ── Footer (shared v1.2 pattern, matches home/company/contact verbatim) ── */
.footer{background:var(--inv-bg);color:var(--inv-ink);padding:var(--s1) var(--pad-lg) 24px}
.footer-top{display:grid;grid-template-columns:2fr 1fr 1fr;gap:var(--s3);padding-bottom:var(--s4)}
.footer-nav{display:flex;flex-direction:column;gap:var(--s4);align-items:flex-start}
.footer-nav a{color:var(--inv-ink);font-size:var(--t3);font-weight:400;line-height:1.5;transition:color .25s var(--ease)}
.footer-nav a:hover{color:var(--inv-60)}
.footer-nav a.here{color:var(--inv-60)}
.footer-logo{display:inline-block;line-height:0;margin-bottom:var(--s4);transform:translateX(-7px)}
.footer-logo-img{height:32px;width:auto;display:block}
.footer-tagline{color:var(--inv-60);max-width:44ch;font-weight:400;line-height:1.6;font-size:var(--t3)}
.footer-title{font-family:var(--sans);font-size:var(--t2);font-weight:500;letter-spacing:0;line-height:1.2;color:var(--inv-ink);margin-bottom:var(--s4)}
.footer-contact{font-size:var(--t3);line-height:1.7;color:var(--inv-60);font-weight:400}
.footer-contact a{color:var(--inv-60)}
.footer-contact a:hover{color:var(--inv-ink)}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:var(--s4);font-family:var(--sans);font-size:13px;font-weight:400;color:var(--inv-60)}
@media (max-width:900px){.footer-top{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.footer-top{grid-template-columns:1fr}.footer-bottom{flex-direction:column;gap:var(--s5);align-items:flex-start}.footer-title:has(+ .footer-contact){display:none}}

/* ── Lightbox ── */
/* Bottom padding is S1 (bigger than top/side) so the counter at bottom:24px has clear room below the image. */
/* Always-rendered lightbox so the opacity transition fires reliably (a
   display:none → flex toggle blocks the transition). pointer-events:none
   keeps it inert when hidden. The image gets a subtle 2% scale-in on top. */
.lightbox{position:fixed;inset:0;background:rgba(10,10,10,.96);z-index:200;display:flex;align-items:center;justify-content:center;padding:var(--s2) var(--s2) var(--s1);touch-action:pan-y;opacity:0;pointer-events:none;transition:opacity 250ms ease-out}
.lightbox.is-open{opacity:1;pointer-events:auto}
.lightbox-img{max-width:100%;max-height:100%;object-fit:contain;transform:scale(.98);transition:transform 250ms ease-out}
.lightbox.is-open .lightbox-img{transform:scale(1)}
.lightbox-close{position:absolute;top:24px;right:24px;width:44px;height:44px;display:flex;align-items:center;justify-content:center;color:var(--inv-ink);font-size:16px;border:1px solid var(--inv-15);transition:background .2s var(--ease);z-index:2}
.lightbox-close:hover{background:var(--inv-08)}
.lightbox-nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;display:flex;align-items:center;justify-content:center;color:var(--inv-ink);border:1px solid var(--inv-15);transition:background .2s var(--ease)}
.lightbox-nav:hover{background:var(--inv-08)}
.lightbox-prev{left:24px}.lightbox-next{right:24px}
.lightbox-counter{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);font-family:var(--sans);font-size:13px;letter-spacing:.04em;color:var(--inv-60);text-transform:lowercase}
@media (max-width:760px){
  .lightbox{padding:0}
  .lightbox-nav{display:none}
  .lightbox-close{top:12px;right:12px;background:rgba(10,10,10,.5)}
  .lightbox-counter{bottom:14px}
}

/* Mobile section padding now uses var(--s1) which clamps tight enough. */

/* Fade-up base lives in css/transition.css. Image-element stagger overrides
   for the initial reveal stay inline. .tile = gallery image, .pnav-cell =
   prev/next project card with bg image. */
body.is-revealing .tile.fade-up.is-visible,body.is-revealing .pnav-cell.fade-up.is-visible{transition-delay:600ms}
/* Hero text (eyebrow + title) follows the hero-bg image: image at 300ms,
   text at 600ms. Above-fold only — below-fold text uses the base 300ms. */
body.is-revealing .hero-inner > .fade-up.is-visible{transition-delay:600ms}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
