:root{
  --paper:#F1ECE2;
  --paper-2:#E8E2D5;
  --ink:#1A1714;
  --ink-soft:#4A443C;
  --line:rgba(26,23,20,.16);
  --line-soft:rgba(26,23,20,.08);
  --display:"Space Grotesk",system-ui,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--display);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  line-height:1.5;
  min-height:100vh;
  display:flex;flex-direction:column;
}
/* main content grows to push the footer to the bottom on short pages */
body > main,
body > .page-body{flex:1 0 auto}
body > footer{flex-shrink:0}
a{color:inherit;text-decoration:none}
::selection{background:var(--ink);color:var(--paper)}

/* ---------- NAV ---------- */
nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:28px clamp(20px,5vw,64px);
  mix-blend-mode:normal;
  transition:background .4s ease,border-color .4s ease,padding .4s ease;
  border-bottom:1px solid transparent;
}
nav.scrolled{
  background:rgba(241,236,226,.86);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line-soft);
  padding-top:14px;padding-bottom:14px;
}
.nav-logo{height:58px;display:block;transition:height .4s ease}
.nav-logo img{height:100%;display:block}
nav.scrolled .nav-logo{height:48px}
.nav-links{display:flex;gap:clamp(22px,3vw,48px);align-items:center}
.nav-links a{
  font-size:21px;font-weight:600;letter-spacing:.02em;
  text-transform:uppercase;color:var(--ink-soft);
  position:relative;transition:color .25s;
}
.nav-links a:hover{color:var(--ink)}
.nav-links a::after{
  content:"";position:absolute;left:0;bottom:-5px;height:1px;width:0;
  background:var(--ink);transition:width .3s ease;
}
.nav-links a:hover::after{width:100%}
.nav-toggle{display:none;background:none;border:none;cursor:pointer;flex-direction:column;gap:5px}
.nav-toggle span{width:24px;height:2px;background:var(--ink);transition:.3s}

/* ---------- HERO ---------- */
.hero{
  min-height:100svh;
  display:flex;flex-direction:column;justify-content:center;
  padding:120px clamp(20px,5vw,64px) 80px;
  position:relative;
  overflow:hidden; /* keep the video layer clipped to the hero */
}
/* On notched phones, let the video fill the top safe-area instead of cream */
.hero-video{top:calc(-1 * env(safe-area-inset-top,0px));height:calc(100% + env(safe-area-inset-top,0px))}

/* Video background layer (sits behind hero content).
   Hidden/empty until a real <video> source is dropped in.
   The cream page background shows through as a graceful fallback. */
.hero-video{
  position:absolute;inset:0;z-index:0;
  width:100%;height:100%;
  object-fit:cover;
  pointer-events:none;
}
/* Scrim between video and text — tunes contrast.
   Only renders when a .hero-video is actually present, so the hero stays
   pure cream until a video is dropped in.
   Default (light video): a soft light wash so dark text stays readable. */
.hero-scrim{display:none}
.hero-video ~ .hero-scrim{
  display:block;
  position:absolute;inset:0;z-index:1;
  pointer-events:none;
  background:linear-gradient(to bottom,
    rgba(241,236,226,.30) 0%,
    rgba(241,236,226,.55) 60%,
    rgba(241,236,226,.78) 100%);
}
/* Hero content must sit above video + scrim */
.hero-eyebrow,.hero h1,.hero-sub,.scroll-cue,.hero-meta,.hero-diamond{
  position:relative;z-index:2;
}

/* DARK-VIDEO MODE: add class "video-dark" to .hero to flip text to cream
   and switch the scrim to a dark wash. Decide this after seeing the video. */
.hero.video-dark .hero-video ~ .hero-scrim{
  background:linear-gradient(to bottom,
    rgba(26,23,20,.35) 0%,
    rgba(26,23,20,.55) 60%,
    rgba(26,23,20,.80) 100%);
}
.hero.video-dark .hero-eyebrow,
.hero.video-dark h1,
.hero.video-dark .hero-sub,
.hero.video-dark .scroll-cue,
.hero.video-dark .hero-meta{color:var(--paper)}
.hero.video-dark .hero-eyebrow::before,
.hero.video-dark .scroll-cue .bar{background:var(--paper)}
.hero.video-dark .scroll-cue .bar::after{background:transparent}
.hero.video-dark .hero-diamond{border-color:rgba(241,236,226,.4)}

.hero-eyebrow{
  font-size:13px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-soft);margin-bottom:28px;
  display:flex;align-items:center;gap:14px;
}
.hero-eyebrow::before{content:"";width:34px;height:1px;background:var(--ink)}
.hero h1{
  font-family:var(--display);
  font-weight:600;
  font-size:clamp(48px,11vw,168px);
  line-height:.92;
  letter-spacing:-.03em;
  max-width:13ch;
}
.hero h1 .serif{font-family:var(--display);font-style:normal;font-weight:inherit}
.hero-sub{
  margin-top:36px;
  font-family:var(--display);
  font-size:clamp(18px,2.2vw,24px);
  line-height:1.45;
  max-width:46ch;
  color:var(--ink-soft);
}
.hero-meta{
  position:absolute;bottom:40px;right:clamp(20px,5vw,64px);
  font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-soft);text-align:right;line-height:1.9;
  display:none;
}
@media(min-width:900px){.hero-meta{display:block}}
.scroll-cue{
  position:absolute;bottom:64px;right:clamp(20px,5vw,64px);
  font-size:19px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-soft);
  display:inline-flex;align-items:center;gap:10px;
  transition:color .25s;
}
.scroll-cue:hover{color:var(--ink)}
.hero.video-dark .scroll-cue{color:rgba(241,236,226,.72)}
.hero.video-dark .scroll-cue:hover{color:var(--paper)}
/* chevron after the text */
.scroll-cue::before{
  content:"›";
  order:2;                       /* place after the label */
  font-size:1.3em;line-height:1;font-weight:400;
  transform:translateY(-1px);transition:transform .25s;
}
.scroll-cue:hover::before{transform:translate(3px,-1px)}
/* underline that draws across the bottom on hover (mirrors nav links) */
.scroll-cue::after{
  content:"";position:absolute;left:0;bottom:-6px;height:1px;width:0;
  background:var(--ink);transition:width .3s ease;
}
.scroll-cue:hover::after{width:100%}
.hero.video-dark .scroll-cue::after{background:var(--paper)}

/* diamond watermark echoing the logo silhouette */
.hero-diamond{
  position:absolute;top:50%;right:-8vw;transform:translateY(-50%) rotate(0deg);
  width:46vw;max-width:620px;aspect-ratio:1.7/1;
  border:1px solid var(--line);
  clip-path:polygon(14% 0,86% 0,100% 50%,86% 100%,14% 100%,0 50%);
  pointer-events:none;opacity:.5;
  display:none;
}
@media(min-width:1100px){.hero-diamond{display:block}}

/* ---------- SECTION SHELL ---------- */
section{padding:clamp(80px,12vh,140px) clamp(20px,5vw,64px);position:relative}
.section-head{
  display:flex;align-items:baseline;gap:18px;margin-bottom:clamp(40px,7vh,80px);
  border-top:1px solid var(--line);padding-top:22px;
}
.section-num{font-size:13px;letter-spacing:.1em;color:var(--ink-soft);font-weight:500}
.section-title{
  font-family:var(--display);font-weight:600;
  font-size:clamp(30px,5vw,60px);letter-spacing:-.02em;line-height:1;
}
.section-lead{
  font-family:var(--display);font-size:clamp(18px,2vw,22px);
  color:var(--ink-soft);max-width:50ch;margin-left:auto;line-height:1.5;
}

/* ---------- PORTFOLIO ---------- */
.work-grid{display:grid;grid-template-columns:1fr;gap:10px;border-top:1px solid var(--line);padding-top:10px}

/* Each product is a card wrapping a header row + an expandable region.
   --card is set per-card inline (placeholder colors; change per product). */
.work-card{
  --card:#2a2a2a;
  border-radius:20px;
  transition:background .45s ease,box-shadow .45s ease,border-color .45s ease;
  position:relative;
  /* small constant bottom padding keeps the hover hit-area stable as the
     inner content expands, preventing the expand→collapse flicker loop */
  padding-bottom:2px;
}
/* hairline divider sits below each card except the last, within the gap */
.work-card:not(:last-child)::after{
  content:"";position:absolute;left:0;right:0;bottom:-10px;height:1px;
  background:var(--line);transition:opacity .3s ease;
}
.work-card.open{
  background:var(--card);
  box-shadow:0 26px 60px -28px rgba(26,23,20,.55);
  z-index:2;
}
.work-card.open::after{opacity:0}

/* Equity Atlas: grainy black -> #00E676 diagonal gradient.
   Grain is an SVG fractal-noise overlay at low opacity (no image file). */
.work-card--gradient.open{
  background:
    linear-gradient(135deg, #050505 0%, #0a0a0a 42%, #064d2b 78%, #00E676 130%);
  position:relative;
}
.work-card--gradient.open::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  z-index:0;opacity:.16;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%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");
}
/* keep card content above the grain */
.work-card--gradient .work-row,
.work-card--gradient .work-expand{position:relative;z-index:1}

/* Thinker: smooth purple -> cream diagonal gradient, matched to Equity Atlas
   (dark/purple holds through the content; cream only reaches the far corner) */
.work-card--pixel.open{
  background:
    linear-gradient(135deg, #34285f 0%, #3b2f6b 42%, #8076a6 82%, #F1ECE2 135%);
  position:relative;
}
/* same grain overlay as Equity Atlas, for a matched set */
.work-card--pixel.open::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  z-index:0;opacity:.16;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%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");
}
.work-card--pixel .work-row,
.work-card--pixel .work-expand{position:relative;z-index:1}

.work-row{
  display:grid;grid-template-columns:84px 1fr auto;
  align-items:center;gap:clamp(16px,3vw,40px);
  padding:clamp(28px,4vh,44px) clamp(20px,3vw,36px);
  transition:padding .4s ease;
  cursor:pointer;position:relative;
}
.work-chevron{
  font-size:28px;line-height:1;color:var(--ink-soft);
  transition:transform .4s cubic-bezier(.4,0,.1,1),color .35s ease;
}
.work-card.open .work-chevron{transform:rotate(90deg);color:var(--paper)}
.work-logo{
  width:84px;height:84px;object-fit:contain;
  opacity:.9;transition:transform .35s ease,opacity .35s ease,filter .35s ease;
}
.work-card.open .work-logo{transform:scale(1.06);opacity:1;filter:brightness(0) invert(1)}
.work-main h3{
  font-family:var(--display);font-weight:600;
  font-size:clamp(26px,4vw,46px);letter-spacing:-.02em;line-height:1.05;
  transition:color .35s ease;
}
.work-main p{font-family:var(--display);color:var(--ink-soft);font-size:16px;margin-top:8px;max-width:48ch;transition:color .35s ease}
.work-card.open .work-main h3{color:var(--paper)}
.work-card.open .work-main p{color:rgba(241,236,226,.8)}

/* Expandable region: animates height via grid-template-rows 0fr -> 1fr */
.work-expand{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .45s cubic-bezier(.4,0,.1,1);
}
.work-card.open .work-expand{grid-template-rows:1fr}
.work-expand-inner{overflow:hidden}
.work-card.open .work-expand-inner{
  padding:clamp(12px,2vh,20px) clamp(20px,3vw,36px) clamp(28px,4vh,40px);
  display:flex;gap:clamp(24px,4vw,56px);align-items:stretch;
}
/* left: text + link ; right: devices */
.work-content{flex:1;min-width:0;display:flex;flex-direction:column;align-self:stretch}
.work-body{
  font-family:var(--display);color:rgba(241,236,226,.82);
  font-size:17px;line-height:1.6;max-width:54ch;margin:0 0 auto;
}
.work-link{
  align-self:flex-start;margin-top:24px;
  display:inline-flex;align-items:center;gap:8px;
  font-size:20px;font-weight:600;letter-spacing:.01em;
  color:var(--paper);
  border-bottom:1px solid var(--paper);padding-bottom:4px;
  transition:gap .25s ease;
}
.work-link:hover{gap:14px}

/* ---- Device mockups (pure CSS), shown in expanded card ---- */
.work-devices{display:flex;align-items:center;justify-content:center;gap:26px;flex-shrink:0;align-self:center}
/* Computer */
.device-computer{width:288px}
.device-computer .screen{
  background:rgba(241,236,226,.10);
  border:1px solid rgba(241,236,226,.28);
  border-radius:9px;height:224px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
}
.device-computer .screen img{width:56px;height:56px;object-fit:contain;filter:brightness(0) invert(1)}
.device-computer .screen span{
  font-family:var(--display);font-weight:600;font-size:19px;color:var(--paper);letter-spacing:-.01em;
}
.device-computer .stand{width:56px;height:16px;background:rgba(241,236,226,.18);margin:0 auto}
.device-computer .base{width:130px;height:7px;border-radius:4px;background:rgba(241,236,226,.28);margin:0 auto}
/* Phone */
.device-phone{width:106px}
.device-phone .phone-screen{
  background:rgba(241,236,226,.10);
  border:1px solid rgba(241,236,226,.28);
  border-radius:21px;height:262px;
  display:flex;align-items:center;justify-content:center;
}
.device-phone .app-icon{
  width:64px;height:64px;border-radius:16px;
  background:rgba(241,236,226,.16);
  display:flex;align-items:center;justify-content:center;
}
.device-phone .app-icon img{width:40px;height:40px;object-fit:contain;filter:brightness(0) invert(1)}

@media(max-width:760px){
  .work-card.open .work-expand-inner{flex-direction:column;align-items:stretch}
  /* Only the product title sits next to the logo on mobile */
  .work-main p{display:none}
  /* Keep devices within the card frame so the phone app icon is fully visible */
  .work-devices{justify-content:center;gap:18px;transform:scale(.82);transform-origin:top center;margin-top:8px}
  .device-computer{width:230px}
  .device-computer .screen{height:150px}
  .device-phone{width:92px}
  .device-phone .phone-screen{height:188px}
}

/* ---------- PROCESS ---------- */
.process{background:var(--ink);color:var(--paper)}
.process .section-head{border-color:rgba(241,236,226,.2)}
.process .section-num,.process .section-lead{color:rgba(241,236,226,.6)}
.process-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1px;background:rgba(241,236,226,.16);border:1px solid rgba(241,236,226,.16)}
.process-cell{background:var(--ink);padding:clamp(28px,4vw,44px);min-height:280px;display:flex;flex-direction:column;position:relative;transition:background .35s}
.process-cell:hover{background:#221e1a}
.process-step{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:rgba(241,236,226,.5);margin-bottom:auto}
.process-cell h3{font-family:var(--display);font-weight:600;font-size:clamp(24px,2.6vw,32px);letter-spacing:-.01em;margin-bottom:14px;margin-top:48px}
.process-cell p{font-family:var(--display);font-size:16px;line-height:1.55;color:rgba(241,236,226,.72)}
.process-mark{position:absolute;top:clamp(28px,4vw,44px);right:clamp(28px,4vw,44px);width:18px;height:18px;border:1px solid rgba(241,236,226,.4);clip-path:polygon(14% 0,86% 0,100% 50%,86% 100%,14% 100%,0 50%)}

/* ---------- CONTACT ---------- */
.contact{text-align:left}
.contact-inner{display:grid;grid-template-columns:1fr;gap:48px}
@media(min-width:800px){.contact-inner{grid-template-columns:1.4fr 1fr}}
.contact h2{
  font-family:var(--display);font-weight:600;
  font-size:clamp(40px,8vw,104px);letter-spacing:-.03em;line-height:.95;
}
.contact h2 .serif{font-family:var(--display);font-style:normal;font-weight:inherit}
.contact-cta{
  display:inline-flex;align-items:center;gap:12px;margin-top:36px;
  font-size:15px;letter-spacing:.02em;border-bottom:1px solid var(--ink);
  padding-bottom:6px;transition:gap .3s;
}
.contact-cta:hover{gap:20px}
.contact-detail{display:flex;flex-direction:column;gap:28px;align-self:end}
.contact-block .lbl{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:6px}
.contact-block a,.contact-block p{font-family:var(--display);font-size:19px}
.contact-block a{border-bottom:1px solid transparent;transition:border-color .25s}
.contact-block a:hover{border-color:var(--ink)}

/* ---------- FOOTER ---------- */
footer{
  padding:30px clamp(20px,5vw,64px);
  border-top:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;
  font-size:15px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ink);
}
.footer-logo{height:24px;opacity:1}
.footer-right{display:flex;align-items:center;gap:clamp(18px,3vw,32px)}
.footer-right a{color:var(--ink);transition:opacity .25s}
.footer-right a:hover{opacity:.6}

/* ---------- REVEAL ---------- */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}

/* ---------- MOBILE NAV ---------- */
@media(max-width:720px){
  nav.menu-open{z-index:200}
  .nav-toggle{display:flex;position:relative;z-index:210}
  .nav-links{
    position:fixed;top:0;left:0;
    width:100vw;height:100dvh;background:var(--paper);
    flex-direction:column;justify-content:center;align-items:center;gap:32px;
    transform:translateY(-100%);transition:transform .45s cubic-bezier(.5,0,.1,1);
    z-index:205;
  }
  .nav-links.open{transform:none}
  .nav-links a{font-size:26px}
  .nav-links a::after{display:none}
  /* hamburger -> X when menu open */
  .nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav-toggle.open span:nth-child(2){opacity:0}
  .nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  /* On home, nav links/hamburger are cream over the hero; when the cream
     menu is open they must go dark to be visible. .open adds specificity so
     this beats the later body.home cream rule. */
  body.home .nav-links.open a{color:var(--ink-soft)}
  body.home .nav-links.open a:hover,
  body.home .nav-links.open a.active{color:var(--ink)}
  body.home .nav-toggle.open span{background:var(--ink)}
}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

/* ---------- MULTI-PAGE: ACTIVE NAV ---------- */
.nav-links a.active{color:var(--ink)}
.nav-links a.active::after{width:100%}

/* ---------- MULTI-PAGE: COMPACT PAGE HEADER ---------- */
/* Used on inner pages (Portfolio, Process, Contact) instead of the full hero.
   Sits below the fixed nav, compact, gets you to content fast. */
.page-head{
  padding:calc(80px + clamp(40px,8vh,90px)) clamp(20px,5vw,64px) clamp(32px,5vh,56px);
  border-bottom:1px solid var(--line);
  position:relative;
}
.page-head .ph-eyebrow{
  font-size:13px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-soft);margin-bottom:18px;
  display:flex;align-items:center;gap:14px;
}
.page-head .ph-eyebrow::before{content:"";width:34px;height:1px;background:var(--ink)}
.page-head h1{
  font-family:var(--display);font-weight:600;
  font-size:clamp(40px,8vw,92px);letter-spacing:-.03em;line-height:.95;
}
.page-head h1 .serif{font-family:var(--display);font-style:normal;font-weight:inherit}
.page-head .ph-lead{
  margin-top:22px;font-family:var(--display);
  font-size:clamp(18px,2vw,22px);line-height:1.5;
  color:var(--ink-soft);max-width:52ch;
}
/* small diamond mark echoing the logo, top-right of the header */
.page-head .ph-mark{
  position:absolute;top:calc(80px + clamp(40px,8vh,90px));right:clamp(20px,5vw,64px);
  width:26px;height:26px;border:1px solid var(--line);
  clip-path:polygon(14% 0,86% 0,100% 50%,86% 100%,14% 100%,0 50%);
  display:none;
}
@media(min-width:900px){.page-head .ph-mark{display:block}}

/* On inner pages, the first section shouldn't double up the top border */
.page-body section:first-of-type{padding-top:clamp(56px,8vh,90px)}
.page-body section:first-of-type .section-head{border-top:none;padding-top:0}

/* ---------- HOME: white logo over dark hero video ---------- */
/* On the home page the nav sits over a dark video, so the wordmark goes white.
   Inner pages (cream) keep the black logo. */
/* Two-image logo toggle: black by default, white on the home page (dark video).
   Robust across browsers — no content:url() tricks. */
.nav-logo{position:relative}
.nav-logo .logo-white{display:none}
body.home .nav-logo .logo-black{display:none}
body.home .nav-logo .logo-white{display:block;filter:brightness(0) invert(1) sepia(.18) saturate(.6) hue-rotate(350deg) brightness(.97)}

/* Stronger dark scrim for mixed-brightness footage: pulls bright patches down
   so white hero text stays readable across the whole loop. */
.hero.video-dark .hero-video ~ .hero-scrim{
  background:linear-gradient(to bottom,
    rgba(26,23,20,.50) 0%,
    rgba(26,23,20,.62) 55%,
    rgba(26,23,20,.85) 100%);
}

/* Home nav links sit over dark video — lift them to a readable light tone */
body.home .nav-links a{color:rgba(241,236,226,.72)}
body.home .nav-links a:hover,
body.home .nav-links a.active{color:var(--paper)}
body.home .nav-links a::after{background:var(--paper)}
body.home .nav-toggle span{background:var(--paper)}

/* ---------- PORTFOLIO PAGE: remove eyebrow + header underline ---------- */
body.portfolio .page-head{border-bottom:none}
body.portfolio .page-head .ph-eyebrow{display:none}
body.portfolio .page-head .ph-mark{display:none}
body.portfolio .page-body section:first-of-type{padding-top:clamp(20px,3vh,36px)}
body.portfolio nav.scrolled{border-bottom-color:transparent}

/* ---------- PROCESS: editorial approach sections ---------- */
.approach{max-width:880px;margin:0 auto;width:100%}
.approach-block{
  padding:clamp(40px,7vh,72px) 0;
  border-top:1px solid var(--line);
}
.approach-block:first-of-type{border-top:none}
.approach-num{
  font-size:13px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-soft);font-weight:500;margin-bottom:20px;display:block;
}
.approach-body h2{
  font-family:var(--display);font-weight:600;
  font-size:clamp(28px,4vw,48px);letter-spacing:-.02em;line-height:1.08;
  margin-bottom:28px;max-width:20ch;
}
.approach-body p{
  font-family:var(--display);font-size:clamp(17px,1.5vw,19px);
  line-height:1.65;color:var(--ink-soft);max-width:64ch;
}
.approach-body p + p{margin-top:18px}

/* ---------- PROCESS PAGE tweaks ---------- */
body.process-page .page-head{border-bottom:none}        /* remove line below lead */
body.process-page .page-head .ph-mark{display:none}      /* remove diamond mark */
body.process-page .page-body section:first-of-type{padding-top:clamp(16px,2.5vh,32px)}  /* pull sections up */
body.process-page nav.scrolled{border-bottom-color:transparent}  /* no line under nav */

/* Portfolio / Process: small footer-style link below the content */
.work-more{
  display:inline-flex;align-items:center;gap:10px;margin-top:clamp(28px,5vh,52px);
  font-size:18px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  color:var(--ink-soft);position:relative;transition:color .25s;
}
.work-more-wrap{display:flex;justify-content:flex-end}
.work-more span{font-size:1.25em;line-height:1;transition:transform .25s}
.work-more:hover{color:var(--ink)}
.work-more:hover span{transform:translateX(3px)}
.work-more::after{
  content:"";position:absolute;left:0;bottom:-5px;height:1px;width:0;
  background:var(--ink);transition:width .3s ease;
}
.work-more:hover::after{width:100%}

/* Contact page: remove nav underline */
body.contact-page nav.scrolled{border-bottom-color:transparent}

/* ---------- CONTACT PAGE ---------- */
body.contact-page .page-head{border-bottom:none}      /* remove line below lead */
body.contact-page .page-head .ph-mark{display:none}    /* remove diamond mark */

.contact-reach{
  display:flex;flex-direction:column;align-items:flex-start;
  gap:clamp(28px,5vh,52px);
  padding-top:0;margin-top:clamp(-12px,-2vh,-4px);
}
.contact-email{
  font-family:var(--display);font-weight:600;
  font-size:clamp(34px,6.5vw,84px);letter-spacing:-.03em;line-height:1;
  color:var(--ink);
  display:inline-flex;align-items:center;gap:.3em;
  transition:gap .3s ease;
}
.contact-email span{transition:transform .3s ease}
.contact-email:hover{gap:.45em}
.contact-email:hover span{transform:translateX(4px)}
.contact-socials{display:flex;gap:clamp(28px,5vw,64px);flex-wrap:wrap}
.contact-socials a{
  font-family:var(--display);font-weight:600;
  font-size:clamp(18px,2vw,24px);letter-spacing:-.01em;color:var(--ink-soft);
  display:inline-flex;align-items:center;gap:8px;position:relative;
  transition:color .25s;
}
.contact-socials a span{font-size:.85em;transition:transform .25s}
.contact-socials a:hover{color:var(--ink)}
.contact-socials a:hover span{transform:translate(3px,-3px)}
.contact-socials a::after{
  content:"";position:absolute;left:0;bottom:-6px;height:1px;width:0;
  background:var(--ink);transition:width .3s ease;
}
.contact-socials a:hover::after{width:100%}
body.contact-page .page-body section:first-of-type{padding-top:clamp(16px,2.5vh,32px)}
body.contact-page .page-body section:first-of-type{padding-bottom:clamp(28px,4vh,48px)}

/* Home hero: larger type on mobile */
@media(max-width:720px){
  .hero h1{font-size:clamp(60px,15vw,96px);line-height:.95}
  .hero-sub{font-size:clamp(20px,5.2vw,26px);margin-top:28px}
}

/* ---------- TERMS PAGE ---------- */
body.terms-page .page-head{border-bottom:none}
body.terms-page .page-head .ph-mark{display:none}
body.terms-page nav.scrolled{border-bottom-color:transparent}
body.terms-page .page-body section:first-of-type{padding-top:clamp(16px,2.5vh,32px)}
.terms-body{max-width:760px;margin:0 auto;width:100%}
.terms-intro{
  font-family:var(--display);font-size:clamp(18px,1.7vw,21px);
  line-height:1.6;color:var(--ink);margin-bottom:8px;
}
.terms-body h2{
  font-family:var(--display);font-weight:600;
  font-size:clamp(20px,2.2vw,26px);letter-spacing:-.01em;
  margin:40px 0 12px;
}
.terms-body p{
  font-family:var(--display);font-size:clamp(16px,1.5vw,18px);
  line-height:1.65;color:var(--ink-soft);
}
.terms-body p a{color:var(--ink);border-bottom:1px solid var(--ink)}
.terms-note{
  margin-top:48px;padding-top:24px;border-top:1px solid var(--line);
  font-size:14px !important;font-style:italic;color:var(--ink-soft);
}

/* ---------- MOBILE FOOTER ---------- */
@media(max-width:600px){
  footer{
    flex-direction:column;align-items:flex-start;gap:22px;
    padding:28px clamp(20px,5vw,64px);
    font-size:13px;
  }
  .footer-logo{display:none}
  .footer-right{
    flex-wrap:wrap;gap:14px 20px;
  }
}

/* Home nav, once scrolled into the solid cream bar: flip logo + links dark
   so cream-on-cream blending stops */
body.home nav.scrolled .nav-logo .logo-white{display:none}
body.home nav.scrolled .nav-logo .logo-black{display:block}
body.home nav.scrolled .nav-links a{color:var(--ink-soft)}
body.home nav.scrolled .nav-links a:hover,
body.home nav.scrolled .nav-links a.active{color:var(--ink)}
body.home nav.scrolled .nav-toggle span{background:var(--ink)}

/* Home: paint the top safe-area (status bar / notch) dark so it blends with
   the video instead of showing cream above it */
body.home::before{
  content:"";position:fixed;top:0;left:0;right:0;
  height:env(safe-area-inset-top,0px);
  background:#1A1714;z-index:300;pointer-events:none;
}

/* On mobile, the home nav should NOT change to the solid bar on scroll —
   keep it transparent with the cream logo throughout */
@media(max-width:720px){
  body.home nav.scrolled{background:transparent;backdrop-filter:none;border-bottom-color:transparent;padding-top:28px;padding-bottom:28px}
  body.home nav.scrolled .nav-logo .logo-white{display:block;filter:brightness(0) invert(1) sepia(.18) saturate(.6) hue-rotate(350deg) brightness(.97)}
  body.home nav.scrolled .nav-logo .logo-black{display:none}
  body.home nav.scrolled .nav-toggle span{background:var(--paper)}
}