:root{
  --cream:#f4efe8; --paper:#fbf7f1; --ink:#171615; --muted:#716b64;
  --olive:#5f703c; --olive-dark:#43502a; --terracotta:#d9673a; --blush:#d8a59b;
  --line:rgba(23,22,21,.14); --radius:28px; --shadow:0 24px 70px rgba(41,31,24,.14);
}
*{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;background:var(--cream);color:var(--ink);font-family:"DM Sans",system-ui,sans-serif;overflow-x:hidden} img{display:block;width:100%} a{color:inherit;text-decoration:none} button{font:inherit} ::selection{background:var(--ink);color:var(--cream)}
body::before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.28;z-index:1000;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E")}
.scroll-progress{position:fixed;left:0;top:0;height:3px;width:0;background:var(--terracotta);z-index:2000}.cursor-glow{position:fixed;width:360px;height:360px;border-radius:50%;background:radial-gradient(circle,rgba(217,103,58,.12),transparent 65%);pointer-events:none;transform:translate(-50%,-50%);z-index:0;opacity:.9}
.section-pad{padding-left:clamp(22px,5vw,76px);padding-right:clamp(22px,5vw,76px)}
.site-header{position:fixed;top:0;left:0;right:0;z-index:900;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:18px clamp(22px,5vw,76px);transition:.35s ease}.site-header.scrolled{background:rgba(244,239,232,.82);backdrop-filter:blur(18px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;width:max-content}.brand-mark{width:38px;height:38px;border-radius:50%;background:var(--ink);color:white;display:grid;place-items:center;font-family:"Playfair Display",serif;font-style:italic;font-size:22px}.brand-copy{display:flex;gap:0;font-size:15px;letter-spacing:-.02em}.brand-copy strong{font-weight:700}.brand-copy em{font-style:normal;color:var(--terracotta)}.nav{display:flex;gap:30px;font-size:14px}.nav a{position:relative}.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:-6px;height:1px;background:currentColor;transition:.25s}.nav a:hover::after{right:0}.site-header>.pill{justify-self:end}
.pill{display:inline-flex;align-items:center;justify-content:center;gap:14px;padding:13px 18px;border-radius:999px;font-size:14px;font-weight:600;border:1px solid transparent;transition:.25s ease}.pill span{font-size:16px}.pill-dark{background:var(--ink);color:white}.pill-dark:hover{background:var(--terracotta);transform:translateY(-2px)}.pill-light{background:var(--paper);color:var(--ink)}.pill-light:hover{background:white;transform:translateY(-2px)}
.menu-toggle{display:none;background:none;border:0;padding:8px}.menu-toggle span{display:block;width:24px;height:1.5px;background:var(--ink);margin:6px}
.hero{min-height:100vh;position:relative;display:grid;grid-template-columns:1.02fr .98fr;align-items:center;gap:5vw;padding-top:130px;padding-bottom:60px;isolation:isolate}.hero::before{content:"";position:absolute;width:48vw;height:48vw;border:1px solid rgba(95,112,60,.18);border-radius:50%;right:-16vw;top:-10vw;z-index:-1}.hero-copy{max-width:790px;position:relative;z-index:2}.eyebrow{font-size:12px;letter-spacing:.18em;font-weight:700;display:flex;gap:9px;align-items:center}.live-dot{width:8px;height:8px;border-radius:50%;background:var(--terracotta);box-shadow:0 0 0 6px rgba(217,103,58,.12)}.hero h1,.intro h2,.section-head h2,.services h2,.contact h2{font-family:"Playfair Display",serif;font-size:clamp(54px,6.7vw,112px);font-weight:500;line-height:.91;letter-spacing:-.045em;margin:28px 0}.hero h1 em,.intro h2 em,.section-head h2 em,.services h2 em,.contact h2 em{font-weight:500;color:var(--terracotta)}.hero h1 span{color:var(--olive);white-space:nowrap}.hero-lead{max-width:610px;font-family:"Manrope",sans-serif;font-size:clamp(17px,1.5vw,22px);line-height:1.65;color:var(--muted)}.hero-actions{display:flex;gap:26px;align-items:center;margin-top:34px}.text-link{display:inline-flex;gap:9px;align-items:center;font-weight:600;border-bottom:1px solid var(--line);padding-bottom:4px}.hero-meta{display:flex;flex-wrap:wrap;gap:10px;margin-top:48px;color:var(--muted);font-size:13px}.hero-meta i{font-style:normal;color:var(--blush)}
.hero-visual{height:min(720px,78vh);position:relative}.hero-card{position:absolute;margin:0;overflow:hidden;border-radius:30px;box-shadow:var(--shadow);background:#ddd}.hero-card img{height:100%;object-fit:cover}.hero-card-main{width:52%;height:78%;right:17%;top:6%;transform:rotate(2.5deg)}.hero-card-side{width:34%;height:58%;left:0;bottom:0;transform:rotate(-7deg)}.hero-sticker{position:absolute;right:-2%;bottom:4%;width:150px;height:150px;border-radius:50%;background:var(--olive);color:white;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:var(--shadow);transform:rotate(9deg);font-size:10px;letter-spacing:.18em}.hero-sticker strong{font-family:"Playfair Display",serif;font-size:42px;letter-spacing:-.05em;margin:3px 0}.hero-orbit{position:absolute;inset:10% 0 auto auto;width:88%;aspect-ratio:1;border:1px dashed rgba(23,22,21,.16);border-radius:50%;z-index:-1;animation:spin 32s linear infinite}.hero-orbit span{position:absolute;width:13px;height:13px;border-radius:50%;background:var(--terracotta);top:6%;left:20%}.scroll-cue{position:absolute;left:clamp(22px,5vw,76px);bottom:28px;font-size:11px;letter-spacing:.14em;display:flex;align-items:center;gap:10px;color:var(--muted)}.scroll-cue span{display:inline-block;width:42px;height:1px;background:var(--muted)}
.marquee{overflow:hidden;background:var(--ink);color:white;padding:16px 0;transform:rotate(-1deg) scale(1.01);margin:18px 0}.marquee-track{width:max-content;display:flex;gap:28px;align-items:center;animation:marquee 24s linear infinite;text-transform:uppercase;letter-spacing:.12em;font-weight:600;font-size:13px}.marquee-track b{color:var(--terracotta)}
.intro{padding-top:150px;padding-bottom:150px}.section-kicker{font-size:11px;letter-spacing:.18em;font-weight:700;color:var(--olive);margin-bottom:38px}.intro-grid{display:grid;grid-template-columns:1.3fr .7fr;gap:9vw}.intro h2{font-size:clamp(46px,5vw,78px);margin:0}.intro-copy{padding-top:14px}.intro-copy p{font-family:"Manrope",sans-serif;color:var(--muted);font-size:18px;line-height:1.75;margin:0 0 22px}.intro-copy .text-link{margin-top:8px}
.work{padding-top:40px;padding-bottom:150px}.section-head{display:flex;justify-content:space-between;align-items:end;gap:40px;margin-bottom:60px}.section-head h2{font-size:clamp(44px,5vw,80px);margin:0}.section-head h2 span{color:var(--olive)}.section-head>p{max-width:390px;color:var(--muted);font-family:"Manrope",sans-serif;line-height:1.65;margin:0 0 6px}.work-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:18px}.work-card{grid-column:span 4;aspect-ratio:.78;min-height:480px;border-radius:var(--radius);overflow:hidden}.work-card.card-tall{grid-column:span 5;grid-row:span 2;aspect-ratio:.7}.work-card.card-wide{grid-column:span 5}.work-open{position:relative;width:100%;height:100%;padding:0;border:0;background:#ddd;cursor:pointer;overflow:hidden;text-align:left;color:white}.work-open img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1)}.work-open:hover img{transform:scale(1.045)}.work-shade{position:absolute;inset:0;background:linear-gradient(to bottom,transparent 45%,rgba(0,0,0,.76))}.work-index{position:absolute;top:22px;left:22px;width:38px;height:38px;border:1px solid rgba(255,255,255,.5);border-radius:50%;display:grid;place-items:center;font-size:11px;backdrop-filter:blur(8px)}.work-info{position:absolute;left:24px;right:62px;bottom:22px;display:flex;flex-direction:column;gap:4px}.work-info strong{font-family:"Playfair Display",serif;font-size:25px;font-weight:500}.work-info em{font-style:normal;font-size:12px;opacity:.75}.work-arrow{position:absolute;right:22px;bottom:22px;width:38px;height:38px;border-radius:50%;background:white;color:var(--ink);display:grid;place-items:center;transition:.25s}.work-open:hover .work-arrow{transform:rotate(45deg);background:var(--terracotta);color:white}
.services{background:var(--ink);color:white;padding-top:140px;padding-bottom:140px}.services .section-kicker{color:#cbd6a7}.services-layout{display:grid;grid-template-columns:.75fr 1.25fr;gap:7vw}.services-sticky{position:sticky;top:130px;height:max-content}.services h2{font-size:clamp(48px,5vw,82px);margin:0 0 24px}.services-sticky p{color:rgba(255,255,255,.6);font-family:"Manrope",sans-serif;line-height:1.7;max-width:430px;margin-bottom:32px}.service-list{border-top:1px solid rgba(255,255,255,.17)}.service-item{display:grid;grid-template-columns:62px 1fr 30px;gap:18px;border-bottom:1px solid rgba(255,255,255,.17);padding:32px 0;align-items:start;transition:.3s}.service-item:hover{padding-left:14px}.service-item>span{font-size:12px;color:#cbd6a7}.service-item h3{font-family:"Playfair Display",serif;font-size:34px;font-weight:500;margin:0 0 8px}.service-item p{color:rgba(255,255,255,.58);font-family:"Manrope",sans-serif;line-height:1.6;margin:0}.service-item b{font-size:22px;font-weight:400;color:var(--terracotta)}
.niches{padding-top:140px;padding-bottom:150px}.section-head.compact{margin-bottom:45px}.niche-cloud{display:flex;flex-wrap:wrap;gap:12px}.niche-cloud span{padding:14px 20px;border:1px solid var(--line);border-radius:999px;font-family:"Playfair Display",serif;font-size:clamp(22px,2.4vw,40px);background:rgba(255,255,255,.35);transition:.3s}.niche-cloud span:nth-child(3n+1):hover{background:var(--olive);color:white;border-color:var(--olive);transform:translateY(-3px) rotate(-1deg)}.niche-cloud span:nth-child(3n+2):hover{background:var(--terracotta);color:white;border-color:var(--terracotta);transform:translateY(-3px) rotate(1deg)}.niche-cloud span:nth-child(3n):hover{background:var(--ink);color:white;border-color:var(--ink);transform:translateY(-3px)}
.process{padding-top:80px;padding-bottom:150px}.process-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.process-grid article{padding:34px 26px 42px;border-right:1px solid var(--line);min-height:250px}.process-grid article:last-child{border-right:0}.process-grid span{font-size:12px;color:var(--olive)}.process-grid h3{font-family:"Playfair Display",serif;font-size:35px;font-weight:500;margin:58px 0 10px}.process-grid p{color:var(--muted);font-family:"Manrope",sans-serif;line-height:1.55;margin:0}
.statement{min-height:760px;position:relative;overflow:hidden;background:var(--terracotta);color:white;display:grid;grid-template-columns:1fr 1fr;align-items:center}.statement-media{position:absolute;inset:0;overflow:hidden}.statement-media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(23,22,21,.83) 0%,rgba(23,22,21,.46) 45%,rgba(23,22,21,.2) 100%)}.statement-media img{position:absolute;width:47%;height:80%;object-fit:cover;border-radius:30px;box-shadow:var(--shadow)}.statement-media img:first-child{right:8%;top:-16%;transform:rotate(9deg)}.statement-media img:last-child{right:-3%;bottom:-22%;transform:rotate(-7deg)}.statement-copy{position:relative;z-index:2;grid-column:1/2}.statement-copy p{letter-spacing:.18em;font-size:11px}.statement-copy h2{font-family:"Playfair Display",serif;font-size:clamp(70px,8vw,128px);font-weight:500;line-height:.77;letter-spacing:-.055em;margin:24px 0}.statement-copy em{color:#e9d6a7;font-weight:500}
.contact{padding-top:150px;padding-bottom:150px}.contact-card{border:1px solid var(--line);border-radius:36px;padding:clamp(34px,6vw,90px);background:linear-gradient(135deg,rgba(255,255,255,.72),rgba(255,255,255,.25));position:relative;overflow:hidden}.contact-card::after{content:"✦";position:absolute;font-family:"Playfair Display",serif;font-size:380px;line-height:1;color:rgba(95,112,60,.055);right:-30px;top:-80px}.contact h2{font-size:clamp(58px,7vw,110px);margin:22px 0;position:relative;z-index:1}.contact-card>p:not(.eyebrow){max-width:590px;color:var(--muted);font-family:"Manrope",sans-serif;font-size:18px;line-height:1.65;position:relative;z-index:1}.contact-handle{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);margin-top:50px;padding-top:28px;font-family:"Playfair Display",serif;font-size:clamp(31px,4.4vw,70px);position:relative;z-index:1}.contact-handle b{width:68px;height:68px;border-radius:50%;background:var(--ink);color:white;display:grid;place-items:center;font-family:"DM Sans";font-size:24px;font-weight:400;transition:.25s}.contact-handle:hover b{background:var(--terracotta);transform:rotate(45deg)}
.site-footer{padding-top:44px;padding-bottom:44px;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;font-size:13px;color:var(--muted)}.site-footer>p{text-align:center}.site-footer>div{display:flex;justify-content:flex-end;gap:24px}.footer-brand{color:var(--ink)}
.lightbox{border:0;padding:0;border-radius:28px;background:#111;color:white;width:min(92vw,820px);height:min(92vh,1050px);overflow:hidden;box-shadow:0 40px 100px rgba(0,0,0,.45)}.lightbox::backdrop{background:rgba(18,15,13,.82);backdrop-filter:blur(12px)}.lightbox-stage{height:calc(100% - 70px);display:grid;place-items:center;background:#0a0a0a}.lightbox-stage img{width:100%;height:100%;object-fit:contain}.lightbox-close{position:absolute;right:15px;top:15px;z-index:2;width:42px;height:42px;border:0;border-radius:50%;background:rgba(255,255,255,.9);color:#111;font-size:28px;cursor:pointer}.lightbox-caption{height:70px;display:flex;align-items:center;justify-content:space-between;padding:0 24px}.lightbox-caption small{opacity:.55}
[data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}[data-reveal].in{opacity:1;transform:none}
@keyframes spin{to{transform:rotate(360deg)}}@keyframes marquee{to{transform:translateX(-50%)}}
@media (max-width:1050px){.site-header{grid-template-columns:1fr auto}.nav{display:none}.site-header>.pill{display:none}.menu-toggle{display:block;justify-self:end}.site-header.menu-open{background:var(--cream)}.site-header.menu-open .nav{display:flex;position:absolute;left:0;right:0;top:75px;background:var(--cream);padding:26px clamp(22px,5vw,76px) 34px;flex-direction:column;border-bottom:1px solid var(--line);font-size:24px}.hero{grid-template-columns:1fr;min-height:auto;padding-top:140px}.hero-copy{max-width:900px}.hero-visual{height:650px;margin-top:20px}.hero-card-main{width:44%;right:16%}.hero-card-side{width:30%;left:14%}.hero-sticker{right:12%}.intro-grid{grid-template-columns:1fr;gap:40px}.work-card,.work-card.card-tall,.work-card.card-wide{grid-column:span 6;grid-row:auto;aspect-ratio:.72}.services-layout{grid-template-columns:1fr}.services-sticky{position:relative;top:auto}.process-grid{grid-template-columns:1fr 1fr}.process-grid article:nth-child(2){border-right:0}.process-grid article:nth-child(-n+2){border-bottom:1px solid var(--line)}.statement{grid-template-columns:1fr}.statement-copy{grid-column:1}.site-footer{grid-template-columns:1fr;gap:20px}.site-footer>p{text-align:left}.site-footer>div{justify-content:flex-start}}
@media (max-width:680px){.cursor-glow{display:none}.hero{padding-top:118px;padding-bottom:80px}.hero h1{font-size:clamp(49px,16vw,73px)}.hero-actions{align-items:flex-start;flex-direction:column}.hero-meta{max-width:330px}.hero-visual{height:520px}.hero-card-main{width:62%;height:74%;right:6%}.hero-card-side{width:44%;height:52%;left:0}.hero-sticker{width:112px;height:112px;right:3%;bottom:2%}.hero-sticker strong{font-size:30px}.scroll-cue{display:none}.intro,.work,.niches,.process,.contact{padding-top:100px;padding-bottom:100px}.section-head{align-items:flex-start;flex-direction:column}.work-grid{grid-template-columns:1fr}.work-card,.work-card.card-tall,.work-card.card-wide{grid-column:1;min-height:0;aspect-ratio:.72}.services{padding-top:100px;padding-bottom:100px}.service-item{grid-template-columns:42px 1fr 20px}.service-item h3{font-size:29px}.process-grid{grid-template-columns:1fr}.process-grid article{border-right:0;border-bottom:1px solid var(--line)!important}.process-grid article:last-child{border-bottom:0!important}.statement{min-height:680px}.statement-media img{width:72%}.statement-media img:first-child{right:-3%;top:-10%}.statement-media img:last-child{right:-20%;bottom:-18%}.contact-card{border-radius:26px}.contact-handle{font-size:31px}.contact-handle b{width:52px;height:52px}.site-footer>div{flex-direction:column;gap:8px}.lightbox{width:94vw;height:88vh}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.marquee-track,.hero-orbit{animation:none}[data-reveal]{opacity:1;transform:none;transition:none}.work-open img,.pill,.niche-cloud span{transition:none}}

/* =========================================================
   HERO LAYOUT V2 — balanced desktop + responsive composition
   Keeps the campaign artwork in the upper-left visual field
   instead of letting it fall below the headline area.
   ========================================================= */
.hero{
  min-height:100svh;
  grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr);
  grid-template-areas:"visual copy";
  align-items:center;
  column-gap:clamp(32px,5vw,86px);
  padding-top:clamp(108px,11vh,132px);
  padding-bottom:clamp(54px,7vh,82px);
}
.hero-copy{
  grid-area:copy;
  align-self:center;
  width:100%;
  max-width:720px;
  padding-block:8px;
}
.hero h1{
  font-size:clamp(58px,6.35vw,104px);
}
.hero-visual{
  grid-area:visual;
  align-self:center;
  width:100%;
  height:clamp(540px,70vh,700px);
  min-height:540px;
  margin:0;
}
.hero-card{
  border-radius:clamp(22px,2vw,30px);
  will-change:transform;
}
.hero-card img{
  object-position:center top;
}
.hero-card-main{
  width:55%;
  height:80%;
  left:30%;
  right:auto;
  top:1%;
  bottom:auto;
  transform:rotate(2.25deg);
  z-index:2;
}
.hero-card-side{
  width:35%;
  height:53%;
  left:0;
  right:auto;
  top:auto;
  bottom:7%;
  transform:rotate(-6deg);
  z-index:3;
}
.hero-sticker{
  right:0;
  bottom:4%;
  z-index:4;
}
.hero-orbit{
  inset:auto;
  width:min(88%,650px);
  aspect-ratio:1;
  left:5%;
  top:4%;
}

/* Compact desktop / landscape tablet: retain the professional two-column hero. */
@media (max-width:1180px) and (min-width:901px){
  .hero{
    grid-template-columns:minmax(0,1.06fr) minmax(350px,.94fr);
    column-gap:clamp(26px,3.5vw,48px);
    padding-top:112px;
    padding-bottom:58px;
  }
  .hero h1{font-size:clamp(55px,6.1vw,76px)}
  .hero-lead{font-size:clamp(16px,1.65vw,19px);line-height:1.55}
  .hero-meta{margin-top:34px}
  .hero-visual{height:clamp(500px,64vh,610px);min-height:500px}
  .hero-card-main{width:59%;height:78%;left:27%;top:2%}
  .hero-card-side{width:37%;height:49%;left:0;bottom:9%}
  .hero-sticker{width:126px;height:126px;right:-1%;bottom:4%}
  .hero-sticker strong{font-size:35px}
}

/* Tablet / phone: text first, artwork immediately beneath it, with no dead space. */
@media (max-width:900px){
  .hero{
    grid-template-columns:1fr;
    grid-template-areas:"copy" "visual";
    gap:28px;
    min-height:auto;
    padding-top:118px;
    padding-bottom:76px;
  }
  .hero-copy{max-width:780px;padding:0}
  .hero h1{font-size:clamp(52px,10.5vw,82px)}
  .hero-visual{
    height:clamp(500px,68vw,620px);
    min-height:500px;
    margin-top:2px;
  }
  .hero-card-main{width:50%;height:82%;left:31%;top:0}
  .hero-card-side{width:32%;height:52%;left:9%;bottom:2%}
  .hero-sticker{right:8%;bottom:2%}
  .hero-orbit{width:min(76vw,610px);left:10%;top:1%}
}

@media (max-width:680px){
  .hero{gap:22px;padding-top:108px;padding-bottom:68px}
  .hero h1{font-size:clamp(48px,15vw,68px);line-height:.93;margin:22px 0}
  .hero-lead{font-size:16px;line-height:1.6}
  .hero-actions{margin-top:28px}
  .hero-meta{margin-top:34px}
  .hero-visual{height:500px;min-height:500px;margin-top:0}
  .hero-card-main{width:62%;height:76%;left:auto;right:4%;top:1%}
  .hero-card-side{width:43%;height:49%;left:0;bottom:3%}
  .hero-sticker{width:108px;height:108px;right:1%;bottom:1%}
  .hero-sticker strong{font-size:29px}
  .hero-orbit{width:94%;left:0;top:3%}
}

@media (max-width:430px){
  .hero{padding-top:100px;padding-bottom:58px}
  .hero h1{font-size:clamp(45px,14.5vw,61px)}
  .hero-visual{height:445px;min-height:445px}
  .hero-card-main{width:64%;height:75%;right:2%}
  .hero-card-side{width:44%;height:48%;left:-1%;bottom:4%}
  .hero-sticker{width:92px;height:92px;right:0;bottom:2%;font-size:8px}
  .hero-sticker strong{font-size:25px}
}

/* =========================================================
   V4 — MOBILE RESPONSIVE FIXES
   Prevent horizontal scrolling and give the phone/tablet
   experience a cleaner, more professional layout.
   ========================================================= */
html,
body{
  width:100%;
  max-width:100%;
  overflow-x:clip;
}
body,
main,
section,
.site-header,
.hero,
.hero-visual,
.work,
.services,
.niches,
.process,
.statement,
.contact,
.site-footer{
  max-width:100%;
}
main,
.hero,
.marquee,
.statement{
  overflow-x:clip;
}
img{
  max-width:100%;
  height:auto;
}

@media (max-width:900px){
  .section-pad{
    padding-left:20px;
    padding-right:20px;
  }

  .site-header{
    padding:16px 20px;
  }

  .site-header.menu-open .nav{
    top:73px;
    left:0;
    right:0;
    width:100%;
    padding:20px 20px 28px;
    gap:18px;
    z-index:950;
  }

  .hero::before{
    width:95vw;
    height:95vw;
    right:-36vw;
    top:-18vw;
  }

  .hero{
    gap:24px;
    padding-top:104px;
    padding-bottom:56px;
  }

  .hero-copy,
  .hero-visual{
    width:100%;
  }

  .hero-copy{
    max-width:100%;
  }

  .hero h1{
    margin:20px 0 18px;
    line-height:.94;
  }

  .hero-lead{
    max-width:100%;
  }

  .hero-actions{
    gap:16px;
    flex-wrap:wrap;
  }

  .hero-visual{
    max-width:430px;
    margin-inline:auto;
    height:520px;
    min-height:520px;
    overflow:hidden;
  }

  .hero-card-main{
    width:60%;
    height:76%;
    right:3%;
    left:auto;
    top:1%;
  }

  .hero-card-side{
    width:41%;
    height:48%;
    left:2%;
    bottom:7%;
  }

  .hero-sticker{
    right:4%;
    bottom:3%;
  }

  .hero-orbit{
    width:92%;
    left:4%;
    top:3%;
  }

  .marquee{
    margin:10px 0 0;
    transform:none;
    padding:14px 0;
  }

  .marquee-track{
    gap:22px;
    font-size:12px;
    letter-spacing:.1em;
  }

  .intro,
  .work,
  .services,
  .niches,
  .process,
  .contact{
    padding-top:88px;
    padding-bottom:88px;
  }

  .section-head{
    margin-bottom:38px;
  }

  .section-head > p,
  .intro-copy p,
  .services-sticky p,
  .contact-card > p:not(.eyebrow){
    max-width:100%;
  }

  .work-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:16px;
  }

  .work-card,
  .work-card.card-tall,
  .work-card.card-wide{
    grid-column:span 1;
    grid-row:auto;
    min-height:0;
    aspect-ratio:.72;
  }

  .work-info strong{
    font-size:22px;
  }

  .services-layout{
    gap:34px;
  }

  .service-item{
    grid-template-columns:44px 1fr 20px;
    gap:14px;
    padding:24px 0;
  }

  .service-item h3{
    font-size:28px;
  }

  .niche-cloud{
    gap:10px;
  }

  .niche-cloud span{
    font-size:clamp(18px,4.8vw,28px);
    padding:12px 16px;
  }

  .process-grid{
    grid-template-columns:1fr 1fr;
  }

  .statement{
    min-height:620px;
  }

  .statement-copy{
    padding-top:90px;
    padding-bottom:90px;
  }

  .statement-copy h2{
    font-size:clamp(56px,12vw,92px);
  }

  .contact-card{
    padding:32px 24px;
  }

  .contact-handle{
    gap:16px;
    font-size:clamp(26px,6vw,44px);
    align-items:flex-start;
  }
}

@media (max-width:680px){
  .section-pad{
    padding-left:18px;
    padding-right:18px;
  }

  .site-header{
    padding:14px 18px;
  }

  .brand-mark{
    width:34px;
    height:34px;
    font-size:20px;
  }

  .brand-copy{
    font-size:14px;
  }

  .site-header.menu-open .nav{
    top:68px;
    padding:18px 18px 24px;
    font-size:22px;
  }

  .hero{
    gap:20px;
    padding-top:96px;
    padding-bottom:48px;
  }

  .hero h1{
    font-size:clamp(42px,13.5vw,60px);
    margin:18px 0 16px;
  }

  .eyebrow,
  .section-kicker{
    letter-spacing:.14em;
  }

  .hero-lead,
  .intro-copy p,
  .section-head > p,
  .services-sticky p,
  .service-item p,
  .contact-card > p:not(.eyebrow){
    font-size:15px;
    line-height:1.65;
  }

  .hero-actions{
    flex-direction:column;
    align-items:flex-start;
    gap:14px;
  }

  .hero-actions .pill,
  .hero-actions .text-link{
    max-width:100%;
  }

  .hero-meta{
    max-width:100%;
    margin-top:26px;
    gap:8px;
    font-size:12px;
  }

  .hero-visual{
    max-width:360px;
    height:430px;
    min-height:430px;
  }

  .hero-card-main{
    width:62%;
    height:74%;
    right:2%;
    top:2%;
  }

  .hero-card-side{
    width:42%;
    height:46%;
    left:0;
    bottom:10%;
  }

  .hero-sticker{
    width:92px;
    height:92px;
    right:2%;
    bottom:4%;
    font-size:8px;
  }

  .hero-sticker strong{
    font-size:24px;
  }

  .hero-orbit{
    width:100%;
    left:0;
    top:5%;
  }

  .marquee{
    padding:12px 0;
  }

  .marquee-track{
    font-size:11px;
    gap:18px;
  }

  .intro,
  .work,
  .services,
  .niches,
  .process,
  .contact{
    padding-top:72px;
    padding-bottom:72px;
  }

  .section-head h2,
  .intro h2,
  .services h2,
  .contact h2{
    font-size:clamp(36px,11vw,52px);
    line-height:.98;
  }

  .work-grid{
    grid-template-columns:1fr;
    gap:14px;
  }

  .work-card,
  .work-card.card-tall,
  .work-card.card-wide{
    aspect-ratio:.78;
    border-radius:22px;
  }

  .work-index,
  .work-arrow{
    width:34px;
    height:34px;
  }

  .work-info{
    left:18px;
    right:54px;
    bottom:18px;
  }

  .work-info strong{
    font-size:20px;
  }

  .work-info em{
    font-size:11px;
  }

  .services{
    padding-top:80px;
    padding-bottom:80px;
  }

  .service-item{
    grid-template-columns:34px 1fr 18px;
    gap:12px;
    padding:18px 0;
  }

  .service-item h3{
    font-size:24px;
    margin-bottom:6px;
  }

  .niche-cloud span{
    font-size:18px;
    padding:11px 14px;
  }

  .process-grid{
    grid-template-columns:1fr;
  }

  .process-grid article{
    min-height:auto;
    padding:24px 18px 28px;
  }

  .process-grid h3{
    margin:34px 0 8px;
    font-size:28px;
  }

  .statement{
    min-height:560px;
  }

  .statement-media::after{
    background:linear-gradient(180deg,rgba(23,22,21,.78) 0%,rgba(23,22,21,.54) 48%,rgba(23,22,21,.32) 100%);
  }

  .statement-media img{
    width:72%;
    height:58%;
  }

  .statement-media img:first-child{
    right:-6%;
    top:2%;
  }

  .statement-media img:last-child{
    right:-18%;
    bottom:-8%;
  }

  .statement-copy{
    padding-top:72px;
    padding-bottom:72px;
  }

  .statement-copy h2{
    font-size:clamp(46px,14vw,70px);
  }

  .contact-card{
    border-radius:24px;
    padding:28px 18px;
  }

  .contact-card::after{
    font-size:240px;
    right:-14px;
    top:-36px;
  }

  .contact-handle{
    margin-top:32px;
    padding-top:18px;
    font-size:28px;
    flex-direction:row;
    justify-content:space-between;
  }

  .contact-handle span{
    max-width:calc(100% - 64px);
    overflow-wrap:anywhere;
  }

  .contact-handle b{
    width:48px;
    height:48px;
    font-size:20px;
    flex:0 0 auto;
  }

  .site-footer{
    padding-top:32px;
    padding-bottom:32px;
    gap:12px;
  }

  .site-footer > div{
    flex-direction:column;
    gap:6px;
  }

  .lightbox{
    width:94vw;
    height:86vh;
    border-radius:22px;
  }
}

@media (max-width:430px){
  .hero-visual{
    max-width:330px;
    height:395px;
    min-height:395px;
  }

  .hero-card-main{
    width:64%;
    height:73%;
  }

  .hero-card-side{
    width:43%;
    height:44%;
  }

  .hero-sticker{
    width:84px;
    height:84px;
  }

  .hero-sticker strong{
    font-size:22px;
  }

  .work-card,
  .work-card.card-tall,
  .work-card.card-wide{
    aspect-ratio:.8;
  }
}

@media (hover:none) and (pointer:coarse){
  .work-open:hover img,
  .work-open:hover .work-arrow,
  .pill:hover,
  .contact-handle:hover b,
  .service-item:hover,
  .niche-cloud span:hover{
    transform:none;
  }
}

/* =========================================================
   V5.2 — HARD MOBILE OVERFLOW GUARD
   This block intentionally uses stronger rules because some
   Android browsers include transformed descendants in the
   page scrollable overflow area.
   ========================================================= */
html{
  width:100%;
  max-width:100%;
  overflow-x:hidden !important;
  overscroll-behavior-x:none;
}
body{
  width:100%;
  max-width:100%;
  min-width:0;
  overflow-x:hidden !important;
  overscroll-behavior-x:none;
  position:relative;
}
main{
  width:100%;
  max-width:100%;
  min-width:0;
  overflow-x:hidden !important;
}
.site-header,
section,
.site-footer{
  width:100%;
  max-width:100%;
  min-width:0;
}
.hero,
.hero-copy,
.hero-visual,
.intro-grid,
.section-head,
.work-grid,
.services-layout,
.service-list,
.process-grid,
.contact-card,
.contact-handle{
  min-width:0;
}
.marquee{
  width:100% !important;
  max-width:100% !important;
  overflow:hidden !important;
  contain:paint;
}

@media (max-width:900px){
  .hero h1 span{
    white-space:normal;
  }
  .hero-visual{
    contain:paint;
  }
  .hero-card,
  .hero-sticker,
  .hero-orbit{
    max-width:100%;
  }
  .text-link,
  .pill,
  .brand-copy,
  .service-item h3,
  .work-info strong,
  .work-info em{
    overflow-wrap:anywhere;
  }
}

@media (max-width:680px){
  .marquee{
    transform:none !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }
  .hero::before{
    right:-28% !important;
  }
  .hero-card-side{
    left:2% !important;
  }
  .statement-media img:last-child{
    right:-10% !important;
  }
}

/* =========================================================
   V6 — SEO CONTENT SECTIONS
   Visible, people-first copy for commercial UGC search intent.
   ========================================================= */
.seo-services{padding-top:135px;padding-bottom:135px;background:rgba(255,255,255,.28)}
.seo-services .section-head{margin-bottom:46px}
.seo-services .section-head h2{max-width:880px}
.seo-service-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:28px;overflow:hidden}
.seo-service-grid article{background:var(--cream);padding:34px;min-height:260px}
.seo-service-grid h3{font-family:"Playfair Display",serif;font-size:31px;font-weight:500;line-height:1.05;margin:0 0 18px}
.seo-service-grid p{font-family:"Manrope",sans-serif;color:var(--muted);font-size:15px;line-height:1.72;margin:0}
.seo-cta{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:28px;padding:26px 30px;border:1px solid var(--line);border-radius:22px;background:var(--paper)}
.seo-cta div{display:flex;flex-direction:column;gap:5px}.seo-cta strong{font-family:"Playfair Display",serif;font-size:25px;font-weight:500}.seo-cta span{color:var(--muted);font-size:14px}.seo-cta .pill span{color:inherit}
.faq{padding-top:100px;padding-bottom:135px}.faq-list{max-width:980px;margin-left:auto}.faq-list details{border-top:1px solid var(--line);padding:0}.faq-list details:last-child{border-bottom:1px solid var(--line)}
.faq-list summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:25px 0;font-family:"Playfair Display",serif;font-size:clamp(24px,2.4vw,34px);font-weight:500}.faq-list summary::-webkit-details-marker{display:none}.faq-list summary span{font-family:"DM Sans",sans-serif;font-size:26px;font-weight:400;transition:transform .25s ease}.faq-list details[open] summary span{transform:rotate(45deg)}
.faq-list p{font-family:"Manrope",sans-serif;color:var(--muted);font-size:16px;line-height:1.75;max-width:760px;margin:0;padding:0 0 28px}
@media(max-width:1050px){.seo-service-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.seo-services{padding-top:100px;padding-bottom:100px}.faq-list{margin-left:0}}
@media(max-width:680px){.seo-services,.faq{padding-top:72px;padding-bottom:72px}.seo-service-grid{grid-template-columns:1fr;border-radius:22px}.seo-service-grid article{padding:24px 20px;min-height:0}.seo-service-grid h3{font-size:25px}.seo-cta{align-items:flex-start;flex-direction:column;padding:22px 18px}.seo-cta .pill{width:100%}.faq-list summary{font-size:24px;padding:20px 0}.faq-list p{font-size:15px}.site-footer>div{gap:8px}}

/* SEO landing links + dedicated service pages */
.seo-links{padding-top:110px;padding-bottom:110px}.seo-links-head{display:grid;grid-template-columns:1.2fr .8fr;gap:6vw;align-items:end;margin-bottom:36px}.seo-links-head h2{font-family:"Playfair Display",serif;font-size:clamp(42px,5vw,72px);font-weight:500;line-height:.95;letter-spacing:-.04em;margin:0}.seo-links-head h2 em{color:var(--terracotta);font-weight:500}.seo-links-head p{font-family:"Manrope",sans-serif;color:var(--muted);line-height:1.65;margin:0}.seo-link-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.seo-link-grid a{min-height:220px;border:1px solid var(--line);border-radius:24px;padding:22px;display:flex;flex-direction:column;transition:.3s ease;background:rgba(255,255,255,.25)}.seo-link-grid a:hover{transform:translateY(-5px);background:var(--paper);box-shadow:var(--shadow)}.seo-link-grid span{font-size:11px;color:var(--olive);letter-spacing:.12em}.seo-link-grid strong{font-family:"Playfair Display",serif;font-size:28px;font-weight:500;line-height:1.05;margin:44px 0 12px}.seo-link-grid em{font-family:"Manrope",sans-serif;font-size:13px;line-height:1.5;color:var(--muted);font-style:normal;margin-top:auto}
.seo-page .site-header{background:rgba(244,239,232,.94);backdrop-filter:blur(18px);border-bottom:1px solid var(--line)}.seo-page-hero{min-height:760px;padding-top:150px;padding-bottom:90px;display:grid;grid-template-columns:1.05fr .55fr;gap:7vw;align-items:center}.seo-page-copy{max-width:820px}.seo-page-copy h1{font-family:"Playfair Display",serif;font-size:clamp(58px,7.4vw,112px);font-weight:500;line-height:.89;letter-spacing:-.05em;margin:28px 0}.seo-page-copy>p:not(.eyebrow){font-family:"Manrope",sans-serif;color:var(--muted);font-size:clamp(17px,1.5vw,21px);line-height:1.65;max-width:690px}.seo-page-hero figure{margin:0;border-radius:32px;overflow:hidden;height:min(620px,70vh);box-shadow:var(--shadow);transform:rotate(2deg)}.seo-page-hero figure img{height:100%;object-fit:cover}.seo-page-content{display:grid;grid-template-columns:1.15fr .55fr;gap:8vw;padding-top:110px;padding-bottom:110px;border-top:1px solid var(--line)}.seo-copy-main{display:flex;flex-direction:column;gap:54px}.seo-copy-block h2,.seo-keyword-card h2{font-family:"Playfair Display",serif;font-size:clamp(34px,4vw,58px);line-height:1;letter-spacing:-.035em;font-weight:500;margin:0 0 20px}.seo-copy-block p{font-family:"Manrope",sans-serif;font-size:17px;line-height:1.8;color:var(--muted);margin:0}.seo-keyword-card{height:max-content;position:sticky;top:120px;border:1px solid var(--line);border-radius:26px;padding:28px;background:var(--paper)}.seo-keyword-card>span{font-size:10px;letter-spacing:.17em;color:var(--olive);font-weight:700}.seo-keyword-card h2{font-size:36px;margin-top:18px}.seo-keyword-card ul{padding:0;margin:22px 0 30px;list-style:none}.seo-keyword-card li{padding:12px 0;border-top:1px solid var(--line);font-family:"Manrope",sans-serif;color:var(--muted);font-size:14px}.seo-page-nav{padding-top:70px;padding-bottom:90px;border-top:1px solid var(--line)}.seo-page-nav>p{font-size:11px;letter-spacing:.16em;color:var(--olive);font-weight:700;text-transform:uppercase}.seo-page-nav>div{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}.seo-page-nav a{border:1px solid var(--line);border-radius:999px;padding:12px 16px;font-weight:600;font-size:13px;transition:.25s}.seo-page-nav a:hover{background:var(--ink);color:white;border-color:var(--ink)}
@media(max-width:1050px){.seo-link-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.seo-page-hero{grid-template-columns:1fr .48fr;gap:4vw}.seo-page-content{grid-template-columns:1fr .55fr;gap:5vw}}
@media(max-width:760px){.seo-links-head{grid-template-columns:1fr;gap:20px}.seo-link-grid{grid-template-columns:1fr}.seo-link-grid a{min-height:170px}.seo-link-grid strong{margin-top:28px}.seo-page-hero{grid-template-columns:1fr;padding-top:112px;padding-bottom:64px}.seo-page-hero figure{height:420px;max-width:330px;margin:auto}.seo-page-copy h1{font-size:clamp(47px,14vw,66px)}.seo-page-content{grid-template-columns:1fr;padding-top:72px;padding-bottom:72px}.seo-keyword-card{position:relative;top:auto}.seo-copy-main{gap:42px}.seo-copy-block p{font-size:15px}.seo-page-nav{padding-top:55px;padding-bottom:65px}}

/* =========================================================
   V7 — SELECTED WORK GRID PRESERVATION
   4-up desktop gallery, compact cards, responsive fallbacks.
   ========================================================= */
@media (min-width:1181px){
  .work-grid{
    display:grid;
    grid-template-columns:repeat(8,minmax(0,1fr));
    gap:18px;
  }
  .work-card,
  .work-card.card-tall,
  .work-card.card-wide{
    grid-column:span 2;
    grid-row:auto;
    min-height:0;
    aspect-ratio:.74;
    border-radius:24px;
  }
  .work-card:nth-child(5){grid-column:2 / span 2}
  .work-card:nth-child(6){grid-column:4 / span 2}
  .work-card:nth-child(7){grid-column:6 / span 2}
  .work-open{
    border-radius:inherit;
    box-shadow:0 14px 34px rgba(41,31,24,.10);
    transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s ease;
  }
  .work-open:hover{
    transform:translateY(-7px);
    box-shadow:0 26px 56px rgba(41,31,24,.18);
  }
  .work-open img{
    transition:transform .7s cubic-bezier(.2,.7,.2,1),filter .35s ease;
  }
  .work-open:hover img{
    transform:scale(1.055);
    filter:saturate(1.04) contrast(1.02);
  }
}

@media (min-width:901px) and (max-width:1180px){
  .work-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:16px;
  }
  .work-card,
  .work-card.card-tall,
  .work-card.card-wide{
    grid-column:span 1;
    grid-row:auto;
    min-height:0;
    aspect-ratio:.74;
  }
  .work-card:nth-child(7){grid-column:2}
}