/* ============================================================
   LISA FUREY INTERIORS — Low Country Modern Luxury
   Editorial design system, benchmarked to top US studios
   (Studio McGee · Amber · Kelly Wearstler · Ken Fulk · Marie Flanigan)
   ============================================================ */

/* ---------- Design tokens ---------- */
:root{
  /* palette: deep desaturated navy + warm ivory + antique brass */
  --ink:#11202f;            /* near-black navy: primary text */
  --ground:#0e1b2a;         /* darkest section ground */
  --ground-2:#16263b;       /* navy panel */
  --ink-soft:#3a4654;
  --paper:#f7f3ec;          /* warm ivory ground */
  --paper-2:#efe8db;        /* deeper sand */
  --cream:#fbf9f4;          /* paper-white card / elevated */
  --sand:#e3d9c6;           /* keyline / divider neutral */
  --stone:#9c8e76;          /* warm gray */
  --muted:#6b5e48;          /* warm secondary text */
  --white:#ffffff;
  --brass:#b08d45;          /* antique brass (primary accent) */
  --brass-bright:#c9a227;   /* brighter gold — on dark grounds only */
  --brass-deep:#8c6f38;     /* shadow gold */
  --brass-pale:#d9bc6a;     /* pale gold */
  --line:rgba(17,32,47,.12);
  --line-soft:rgba(17,32,47,.07);
  --line-cream:rgba(247,243,236,.16);

  --display:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Hanken Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;

  --container:1320px;
  --container-wide:1560px;
  --gutter:clamp(24px,5vw,80px);
  --section:clamp(72px,10vw,160px);
  --radius:0px;

  --ease:cubic-bezier(.16,1,.3,1);       /* expo-out: luxury entrance */
  --ease-q:cubic-bezier(.22,1,.36,1);     /* quint-out: ui/hover */
  --ease-io:cubic-bezier(.65,0,.35,1);    /* in-out for overlays */
  --header-h:88px;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  font-family:var(--sans);
  font-size:1.1875rem;          /* 19px */
  line-height:1.6;
  font-weight:400;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  font-feature-settings:"kern" 1,"liga" 1,"onum" 1;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
ul{list-style:none}
::selection{background:var(--brass);color:#fff}

/* subtle paper grain overlay (defeats flat beige) */
body::after{
  content:"";position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}

/* ---------- Typography ---------- */
h1,h2,h3,h4{font-family:var(--display);font-weight:400;line-height:1.08;color:var(--ink);font-optical-sizing:auto;overflow-wrap:break-word}
.display-xl{font-size:clamp(2.5rem,7vw,6.4rem);font-weight:400;line-height:1.02;letter-spacing:-.018em;font-variation-settings:"opsz" 144,"SOFT" 0,"WONK" 0}
.display-l{font-size:clamp(2.3rem,5vw,4.3rem);font-weight:400;line-height:1.06;letter-spacing:-.015em;font-variation-settings:"opsz" 140,"SOFT" 0,"WONK" 0}
.display-m{font-size:clamp(1.95rem,3.6vw,3.1rem);font-weight:450;line-height:1.1;letter-spacing:-.008em;font-variation-settings:"SOFT" 0,"WONK" 0}
.display-s{font-size:clamp(1.5rem,2.4vw,2.1rem);font-weight:500;line-height:1.16;letter-spacing:0;font-variation-settings:"SOFT" 0,"WONK" 0}
.serif-italic{font-style:italic}

p{max-width:64ch;overflow-wrap:break-word}
.lead{font-size:clamp(1.2rem,1.6vw,1.4rem);line-height:1.5;color:var(--ink-soft);font-weight:400;max-width:60ch}
strong{font-weight:600;color:var(--ink)}

/* eyebrow / kicker */
.eyebrow{
  display:inline-flex;align-items:center;gap:.85em;flex-wrap:wrap;
  font-family:var(--sans);font-size:.8rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--brass-deep);
}
.eyebrow::before{content:"";width:34px;height:1px;background:var(--brass);display:inline-block}
.eyebrow.no-rule::before{display:none}
.eyebrow.light{color:var(--brass-pale)}
.eyebrow.light::before{background:var(--brass-pale)}
.eyebrow.center{justify-content:center}

.index-num{font-family:var(--display);font-size:.95rem;color:var(--brass-deep);letter-spacing:.04em;font-feature-settings:"tnum" 1}

/* ---------- Layout ---------- */
.wrap{max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.wrap-wide{max-width:var(--container-wide);margin-inline:auto;padding-inline:var(--gutter)}
.wrap-narrow{max-width:900px;margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--section)}
.section-sm{padding-block:clamp(54px,7vw,100px)}
.bg-paper{background:var(--paper)}
.bg-cream{background:var(--cream)}
.bg-sand{background:var(--paper-2)}
.bg-ink{background:var(--ground);color:var(--paper-2)}
.bg-ink h1,.bg-ink h2,.bg-ink h3,.bg-ink h4{color:var(--cream)}
.hairline{height:1px;background:var(--line);border:0;margin:0}

.grid{display:grid;gap:clamp(28px,4vw,64px)}
.cols-2{grid-template-columns:repeat(2,1fr)}
.cols-3{grid-template-columns:repeat(3,1fr)}
.cols-4{grid-template-columns:repeat(4,1fr)}
.items-center{align-items:center}
.section-head{max-width:760px}
.section-head .lead{margin-top:1.1rem}
.mt-1{margin-top:.6rem}.mt-2{margin-top:1.2rem}.mt-3{margin-top:2rem}.mt-4{margin-top:3.2rem}

/* ---------- Buttons (outline / ink — no gold fills) ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.7em;
  font-family:var(--sans);font-size:.82rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  padding:1.05em 2.1em;border-radius:0;position:relative;overflow:hidden;
  background:var(--ink);color:var(--cream);border:1px solid var(--ink);
  transition:color .5s var(--ease),background .5s var(--ease),border-color .5s var(--ease);
}
.btn .arr{transition:transform .45s var(--ease);position:relative;z-index:2}
.btn span{position:relative;z-index:2}
.btn::after{content:"";position:absolute;inset:0;background:var(--ground-2);transform:translateY(101%);transition:transform .55s var(--ease);z-index:1}
.btn:hover::after{transform:translateY(0)}
.btn:hover .arr{transform:translateX(5px)}
.btn-outline{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-outline::after{background:var(--ink)}
.btn-outline:hover{color:var(--cream)}
.btn-outline.on-dark{color:var(--cream);border-color:rgba(217,188,106,.6)}
.btn-outline.on-dark::after{background:var(--brass-bright)}
.btn-outline.on-dark:hover{color:var(--ground);border-color:var(--brass-bright)}
.btn-brass{background:transparent;color:var(--cream);border-color:var(--brass-bright)}
.btn-brass::after{background:var(--brass-bright)}
.btn-brass:hover{color:var(--ground);border-color:var(--brass-bright)}

/* animated-underline text link */
.link-u{
  display:inline-flex;align-items:center;gap:.6em;font-weight:600;
  font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);
  position:relative;padding-bottom:5px;
}
.link-u::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--brass);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.link-u:hover::after{transform:scaleX(1)}
.link-u .arr{transition:transform .4s var(--ease)}
.link-u:hover .arr{transform:translateX(5px)}
.link-u.light{color:var(--cream)}
.link-u.back .arr{transform:scaleX(-1)}
.link-u.back:hover .arr{transform:scaleX(-1) translateX(5px)}
.inline-link{color:var(--brass-deep);font-weight:600;border-bottom:1px solid rgba(176,141,69,.4);transition:border-color .35s,color .35s}
.inline-link:hover{color:var(--ink);border-color:var(--brass)}

/* ============================================================
   HEADER
   ============================================================ */
.site-header{position:fixed;top:0;left:0;width:100%;z-index:200;transition:background .5s var(--ease),box-shadow .5s var(--ease),transform .5s var(--ease)}
.site-header::before{content:"";position:absolute;inset:0 0 auto 0;height:150px;background:linear-gradient(180deg,rgba(14,27,42,.5),rgba(14,27,42,0));pointer-events:none;z-index:-1;transition:opacity .5s var(--ease)}
.site-header.solid::before,body.header-light .site-header:not(.solid)::before{opacity:0}
.site-header .bar{display:flex;align-items:center;justify-content:space-between;height:var(--header-h);padding-inline:var(--gutter);max-width:var(--container-wide);margin-inline:auto;transition:height .4s var(--ease)}
.brand{display:flex;align-items:center;gap:.8rem;z-index:210}
.brand .wordmark{font-family:var(--display);font-size:1.5rem;font-weight:400;letter-spacing:.01em;line-height:1;color:var(--cream);transition:color .5s var(--ease)}
.brand .wordmark b{font-weight:500}
.brand .sub{display:block;font-family:var(--sans);font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;color:var(--brass-pale);margin-top:6px}
.nav{display:flex;align-items:center;gap:clamp(1.2rem,2vw,2.4rem)}
.nav a{font-family:var(--sans);font-size:.8rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--cream);position:relative;padding-block:6px;transition:color .4s var(--ease);opacity:.92}
.nav a::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--brass-pale);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.nav a:hover,.nav a[aria-current="page"]{opacity:1}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}
.nav .cta{border:1px solid rgba(217,188,106,.55);padding:.7em 1.4em;letter-spacing:.16em;transition:color .45s var(--ease),background .45s var(--ease),border-color .45s}
.nav .cta::after{display:none}
.nav .cta:hover{background:var(--brass-bright);border-color:var(--brass-bright);color:var(--ground)}

/* Menu disclosure button (visible all sizes) */
.menu-btn{display:flex;align-items:center;gap:.7rem;z-index:210;font-family:var(--sans);font-size:.74rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--cream);transition:color .4s var(--ease)}
.menu-btn .ml{display:flex;flex-direction:column;gap:5px;width:26px;align-items:flex-end}
.menu-btn .ml span{display:block;height:1.5px;width:26px;background:currentColor;transition:transform .45s var(--ease),width .45s var(--ease),opacity .3s}
.menu-btn .ml span:nth-child(2){width:18px}
.menu-btn .label{transition:opacity .3s}

/* scrolled / solid */
.site-header.solid{background:var(--paper);box-shadow:0 1px 0 var(--line)}
.site-header.solid .bar{height:70px}
.site-header.solid .brand .wordmark,.site-header.solid .nav a,.site-header.solid .menu-btn{color:var(--ink)}
.site-header.solid .nav .cta{border-color:var(--ink)}
.site-header.solid .nav .cta:hover{color:var(--ground);border-color:var(--brass)}
.site-header.hide{transform:translateY(-100%)}
body.header-light .site-header:not(.solid) .brand .wordmark,
body.header-light .site-header:not(.solid) .nav a,
body.header-light .site-header:not(.solid) .menu-btn{color:var(--ink)}
body.header-light .site-header:not(.solid) .nav .cta{border-color:var(--ink)}

/* menu open state — turn lines into X */
.menu-open .menu-btn{color:var(--cream)}
.menu-open .menu-btn .ml span:nth-child(1){transform:translateY(6.5px) rotate(45deg);width:26px}
.menu-open .menu-btn .ml span:nth-child(2){opacity:0}
.menu-open .menu-btn .ml span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);width:26px}

/* overlay menu */
.mobile-menu{position:fixed;inset:0;background:var(--ground);z-index:205;display:flex;flex-direction:column;justify-content:center;padding:var(--gutter);clip-path:inset(0 0 100% 0);transition:clip-path .8s var(--ease);pointer-events:none}
.menu-open .mobile-menu{clip-path:inset(0 0 0 0);pointer-events:auto}
.mobile-menu nav{display:flex;flex-direction:column;gap:.05em;max-width:var(--container);margin-inline:auto;width:100%}
.mobile-menu nav a{font-family:var(--display);font-weight:300;font-size:clamp(2rem,7vw,3.6rem);color:var(--cream);line-height:1.22;letter-spacing:-.01em;display:flex;align-items:baseline;gap:1rem;opacity:0;transform:translateY(28px);transition:opacity .6s var(--ease),transform .6s var(--ease),color .4s}
.mobile-menu nav a .mi{font-family:var(--sans);font-size:.7rem;color:var(--brass-pale);letter-spacing:.2em;font-weight:600}
.menu-open .mobile-menu nav a{opacity:1;transform:none;transition-delay:calc(.18s + var(--i,0)*.05s)}
.mobile-menu nav a:hover{color:var(--brass-pale)}
.mobile-menu .mm-foot{margin-top:3rem;display:flex;flex-wrap:wrap;gap:1.2rem 2.4rem;color:var(--paper-2);font-size:.9rem;opacity:0;transition:opacity .6s ease .6s}
.menu-open .mobile-menu .mm-foot{opacity:1}
.mobile-menu .mm-foot a{color:var(--brass-pale);letter-spacing:.06em}

/* ============================================================
   CUSTOM CURSOR (desktop, fine pointer only)
   ============================================================ */
.cursor-dot,.cursor-ring{position:fixed;top:0;left:0;border-radius:50%;pointer-events:none;z-index:400;transform:translate(-50%,-50%);opacity:0;transition:opacity .4s}
.cursor-dot{width:7px;height:7px;background:var(--brass);mix-blend-mode:normal}
.cursor-ring{width:42px;height:42px;border:1px solid rgba(176,141,69,.6);transition:width .4s var(--ease-q),height .4s var(--ease-q),background .4s,border-color .4s,opacity .4s}
.cursor-ring.grow{width:74px;height:74px;background:rgba(176,141,69,.1);border-color:transparent}
@media (hover:hover) and (pointer:fine){
  .cursor-ready,.cursor-ready a,.cursor-ready button,.cursor-ready .g-item{cursor:none}
  .cursor-ready .cursor-dot,.cursor-ready .cursor-ring{opacity:1}
}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden;background:var(--ground)}
.hero-media{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero-media img{width:100%;height:118%;object-fit:cover;object-position:center;will-change:transform}
.hero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,27,42,.5) 0%,rgba(14,27,42,.28) 30%,rgba(14,27,42,.34) 60%,rgba(14,27,42,.62) 100%)}
.hero-inner{position:relative;z-index:2;width:100%;min-width:0;max-width:var(--container-wide);margin-inline:auto;padding:calc(var(--header-h) + 2vh) var(--gutter) 0}
.hero h1{color:var(--cream);max-width:15ch;text-shadow:0 2px 40px rgba(10,18,28,.45)}
.hero .lead{color:rgba(251,249,244,.95);max-width:42ch;margin-top:1.6rem;text-shadow:0 1px 24px rgba(10,18,28,.5)}
.hero .eyebrow{margin-bottom:1.7rem}
.hero .eyebrow.light{color:#f0e4cb;text-shadow:0 1px 16px rgba(10,18,28,.6)}
.hero-actions{display:flex;flex-wrap:wrap;gap:1.2rem 2rem;align-items:center;margin-top:2.6rem}
.scroll-cue{position:absolute;right:var(--gutter);bottom:clamp(56px,9vh,120px);z-index:2;display:flex;align-items:center;gap:.8rem;color:rgba(251,249,244,.7);font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;writing-mode:vertical-rl}
.scroll-cue .l{width:1px;height:54px;background:linear-gradient(var(--brass-pale),transparent);position:relative;overflow:hidden}
.scroll-cue .l::after{content:"";position:absolute;top:0;left:0;width:100%;height:40%;background:var(--brass-pale);animation:scrolldn 2.4s var(--ease) infinite}
@keyframes scrolldn{0%{transform:translateY(-100%)}60%,100%{transform:translateY(260%)}}

/* split-line headline reveal */
.lines .ln{display:block;overflow:hidden;padding-bottom:.02em}
.lines .ln>span{display:block;transform:translateY(110%);transition:transform 1s var(--ease)}
.lines.in .ln>span{transform:none}
.lines.in .ln:nth-child(2)>span{transition-delay:.09s}
.lines.in .ln:nth-child(3)>span{transition-delay:.18s}

/* hero settle reveal (clip + scale) — image "settles into the frame" */
.hero-rise{animation:heroSettle 1.5s var(--ease) .4s both}
@keyframes heroSettle{from{clip-path:inset(0 0 100% 0);transform:scale(1.08)}to{clip-path:inset(0 0 0 0);transform:scale(1)}}

/* page hero */
.page-hero{position:relative;padding-top:calc(var(--header-h) + clamp(48px,8vw,96px));padding-bottom:clamp(40px,6vw,80px);overflow:hidden}
.page-hero.has-img{min-height:66vh;display:flex;align-items:flex-end;color:var(--cream);background:var(--ground)}
.page-hero.tall-hero{min-height:82vh}
.page-hero.has-img .hero-media::after{background:linear-gradient(180deg,rgba(14,27,42,.3),rgba(14,27,42,.12) 45%,rgba(14,27,42,.7))}
.page-hero .ph-inner{position:relative;z-index:2;width:100%;min-width:0}
.page-hero.has-img h1{color:var(--cream)}
.page-hero.has-img .lead{color:rgba(251,249,244,.9)}
.page-hero h1{max-width:18ch}
.page-hero .lead{margin-top:1.2rem;max-width:54ch}
.breadcrumb{display:flex;gap:.6rem;align-items:center;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:1.7rem}
.page-hero.has-img .breadcrumb{color:rgba(251,249,244,.75)}
.breadcrumb a:hover{color:var(--brass)}
.breadcrumb .sep{opacity:.5}

/* ============================================================
   STATS
   ============================================================ */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-block:1px solid var(--line)}
.stats .stat{padding:clamp(34px,4vw,64px) clamp(20px,2.4vw,40px);border-left:1px solid var(--line)}
.stats .stat:first-child{border-left:0}
.stats .stat b{display:block;font-family:var(--display);font-weight:400;font-size:clamp(2.4rem,4.2vw,3.7rem);line-height:1;color:var(--ink);letter-spacing:-.02em;font-feature-settings:"tnum" 1;white-space:nowrap}
.stats .stat b em{color:var(--brass-deep);font-style:normal}
.stats .stat span{display:block;margin-top:.9rem;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);line-height:1.5}

/* ============================================================
   SPLIT BLOCKS
   ============================================================ */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,96px);align-items:center}
.split.wide-img{grid-template-columns:1.15fr .85fr}
.figure{position:relative;overflow:hidden;background:var(--paper-2)}
.figure img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.figure.tall{aspect-ratio:4/5}
.figure.portrait{aspect-ratio:3/4}
.figure.land{aspect-ratio:4/3}
.figure.square{aspect-ratio:1/1}
.figure.face img{object-position:center 22%}
.figure-stack{position:relative}
.figure-stack .f2{position:absolute;width:46%;bottom:-9%;right:-7%;border:7px solid var(--paper);box-shadow:0 30px 60px -34px rgba(14,27,42,.45);overflow:hidden;aspect-ratio:3/4}
.figure-stack .f2 img{width:100%;height:100%;object-fit:cover}

/* ============================================================
   PROJECT / PORTFOLIO GRID — flat, caption beneath, portrait
   ============================================================ */
.proj-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(28px,4vw,72px) clamp(24px,3vw,52px)}
.proj.feat{grid-column:1 / -1}
.proj-card{display:block;position:relative}
.proj-card .pc-img{overflow:hidden;aspect-ratio:4/5;background:var(--paper-2)}
.proj.feat .pc-img{aspect-ratio:16/9}
.proj-card img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.proj-card:hover img{transform:scale(1.04)}
.proj-cap{padding-top:1.3rem;display:flex;flex-direction:column;gap:.4rem}
.proj-cap .loc{font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--brass-deep)}
.proj-cap h3{font-size:clamp(1.4rem,2vw,1.9rem);font-weight:400;color:var(--ink)}
.proj-cap .view{display:inline-flex;align-items:center;gap:.5em;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-top:.3rem;transition:color .4s}
.proj-card:hover .proj-cap .view{color:var(--brass-deep)}
.proj-cap .view .arr{transition:transform .4s var(--ease)}
.proj-card:hover .view .arr{transform:translateX(5px)}

/* duo service cards (full-bleed image, caption beneath) */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,64px)}
.duo-card .dc-img{overflow:hidden;aspect-ratio:16/11;background:var(--paper-2)}
.duo-card img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.duo-card:hover img{transform:scale(1.04)}
.duo-card .dc-body{padding-top:1.4rem}
.duo-card .label{font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--brass-deep)}
.duo-card h3{font-size:clamp(1.5rem,2.2vw,2.05rem);font-weight:400;margin-top:.5rem;max-width:18ch}
.duo-card .view{display:inline-flex;gap:.5em;align-items:center;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-top:1rem}
.duo-card:hover .view{color:var(--brass-deep)}

/* ============================================================
   GALLERY (project detail) + LIGHTBOX (FLIP)
   ============================================================ */
.gallery{columns:3;column-gap:clamp(16px,1.8vw,28px)}
.gallery .g-item{break-inside:avoid;margin-bottom:clamp(16px,1.8vw,28px);position:relative;overflow:hidden;background:var(--paper-2);cursor:pointer}
.gallery .g-item img{width:100%;transition:transform 1.1s var(--ease),opacity .8s ease}
.gallery .g-item:hover img{transform:scale(1.035)}
.gallery .g-item .zoom{position:absolute;right:14px;top:14px;width:38px;height:38px;border-radius:50%;background:rgba(251,249,244,.92);display:flex;align-items:center;justify-content:center;opacity:0;transform:scale(.8);transition:all .45s var(--ease);color:var(--ink)}
.gallery .g-item:hover .zoom{opacity:1;transform:scale(1)}

.lightbox{position:fixed;inset:0;z-index:300;background:rgba(10,18,28,.97);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .4s var(--ease)}
.lightbox.open{opacity:1;pointer-events:auto}
.lightbox img{max-width:92vw;max-height:84vh;object-fit:contain;box-shadow:0 40px 90px -40px #000}
.lb-btn{position:absolute;color:var(--cream);width:56px;height:56px;display:flex;align-items:center;justify-content:center;border:1px solid rgba(247,243,236,.22);border-radius:50%;transition:background .4s,border-color .4s}
.lb-btn:hover{background:var(--brass-bright);border-color:var(--brass-bright);color:var(--ground)}
.lb-prev{left:clamp(14px,3vw,48px)}
.lb-next{right:clamp(14px,3vw,48px)}
.lb-close{top:clamp(14px,3vw,38px);right:clamp(14px,3vw,38px);width:48px;height:48px}
.lb-count{position:absolute;bottom:clamp(18px,4vh,42px);left:50%;transform:translateX(-50%);color:var(--brass-pale);font-size:.8rem;letter-spacing:.2em}
@media (max-width:640px){.lb-prev{left:8px}.lb-next{right:8px}.lb-btn{width:46px;height:46px}}

/* ============================================================
   TESTIMONIALS — editorial pull-quotes (no stars/cards)
   ============================================================ */
.quote-feature{text-align:center;max-width:1040px;margin-inline:auto}
.quote-feature .q{font-family:var(--display);font-weight:300;font-style:italic;font-size:clamp(1.6rem,3.1vw,2.6rem);line-height:1.32;color:var(--ink);letter-spacing:-.01em}
.quote-feature .by{margin-top:1.9rem;font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;color:var(--brass-deep)}
.quote-mark{font-family:var(--display);font-size:4.5rem;line-height:.5;color:var(--brass);opacity:.42;height:.5em;display:block}

/* list of pull-quotes separated by hairlines */
.quote-list{max-width:1100px;margin-inline:auto}
.quote-row{padding-block:clamp(40px,5vw,72px);border-top:1px solid var(--line)}
.quote-row:first-child{border-top:0}
.quote-row .q{font-family:var(--display);font-style:italic;font-weight:300;font-size:clamp(1.3rem,2.1vw,1.8rem);line-height:1.4;color:var(--ink);letter-spacing:-.005em;max-width:46ch}
.quote-row .by{margin-top:1.3rem;font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;color:var(--brass-deep);font-weight:600}

/* home rotator */
.t-slider{position:relative;max-width:1040px;margin-inline:auto;min-height:1px}
.t-slide{display:none}
.t-slide.active{display:block;animation:fadein .9s var(--ease)}
@keyframes fadein{from{opacity:0;transform:translateY(14px)}to{opacity:1}}
.t-nav{display:flex;gap:1.6rem;justify-content:center;align-items:center;margin-top:2.8rem}
.t-nav .tc{font-family:var(--display);font-size:.95rem;color:var(--muted);letter-spacing:.1em;font-feature-settings:"tnum" 1}
.t-arrow{width:46px;height:46px;border:1px solid var(--line);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--ink);transition:background .4s,border-color .4s,color .4s}
.t-arrow:hover{background:var(--ink);border-color:var(--ink);color:var(--cream)}

/* ============================================================
   PRESS — flat cards, no lift
   ============================================================ */
.press-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:clamp(22px,2.6vw,44px)}
.press-card .pc-cover{aspect-ratio:3/4;overflow:hidden;background:var(--paper-2)}
.press-card .pc-cover img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.press-card:hover .pc-cover img{transform:scale(1.04)}
.press-card .pc-body{padding-top:1.2rem}
.press-card .pc-body h3{font-size:1.18rem;line-height:1.2;font-weight:400}
.press-card .pc-body .meta{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:.55rem}
.press-card .pc-body .credit{font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--stone);margin-top:.7rem}

/* award/publication marquee */
.marquee{overflow:hidden;border-block:1px solid var(--line-cream)}
.marquee .track{display:flex;gap:4.5rem;white-space:nowrap;will-change:transform;animation:marq 42s linear infinite;padding-block:2.4rem}
.marquee:hover .track{animation-play-state:paused}
.marquee .m-item{font-family:var(--display);font-style:italic;font-weight:300;font-size:clamp(1.2rem,1.9vw,1.8rem);color:var(--cream);opacity:.8;flex:none}
.marquee .m-item .dot{color:var(--brass-pale);font-style:normal;margin-left:4.5rem;font-size:.6em;vertical-align:middle}
@keyframes marq{to{transform:translateX(-50%)}}

/* ============================================================
   PROCESS STEPS
   ============================================================ */
.steps{border-top:1px solid var(--line)}
.step{display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,4vw,80px);padding-block:clamp(34px,4vw,60px);border-bottom:1px solid var(--line);align-items:start}
.step .n{font-family:var(--display);font-weight:300;font-size:clamp(2.2rem,4vw,3.6rem);color:var(--brass-deep);line-height:.9;letter-spacing:-.02em;font-feature-settings:"tnum" 1}
.step .st-body h3{font-size:clamp(1.4rem,2.2vw,2rem);font-weight:400}
.step .st-list{display:flex;flex-wrap:wrap;gap:.6rem .7rem;margin-top:1.2rem}
.step .st-list li{font-size:.86rem;letter-spacing:.03em;color:var(--ink-soft);border:1px solid var(--line);padding:.5em 1.05em;border-radius:0}

/* feature/check list + chips */
.flist{display:grid;gap:1.1rem}
.flist li{display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:start;font-size:1.02rem;color:var(--ink);line-height:1.5}
.flist .tick{width:26px;height:26px;border:1px solid var(--brass);color:var(--brass-deep);display:flex;align-items:center;justify-content:center;flex:none;margin-top:2px;font-size:.8rem}
.flist.two{grid-template-columns:1fr 1fr;gap:1.1rem 2.4rem}
.chips{display:flex;flex-wrap:wrap;gap:.65rem}
.chips li{font-size:.86rem;letter-spacing:.03em;color:var(--ink-soft);border:1px solid var(--line);padding:.55em 1.1em;transition:border-color .4s,color .4s}
.chips li:hover{border-color:var(--brass);color:var(--ink)}

/* ============================================================
   CTA BAND
   ============================================================ */
.cta-band{position:relative;overflow:hidden;background:var(--ground);color:var(--cream);text-align:center}
.cta-band .cta-media{position:absolute;inset:0;opacity:.2;overflow:hidden}
.cta-band .cta-media img{width:100%;height:100%;object-fit:cover}
.cta-band .inner{position:relative;z-index:2;padding-block:clamp(84px,11vw,156px)}
.cta-band h2{color:var(--cream);max-width:20ch;margin-inline:auto}
.cta-band .lead{color:rgba(251,249,244,.82);margin:1.5rem auto 0;max-width:52ch}
.cta-band .hero-actions{justify-content:center}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{background:var(--ground);color:var(--paper-2);padding-top:clamp(72px,8vw,124px)}
.footer-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:clamp(32px,4vw,64px);padding-bottom:clamp(48px,6vw,84px);border-bottom:1px solid var(--line-cream)}
.footer-brand .wordmark{font-family:var(--display);font-size:2rem;color:var(--cream);line-height:1;font-weight:400}
.footer-brand .wordmark b{font-weight:500}
.footer-brand .sub{font-size:.6rem;letter-spacing:.34em;text-transform:uppercase;color:var(--brass-pale);margin-top:9px}
.footer-brand p{margin-top:1.7rem;color:var(--paper-2);opacity:.78;font-size:.96rem;max-width:36ch;line-height:1.6}
.footer-col h4{font-family:var(--sans);font-size:.74rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--brass-pale);margin-bottom:1.4rem}
.footer-col ul{display:grid;gap:.8rem}
.footer-col a,.footer-col p{color:var(--paper-2);opacity:.8;font-size:.95rem;transition:opacity .4s,color .4s}
.footer-col a:hover{opacity:1;color:var(--brass-pale)}
.footer-col .lh{line-height:1.6}
.social{display:flex;gap:.8rem;margin-top:1.5rem}
.social a{width:42px;height:42px;border:1px solid var(--line-cream);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--paper-2);transition:all .45s var(--ease)}
.social a:hover{background:var(--brass-bright);border-color:var(--brass-bright);color:var(--ground);transform:translateY(-3px)}
.footer-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;padding-block:2rem;font-size:.8rem;letter-spacing:.04em;color:var(--stone)}
.footer-bottom a:hover{color:var(--brass-pale)}

/* ============================================================
   PROSE / BLOG / CONTACT
   ============================================================ */
.prose p{margin-bottom:1.5rem;color:var(--ink);max-width:66ch}
.prose p:last-child{margin-bottom:0}
.prose h3{margin-top:2.6rem;margin-bottom:1rem}

.blog-card{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4vw,64px);align-items:center}
.blog-card .bc-img{aspect-ratio:4/3;overflow:hidden;background:var(--paper-2)}
.blog-card .bc-img img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.blog-card:hover .bc-img img{transform:scale(1.04)}
.blog-card .date{font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--brass-deep)}
.blog-card h3{font-size:clamp(1.6rem,2.4vw,2.3rem);margin-top:.8rem;line-height:1.12;font-weight:400}

.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,5vw,88px);align-items:start}
.contact-info .ci-item{padding-block:1.6rem;border-bottom:1px solid var(--line)}
.contact-info .ci-item:first-child{padding-top:0}
.contact-info .ci-item h4{font-family:var(--sans);font-size:.74rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--brass-deep);margin-bottom:.6rem}
.contact-info .ci-item a,.contact-info .ci-item p{font-family:var(--display);font-size:clamp(1.3rem,2vw,1.7rem);color:var(--ink);font-weight:400}
.contact-info .ci-item a:hover{color:var(--brass-deep)}
.form{display:grid;gap:1.4rem;background:var(--cream);padding:clamp(28px,3.4vw,52px);border:1px solid var(--line)}
.field{display:grid;gap:.5rem}
.field label{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600}
.field input,.field select,.field textarea{font-family:var(--sans);font-size:1rem;color:var(--ink);background:var(--white);border:1px solid var(--line);border-radius:0;padding:.95em 1.1em;width:100%;transition:border-color .4s,box-shadow .4s}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--brass);box-shadow:0 0 0 3px rgba(176,141,69,.13)}
.field textarea{min-height:140px;resize:vertical}
.field.two{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem}
.form-note{font-size:.84rem;color:var(--muted);line-height:1.5}

.faq{border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-q{display:flex;justify-content:space-between;align-items:center;gap:1rem;width:100%;text-align:left;padding:1.6rem 0;font-family:var(--display);font-size:clamp(1.15rem,1.8vw,1.45rem);color:var(--ink);font-weight:400}
.faq-q .ic{flex:none;width:30px;height:30px;border:1px solid var(--brass);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--brass-deep);transition:transform .45s var(--ease),background .4s,color .4s;position:relative}
.faq-q .ic::before,.faq-q .ic::after{content:"";position:absolute;background:var(--brass-deep);transition:transform .4s var(--ease)}
.faq-q .ic::before{width:11px;height:1.5px}
.faq-q .ic::after{width:1.5px;height:11px}
.faq-item.open .faq-q .ic{background:var(--brass)}
.faq-item.open .faq-q .ic::before,.faq-item.open .faq-q .ic::after{background:#fff}
.faq-item.open .faq-q .ic::after{transform:scaleY(0)}
.faq-a{overflow:hidden;max-height:0;transition:max-height .55s var(--ease)}
.faq-a .inner{padding-bottom:1.7rem;color:var(--ink-soft);max-width:70ch}

/* full-bleed quote band */
.quote-band{position:relative;overflow:hidden;background:var(--ground);color:var(--cream)}
.quote-band .qb-media{position:absolute;inset:0;opacity:.26;overflow:hidden}
.quote-band .qb-media img{width:100%;height:100%;object-fit:cover}
.quote-band .inner{position:relative;z-index:2;padding-block:clamp(90px,13vw,180px);text-align:center}
.quote-band .q{font-family:var(--display);font-style:italic;font-weight:300;font-size:clamp(1.7rem,3.4vw,3rem);line-height:1.3;color:var(--cream);max-width:18ch;margin-inline:auto;letter-spacing:-.01em}
.quote-band .by{margin-top:1.8rem;font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:var(--brass-pale)}

/* ============================================================
   REVEAL ANIMATIONS
   ============================================================ */
[data-reveal]{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
[data-reveal].in{opacity:1;transform:none}
[data-reveal][data-d="1"]{transition-delay:.1s}
[data-reveal][data-d="2"]{transition-delay:.2s}
[data-reveal][data-d="3"]{transition-delay:.3s}
[data-reveal][data-d="4"]{transition-delay:.4s}
[data-reveal][data-d="5"]{transition-delay:.5s}
.reveal-img{clip-path:inset(0 0 100% 0);transition:clip-path 1.2s var(--ease)}
.reveal-img.in{clip-path:inset(0 0 0 0)}
@media (prefers-reduced-motion:reduce){
  [data-reveal],.reveal-img,.lines .ln>span,.hero-rise{opacity:1!important;transform:none!important;clip-path:none!important;transition:none!important;animation:none!important}
  .hero-media img{height:100%!important}
  .marquee .track{animation:none}
  .scroll-cue .l::after{animation:none}
  .cursor-dot,.cursor-ring{display:none!important}
}

/* page-load curtain */
.curtain{position:fixed;inset:0;z-index:500;background:var(--ground);display:flex;align-items:center;justify-content:center;transition:transform 1s var(--ease)}
.curtain.up{transform:translateY(-100%)}
.curtain .c-mark{font-family:var(--display);color:var(--cream);font-size:clamp(1.6rem,3vw,2.4rem);font-weight:300;letter-spacing:.04em;opacity:0;animation:cfade 1.1s var(--ease) forwards}
.curtain .c-mark b{font-weight:500}
.curtain .c-line{height:1px;background:var(--brass);width:0;margin-top:1rem;animation:cline 1.1s var(--ease) .15s forwards}
@keyframes cfade{to{opacity:1}}
@keyframes cline{to{width:100%}}
@media (prefers-reduced-motion:reduce){.curtain{display:none}}

/* capture mode (?cap=1) */
.capmode .curtain{display:none!important}
.capmode [data-reveal],.capmode .lines .ln>span{opacity:1!important;transform:none!important}
.capmode .reveal-img,.capmode .hero-rise{clip-path:none!important;transform:none!important;animation:none!important}
.capmode .hero{min-height:780px}
.capmode .hero-media img{height:100%!important;transform:none!important}
.capmode .page-hero.has-img{min-height:480px}
.capmode .cursor-dot,.capmode .cursor-ring{display:none!important}

/* ============================================================
   $1M MOTION LAYER — smooth scroll, page transitions, signature
   ============================================================ */
html.smooth-on #smooth{position:fixed;top:0;left:0;width:100%;will-change:transform}
html.smooth-on{background:var(--paper)}

/* seamless page transition wipe */
.page-transition{position:fixed;inset:0;z-index:450;background:var(--ground);clip-path:inset(100% 0 0 0);transition:clip-path .62s var(--ease);display:flex;align-items:center;justify-content:center;pointer-events:none}
.page-transition.cover{clip-path:inset(0 0 0 0)}
.page-transition .ptm{font-family:var(--display);color:var(--cream);font-weight:300;font-size:clamp(1.5rem,2.8vw,2.3rem);letter-spacing:.02em;opacity:0;transform:translateY(12px);transition:opacity .45s var(--ease) .12s,transform .45s var(--ease) .12s}
.page-transition.cover .ptm{opacity:1;transform:none}
.page-transition .ptm b{font-weight:500;color:var(--brass-pale)}
@media (prefers-reduced-motion:reduce){.page-transition{display:none}}

/* oversized footer signature */
.footer-mark{display:block;text-align:center;padding:clamp(34px,5vw,76px) var(--gutter) clamp(22px,3vw,40px);line-height:.78;overflow:hidden}
.footer-mark span{font-family:var(--display);font-weight:300;font-size:clamp(3.4rem,15.5vw,14rem);letter-spacing:-.025em;color:transparent;-webkit-text-stroke:1px rgba(217,188,106,.32);transition:color .7s var(--ease),-webkit-text-stroke-color .7s var(--ease);display:inline-block}
.footer-mark:hover span{color:rgba(217,188,106,.09);-webkit-text-stroke-color:rgba(217,188,106,.6)}

/* art-directed project blocks */
.ed-stack{display:flex;flex-direction:column;gap:clamp(20px,2.4vw,40px)}
.ed-full{overflow:hidden;position:relative;cursor:pointer;background:var(--paper-2)}
.ed-full .ef-media{overflow:hidden;aspect-ratio:16/8}
.ed-full img{width:100%;height:118%;object-fit:cover;will-change:transform;transition:transform 1.1s var(--ease)}
.ed-full:hover img{transform:scale(1.03) translateY(var(--py,0))}
.ed-pair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,2.4vw,40px)}
.ed-pair .g-item{aspect-ratio:4/5}
.ed-offset{display:grid;grid-template-columns:1.4fr .6fr;gap:clamp(20px,3vw,56px);align-items:center}
.ed-offset.right{grid-template-columns:.6fr 1.4fr}
.ed-offset.right .eo-img{order:2}
.ed-offset .g-item{aspect-ratio:3/2}
.ed-offset .eo-note{color:var(--muted);font-size:.92rem;line-height:1.6}
.ed-offset .eo-note .index-num{display:block;margin-bottom:.6rem}
.g-item.ar img{height:100%;object-fit:cover}
.credits{display:flex;flex-wrap:wrap;gap:1.6rem 3.2rem;border-top:1px solid var(--line);padding-top:2.2rem}
.credits .c-item .l{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.credits .c-item .v{font-family:var(--display);font-size:clamp(1.05rem,1.4vw,1.25rem);margin-top:.35rem;color:var(--ink)}

/* section index marker */
.sec-index{font-family:var(--display);font-size:.95rem;color:var(--brass-deep);letter-spacing:.06em;font-feature-settings:"tnum" 1;display:inline-block;margin-bottom:1rem}

@media (max-width:780px){
  .ed-pair,.ed-offset,.ed-offset.right{grid-template-columns:1fr}
  .ed-offset.right .eo-img{order:0}
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1024px){
  .footer-top{grid-template-columns:1fr 1fr}
  .gallery{columns:2}
  .stats{grid-template-columns:repeat(2,1fr)}
  .stats .stat:nth-child(3){border-left:0}
  .stats .stat:nth-child(n+3){border-top:1px solid var(--line)}
}
@media (max-width:980px){
  .nav{display:none}
}
@media (max-width:780px){
  :root{--header-h:72px}
  .split,.split.wide-img,.contact-grid,.blog-card,.duo,.proj-grid{grid-template-columns:1fr}
  .cols-2,.cols-3,.cols-4{grid-template-columns:1fr}
  .flist.two{grid-template-columns:1fr}
  .t-grid{columns:1}
  .figure-stack .f2{position:relative;width:62%;bottom:0;right:0;margin:-18% 0 0 auto}
  .field.two{grid-template-columns:1fr}
  .menu-btn .label{display:none}
}
@media (max-width:560px){
  body{font-size:1.0625rem}
  .gallery{columns:1}
  .scroll-cue{display:none}
}
