/* =========================
   VARIABLES & RESET
========================= */
:root {
  --blue:  #073E81;
  --red:   #FF0033;
  --bg:    #F7F8FA;
  --white: #ffffff;
  --ink:   #111111;
  --muted: #5F6368;
  --line:  rgba(7,62,129,0.08);
  --ease:  cubic-bezier(0.16, 1, 0.3, 1);
}
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  font-family:'Inter', sans-serif;
  background:var(--bg);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  overflow-x:clip; /* clip (not hidden) so it doesn't break position:sticky */
}
h1,h2,h3 { font-family:'Manrope', sans-serif; font-weight:800; line-height:1.05; letter-spacing:-0.04em; }
a { color:inherit; text-decoration:none; }
img { max-width:100%; }

/* =========================
   UTILITIES
========================= */
.wrap { max-width:1260px; margin:0 auto; padding:0 48px; }
section { padding:150px 0; position:relative; }

.eyebrow {
  font-size:0.7rem; letter-spacing:0.28em; text-transform:uppercase;
  color:var(--blue); font-weight:700;
  display:inline-flex; align-items:center; gap:12px;
  margin-bottom:24px;
}
.eyebrow::before {
  content:''; width:20px; height:1.5px;
  background:var(--blue); display:inline-block; flex-shrink:0;
}
.eyebrow.lt { color:rgba(255,255,255,.5); }
.eyebrow.lt::before { background:rgba(255,255,255,.3); }

.reveal {
  opacity:0; transform:translateY(28px);
  transition:opacity .75s var(--ease), transform .75s var(--ease);
}
.reveal.in { opacity:1; transform:translateY(0); }
.d1 { transition-delay:.1s; }
.d2 { transition-delay:.2s; }
.d3 { transition-delay:.3s; }
.d4 { transition-delay:.4s; }

/* =========================
   PULL QUOTE (reusable, site-wide)
   <div class="pull-quote"><span class="pull-quote-mark">&ldquo;</span>
   <blockquote class="pull-quote-text">…</blockquote></div>
   Inherits the current text colour, so it adapts to white/blue backgrounds.
========================= */
.pull-quote { text-align:center; }
.pull-quote-mark {
  display:block; font-family:Georgia,'Times New Roman',serif; font-weight:700;
  font-size:6rem; line-height:.8; color:var(--red);
  height:.62em; margin:0 auto 6px;
}
.pull-quote-text {
  max-width:820px; margin:0 auto;
  font-family:'Inter',sans-serif; font-weight:300; font-style:italic;
  font-size:clamp(1.55rem,3.2vw,2.35rem); line-height:1.5; letter-spacing:-.005em;
  color:inherit;
}
.pull-quote-text::after {
  content:''; display:block; width:46px; height:2px; margin:30px auto 0;
  background:var(--red); border-radius:2px;
}

/* =========================
   HOME HERO v2 — dark, plasma play-button
========================= */
.mh { position:relative; min-height:100vh; overflow:hidden;
  background:radial-gradient(circle at 68% 46%, #003499 0%, #061a3c 46%, #030f26 100%);
  color:#fff; display:flex; align-items:center; padding:150px 0 90px; }
.mh-wrap { position:relative; z-index:2; display:grid; grid-template-columns:1.02fr .98fr; gap:60px; align-items:center; }
.mh-badge { display:inline-flex; align-items:center; gap:8px; padding:8px 16px; border-radius:100px;
  border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.05);
  font-size:11.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.85); margin-bottom:34px; }
.mh-badge::before { content:''; width:7px; height:7px; border-radius:50%; background:var(--red); box-shadow:0 0 10px rgba(255,0,51,.8); }
.mh-title { font-family:'Manrope',sans-serif; font-weight:800; font-size:clamp(2.6rem,5vw,4.4rem); line-height:1.04; letter-spacing:-.03em; color:#fff; }
.mh-punch { font-family:'Manrope',sans-serif; font-weight:600; font-size:clamp(1.05rem,1.6vw,1.3rem); line-height:1.55; color:#fff; max-width:560px; margin-top:24px; }
.mh-accent { color:var(--red); }
.mh-sub { color:rgba(255,255,255,.66); font-size:1.05rem; line-height:1.8; max-width:520px; margin-top:18px; }
.mh-actions { display:flex; gap:16px; margin-top:38px; flex-wrap:wrap; }
.mh-actions .btn-primary { background:#fff; color:var(--blue); }
.mh-actions .btn-primary:hover { box-shadow:0 14px 34px rgba(0,0,0,.35); }
.mh-outline { border-color:rgba(255,255,255,.4); color:#fff; }
.mh-outline:hover { background:#fff; color:var(--blue); }
.mh-visual { position:relative; width:100%; max-width:560px; aspect-ratio:1; margin:0 auto; }
.mh-play-rot { position:absolute; inset:0; z-index:2; transform-origin:50% 50%; will-change:transform; }
.mh-play { position:absolute; inset:0; width:100%; height:100%; object-fit:contain;
  animation:mh-float 6s ease-in-out infinite; }
@keyframes mh-float { 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-10px); } }
.mh-orbit { position:absolute; inset:0; z-index:3; }
.mh-orbit .geo-center { display:none; }
.mh-orbit .geo-rings circle { stroke:rgb(0 152 255 / 50%) !important; }
.mh-orbit .geo-label { color:rgba(255,255,255,.85) !important; }
.mh-orbit .geo-label-sm { color:rgba(255,255,255,.55) !important; }
.mh-orbit .gd-blue { background:#8fb8ff; box-shadow:0 0 0 3px rgba(143,184,255,.18), 0 0 14px rgba(143,184,255,.6); }
.mh-orbit .gd-sm { background:rgba(255,255,255,.5); box-shadow:0 0 8px rgba(255,255,255,.4); }
@media (max-width:960px){
  .mh { padding:128px 0 72px; }
  .mh-wrap { grid-template-columns:1fr; gap:44px; }
  .mh-visual { max-width:420px; }
}
@media (max-width:560px){
  .mh-visual { width:300px; height:300px; max-width:300px; }
  .mh-visual .geo-mark { position:absolute; top:50%; left:50%; width:400px; height:400px; max-width:none; margin:0; transform:translate(-50%,-50%) scale(.74); }
}

/* =========================
   NAV
========================= */
nav {
  position:fixed; top:18px; left:50%; transform:translateX(-50%);
  width:calc(100% - 48px); max-width:1300px;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 24px;
  background:#ffffff;
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border:1px solid var(--line);
  border-radius:22px;
  box-shadow:0 8px 28px rgba(7,62,129,0.07);
  z-index:200;
  transition:all .4s var(--ease);
}
nav.scrolled { box-shadow:0 12px 40px rgba(7,62,129,0.1); }
.nav-logo img { height:40px; display:block; }
.nav-links { display:flex; align-items:center; gap:32px; font-size:14.5px; font-weight:500; }
.nav-links a { color:var(--blue); transition:color .25s ease; }
.nav-links a:hover { color:var(--red); }
.nav-links a.active { color:var(--red); }
.nav-links a.nav-cta.active { color:#fff; }
.nav-cta {
  padding:10px 20px; border-radius:12px;
  background:var(--blue); color:white !important; font-weight:700;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.nav-cta:hover { transform:translateY(-2px); box-shadow:0 10px 26px rgba(7,62,129,0.25); }

/* Hamburger toggle — hidden on desktop, shown on mobile via responsive.css */
.nav-toggle {
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:42px; height:42px; padding:9px; margin:-4px -8px -4px 0;
  background:transparent; border:none; cursor:pointer; border-radius:10px;
}
.nav-toggle span {
  display:block; width:22px; height:2px; border-radius:2px; background:var(--blue);
  transition:transform .35s var(--ease), opacity .25s ease;
}

/* =========================
   HERO
========================= */
.hero {
  min-height:100vh; display:flex; flex-direction:column; justify-content:center;
  padding-top:120px; padding-bottom:80px;
  position:relative; overflow:hidden;
  background:var(--white);
}
.hero-grid {
  position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(7,62,129,.032) 1px, transparent 1px),
    linear-gradient(90deg, rgba(7,62,129,.032) 1px, transparent 1px);
  background-size:80px 80px;
  -webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,.6), transparent 80%);
  mask-image:linear-gradient(to bottom, rgba(0,0,0,.6), transparent 80%);
}
.hero-glow-1 {
  position:absolute; width:700px; height:700px; border-radius:50%;
  background:radial-gradient(circle, rgba(7,62,129,.07), transparent 70%);
  top:-250px; right:-200px; pointer-events:none;
}
.hero-glow-2 {
  position:absolute; width:500px; height:500px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,0,51,.04), transparent 70%);
  bottom:-200px; left:-150px; pointer-events:none;
}
.hero .wrap { position:relative; z-index:2; }
.hero-layout { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; }

.hero-visual { position:relative; opacity:0; animation:fadeUp 1s var(--ease) forwards .5s; }

.hero-badge {
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 16px; border-radius:100px;
  border:1px solid rgba(255,0,51,.15);
  background:rgba(255,0,51,.05);
  font-size:11.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--red); margin-bottom:44px;
  opacity:0; animation:fadeUp .9s var(--ease) forwards .05s;
}
.hero-badge::before {
  content:''; width:7px; height:7px; border-radius:50%; background:var(--red);
  animation:dot-pulse 2s ease-in-out infinite;
}
.hero h1 {
  font-size:clamp(2.6rem, 5.2vw, 4.6rem);
  line-height:1.05; letter-spacing:-.04em; font-weight:900;
  margin-bottom:32px; max-width:22ch;
}
.hero h1 .line { display:block; overflow:hidden; }
.hero h1 .line span {
  display:block;
  transform:translateY(112%);
  animation:lineUp 1s cubic-bezier(.16,.84,.44,1) forwards;
}
.hero h1 .line:nth-child(1) span { animation-delay:.22s; }
.hero h1 .line:nth-child(2) span { animation-delay:.38s; color:var(--blue); }
.hero-punch {
  font-family:'Manrope', sans-serif; font-weight:700;
  font-size:clamp(1.15rem, 1.6vw, 1.4rem); line-height:1.5;
  color:var(--ink); letter-spacing:-.01em;
  max-width:560px; margin-bottom:18px;
  opacity:0; animation:fadeUp .9s var(--ease) forwards .55s;
}
.hero-punch-accent {
  color:var(--red); position:relative; display:inline-block;
}
.hero-punch-accent::after {
  content:''; position:absolute; left:0; bottom:-3px; width:100%; height:2px;
  background:var(--red); border-radius:2px;
  transform:scaleX(0); transform-origin:left;
  animation:underline-draw .6s var(--ease) forwards 1.35s;
}
.hero-sub {
  font-size:1.05rem; line-height:1.85; color:var(--muted);
  max-width:520px; margin-bottom:46px;
  opacity:0; animation:fadeUp .9s var(--ease) forwards .75s;
}
.hero-actions {
  display:flex; gap:16px; flex-wrap:wrap;
  opacity:0; animation:fadeUp .9s var(--ease) forwards .8s;
}
.btn {
  padding:15px 30px; border-radius:14px;
  font-size:15px; font-weight:700;
  display:inline-flex; align-items:center; gap:8px;
  transition:transform .45s var(--ease), box-shadow .45s var(--ease), background .3s ease, color .3s ease;
}
.btn-primary { background:var(--blue); color:white; }
.btn-primary:hover { transform:translateY(-3px); box-shadow:0 18px 38px rgba(7,62,129,.26); }
.btn-outline { border:1.5px solid rgba(7,62,129,.18); color:var(--blue); }
.btn-outline:hover { background:var(--blue); color:white; transform:translateY(-3px); }

.scroll-cue {
  position:absolute; bottom:38px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:10px;
  font-size:0.68rem; letter-spacing:.25em; text-transform:uppercase; color:var(--muted);
  opacity:0; animation:fadeUp .9s ease forwards 1.15s;
}
.sc-line {
  width:1px; height:38px; background:rgba(7,62,129,.15); position:relative; overflow:hidden;
}
.sc-line::after {
  content:''; position:absolute; top:-100%; left:0; width:100%; height:100%;
  background:var(--blue); animation:sc-fall 2s ease-in-out infinite;
}

/* =========================
   GEO-MARK (Hero orbital rings)
========================= */
.geo-mark { position:relative; aspect-ratio:1; max-width:400px; margin:0 auto; }
.hero-geo { max-width:100%; width:100%; }
.geo-rings { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.geo-pivot { position:absolute; left:50%; top:50%; width:0; height:0; transform-origin:0 0; will-change:transform; }
.gp-1 { animation:orbit-cw  14s linear infinite; }
.gp-2 { animation:orbit-ccw 22s linear infinite; animation-delay:-8s; }
.gp-3 { animation:orbit-cw   9s linear infinite; animation-delay:-3s; }
.gp-4 { animation:orbit-cw  14s linear infinite; animation-delay:-7s; }
.gp-5 { animation:orbit-ccw 22s linear infinite; animation-delay:-19s; }

/* Orbit item = dot + label at the orbit radius. Static: the parent pivot rotates
   it rigidly, so the dot stays on the guide ring and the label rotates with it. */
.geo-orbit-item {
  position:absolute; top:0; transform:translateY(-50%);
  display:flex; align-items:center; gap:7px;
}
/* Items are static — the pivot rotates them rigidly, so the dot rides the guide
   ring and the label rotates tangentially (as before). All motion lives on the
   pivot (pure rotation = no seam jerk). */
.oi-red   { left:172px; }
.oi-blue  { left:125px; }
.oi-sm    { left:78px;  }
.oi-red2  { left:172px; }
.oi-blue2 { left:125px; }

.geo-dot { border-radius:50%; flex-shrink:0; }
.gd-red  { width:13px; height:13px; background:var(--red); box-shadow:0 0 0 3px rgba(255,0,51,.15),0 0 18px rgba(255,0,51,.55); }
.gd-blue { width:10px; height:10px; background:var(--blue); box-shadow:0 0 0 3px rgba(7,62,129,.18),0 0 14px rgba(7,62,129,.5); }
.gd-sm   { width:7px; height:7px; background:rgba(7,62,129,.55); box-shadow:0 0 8px rgba(7,62,129,.35); }

.geo-label {
  font-size:.66rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  white-space:nowrap; color:var(--blue); opacity:.75; pointer-events:none;
}
.geo-label-sm { font-size:.58rem; opacity:.55; }
.geo-center {
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  display:flex; align-items:center; justify-content:center;
  width:34px; height:34px;
  pointer-events:none;
}
.geo-center svg {
  width:30px; height:auto;
  transform-origin:center;
  animation:play-heartbeat 5s ease-in-out infinite;
}
@keyframes play-heartbeat {
  0%, 100% { transform:scale(1); opacity:1; }
  50%      { transform:scale(1.18); opacity:.85; }
}

/* =========================
   WHY IT MATTERS
========================= */
/* white by default; .is-blue (added on scroll) = blue skin. .9s crossfade */
.matters { position:relative; overflow:hidden; background:var(--white); color:var(--ink); padding:160px 0; transition:background-color .9s var(--ease), color .9s var(--ease); }
.matters.is-blue { background:var(--blue); color:white; }
.matters .wrap { position:relative; z-index:2; }

/* Studio photo that surfaces only once the section turns blue, then dissolves
   into it — luminosity keeps the blue, the mask fades the photo out toward
   the text so it reads as depth, never as a picture behind copy. */
.matters-bg, .who-bg {
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background-size:cover; background-position:center right;
  mix-blend-mode:luminosity;
  opacity:0; transform:scale(1.04);
  transition:opacity 1.1s var(--ease), transform 1.6s var(--ease);
  -webkit-mask-image:linear-gradient(100deg, transparent 30%, rgba(0,0,0,.55) 72%, rgba(0,0,0,.8) 100%);
  mask-image:linear-gradient(100deg, transparent 30%, rgba(0,0,0,.55) 72%, rgba(0,0,0,.8) 100%);
}
.matters-bg { background-image:url('../assets/images/matters-office-1.jpg'); }
.who-bg     { background-image:url('../assets/images/matters-office-2.jpg'); }

.matters.is-blue .matters-bg,
.who.is-blue .who-bg { opacity:.16; transform:scale(1); }

/* blue scrim keeps the copy fully legible over the photo */
.matters-bg::after, .who-bg::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(100deg, var(--blue) 22%, rgba(7,62,129,.72) 58%, rgba(7,62,129,.35) 100%);
}
@media (prefers-reduced-motion: reduce){
  .matters-bg { transition:none; transform:none; }
}
.matters .eyebrow.lt { color:var(--muted); transition:color .9s var(--ease); }
.matters .eyebrow.lt::before { background:rgba(7,62,129,.3); transition:background-color .9s var(--ease); }
.matters.is-blue .eyebrow.lt { color:rgba(255,255,255,.5); }
.matters.is-blue .eyebrow.lt::before { background:rgba(255,255,255,.3); }
.compare { display:flex; flex-direction:column; gap:10px; margin:48px 0 56px; }
.compare .row {
  display:flex; align-items:baseline; gap:28px;
  font-family:'Manrope', sans-serif;
  font-size:clamp(2rem, 5.5vw, 4.2rem);
  font-weight:800; letter-spacing:-.05em;
}
.compare .row .tag {
  font-family:'Inter', sans-serif; font-size:.82rem; font-weight:500;
  letter-spacing:.06em; color:rgba(7,62,129,.3); width:100px; flex-shrink:0;
  transition:color .9s var(--ease);
}
.matters.is-blue .compare .row .tag { color:rgba(255,255,255,.28); }
.compare .row.dim    { color:rgba(7,62,129,.32); transition:color .9s var(--ease); }
.matters.is-blue .compare .row.dim { color:rgba(255,255,255,.38); }
.compare .row.bright { color:var(--ink); transition:color .9s var(--ease); }
.matters.is-blue .compare .row.bright { color:white; }
.compare .row.bright .tag { color:rgba(7,62,129,.5); }
.matters.is-blue .compare .row.bright .tag { color:rgba(255,255,255,.5); }
.matters .lead { max-width:560px; color:var(--muted); font-size:1.05rem; line-height:1.9; transition:color .9s var(--ease); }
.matters.is-blue .lead { color:rgba(255,255,255,.68); }

/* =========================
   PHILOSOPHY
========================= */
.philosophy { background:var(--white); padding:150px 0; }
.phil-grid { display:grid; grid-template-columns:1fr 1fr; gap:96px; align-items:center; }
.phil-grid h2 { font-size:clamp(2.4rem, 5.5vw, 4rem); margin-bottom:28px; }
.phil-grid p { color:var(--muted); font-size:1.05rem; line-height:1.88; max-width:460px; }
.phil-grid p+p { margin-top:16px; }
.phil-quote {
  margin-top:36px; padding-left:20px;
  border-left:2px solid var(--red);
  font-family:'Manrope', sans-serif; font-weight:700; font-size:1.18rem;
  color:var(--blue); letter-spacing:-.02em; line-height:1.45;
}
.phil-hv {
  position:relative; border-radius:36px; overflow:hidden;
  background:transparent;
  aspect-ratio:4/5;
}
.phil-hv::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(7,62,129,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(7,62,129,.045) 1px, transparent 1px);
  background-size:48px 48px;
}
/* Border only reveals near the cursor, on hover — follows mouse position via --mx/--my */
.phil-hv::after {
  content:''; position:absolute; inset:0; border-radius:inherit;
  border:1.5px solid var(--blue);
  pointer-events:none; opacity:0;
  -webkit-mask-image:radial-gradient(circle 220px at var(--mx,50%) var(--my,50%), #000 0%, transparent 75%);
  mask-image:radial-gradient(circle 220px at var(--mx,50%) var(--my,50%), #000 0%, transparent 75%);
  transition:opacity .4s ease;
}
.phil-hv:hover::after { opacity:1; }
.phil-svg { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:1; }
.phil-orb {
  position:absolute; left:50%; top:46%; transform:translate(-50%,-50%);
  width:80px; height:80px; border-radius:50%;
  background:linear-gradient(145deg, #0d3570, #073E81);
  border:1px solid rgba(255,255,255,.2);
  display:flex; align-items:center; justify-content:center;
  z-index:5;
  box-shadow:0 0 0 12px rgba(7,62,129,.15), 0 0 40px rgba(7,62,129,.4);
  animation:orb-breathe 3.5s ease-in-out infinite;
}
.phil-orb svg { width:46px; height:auto; }
.phil-node {
  position:absolute; z-index:4; cursor:pointer;
  animation:node-float 4s ease-in-out infinite;
}
.phil-node:nth-child(2)  { animation-duration:4.3s; animation-delay:.4s; }
.phil-node:nth-child(3)  { animation-duration:3.8s; animation-delay:.8s; }
.phil-node:nth-child(4)  { animation-duration:4.7s; animation-delay:.2s; }
.phil-node:nth-child(5)  { animation-duration:3.6s; animation-delay:1.0s; }
.phil-node:nth-child(6)  { animation-duration:4.5s; animation-delay:.6s; }
.phil-node:nth-child(7)  { animation-duration:4.1s; animation-delay:1.3s; }
.phil-node:nth-child(8)  { animation-duration:3.9s; animation-delay:.3s; }
.phil-node:nth-child(9)  { animation-duration:4.2s; animation-delay:.7s; }
.phil-node:nth-child(10) { animation-duration:3.7s; animation-delay:1.1s; }
.phil-node:nth-child(11) { animation-duration:4.4s; animation-delay:.5s; }
.phil-node:nth-child(12) { animation-duration:3.5s; animation-delay:1.4s; }
.phil-node-inner {
  display:inline-flex; align-items:center;
  background:rgba(7,62,129,.05);
  border:1px solid rgba(7,62,129,.14);
  border-radius:100px;
  padding:7px 13px;
  white-space:nowrap;
  transition:background .4s ease, border-color .4s ease, box-shadow .4s ease, transform .4s var(--ease);
}
.phil-node:hover .phil-node-inner {
  background:#fff;
  border-color:rgba(255,0,51,.3);
  box-shadow:0 10px 28px rgba(7,62,129,.16);
  transform:scale(1.1);
}
.n-word { font-size:.78rem; font-weight:700; color:var(--blue); letter-spacing:.06em; text-transform:uppercase; transition:color .35s ease; }
.phil-node:hover .n-word { color:var(--red); }

/* =========================
   FOUNDATION
========================= */
.foundation { background:var(--bg); padding:150px 0; }
.found-head { max-width:680px; margin-bottom:84px; }
.found-head h2 { font-size:clamp(2.2rem, 5.5vw, 3.8rem); margin-bottom:18px; }
.found-head p  { color:var(--muted); font-size:1.05rem; line-height:1.85; }
.found-grid { display:grid; grid-template-columns:1.3fr 1fr; gap:80px; align-items:start; }
.found-left { display:flex; flex-direction:column; }
.principles { display:grid; grid-template-columns:repeat(3,1fr); gap:60px; margin-top:64px; padding-top:34px; border-top:1px solid var(--line); }
.principle {
  display:flex; flex-direction:column;
  padding-right:36px;
  border-right:1px solid var(--line);
  transition:background .25s ease;
}
.principle:last-child { border-right:none; padding-right:0; }
.principle .num { font-size:.78rem; font-weight:700; letter-spacing:.15em; color:var(--red); margin-bottom:16px; }
.principle h3 { font-size:1.1rem; font-weight:700; margin-bottom:9px; letter-spacing:-.025em; }
.principle p  { color:var(--muted); font-size:.92rem; line-height:1.7; }

/* Play-button motion graphics */
.pa-wrap { width:100%; max-width:460px; margin:0 auto; }
.pa-svg  { width:100%; height:auto; display:block; overflow:visible; }
.pa-g    { transform-box:fill-box; transform-origin:center; will-change:transform,opacity; }

/* =========================
   APPROACH
========================= */
.approach { background:var(--white); padding:150px 0; }
.approach-head { max-width:680px; margin-bottom:70px; }
.approach-head h2 { font-size:clamp(2.2rem, 5.5vw, 3.8rem); margin-bottom:18px; }
.approach-head p  { color:var(--muted); font-size:1.05rem; line-height:1.85; }

.approach-head-framework {
  max-width:640px; margin-bottom:50px;
}
.approach-head-framework .eyebrow { margin-bottom:36px; }
.framework-logo {
  display:block; width:100%; max-width:215px;
  margin-bottom:36px; height:auto;
}
/* The business question is the section's headline; the framework reveal that
   follows it is a supporting step, so its heading sits a rung lower. */
.approach-head-framework { margin-top:90px; }
.approach-head-framework h2 {
  font-size:clamp(1.55rem, 2.8vw, 2.3rem);
  margin-bottom:18px;
}
.approach-grid {
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:24px;
}
.a-card {
  background:var(--white); padding:42px 32px;
  border:1px solid var(--line); border-radius:24px;
  transition:background .4s ease, transform .4s var(--ease), box-shadow .4s ease, border-color .4s ease;
}
.a-card:hover {
  background:var(--blue);
  border-color:var(--blue);
  transform:translateY(-8px);
  box-shadow:0 26px 54px rgba(7,62,129,.28);
}
.a-icon {
  width:42px; height:42px; border-radius:50%; border:1.5px solid var(--blue);
  margin-bottom:26px; position:relative;
  transition:border-color .4s ease;
}
.a-card:hover .a-icon { border-color:#fff; }
.a-icon-default {
  position:absolute; width:20px; height:20px;
  left:50%; top:50%; transform:translate(-50%,-50%) scale(1);
  color:var(--blue);
  transition:color .3s ease, opacity .3s ease, transform .3s ease;
}
.a-card:hover .a-icon-default {
  opacity:0; transform:translate(-50%,-50%) scale(.4);
}
.a-icon-play {
  position:absolute; width:14px; height:auto;
  left:50%; top:50%; transform:translate(-50%,-50%) scale(.4);
  opacity:0;
  transition:opacity .35s ease .1s, transform .35s ease .1s;
}
.a-card:hover .a-icon-play {
  opacity:1; transform:translate(-50%,-50%) scale(1);
}
.a-card h3 { font-size:1.2rem; font-weight:700; margin-bottom:10px; letter-spacing:-.025em; transition:color .35s ease; }
.a-card p  { color:var(--muted); font-size:.92rem; line-height:1.75; transition:color .35s ease; }
.a-card:hover h3 { color:#fff; }
.a-card:hover p  { color:rgba(255,255,255,.82); }

/* =========================
   WHO WE HELP — MARQUEE
========================= */
.who { position:relative; background:var(--white); color:var(--ink); padding:130px 0; overflow:hidden; transition:background-color .9s var(--ease), color .9s var(--ease); }
.who.is-blue { background:var(--blue); color:white; }
.who-head, .who .marquee-track { position:relative; z-index:2; }
.who .eyebrow.lt { color:var(--muted); transition:color .9s var(--ease); }
.who .eyebrow.lt::before { background:rgba(7,62,129,.3); transition:background-color .9s var(--ease); }
.who.is-blue .eyebrow.lt { color:rgba(255,255,255,.5); }
.who.is-blue .eyebrow.lt::before { background:rgba(255,255,255,.3); }
.who-head { padding:0 48px; margin-bottom:64px; }
.who-head h2 { font-size:clamp(2rem, 5vw, 3.4rem); max-width:760px; line-height:1.15; }
/* Supporting line — flips with the section, same 0.9s ease as the rest. */
.who-lead {
  margin-top:22px; max-width:620px;
  color:var(--muted); font-size:1.05rem; line-height:1.85;
  transition:color .9s var(--ease);
}
.who.is-blue .who-lead { color:rgba(255,255,255,.68); }
.marquee-track { display:flex; }
.marquee { display:flex; gap:56px; white-space:nowrap; flex-shrink:0; animation:mq-scroll 32s linear infinite; }
.marquee:hover { animation-play-state:paused; }
.marquee span {
  font-family:'Manrope', sans-serif; font-size:clamp(1.6rem, 4.5vw, 3rem);
  font-weight:700; color:rgba(7,62,129,.22);
  display:inline-flex; align-items:center; gap:56px; flex-shrink:0;
  transition:color .3s ease; letter-spacing:-.03em; cursor:default;
}
.who.is-blue .marquee span { color:rgba(255,255,255,.28); }
.marquee span:hover { color:rgba(7,62,129,.55); }
.who.is-blue .marquee span:hover { color:rgba(255,255,255,.85); }
.marquee span::after { content:'—'; color:var(--red); font-size:.65em; }

/* =========================
   SELECTED WORK
========================= */
.work { background:var(--bg); padding:150px 0; }
.work-head { display:flex; justify-content:space-between; align-items:flex-end; gap:40px; margin-bottom:68px; flex-wrap:wrap; }
.work-head h2 { font-size:clamp(2rem, 5vw, 3.4rem); max-width:520px; }
.work-head p  { color:var(--muted); max-width:360px; font-size:.98rem; line-height:1.75; }
.work-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.work-card { position:relative; border-radius:22px; overflow:hidden; aspect-ratio:4/5; cursor:pointer; }
.w-frame { position:absolute; inset:0; transition:transform .7s cubic-bezier(.16,.84,.44,1); }
.work-card:hover .w-frame { transform:scale(1.05); }
/* Each card is a full-colour studio photo of the actual craft — no brand tint.
   The .w-overlay scrim at the base carries text legibility. */
.work-card .w-frame { background-size:cover; background-position:center; background-repeat:no-repeat; }
.work-card.wc1 .w-frame { background-image:url('../assets/images/work-identity-v.jpg'); }
.work-card.wc2 .w-frame { background-image:url('../assets/images/work-social-v.jpg'); }
.work-card.wc3 .w-frame { background-image:url('../assets/images/work-motion-v.jpg'); }
.w-overlay {
  position:absolute; inset:0;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:32px;
  background:linear-gradient(to top, rgba(4,8,20,.88) 0%, transparent 58%);
  color:white;
}
.w-tag { font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; opacity:.55; margin-bottom:9px; font-weight:600; }
.w-overlay h3 { font-size:1.4rem; font-weight:800; margin-bottom:9px; letter-spacing:-.03em; }
.w-overlay p  { font-size:.88rem; opacity:.78; line-height:1.65; max-width:250px; }
.w-link {
  margin-top:16px; font-size:.84rem; font-weight:700; color:white;
  display:inline-flex; align-items:center; gap:6px;
  opacity:0; transform:translateY(8px); transition:all .35s ease;
}
.work-card:hover .w-link { opacity:1; transform:translateY(0); }

/* =========================
   WHY 8D
========================= */
.why8d { background:var(--white); padding:150px 0; }
.why-head { max-width:680px; margin-bottom:72px; }
.why-head h2 { font-size:clamp(2.2rem, 5.5vw, 3.8rem); }
.why-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:64px 88px; }
.why-card { display:flex; gap:26px; }
.w-idx {
  font-family:'Manrope', sans-serif; font-style:italic; font-size:2.5rem;
  font-weight:900; color:transparent; -webkit-text-stroke:1.5px rgba(7,62,129,.25);
  flex-shrink:0; line-height:1; padding-top:2px;
}
.why-card h3 { font-size:1.22rem; font-weight:700; margin-bottom:10px; letter-spacing:-.025em; }
.why-card p  { color:var(--muted); font-size:.96rem; line-height:1.8; }

/* =========================
   BELIEF
========================= */
.belief { background:var(--white); text-align:center; padding:180px 0; }
.belief h2 {
  font-size:clamp(2rem, 6.5vw, 4.8rem); font-weight:900;
  max-width:900px; margin:0 auto; line-height:1.2; letter-spacing:-.045em;
}
.belief h2 .word { display:inline-block; color:rgba(7,62,129,.15); transition:color .55s ease; }
.belief.in h2 .word { color:var(--ink); }
.belief h2 .word.accent { color:var(--red); font-style:italic; }
.belief h2 .word { transition-delay:calc(var(--i) * 0.04s); }

/* =========================
   FINAL CTA
========================= */
/* =========================
   FINAL CTA (reusable card, site-wide) — use .cta-final > .wrap > .cta-final-card
========================= */
.cta-final { background:var(--white); }
.cta-final-card {
  background:var(--blue); border-radius:36px; padding:96px 60px; text-align:center;
  position:relative; overflow:hidden;
}
.cta-final-card::before {
  content:''; position:absolute; inset:0;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:54px 54px;
  -webkit-mask-image:radial-gradient(ellipse 70% 70% at 50% 50%, #000 20%, transparent 70%);
          mask-image:radial-gradient(ellipse 70% 70% at 50% 50%, #000 20%, transparent 70%);
}
.cta-final-card > * { position:relative; z-index:2; }
.cta-final-card .eyebrow { justify-content:center; margin-bottom:24px; }
.cta-final-card h2 {
  font-family:'Manrope',sans-serif; font-weight:800;
  font-size:clamp(2.2rem,4vw,3.4rem); line-height:1.1;
  letter-spacing:-.025em; color:#fff; margin-bottom:22px;
}
.cta-final-card p {
  font-size:1.08rem; line-height:1.7; color:rgba(255,255,255,.8);
  max-width:540px; margin:0 auto 40px;
}
.cta-final-card .cta-btns { display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }
.cta-final-card .btn-primary { background:#fff; color:var(--blue); }
.cta-final-card .btn-primary:hover { box-shadow:0 18px 38px rgba(0,0,0,.25); }
.cta-btn-light { border-color:rgba(255,255,255,.4); color:#fff; }
.cta-btn-light:hover { background:#fff; color:var(--blue); }
@media (max-width:600px){ .cta-final-card { padding:72px 28px; border-radius:28px; } }
.cta-btns { display:flex; justify-content:center; gap:16px; flex-wrap:wrap; }

/* =========================
   REVIEWS — TRUSTPILOT / GOOGLE
   (shared component — also used on Design_Services_Monthly.php)
========================= */
.reviews-section { background:#fff; padding:120px 0 90px; overflow:hidden; }

.reviews-summary { max-width:640px; margin:0 auto 56px; text-align:center; }
.reviews-stars { color:#FFB400; font-size:1.4rem; letter-spacing:.15em; margin-bottom:18px; }
.reviews-summary h2 { font-size:clamp(1.8rem,3.6vw,2.6rem); line-height:1.2; letter-spacing:-.025em; margin-bottom:22px; }
.reviews-stats {
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  gap:10px 22px; font-size:.92rem; color:#666;
}
.reviews-stat { display:flex; align-items:center; gap:6px; }
.reviews-stat strong { color:var(--blue, #073E81); font-weight:800; font-size:1.05em; }
.reviews-stat:not(:last-child)::after {
  content:''; display:inline-block; width:4px; height:4px; border-radius:50%;
  background:rgba(0,0,0,.18); margin-left:16px;
}

/* Marquee — full-bleed, slow, seamless, left-to-right drift, pauses on hover */
.testimonial-marquee { overflow:hidden; padding:6px 0; -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.testimonial-track {
  display:flex; gap:24px; width:max-content;
  animation:testimonial-scroll 48s linear infinite;
}
.testimonial-marquee:hover .testimonial-track { animation-play-state:paused; }

.testimonial-card {
  width:340px; flex-shrink:0;
  background:var(--bg, #F7F8FA);
  border:1px solid rgba(0,0,0,.06);
  border-radius:22px;
  padding:32px 30px;
  display:flex; flex-direction:column;
}
.testimonial-card p { color:#444; line-height:1.75; font-size:.94rem; margin-bottom:22px; flex-grow:1; }
.testimonial-card h3 { font-size:1rem; margin-bottom:16px; letter-spacing:-.01em; color:var(--blue, #073E81); }
.testimonial-card-list ol { padding-left:20px; margin:0 0 22px; display:flex; flex-direction:column; gap:6px; flex-grow:1; }
.testimonial-card-list li { font-size:.86rem; color:#444; line-height:1.5; }
.testimonial-author { padding-top:16px; border-top:1px solid rgba(0,0,0,.07); display:flex; flex-direction:column; }
.testimonial-author strong { font-size:.92rem; color:#22293a; font-weight:700; }
.testimonial-author span { font-size:.8rem; color:#888; margin-top:2px; }

.testimonial-stars { font-size:.82rem; letter-spacing:.1em; margin-bottom:14px; }
.testimonial-stars .filled { color:#FFB400; }
.testimonial-stars .empty { color:#dcdce0; }

/* Long testimonial — fixed card height, smooth internal scroll instead of growing the card */
.testimonial-card-scroll { padding-bottom:32px; }
.testimonial-scroll {
  max-height:190px; overflow-y:auto; scroll-behavior:smooth;
  flex-grow:1; margin-bottom:22px; padding-right:10px;
}
.testimonial-scroll p { color:#444; line-height:1.7; font-size:.88rem; margin-bottom:14px; }
.testimonial-scroll p:last-child { margin-bottom:0; }
.testimonial-scroll::-webkit-scrollbar { width:5px; }
.testimonial-scroll::-webkit-scrollbar-track { background:transparent; }
.testimonial-scroll::-webkit-scrollbar-thumb { background:rgba(19,72,130,.2); border-radius:10px; }
.testimonial-scroll::-webkit-scrollbar-thumb:hover { background:rgba(19,72,130,.4); }

.review-links-small {
  display:flex; justify-content:center; gap:28px; margin-top:50px;
}
.review-links-small a {
  font-size:.8rem; color:#999; text-decoration:none; font-weight:600;
  transition:color .3s ease;
}
.review-links-small a:hover { color:var(--blue, #073E81); }

/* =========================
   FOOTER
========================= */
footer { background:var(--blue); color:white; padding:96px 48px 36px; }
.footer-inner {
  max-width:1260px; margin:0 auto;
  display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:60px;
  padding-bottom:60px; border-bottom:1px solid rgba(255,255,255,.1);
}
.f-brand-about { color:rgba(255,255,255,.58); font-size:.92rem; line-height:1.9; max-width:290px; margin-bottom:16px; }
.f-brand-belief { font-family:'Manrope', sans-serif; font-style:italic; font-size:.82rem; color:rgba(255,255,255,.35); line-height:1.7; }
.footer-col h4 { font-size:.68rem; letter-spacing:.22em; text-transform:uppercase; color:rgba(255,255,255,.38); margin-bottom:22px; font-weight:600; }
.footer-col a,.footer-col p { display:block; color:rgba(255,255,255,.62); font-size:.92rem; margin-bottom:12px; transition:color .25s ease; }
.footer-col a:hover { color:white; }
.footer-bottom {
  max-width:1260px; margin:28px auto 0;
  display:flex; justify-content:space-between; align-items:center;
  font-size:.8rem; color:rgba(255,255,255,.3); flex-wrap:wrap; gap:12px;
}

/* =========================
   CUSTOM CURSOR
========================= */
#cursor-dot {
  position:fixed; top:0; left:0; width:16px; height:16px;
  border-radius:50%; background:#fff;
  display:flex; align-items:center; justify-content:center;
  pointer-events:none; z-index:9999;
  opacity:0;
  transform:translate(-50%,-50%);
  transition:width .15s ease, height .15s ease, opacity .2s ease;
}
#cursor-dot svg { width:7px; height:auto; display:block; }
#cursor-dot path { fill:var(--blue); transition:fill .15s ease; }
#cursor-dot.is-active { opacity:1; }
#cursor-dot.is-hover { width:24px; height:24px; }
#cursor-dot.is-hover svg { width:10px; }
#cursor-dot.is-hover path { fill:rgba(255,0,51,.85); }

@media (hover:hover) and (pointer:fine) {
  body.custom-cursor-on, body.custom-cursor-on a, body.custom-cursor-on button {
    cursor:none;
  }
}

/* =========================================================
   LIGHT HERO (.lh) — homepage v2.0
   Crystal play button on the original white canvas.
   Grid/glow overrides are scoped to .lh so other pages'
   heroes keep their original values.
   ========================================================= */
.lh {
  position:relative; min-height:100vh; overflow:hidden;
  background:var(--white); color:var(--ink);
  display:flex; align-items:center; padding:130px 0 140px;
}

/* Grid pattern matched to the About page hero (64px squares,
   radial fade from the top) so both pages read the same. */
.lh .hero-grid {
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:64px 64px;
  opacity:.5;
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 75%);
          mask-image:radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 75%);
}
.lh .hero-glow-1 {
  width:760px; height:760px; top:-260px; right:-210px;
  background:radial-gradient(circle, rgba(7,62,129,.11), transparent 70%);
}
.lh .hero-glow-2 {
  width:560px; height:560px; bottom:-190px; left:-160px;
  background:radial-gradient(circle, rgba(255,0,51,.07), transparent 70%);
}
/* soft halo behind the orbit so the crystal sits in light, not in a void */
.lh .hero-glow-3 {
  position:absolute; width:820px; height:820px; border-radius:50%;
  background:radial-gradient(circle, rgba(7,62,129,.055), transparent 68%);
  top:50%; right:2%; transform:translateY(-54%); pointer-events:none;
}

.lh-wrap { position:relative; z-index:2; display:grid; grid-template-columns:1.02fr .98fr; gap:60px; align-items:center; }

.lh-badge {
  display:inline-flex; align-items:center; gap:8px; padding:8px 16px; border-radius:100px;
  border:1px solid rgba(7,62,129,.16); background:rgba(7,62,129,.04);
  font-size:11.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--blue); margin-bottom:34px;
}
.lh-badge::before {
  content:''; width:7px; height:7px; border-radius:50%; background:var(--red);
  box-shadow:0 0 10px rgba(255,0,51,.55);
}
.lh-title {
  font-family:'Manrope', sans-serif; font-weight:800;
  font-size:clamp(2.6rem,5vw,4.4rem); line-height:1.04; letter-spacing:-.03em; color:var(--ink);
}
.lh-punch {
  margin-top:22px; font-size:1.15rem; line-height:1.7; color:var(--ink);
  max-width:540px; font-weight:500;
}
.lh-accent { color:var(--red); }
.lh-sub { color:var(--muted); font-size:1.05rem; line-height:1.8; max-width:520px; margin-top:16px; }
.lh-actions { display:flex; gap:14px; flex-wrap:wrap; margin-top:36px; }

.lh-visual { position:relative; width:100%; max-width:560px; aspect-ratio:1; margin:0 auto; }
.lh-play-rot { position:absolute; inset:0; z-index:2; transform-origin:50% 50%; will-change:transform; }
/* button sits smaller inside the orbit rings */
.lh-play {
  position:absolute; top:19%; left:19%; width:62%; height:62%; object-fit:contain;
  animation:lh-float 6s ease-in-out infinite;
  filter:drop-shadow(0 16px 34px rgba(7,62,129,.18));
}
@keyframes lh-float { 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-10px); } }
.lh-orbit { position:absolute; inset:0; z-index:3; }

/* ---- proof bar: anchors the bottom of the hero ---- */
.lh-proof {
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:26px 0 30px;
  border-top:1px solid rgba(7,62,129,.10);
  background:linear-gradient(to top, rgba(255,255,255,.9), rgba(255,255,255,0));
}
.lh-proof-inner { display:flex; align-items:center; gap:38px; flex-wrap:wrap; }
.lh-proof-label {
  font-size:10.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); white-space:nowrap; display:flex; align-items:center; gap:10px;
}
.lh-proof-label::after { content:''; width:26px; height:1px; background:rgba(7,62,129,.22); }
.lh-proof-list { display:flex; align-items:center; gap:34px; flex-wrap:wrap; }
/* text wordmark — swap the inner text for <img src="..."> when logo files land */
.lh-client {
  font-family:'Manrope', sans-serif; font-weight:700; font-size:.98rem;
  letter-spacing:-.01em; color:var(--blue); opacity:.42;
  transition:opacity .35s ease, transform .35s ease;
}
.lh-client:hover { opacity:.9; transform:translateY(-1px); }
.lh-client img { height:26px; width:auto; display:block; filter:grayscale(1); }

@media (max-width:960px){
  .lh { padding:118px 0 64px; }
  .lh-wrap { grid-template-columns:1fr; gap:40px; }
  .lh-visual { max-width:400px; order:2; }
  .lh-proof { position:static; background:none; margin-top:48px; }
  .lh-proof-inner { justify-content:center; gap:22px; }
  .lh-proof-list { justify-content:center; gap:24px; }
}
@media (max-width:560px){
  .lh-title { font-size:clamp(2.05rem,7.6vw,3rem); }
  .lh-visual { width:280px; height:280px; max-width:280px; }
  .lh-visual .geo-mark {
    position:absolute; top:50%; left:50%; width:400px; height:400px;
    max-width:none; margin:0; transform:translate(-50%,-50%) scale(.68);
  }
}
@media (prefers-reduced-motion: reduce){
  .lh-play { animation:none; }
}

/* =========================
   FLOATING WHATSAPP BUTTON — site-wide
   Lives in footer.php / footer-landing.php so it appears on
   every page. Icon-only at rest, expands on hover.
========================= */
.wa-float {
  position:fixed; right:24px; bottom:24px; z-index:120;
  display:inline-flex; align-items:center; gap:0;
  background:#25D366; color:#fff;
  border-radius:100px; padding:15px;
  box-shadow:0 12px 34px rgba(37,211,102,.42);
  transition:gap .35s var(--ease, ease), padding .35s var(--ease, ease),
             transform .3s ease, box-shadow .3s ease;
}
.wa-float svg { width:26px; height:26px; flex-shrink:0; }
.wa-float span {
  font-family:'Manrope', sans-serif; font-weight:700; font-size:.92rem; white-space:nowrap;
  max-width:0; overflow:hidden; opacity:0;
  transition:max-width .35s var(--ease, ease), opacity .25s ease;
}
.wa-float:hover {
  gap:10px; padding:15px 22px; transform:translateY(-3px);
  box-shadow:0 18px 44px rgba(37,211,102,.5);
}
.wa-float:hover span { max-width:150px; opacity:1; }
.wa-float:focus-visible { outline:3px solid #fff; outline-offset:3px; }

@media (max-width:720px) {
  .wa-float { right:16px; bottom:16px; padding:14px; }
  .wa-float:hover { padding:14px; gap:0; }
  .wa-float:hover span { max-width:0; opacity:0; }
}
@media (prefers-reduced-motion: reduce) {
  .wa-float, .wa-float span { transition:none; }
}