/* ============================================================
   STUDIO ARAJ — shared stylesheet
   Clean white · copper-led · calm Didone display
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&family=Jost:ital,wght@0,300;0,400;0,500;1,300;1,400&display=swap');

:root{
  --white:        #FFFFFF;   /* pure white — main background */
  --paper:        #FFFFFF;   /* sections stay white, separated by hairlines */
  --paper-2:      #EEECE8;   /* neutral light — placeholder fills only */
  --copper:       #D88430;   /* warm accent — from logo — used sparingly, never for body type */
  --copper-deep:  #26221B;   /* headings & emphasis -> espresso */
  --copper-rich:  #211D17;   /* the dark espresso bands */
  --text:         #3B352C;   /* body — warm espresso */
  --text-strong:  #26221B;   /* headings / firm text */
  --muted:        #897F70;   /* captions / labels */
  --line:         rgba(38,34,27,.16);
  --line-soft:    rgba(38,34,27,.09);
  --line-light:   rgba(241,235,225,.28);

  /* legacy aliases so existing markup keeps working */
  --cream:        var(--white);
  --cream-2:      var(--paper);
  --cream-3:      var(--paper-2);
  --ink:          var(--text);
  --ink-soft:     var(--text-strong);
  --copper-tint:  rgba(216,132,48,.12);

  --serif:      'Cinzel', 'Times New Roman', serif;   /* Roman-capital display */
  --serif-soft: 'Cormorant Garamond', 'Cinzel', serif; /* flowing serif & italics */
  --sans:  'Jost', system-ui, sans-serif;

  --maxw: 1280px;
  --pad: clamp(22px, 5vw, 84px);
  --ease: cubic-bezier(.22,.61,.36,1);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-font-smoothing:antialiased; }
body{
  background:var(--white);
  color:var(--text);
  font-family:var(--sans);
  font-weight:300;
  font-size:16px;
  line-height:1.7;
  overflow-x:hidden;
  cursor:auto;
}
@media (max-width:900px){ body{ cursor:auto; } }

img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--copper); color:#fff; }

/* ----------------------------------------------------------
   Custom cursor
   ---------------------------------------------------------- */
.cursor-dot, .cursor-ring{
  display:none !important;
  position:fixed; top:0; left:0; z-index:9999; pointer-events:none; border-radius:50%;
}
.cursor-dot{ width:5px; height:5px; background:var(--copper-deep); transform:translate(-50%,-50%); }
.cursor-ring{
  width:36px; height:36px; border:1px solid var(--copper); transform:translate(-50%,-50%);
  transition:width .3s var(--ease), height .3s var(--ease), background .3s var(--ease);
}
.cursor-ring.hover{ width:58px; height:58px; background:var(--copper-tint); }
@media (max-width:900px){ .cursor-dot,.cursor-ring{ display:none; } }

/* ----------------------------------------------------------
   Layout & type
   ---------------------------------------------------------- */
.wrap{ max-width:var(--maxw); margin:0 auto; padding-inline:var(--pad); }
section{ position:relative; }

.eyebrow{
  font-family:var(--sans); font-weight:400; font-size:11px; letter-spacing:.3em;
  text-transform:uppercase; color:var(--copper-deep); display:inline-flex; align-items:center; gap:13px;
}
.eyebrow::before{ content:none; }
.eyebrow.center::after{ content:none; }
.eyebrow.center{ justify-content:center; }
.eyebrow.solo::before{ display:none; }

.display{
  font-family:var(--serif); font-weight:400; line-height:1.22; letter-spacing:.035em;
  text-transform:uppercase; color:var(--copper-deep); text-wrap:balance;
}
.display .it{ font-family:var(--serif-soft); font-style:italic; font-weight:500; font-size:1.12em; letter-spacing:0; text-transform:none; color:inherit; }
h1.display{ font-size:clamp(28px, 3.4vw, 48px); }
h2.display{ font-size:clamp(22px, 2.6vw, 36px); }
h3.display{ font-size:clamp(18px, 2vw, 26px); }

.lead{ font-size:clamp(16px,1.35vw,19px); color:var(--text-strong); font-weight:300; max-width:58ch; }
.muted{ color:var(--muted); }

/* ----------------------------------------------------------
   Buttons & links
   ---------------------------------------------------------- */
.btn{
  position:relative; display:inline-flex; align-items:center; gap:12px;
  font-family:var(--sans); font-weight:400; font-size:11px; letter-spacing:.24em;
  text-transform:uppercase; white-space:nowrap; padding:16px 30px;
  border:1px solid var(--text-strong); color:var(--text-strong); background:transparent;
  cursor:pointer; overflow:hidden; isolation:isolate; transition:color .65s cubic-bezier(.65,0,.35,1);
}
.btn::after{ content:''; position:absolute; inset:0; background:#000; transform:scaleX(0); transform-origin:right center; transition:transform .9s cubic-bezier(.65,0,.35,1); z-index:-1; }
.btn:hover{ color:var(--white); }
.btn:hover::after{ transform:scaleX(1); transform-origin:left center; }
.btn .arr{ transition:transform .75s cubic-bezier(.65,0,.35,1); }
.btn:hover .arr{ transform:translate(4px); }
.btn.light{ border-color:rgba(255,255,255,.65); color:#fff; }
.btn.light::after{ background:#fff; }
.btn.light:hover{ color:var(--copper-rich); }
.btn.copper{ border-color:var(--text-strong); color:var(--text-strong); }
.btn.copper::after{ background:#000; }
.btn.copper:hover{ color:var(--white); }

.link-underline{ position:relative; font-size:11px; letter-spacing:.24em; text-transform:uppercase; padding-bottom:4px; white-space:nowrap; color:var(--copper-deep); }
.link-underline::after{ content:''; position:absolute; left:0; bottom:0; width:100%; height:1px; background:currentColor; transform:scaleX(0); transform-origin:right; transition:transform .5s var(--ease); }
.link-underline:hover::after{ transform:scaleX(1); transform-origin:left; }

/* ----------------------------------------------------------
   Header / nav
   ---------------------------------------------------------- */
.site-head{
  position:fixed; top:0; left:0; right:0; z-index:900;
  display:flex; align-items:center; justify-content:space-between; padding:22px var(--pad);
  opacity:0; transform:translateY(-16px);
  transition:background .5s var(--ease), padding .5s var(--ease), box-shadow .5s var(--ease), opacity 1s var(--ease), transform 1s var(--ease);
}
.site-head.revealed{ opacity:1; transform:translateY(0); }
.site-head.solid{ background:rgba(255,255,255,.94); backdrop-filter:blur(14px) saturate(1.1); padding-block:14px; }
.site-head.scrolled{ box-shadow:0 1px 0 var(--line-soft); }
.brand{ display:flex; align-items:center; gap:13px; }
.site-head .brand{ position:absolute; left:50%; transform:translateX(-50%); }
.brand img{ height:38px; width:auto; object-fit:contain; transition:height .5s var(--ease); }
.site-head.solid .brand img{ height:32px; width:auto; }
.brand .word{ font-family:var(--serif); letter-spacing:.2em; font-size:14px; font-weight:500; color:var(--text-strong); transition:color .5s var(--ease); padding-left:4px; text-transform:uppercase; white-space:nowrap; }
.site-head.solid .brand .word{ color:var(--copper-deep); }

.nav{ display:none; }
.nav a{ font-size:11px; letter-spacing:.2em; text-transform:uppercase; font-weight:400; color:var(--text-strong); position:relative; padding:6px 0; transition:color .5s var(--ease); }
.site-head.solid .nav a{ color:var(--text-strong); }
.nav a::after{ content:''; position:absolute; left:0; bottom:0; height:1px; width:100%; background:var(--copper); transform:scaleX(0); transform-origin:right; transition:transform .45s var(--ease); }
.nav a:hover::after, .nav a.active::after{ transform:scaleX(1); transform-origin:left; }
.nav a.active{ color:var(--copper-deep); }
.site-head.solid .nav a.active{ color:var(--copper-deep); }

.nav-cta{ display:flex; align-items:center; gap:22px; }
.site-head:not(.solid) .nav-cta .btn{ border-color:var(--text-strong); color:var(--text-strong); }
.site-head:not(.solid) .nav-cta .btn::after{ background:#000; }
.site-head:not(.solid) .nav-cta .btn:hover{ color:var(--white); }
.burger{ display:none; flex-direction:column; gap:6px; width:28px; cursor:pointer; background:none; border:0; }
.burger span{ display:block; height:1.5px; background:var(--text-strong); transition:.4s var(--ease); }
.site-head.solid .burger span{ background:var(--copper-deep); }
.nav-cta .btn{ display:inline-flex; }
.site-head.menu-open .nav-cta .btn{ display:none; }
@media (max-width:1040px){ .nav-cta .btn{ display:none; } }

/* ---- cross-icon trigger + grouping ---- */
.head-left{ display:flex; align-items:center; gap:clamp(14px,2.2vw,26px); }
.menu-trigger{ display:inline-flex; align-items:center; justify-content:center; background:none; border:0; cursor:pointer; padding:4px; color:var(--text-strong); transition:color .5s var(--ease); }
.bars{ display:inline-flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:6px; width:20px; transition:transform .45s var(--ease); }
.menu-trigger.is-open .bars{ transform:scale(.74); }
.bars span{ display:block; height:2px; width:100%; background:currentColor; transition:width .4s var(--ease), transform .45s var(--ease), opacity .45s var(--ease); transform-origin:center; }
.bars span:nth-child(2){ width:62%; }
.bars span:nth-child(3){ margin-top:2px; }
.menu-trigger:not(.is-open):hover .bars span:nth-child(2){ width:100%; }
.menu-trigger.is-open .bars span{ width:100%; }
.menu-trigger.is-open .bars span:nth-child(1){ transform:translateY(9px) rotate(45deg); }
.menu-trigger.is-open .bars span:nth-child(2){ opacity:0; transform:scaleX(0); }
.menu-trigger.is-open .bars span:nth-child(3){ transform:translateY(-9px) rotate(-45deg); }
.site-head.menu-open{ background:transparent !important; box-shadow:none !important; backdrop-filter:none !important; }
.site-head.menu-open .brand{ opacity:0; pointer-events:none; transition:opacity .4s var(--ease); }

/* ---- subtle scrim (lower page) ---- */
.menu-scrim{ position:fixed; inset:0; z-index:880; background:rgba(28,23,17,.16); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); opacity:0; pointer-events:none; transition:opacity 1.2s var(--ease); }
.menu-scrim.open{ opacity:1; pointer-events:auto; }

/* ---- white frosted drawer (from top, half height) ---- */
.mobile-menu{ position:fixed; top:0; left:0; right:0; width:100%; height:auto; max-height:92vh; z-index:890; background:rgba(255,255,255,.44); backdrop-filter:blur(20px) saturate(1.2); -webkit-backdrop-filter:blur(20px) saturate(1.2); color:var(--text-strong); display:flex; flex-direction:column; overflow-x:hidden; overflow-y:auto; padding:clamp(88px,11vh,112px) var(--pad) clamp(30px,4.5vh,46px); transform:translateY(-101%); transition:transform 1s cubic-bezier(.4,0,.2,1); }
.mobile-menu.open{ transform:translateY(0); border-bottom:1px solid var(--line); box-shadow:0 40px 90px rgba(38,34,27,.13); transition:transform 2.6s cubic-bezier(.16,1,.18,1); }
.menu-inner{ display:flex; flex-direction:column; height:100%; max-width:var(--maxw); width:100%; margin:0 auto; }
.menu-head{ display:flex; align-items:center; justify-content:space-between; }
.menu-eyebrow{ font-family:var(--sans); font-size:11px; letter-spacing:.3em; text-transform:uppercase; color:var(--copper); }
.menu-close{ display:inline-flex; align-items:center; gap:9px; background:none; border:0; color:var(--muted); cursor:pointer; font-family:var(--sans); font-size:11px; letter-spacing:.2em; text-transform:uppercase; transition:color .4s var(--ease); }
.menu-close i{ font-style:normal; font-size:14px; }
.menu-close:hover{ color:var(--text-strong); }
.menu-body{ flex:1; display:flex; align-items:flex-end; justify-content:space-between; gap:48px; }
.menu-nav{ display:flex; flex-direction:column; gap:clamp(2px,.4vw,6px); }
.menu-nav a{ position:relative; width:max-content; font-family:var(--serif); font-size:clamp(11px,.95vw,14px); text-transform:uppercase; letter-spacing:.04em; color:var(--text-strong); padding:3px 0; transition:color .4s var(--ease), padding-left .45s var(--ease); }
.menu-nav a .idx{ font-family:var(--sans); font-size:10px; letter-spacing:0; color:var(--copper); vertical-align:super; margin-right:12px; }
.menu-nav a::after{ content:''; position:absolute; left:0; bottom:0; height:1px; width:100%; background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform .5s var(--ease); }
.menu-nav a:hover{ color:var(--text-strong); }
.menu-nav a:hover::after{ transform:scaleX(1); }
.menu-nav a.active{ color:var(--copper); }
.menu-foot{ display:flex; flex-direction:row; flex-wrap:wrap; gap:14px; align-items:center; justify-content:flex-end; text-align:right; }
.menu-foot .msep{ color:var(--line); font-size:14px; }
.menu-foot .mlbl{ font-size:11px; letter-spacing:.28em; text-transform:uppercase; color:var(--copper); margin-bottom:4px; }
.menu-foot > a{ color:var(--text-strong); font-size:15px; letter-spacing:.02em; transition:color .4s var(--ease); width:max-content; white-space:nowrap; }
.menu-foot > a:hover{ color:var(--copper); }
.menu-social{ display:flex; gap:16px; margin-top:12px; }
.menu-social a{ display:inline-flex; color:var(--muted); transition:color .4s var(--ease); }
.menu-social a svg{ width:21px; height:21px; }
.menu-social a:hover{ color:var(--copper); }
@media (max-width:760px){
  .mobile-menu{ height:auto; max-height:90vh; padding-top:clamp(84px,11vh,104px); }
  .menu-body{ flex-direction:column; align-items:flex-start; gap:26px; }
  .menu-foot{ justify-content:flex-start; text-align:left; }
}

/* ----------------------------------------------------------
   Reveal animations
   ---------------------------------------------------------- */
.reveal{ opacity:0; transform:translateY(34px); transition:opacity 1s var(--ease), transform 1s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.1s; } .reveal.d2{ transition-delay:.2s; }
.reveal.d3{ transition-delay:.3s; } .reveal.d4{ transition-delay:.4s; }
@media print{ .reveal, .line-mask > span, .pf-media img.img-lux{ opacity:1 !important; transform:none !important; } }
/* Portfolio grid: luxury image bloom — slow fade in while settling from a gentle zoom */
.pf-media img.img-lux{ opacity:0; transform:scale(1.14); transition:opacity 1.9s var(--ease), transform 2.4s var(--ease); will-change:opacity,transform; }
.pf-media img.img-lux.in{ opacity:1; transform:scale(1); }
/* Slow fade-in for case-study imagery (opacity only — no movement, no jerk) */
.img-fade{ opacity:0; transition:opacity 2.8s ease-out .15s; will-change:opacity; }
.img-fade.in{ opacity:1; }
/* Case-study hero: slow bloom — fades in while settling from a gentle zoom */
[data-page="case"] .cs-hero{ overflow:hidden; }
.cs-hero img.img-fade{ transform:scale(1.08); transition:opacity 2.4s ease-out .1s, transform 3s var(--ease) .1s; will-change:opacity,transform; }
.cs-hero img.img-fade.in{ opacity:1; transform:scale(1); }
@media print{ .cs-hero img.img-fade{ transform:none !important; } }
@media print{ .img-fade{ opacity:1 !important; } }
.line-mask{ overflow:hidden; display:block; }
.line-mask > span{ display:block; transform:translateY(110%); transition:transform 1.1s var(--ease); }
.line-mask.in > span{ transform:none; }

/* Hero title — word-by-word blur-rise reveal (matches reference smoothness) */
.hero-title .line-mask{ display:inline-block; vertical-align:bottom; }
.hero-title .line-mask > span{ display:inline-block; transform:translateY(42%); opacity:0; filter:blur(10px); transition:transform 1.4s cubic-bezier(.19,1,.22,1), opacity 1.4s cubic-bezier(.19,1,.22,1), filter 1.4s cubic-bezier(.19,1,.22,1); }
.hero-title .line-mask:nth-child(1) > span{ transition-delay:.05s; }
.hero-title .line-mask:nth-child(2) > span{ transition-delay:.18s; }
.hero-title .line-mask:nth-child(3) > span{ transition-delay:.31s; }
.hero-title .line-mask:nth-child(4) > span{ transition-delay:.44s; }
.hero-title .line-mask.in > span{ transform:none; opacity:1; filter:none; }

/* ============================================================
   TOP LOADER — real load-tracked progress bar
   ============================================================ */
.top-loader{ position:fixed; top:0; left:0; right:0; height:3px; z-index:1000; background:transparent; pointer-events:none; }
.top-loader i{ display:block; height:100%; width:100%; transform:scaleX(0); transform-origin:left; background:var(--copper); transition:transform .2s linear, opacity .5s ease .2s; box-shadow:0 0 10px rgba(216,132,48,.5); }
.top-loader.done i{ opacity:0; }

/* ----------------------------------------------------------
   Footer (light & clean)
   ---------------------------------------------------------- */
.site-foot{ background:var(--white); color:var(--text); padding:clamp(74px,9vw,124px) 0 40px; border-top:1px solid var(--line-soft); text-align:center; }
.foot-inner{ display:flex; flex-direction:column; align-items:center; }

/* conversation CTA */
.foot-cta{ width:100%; max-width:820px; display:flex; flex-direction:column; align-items:center; }
.foot-cta .eyebrow{ margin-bottom:24px; color:var(--copper-deep); }
.foot-cta-title{ font-size:clamp(32px,5vw,64px); line-height:1.12; letter-spacing:.03em; margin-bottom:28px; }
.foot-cta-sub{ font-size:clamp(15px,1.2vw,17px); color:var(--muted); font-weight:300; line-height:1.78; max-width:52ch; margin:0 auto 40px; }

/* divider */
.foot-rule{ width:100%; height:1px; background:transparent; margin:clamp(56px,7vw,92px) 0 clamp(42px,5vw,62px); }

/* brand wordmark */
.foot-brand{ display:inline-flex; margin-bottom:34px; transition:opacity .4s var(--ease); }
.foot-brand img{ height:clamp(46px,5vw,60px); width:auto; }
.foot-brand:hover{ opacity:.78; }

/* nav row (cities equivalent) */
.foot-nav{ display:flex; flex-wrap:wrap; justify-content:center; gap:14px 40px; margin-bottom:28px; }
.foot-nav a{ font-family:var(--sans); font-weight:400; font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:var(--text-strong); position:relative; padding-bottom:5px; transition:color .4s var(--ease); }
.foot-nav a::after{ content:''; position:absolute; left:0; bottom:0; width:100%; height:1px; background:var(--copper); transform:scaleX(0); transform-origin:left; transition:transform .45s var(--ease); }
.foot-nav a:hover{ color:var(--copper); }
.foot-nav a:hover::after{ transform:scaleX(1); }

/* social */
.foot-social{ display:flex; gap:18px; align-items:center; justify-content:center; margin-bottom:46px; }
.foot-social a{ display:inline-flex; color:var(--muted); transition:color .4s var(--ease); }
.foot-social a svg{ width:19px; height:19px; }
.foot-social a:hover{ color:var(--copper); }

/* base */
.foot-base{ width:100%; padding-top:30px; display:flex; flex-direction:column; align-items:center; gap:14px; }
.foot-parent{ font-size:13px; letter-spacing:.02em; color:var(--muted); line-height:1.6; }
.foot-parent a{ color:var(--copper); border-bottom:1px solid rgba(216,132,48,.4); padding-bottom:1px; transition:color .4s var(--ease), border-color .4s var(--ease); }
.foot-parent a:hover{ color:var(--text-strong); border-color:var(--copper); }
.foot-bottom{ display:flex; align-items:center; justify-content:center; gap:8px 26px; flex-wrap:wrap; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
@media (max-width:600px){ .foot-nav{ gap:12px 22px; } .foot-bottom{ flex-direction:column; gap:12px; } }

/* ----------------------------------------------------------
   Marquee
   ---------------------------------------------------------- */
.marquee{ overflow:hidden; width:100%; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.marquee-track{ display:flex; gap:0; width:max-content; will-change:transform; backface-visibility:hidden; transform:translateZ(0); }
.marquee-track .cell{ display:flex; align-items:center; justify-content:center; min-width:200px; height:110px; padding:0 84px; border-right:none; white-space:nowrap; opacity:1; transition:opacity .4s var(--ease); }
.marquee-track .cell img{ height:44px; width:auto; max-width:170px; object-fit:contain; }
.marquee-track .cell img[src$="clients/26.png"]{ height:70px; max-width:100px; }
.marquee-track .cell img[src$="clients/9.png"]{ height:64px; max-width:220px; }
/* Tall / square marks: cap width so they don't dominate */
.marquee-track .cell img[src$="clients/30.png"]{ height:60px; }
.marquee-track .cell img[src$="clients/7.png"]{ height:32px; }
.marquee-track .cell:hover{ opacity:1; }
/* Mobile: narrower cells so at least 2 logos are visible at once */
@media (max-width:560px){
  .marquee{ -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent); mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent); }
  .marquee-track .cell{ min-width:0; height:84px; padding:0 22px; }
  .marquee-track .cell img{ height:34px; max-width:112px; }
  .marquee-track .cell img[src$="clients/26.png"]{ height:52px; max-width:72px; }
  .marquee-track .cell img[src$="clients/9.png"]{ height:48px; max-width:140px; }
  .marquee-track .cell img[src$="clients/30.png"]{ height:46px; }
  .marquee-track .cell img[src$="clients/7.png"]{ height:26px; }
}
@keyframes marq{ from{ transform:translate3d(0,0,0); } to{ transform:translate3d(-50%,0,0); } }

/* ----------------------------------------------------------
   Portfolio cards
   ---------------------------------------------------------- */
.pf-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
@media (max-width:980px){ .pf-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:620px){ .pf-grid{ grid-template-columns:1fr; } }
.pf-card{ display:block; }
.pf-media{ position:relative; overflow:hidden; aspect-ratio:4/5; background:var(--paper-2); }
.pf-media img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease); }
.pf-media.fit img{ object-fit:contain; }
.pf-media.fit{ background:#d6c9b4; }
.pf-card:hover .pf-media img{ transform:scale(1.06); }
.pf-media::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg,transparent 50%,rgba(33,29,23,.55)); opacity:0; transition:opacity .6s var(--ease); }
.pf-card:hover .pf-media::after{ opacity:1; }
.pf-tag{ position:absolute; left:18px; top:18px; z-index:2; font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:#fff; opacity:0; transform:translateY(-6px); transition:.5s var(--ease); }
.pf-card:hover .pf-tag{ opacity:1; transform:none; }
.pf-meta{ display:flex; align-items:baseline; justify-content:space-between; margin-top:16px; gap:12px; }
.pf-meta h3{ font-family:var(--serif); font-size:21px; letter-spacing:.01em; font-weight:500; color:var(--copper-deep); }
.pf-meta .yr{ font-size:12px; letter-spacing:.14em; color:var(--muted); }

/* Home mosaic — 2 stacked left, 1 tall right */
.pf-mosaic{ display:grid; grid-template-columns:1fr 1.02fr; gap:18px; }
.pf-mosaic .a{ grid-column:1; grid-row:1; }
.pf-mosaic .b{ grid-column:1; grid-row:2; }
.pf-mosaic .c{ grid-column:2; grid-row:1 / span 2; display:flex; }
.pf-mosaic .pf-media{ aspect-ratio:auto; height:100%; width:100%; }
.pf-mosaic .a .pf-media, .pf-mosaic .b .pf-media{ aspect-ratio:16/10.5; }
.pf-mosaic .pf-media::before{ content:''; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg,transparent 55%,rgba(33,29,23,.55)); pointer-events:none; }
.pf-label{ position:absolute; left:24px; bottom:20px; z-index:3; color:#fff; font-family:var(--serif); font-weight:500; letter-spacing:.04em; font-size:clamp(17px,1.5vw,23px); text-shadow:0 1px 14px rgba(0,0,0,.45); }
@media (max-width:620px){
  .pf-mosaic{ grid-template-columns:1fr; }
  .pf-mosaic .a, .pf-mosaic .b, .pf-mosaic .c{ grid-column:1; grid-row:auto; display:block; }
  .pf-mosaic .pf-media{ height:auto; aspect-ratio:16/10.5 !important; }
}

/* utility */
.divider{ height:1px; background:var(--line); width:100%; }
.pill{ display:inline-block; font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--copper-deep); border:1px solid var(--copper); border-radius:100px; padding:7px 15px; white-space:nowrap; }
.center{ text-align:center; }
.spacer-xl{ height:clamp(80px,11vw,150px); } .spacer-lg{ height:clamp(60px,8vw,110px); } .spacer-md{ height:clamp(40px,5vw,70px); }

/* ============================================================
   HERO  (no dark veil — clean)
   ============================================================ */
.hero{ position:relative; height:100svh; min-height:600px; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; overflow:hidden; color:var(--text-strong); }
.hero-video-wrap{ position:absolute; inset:0; z-index:0; }
.hero-video-wrap video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero-veil{ display:none; }
.hero-inner{ position:relative; z-index:2; width:100%; }
.hero-eyebrow{ font-size:11px; letter-spacing:.36em; text-transform:uppercase; color:var(--text-strong); margin-bottom:22px; font-weight:400; }
.hero .hero-title{ font-size:clamp(22px,2.6vw,34px); line-height:1.32; letter-spacing:.08em; color:var(--text-strong); text-shadow:0 1px 22px rgba(255,255,255,.55); }
.hero-title .it{ color:inherit; opacity:1; }
.hero-sub{ font-family:var(--serif-soft); font-style:italic; font-size:clamp(18px,1.9vw,26px); margin-top:26px; max-width:36ch; color:var(--text-strong); letter-spacing:.01em; text-shadow:0 1px 22px rgba(255,255,255,.5); }
.hero-sub .it{ font-style:italic; opacity:.92; }
.hero-foot{ position:absolute; bottom:0; left:0; right:0; z-index:2; display:flex; align-items:flex-end; justify-content:flex-end; padding-bottom:clamp(24px,4vh,42px); }
.hero-scroll{ display:inline-flex; align-items:center; gap:15px; font-size:10px; letter-spacing:.28em; text-transform:uppercase; color:var(--text-strong); }
.hero-scroll-line{ width:56px; height:1px; background:rgba(38,34,27,.4); position:relative; overflow:hidden; }
.hero-scroll-line::after{ content:''; position:absolute; left:0; top:0; height:100%; width:30%; background:var(--text-strong); animation:scrollline 2.4s var(--ease) infinite; }
.hero-foot .link-underline{ color:var(--text-strong); }
@keyframes scrollline{ 0%{ transform:translateX(-100%); } 60%,100%{ transform:translateX(330%); } }

/* ============================================================
   PHILOSOPHY
   ============================================================ */
.philosophy{ padding:clamp(90px,13vw,160px) 0 clamp(70px,9vw,120px); }
.phil-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,7vw,100px); align-items:start; }
.phil-left h2{ margin-top:26px; }
/* centered screenshot-style studio block */
.phil-centered{ text-align:center; }
.phil-centered .eyebrow{ margin-bottom:30px; }
h2.display.phil-headline{ font-size:clamp(19px,2vw,25px); letter-spacing:.08em; line-height:1.5; text-wrap:balance; }
.phil-headline .sep{ display:inline-block; margin:0 .5em; color:var(--copper); font-weight:300; }
@media (min-width:760px){ .phil-headline{ white-space:nowrap; text-wrap:nowrap; } }
.phil-sub{ font-family:var(--serif); text-transform:uppercase; letter-spacing:.2em; font-size:clamp(13px,1.3vw,18px); line-height:1.9; margin-top:30px; color:var(--text-strong); }
.phil-centered .phil-stats{ justify-content:center; gap:clamp(40px,6vw,80px); margin-top:clamp(48px,6vw,72px); }
.phil-stats{ display:flex; gap:44px; margin-top:46px; flex-wrap:wrap; }
.phil-stats .num{ font-family:var(--serif); font-size:clamp(34px,3.4vw,48px); display:block; line-height:1; color:var(--copper-deep); }
.phil-stats .num .it{ font-style:italic; color:var(--copper); }
.phil-stats .lbl{ font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin-top:12px; display:block; }
.services-pair{ display:grid; grid-template-columns:1fr 1fr; gap:28px; margin-top:clamp(56px,8vw,100px); }
.svc-card{ padding:clamp(32px,4vw,50px); border:1px solid var(--line); display:flex; flex-direction:column; gap:16px; transition:background .5s var(--ease), border-color .5s var(--ease); }
.svc-card:hover{ background:var(--copper-rich); border-color:var(--copper-rich); }
.svc-card:hover .muted{ color:rgba(255,255,255,.82); }
.svc-card:hover h3, .svc-card:hover .svc-index{ color:#fff; }
.svc-card .svc-index{ font-family:var(--serif); font-size:14px; color:var(--copper-deep); letter-spacing:.16em; }
.svc-card h3{ font-size:clamp(28px,3.4vw,46px); color:var(--copper-deep); }
.svc-card .link-underline{ margin-top:auto; }
.svc-card:hover .link-underline{ color:#fff; }
@media (max-width:820px){ .phil-grid,.services-pair{ grid-template-columns:1fr; } }

/* ============================================================
   CLIENTS BAND / WORK / STATEMENT
   ============================================================ */
.clients-band{ padding:clamp(70px,9vw,120px) 0; background:var(--paper); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.clients-band h2{ margin-top:16px; }
.work-band{ padding:clamp(90px,12vw,150px) 0 clamp(40px,5vw,64px); }
.work-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:30px; }
.work-head h2{ margin-top:16px; }
@media (max-width:760px){ .work-head{ flex-direction:column; align-items:flex-start; } }
.statement{ padding:clamp(90px,13vw,170px) 0; background:var(--paper); }
.statement h2{ max-width:20ch; margin:0 auto; }

/* ============================================================
   ENQUIRIES — the one bold copper band
   ============================================================ */
.enquiries{ background:var(--copper-rich); color:#fff; padding:clamp(90px,13vw,160px) 0; }
.enquiries .display{ color:#fff; margin-top:16px; }
.enquiries .display .it{ color:#fff; opacity:.85; }
.enquiries .eyebrow{ color:#fff; }
.enquiries .eyebrow::before{ background:rgba(255,255,255,.7); }
.enq-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,7vw,90px); align-items:center; }
.enq-actions{ display:flex; align-items:center; gap:34px; margin-top:40px; flex-wrap:wrap; }
.enq-phone{ color:#fff; }
@media (max-width:820px){ .enq-grid{ grid-template-columns:1fr; } }

/* ============================================================
   INNER PAGE HERO  (white, header forced solid)
   ============================================================ */
.page-hero{ padding:clamp(150px,18vh,210px) 0 clamp(50px,7vw,86px); }
.page-hero.tight{ padding-bottom:clamp(34px,5vw,56px); }
.page-hero .eyebrow{ margin-bottom:24px; }
.page-hero h1{ max-width:17ch; }
.page-hero .lead{ margin-top:28px; }
.page-hero-grid{ display:grid; grid-template-columns:1.5fr 1fr; gap:56px; align-items:end; }
.page-hero-grid>.lead{ text-align:justify; text-justify:inter-word; }
@media (max-width:820px){ .page-hero-grid{ grid-template-columns:1fr; gap:28px; } }
.crumb{ display:flex; gap:10px; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin-bottom:26px; }
.crumb a:hover{ color:var(--copper-deep); }

.prose-grid{ display:grid; grid-template-columns:1fr 1.3fr; gap:clamp(40px,7vw,100px); }
.prose-grid p+p{ margin-top:20px; }
@media (max-width:820px){ .prose-grid{ grid-template-columns:1fr; gap:22px; } }
.prose-stack{ display:block; }
.prose-stack .sticky-label{ position:static; margin-bottom:20px; }
.prose-stack p+p{ margin-top:20px; }
.sticky-label{ position:sticky; top:130px; }

/* ============================================================
   ABOUT
   ============================================================ */
.about-figure{ aspect-ratio:16/10; overflow:hidden; }
.about-figure img{ width:100%; height:100%; object-fit:cover; }
.values{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.value{ background:var(--white); padding:clamp(32px,4vw,50px); display:flex; flex-direction:column; gap:14px; min-height:280px; transition:background .5s var(--ease); }
.value:hover{ background:var(--paper); }
.value .vnum{ font-family:var(--serif); color:var(--copper); font-size:14px; letter-spacing:.16em; }
.value h3{ font-family:var(--serif); font-size:clamp(23px,2.4vw,30px); letter-spacing:.01em; color:var(--copper-deep); }
[data-page="about"] .value h3{ text-transform:uppercase; letter-spacing:.08em; font-size:clamp(20px,2vw,26px); }
[data-page="about"] .prose-grid p{ text-align:justify; text-justify:inter-word; }
[data-page="about"] .page-hero .lead{ text-align:justify; text-justify:inter-word; }

.value p{ color:var(--muted); font-size:15px; margin-top:auto; }
@media (max-width:760px){ .values{ grid-template-columns:1fr; } }
.team-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.team-card .tphoto{ aspect-ratio:3/4; overflow:hidden; background:var(--paper-2); }
.team-card .tphoto img{ width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease); filter:grayscale(.2); }
.team-card:hover .tphoto img{ transform:scale(1.05); filter:none; }
.team-card h4{ font-family:var(--serif); font-size:19px; letter-spacing:.02em; margin-top:15px; color:var(--copper-deep); }
.team-card span{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
@media (max-width:880px){ .team-grid{ grid-template-columns:repeat(2,1fr); } }

/* ============================================================
   SERVICES
   ============================================================ */
.svc-list{ border-top:1px solid var(--line); }
.svc-row{ display:grid; grid-template-columns:110px 1fr 1.1fr auto; gap:38px; align-items:start; padding:clamp(34px,4.5vw,58px) 0; border-bottom:1px solid var(--line); position:relative; transition:padding-left .5s var(--ease); }
.svc-row:hover{ padding-left:0; }

.svc-row .snum{ font-family:var(--serif); font-size:17px; color:var(--copper); letter-spacing:.08em; }
.svc-row h3{ font-family:var(--serif); font-weight:400; font-size:clamp(26px,3.2vw,42px); letter-spacing:.01em; line-height:1.08; color:var(--copper-deep); }
.svc-row .sdesc{ color:var(--muted); font-size:15px; margin-bottom:10px; }
.svc-row .sdesc.lead-line{ color:var(--text-strong); font-size:17px; line-height:1.5; margin-bottom:12px; }
.svc-row .inc-label{ font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin:20px 0 12px; }
.svc-tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.svc-row .arrow-lg{ font-size:22px; color:var(--copper); transition:transform .5s var(--ease); }
.svc-row:hover .arrow-lg{ transform:translate(6px,-6px); }
@media (max-width:900px){ .svc-row{ grid-template-columns:1fr; gap:12px; } .svc-row .arrow-lg{ display:none; } }
.process-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(40px,5.5vw,88px); }
.process-step .pstep{ font-family:var(--serif); font-size:clamp(44px,5vw,64px); color:var(--paper-2); line-height:1; }
.process-step h4{ font-family:var(--serif); font-size:21px; letter-spacing:.04em; margin:12px 0 9px; color:var(--copper-deep); text-transform:uppercase; }
.process-step p{ color:var(--muted); font-size:15px; }
@media (max-width:880px){ .process-grid{ grid-template-columns:1fr 1fr; gap:48px 40px; } }

/* ============================================================
   CONTACT
   ============================================================ */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,7vw,86px); align-items:start; }
@media (max-width:880px){ .contact-grid{ grid-template-columns:1fr; gap:38px; } }
.field{ display:flex; flex-direction:column; gap:9px; margin-bottom:28px; }
.field label{ font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); }
.field input, .field textarea, .field select{ font-family:var(--sans); font-size:16px; font-weight:300; color:var(--text-strong); background:transparent; border:0; border-bottom:1px solid var(--line); padding:10px 0; outline:none; transition:border-color .4s var(--ease); cursor:text; }
.field input:focus, .field textarea:focus, .field select:focus{ border-color:var(--copper); }
.field select{ accent-color:var(--copper); cursor:pointer; }
.field select option{ color:var(--text-strong); background:var(--white); }
.field select option:checked,
.field select option:hover,
.field select option:focus{ background:var(--copper) !important; color:var(--white) !important; }
.field textarea{ resize:vertical; min-height:88px; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:28px; }
@media (max-width:520px){ .field-row{ grid-template-columns:1fr; } }
.contact-aside{ background:var(--copper-rich); color:#fff; padding:clamp(38px,5vw,60px); }
.contact-aside .eyebrow{ color:#fff; }
.contact-aside .eyebrow::before{ background:rgba(255,255,255,.7); }
.contact-aside h3{ color:#fff; }
.cdetail{ margin-top:34px; }
.cdetail .clbl{ font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:rgba(255,255,255,.75); margin-bottom:9px; }
.cdetail a, .cdetail p{ color:#fff; font-size:17px; }
.cdetail a:hover{ opacity:.8; }
.form-note{ font-size:13px; color:var(--muted); margin-top:16px; }
.form-ok{ display:none; padding:16px 20px; border:1px solid var(--copper); color:var(--copper-deep); margin-bottom:22px; font-size:14px; letter-spacing:.03em; background:var(--paper); }
.form-ok.show{ display:block; }

/* ============================================================
   BLOG / JOURNAL
   ============================================================ */
.blog-feature{ display:grid; grid-template-columns:1.3fr 1fr; gap:clamp(30px,5vw,60px); align-items:center; padding-bottom:clamp(50px,7vw,86px); border-bottom:1px solid var(--line); }
.blog-feature .bf-media{ aspect-ratio:4/3; overflow:hidden; }
.blog-feature .bf-media img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease); }
.blog-feature:hover .bf-media img{ transform:scale(1.05); }
.blog-meta{ display:flex; gap:16px; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin-bottom:16px; }
.blog-meta .cat{ color:var(--copper-deep); }
.blog-feature h2{ font-family:var(--serif-soft); font-size:clamp(28px,3.4vw,46px); text-transform:none; letter-spacing:.005em; line-height:1.2; }
@media (max-width:820px){ .blog-feature{ grid-template-columns:1fr; } }
.blog-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(30px,3vw,44px) 28px; }
.post .pmedia{ aspect-ratio:3/2; overflow:hidden; background:var(--paper-2); margin-bottom:18px; }
.post .pmedia img{ width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease); }
.post:hover .pmedia img{ transform:scale(1.05); }
.post h3{ font-family:var(--serif-soft); font-size:25px; font-weight:500; line-height:1.22; margin-bottom:11px; letter-spacing:.005em; color:var(--copper-deep); }
.post p{ color:var(--muted); font-size:15px; }
@media (max-width:900px){ .blog-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .blog-grid{ grid-template-columns:1fr; } }

/* ============================================================
   CLIENTS PAGE
   ============================================================ */
.logo-wall{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; background:transparent; }
.logo-cell{ position:relative; background:transparent; aspect-ratio:3/2; display:flex; align-items:center; justify-content:center; padding:34px; opacity:1; }
.logo-cell::before{ content:''; position:absolute; top:14%; bottom:14%; left:0; width:1px; background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--line) 70%,transparent) 22%,color-mix(in srgb,var(--line) 70%,transparent) 78%,transparent); filter:blur(.4px); }
.logo-cell::after{ content:''; position:absolute; left:14%; right:14%; top:0; height:1px; background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--line) 70%,transparent) 22%,color-mix(in srgb,var(--line) 70%,transparent) 78%,transparent); filter:blur(.4px); }
.logo-cell:nth-child(4n+1)::before{ display:none; }
.logo-cell:nth-child(-n+4)::after{ display:none; }
.logo-cell img{ max-width:72%; max-height:48px; width:auto; height:auto; object-fit:contain; }
@media (max-width:880px){ .logo-wall{ grid-template-columns:repeat(2,1fr); }
  .logo-cell:nth-child(4n+1)::before{ display:block; }
  .logo-cell:nth-child(2n+1)::before{ display:none; }
  .logo-cell:nth-child(-n+4)::after{ display:block; }
  .logo-cell:nth-child(-n+2)::after{ display:none; }
}
.testi{ display:grid; grid-template-columns:repeat(2,1fr); gap:28px; }
.testi-card{ border:1px solid var(--line); padding:clamp(32px,4vw,50px); display:flex; flex-direction:column; gap:22px; }
.testi-card .quote{ font-family:var(--serif-soft); font-size:clamp(22px,2.4vw,30px); line-height:1.38; font-style:italic; font-weight:500; color:var(--copper-deep); }
.testi-card .who{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-top:auto; }
.testi-card .who b{ color:var(--text-strong); font-weight:500; }
@media (max-width:760px){ .testi{ grid-template-columns:1fr; } }

.section-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:30px; margin-bottom:clamp(40px,5vw,60px); }
.section-head h2{ margin-top:14px; }
@media (max-width:700px){ .section-head{ flex-direction:column; align-items:flex-start; } }

/* ============================================================
   PARENT-COMPANY PROMO BAND
   ============================================================ */
.parent-band{ padding:clamp(70px,9vw,120px) 0; }
.parent-band .wrap{ border-top:1px solid var(--line); }
.parent-inner{ position:relative; padding:clamp(44px,5.5vw,80px) 0 0; display:grid; grid-template-columns:minmax(0,1.55fr) minmax(280px,1fr); gap:clamp(36px,6vw,96px); align-items:start; }
.parent-lead{ position:relative; min-width:0; }
.parent-eyebrow{ display:inline-flex; align-items:center; gap:9px; font-size:11px; letter-spacing:.26em; text-transform:uppercase; color:var(--copper-deep); margin-bottom:22px; }
.parent-eyebrow svg{ width:14px; height:14px; fill:var(--copper); }
.parent-inner h2{ position:relative; font-family:var(--serif); font-weight:400; text-transform:uppercase; letter-spacing:.04em; font-size:clamp(22px,2.6vw,36px); color:var(--copper-deep); line-height:1.12; }
.parent-inner h2 .it{ font-family:var(--serif-soft); font-style:italic; text-transform:none; color:var(--copper); }
.parent-inner p{ position:relative; color:var(--text); font-size:clamp(15px,1.4vw,18px); line-height:1.7; margin-top:20px; max-width:48ch; text-align:justify; }
.parent-inner p strong{ color:var(--copper-deep); font-weight:500; }
.parent-actions{ position:relative; display:flex; flex-direction:column; gap:22px; align-items:flex-start; padding-left:clamp(36px,5vw,72px); border-left:1px solid var(--line); }
.parent-meta{ font-size:10px; letter-spacing:.28em; text-transform:uppercase; color:var(--muted); }
.parent-tags{ display:flex; flex-wrap:wrap; gap:8px; }
@media (max-width:820px){
  .parent-inner{ grid-template-columns:1fr; gap:36px; padding-top:clamp(36px,8vw,52px); }
  .parent-lead, .parent-inner > div{ min-width:0; }
  .parent-actions{ border-left:0; padding-left:0; padding-top:32px; border-top:1px solid var(--line); align-items:flex-start; }
  .parent-actions .btn{ white-space:normal; text-align:center; line-height:1.45; }
}

/* solid button — unified to the same effect as every other button */
.btn.solid{ background:transparent; color:var(--text-strong); border-color:var(--text-strong); }
.btn.solid::after{ background:#000; }
.btn.solid:hover{ color:var(--white); }

/* ============================================================
   SERVICE DETAIL PAGES
   ============================================================ */
.svc-hero{ padding:clamp(140px,17vh,196px) 0 clamp(50px,7vw,84px); border-bottom:1px solid var(--line); }
.svc-hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(40px,6vw,84px); align-items:center; }
.svc-hero .crumb{ display:flex; gap:12px; align-items:center; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); margin-bottom:26px; }
.svc-hero .crumb a{ color:var(--copper-deep); }
.svc-hero .crumb a:hover{ color:var(--copper); }
.svc-icon{ width:50px; height:50px; color:var(--copper-deep); margin-bottom:26px; }
.svc-icon svg{ width:100%; height:100%; }
.svc-hero h1{ margin-bottom:22px; }
.svc-hero-img{ aspect-ratio:4/5; overflow:hidden; }
.svc-hero-img img{ width:100%; height:100%; object-fit:cover; transition:transform 1.4s var(--ease); }
.svc-hero-img:hover img{ transform:scale(1.05); }
@media (max-width:860px){ .svc-hero-grid{ grid-template-columns:1fr; gap:36px; } .svc-hero-img{ aspect-ratio:16/10; } }

.incl-sec{ padding:clamp(72px,9vw,120px) 0; }
.incl-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.incl-card{ background:var(--white); padding:clamp(28px,3.4vw,46px); display:flex; gap:22px; align-items:flex-start; transition:background .5s var(--ease); }
.incl-card:hover{ background:var(--paper); }
.incl-card .inum{ font-family:var(--serif); color:var(--copper); font-size:13px; letter-spacing:.1em; padding-top:5px; flex-shrink:0; }
.incl-card h3{ font-family:var(--serif); text-transform:uppercase; letter-spacing:.04em; font-size:clamp(16px,1.6vw,21px); color:var(--text-strong); margin-bottom:9px; line-height:1.2; }
.incl-card p{ color:var(--muted); font-size:14px; line-height:1.6; }
@media (max-width:680px){ .incl-grid{ grid-template-columns:1fr; } }

.svc-band{ height:clamp(260px,36vw,440px); overflow:hidden; }
.svc-band img{ width:100%; height:100%; object-fit:cover; }

.svc-nav{ display:flex; justify-content:space-between; gap:30px; border-top:1px solid var(--line); }
.svc-nav a{ padding:clamp(30px,4vw,52px) 0; display:flex; flex-direction:column; gap:9px; transition:transform .5s var(--ease); }
.svc-nav a.prev:hover{ transform:translateX(-8px); }
.svc-nav a.next{ text-align:right; align-items:flex-end; }
.svc-nav a.next:hover{ transform:translateX(8px); }
.svc-nav .np{ font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--muted); }
.svc-nav .nt{ font-family:var(--serif); font-size:clamp(19px,2.2vw,28px); text-transform:uppercase; letter-spacing:.03em; color:var(--copper-deep); }
@media (max-width:560px){ .svc-nav .nt{ font-size:16px; } }

/* service detail — overview + approach */
.svc-overview{ padding:clamp(66px,9vw,116px) 0; border-bottom:1px solid var(--line); }
.svc-overview .lead{ font-size:clamp(18px,1.9vw,25px); line-height:1.5; color:var(--text-strong); max-width:30ch; font-family:var(--serif-soft); }
.prose-stack .lead{ max-width:none; font-family:var(--sans); font-weight:300; font-size:clamp(16px,1.35vw,19px); line-height:1.6; }
.approach-sec{ padding:clamp(70px,9vw,120px) 0; }
.approach-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(28px,4vw,56px); }
.approach-step .astep{ font-family:var(--serif); font-size:clamp(40px,4.5vw,58px); color:var(--paper-2); line-height:1; display:block; }
.approach-step h4{ font-family:var(--serif); font-size:20px; text-transform:uppercase; letter-spacing:.03em; margin:12px 0 9px; color:var(--copper-deep); }
.approach-step p{ color:var(--muted); font-size:14.5px; line-height:1.62; }
@media (max-width:760px){ .approach-grid{ grid-template-columns:1fr; gap:30px; } }

/* ============================================================
   LEGAL PAGES
   ============================================================ */
.legal{ max-width:780px; }
.legal .updated{ color:var(--muted); font-size:13px; letter-spacing:.05em; text-transform:uppercase; margin-bottom:44px; }
.legal h2{ font-family:var(--serif); font-size:clamp(19px,2.1vw,26px); text-transform:uppercase; letter-spacing:.03em; color:var(--text-strong); margin:48px 0 16px; line-height:1.25; }
.legal h2:first-of-type{ margin-top:0; }
.legal p{ margin-bottom:16px; color:var(--text); }
.legal ul{ margin:0 0 18px 22px; color:var(--text); }
.legal li{ margin-bottom:9px; }
.legal a{ color:var(--text-strong); border-bottom:1px solid var(--line); transition:border-color .4s var(--ease); }
.legal a:hover{ border-color:var(--text-strong); }
.legal .lead{ margin-bottom:40px; }

.foot-legal{ display:flex; gap:22px; align-items:center; flex-wrap:wrap; justify-content:center; }
.foot-legal a{ color:var(--muted); transition:color .4s var(--ease); }
.foot-legal a:hover{ color:var(--copper); }

/* ============================================================
   COOKIE CONSENT
   ============================================================ */
.cookie-bar{ position:fixed; left:var(--pad); bottom:26px; max-width:430px; background:var(--white); border:1px solid var(--line); padding:26px 28px; z-index:950; box-shadow:0 20px 54px rgba(38,34,27,.16); opacity:1; transform:translateY(20px); transition:transform .6s var(--ease); }
.cookie-bar.show{ transform:none; }
.cookie-bar p{ font-size:13.5px; color:var(--text); line-height:1.65; margin-bottom:20px; }
.cookie-bar a{ color:var(--text-strong); border-bottom:1px solid var(--text-strong); }
.cookie-bar .cc-actions{ display:flex; gap:12px; }
.cookie-bar button{ font-family:var(--sans); font-weight:400; font-size:11px; letter-spacing:.2em; text-transform:uppercase; padding:13px 26px; cursor:pointer; border:1px solid var(--text-strong); background:transparent; transition:background .4s var(--ease), color .4s var(--ease); }
.cookie-bar .cc-accept{ background:var(--text-strong); color:var(--white); }
.cookie-bar .cc-accept:hover{ background:transparent; color:var(--text-strong); }
.cookie-bar .cc-reject{ color:var(--text-strong); }
.cookie-bar .cc-reject:hover{ background:var(--text-strong); color:var(--white); }
@media (max-width:540px){ .cookie-bar{ left:14px; right:14px; bottom:14px; max-width:none; padding:22px 22px; } }

/* ============================================================
   GLOBAL CITIES STRIP
   ============================================================ */
.cities{ padding:clamp(54px,7vw,86px) 0; border-top:1px solid var(--line); text-align:center; }
.cities .row{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:clamp(14px,2.4vw,34px); margin-top:24px; }
.cities .row span{ font-family:var(--serif); text-transform:uppercase; letter-spacing:.18em; font-size:clamp(13px,1.3vw,17px); color:var(--copper-deep); }
.cities .row i{ width:4px; height:4px; border-radius:50%; background:var(--copper); display:inline-block; opacity:.6; }

/* ============================================================
   RESPONSIVE REFINEMENTS  (tablet · phone · iOS)
   ============================================================ */

/* iOS dynamic-viewport fallback for the hero */
@supports (-webkit-touch-callout: none){
  .hero{ height:100svh; min-height:-webkit-fill-available; }
}

/* Tablet / iPad (portrait & down) */
@media (max-width:1024px){
  .site-head{ padding:18px clamp(20px,4vw,40px); }
  .enq-actions{ gap:24px; }
}

/* Large phone / small tablet */
@media (max-width:768px){
  .site-head{ padding:16px 20px; }
  .brand img{ height:32px; width:auto; }
  .site-head.solid .brand img{ height:28px; width:auto; }
  .brand .word{ font-size:13px; letter-spacing:.16em; }
  .hero-foot{ flex-direction:row; align-items:center; padding-inline:20px; }
  .menu-trigger .bars{ width:18px; }
  /* ensure tappable targets */
  .btn{ padding:15px 26px; }
  .link-underline{ padding-block:6px; }
  /* reveal portfolio tags on touch (no hover) */
  .pf-tag{ opacity:1; transform:none; }
}

/* Phones */
@media (max-width:560px){
  :root{ --pad:20px; }
  .brand img{ height:28px; width:auto; }
  .brand .word{ font-size:12px; letter-spacing:.12em; }
  .hero .hero-title{ font-size:clamp(20px,6.4vw,27px); letter-spacing:.06em; line-height:1.34; }
  .hero-sub{ font-size:17px; }
  .hero-eyebrow{ font-size:10px; letter-spacing:.3em; margin-bottom:16px; }
  .hero-foot .link-underline{ font-size:10px; }
  .enq-actions{ flex-direction:column; align-items:flex-start; gap:18px; }
  .parent-actions{ width:100%; }
  .parent-actions .btn{ width:100%; justify-content:center; }
  .foot-bottom{ font-size:10px; letter-spacing:.12em; }
  .svc-nav{ flex-direction:row; gap:16px; }
  .testi-card .quote{ font-size:19px; }
  .cs-next a{ flex-direction:column; align-items:stretch; gap:22px; }
  .cs-next .btn{ width:100%; justify-content:center; white-space:nowrap; }
}

/* Phones: kill justified rivers, keep meta rows and grids readable */
@media (max-width:640px){
  .page-hero-grid>.lead,
  [data-page="about"] .prose-grid p,
  [data-page="about"] .page-hero .lead,
  .parent-inner p,
  .cs-intro .lead,
  .cs-body p{ text-align:left; }
  .cs-meta{ flex-wrap:wrap; gap:22px 34px; }
  .process-grid{ gap:38px 28px; }
  .section-head{ margin-bottom:32px; }
  .foot-cta-title{ text-wrap:balance; }
  .pill{ font-size:10px; }
}

/* Very small phones */
@media (max-width:380px){
  .process-grid{ grid-template-columns:minmax(0,1fr); }
  .logo-wall{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .brand .word{ display:none; }            /* keep just the logo mark, avoid crowding */
  .hero .hero-title{ font-size:22px; }
  .menu-nav a{ font-size:14px; }
}

/* Landscape phones — keep hero usable when very short */
@media (max-height:520px) and (orientation:landscape){
  .hero{ min-height:480px; }
  .hero .hero-title{ font-size:clamp(18px,4vw,26px); }
  .hero-foot{ display:none; }
}