/* =========================================================
   STUDIO RODGERS — 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)
   ========================================================= */

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

  --serif:"Instrument Serif", "Times New Roman", serif;
  --sans:"Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;

  --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(--sans);
  font-weight:400;
  font-size:16px;
  line-height:1.5;
  letter-spacing:-0.005em;
  overflow-x:hidden;
}
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}

/* 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__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__headline em{font-style:italic;letter-spacing:-0.02em}
.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: 760px){
  .statement__foot{grid-template-columns:1fr;gap:24px}
}

/* =========================
   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
   ========================= */
.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 iframe{
  position:absolute;
  top:50%;left:50%;
  width:max(100%, calc(100% * 16 / 9));
  height:max(100%, calc(100% * 9 / 16));
  min-width:100%;
  min-height:100%;
  /* video is square crop — scale to cover */
  width:177.78%;
  height:177.78%;
  transform:translate(-50%, -50%);
  pointer-events:none;
  border:0;
}

/* 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{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(15px,1.05vw,17px);
  line-height:1.65;
  text-align:left;
}
.philosophy__body p{
  max-width:52ch;
}
.philosophy__body p + p{margin-top:18px}
.philosophy__body em{font-style:italic}

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

/* =========================
   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;
  line-height:0;
}
.foot__giant .logo-mark{
  width:100%;
  height:auto;
  display:block;
  color:var(--ink);
}
.foot.is-inverted .logo-mark{ color:#F5F2ED; }

.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);
}

/* =========================
   WORDPRESS SHORTCODE OVERRIDES
   ========================= */
.studio-rodgers-site{
  position:relative;
  width:100vw !important;
  max-width:100vw !important;
  margin-left:calc(50% - 50vw) !important;
  margin-right:calc(50% - 50vw) !important;
  overflow-x:clip;
}
.studio-rodgers-site .hero{
  width:100vw !important;
  max-width:none !important;
  height:100vh !important;
  min-height:100svh;
  margin:0 !important;
}
.studio-rodgers-site .hero__stage,
.studio-rodgers-site .hero__slide,
.studio-rodgers-site .hero__video{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  max-height:none !important;
}
.studio-rodgers-site .hero__video iframe{
  position:absolute !important;
  top:50% !important;
  left:50% !important;
  width:max(100vw, calc(100vh * 16 / 9)) !important;
  height:max(100vh, calc(100vw * 9 / 16)) !important;
  min-width:100vw !important;
  min-height:100vh !important;
  max-width:none !important;
  max-height:none !important;
  transform:translate(-50%, -50%) !important;
}
.studio-rodgers-site .nav.nav--glass{
  background:rgba(245,242,237,0.82) !important;
  backdrop-filter:blur(18px) saturate(1.18) !important;
  -webkit-backdrop-filter:blur(18px) saturate(1.18) !important;
  border-bottom:1px solid rgba(10,10,10,0.12) !important;
  box-shadow:0 12px 30px rgba(10,10,10,0.06) !important;
  color:var(--ink) !important;
}
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;
}
