:root{
  --red:#E03F3F;
  --ink:#1d1a1b;
  --ink-2:#5b5557;
  --paper:#fbfaf9;
  --hair:#e8e4e2;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Poppins',sans-serif;font-weight:300;
  color:var(--ink);background:var(--paper);
  font-size:16px;line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.caps{
  font-family:'Josefin Sans',sans-serif;font-weight:400;
  text-transform:uppercase;letter-spacing:.14em;line-height:1.25;
}
img{display:block;width:100%;height:auto}
a{color:inherit}

/* header */
.site-head{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:20px 24px;transition:background .4s ease,box-shadow .4s ease;
  color:#fff;
}
.site-head.solid{background:var(--paper);color:var(--ink);box-shadow:0 1px 0 var(--hair)}
.brand{font-family:'Josefin Sans',sans-serif;letter-spacing:.22em;font-size:13px;text-transform:uppercase;text-decoration:none}
.brand b{font-weight:600}
.head-phone{white-space:nowrap;font-family:'Josefin Sans',sans-serif;letter-spacing:.12em;font-size:13px;text-decoration:none}
.menu-btn{
  background:none;border:0;color:inherit;cursor:pointer;
  font-family:'Josefin Sans',sans-serif;letter-spacing:.22em;font-size:13px;text-transform:uppercase;
  padding:8px 0;
}
.menu-overlay{
  position:fixed;inset:0;background:var(--ink);color:#fff;z-index:60;
  display:flex;flex-direction:column;justify-content:center;padding:40px 32px;gap:22px;overflow-y:auto;
  opacity:0;visibility:hidden;transition:opacity .35s ease,visibility .35s;
}
.menu-overlay.open{opacity:1;visibility:visible}
.menu-overlay a{
  font-family:'Josefin Sans',sans-serif;text-transform:uppercase;letter-spacing:.18em;
  font-size:22px;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.14);padding-bottom:18px;
}
.menu-overlay a small{display:block;font-family:'Poppins',sans-serif;text-transform:none;letter-spacing:0;font-size:12px;color:rgba(255,255,255,.55);margin-top:6px}
.menu-close{position:absolute;top:20px;right:24px;background:none;border:0;color:#fff;font-family:'Josefin Sans',sans-serif;letter-spacing:.22em;font-size:13px;cursor:pointer;text-transform:uppercase}

/* hero */
.hero{position:relative;height:100svh;min-height:520px;overflow:hidden;background:var(--ink)}
.hero video,.hero img.hero-fallback{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
@media (orientation:portrait){
  .hero{height:48svh;min-height:0}
  .hero .scroll-hint{display:none}
}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,15,16,.45),rgba(20,15,16,.25) 45%,rgba(20,15,16,.55))}
.hero-inner{
  position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;
  align-items:flex-start;justify-content:flex-end;text-align:left;color:#fff;padding:0 26px 52px;
}
.hero-kicker{font-family:'Josefin Sans',sans-serif;text-transform:uppercase;letter-spacing:.3em;font-size:12px;opacity:.9}
.hero-title{font-size:clamp(30px,7.2vw,64px);margin:18px 0 6px;max-width:16ch}
.hero-rule{width:44px;height:2px;background:var(--red);margin:16px 0 18px}
.hero-phone{font-family:'Josefin Sans',sans-serif;letter-spacing:.14em;font-size:clamp(16px,2.6vw,20px);text-decoration:none}
.scroll-hint{
  position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:2;
  font-family:'Josefin Sans',sans-serif;font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.75);
  writing-mode:vertical-rl;
}
@media (orientation:portrait){
  .hero-inner{padding-bottom:20px}
}

/* sections */
.section{padding:76px 24px;max-width:1100px;margin:0 auto}
.section-wide{padding:0}
.intro-head{font-size:clamp(24px,4.6vw,42px);max-width:22ch}
.intro-copy{max-width:56ch;margin-top:22px;color:var(--ink-2)}
.kicker{font-family:'Josefin Sans',sans-serif;text-transform:uppercase;letter-spacing:.28em;font-size:11px;color:var(--red)}
.rule{width:44px;height:2px;background:var(--red);margin:18px 0}

/* editorial case teaser */
.case{margin:0}
.case-figure{position:relative;overflow:hidden}
.case-figure img{transition:transform 1.2s cubic-bezier(.19,1,.22,1)}
@media(hover:hover){.case-figure:hover img{transform:scale(1.035)}}
.case-body{padding:34px 24px 70px;max-width:1100px;margin:0 auto}
.case-title{font-size:clamp(20px,3.6vw,32px);margin-top:14px;max-width:26ch}
.case-line{color:var(--ink-2);margin-top:14px;max-width:52ch}
.intro-copy a,.page-intro a{color:inherit;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(160,36,42,.6)}
.text-link{
  display:inline-block;margin-top:22px;font-family:'Josefin Sans',sans-serif;
  text-transform:uppercase;letter-spacing:.2em;font-size:12px;text-decoration:none;
  border-bottom:1px solid var(--red);padding-bottom:5px;
}

/* selected work strip */
.work{display:grid;gap:22px;padding:0 24px 76px;max-width:1100px;margin:0 auto}
@media(min-width:760px){.work{grid-template-columns:1fr 1fr 1fr}}
.work figure{overflow:hidden}
.work img{transition:transform 1.2s cubic-bezier(.19,1,.22,1)}
@media(hover:hover){.work figure:hover img{transform:scale(1.04)}}
.work figcaption{
  font-family:'Josefin Sans',sans-serif;text-transform:uppercase;letter-spacing:.18em;
  font-size:11px;color:var(--ink-2);margin-top:10px;
}

/* quote */
.quote{background:#f3efec;text-align:center}
.quote blockquote{
  font-family:'Josefin Sans',sans-serif;text-transform:uppercase;letter-spacing:.1em;
  font-size:clamp(15px,2.6vw,22px);line-height:1.7;max-width:44ch;margin:0 auto;
}
.quote cite{display:block;margin-top:22px;font-style:normal;font-family:'Josefin Sans',sans-serif;letter-spacing:.2em;font-size:11px;text-transform:uppercase;color:var(--ink-2)}

/* cta */
.cta{text-align:center}
.cta .intro-head{margin:0 auto}
.cta p{color:var(--ink-2);margin-top:18px}
.cta-phone{
  display:inline-block;margin-top:26px;font-family:'Josefin Sans',sans-serif;
  font-size:clamp(18px,3vw,24px);letter-spacing:.14em;text-decoration:none;color:var(--red);
  border-bottom:1px solid var(--red);padding-bottom:6px;
}

/* footer */
.site-foot{background:var(--ink);color:rgba(255,255,255,.85);padding:56px 24px;font-size:13px}
.foot-inner{max-width:1100px;margin:0 auto;display:grid;gap:28px}
@media(min-width:760px){.foot-inner{grid-template-columns:1.2fr 1fr 1fr}}
.site-foot h3{font-size:13px;letter-spacing:.22em;color:#fff;margin-bottom:12px}
.site-foot a{color:#fff;text-decoration:none}
.foot-small{max-width:1100px;margin:34px auto 0;padding-top:20px;border-top:1px solid rgba(255,255,255,.14);font-size:11px;color:rgba(255,255,255,.45)}

/* case study page */
.story-hero{position:relative;min-height:78svh;display:flex;align-items:flex-end;overflow:hidden;background:var(--ink)}
.story-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.story-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,15,16,.25),rgba(20,15,16,.15) 50%,rgba(20,15,16,.7))}
.story-hero-inner{position:relative;z-index:2;color:#fff;padding:0 24px 54px;max-width:1100px;margin:0 auto;width:100%}
.story-title{font-size:clamp(24px,5vw,46px);max-width:22ch;margin-top:16px}
.story-section{max-width:1100px;margin:0 auto;padding:70px 24px 0}
.story-facts{display:grid;gap:18px;margin-top:36px;border-top:1px solid var(--hair);padding-top:28px}
@media(min-width:760px){.story-facts{grid-template-columns:repeat(3,1fr)}}
.story-facts .kicker{display:block;margin-bottom:6px}
.story-facts p{font-size:14px;color:var(--ink)}
.story-figure{padding:56px 24px 0;max-width:1100px;margin:0 auto}
.story-figure figcaption{font-family:'Josefin Sans',sans-serif;text-transform:uppercase;letter-spacing:.2em;font-size:11px;color:var(--ink-2);margin-top:12px}
.story-interlude{max-width:760px;margin:0 auto;padding:80px 24px 10px;text-align:center}
.story-interlude p{font-family:'Josefin Sans',sans-serif;text-transform:uppercase;letter-spacing:.12em;font-size:clamp(16px,2.8vw,24px);line-height:1.7}
.back-link{display:inline-block;margin:70px 24px 80px;font-family:'Josefin Sans',sans-serif;text-transform:uppercase;letter-spacing:.2em;font-size:12px;text-decoration:none;border-bottom:1px solid var(--red);padding-bottom:5px}

/* reveal on scroll */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .9s ease,transform .9s cubic-bezier(.19,1,.22,1)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}

/* v2 full-site additions */
.page-hero{
  background:var(--ink);color:#fff;
  padding:150px 24px 64px;text-align:left;
}
.page-hero .kicker{color:#fff;opacity:.75}
.page-hero h1{font-size:clamp(26px,5vw,44px);margin-top:14px;max-width:24ch}
.page-hero .rule{margin:20px 0 0}
.page-hero p.page-intro{max-width:56ch;margin-top:18px;color:rgba(255,255,255,.72)}

/* projects listing */
.plist{max-width:1100px;margin:0 auto;padding:64px 24px 90px;display:grid;grid-template-columns:1fr;gap:54px}
.plist a{text-decoration:none}
.plist figure{overflow:hidden}
.plist img{transition:transform .8s ease}
.plist a:hover img{transform:scale(1.03)}
.plist h2{font-size:15px;letter-spacing:.16em;margin-top:16px}
.plist .pl-meta{font-family:'Josefin Sans',sans-serif;text-transform:uppercase;letter-spacing:.24em;font-size:11px;color:var(--ink-2);margin-top:6px}
@media(min-width:760px){.plist{grid-template-columns:1fr 1fr;gap:44px}}

/* case study */
.cs-hero{position:relative;height:72svh;min-height:420px;overflow:hidden;background:var(--ink)}
.cs-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cs-hero::after{content:"";position:absolute;inset:0;pointer-events:none}
nav+.cs-hero::after{background:linear-gradient(180deg,rgba(20,15,16,.78) 0%,rgba(20,15,16,.45) 16%,rgba(20,15,16,0) 40%)}
.cs-head{max-width:1100px;margin:0 auto;padding:60px 24px 10px}
.cs-head h1{font-size:clamp(24px,4.8vw,40px);max-width:26ch;margin-top:14px}
.cs-intro{max-width:56ch;margin-top:22px;color:var(--ink-2)}
.cs-rhythm{max-width:1100px;margin:0 auto;padding:34px 24px 60px;display:flex;flex-direction:column;gap:44px}
.cs-rhythm figure{width:100%}
.cs-rhythm .pair{display:grid;grid-template-columns:1fr;gap:44px}
.cs-rhythm .pair figure:only-child{grid-column:1/-1}
@media(min-width:760px){.cs-rhythm .pair{grid-template-columns:1fr 1fr;gap:28px}}
.cs-quote{max-width:900px;margin:20px auto;padding:40px 24px;text-align:center}
.cs-quote p{font-family:'Josefin Sans',sans-serif;text-transform:uppercase;letter-spacing:.16em;font-size:clamp(17px,2.6vw,24px);line-height:1.5}
.cs-nav{max-width:1100px;margin:0 auto;padding:0 24px 80px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.cs-nav a{font-family:'Josefin Sans',sans-serif;text-transform:uppercase;letter-spacing:.2em;font-size:12px;text-decoration:none;border-bottom:2px solid var(--red);padding-bottom:6px}

/* steps */
.steps{max-width:900px;margin:0 auto;padding:70px 24px 80px}
.step{border-top:1px solid var(--hair);padding:34px 0 40px}
.step .step-no{font-family:'Josefin Sans',sans-serif;letter-spacing:.3em;font-size:11px;color:var(--red);text-transform:uppercase}
.step h2{font-size:clamp(17px,2.6vw,23px);margin:12px 0 16px}
.step p{color:var(--ink-2);max-width:62ch;margin-top:10px}

/* article (journal) */
.article{max-width:760px;margin:0 auto;padding:60px 24px 80px}
.article h2{font-size:clamp(17px,2.4vw,22px);margin:44px 0 16px}
.article p{margin:18px 0;color:var(--ink-2)}
.article .art-hero{margin:34px 0 10px}
.art-date{font-family:'Josefin Sans',sans-serif;text-transform:uppercase;letter-spacing:.24em;font-size:11px;color:var(--ink-2)}
.back-link{display:inline-block;margin-top:48px;font-family:'Josefin Sans',sans-serif;text-transform:uppercase;letter-spacing:.2em;font-size:12px;text-decoration:none;border-bottom:2px solid var(--red);padding-bottom:6px}

/* journal listing */
.jlist{max-width:1100px;margin:0 auto;padding:64px 24px 90px;display:flex;flex-direction:column;gap:0}
.jcard{display:grid;grid-template-columns:1fr;gap:20px;padding:34px 0;border-top:1px solid var(--hair);text-decoration:none}
.jcard figure{overflow:hidden}
.jcard h2{font-size:clamp(17px,2.4vw,22px);margin:10px 0 12px}
.jcard p{color:var(--ink-2);font-size:15px;max-width:64ch}
@media(min-width:760px){.jcard{grid-template-columns:280px 1fr;gap:34px;align-items:start}}

/* contact */
.contact-wrap{max-width:1100px;margin:0 auto;padding:70px 24px 90px;display:grid;grid-template-columns:1fr;gap:60px}
@media(min-width:860px){.contact-wrap{grid-template-columns:1fr 1.2fr}}
.contact-info h2{font-size:15px;letter-spacing:.18em;margin:26px 0 10px}
.contact-info p{color:var(--ink-2)}
.contact-info a{text-decoration:none;border-bottom:1px solid var(--red)}
form.enquiry{display:flex;flex-direction:column;gap:22px}
form.enquiry label{font-family:'Josefin Sans',sans-serif;text-transform:uppercase;letter-spacing:.2em;font-size:11px;color:var(--ink-2);display:block;margin-bottom:8px}
form.enquiry input,form.enquiry textarea{
  width:100%;border:0;border-bottom:1px solid var(--hair);background:transparent;
  font-family:'Poppins',sans-serif;font-weight:300;font-size:16px;color:var(--ink);
  padding:10px 2px;outline:none;transition:border-color .3s;
}
form.enquiry input:focus,form.enquiry textarea:focus{border-color:var(--red)}
form.enquiry textarea{min-height:120px;resize:vertical}
form.enquiry button{
  align-self:flex-start;background:var(--red);color:#fff;border:0;cursor:pointer;
  font-family:'Josefin Sans',sans-serif;text-transform:uppercase;letter-spacing:.24em;font-size:12px;
  padding:16px 34px;
}

/* simple band page (thank-you) */
.band{background:var(--ink);color:#fff;min-height:70svh;display:flex;flex-direction:column;justify-content:center;padding:150px 24px 80px}
.band h1{font-size:clamp(26px,5vw,44px);margin-top:14px}
.band p{max-width:52ch;margin-top:20px;color:rgba(255,255,255,.75)}
.band a.back-link{color:#fff;margin-top:40px}
@media(min-width:760px){.jcard.noimg{grid-template-columns:1fr}}

/* WhatsApp quick contact - mobile only, mirrors live site quick action bar */
.wa-fab{display:none;position:fixed;right:16px;bottom:16px;z-index:9990;width:54px;height:54px;border-radius:50%;background:#25d366;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(0,0,0,.25);text-decoration:none}
.wa-fab svg{width:28px;height:28px;fill:#fff}
@media (max-width:860px){.wa-fab{display:flex}}

/* nested menu groups */
.menu-item{display:flex;align-items:flex-start;border-bottom:1px solid rgba(255,255,255,.14)}
.menu-item>a{flex:1;border-bottom:0}
.menu-toggle{background:none;border:0;color:#fff;cursor:pointer;font-family:'Josefin Sans',sans-serif;font-size:24px;line-height:1;padding:0 0 0 16px;align-self:flex-start}
.menu-sub{display:flex;flex-direction:column;gap:16px;padding:16px 0 4px 20px;margin-top:-12px}
.menu-sub[hidden]{display:none}
.menu-sub a{font-size:16px;padding-bottom:14px}
.menu-sub a small{font-size:11px}

/* team bio dropdowns */
.team-bio{margin-top:16px;border-top:1px solid var(--hair);padding-top:12px}
.team-bio summary{font-family:'Josefin Sans',sans-serif;text-transform:uppercase;letter-spacing:.2em;font-size:12px;color:var(--ink);cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px}
.team-bio summary::-webkit-details-marker{display:none}
.team-bio summary::after{content:'+';color:var(--red);font-size:20px;line-height:1;font-weight:300}
.team-bio[open] summary::after{content:'\2013'}
.team-bio p{font-size:14px;line-height:1.75;color:var(--ink-2);margin-top:10px}

/* promo film */
.promo{padding:0}
.promo-video{position:relative;aspect-ratio:16/9;background:#000;overflow:hidden}
.promo-video video,.promo-video img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero video.hv{transition:opacity .9s linear}

/* desktop menu: drawer at one-third screen width */
@media (min-width:1000px){
  .menu-overlay{left:auto;width:33.333vw;min-width:360px;box-shadow:-10px 0 40px rgba(0,0,0,.35);
    opacity:1;transform:translateX(102%);transition:transform .45s cubic-bezier(.32,.72,.28,1),visibility .45s}
  .menu-overlay.open{transform:none}
}

/* review carousel */
.quote-carousel{max-width:820px;margin:0 auto}
.quote-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;transition:height .35s ease}
.quote-track::-webkit-scrollbar{display:none}
.quote-slide{flex:0 0 100%;scroll-snap-align:center;margin:0;padding:0 8px;align-self:flex-start}
.quote-slide blockquote{margin:0 auto}
.quote-nav{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:26px}
.quote-btn{background:none;border:1px solid var(--hair);border-radius:50%;width:40px;height:40px;font-size:16px;color:var(--ink);cursor:pointer}
.quote-btn:hover{border-color:var(--red);color:var(--red)}
.quote-dots{display:flex;gap:8px}
.quote-dot{width:8px;height:8px;border-radius:50%;border:1px solid var(--ink-2);background:none;padding:0;cursor:pointer}
.quote-dot.on{background:var(--red);border-color:var(--red)}

/* staged mobile readability hardening - positions unchanged */
.hero::after{background:linear-gradient(180deg,rgba(20,15,16,.55),rgba(20,15,16,.32) 45%,rgba(20,15,16,.72))}
.site-head:not(.solid) .brand,.site-head:not(.solid) .head-phone,.site-head:not(.solid) .menu-btn{text-shadow:0 1px 10px rgba(20,15,16,.55)}
.hero-kicker,.hero-title,.hero-phone{text-shadow:0 1px 12px rgba(20,15,16,.5)}

/* explicit header link colors per state */
.site-head .brand,.site-head .head-phone,.site-head .menu-btn{color:#fff}
.site-head.solid .brand,.site-head.solid .head-phone,.site-head.solid .menu-btn{color:var(--ink);text-shadow:none}