/* ============================================================
   RAJA SINGGHO — SITE STYLES
   Palette: warm gray + deep rust orange
   Type: Poppins (Medium for headings, Regular for body)
   ============================================================ */

:root{
  --bg:        #F4F2EE;
  --bg-alt:    #EAE7E0;
  --panel:     #FFFFFF;
  --ink:       #211F1C;
  --ink-soft:  #58554E;
  --ink-faint: #8A867C;
  --orange:    #EE4037;
  --orange-dk: #AB2E28;
  --orange-lt: #F5908B;
  --tint:      #FDE4E3;
  --line:      #DAD5CB;
  --line-dk:   #C7C1B4;

  --max: 1160px;
  --radius: 2px;
  --ease: cubic-bezier(.22,.68,0,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:'Poppins', Arial, sans-serif;
  font-weight:400;
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{
  font-family:'Poppins', Arial, sans-serif;
  font-weight:500;
  line-height:1.15;
  margin:0 0 .5em;
  letter-spacing:-.01em;
  color:var(--ink);
}

p{ margin:0 0 1em; color:var(--ink-soft); }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
ul{ margin:0; padding:0; list-style:none; }

.wrap{ max-width:var(--max); margin:0 auto; padding:0 32px; }

.eyebrow{
  font-size:12.5px;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--orange);
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:18px;
}
.eyebrow::before{
  content:"";
  width:22px; height:2px;
  background:var(--orange);
  display:inline-block;
}

/* ---------------- NAV ---------------- */
.site-nav{
  position:sticky; top:0; z-index:50;
  background:rgba(244,242,238,.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.nav-inner{
  max-width:var(--max); margin:0 auto; padding:0 32px;
  height:76px;
  display:flex; align-items:center; justify-content:space-between;
}
.brand{
  font-weight:500; font-size:19px; letter-spacing:.01em;
  display:flex; flex-direction:column; line-height:1.1;
}
.brand span{
  font-size:10px; font-weight:400; letter-spacing:.18em;
  color:var(--ink-faint); text-transform:uppercase; margin-top:3px;
}
.brand b{ color:var(--orange); font-weight:500; }

.nav-links{
  display:flex; align-items:center; gap:30px;
}
.nav-links a{
  font-size:14px; color:var(--ink-soft); font-weight:400;
  position:relative; padding:4px 0;
  transition:color .2s var(--ease);
}
.nav-links a:hover{ color:var(--ink); }
.nav-links a.current{ color:var(--ink); font-weight:500; }
.nav-links a.current::after{
  content:""; position:absolute; left:0; right:0; bottom:-4px;
  height:2px; background:var(--orange);
}

.btn{
  display:inline-flex; align-items:center; gap:8px;
  font-family:'Poppins',Arial,sans-serif;
  font-weight:500; font-size:14px;
  padding:12px 24px;
  border-radius:var(--radius);
  cursor:pointer; border:1px solid transparent;
  transition:transform .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
  white-space:nowrap;
}
.btn-primary{ background:var(--orange); color:#fff; }
.btn-primary:hover{ background:var(--orange-dk); transform:translateY(-1px); }
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--line-dk); }
.btn-ghost:hover{ border-color:var(--orange); color:var(--orange); }
.btn-dark{ background:var(--ink); color:#fff; }
.btn-dark:hover{ background:#000; transform:translateY(-1px); }
.btn-sm{ padding:10px 18px; font-size:13px; }

.nav-cta{ display:flex; align-items:center; gap:16px; }
.nav-toggle{ display:none; }

/* ---------------- HERO ---------------- */
.hero{
  padding:100px 0 90px;
  position:relative;
  overflow:hidden;
}
.hero::after{
  content:"";
  position:absolute; right:-120px; top:-160px;
  width:520px; height:520px; border-radius:50%;
  border:1px solid var(--line-dk);
  opacity:.5;
}
.hero::before{
  content:"";
  position:absolute; right:20px; top:60px;
  width:280px; height:280px; border-radius:50%;
  border:1px solid var(--orange-lt);
  opacity:.6;
}
.hero-inner{ max-width:820px; position:relative; z-index:2; }
.hero h1{
  font-size:clamp(34px,5vw,58px);
  margin-bottom:26px;
}
.hero h1 em{
  font-style:normal; color:var(--orange);
}
.hero .lede{
  font-size:18px; color:var(--ink-soft); max-width:620px;
  margin-bottom:36px;
}
.hero-ctas{ display:flex; gap:16px; flex-wrap:wrap; }

/* signature mark: field-coordinate cross, used sparingly as the site's motif */
.mark{
  position:relative; width:14px; height:14px; flex:0 0 auto;
}
.mark::before,.mark::after{
  content:""; position:absolute; background:var(--orange);
}
.mark::before{ left:50%; top:0; bottom:0; width:1.5px; transform:translateX(-50%); }
.mark::after{ top:50%; left:0; right:0; height:1.5px; transform:translateY(-50%); }

/* ---------------- SECTION HELPERS ---------------- */
section{ padding:88px 0; }
.section-alt{ background:var(--panel); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.section-dark{ background:var(--ink); color:#fff; }
.section-dark h2, .section-dark h3{ color:#fff; }
.section-dark p{ color:#C9C5BC; }
.section-dark .eyebrow{ color:var(--orange-lt); }

.head-row{
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:40px; margin-bottom:48px; flex-wrap:wrap;
}
.head-row h2{ max-width:640px; }
.head-row p{ max-width:380px; margin:0; }

h2.big{ font-size:clamp(28px,3.4vw,40px); }

/* ---------------- GRIDS / CARDS ---------------- */
.grid{ display:grid; gap:28px; }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }

.card{
  background:var(--panel);
  border:1px solid var(--line);
  padding:34px 30px;
  border-radius:var(--radius);
  transition:border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.card:hover{
  border-color:var(--orange);
  transform:translateY(-3px);
  box-shadow:0 14px 28px -18px rgba(33,31,28,.35);
}
.card h3{ font-size:19px; margin-bottom:10px; }
.card p{ font-size:14.5px; margin-bottom:18px; }
.card .link{
  font-size:13px; font-weight:500; color:var(--orange);
  display:inline-flex; align-items:center; gap:6px;
}
.card .link::after{ content:"→"; transition:transform .2s var(--ease); }
.card:hover .link::after{ transform:translateX(4px); }

.pillar-num{
  font-size:13px; color:var(--orange); font-weight:500;
  letter-spacing:.08em; margin-bottom:14px; display:block;
}

.list-plain li{
  padding:16px 0; border-bottom:1px solid var(--line);
  color:var(--ink-soft); font-size:16px;
}
.list-plain li:first-child{ padding-top:0; }
.list-plain li:last-child{ border-bottom:none; }

.list-plain li.inline-icon{ align-items:flex-start; gap:14px; }
.list-plain li.inline-icon .icon-sm{ margin-top:4px; width:19px; height:19px; }
.tag{
  font-size:13.5px; padding:9px 16px; border:1px solid var(--line-dk);
  border-radius:20px; color:var(--ink-soft);
}

/* process steps */
.steps{ display:grid; grid-template-columns:repeat(5,1fr); gap:22px; }
.step{ border-top:2px solid var(--orange); padding-top:18px; }
.step .n{ font-size:13px; color:var(--orange); font-weight:500; letter-spacing:.08em; display:block; margin-bottom:10px; }
.step h4{ font-size:15.5px; margin-bottom:8px; }
.step p{ font-size:13.5px; margin:0; }

/* proof / stats */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.stat{ background:var(--panel); padding:36px 26px; text-align:left; }
.stat .num{ font-size:clamp(26px,3vw,38px); font-weight:500; color:var(--orange); display:block; margin-bottom:6px; }
.stat .label{ font-size:13.5px; color:var(--ink-soft); }

.split{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start; }

blockquote.pull{
  border-left:3px solid var(--orange);
  padding-left:24px; margin:0;
  font-size:21px; font-weight:400; color:var(--ink);
  font-style:normal;
}

/* who-for */
.forlist{ display:grid; grid-template-columns:1fr 1fr; gap:14px 40px; }
.forlist li{
  display:flex; gap:12px; align-items:flex-start;
  font-size:15px; color:var(--ink-soft); padding:6px 0;
}
.forlist li .mark{ margin-top:5px; }

/* ---------------- CTA BAND ---------------- */
.cta-band{
  background:var(--ink); color:#fff;
  padding:76px 0;
  position:relative; overflow:hidden;
}
.cta-band::before{
  content:""; position:absolute; left:-80px; bottom:-140px;
  width:360px; height:360px; border-radius:50%;
  background:radial-gradient(circle, rgba(184,68,28,.35), transparent 70%);
}
.cta-inner{ position:relative; z-index:2; display:flex; justify-content:space-between; align-items:center; gap:40px; flex-wrap:wrap; }
.cta-band h2{ color:#fff; font-size:clamp(24px,3vw,34px); max-width:560px; margin-bottom:0; }
.cta-actions{ display:flex; gap:14px; flex-wrap:wrap; }
.cta-band .sub{ color:#C9C5BC; margin-top:12px; font-size:14.5px; }

/* ---------------- FOOTER ---------------- */
footer{ background:var(--bg-alt); border-top:1px solid var(--line); padding:56px 0 30px; }
.foot-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px; margin-bottom:48px; }
.foot-brand .brand{ margin-bottom:14px; }
.foot-brand p{ font-size:14px; max-width:280px; }
.foot-col h4{ font-size:12.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:16px; font-weight:500; }
.foot-col a{ display:block; font-size:14px; color:var(--ink-soft); padding:6px 0; transition:color .2s; }
.foot-col a:hover{ color:var(--orange); }
.foot-bottom{
  display:flex; justify-content:space-between; align-items:center;
  border-top:1px solid var(--line); padding-top:24px;
  font-size:13px; color:var(--ink-faint); flex-wrap:wrap; gap:10px;
}

/* ---------------- WHATSAPP FLOAT ---------------- */
.wa-float{
  position:fixed; right:24px; bottom:24px; z-index:80;
  width:56px; height:56px; border-radius:50%;
  background:var(--orange); color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 24px -8px rgba(140,51,19,.6);
  transition:transform .25s var(--ease);
}
.wa-float:hover{ transform:scale(1.08); }
.wa-float svg{ width:26px; height:26px; }

/* ---------------- MISC PAGE BANNER ---------------- */
.page-banner{ padding:64px 0 48px; border-bottom:1px solid var(--line); }
.page-banner h1{ font-size:clamp(30px,4vw,46px); }
.breadcrumb{ font-size:13px; color:var(--ink-faint); margin-bottom:18px; }
.breadcrumb a{ color:var(--ink-faint); }
.breadcrumb a:hover{ color:var(--orange); }

/* ---------------- SIGNATURE FIELD-MARKS ---------------- */
.field-strip{
  display:flex; align-items:center; gap:14px;
  color:var(--ink-faint); font-size:12.5px; letter-spacing:.1em; text-transform:uppercase;
  margin-bottom:20px;
}
.field-strip .line{ flex:1; height:1px; background:var(--line-dk); }

/* ---------------- REVEAL ---------------- */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in{ opacity:1; transform:translateY(0); }

/* ---------------- ICONS ---------------- */
.icon{ width:22px; height:22px; stroke:var(--orange); fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; display:block; }
.icon-circle{
  width:48px; height:48px; border-radius:50%;
  background:var(--tint); display:flex; align-items:center; justify-content:center;
  margin-bottom:18px;
  transition:transform .3s var(--ease), background .3s var(--ease);
}
.card:hover .icon-circle{ transform:rotate(-8deg) scale(1.08); background:var(--orange); }
.card:hover .icon-circle .icon{ stroke:#fff; }
.icon-circle.on-dark{ background:rgba(255,255,255,.08); }
.icon-circle.on-dark .icon{ stroke:var(--orange-lt); }

.icon-sm{ width:17px; height:17px; stroke:var(--orange); fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex:0 0 auto; }

.stat{ position:relative; }
.stat .icon-sm{ margin-bottom:10px; opacity:.85; }

.step{ position:relative; }
.step .icon-circle{ width:38px; height:38px; margin-bottom:14px; background:transparent; border:1.5px solid var(--orange); }
.step .icon-circle .icon{ width:18px; height:18px; }

.forlist li .icon-sm{ margin-top:2px; }

/* contact / footer inline icons */
.inline-icon{ display:inline-flex; align-items:center; gap:8px; }
.inline-icon .icon-sm{ stroke:var(--orange); }

/* ---------------- PORTRAIT / AVATAR ---------------- */
.portrait-frame{
  position:relative; width:100%; max-width:340px;
  aspect-ratio:1/1;
}
.portrait-ring{
  position:absolute; inset:-14px;
  border:1.5px dashed var(--orange-lt);
  border-radius:50%;
  animation:spin 40s linear infinite;
}
.portrait-placeholder{
  position:relative; width:100%; height:100%; border-radius:50%;
  background:linear-gradient(160deg, var(--tint), var(--bg-alt));
  border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.portrait-placeholder img{ width:100%; height:100%; object-fit:cover; border-radius:50%; }
.portrait-mono{
  font-size:64px; font-weight:500; color:var(--orange);
  display:flex; flex-direction:column; align-items:center; gap:10px;
}
.portrait-mono .icon{ width:46px; height:46px; stroke-width:1.3; opacity:.55; }
.portrait-mono span{ font-size:13px; font-weight:400; letter-spacing:.14em; color:var(--ink-faint); text-transform:uppercase; }
.portrait-dot{
  position:absolute; bottom:6px; right:6px;
  width:18px; height:18px; border-radius:50%;
  background:var(--orange); border:3px solid var(--bg);
  animation:pulse 2.4s ease-in-out infinite;
}
.hero-with-portrait{ display:grid; grid-template-columns:1.3fr .8fr; gap:56px; align-items:center; }
.about-hero-grid{ display:grid; grid-template-columns:.75fr 1.25fr; gap:48px; align-items:center; }

/* floating decorative blobs */
.blob{
  position:absolute; border-radius:50%;
  background:radial-gradient(circle, rgba(184,68,28,.16), transparent 70%);
  animation:float 9s ease-in-out infinite;
  pointer-events:none;
}

@keyframes spin{ from{ transform:rotate(0); } to{ transform:rotate(360deg); } }
@keyframes pulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(184,68,28,.45); } 50%{ box-shadow:0 0 0 8px rgba(184,68,28,0); } }
@keyframes float{ 0%,100%{ transform:translateY(0) translateX(0); } 50%{ transform:translateY(-18px) translateX(10px); } }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(24px); } to{ opacity:1; transform:translateY(0); } }

.hero h1, .hero .eyebrow, .hero .lede, .hero-ctas{ animation:fadeUp .8s var(--ease) both; }
.hero .eyebrow{ animation-delay:.02s; }
.hero h1{ animation-delay:.08s; }
.hero .lede{ animation-delay:.16s; }
.hero-ctas{ animation-delay:.24s; }
.hero .portrait-frame{ animation:fadeUp 1s var(--ease) .2s both; }

@media (prefers-reduced-motion: reduce){
  .hero h1,.hero .eyebrow,.hero .lede,.hero-ctas,.hero .portrait-frame,.reveal,.portrait-ring,.portrait-dot,.blob{
    animation:none !important; transition:none !important; opacity:1 !important; transform:none !important;
  }
}

/* ---------------- GALLERY (travel imagery) ---------------- */
.gallery{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.gallery figure{ margin:0; overflow:hidden; border-radius:var(--radius); border:1px solid var(--line); position:relative; }
.gallery img, .gallery svg{ width:100%; height:230px; object-fit:cover; display:block; transition:transform .6s var(--ease); }
.gallery figure:hover img, .gallery figure:hover svg{ transform:scale(1.06); }
.gallery figcaption{
  position:absolute; left:0; right:0; bottom:0;
  padding:14px 16px; font-size:13px; color:#fff; font-weight:500;
  background:linear-gradient(0deg, rgba(0,0,0,.55), transparent);
}

/* ---------------- PHOTO CARD (real imagery, offset frame) ---------------- */
.photo-card{ position:relative; width:100%; }
.photo-card::before{
  content:""; position:absolute; inset:16px -16px -16px 16px;
  border:2px solid var(--orange); border-radius:3px; z-index:0;
}
.photo-card img{
  position:relative; z-index:1; width:100%; display:block;
  border-radius:3px; object-fit:cover; aspect-ratio:4/3;
  box-shadow:0 24px 50px -24px rgba(33,31,28,.4);
}
.photo-card.tall img{ aspect-ratio:3/4; }
.photo-card.square img{ aspect-ratio:1/1; }
.photo-dot{
  position:absolute; z-index:2; bottom:-10px; left:6px;
  width:16px; height:16px; border-radius:50%;
  background:var(--orange); border:3px solid var(--bg);
  animation:pulse 2.4s ease-in-out infinite;
}

/* ---------------- CLIENT LOGO MARQUEE ---------------- */
.marquee-section{ padding:40px 0; border-bottom:1px solid var(--line); background:var(--panel); overflow:hidden; }
.marquee-label{
  text-align:center; font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-faint); margin-bottom:24px;
}
.marquee{
  position:relative; overflow:hidden;
  -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; align-items:center; gap:56px;
  width:max-content;
  animation:marquee 32s linear infinite;
}
.marquee:hover .marquee-track{ animation-play-state:paused; }
.marquee-track img{
  height:38px; width:auto; max-width:130px; object-fit:contain;
  filter:grayscale(1) opacity(.55);
  transition:filter .3s var(--ease), transform .3s var(--ease);
}
.marquee-track img:hover{ filter:grayscale(0) opacity(1); transform:translateY(-2px); }
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .marquee-track{ animation:none; } }

/* ---------------- WORK / CASE STUDY GRID ---------------- */
.case-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.case-grid figure{ margin:0; position:relative; overflow:hidden; border-radius:3px; border:1px solid var(--line); }
.case-grid img{ width:100%; height:240px; object-fit:cover; display:block; transition:transform .6s var(--ease); }
.case-grid figure:hover img{ transform:scale(1.06); }
.case-grid figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:14px 16px;
  font-size:13px; font-weight:500; color:#fff;
  background:linear-gradient(0deg, rgba(0,0,0,.62), transparent);
}
.case-grid figure.wide{ grid-column:span 2; }

/* ---------------- BOOK COVER GRID ---------------- */
.book-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.book-cover{ position:relative; }
.book-cover img{
  width:100%; aspect-ratio:2/3; object-fit:cover; border-radius:2px;
  box-shadow:0 20px 34px -18px rgba(33,31,28,.45);
  transition:transform .35s var(--ease);
}
.book-cover:hover img{ transform:translateY(-6px) rotate(-1deg); }
.book-cover .cap{ margin-top:12px; font-size:13px; color:var(--ink-soft); text-align:center; }

/* ================================================================
   HERO V2 — cinematic full-bleed hero with motion
   ================================================================ */
.hero-v2{
  position:relative; min-height:94vh; display:flex; align-items:center;
  background:var(--ink); overflow:hidden; color:#fff; isolation:isolate;
}
.hero-media{ position:absolute; inset:0; z-index:0; }
.hero-photo{
  width:100%; height:100%; object-fit:cover; object-position:50% 18%;
  transform:scale(1.08);
  animation:heroZoom 16s var(--ease) forwards;
}
@keyframes heroZoom{ from{ transform:scale(1.08); } to{ transform:scale(1); } }
.hero-photo-overlay{
  position:absolute; inset:0;
  background:
    linear-gradient(100deg, rgba(20,19,18,.97) 8%, rgba(20,19,18,.86) 34%, rgba(20,19,18,.4) 62%, rgba(238,64,55,.22) 100%),
    linear-gradient(0deg, rgba(20,19,18,.92) 0%, rgba(20,19,18,.1) 46%, rgba(20,19,18,.55) 100%);
}
.hero-grain{
  position:absolute; inset:0; opacity:.5; mix-blend-mode:overlay; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.12) .6px, transparent .6px);
  background-size:3px 3px;
}
.hero-v2-inner{ position:relative; z-index:2; padding:118px 0 150px; width:100%; }
.hero-v2-content{ max-width:660px; }
.hero-v2 .eyebrow{ color:var(--orange-lt); }
.hero-v2 h1{ color:#fff; font-size:clamp(38px,5.8vw,66px); letter-spacing:-.015em; }
.hero-v2 h1 em{ color:var(--orange-lt); font-style:normal; }
.hero-v2 .lede{ color:#D9D5CC; font-size:18.5px; max-width:560px; }
.hero-v2 .btn-ghost{ border-color:rgba(255,255,255,.35); color:#fff; }
.hero-v2 .btn-ghost:hover{ border-color:var(--orange); color:var(--orange-lt); }

/* rotating role/tagline badge */
.role-rotator{
  display:inline-flex; align-items:center; gap:10px;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16);
  padding:7px 18px 7px 8px; border-radius:30px; margin-bottom:24px;
  font-size:13px; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  animation:fadeUp .8s var(--ease) both;
}
.role-rotator-label{ color:#B7B3AA; white-space:nowrap; }
.role-rotator-word{
  color:#fff; font-weight:500; background:var(--orange); padding:5px 14px; border-radius:20px;
  display:inline-block; min-width:168px; text-align:center;
  transition:opacity .32s var(--ease), transform .32s var(--ease);
}
.role-rotator-word.swap{ opacity:0; transform:translateY(6px); }

/* floating stat chips over hero photo */
.stat-chip-row{
  position:absolute; right:6.5%; bottom:128px; z-index:3;
  display:flex; flex-direction:column; gap:14px; align-items:flex-end;
}
.stat-chip{
  background:rgba(255,255,255,.08); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.2); border-radius:4px;
  padding:14px 22px; min-width:160px; text-align:right;
  animation:float 7s ease-in-out infinite;
  box-shadow:0 20px 40px -20px rgba(0,0,0,.5);
}
.stat-chip:nth-child(2){ animation-delay:.6s; }
.stat-chip:nth-child(3){ animation-delay:1.2s; }
.stat-chip .num{ display:block; font-size:25px; font-weight:500; color:var(--orange-lt); line-height:1.15; }
.stat-chip .label{ font-size:11.5px; color:#C9C5BC; letter-spacing:.02em; }

/* scroll cue */
.scroll-cue{
  position:absolute; left:50%; bottom:30px; transform:translateX(-50%);
  z-index:3; display:flex; flex-direction:column; align-items:center; gap:10px;
  color:#C9C5BC; font-size:10.5px; letter-spacing:.22em; text-transform:uppercase;
  text-decoration:none; transition:color .25s;
}
.scroll-cue:hover{ color:#fff; }
.scroll-cue .track{
  width:1px; height:36px; position:relative; overflow:hidden;
  background:rgba(255,255,255,.18);
}
.scroll-cue .track::after{
  content:""; position:absolute; top:-100%; left:0; width:100%; height:60%;
  background:var(--orange); animation:scrollcue 1.9s ease-in-out infinite;
}
@keyframes scrollcue{ 0%{ top:-60%; } 65%{ top:100%; } 100%{ top:100%; } }

/* wave divider at hero base, sits into next section */
.hero-wave{ position:absolute; left:0; right:0; bottom:-1px; width:100%; height:64px; z-index:2; fill:var(--bg); display:block; }
.hero-wave.fill-panel{ fill:var(--panel); }

/* ---------------- STAT BREAKER (full-bleed rhythm moment) ---------------- */
.stat-breaker{
  background:var(--ink); color:#fff; padding:96px 0; position:relative; overflow:hidden;
}
.stat-breaker::before{
  content:""; position:absolute; width:520px; height:520px; border-radius:50%;
  background:radial-gradient(circle, rgba(238,64,55,.28), transparent 70%);
  right:-160px; top:-180px;
}
.stat-breaker::after{
  content:""; position:absolute; width:360px; height:360px; border-radius:50%;
  background:radial-gradient(circle, rgba(238,64,55,.14), transparent 70%);
  left:-120px; bottom:-160px;
}
.stat-breaker-inner{ text-align:center; position:relative; z-index:2; }
.stat-breaker .eyebrow{ justify-content:center; color:var(--orange-lt); }
.stat-breaker .num{
  font-size:clamp(64px,10vw,140px); font-weight:500; color:var(--orange);
  display:block; line-height:1; letter-spacing:-.02em;
}
.stat-breaker p{ font-size:18px; color:#C9C5BC; max-width:520px; margin:16px auto 0; }

/* ---------------- SCROLL PROGRESS BAR ---------------- */
#scrollProgress{
  position:fixed; top:0; left:0; height:3px; width:0%;
  background:linear-gradient(90deg, var(--orange), var(--orange-lt));
  z-index:200; transition:width .12s linear;
}

/* ---------------- REVEAL DIRECTION VARIANTS ---------------- */
.reveal-left{ opacity:0; transform:translateX(-44px); transition:opacity .75s var(--ease), transform .75s var(--ease); }
.reveal-left.in{ opacity:1; transform:translateX(0); }
.reveal-right{ opacity:0; transform:translateX(44px); transition:opacity .75s var(--ease), transform .75s var(--ease); }
.reveal-right.in{ opacity:1; transform:translateX(0); }
.reveal-scale{ opacity:0; transform:scale(.9); transition:opacity .75s var(--ease), transform .75s var(--ease); }
.reveal-scale.in{ opacity:1; transform:scale(1); }

.hero-v2.hero-short{ min-height:56vh; }
.hero-v2.hero-short .hero-v2-inner{ padding:140px 0 70px; }

@media (max-width:980px){
  .hero-v2{ min-height:auto; }
  .hero-v2-inner{ padding:150px 0 190px; }
  .stat-chip-row{ position:static; flex-direction:row; flex-wrap:wrap; margin-top:36px; }
  .stat-chip{ text-align:left; min-width:130px; animation:none; }
  .role-rotator-word{ min-width:140px; }
}
@media (max-width:640px){
  .hero-v2-inner{ padding:130px 0 170px; }
  .stat-chip-row{ gap:10px; }
  .stat-chip{ padding:12px 16px; min-width:110px; }
  .stat-breaker{ padding:64px 0; }
}
@media (prefers-reduced-motion: reduce){
  .hero-photo{ animation:none; transform:none; }
  .scroll-cue .track::after{ animation:none; }
}

/* ---------------- RESPONSIVE ---------------- */
@media (max-width:980px){
  .grid-3,.grid-4{ grid-template-columns:repeat(2,1fr); }
  .steps{ grid-template-columns:repeat(2,1fr); }
  .stats{ grid-template-columns:repeat(2,1fr); }
  .split{ grid-template-columns:1fr; gap:36px; }
  .forlist{ grid-template-columns:1fr; }
  .foot-grid{ grid-template-columns:1fr 1fr; }
  .nav-links{ display:none; }
  .hero-with-portrait{ grid-template-columns:1fr; }
  .hero-with-portrait .portrait-frame, .hero-with-portrait .photo-card{ order:-1; max-width:320px; margin:0 auto 12px; }
  .about-hero-grid{ grid-template-columns:1fr; }
  .about-hero-grid .portrait-frame, .about-hero-grid .photo-card{ max-width:260px; margin:0 auto; }
  .gallery{ grid-template-columns:repeat(2,1fr); }
  .case-grid{ grid-template-columns:1fr 1fr; }
  .case-grid figure.wide{ grid-column:span 2; }
  .book-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:640px){
  .wrap{ padding:0 20px; }
  .nav-inner{ padding:0 20px; }
  .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; }
  .steps{ grid-template-columns:1fr; }
  .stats{ grid-template-columns:1fr 1fr; }
  section{ padding:64px 0; }
  .hero{ padding:64px 0 56px; }
  .cta-inner{ flex-direction:column; align-items:flex-start; }
  .foot-grid{ grid-template-columns:1fr; }
  .gallery{ grid-template-columns:1fr; }
  .case-grid{ grid-template-columns:1fr; }
  .case-grid figure.wide{ grid-column:span 1; }
  .book-grid{ grid-template-columns:repeat(2,1fr); gap:14px; }
  .marquee-track{ gap:36px; }
}