/* =========================================================
   studiorogers — editorial architecture
   palette
   --bg     #F5F2ED   warm off-white
   --ink    #1A1A1A   near-black
   --rule   rgba(26,26,26,.18)
   --mute   rgba(26,26,26,.55)
   --accent #8B3A1F   burnt sienna (used sparingly)
   ========================================================= */

@font-face{
  font-family:"FranklinGothicSR";
  src:local("Franklin Gothic Book"),
      local("Franklin Gothic"),
      local("ITC Franklin Gothic Book"),
      local("ITC Franklin Gothic");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"FranklinGothicSR";
  src:local("Franklin Gothic Heavy"),
      local("Franklin Gothic Demi"),
      local("Franklin Gothic Medium"),
      local("ITC Franklin Gothic Demi"),
      local("ITC Franklin Gothic Medium");
  font-weight:700 900;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"FranklinGothicSR";
  src:local("Franklin Gothic Book Italic"),
      local("Franklin Gothic Italic"),
      local("ITC Franklin Gothic Book Italic");
  font-weight:400;
  font-style:italic;
  font-display:swap;
}

:root{
  --bg:#F5F2ED;
  --ink:#1A1A1A;
  --rule:rgba(26,26,26,.18);
  --mute:rgba(26,26,26,.55);
  --accent:#F2B9B4;
  --teal:#156082;

  --franklin-normal:"FranklinGothicSR", "Franklin Gothic Book", "Franklin Gothic", "ITC Franklin Gothic Book", "ITC Franklin Gothic", "Arial Narrow", Arial, sans-serif;
  --franklin-heavy:"FranklinGothicSR", "Franklin Gothic Heavy", "Franklin Gothic Demi", "Franklin Gothic Medium", "ITC Franklin Gothic Demi", "ITC Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
  --sans:var(--franklin-heavy);
  --heading:var(--franklin-heavy);
  --body:var(--franklin-normal);
  --serif:var(--franklin-normal);

  --pad:clamp(20px, 3.2vw, 56px);
  --gutter:clamp(16px, 1.6vw, 28px);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg);color:var(--ink)}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{
  font-family:var(--body);
  font-weight:400;
  font-size:17px;
  line-height:1.58;
  letter-spacing:0;
  overflow-x:hidden;
}

html,
body,
.studio-rodgers-site{
  font-family:var(--body)!important;
}

button,
input,
select,
textarea,
.nav,
.nav *,
.nav__drawer,
.nav__drawer *,
.foot__giant,
.foot__strapline,
.foot__label,
.foot__base,
.sector__cta,
.project__cta,
.h-project__cta,
.site-cta__title,
.site-cta__item h3{
  font-family:var(--sans)!important;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--ink);color:var(--bg)}

/* Lenis */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:clip}

/* faint film grain */
.grain{
  pointer-events:none;
  position:fixed;inset:0;
  z-index:60;
  opacity:.05;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .8 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* utility */
.eyebrow{
  font-family:var(--sans);
  font-size:11px;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink);
  display:inline-flex;align-items:center;gap:8px;
}
.eyebrow .num{ color:var(--accent); }
.eyebrow--right{margin-left:auto}
.rule{height:1px;background:var(--rule);border:0}

h1,h2,h3,h4,h5,h6{
  font-family:var(--sans)!important;
  text-transform:lowercase!important;
  letter-spacing:0!important;
}

p,li,dt,dd{
  font-family:var(--body)!important;
  letter-spacing:0;
}

a,button,span{
  letter-spacing:0;
}

.eyebrow,
.statement__meta,
.section-head .eyebrow,
.proj-intro__eyebrow,
.co-intro__meta,
.contact-intro__meta,
.social-intro__meta,
.contact-email__eyebrow,
.h-hero__eyebrow,
.h-awards__eyebrow,
.strip__head,
.co-ticker{
  display:none!important;
}

.statement__headline,
.section-head__title,
.proj-intro__title,
.co-intro__headline,
.contact-intro__title,
.social-intro__title,
.philosophy__headline{
  font-size:clamp(44px,6vw,108px)!important;
  line-height:1.04!important;
}

.statement__lede,
.sector__blurb,
.proj-intro__lede,
.philosophy__body,
.co-about__copy p,
.contact-intro__lede,
.contact-office p,
.social-intro__lede,
.social-card p,
.h-hero__lede,
.h-intro__body p,
.h-approach__sub,
.h-project__summary,
.h-cta__copy{
  font-size:clamp(17px,1.1vw,19px)!important;
  line-height:1.7!important;
}

/* tiny angular arrow / corner marker used to flag sections */
.angle{
  display:inline-block;
  width:.7em;height:.7em;
  flex:0 0 auto;
  color:var(--accent);
}
.angle svg{display:block;width:100%;height:100%}

/* =========================
   NAV
   ========================= */
.nav{
  position:fixed;top:0;left:0;right:0;
  z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:24px var(--pad);
  color:var(--ink);
  transition:color .6s ease, background .5s ease, backdrop-filter .5s ease, border-color .5s ease;
}
.nav--glass{
  background:rgba(245,242,237,0.76);
  backdrop-filter:blur(18px) saturate(1.18);
  -webkit-backdrop-filter:blur(18px) saturate(1.18);
  border-bottom:1px solid rgba(10,10,10,0.12);
  box-shadow:0 12px 30px rgba(10,10,10,0.06);
  color:var(--ink);
}
/* ---- logo intro overlay ---- */
.logo-intro{
  position:fixed;
  inset:0;
  z-index:900;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
}
.logo-intro__mark{
  position:relative;
  width:min(85vw,840px);
}
.logo-intro__mark > svg{
  display:block;
  width:100%;
  height:auto;
}
.logo-intro__fill{
  position:absolute;
  inset:0;
  display:block;
}
.logo-intro__fill svg{
  width:100%;
  height:auto;
  display:block;
}

.nav__logo{display:inline-flex;align-items:center}
.logo-mark{
  position:relative;
  display:block;
  aspect-ratio:1500 / 240.9;
  user-select:none;
  overflow:hidden;
}
.logo-mark svg{
  display:block;
  width:100%;
  height:100%;
  transition:color .6s ease;
}
/* nav colour states */
.nav .logo-mark{ color:#1A1A1A; }
.nav--invert .logo-mark{ color:#FFFFFF; }
/* nav size */
.nav__logo .logo-mark{ height:clamp(36px,8vw,96px); width:auto; will-change:height; }
/* hover accent layer — duplicate SVG clipped by expanding circle */
.logo-mark__accent{
  position:absolute;
  inset:0;
  color:var(--accent);
  clip-path:circle(0% at 0% 100%);
  -webkit-clip-path:circle(0% at 0% 100%);
  transition:clip-path 1.6s cubic-bezier(.7,0,.2,1),
             -webkit-clip-path 1.6s cubic-bezier(.7,0,.2,1);
  pointer-events:none;
}
.nav__logo:hover .logo-mark__accent,
.foot__giant:hover .logo-mark__accent{
  clip-path:circle(160% at 0% 100%);
  -webkit-clip-path:circle(160% at 0% 100%);
}
.nav--invert{color:#fff}

.nav__links{
  display:flex;align-items:center;gap:clamp(18px,2.4vw,40px);
  font-size:16px;
  letter-spacing:.005em;
}
.nav__links a{
  position:relative;
  padding:6px 0;
}
.nav__links a::after{
  content:"";position:absolute;left:0;right:0;bottom:2px;
  height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:right;
  transition:transform .5s cubic-bezier(.2,.7,.1,1);
}
.nav__links a:hover::after{transform:scaleX(1);transform-origin:left}
.nav__menu{
  display:inline-flex;flex-direction:column;justify-content:center;
  width:28px;height:18px;gap:5px;
  margin-left:14px;
}
.nav__menu span{
  display:block;height:1px;background:currentColor;
  transition:background .6s ease;
}
.nav__menu span:first-child{width:100%}
.nav__menu span:last-child{width:100%}

/* =========================
   HERO — full-bleed carousel
   ========================= */
.hero{
  position:relative;
  height:100vh;
  width:100%;
  overflow:hidden;
  background:#0d0d0d;
  color:#fff;
  z-index:55;
}
.hero__stage{position:absolute;inset:0;overflow:hidden}
.hero__slide{
  position:absolute;inset:0;
  margin:0;padding:0;
  /* default: hidden on the right */
  clip-path: inset(0 0 0 100%);
  -webkit-clip-path: inset(0 0 0 100%);
  will-change:clip-path;
  z-index:1;
}
.hero__slide img{
  width:100%;height:100%;
  object-fit:cover;
  display:block;
  will-change:transform;
}

/* full-cover Vimeo background video — keep 16:9, fill viewport, no letterboxing */
.hero__video{
  position:absolute;inset:0;
  overflow:hidden;
  background:#0d0d0d;
}
.hero__video iframe{
  position:absolute;
  top:50%;left:50%;
  width:max(100vw, calc(100vh * 16 / 9)) !important;
  height:max(100vh, calc(100vw * 9 / 16)) !important;
  min-width:100vw;
  min-height:100vh;
  max-width:none !important;
  max-height:none !important;
  display:block;
  aspect-ratio:auto;
  transform:translate(-50%, -50%);
  pointer-events:none;
  border:0;
}
.hero__slide::after{
  content:"";
  position:absolute;inset:0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 28%, rgba(0,0,0,0) 60%, rgba(0,0,0,.55) 100%);
  pointer-events:none;
}
.hero__slide.is-active{
  clip-path: inset(0 0 0 0);
  -webkit-clip-path: inset(0 0 0 0);
  z-index:2;
}

.hero__hit{
  position:absolute;
  top:0;bottom:0;
  z-index:5;
  background:transparent;
  width:50%;
}
.hero__hit--prev{
  left:0;
  cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'><circle cx='28' cy='28' r='27' fill='rgba(255,255,255,.18)' stroke='white' stroke-width='1'/><path d='M34 28H20M26 22l-6 6 6 6' stroke='white' stroke-width='1.2' fill='none'/></svg>") 28 28, pointer;
}
.hero__hit--next{
  right:0;
  cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'><circle cx='28' cy='28' r='27' fill='rgba(255,255,255,.18)' stroke='white' stroke-width='1'/><path d='M22 28h14M30 22l6 6-6 6' stroke='white' stroke-width='1.2' fill='none'/></svg>") 28 28, pointer;
}

/* right-side progress rail */
.hero__rail{
  position:absolute;
  right:var(--pad);
  top:50%;
  transform:translateY(-50%);
  z-index:6;
  display:flex;flex-direction:column;align-items:center;
  gap:14px;
  pointer-events:none;
  color:#fff;
}
.hero__rail-num{
  font-family:var(--sans);
  font-size:12px;
  letter-spacing:.16em;
  font-weight:500;
}
.hero__rail-num--mute{opacity:.5}
.hero__rail-line{
  position:relative;
  width:1px;height:120px;
  background:rgba(255,255,255,.28);
  overflow:hidden;
}
.hero__rail-line span{
  position:absolute;top:0;left:0;right:0;
  background:#fff;
  height:0%;
  will-change:height;
}

/* bottom-left label */
.hero__label{
  position:absolute;
  left:var(--pad);
  bottom:clamp(28px,4vh,44px);
  z-index:6;
  display:flex;align-items:center;gap:14px;
  color:#fff;
  font-size:14px;
  letter-spacing:.18em;
  font-weight:500;
}
.hero__label-mark{
  display:inline-flex;align-items:center;justify-content:center;
  width:18px;height:18px;
  transform:translateY(1px);
}
.hero__label-mark svg{display:block}
.hero__label-track{
  position:relative;
  height:18px;
  min-width:240px;
  overflow:hidden;
}
.hero__label-name{
  position:absolute;left:0;top:0;
  display:block;
  white-space:nowrap;
  line-height:18px;
  will-change:transform,opacity;
}

/* bottom-right view-project */
.hero__view{
  position:absolute;
  right:var(--pad);
  bottom:clamp(28px,4vh,44px);
  z-index:6;
  color:#fff;
  font-size:14px;
  letter-spacing:.005em;
  padding-bottom:2px;
  border-bottom:1px solid #fff;
  white-space:nowrap;
}
.hero__view:hover{opacity:.7}

@media (max-width: 760px){
  .hero__rail{display:none}
  /* hero label — cap track width so it never causes horizontal scroll */
  .hero__label-track{min-width:0;max-width:calc(100vw - 90px);overflow:hidden}
  .hero__label-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}

/* =========================
   STATEMENT (after hero)
   ========================= */
.statement{
  padding:clamp(120px,18vh,220px) var(--pad) clamp(80px,12vh,160px);
  display:flex;flex-direction:column;
}
.statement--home-start{
  min-height:auto;
  padding-top:clamp(120px,15vh,180px);
  padding-bottom:clamp(56px,8vh,96px);
}
.statement__meta{
  display:flex;align-items:baseline;gap:32px;
  padding-bottom:24px;
  border-bottom:1px solid var(--rule);
}
.statement__headline{
  flex:1;
  font-family:var(--sans);
  font-weight:700;
  font-size:clamp(48px, 7vw, 132px);
  line-height:1.02;
  letter-spacing:-0.025em;
  padding:clamp(40px,8vh,120px) 0 clamp(40px,6vh,80px);
  text-transform:lowercase;
}
.statement__headline > .line{display:block;overflow:visible}
.statement--home-start .statement__headline{
  --fit-headline-max:108px;
  --fit-headline-min:12px;
  font-size:var(--fit-headline-size, var(--fit-headline-max))!important;
  line-height:1!important;
}
.statement--home-start .statement__headline > .line{
  white-space:nowrap;
}
[data-fit-headline]{
  max-width:100%;
  white-space:nowrap;
}
.statement__headline em{font-style:italic;letter-spacing:-0.02em}
.statement__headline-accent{
  color:inherit;
}
.statement--home-start .statement__foot{
  grid-template-columns:minmax(0,52ch);
}
.statement__foot{
  display:grid;
  grid-template-columns:1fr auto;
  gap:48px;align-items:end;
  padding-top:24px;
  border-top:1px solid var(--rule);
}
.statement__lede{
  max-width:46ch;
  font-size:clamp(15px,1.05vw,17px);
  line-height:1.55;
}
.statement__cue{
  display:inline-flex;align-items:center;gap:14px;
  font-size:13px;letter-spacing:.04em;
  padding:8px 0;
  white-space:nowrap;
}
.statement__cue svg{transition:transform .5s cubic-bezier(.2,.7,.1,1)}
.statement__cue:hover svg{transform:translateX(6px)}

@media (max-width: 1280px){
  .statement--home-start .statement__headline{--fit-headline-max:104px}
}
@media (max-width: 1100px){
  .statement--home-start .statement__headline{--fit-headline-max:72px}
}
@media (max-width: 820px){
  .statement--home-start .statement__headline{--fit-headline-max:54px}
}
@media (max-width: 600px){
  .statement--home-start .statement__headline{--fit-headline-max:40px}
  .statement__foot{grid-template-columns:1fr;gap:24px}
}
@media (max-width: 460px){
  .statement--home-start .statement__headline{--fit-headline-max:36px}
}
@media (max-width: 420px){
  .statement--home-start .statement__headline{--fit-headline-max:32px}
}
@media (max-width: 380px){
  .statement--home-start .statement__headline{--fit-headline-max:30px}
}
@media (max-width: 340px){
  .statement--home-start .statement__headline{--fit-headline-max:26px}
}

/* =========================
   CREDENTIALS STRIP
   ========================= */
.creds{
  margin-top:clamp(80px,12vh,160px);
  padding-top:32px;
  border-top:1px solid var(--rule);
}
.creds__head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:24px;
  padding-bottom:48px;
}
.creds__label{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:500;
  color:var(--ink);
}
.creds__label .angle{color:var(--accent)}
.creds__count{
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--accent);
  font-feature-settings:"tnum","ss01";
}
.creds__grid{
  list-style:none;
  margin:0;padding:0;
  display:grid;
  grid-template-columns:repeat(8, minmax(0, 1fr));
  border-top:1px solid var(--rule);
}
.cred{
  position:relative;
  aspect-ratio: 1 / 0.78;
  background:#F0EDE8;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(18px,2.4vw,40px);
  border-right:1px solid var(--rule);
  isolation:isolate;
}
.cred:last-child{border-right:0}
.cred::before{
  /* hairline at the bottom on hover, accent */
  content:"";
  position:absolute;
  left:0;right:0;bottom:-1px;
  height:2px;
  background:var(--accent);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .6s cubic-bezier(.7,0,.2,1);
}
.cred:hover::before{transform:scaleX(1)}
.cred img{
  max-width:100%;
  max-height:100%;
  width:auto;height:auto;
  object-fit:contain;
  filter:grayscale(1);
  opacity:.55;
  transition:opacity .6s cubic-bezier(.7,0,.2,1), filter .6s cubic-bezier(.7,0,.2,1);
}
.cred:hover img{
  opacity:1;
  filter:grayscale(1);
}

@media (max-width: 1100px){
  .creds__grid{grid-template-columns:repeat(4, minmax(0, 1fr))}
  .cred:nth-child(4n){border-right:0}
  .cred:nth-child(-n+4){border-bottom:1px solid var(--rule)}
}
@media (max-width: 600px){
  .creds__grid{grid-template-columns:repeat(2, minmax(0, 1fr))}
  .cred{border-right:1px solid var(--rule) !important}
  .cred:nth-child(2n){border-right:0 !important}
  .cred:not(:nth-last-child(-n+2)){border-bottom:1px solid var(--rule)}
}

/* line reveal (gsap will toggle) */
[data-line]{will-change:transform,opacity}

/* per-word underline (scroll-scrubbed) */
.word{
  position:relative;
  display:inline-block;
  white-space:pre;
}
.word__u{
  position:absolute;
  left:0; right:0;
  bottom:0.04em;
  height:0.075em;
  background:var(--accent);
  mix-blend-mode:multiply;
  transform:scaleX(0);
  transform-origin:left center;
  will-change:transform;
  pointer-events:none;
  display:block;
}
/* finer underline on smaller headings */
.project__title .word__u,
.thumb__row .word__u{ height:0.06em; }

/* =========================
   SECTION HEAD (shared)
   ========================= */
.section-head{
  padding:clamp(80px,12vh,180px) var(--pad) clamp(40px,6vh,80px);
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(24px,4vh,56px);
  border-top:1px solid var(--rule);
}
.section-head .eyebrow{display:block}
.section-head__title{
  font-family:var(--sans);
  font-weight:800;
  font-size:clamp(48px,6.5vw,128px);
  line-height:0.95;
  letter-spacing:-0.03em;
  max-width:20ch;
  text-transform:none;
}
.section-head__title > .line{display:block}
.section-head__title em{font-style:italic}

/* =========================
   PROJECTS PAGE SECTOR LAYOUT
   ========================= */
.home-projects-head .section-head{
  border-top:1px solid var(--rule);
}
.proj-nav{
  display:grid;
  grid-template-columns:repeat(8,1fr);
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
}
.proj-nav--home{
  margin-top:0;
}
.proj-nav a{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:clamp(28px,4vh,52px);
  padding:clamp(20px,3vh,36px) clamp(16px,1.8vw,28px);
  font-family:var(--sans);
  font-weight:500;
  font-size:clamp(11px,.9vw,14px);
  letter-spacing:-0.01em;
  text-transform:lowercase;
  color:var(--ink);
  text-decoration:none;
  border-right:1px solid var(--rule);
  transition:background .45s ease, color .3s ease;
  position:relative;
  overflow:hidden;
}
.proj-nav a:last-child{border-right:none}
.proj-nav__num{
  font-size:11px;
  letter-spacing:.1em;
  font-weight:400;
  opacity:.35;
  display:block;
}
.proj-nav a[href="#sector-housing"]:hover,
.proj-nav a[href="#sector-ecclesiastical"]:hover,
.proj-nav a[href="#sector-healthcare"]:hover{background:#F2B9B4}
.proj-nav a[href="#sector-houses"]:hover,
.proj-nav a[href="#sector-masterplanning"]:hover,
.proj-nav a[href="#sector-hospitality"]:hover{background:#FFCF5A}
.proj-nav a[href="#sector-commercial"]:hover,
.proj-nav a[href="#sector-heritage"]:hover{background:#BDB5C3}

.sector{
  display:grid;
  grid-template-columns:60% 40%;
  min-height:85vh;
  border-top:1px solid var(--rule);
  overflow:hidden;
  position:relative;
}
.sector--reverse{grid-template-columns:40% 60%}
.sector--reverse .sector__media{order:2}
.sector--reverse .sector__content{order:1}
.sector__media{
  overflow:hidden;
  position:relative;
}
#sector-housing .sector__media,
#sector-ecclesiastical .sector__media,
#sector-healthcare .sector__media{--card-bg:#F2B9B4}
#sector-houses .sector__media,
#sector-masterplanning .sector__media,
#sector-hospitality .sector__media{--card-bg:#FFCF5A}
#sector-commercial .sector__media,
#sector-heritage .sector__media{--card-bg:#BDB5C3}
.sector__media::after{
  content:"";
  position:absolute;
  inset:0;
  background:var(--card-bg,#F2B9B4);
  mix-blend-mode:multiply;
  opacity:1;
  transition:opacity .7s ease;
  pointer-events:none;
  z-index:2;
}
.sector:hover .sector__media::after{opacity:0}
.sector__parallax{
  width:100%;
  height:115%;
  position:absolute;
  top:-7.5%;
  left:0;
  will-change:transform;
}
.sector__parallax img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  filter:grayscale(1) contrast(1.55) brightness(.88);
  mix-blend-mode:multiply;
  transition:filter .7s ease;
}
.sector:hover .sector__parallax img{
  filter:grayscale(0) contrast(1) brightness(1);
}
.sector__content{
  padding:6vw;
  display:flex;
  flex-direction:column;
  justify-content:center;
  position:relative;
}
.sector__num{
  font-family:var(--sans);
  font-weight:400;
  font-size:clamp(120px,18vw,220px);
  line-height:1;
  opacity:.07;
  position:absolute;
  top:clamp(16px,3vh,40px);
  right:clamp(16px,3vw,40px);
  pointer-events:none;
  user-select:none;
  letter-spacing:-0.04em;
}
.sector__title{
  font-family:var(--sans);
  font-weight:700;
  font-size:clamp(24px,3.4vw,56px);
  line-height:1;
  letter-spacing:-0.03em;
  text-transform:lowercase;
  margin-bottom:clamp(20px,2.5vh,36px);
  position:relative;
  z-index:1;
}
.sector__blurb{
  font-size:clamp(14px,.9vw,16px);
  line-height:1.7;
  color:var(--mute);
  max-width:38ch;
  margin-bottom:clamp(24px,3.5vh,48px);
  position:relative;
  z-index:1;
}
.sector__facts{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
  margin-bottom:clamp(24px,3.5vh,40px);
  position:relative;
  z-index:1;
}
.sector__facts dt,
.sector__facts dd{
  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;
  padding:10px 0;
  border-top:1px solid var(--rule);
  margin:0;
  line-height:1.4;
}
.sector__facts dt{
  color:var(--mute);
  padding-right:12px;
}
.sector__facts dd{
  color:var(--ink);
  font-weight:500;
}
.sector__cta{
  display:inline-flex;
  align-items:center;
  gap:12px;
  font-size:12px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink);
  text-decoration:none;
  position:relative;
  z-index:1;
  width:fit-content;
}
.sector__cta::after{
  content:"";
  position:absolute;
  bottom:-2px;
  left:0;
  width:0;
  height:1px;
  background:var(--ink);
  transition:width .4s cubic-bezier(.2,.7,.1,1);
}
.sector__cta:hover::after{width:100%}
.sector__cta svg{transition:transform .4s cubic-bezier(.2,.7,.1,1)}
.sector__cta:hover svg{transform:translateX(4px)}

@media (max-width:900px){
  .proj-nav{grid-template-columns:repeat(4,1fr)}
  .proj-nav a:nth-child(4){border-right:none}
  .proj-nav a:nth-child(n+5){border-top:1px solid var(--rule)}
}
@media (max-width:860px){
  .sector,
  .sector--reverse{
    grid-template-columns:1fr;
    min-height:auto;
  }
  .sector--reverse .sector__media{order:0}
  .sector--reverse .sector__content{order:1}
  .sector__media{
    height:55vw;
    position:relative;
    overflow:hidden;
  }
  .sector__parallax{
    top:0;
    height:100%;
    position:relative;
  }
  .sector__content{
    padding:clamp(32px,6vw,64px) var(--pad);
    min-height:auto;
  }
  .sector__num{
    font-size:clamp(80px,20vw,140px);
    top:8px;
    right:16px;
  }
}
@media (max-width:600px){
  .sector__media{height:65vw}
  .sector__content{padding:32px var(--pad)}
  .sector__facts{grid-template-columns:1fr 1fr}
}
@media (max-width:540px){
  .proj-nav{grid-template-columns:repeat(2,1fr)}
  .proj-nav a:nth-child(even){border-right:none}
  .proj-nav a:nth-child(4){border-right:none}
  .proj-nav a:nth-child(n+3){border-top:1px solid var(--rule)}
}

/* =========================
   PROJECTS
   ========================= */
.projects{padding:0 var(--pad) clamp(80px,10vh,140px)}
.projects__grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:clamp(48px,7vh,120px) var(--gutter);
}

.project{
  display:flex;flex-direction:column;
  gap:24px;
}
.project--tall  { grid-column: span 7; }
.project--short { grid-column: span 5; }

/* alternate alignment to break the grid */
.projects__grid > .project:nth-child(3n+2){ grid-column:span 5; }
.projects__grid > .project:nth-child(4n)  { margin-top:clamp(40px,8vh,120px); }

.project__media{
  position:relative;
  display:block;
  overflow:hidden;
  background:#F0EDE8;
  aspect-ratio: 4 / 5;
}
.project--tall  .project__media{ aspect-ratio: 3 / 4.4; }
.project--short .project__media{ aspect-ratio: 4 / 4.7; }

.project__media img{
  width:100%;height:100%;
  object-fit:cover;
  transition:transform 1.4s cubic-bezier(.2,.7,.1,1);
  filter:grayscale(1) contrast(1.55) brightness(.88);
  mix-blend-mode:multiply;
  will-change:filter,transform;
}
.project:hover .project__media img{transform:scale(1.04)}
.project__num{
  position:absolute;top:18px;left:18px;
  z-index:2;
  font-size:11px;letter-spacing:.16em;
  color:#fff;mix-blend-mode:difference;
  font-weight:500;
}

.project__meta{
  display:grid;
  grid-template-columns:1.4fr 1fr auto;
  align-items:end;
  gap:32px;
  padding-top:6px;
}
.project__title{
  font-family:var(--sans);
  font-weight:700;
  font-size:clamp(22px,2vw,32px);
  line-height:1.05;
  letter-spacing:0.02em;
  text-transform:uppercase;
  position:relative;
  display:inline-block;
  margin-left:-0.18em;
  color:var(--ink);
  padding:var(--pad-y, 0.04em) 0.18em;
  background:linear-gradient(#000,#000) left center / var(--bg-x, 0%) 100% no-repeat;
  will-change:padding,background-size,color;
}
.project__title em{font-style:italic}

.project__facts{
  display:flex;flex-wrap:wrap;
  gap:6px 24px;
  font-size:12px;
  color:var(--mute);
}
.project__facts > div{display:flex;gap:6px}
.project__facts dt{
  text-transform:uppercase;letter-spacing:.12em;
  font-size:10px;
  align-self:center;
  color:var(--mute);
}
.project__facts dd{color:var(--ink);font-size:13px}

.project__cta{
  display:inline-flex;align-items:center;gap:12px;
  font-size:12px;letter-spacing:.06em;
  text-transform:uppercase;
  padding:8px 0;
  border-bottom:1px solid var(--ink);
  align-self:end;
  white-space:nowrap;
}
.project__cta svg{transition:transform .5s cubic-bezier(.2,.7,.1,1)}
.project__cta:hover svg{transform:translateX(6px)}

/* =========================
   PHILOSOPHY
   ========================= */
.philosophy{
  padding:clamp(80px,14vh,200px) var(--pad) clamp(80px,12vh,160px);
  border-top:1px solid var(--rule);
}
.philosophy__inner{
  display:grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap:clamp(40px,6vw,120px);
  align-items:start;
  max-width:1600px;
  margin:0 auto;
}

/* left column — sticky circular video that scales with scroll */
.philosophy__circle{
  position:sticky;
  top:30vh;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:90vh;
  overflow:visible;
}
.philosophy__circle-inner{
  position:relative;
  width:140px;
  aspect-ratio:1 / 1;
  height:auto;
  border-radius:50%;
  overflow:hidden;
  background:#0d0d0d;
  will-change:width;
  transform:translateZ(0);
  isolation:isolate;
}
.philosophy__circle-veil{
  position:absolute;
  inset:0;
  background:var(--accent);
  pointer-events:none;
  will-change:opacity;
}
.philosophy__circle-inner video,
.philosophy__circle-inner iframe{
  position:absolute;
  inset:0;
  width:100% !important;
  height:100% !important;
  min-width:100% !important;
  min-height:100% !important;
  max-width:none !important;
  max-height:none !important;
  object-fit:cover !important;
  object-position:center center !important;
  display:block !important;
  transform:none !important;
  pointer-events:none;
  border:0;
}
.philosophy__circle-video{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center center !important;
}

/* right column — copy, aligned to the LEFT (under the circle's left edge) */
.philosophy__copy{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  text-align:left;
  gap:clamp(28px,4vh,56px);
}
.philosophy__copy .eyebrow{align-self:flex-start}
.philosophy__headline{
  font-family:var(--sans);
  font-weight:700;
  font-size:clamp(40px,5.6vw,108px);
  line-height:1.04;
  letter-spacing:-0.025em;
  max-width:22ch;
  text-transform:lowercase;
  text-align:left;
  color:var(--ink);
}
.philosophy__headline > .line{
  display:inline;
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone;
}
/* line break between the two source spans */
.philosophy__headline > .line + .line{display:inline}
.philosophy__headline > .line + .line::before{
  content:"\A";
  white-space:pre;
}
.philosophy__headline .word{
  background:none;
  padding:0;
  margin:0;
  position:relative;
}
.philosophy__headline .word__t{position:relative;z-index:2}
.philosophy__headline .word__u{z-index:1}
.philosophy__headline em{
  color:inherit;
  font-style:italic;
}
.philosophy__headline strong{font-weight:700;font-style:normal}
.philosophy__headline .blur-in{
  display:inline-block;
  filter:blur(18px);
  opacity:0;
  will-change:filter,opacity;
}
.philosophy__body{
  display:block;
  font-size:clamp(17px,1.1vw,19px);
  line-height:1.7;
  text-align:left;
}
.philosophy__body p{
  max-width:52ch;
}
.philosophy__body p + p{margin-top:18px}
.philosophy__body em{font-style:italic}
.philosophy__contact{
  display:flex;
  flex-wrap:wrap;
  gap:12px clamp(18px,2vw,32px);
  margin-top:clamp(22px,3vh,36px);
  font-size:clamp(15px,1.1vw,18px);
  line-height:1.4;
}
.philosophy__contact a{
  display:inline-flex;
  align-items:center;
  width:fit-content;
  color:var(--ink);
  border-bottom:1px solid currentColor;
}

@media (max-width: 900px){
  .philosophy__inner{grid-template-columns:1fr}
  .philosophy__circle{position:relative;top:auto;width:100%;height:auto;max-width:none;margin:0;padding:clamp(24px,4vh,48px) var(--pad) 0;}
}

/* =========================
   HORIZONTAL STRIP
   ========================= */
.strip{
  padding:clamp(40px,6vh,80px) 0 clamp(80px,10vh,140px);
  border-top:1px solid var(--rule);
  overflow:hidden;
}
.strip__head{
  display:flex;align-items:baseline;
  padding:24px var(--pad) 36px;
}
.strip__track{
  display:flex;
  gap:clamp(20px,2vw,32px);
  padding:0 var(--pad);
  width:max-content;
  will-change:transform;
}
.strip__item{
  flex:0 0 clamp(220px,22vw,360px);
  background:#F0EDE8;
}
.strip__item img{
  width:100%;
  aspect-ratio:3 / 4;
  object-fit:cover;
  filter:grayscale(1) contrast(1.55) brightness(.88);
  mix-blend-mode:multiply;
  will-change:filter;
}
.strip__item figcaption{
  margin-top:12px;
  font-size:12px;
  color:var(--mute);
  letter-spacing:.02em;
}

/* =========================
   SECTOR PROJECT MASONRY
   ========================= */
.h-project-gallery{
  padding:clamp(64px,9vw,128px) var(--pad);
  border-bottom:1px solid var(--rule);
  background:var(--bg);
}
.h-project-gallery__grid{
  columns:3 280px;
  column-gap:10px;
}
.h-project-tile{
  display:block;
  break-inside:avoid;
  margin:0 0 10px;
  background:#0a0a0a;
  color:#F5F2ED;
  overflow:hidden;
  position:relative;
  isolation:isolate;
  cursor:pointer;
}
.h-project-tile:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:4px;
}
.h-project-tile__gallery{
  display:none!important;
}
.h-project-tile__media{
  position:relative;
  aspect-ratio:var(--tile-ratio,4 / 5);
  margin:0;
  overflow:hidden;
  background:#0a0a0a;
}
.h-project-tile__media::before,
.h-project-tile__media::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:1;
  transition:opacity .55s ease;
}
.h-project-tile__media::before{
  background:var(--tile-color,#F2B9B4);
  mix-blend-mode:multiply;
  opacity:0;
}
.h-project-tile__media::after{
  background:linear-gradient(180deg,rgba(0,0,0,0) 18%,rgba(0,0,0,.78) 100%);
  opacity:0;
}
.h-project-tile img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  filter:grayscale(1) contrast(1.08);
  transform:scale(1.01);
  transition:transform .9s cubic-bezier(.2,.7,.1,1), filter .55s ease;
}
.h-project-tile__info{
  position:absolute;
  inset:auto 0 0;
  z-index:2;
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:clamp(18px,2.6vw,32px);
  opacity:0;
  transform:translateY(16px);
  transition:opacity .45s ease, transform .55s cubic-bezier(.2,.7,.1,1);
}
.h-project-tile__kicker,
.h-project-tile__location{
  font-family:var(--sans)!important;
  font-size:11px;
  font-weight:500;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(245,242,237,.72);
}
.h-project-tile__name{
  font-family:var(--sans)!important;
  font-size:clamp(24px,3vw,52px);
  font-weight:800;
  line-height:.95;
  letter-spacing:0;
  text-transform:lowercase;
  color:#fff;
  max-width:11ch;
}
.h-project-tile:hover img,
.h-project-tile:focus-visible img{
  transform:scale(1.06);
  filter:grayscale(.15) contrast(1.04);
}
.h-project-tile:hover .h-project-tile__media::before,
.h-project-tile:focus-visible .h-project-tile__media::before{
  opacity:.7;
}
.h-project-tile:hover .h-project-tile__media::after,
.h-project-tile:focus-visible .h-project-tile__media::after{
  opacity:1;
}
.h-project-tile:hover .h-project-tile__info,
.h-project-tile:focus-visible .h-project-tile__info{
  opacity:1;
  transform:translateY(0);
}
@media (max-width:1020px){
  .h-project-gallery__grid{columns:2 260px}
}
@media (max-width:640px){
  .h-project-gallery{padding:clamp(48px,8vh,76px) var(--pad)}
  .h-project-gallery__grid{columns:1}
  .h-project-tile{margin-bottom:8px}
}
@media (hover:none){
  .h-project-tile__media::before{opacity:.42}
  .h-project-tile__media::after{opacity:1}
  .h-project-tile__info{
    opacity:1;
    transform:none;
  }
}

/* =========================
   SECTOR PROJECT CAROUSEL
   ========================= */
body.sector-carousel-open{
  overflow:hidden;
}
.sector-carousel{
  position:fixed;
  inset:0;
  z-index:2500;
  display:grid;
  place-items:center;
  padding:clamp(18px,3vw,44px);
  color:#F5F2ED;
  opacity:0;
  pointer-events:none;
  transition:opacity .28s ease;
}
.sector-carousel.is-open{
  opacity:1;
  pointer-events:auto;
}
.sector-carousel__backdrop{
  position:absolute;
  inset:0;
  background:rgba(5,5,5,.94);
}
.sector-carousel__dialog{
  position:relative;
  z-index:1;
  width:min(100%,1280px);
  height:min(88vh,860px);
  display:grid;
  grid-template-rows:1fr auto;
  align-items:center;
}
.sector-carousel__figure{
  min-width:0;
  min-height:0;
  margin:0;
  display:grid;
  grid-template-rows:minmax(0,1fr) auto;
  align-items:center;
  justify-items:center;
  gap:clamp(14px,2vw,22px);
  height:100%;
}
.sector-carousel__image{
  display:block;
  width:auto;
  height:auto;
  max-width:100%;
  max-height:calc(88vh - 96px);
  object-fit:contain;
  background:#0a0a0a;
}
.sector-carousel__caption{
  width:100%;
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:20px;
  color:#F5F2ED;
}
.sector-carousel__title{
  font-family:var(--sans)!important;
  font-size:clamp(24px,3.5vw,54px);
  font-weight:800;
  line-height:.95;
  letter-spacing:0;
  text-transform:lowercase;
  color:#fff;
}
.sector-carousel__count{
  font-size:12px;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(245,242,237,.66);
  white-space:nowrap;
}
.sector-carousel__close,
.sector-carousel__nav{
  appearance:none;
  border:1px solid rgba(245,242,237,.34);
  background:rgba(10,10,10,.55);
  color:#F5F2ED;
  width:44px;
  height:44px;
  border-radius:50%;
  display:grid;
  place-items:center;
  padding:0;
  font:inherit;
  line-height:1;
  cursor:pointer;
  transition:background .25s ease,border-color .25s ease,transform .25s ease;
}
.sector-carousel__close:hover,
.sector-carousel__nav:hover,
.sector-carousel__close:focus-visible,
.sector-carousel__nav:focus-visible{
  background:#F5F2ED;
  border-color:#F5F2ED;
  color:#0a0a0a;
  outline:none;
}
.sector-carousel__close{
  position:absolute;
  top:0;
  right:0;
  z-index:2;
  font-size:26px;
}
.sector-carousel__nav{
  position:absolute;
  top:50%;
  z-index:2;
  transform:translateY(-50%);
  font-size:38px;
}
.sector-carousel__nav:hover,
.sector-carousel__nav:focus-visible{
  transform:translateY(-50%) scale(1.04);
}
.sector-carousel__nav--prev{
  left:0;
}
.sector-carousel__nav--next{
  right:0;
}
.sector-carousel.is-single .sector-carousel__nav{
  display:none;
}
@media (max-width:760px){
  .sector-carousel{
    padding:16px;
  }
  .sector-carousel__dialog{
    height:calc(100vh - 32px);
  }
  .sector-carousel__image{
    max-height:calc(100vh - 150px);
  }
  .sector-carousel__caption{
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
  }
  .sector-carousel__close{
    top:8px;
    right:8px;
  }
  .sector-carousel__nav{
    top:auto;
    bottom:70px;
    transform:none;
  }
  .sector-carousel__nav:hover,
  .sector-carousel__nav:focus-visible{
    transform:scale(1.04);
  }
}
@media (prefers-reduced-motion:reduce){
  .sector-carousel,
  .sector-carousel__close,
  .sector-carousel__nav{
    transition:none;
  }
}

/* =========================
   SITE CTA
   ========================= */
.site-cta{
  background:#050505;
  color:#F5F2ED;
  padding:clamp(56px,8vw,118px) var(--pad) clamp(44px,6vw,88px);
  border-top:1px solid rgba(245,242,237,.14);
}
.site-cta__title{
  font-family:var(--sans);
  --fit-headline-max:142px;
  --fit-headline-min:28px;
  font-size:var(--fit-headline-size, var(--fit-headline-max))!important;
  font-weight:800;
  line-height:.9!important;
  letter-spacing:0;
  color:#fff;
  margin:0 0 clamp(44px,6vw,92px);
  max-width:100%;
  white-space:nowrap;
}
.site-cta__grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(32px,5vw,100px);
}
.site-cta__item{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:clamp(18px,2.4vw,34px);
}
.site-cta__item h3{
  font-family:var(--sans);
  font-size:clamp(28px,3.2vw,56px);
  font-weight:800;
  line-height:1;
  color:#fff;
  margin:0;
}
.site-cta__item p{
  font-size:clamp(17px,1.35vw,23px);
  line-height:1.55;
  max-width:34ch;
  color:rgba(245,242,237,.88);
}
.site-cta__contact{
  margin-top:auto;
}
.site-cta__contact a{
  color:#FFCF5A;
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:.12em;
}

@media (max-width:900px){
  .site-cta__grid{grid-template-columns:1fr;gap:42px}
  .site-cta__title{max-width:none}
}
@media (max-width:1280px){
  .site-cta__title{--fit-headline-max:126px}
}
@media (max-width:1100px){
  .site-cta__title{--fit-headline-max:108px}
}
@media (max-width:820px){
  .site-cta__title{--fit-headline-max:82px}
}
@media (max-width:600px){
  .site-cta__title{--fit-headline-max:56px}
}
@media (max-width:460px){
  .site-cta__title{--fit-headline-max:50px}
}
@media (max-width:420px){
  .site-cta__title{--fit-headline-max:46px}
}
@media (max-width:380px){
  .site-cta__title{--fit-headline-max:42px}
}
@media (max-width:340px){
  .site-cta__title{--fit-headline-max:36px}
}

/* =========================
   FOOTER
   ========================= */
.foot{
  padding:clamp(60px,8vh,120px) var(--pad) 32px;
  border-top:1px solid var(--rule);
  position:relative;
  isolation:isolate;
  color:var(--ink);
  transition:color .9s cubic-bezier(.7,0,.2,1);
}
.foot__veil{
  position:absolute;
  inset:0;
  background:var(--fill-color, #0a0a0a);
  clip-path: circle(0% var(--cx, 50%) var(--cy, 50%));
  -webkit-clip-path: circle(0% at var(--cx, 50%) var(--cy, 50%));
  pointer-events:none;
  z-index:-1;
  will-change:clip-path;
  transition: clip-path 1.1s cubic-bezier(.7,0,.2,1), -webkit-clip-path 1.1s cubic-bezier(.7,0,.2,1);
}
.foot.is-inverted{ color:#F5F2ED; }
.foot.is-inverted .foot__veil{
  clip-path: circle(160% at var(--cx, 50%) var(--cy, 50%));
  -webkit-clip-path: circle(160% at var(--cx, 50%) var(--cy, 50%));
}
.foot.is-inverted .foot__label{ color:rgba(245,242,237,.55); }
.foot.is-inverted .foot__muted{ color:rgba(245,242,237,.55); }
.foot.is-inverted .foot__rule{ background:rgba(245,242,237,.2); }
.foot.is-inverted .foot__base{ color:rgba(245,242,237,.5); }
/* light fills (yellow / pink) — keep text dark */
.foot.is-inverted.fill--light{ color:#1A1A1A; }
.foot.is-inverted.fill--light .foot__label{ color:rgba(26,26,26,.55); }
.foot.is-inverted.fill--light .foot__muted{ color:rgba(26,26,26,.55); }
.foot.is-inverted.fill--light .foot__rule{ background:rgba(26,26,26,.18); }
.foot.is-inverted.fill--light .foot__base{ color:rgba(26,26,26,.5); }
.foot.is-inverted.fill--light .logo-mark{ color:#1A1A1A; }

.foot__giant{
  margin:0 0 clamp(60px,8vh,120px);
  display:block;
  width:min(680px,56vw);
  max-width:100%;
  line-height:0;
}
.foot__giant .logo-mark{
  width:100%;
  height:auto;
  display:block;
  color:var(--ink);
}
.foot.is-inverted .logo-mark{ color:#F5F2ED; }

.foot__strapline{
  font-family:var(--sans);
  font-size:clamp(18px,2vw,32px);
  font-weight:700;
  line-height:1.1;
  letter-spacing:0;
  color:inherit;
  margin:0 0 clamp(36px,5vh,72px);
  text-transform:none;
}

.foot__cols{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:48px;
  padding-bottom:clamp(48px,8vh,120px);
}
.foot__col{
  display:flex;flex-direction:column;
  gap:8px;
  font-size:14px;
  line-height:1.55;
}
.foot__label{
  font-size:10px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--mute);
  margin-bottom:14px;
  font-variant:all-small-caps;
}
.foot__col a{
  position:relative;
  width:fit-content;
  padding-bottom:1px;
  background-image:linear-gradient(currentColor,currentColor);
  background-size:0% 1px;
  background-repeat:no-repeat;
  background-position:0 100%;
  transition:background-size .5s cubic-bezier(.2,.7,.1,1);
}
.foot__col a:hover{background-size:100% 1px}
.foot__muted{color:var(--mute);font-size:13px;margin-top:10px;max-width:34ch;line-height:1.5}

.foot__rule{height:1px;background:var(--rule);margin-bottom:18px}
.foot__base{
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px 32px;
  font-size:11px;letter-spacing:.06em;
  color:var(--mute);
}

/* =========================
   RESPONSIVE
   ========================= */
@media (max-width: 900px){
  .projects__grid{grid-template-columns:1fr;gap:64px}
  .projects__grid > .project,
  .projects__grid > .project:nth-child(3n+2){grid-column:1 / -1}
  .projects__grid > .project:nth-child(4n){margin-top:0}
  .project__meta{grid-template-columns:1fr;gap:16px}
  .philosophy__body p,
  .philosophy__body p + p{grid-column:1 / -1}
  .foot__cols{grid-template-columns:repeat(2,1fr);gap:40px 48px}
  .nav__links{gap:18px;font-size:14px}
}

/* ---- mobile nav: sticky glass + burger only ---- */
@media (max-width:760px){
  /* always show frosted glass bar, pinned above everything */
  .nav{
    background:rgba(245,242,237,0.92) !important;
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    border-bottom:1px solid rgba(10,10,10,0.07);
    color:var(--ink) !important;
    padding:16px var(--pad);
    z-index:800 !important;
  }
  /* hide text links — burger only */
  .nav__links a:not(.nav__menu){ display:none; }
  /* ensure logo stays readable (not inverted) */
  .nav--invert .logo-mark{ color:var(--ink); }
}
@media (max-width:600px){
  .foot__cols{grid-template-columns:1fr;gap:36px}
}

/* =========================
   NAV DRAWER
   ========================= */
.nav__drawer{
  position:fixed;
  inset:0 0 0 auto;
  width:clamp(300px,42vw,520px);
  background:#1A1A1A;
  color:#F5F2ED;
  z-index:200;
  display:flex;
  flex-direction:column;
  padding:clamp(56px,9vh,90px) clamp(40px,5vw,72px) clamp(40px,6vh,64px);
  transform:translateX(100%);
  transition:transform .65s cubic-bezier(.76,0,.24,1);
}
body.menu-open .nav__drawer{transform:translateX(0)}

.nav__overlay{
  position:fixed;
  inset:0;
  background:rgba(10,10,10,.5);
  z-index:150;
  opacity:0;
  pointer-events:none;
  transition:opacity .4s ease;
}
body.menu-open .nav__overlay{opacity:1;pointer-events:auto}

.nav__drawer-close{
  position:absolute;
  top:clamp(20px,3.5vh,36px);
  right:clamp(20px,2.8vw,36px);
  width:32px;height:32px;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  gap:0;
  background:none;border:none;cursor:pointer;
  color:#F5F2ED;
}
.nav__drawer-close span{
  display:block;width:22px;height:1px;background:currentColor;
  transition:transform .35s ease;
}
.nav__drawer-close span:first-child{transform:rotate(45deg) translate(0,.5px)}
.nav__drawer-close span:last-child{transform:rotate(-45deg) translate(0,-.5px)}

.nav__drawer-links{
  display:flex;flex-direction:column;
  gap:0;
  margin:auto 0;
}
.nav__drawer-links a{
  font-family:var(--sans);
  font-weight:700;
  font-size:clamp(36px,5.5vw,72px);
  letter-spacing:-0.03em;
  line-height:1.1;
  text-transform:lowercase;
  color:#F5F2ED;
  padding:.12em 0;
  border-bottom:1px solid rgba(245,242,237,.1);
  transition:color .3s ease;
}
.nav__drawer-links a:last-child{border-bottom:none}
.nav__drawer-links a:hover{color:var(--accent)}

.nav__drawer-foot{
  display:flex;flex-direction:column;
  gap:6px;
  font-size:12px;
  letter-spacing:.06em;
  color:rgba(245,242,237,.4);
  margin-top:auto;
  padding-top:32px;
}
.nav__drawer-foot a{
  color:rgba(245,242,237,.55);
  transition:color .3s ease;
}
.nav__drawer-foot a:hover{color:#F5F2ED}

/* hamburger → X when open */
body.menu-open .nav__menu span:first-child{transform:rotate(45deg) translate(4px,4px)}
body.menu-open .nav__menu span:last-child{transform:rotate(-45deg) translate(4px,-4px)}
.nav__menu span{transition:transform .35s ease,background .3s ease}

/* Sector project panel contrast guard */
.h-project.h-project--dark .h-project__title,
.h-project.h-project--dark .h-project__title a,
.h-project.h-project--ink .h-project__title,
.h-project.h-project--ink .h-project__title a,
.studio-rodgers-site .h-project.h-project--dark .h-project__title,
.studio-rodgers-site .h-project.h-project--dark .h-project__title a,
.studio-rodgers-site .h-project.h-project--ink .h-project__title,
.studio-rodgers-site .h-project.h-project--ink .h-project__title a{
  color:#F5F2ED!important;
}
.h-project.h-project--dark .h-project__location,
.h-project.h-project--ink .h-project__location,
.studio-rodgers-site .h-project.h-project--dark .h-project__location,
.studio-rodgers-site .h-project.h-project--ink .h-project__location{
  color:rgba(245,242,237,.62)!important;
}
.h-project.h-project--dark .h-project__desc,
.h-project.h-project--ink .h-project__desc,
.studio-rodgers-site .h-project.h-project--dark .h-project__desc,
.studio-rodgers-site .h-project.h-project--ink .h-project__desc{
  color:rgba(245,242,237,.76)!important;
}
.h-project.h-project--dark .h-project__fact-label,
.h-project.h-project--ink .h-project__fact-label,
.studio-rodgers-site .h-project.h-project--dark .h-project__fact-label,
.studio-rodgers-site .h-project.h-project--ink .h-project__fact-label{
  color:rgba(245,242,237,.48)!important;
}
.h-project.h-project--dark .h-project__fact-val,
.h-project.h-project--ink .h-project__fact-val,
.studio-rodgers-site .h-project.h-project--dark .h-project__fact-val,
.studio-rodgers-site .h-project.h-project--ink .h-project__fact-val{
  color:rgba(245,242,237,.92)!important;
}
.h-project.h-project--dark .h-project__cta,
.h-project.h-project--dark .h-project__cta:visited,
.h-project.h-project--ink .h-project__cta,
.h-project.h-project--ink .h-project__cta:visited,
.studio-rodgers-site .h-project.h-project--dark .h-project__cta,
.studio-rodgers-site .h-project.h-project--dark .h-project__cta:visited,
.studio-rodgers-site .h-project.h-project--ink .h-project__cta,
.studio-rodgers-site .h-project.h-project--ink .h-project__cta:visited{
  color:#F5F2ED!important;
}

/* Site-wide Franklin Gothic enforcement */
html,
body,
.studio-rodgers-site,
.studio-rodgers-site *{
  font-family:var(--body)!important;
}

body :is(p,li,dt,dd,blockquote,figcaption,address,label,input,textarea,select),
.studio-rodgers-site :is(p,li,dt,dd,blockquote,figcaption,address,label,input,textarea,select){
  font-family:var(--body)!important;
  font-weight:400!important;
}

body :is(h1,h2,h3,h4,h5,h6,h1 *,h2 *,h3 *,h4 *,h5 *,h6 *),
.studio-rodgers-site :is(h1,h2,h3,h4,h5,h6,h1 *,h2 *,h3 *,h4 *,h5 *,h6 *),
body :is(.statement__headline,.section-head__title,.sector__title,.project__title,.proj-intro__title,.co-intro__headline,.contact-intro__title,.social-intro__title,.philosophy__headline,.site-cta__title,.h-hero__title,.h-project-tile__name,.nav__drawer-links a),
.studio-rodgers-site :is(.statement__headline,.section-head__title,.sector__title,.project__title,.proj-intro__title,.co-intro__headline,.contact-intro__title,.social-intro__title,.philosophy__headline,.site-cta__title,.h-hero__title,.h-project-tile__name,.nav__drawer-links a){
  font-family:var(--heading)!important;
  font-weight:800!important;
}

body :is(.nav,.nav *,.foot__giant,.foot__strapline,.foot__label,.foot__base,.sector__cta,.project__cta,.h-project__cta,.h-project-tile__kicker,.h-project-tile__location,.hero__label,.hero__view,.proj-nav,.proj-nav *),
.studio-rodgers-site :is(.nav,.nav *,.foot__giant,.foot__strapline,.foot__label,.foot__base,.sector__cta,.project__cta,.h-project__cta,.h-project-tile__kicker,.h-project-tile__location,.hero__label,.hero__view,.proj-nav,.proj-nav *){
  font-family:var(--franklin-normal)!important;
}