/* ============================
   CONTACT PAGE STYLES
   ============================ */


*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  /* ── NEW DESIGN SYSTEM ── */
  --bg:#FEFEFE;--bg2:#E7E9F0;--bg3:#d4d8e8;
  --w:#051747;--w2:rgba(5,23,71,0.68);--w3:rgba(5,23,71,0.42);--w4:rgba(5,23,71,0.09);
  /* accent: navy + slate blue */
  --pu:#051747;--pu2:#535F80;--pu3:rgba(5,23,71,0.18);
  --pk:#E7E9F0;--lm:#535F80;--or:#051747;--bl:#535F80;
  --gr:linear-gradient(135deg,#051747,#081F62);
  --gr2:linear-gradient(135deg,#051747,#535F80);
  --gr3:linear-gradient(135deg,#535F80,#081F62);
  --fh:'DM Serif Display',serif;--fb:'DM Sans',sans-serif;--ft:'Sora',sans-serif;
  --ez:cubic-bezier(.25,.46,.45,.94);
  /* palette — navy professional */
  --lavender:#E7E9F0;--sky:#535F80;--mint:#d4d8e8;--peach:#E7E9F0;--pink:#E7E9F0;
  --cream:#FEFEFE;--sage:#535F80;--terra:#051747;--terra-dark:#081F62;--sand:#E7E9F0;
  /* radii */
  --r-sm:8px;--r-md:16px;--r-lg:28px;--r-xl:40px;
}
html{scroll-behavior:smooth}
body{background:var(--bg);background-image:radial-gradient(ellipse 90% 50% at 50% -5%,rgba(5,23,71,.06)0%,transparent 60%);color:var(--w);font-family:var(--fb);overflow-x:hidden;cursor:auto}


/* LOADER */
#loader{position:fixed;inset:0;z-index:9900;background:var(--bg);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:1.5rem;transition:opacity .6s}
#loader.hide{opacity:0;pointer-events:none}
.ld-logo{font-family:var(--fh);font-size:2.8rem;font-weight:400;letter-spacing:.01em;color:#051747;animation:fd .6s .2s both}
.ld-bar{width:160px;height:2px;background:var(--w4);overflow:hidden;border-radius:2px}
.ld-prog{height:100%;background:linear-gradient(135deg,#051747,#535F80);width:0;animation:prog 2s var(--ez) .4s forwards;border-radius:2px}
@keyframes fd{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes prog{to{width:100%}}

/* NAV */
nav{position:fixed;top:0;left:0;right:0;z-index:800;padding:1.2rem var(--site-pad);display:flex;align-items:center;justify-content:space-between;transition:background .4s,backdrop-filter .4s;background:rgba(254,254,254,.95);backdrop-filter:blur(20px);border-bottom:1px solid rgba(5,23,71,.06)}
nav.sc{background:rgba(254,254,254,.98);backdrop-filter:blur(24px);border-bottom:1px solid rgba(5,23,71,.08)}
.nl{font-family:var(--fh);font-size:1.45rem;font-weight:400;letter-spacing:.01em;color:var(--terra-dark);text-decoration:none;font-style:italic}
.nav-links{display:flex;gap:2.8rem;list-style:none}
.nav-links a{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--w3);text-decoration:none;transition:color .2s;font-weight:500;font-family:var(--ft)}
.nav-links a:hover{color:var(--w)}
.nb{font-size:.72rem;font-weight:600;padding:.55rem 1.5rem;background:#051747;color:#ffffff;border:none;border-radius:100px;text-decoration:none;letter-spacing:.06em;transition:all .25s;font-family:var(--ft)}
.nb:hover{background:#535F80;color:#ffffff;transform:translateY(-1px)}

/* PAGE SYSTEM */
.pg{display:none}.pg.on{display:block}

/* SECTION LABELS */
.slbl{font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--terra-dark);font-weight:600;display:flex;align-items:center;gap:.7rem;margin-bottom:1rem;font-family:var(--ft)}
.slbl::before{content:'';width:2rem;height:1.5px;background:var(--terra-dark);border-radius:2px}
.sh{font-family:var(--fh);font-size:clamp(2.8rem,5vw,5.5rem);font-weight:400;line-height:.98;letter-spacing:-.01em;margin-bottom:4rem}

/* BUTTONS */
.bp{display:inline-flex;align-items:center;gap:.5rem;padding:.85rem 2rem;background:#051747;color:#ffffff;border:none;border-radius:100px;font-family:var(--ft);font-size:.78rem;font-weight:600;text-decoration:none;transition:all .28s;letter-spacing:.06em}
.bp:hover{background:#535F80;color:#ffffff;transform:translateY(-2px);box-shadow:0 8px 24px rgba(5,23,71,.2)}
.bg{display:inline-flex;align-items:center;gap:.5rem;padding:.85rem 2rem;background:transparent;color:var(--w);border:1.5px solid rgba(5,23,71,.18);border-radius:100px;font-family:var(--ft);font-size:.78rem;text-decoration:none;transition:all .28s;letter-spacing:.06em;font-weight:500}
.bg:hover{border-color:var(--terra-dark);color:var(--terra-dark);transform:translateY(-2px)}

/* ══ GLOBAL MARGIN SYSTEM — Nav logo se CTA tak same width ══ */
:root{--site-pad:4rem}
.hero-con{padding-left:var(--site-pad);padding-right:var(--site-pad)}
@media(max-width:900px){
  :root{--site-pad:1.5rem}
}

/* ══ HERO — Funky Creative Layout ══ */
#hero{min-height:100vh;position:relative;overflow:hidden;background:var(--bg);display:grid;grid-template-rows:1fr;align-items:stretch}

/* Animated background blobs */
.hero-blob{position:absolute;border-radius:50%;filter:blur(80px);pointer-events:none;z-index:0}
.hero-blob-1{width:600px;height:600px;background:rgba(5,23,71,.13);top:-15%;right:-10%;animation:blob-drift 8s ease-in-out infinite alternate}
.hero-blob-2{width:400px;height:400px;background:rgba(83,95,128,.1);bottom:5%;left:-5%;animation:blob-drift 6s ease-in-out 2s infinite alternate}
.hero-blob-3{width:300px;height:300px;background:rgba(83,95,128,.08);top:40%;left:40%;animation:blob-drift 10s ease-in-out 1s infinite alternate}
@keyframes blob-drift{from{transform:translate(0,0) scale(1)}to{transform:translate(30px,20px) scale(1.08)}}

/* Diagonal stripe texture */
.hero-stripes{position:absolute;inset:0;z-index:0;opacity:.025;background-image:repeating-linear-gradient(45deg,var(--w) 0,var(--w) 1px,transparent 0,transparent 50%);background-size:18px 18px}

/* Main content grid */
.hero-inner{position:relative;z-index:2;display:grid;grid-template-columns:1fr 420px;gap:3rem;align-items:center;min-height:100vh;padding-top:8rem;padding-bottom:5rem;padding-left:var(--site-pad);padding-right:var(--site-pad)}

/* LEFT: text content */
.hero-left{overflow:visible;min-width:0}
.hero-chip{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  background:#051747;
  color:#ffffff;
  border-radius:100px;
  padding:.48rem 1.3rem .48rem .7rem;
  font-size:.7rem;
  letter-spacing:.05em;
  text-transform:uppercase;
  font-weight:700;
  margin-bottom:2.4rem;
  animation:fu .6s .2s both;
  font-family:var(--ft);
  box-shadow:0 6px 20px rgba(83,95,128,.4);
  white-space:nowrap;
  width:fit-content;
  max-width:100%;
  overflow:visible;
  position:relative;
  z-index:3;
}
.hero-chip span{
  width:8px;
  height:8px;
  border-radius:50%;
  background:rgba(255,255,255,.9);
  animation:pulse 2s infinite;
  flex-shrink:0;
  display:inline-block;
}
.hero-chip-txt{color:#fff !important;font-weight:700;letter-spacing:.05em;opacity:1;visibility:visible}
@keyframes pulse{0%,100%{opacity:.6;transform:scale(1)}50%{opacity:1;transform:scale(1.4)}}

.hero-h1{font-family:var(--fh);font-size:clamp(3.6rem,7.5vw,8.5rem);font-weight:400;line-height:.9;letter-spacing:-.02em;margin-bottom:2.4rem;animation:fu .8s .45s both}
.hero-h1 .line-plain{display:block;color:var(--w)}
.hero-h1 .line-italic{display:block;font-style:italic;color:var(--terra);position:relative}
/* Underline scribble on italic line */
.hero-h1 .line-italic::after{display:none}
.hero-h1 .line-outline{display:block;color:transparent;-webkit-text-stroke:1.5px var(--w);letter-spacing:-.02em}

.hero-sub{font-size:clamp(.9rem,1.2vw,1rem);color:var(--w2);max-width:480px;line-height:1.84;margin-bottom:3rem;animation:fu .7s .6s both;font-weight:300}
.hero-ctas{display:flex;gap:1rem;animation:fu .7s .75s both;flex-wrap:wrap;align-items:center}

/* Scroll indicator */
.hero-scroll{display:flex;align-items:center;gap:.8rem;margin-top:3rem;animation:fu .6s 1s both}
.hero-scroll-line{width:3rem;height:1px;background:var(--w3);overflow:hidden;position:relative;border-radius:1px}
.hero-scroll-line::after{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:#535F80;animation:sw 2.4s ease-in-out infinite}
@keyframes sw{0%{left:-100%}50%,100%{left:100%}}
.hero-scroll-txt{font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--w3);font-family:var(--ft)}

/* RIGHT: Floating cards composition */
.hero-right{position:relative;height:580px;animation:fu .9s .5s both}

/* Big feature card */
.hfc-main{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) rotate(-3deg);width:260px;background:var(--w);border-radius:24px;padding:1.8rem;box-shadow:0 24px 64px rgba(5,23,71,.22);z-index:4;animation:float-main 5s ease-in-out infinite}
@keyframes float-main{0%,100%{transform:translate(-50%,-50%) rotate(-3deg) translateY(0)}50%{transform:translate(-50%,-50%) rotate(-3deg) translateY(-12px)}}
.hfc-main-label{font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;color:#E7E9F0;font-weight:700;margin-bottom:1rem;font-family:var(--ft)}
.hfc-main-num{font-family:var(--fh);font-size:3.5rem;font-weight:400;color:#ffffff;line-height:.9;letter-spacing:-.02em}
.hfc-main-unit{font-size:.72rem;color:rgba(255,255,255,.45);letter-spacing:.06em;margin-top:.5rem;font-family:var(--ft)}
.hfc-main-bar{height:3px;background:rgba(255,255,255,.12);border-radius:2px;margin-top:1.5rem;overflow:hidden}
.hfc-main-fill{height:100%;background:#535F80;border-radius:2px;animation:fill-bar 3s ease-out 1.5s both}
@keyframes fill-bar{from{width:0}to{width:78%}}

/* Stat card 1 — top right */
.hfc-stat1{position:absolute;top:4%;right:-2%;width:168px;background:#fff;border:1.5px solid rgba(5,23,71,.07);border-radius:18px;padding:1.2rem 1.4rem;box-shadow:0 12px 32px rgba(5,23,71,.1);z-index:5;animation:float-s1 6s ease-in-out 1s infinite}
@keyframes float-s1{0%,100%{transform:rotate(4deg) translateY(0)}50%{transform:rotate(4deg) translateY(-8px)}}
.hfc-s-tag{font-size:.56rem;letter-spacing:.18em;text-transform:uppercase;color:var(--w3);font-weight:600;margin-bottom:.5rem;font-family:var(--ft)}
.hfc-s-val{font-family:var(--fh);font-size:2rem;font-weight:400;color:var(--terra-dark);line-height:1;letter-spacing:-.01em}
.hfc-s-lbl{font-size:.7rem;color:var(--w3);margin-top:.25rem;font-weight:300}

/* Stat card 2 — bottom left */
.hfc-stat2{position:absolute;bottom:12%;left:-4%;width:148px;background:#E7E9F0;border-radius:18px;padding:1.2rem 1.4rem;box-shadow:0 12px 32px rgba(5,23,71,.1);z-index:5;animation:float-s2 7s ease-in-out .5s infinite}
@keyframes float-s2{0%,100%{transform:rotate(-5deg) translateY(0)}50%{transform:rotate(-5deg) translateY(10px)}}

/* Pill tag floating */
.hfc-pill1{position:absolute;top:14%;left:5%;background:#051747;color:#ffffff;border-radius:100px;padding:.5rem 1.1rem;font-family:var(--ft);font-size:.68rem;font-weight:600;letter-spacing:.06em;z-index:6;white-space:nowrap;box-shadow:0 8px 20px rgba(5,23,71,.4);animation:float-p1 4s ease-in-out .8s infinite}
@keyframes float-p1{0%,100%{transform:rotate(-2deg) translateY(0)}50%{transform:rotate(-2deg) translateY(-6px)}}

.hfc-pill2{position:absolute;bottom:5%;right:5%;background:var(--mint);color:var(--w);border-radius:100px;padding:.5rem 1.1rem;font-family:var(--ft);font-size:.68rem;font-weight:600;letter-spacing:.04em;z-index:6;white-space:nowrap;box-shadow:0 8px 20px rgba(5,23,71,.1);animation:float-p2 5s ease-in-out 1.5s infinite}
@keyframes float-p2{0%,100%{transform:rotate(3deg) translateY(0)}50%{transform:rotate(3deg) translateY(8px)}}

/* Star rating card */
.hfc-rating{position:absolute;top:38%;right:-6%;background:#fff;border:1.5px solid rgba(5,23,71,.07);border-radius:16px;padding:1rem 1.2rem;z-index:6;box-shadow:0 8px 24px rgba(5,23,71,.09);animation:float-s1 8s ease-in-out 2s infinite}
.hfc-stars{display:flex;gap:2px;margin-bottom:.35rem}
.hfc-star{color:#535F80;font-size:.75rem}
.hfc-rating-val{font-family:var(--fh);font-size:1.4rem;color:var(--w);font-weight:400;letter-spacing:-.01em}
.hfc-rating-lbl{font-size:.6rem;color:var(--w3);letter-spacing:.06em;font-family:var(--ft)}

/* Decorative orbit ring */
.hero-orbit{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:480px;height:480px;border:1px dashed rgba(5,23,71,.15);border-radius:50%;z-index:1;animation:orbit-spin 30s linear infinite}
@keyframes orbit-spin{to{transform:translate(-50%,-50%) rotate(360deg)}}
.hero-orbit-dot{position:absolute;top:-4px;left:50%;width:8px;height:8px;border-radius:50%;background:#535F80;transform:translateX(-50%);opacity:.6}

/* Remove old hero elements we replaced */
.hero-sf,.hvw,.hero-ov,.hero-ov2,.hvc{display:none!important}

/* Old hero-con now handled by hero-inner */
.hero-con{display:none!important}

/* Scroll indicator in new position */
.hero-si{display:none!important}

/* Stats strip at bottom */
.hero-stats-strip{position:relative;z-index:2;background:var(--w);display:flex;padding:1.6rem var(--site-pad);gap:0;border-top:1px solid rgba(255,255,255,.06)}
.hero-stat-item{flex:1;padding:0 2rem;border-right:1px solid rgba(255,255,255,.08)}
.hero-stat-item:first-child{padding-left:0}
.hero-stat-item:last-child{border-right:none}
.hero-stat-n{font-family:var(--fh);font-size:1.8rem;font-weight:400;color:#E7E9F0;letter-spacing:-.01em;line-height:1}
.hero-stat-l{font-size:.62rem;color:rgba(255,255,255,.7);letter-spacing:.1em;text-transform:uppercase;margin-top:.3rem;font-family:var(--ft)}

/* Mobile hero */
@media(max-width:900px){
  .hero-inner{grid-template-columns:1fr;padding-top:6rem;padding-bottom:0;gap:0;min-height:auto}
  .hero-right{height:340px;margin:0 calc(-1 * var(--site-pad));width:calc(100% + 2 * var(--site-pad))}
  .hfc-main{width:200px}
  .hfc-main-num{font-size:2.6rem}
  .hero-orbit{width:320px;height:320px}
  .hero-stats-strip{flex-wrap:wrap;gap:.5rem;padding:1.2rem var(--site-pad)}
  .hero-stat-item{flex:1 1 40%;border-right:none;padding:0.5rem 0}
}

/* MARQUEE */
.mq-wrap{border-top:1px solid rgba(5,23,71,.08);border-bottom:1px solid rgba(5,23,71,.08);overflow:hidden;padding:.95rem 0;background:var(--bg2)}
.mq-inner{display:flex;white-space:nowrap;animation:mq 28s linear infinite}
.mqi{font-family:var(--ft);font-size:.82rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--w3);padding:0 2rem;display:flex;align-items:center;gap:2rem}
.mqd{width:4px;height:4px;border-radius:50%;background:#535F80;flex-shrink:0}
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* SCROLL STOPPER */
#sstop{padding:11rem var(--site-pad);text-align:center;position:relative;overflow:hidden;background:var(--w)}
.sstop-bg{position:absolute;inset:0;background:radial-gradient(ellipse 55% 65% at 50% 50%,rgba(83,95,128,.2)0%,transparent 65%)}
.sst-h{font-family:var(--fh);font-size:clamp(2.8rem,6.5vw,7.5rem);font-weight:400;line-height:.95;letter-spacing:-.02em;max-width:1100px;margin:0 auto;color:#FEFEFE}
.sst-h .ac{color:#E7E9F0}
.sst-sub{margin-top:2rem;font-size:1.05rem;color:rgba(255,255,255,.5);letter-spacing:.03em;font-weight:300}

/* ANIMATIONS */
@keyframes fu{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:translateY(0)}}
.rv{opacity:0;transform:translateY(28px);transition:opacity .7s var(--ez),transform .7s var(--ez)}
.rv.vis{opacity:1;transform:translateY(0)}
.pg-content{display:block!important}



/* ══ BENTO SERVICES ══ */
#svc{padding:9rem var(--site-pad);background:var(--bg2)}
.bento{display:grid;grid-template-columns:repeat(12,1fr);grid-template-rows:auto;gap:2px;background:rgba(5,23,71,.06);margin-top:0;border-radius:var(--r-lg);overflow:hidden}
.bc{background:var(--cream);position:relative;overflow:hidden;transition:background .35s;box-shadow:none}
.bc:hover{background:#fff}
.bc::before{content:'';position:absolute;inset:0;opacity:0;transition:opacity .4s}
.bc:hover::before{opacity:1}
.bc-1{grid-column:1/5;grid-row:1/3;min-height:440px}
.bc-2{grid-column:5/9;grid-row:1/2;min-height:210px}
.bc-3{grid-column:9/13;grid-row:1/2;min-height:210px}
.bc-4{grid-column:5/9;grid-row:2/3;min-height:210px}
.bc-5{grid-column:9/13;grid-row:2/3;min-height:210px}
.bc-1::before{background:radial-gradient(ellipse at 0 100%,rgba(5,23,71,.06)0%,transparent 55%)}
.bc-2::before{background:radial-gradient(ellipse at 100% 0,rgba(83,95,128,.08)0%,transparent 55%)}
.bc-3::before{background:radial-gradient(ellipse at 100% 0,rgba(83,95,128,.1)0%,transparent 55%)}
.bc-4::before{background:radial-gradient(ellipse at 0 100%,rgba(5,23,71,.07)0%,transparent 55%)}
.bc-5::before{background:radial-gradient(ellipse at 100% 100%,rgba(5,23,71,.1)0%,transparent 55%)}
.bc-in{position:relative;z-index:1;padding:2.5rem;height:100%;display:flex;flex-direction:column;justify-content:space-between}
.bc-num{font-size:.58rem;letter-spacing:.22em;text-transform:uppercase;color:var(--terra-dark);font-weight:600;margin-bottom:1.3rem;font-family:var(--ft)}
.bc-t{font-family:var(--fh);font-size:clamp(1.5rem,2.2vw,2.1rem);font-weight:400;letter-spacing:-.01em;line-height:1.08}
.bc-tag{font-size:.8rem;color:var(--w3);font-style:italic;margin-top:.5rem;font-family:var(--fb)}
.bc-body{font-size:.85rem;color:var(--w2);line-height:1.78;margin-top:1.1rem;font-weight:300}
.bc-inc{margin-top:auto;padding-top:1.4rem;border-top:1px solid rgba(5,23,71,.08)}
.bc-inc-l{font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;color:var(--w3);margin-bottom:.7rem;font-family:var(--ft)}
.bc-inc ul{display:flex;flex-direction:column;gap:.38rem;list-style:none}
.bc-inc li{font-size:.8rem;color:var(--w2);display:flex;gap:.55rem;align-items:flex-start}
.bc-inc li::before{content:'→';color:var(--terra-dark);font-size:.68rem;flex-shrink:0;margin-top:.15rem}
.bc-arr{position:absolute;bottom:1.8rem;right:1.8rem;z-index:1;width:34px;height:34px;border-radius:50%;border:1.5px solid rgba(5,23,71,.12);display:flex;align-items:center;justify-content:center;font-size:.8rem;color:var(--w3);transition:all .25s}
.bc:hover .bc-arr{border-color:#051747;color:#051747;transform:rotate(-45deg)}

/* ══ REELS SHOWCASE ══ */
#reels{padding:9rem var(--site-pad);background:var(--w)}
.reels-row{display:flex;gap:10px;overflow-x:auto;padding:2rem 0 1rem;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:#535F80 rgba(255,255,255,.1);margin-top:3rem}
.reels-row::-webkit-scrollbar{height:3px}
.reels-row::-webkit-scrollbar-thumb{background:#535F80;border-radius:3px}
.rc{flex:0 0 200px;height:360px;border-radius:var(--r-md);overflow:hidden;position:relative;scroll-snap-align:start;cursor:auto}
.rc-bg{width:100%;height:100%;transition:transform .4s}
.rc:hover .rc-bg{transform:scale(1.04)}
.rc-over{position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(5,23,71,.85)100%);display:flex;flex-direction:column;justify-content:flex-end;padding:1.1rem}
.rc-ind{font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:#E7E9F0;font-weight:600;margin-bottom:.25rem}
.rc-name{font-family:var(--fh);font-size:.9rem;font-weight:400;line-height:1.2;color:#fff}
.rc-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.8);backdrop-filter:blur(8px);border:1px solid rgba(5,23,71,.3);display:flex;align-items:center;justify-content:center;font-size:.9rem;transition:all .25s}
.rc:hover .rc-play{background:var(--terra);border-color:var(--terra-dark);transform:translate(-50%,-50%) scale(1.1)}
.reels-hint{font-size:.72rem;color:rgba(255,255,255,.4);margin-top:1.2rem;letter-spacing:.06em;display:flex;align-items:center;gap:.5rem}

/* ══ BEFORE/AFTER CASES ══ */
#cases{padding:9rem var(--site-pad);background:var(--bg)}
.cases-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:rgba(5,23,71,.06);margin-top:4rem;border-radius:var(--r-lg);overflow:hidden}
.cc{background:var(--cream);padding:3rem;position:relative;overflow:hidden;min-height:500px;display:flex;flex-direction:column;gap:1.8rem}
.cc-glow{position:absolute;inset:0;opacity:0;transition:opacity .4s;pointer-events:none}
.cc:hover .cc-glow{opacity:1}
.cc-ind{font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--terra-dark);font-weight:700;font-family:var(--ft)}
.cc-title{font-family:var(--fh);font-size:2rem;font-weight:400;letter-spacing:-.02em;line-height:1.05}
.cc-desc{font-size:.86rem;color:var(--w2);line-height:1.74;font-weight:300}
.ba{position:relative;border-radius:var(--r-sm);overflow:hidden;height:200px;cursor:col-resize;user-select:none;flex-shrink:0}
.ba-bef,.ba-aft{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.ba-bef{background:linear-gradient(135deg,#E7E9F0,#d4d8e8)}
.ba-aft{background:linear-gradient(135deg,#535F80,#051747);clip-path:inset(0 50% 0 0);transition:clip-path .02s}
.ba-txt{font-size:.72rem;color:rgba(5,23,71,.55);font-style:italic;text-align:center;padding:1rem;line-height:1.5}
.ba-txt-a{font-size:.72rem;color:#ffffff;text-align:center;padding:1rem;line-height:1.5}
.ba-hdl{position:absolute;top:0;left:50%;width:2px;height:100%;background:rgba(255,255,255,.6);z-index:3;transform:translateX(-50%)}
.ba-hdl::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:28px;height:28px;border-radius:50%;background:var(--terra);box-shadow:0 2px 12px rgba(5,23,71,.35)}
.ba-lb,.ba-la{position:absolute;bottom:.7rem;font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600;z-index:4;padding:.25rem .55rem;border-radius:4px}
.ba-lb{left:.7rem;background:rgba(255,255,255,.9);color:#051747}
.ba-la{right:.7rem;background:rgba(255,255,255,.9);color:#051747}
.cc-metrics{display:flex;gap:2rem}
.cmt-n{font-family:var(--fh);font-size:1.6rem;font-weight:400;letter-spacing:-.02em;color:var(--terra-dark)}
.cmt-l{font-size:.68rem;color:var(--w3);letter-spacing:.05em;font-family:var(--ft)}

/* ══ PROOF NUMBERS ══ */
#proof{padding:9rem var(--site-pad);background:var(--bg2)}
.proof-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:rgba(5,23,71,.06);margin-top:4rem;border-radius:var(--r-lg);overflow:hidden}
.pf{background:var(--cream);padding:2.8rem 2rem;text-align:center}
.pfn{font-family:var(--fh);font-size:2.8rem;font-weight:400;letter-spacing:-.02em;color:var(--terra-dark);margin-bottom:.4rem}
.pfl{font-size:.78rem;color:var(--w3);line-height:1.5;font-weight:300}

/* ══ PROCESS — Staggered 2-col Grid ══ */
#process{padding:9rem var(--site-pad);background:var(--bg)}
.proc-row{display:grid;grid-template-columns:1fr 1fr;gap:2rem;margin-top:4rem;position:relative}
.ps{padding:2.4rem 2.6rem;border-radius:var(--r-md);background:var(--bg2);border:1.5px solid rgba(5,23,71,.07);position:relative;transition:background .3s,box-shadow .3s,transform .3s}
.ps:hover{background:#fff;box-shadow:0 12px 36px rgba(5,23,71,.07);transform:translateY(-3px)}
.ps:nth-child(even){margin-top:2.5rem}
.ps-step{font-size:.58rem;letter-spacing:.22em;text-transform:uppercase;color:var(--terra-dark);font-weight:700;margin-bottom:1rem;font-family:var(--ft)}
.ps-num{font-family:var(--fh);font-size:4rem;font-weight:400;letter-spacing:-.03em;color:rgba(5,23,71,.08);line-height:1;margin-bottom:.8rem;transition:color .3s}
.ps:hover .ps-num{color:rgba(5,23,71,.2)}
.ps-t{font-family:var(--fh);font-size:1.35rem;font-weight:400;letter-spacing:-.01em;margin-bottom:.6rem}
.ps-b{font-size:.85rem;color:var(--w2);line-height:1.76;font-weight:300}
/* CTA card spans full width */
.ps-cta{grid-column:1/-1;background:var(--w)!important;border-color:transparent!important;display:flex;align-items:center;justify-content:space-between;gap:2rem;margin-top:0}
.ps-cta:hover{background:var(--w)!important;transform:none!important;box-shadow:0 16px 48px rgba(5,23,71,.12)!important}
.ps-cta .ps-step,.ps-cta .ps-t,.ps-cta .ps-b{color:rgba(255,255,255,.7)!important}
.ps-cta .ps-t{color:#FEFEFE!important;font-size:1.6rem}
.ps-cta-btn{flex-shrink:0}

/* ══ WHO ITS FOR ══ */
#who{padding:9rem var(--site-pad);background:var(--bg2)}
.who-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:rgba(5,23,71,.06);margin-top:4rem;border-radius:var(--r-lg);overflow:hidden}
.wc{padding:4rem 3rem;background:var(--cream)}
.wc-h{font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;font-weight:700;margin-bottom:2rem;padding-bottom:1rem;border-bottom:1.5px solid rgba(5,23,71,.07);font-family:var(--ft)}
.wc-for .wc-h{color:#051747}
.wc-not .wc-h{color:var(--w3)}
.wi{display:flex;align-items:flex-start;gap:.9rem;padding:1.1rem 0;border-bottom:1px solid rgba(5,23,71,.07)}
.wi-f{color:#051747;font-size:.85rem;flex-shrink:0;margin-top:.1rem}
.wi-n{color:rgba(5,23,71,.3);font-size:.85rem;flex-shrink:0;margin-top:.1rem}
.wi span{font-size:.88rem;color:var(--w2);line-height:1.5}
.wi span strong{color:var(--w);font-weight:600}

/* ══ CLIENTS ══ */
/* ══ CLIENTS — warm earthy grid ══ */
#clients{padding:8rem var(--site-pad);font-family:var(--ft)}
.clients-hd-row{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:3.5rem;gap:2rem;flex-wrap:wrap}
.clients-hd-left{}
.clients-section-lbl{font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--terra-dark);font-weight:600;display:flex;align-items:center;gap:.6rem;margin-bottom:1rem;font-family:var(--ft)}
.clients-section-lbl::before{content:'';width:1.8rem;height:1.5px;background:var(--terra-dark);border-radius:2px}
.clients-title{font-family:var(--fh);font-size:clamp(2.2rem,4vw,3.8rem);font-weight:400;line-height:1.05;letter-spacing:-.01em;color:var(--w);margin-bottom:0}
.clients-sub{font-size:.85rem;color:var(--w3);max-width:320px;line-height:1.7;margin-top:.8rem;font-family:var(--fb)}

/* THE GRID */
.vyst-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:2px;margin-top:0}

/* Count card — left tall card */
.vyst-count-card{background:#E7E9F0;border:none;grid-column:span 1;grid-row:span 2;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:2.2rem 1.8rem;position:relative;overflow:hidden}
.vyst-count-card::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 30% 50%,rgba(83,95,128,.15) 0%,transparent 60%)}
.vyst-count-num{font-family:var(--fh);font-size:clamp(3.5rem,6vw,5.2rem);font-weight:400;line-height:.9;color:var(--terra-dark);letter-spacing:-.01em}
.vyst-count-lbl{font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(5,23,71,.5);margin-top:.6rem;font-family:var(--ft);font-weight:500}

/* Standard logo card */
.vyst-logo-card{background:var(--cream);border:none;outline:1.5px solid rgba(5,23,71,.06);min-height:100px;display:flex;align-items:center;justify-content:center;padding:1.6rem 1.2rem;position:relative;overflow:hidden;transition:background .35s;cursor:default}
.vyst-logo-card::before{content:'';position:absolute;inset:0;opacity:0;transition:opacity .35s;background:radial-gradient(ellipse at center,rgba(5,23,71,.08) 0%,transparent 65%)}
.vyst-logo-card:hover{background:#fff}
.vyst-logo-card:hover::before{opacity:1}
.vyst-logo-inner{display:flex;flex-direction:column;align-items:center;gap:.45rem}
.vyst-logo-name{font-family:var(--ft);font-size:.72rem;font-weight:500;color:rgba(5,23,71,.45);letter-spacing:.04em;text-align:center;line-height:1.3;transition:color .3s;text-transform:uppercase}
.vyst-logo-card:hover .vyst-logo-name{color:rgba(5,23,71,.9)}
.vyst-logo-mark{font-size:1.4rem;opacity:.65;transition:opacity .3s;line-height:1}
.vyst-logo-card:hover .vyst-logo-mark{opacity:.9}

/* YOU? card — full-width bottom row */
.vyst-you-card{grid-column:span 5;background:#051747;border:none;min-height:110px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;cursor:pointer;transition:background .35s}
.vyst-you-card::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 80% 100% at 50% 100%,rgba(255,255,255,.08) 0%,transparent 60%)}
.vyst-you-card:hover{background:#081F62}
.vyst-you-card::after{content:'';position:absolute;bottom:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);opacity:0;transition:opacity .35s}
.vyst-you-card:hover::after{opacity:1}
.vyst-morph-wrap{text-align:center;position:relative}
.vyst-morph-text{font-family:var(--fh);font-size:clamp(2rem,4.5vw,3.8rem);font-weight:400;letter-spacing:.02em;color:#fff;line-height:1;display:inline-block;transition:opacity .25s,transform .25s;position:relative;font-style:italic}
.vyst-morph-text.fade-out{opacity:0;transform:translateY(-8px)}
.vyst-morph-text.fade-in{opacity:1;transform:translateY(0)}
.vyst-you-sub{font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.6);margin-top:.55rem;font-family:var(--ft);transition:color .3s}
.vyst-you-card:hover .vyst-you-sub{color:rgba(255,255,255,.9)}

/* Stagger reveal */
.vyst-logo-card,.vyst-count-card,.vyst-you-card{opacity:0;transform:translateY(16px);transition:opacity .5s var(--ez),transform .5s var(--ez),background .35s}
.vyst-logo-card.revealed,.vyst-count-card.revealed,.vyst-you-card.revealed{opacity:1;transform:translateY(0)}

/* ══ PARTNERS — Exact dot-corner broken grid like reference image ══ */
#partners{padding:5rem var(--site-pad) 7rem;border-top:1px solid rgba(5,23,71,.07)}
.partners-section-lbl{font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--terra-dark);font-weight:600;display:flex;align-items:center;gap:.6rem;margin-bottom:3.5rem;font-family:var(--ft)}
.partners-section-lbl::before{content:'';width:1.8rem;height:1.5px;background:var(--terra-dark);border-radius:2px;flex-shrink:0}

/* The broken bento grid — 5 cols */
.dot-grid{display:grid;grid-template-columns:repeat(5,1fr);grid-auto-rows:130px;gap:0;position:relative;width:100%;overflow:hidden}

/* Each card — light bg, warm dot corners */
.dc{background:var(--cream);position:relative;display:flex;align-items:center;justify-content:center;padding:1.4rem;transition:background .3s}
.dc:hover{background:#fff}

/* Warm corner dots — all 4 corners */
.dc::before,.dc::after{content:'';position:absolute;width:7px;height:7px;border-radius:50%;background:#535F80;z-index:2;opacity:.9}
.dc::before{top:-3.5px;left:-3.5px}
.dc::after{top:-3.5px;right:-3.5px}
.dc .dc-bl,.dc .dc-br{content:'';position:absolute;width:7px;height:7px;border-radius:50%;background:#535F80;z-index:2;opacity:.9;pointer-events:none}
.dc .dc-bl{bottom:-3.5px;left:-3.5px}
.dc .dc-br{bottom:-3.5px;right:-3.5px}

/* Soft border lines between cards */
.dc{outline:1px solid rgba(5,23,71,.06)}

/* Empty cell — fully transparent, no bg */
.dc.empty{background:transparent;outline:none}
.dc.empty::before,.dc.empty::after{display:none}

/* Center label card */
.dc.label-card{background:transparent;outline:none;flex-direction:column;gap:.3rem;cursor:default}
.dc.label-card::before,.dc.label-card::after{display:none}
.dc-label-title{font-family:var(--fh);font-size:2rem;font-weight:400;color:var(--w);line-height:1;letter-spacing:-.01em}
.dc-label-sub{font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(5,23,71,.55);font-family:var(--ft);margin-top:.2rem}

/* Logo inside card */
.dc-logo-name{font-family:var(--ft);font-size:.78rem;font-weight:600;color:rgba(5,23,71,.5);letter-spacing:.06em;text-align:center;line-height:1.25;text-transform:uppercase;transition:color .3s}
.dc:hover .dc-logo-name{color:rgba(5,23,71,.9)}
.dc-logo-icon{font-size:1.6rem;margin-bottom:.35rem;display:block;text-align:center;line-height:1;transition:transform .3s}
.dc:hover .dc-logo-icon{transform:scale(1.08)}

/* Stagger — pure CSS animation, no JS dependency */
@keyframes dcfadein{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
.dc:not(.empty):not(.label-card){animation:dcfadein .5s var(--ez) both}
.dot-grid .dc:nth-child(1){animation-delay:.05s}.dot-grid .dc:nth-child(2){animation-delay:.1s}.dot-grid .dc:nth-child(3){animation-delay:.15s}.dot-grid .dc:nth-child(4){animation-delay:.2s}.dot-grid .dc:nth-child(5){animation-delay:.25s}.dot-grid .dc:nth-child(6){animation-delay:.3s}.dot-grid .dc:nth-child(7){animation-delay:.35s}.dot-grid .dc:nth-child(8){animation-delay:.4s}.dot-grid .dc:nth-child(9){animation-delay:.45s}.dot-grid .dc:nth-child(10){animation-delay:.5s}.dot-grid .dc:nth-child(11){animation-delay:.55s}.dot-grid .dc:nth-child(12){animation-delay:.6s}.dot-grid .dc:nth-child(13){animation-delay:.65s}.dot-grid .dc:nth-child(14){animation-delay:.7s}.dot-grid .dc:nth-child(15){animation-delay:.75s}

/* ══ SOCIAL MEDIA SECTION ══ */
#social-follow{padding:7rem var(--site-pad);display:grid;grid-template-columns:1fr 1fr;gap:6rem;align-items:center;border-top:1px solid rgba(5,23,71,.07);background:var(--bg2)}
.sf-left{position:relative;height:480px;display:flex;align-items:center;justify-content:center}
/* Reel card stack */
.reel-stack{position:relative;width:220px;height:420px}
.reel-card{position:absolute;inset:0;border-radius:var(--r-lg);overflow:hidden;background:var(--cream);border:1.5px solid rgba(5,23,71,.08);transition:all .7s cubic-bezier(.4,0,.2,1);box-shadow:0 8px 32px rgba(5,23,71,.08)}
.reel-card-inner{width:100%;height:100%;background:linear-gradient(160deg,#E7E9F0,#FEFEFE,#d4d8e8);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.8rem;padding:1.5rem}
.reel-card-inner .rc-icon{font-size:3rem;opacity:.7}
.reel-card-inner .rc-label{font-family:var(--ft);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(5,23,71,.55);text-align:center}
.reel-card-inner .rc-handle{font-family:var(--fh);font-size:1.1rem;color:rgba(5,23,71,.65);font-style:italic}
/* Card states: front=active, mid, back-stack */
.reel-card.rc-front{transform:translateX(0) rotate(0deg) scale(1);z-index:5;border-color:rgba(5,23,71,.3);opacity:1}
.reel-card.rc-mid1{transform:translateX(18px) rotate(4deg) scale(.93);z-index:4;opacity:.75}
.reel-card.rc-mid2{transform:translateX(32px) rotate(7deg) scale(.87);z-index:3;opacity:.55}
.reel-card.rc-back1{transform:translateX(44px) rotate(10deg) scale(.81);z-index:2;opacity:.35}
.reel-card.rc-back2{transform:translateX(54px) rotate(13deg) scale(.76);z-index:1;opacity:.18}
.reel-card.rc-exit{transform:translateX(-120px) rotate(-8deg) scale(.8);opacity:0;z-index:0;pointer-events:none}
/* Play indicator on front card */
.reel-card.rc-front .reel-card-inner{border:none}
.reel-card.rc-front::after{content:'▶';position:absolute;bottom:1rem;right:1rem;width:32px;height:32px;background:#051747;border-radius:50%;display:grid;place-items:center;font-size:.7rem;color:#ffffff}
/* Right side */
.sf-right{}
.sf-lbl{font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--terra-dark);font-weight:600;display:flex;align-items:center;gap:.6rem;margin-bottom:1.2rem;font-family:var(--ft)}
.sf-lbl::before{content:'';width:1.8rem;height:1.5px;background:var(--terra-dark);border-radius:2px}
.sf-title{font-family:var(--fh);font-size:clamp(2.8rem,5vw,4.5rem);font-weight:400;line-height:1;letter-spacing:-.01em;color:var(--w);margin-bottom:1.2rem}
.sf-title em{font-style:italic;color:var(--terra-dark)}
.sf-desc{font-size:.9rem;color:var(--w3);line-height:1.8;max-width:400px;margin-bottom:2.5rem;font-family:var(--fb);font-weight:300}
.sf-icons{display:flex;gap:.85rem;flex-wrap:wrap}
.sf-icon-btn{width:72px;height:72px;background:var(--cream);border:1.5px solid rgba(5,23,71,.08);border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;font-size:1.6rem;cursor:pointer;text-decoration:none;transition:all .28s;position:relative;overflow:hidden}
.sf-icon-btn:hover{transform:translateY(-4px);box-shadow:0 12px 28px rgba(5,23,71,.18);filter:brightness(1.08)}
@media(max-width:900px){
  #social-follow{grid-template-columns:1fr;gap:3rem;text-align:center}
  .sf-left{height:300px}
  .reel-stack{width:160px;height:300px}
  .sf-icons{justify-content:center}
  .sf-lbl{justify-content:center}
  .sf-lbl::before{display:none}
}

/* ══ TESTIMONIALS — Carousel ══ */
#testi{padding:9rem var(--site-pad);background:var(--bg)}
.testi-carousel-wrap{position:relative;margin-top:4rem;overflow:hidden}
.testi-track{display:flex;gap:20px;transition:transform .6s cubic-bezier(.4,0,.2,1)}
.tc{flex:0 0 auto;background:var(--cream);border-radius:var(--r-lg);padding:2.4rem;display:flex;flex-direction:column;gap:1.2rem;border:1.5px solid rgba(5,23,71,.06);transition:box-shadow .3s,background .3s;position:relative;overflow:hidden}
.tc::before{content:'❝';position:absolute;top:1rem;right:1.5rem;font-size:4rem;color:rgba(5,23,71,.08);font-family:var(--fh);line-height:1;pointer-events:none}
.tc:hover{box-shadow:0 16px 40px rgba(5,23,71,.09);background:#fff}
.tc-stars{display:flex;gap:.22rem}
.tc-star{color:#051747;font-size:.82rem}
.tc-q{font-size:.93rem;color:var(--w2);line-height:1.78;font-style:italic;flex:1;font-weight:300}
.tc-au{display:flex;align-items:center;gap:.7rem;margin-top:auto;padding-top:1.2rem;border-top:1.5px solid rgba(5,23,71,.06)}
.tc-av{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.78rem;font-weight:600;color:#fff;flex-shrink:0;font-family:var(--ft)}
.tc-n{font-size:.86rem;font-weight:600;font-family:var(--ft)}
.tc-br{font-size:.7rem;color:var(--w3)}
/* Carousel controls */
.testi-controls{display:flex;align-items:center;gap:1rem;margin-top:2rem;justify-content:center}
.testi-btn{width:44px;height:44px;border-radius:50%;border:1.5px solid rgba(5,23,71,.12);background:var(--cream);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .25s;font-size:1rem;color:var(--w);flex-shrink:0}
.testi-btn:hover{border-color:var(--terra-dark);background:var(--terra);color:#fff}
.testi-dots{display:flex;gap:.5rem;align-items:center}
.testi-dot{width:7px;height:7px;border-radius:50%;background:rgba(5,23,71,.15);transition:all .3s;cursor:pointer}
.testi-dot.active{background:#051747;width:22px;border-radius:4px}

/* ══ FAQ — Redesigned ══ */
#faq{padding:9rem var(--site-pad);background:var(--bg2)}
.faq-layout{display:grid;grid-template-columns:1fr 1.6fr;gap:8rem;align-items:start;margin-top:4rem}
.faq-left{}
.faq-left-lede{font-size:.95rem;color:var(--w3);line-height:1.78;font-weight:300;margin-bottom:2.5rem;max-width:300px}
.faq-left-cta{display:flex;flex-direction:column;gap:.8rem}
.faq-left-cta-h{font-family:var(--fh);font-size:1.3rem;font-weight:400;letter-spacing:-.01em;color:var(--w);line-height:1.2}
.faq-left-cta p{font-size:.82rem;color:var(--w3);line-height:1.6;font-weight:300}
.faq-right{}
.fi{border-bottom:1.5px solid rgba(5,23,71,.08);position:relative}
.fi:first-child{border-top:1.5px solid rgba(5,23,71,.08)}
.fq{width:100%;background:none;border:none;color:var(--w);font-family:var(--fb);font-size:.95rem;padding:1.5rem 0;text-align:left;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:2rem;font-weight:500;transition:color .2s}
.fq:hover{color:#535F80}
.fi.op .fq{color:#051747}
.ft{width:26px;height:26px;border-radius:50%;border:1.5px solid rgba(5,23,71,.15);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:.85rem;transition:all .3s;color:var(--w3)}
.fi.op .ft{transform:rotate(45deg);border-color:var(--terra-dark);background:var(--terra);color:#fff}
.fa{font-size:.88rem;color:var(--w2);line-height:1.82;max-height:0;overflow:hidden;transition:max-height .42s var(--ez),padding .3s;font-weight:300}
.fi.op .fa{max-height:300px;padding-bottom:1.6rem}
/* FAQ number badge */
.fq-num{font-size:.62rem;letter-spacing:.14em;color:var(--terra-dark);font-weight:700;font-family:var(--ft);min-width:28px;opacity:.6}
.fq-txt{flex:1}
@media(max-width:900px){
  .faq-layout{grid-template-columns:1fr;gap:3rem}
  .faq-left-lede{max-width:100%}
}

/* ══ FINAL CTA ══ */
#fcta{padding:11rem var(--site-pad);text-align:center;position:relative;overflow:hidden;background:var(--bg)}
#fcta::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 65% 75% at 50% 50%,rgba(5,23,71,.08)0%,transparent 68%)}
#fcta::after{content:'';position:absolute;top:0;left:0;right:0;height:1.5px;background:linear-gradient(90deg,transparent,#535F80,transparent)}
.fcta-h{font-family:var(--fh);font-size:clamp(2rem,4.5vw,5rem);font-weight:400;line-height:1.05;letter-spacing:-.02em;max-width:880px;margin:0 auto 1.8rem;position:relative}
.fcta-sub{font-size:1rem;color:var(--w3);margin-bottom:3rem;position:relative;font-style:italic;font-weight:300}
.fcta-btns{display:flex;gap:1rem;justify-content:center;position:relative}
.fcta-note{font-size:.7rem;color:var(--w3);margin-top:1.4rem;position:relative;letter-spacing:.06em;font-family:var(--ft)}

/* ══ ABOUT PAGE ══ */
#ab-hero{min-height:100vh;position:relative;display:flex;flex-direction:column;justify-content:flex-end;padding:0 var(--site-pad) 8rem;overflow:hidden}
.ab-bg-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(5,23,71,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(5,23,71,.05) 1px,transparent 1px);background-size:70px 70px;animation:gd 22s linear infinite;z-index:0}
@keyframes gd{from{transform:translateY(0)}to{transform:translateY(70px)}}
.ab-bg-glow{position:absolute;inset:0;background:radial-gradient(ellipse 55% 50% at 70% 35%,rgba(83,95,128,.12)0%,transparent 60%),radial-gradient(ellipse 40% 40% at 20% 65%,rgba(83,95,128,.15)0%,transparent 60%);z-index:0}
.ab-bg-fade{position:absolute;inset:0;background:linear-gradient(180deg,var(--bg)0%,transparent 25%,transparent 72%,var(--bg)100%);z-index:0}
.ab-con{position:relative;z-index:1}
.ab-h1{font-family:var(--fh);font-size:clamp(3.2rem,8vw,9rem);font-weight:400;line-height:.93;letter-spacing:-.01em;margin-bottom:2.8rem}
.ab-h1 em{font-style:italic;color:var(--terra-dark)}
.ab-intro{max-width:620px;font-size:1.08rem;line-height:1.78;color:var(--w2);font-weight:300}

#ab-mani{padding:8rem var(--site-pad);background:var(--bg2)}
.mpills{display:flex;flex-direction:column;gap:2px;background:rgba(5,23,71,.06);margin-top:4rem;border-radius:var(--r-lg);overflow:hidden}
.mp{background:var(--cream);padding:3rem;display:grid;grid-template-columns:220px 1fr;gap:4rem;align-items:start;transition:background .3s;cursor:default}
.mp:hover{background:#fff}
.mp-tag{font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--terra-dark);font-weight:600;margin-bottom:.6rem;font-family:var(--ft)}
.mp-lbl{font-family:var(--fh);font-size:1.45rem;font-weight:400;letter-spacing:-.01em;line-height:1.15}
.mp-body{font-size:.93rem;color:var(--w2);line-height:1.78;font-weight:300}

#ab-vals{padding:8rem var(--site-pad);background:var(--bg)}
.ab-vg{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:rgba(5,23,71,.06);margin-top:4rem;border-radius:var(--r-lg);overflow:hidden}
.abv{background:var(--cream);padding:3.5rem}
.abv-h{font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;font-weight:700;padding-bottom:1.4rem;border-bottom:1.5px solid rgba(5,23,71,.07);margin-bottom:2rem;font-family:var(--ft)}
.abv-for .abv-h{color:#051747}
.abv-ag .abv-h{color:var(--w3)}
.avi{display:flex;gap:1rem;padding:1rem 0;border-bottom:1px solid rgba(5,23,71,.07);align-items:flex-start}
.avi:last-child{border-bottom:none}
.ck{color:#051747;flex-shrink:0;margin-top:.1rem}
.cx{color:rgba(5,23,71,.3);flex-shrink:0;margin-top:.1rem}
.avi span{font-size:.87rem;color:var(--w2);line-height:1.55}
.avi span strong{color:var(--w);font-weight:600}

#ab-global{padding:8rem var(--site-pad);background:var(--bg2)}
.globe-g{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:rgba(5,23,71,.06);margin-top:4rem;border-radius:var(--r-lg);overflow:hidden}
.gcity{background:var(--cream);padding:3rem 2.2rem;transition:background .4s}
.gcity:hover{background:#fff}
.gcity-dot{width:8px;height:8px;border-radius:50%;background:var(--terra);margin-bottom:1.5rem;box-shadow:0 0 8px rgba(5,23,71,.3);animation:cp 2.8s ease-in-out infinite}
@keyframes cp{0%,100%{box-shadow:0 0 6px rgba(83,95,128,.3)}50%{box-shadow:0 0 20px rgba(83,95,128,.6)}}
.gcity-n{font-family:var(--fh);font-size:1.7rem;font-weight:400;letter-spacing:-.02em;margin-bottom:.25rem}
.gcity-c{font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--terra-dark);font-weight:600;margin-bottom:.7rem;font-family:var(--ft)}
.gcity-d{font-size:.8rem;color:var(--w3);line-height:1.6;font-weight:300}

#ab-why{padding:8rem var(--site-pad);background:var(--bg)}
.ab-why-grid{display:grid;grid-template-columns:1fr 1fr;gap:8rem;align-items:center;margin-top:4rem}
.ab-why-q{font-family:var(--fh);font-size:clamp(1.6rem,2.8vw,3rem);font-weight:400;line-height:1.1;letter-spacing:-.01em;margin-bottom:2rem}
.ab-why-q em{font-style:italic;color:var(--terra-dark)}
.ab-why-body{font-size:.88rem;color:var(--w3);line-height:1.78;margin-bottom:2.5rem;font-weight:300}
.wpts{display:flex;flex-direction:column}
.wpt{padding:1.2rem 0;border-bottom:1.5px solid rgba(5,23,71,.07);display:flex;gap:1.1rem;align-items:flex-start}
.wpt:first-child{border-top:1.5px solid rgba(5,23,71,.07)}
.wpt-ic{width:26px;height:26px;border-radius:6px;background:rgba(5,23,71,.1);border:1.5px solid rgba(5,23,71,.2);display:flex;align-items:center;justify-content:center;font-size:.68rem;flex-shrink:0;margin-top:.1rem;color:var(--terra-dark)}
.wpt-t{font-size:.88rem;font-weight:600;margin-bottom:.18rem}
.wpt-b{font-size:.8rem;color:var(--w3);line-height:1.55;font-weight:300}

/* ══ SERVICES PAGE ══ */
/* ══ SERVICES PAGE — COLORFUL PLAYFUL REDESIGN ══ */

/* ── Hero ── */
#sv-hero{
  padding:10rem var(--site-pad) 6rem;
  position:relative;overflow:hidden;
  min-height:72vh;
  display:flex;flex-direction:column;justify-content:flex-end;
  background:var(--bg);
}
.sv-bg{
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse 50% 60% at 10% 80%,rgba(5,23,71,.13)0%,transparent 55%),
    radial-gradient(ellipse 40% 50% at 85% 20%,rgba(83,95,128,.1)0%,transparent 55%),
    radial-gradient(ellipse 35% 45% at 60% 70%,rgba(83,95,128,.07)0%,transparent 55%);
}
/* Confetti dots */
.sv-bg::before{
  content:'';position:absolute;inset:0;
  background-image:
    radial-gradient(circle,rgba(5,23,71,.35) 2px,transparent 2px),
    radial-gradient(circle,rgba(83,95,128,.3) 2px,transparent 2px),
    radial-gradient(circle,rgba(83,95,128,.25) 2px,transparent 2px),
    radial-gradient(circle,rgba(5,23,71,.3) 2px,transparent 2px);
  background-size:120px 120px,160px 160px,90px 90px,200px 200px;
  background-position:10px 10px,60px 30px,20px 80px,100px 60px;
  opacity:.5;
}
.sv-h1{
  font-family:var(--fh);
  font-size:clamp(3rem,8vw,9rem);
  font-weight:400;line-height:.9;letter-spacing:-.01em;
  margin-bottom:2rem;position:relative;z-index:1;
}
.sv-h1 em{font-style:italic;color:var(--terra-dark)}
.sv-sub{max-width:540px;font-size:1rem;color:var(--w2);line-height:1.78;position:relative;z-index:1;font-weight:300}

/* Floating shape stickers */
.sv-sticker{
  position:absolute;z-index:2;pointer-events:none;
  font-family:var(--ft);font-size:.68rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;
  border-radius:100px;padding:.45rem 1.1rem;
  white-space:nowrap;
}
.sv-sticker-1{background:var(--terra);color:#051747;top:22%;right:8%;transform:rotate(6deg);animation:svfl1 5s ease-in-out infinite;box-shadow:0 8px 28px rgba(83,95,128,.4)}
.sv-sticker-2{background:#E7E9F0;color:#051747;top:38%;right:4%;transform:rotate(-4deg);animation:svfl2 6s ease-in-out 1s infinite;box-shadow:0 6px 20px rgba(5,23,71,.1)}
.sv-sticker-3{background:#535F80;color:#ffffff;bottom:28%;right:14%;transform:rotate(3deg);animation:svfl1 7s ease-in-out .5s infinite;box-shadow:0 6px 20px rgba(5,23,71,.1)}
@keyframes svfl1{0%,100%{transform:rotate(6deg) translateY(0)}50%{transform:rotate(6deg) translateY(-10px)}}
@keyframes svfl2{0%,100%{transform:rotate(-4deg) translateY(0)}50%{transform:rotate(-4deg) translateY(8px)}}

/* Squiggly underline on hero */
.sv-squig{display:inline-block;position:relative}
.sv-squig::after{
  content:'';position:absolute;bottom:-8px;left:0;right:0;height:12px;
  background:url("data:image/svg+xml,%3Csvg width='120' height='12' viewBox='0 0 120 12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 6 Q15 0 30 6 Q45 12 60 6 Q75 0 90 6 Q105 12 120 6' stroke='%23535F80' stroke-width='2.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x center/60px 12px;
}

/* ── SERVICE SECTIONS (Full-width colorful blocks) ── */
#sv-list{padding:0}

.sv-section{
  display:grid;grid-template-columns:1fr 1fr;
  min-height:600px;position:relative;overflow:hidden;
}
.sv-section:nth-child(even){direction:rtl}
.sv-section:nth-child(even) .sv-sec-content{direction:ltr}
.sv-section:nth-child(even) .sv-sec-visual{direction:ltr}

/* Color themes per section */
.sv-section-1{background:var(--bg)}
.sv-section-2{background:var(--w)}
.sv-section-3{background:#d4d8e8}
.sv-section-4{background:var(--w)}

/* Left content panel */
.sv-sec-content{
  padding:5rem var(--site-pad) 5rem;
  display:flex;flex-direction:column;justify-content:center;
  position:relative;z-index:1;
}
.sv-sec-num{
  font-family:var(--fh);
  font-size:8rem;font-weight:400;
  line-height:1;letter-spacing:-.04em;
  margin-bottom:.5rem;
  opacity:.1;
  position:absolute;top:3rem;right:2rem;
}
.sv-sec-tag{
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;font-weight:700;
  border-radius:100px;padding:.35rem .9rem;
  margin-bottom:1.8rem;width:fit-content;
}
.sv-sec-tag-1{background:rgba(83,95,128,.12);color:var(--terra-dark);border:1.5px solid rgba(5,23,71,.2)}
.sv-sec-tag-2{background:rgba(83,95,128,.12);color:#051747;border:1.5px solid rgba(5,23,71,.2)}
.sv-sec-tag-3{background:rgba(5,23,71,.1);color:#051747;border:1.5px solid rgba(5,23,71,.2)}
.sv-sec-tag-4{background:rgba(83,95,128,.12);color:#535F80;border:1.5px solid rgba(83,95,128,.25)}

.sv-sec-name{
  font-family:var(--fh);
  font-size:clamp(2rem,3.5vw,3.8rem);
  font-weight:400;line-height:1.0;letter-spacing:-.02em;
  margin-bottom:1.2rem;color:var(--w);
}
.sv-sec-name em{font-style:italic;color:var(--terra-dark)}
/* section 2 & 4 are dark bg — use light text */
.sv-section-2 .sv-sec-name{color:#FEFEFE}
.sv-section-4 .sv-sec-name{color:#FEFEFE}
/* section 3 is light bg — use dark text */
.sv-section-3 .sv-sec-name{color:#051747}

.sv-sec-tagline{
  font-family:var(--fh);font-style:italic;
  font-size:1.15rem;color:var(--terra-dark);
  margin-bottom:1.2rem;letter-spacing:-.01em;
}
.sv-sec-desc{
  font-size:.9rem;line-height:1.82;font-weight:300;
  margin-bottom:2rem;
  color:var(--w2);
}
/* sections 2 & 4 dark bg — light description text */
.sv-section-2 .sv-sec-desc,
.sv-section-4 .sv-sec-desc{color:rgba(253,252,249,.65)}
/* section 3 light bg — dark description text */
.sv-section-3 .sv-sec-desc{color:rgba(5,23,71,.65)}

.sv-sec-best{
  font-size:.76rem;
  padding:.7rem 1.1rem;
  border-left:3px solid var(--terra);
  margin-bottom:2rem;
  border-radius:0 8px 8px 0;
  font-style:italic;
  color:var(--w3);
}
/* sections 2 & 4 dark bg — light best-for text */
.sv-section-2 .sv-sec-best,
.sv-section-4 .sv-sec-best{
  color:rgba(255,255,255,.5);
  background:rgba(5,23,71,.08);
}
/* section 3 light bg — dark best-for text */
.sv-section-3 .sv-sec-best{
  color:rgba(5,23,71,.42);
  background:rgba(5,23,71,.04);
}

/* Right visual panel */
.sv-sec-visual{
  position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  padding:4rem 3rem;
}

/* Visual panel backgrounds */
.sv-vis-1{background:linear-gradient(145deg,#051747,#535F80)}
.sv-vis-2{background:linear-gradient(145deg,#051747,#081F62)}
.sv-vis-3{background:linear-gradient(145deg,#535F80,#051747)}
.sv-vis-4{background:linear-gradient(145deg,#081F62,#535F80)}

/* Big visual illustration display */
.sv-vis-emoji{
  width:220px;height:220px;
  filter:drop-shadow(0 24px 48px rgba(0,0,0,.3));
  animation:svbob 3s ease-in-out infinite;
  position:relative;z-index:2;
  display:flex;align-items:center;justify-content:center;
}
.sv-vis-emoji svg{width:100%;height:100%}
@keyframes svbob{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-16px) rotate(2deg)}}

/* Decorative shapes inside visual */
.sv-vis-circle{
  position:absolute;border-radius:50%;background:rgba(255,255,255,.1);
}
.sv-vis-circle-1{width:300px;height:300px;top:-80px;right:-80px}
.sv-vis-circle-2{width:180px;height:180px;bottom:-40px;left:-40px;background:rgba(0,0,0,.08)}
.sv-vis-badge{
  position:absolute;bottom:2.5rem;right:2.5rem;z-index:3;
  background:rgba(255,255,255,.92);border-radius:20px;
  padding:1.1rem 1.4rem;
  box-shadow:0 12px 32px rgba(5,23,71,.15);
  font-family:var(--fh);
}
.sv-vis-badge-num{font-size:2rem;color:var(--terra-dark);letter-spacing:-.03em;line-height:1}
.sv-vis-badge-lbl{font-size:.62rem;color:rgba(5,23,71,.45);letter-spacing:.08em;text-transform:uppercase;font-family:var(--ft);margin-top:.2rem}

.sv-vis-pill{
  position:absolute;top:2rem;left:2rem;z-index:3;
  background:rgba(255,255,255,.92);border-radius:100px;
  padding:.45rem 1rem;font-size:.65rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;
  color:var(--w);box-shadow:0 6px 20px rgba(0,0,0,.12);
}

/* Includes list - styled as chips */
.sv-sec-inc{margin-top:1rem}
.sv-sec-inc-lbl{
  font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;
  font-weight:700;color:var(--terra-dark);margin-bottom:.8rem;
}
.sv-inc-chips{display:flex;flex-wrap:wrap;gap:.5rem}
.sv-chip{
  font-size:.74rem;font-weight:500;
  padding:.4rem .9rem;border-radius:100px;
  background:rgba(5,23,71,.1);color:var(--terra-dark);
  border:1.5px solid rgba(5,23,71,.18);
  transition:all .2s;
}
.sv-section-2 .sv-chip,
.sv-section-3 .sv-chip{
  background:rgba(5,23,71,.08);
  border-color:rgba(5,23,71,.15);
}
.sv-chip:hover{background:#051747;color:#ffffff}

/* CTA button in section */
.sv-sec-cta{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.82rem 1.9rem;
  background:var(--terra);color:#fff;
  border-radius:100px;font-family:var(--ft);font-size:.78rem;font-weight:600;
  letter-spacing:.06em;text-decoration:none;
  transition:all .28s;margin-top:1.8rem;
}
.sv-sec-cta:hover{background:var(--w);color:var(--terra-dark);transform:translateY(-2px);box-shadow:0 8px 28px rgba(5,23,71,.3)}

/* Divider zigzag between sections */
.sv-zigzag{
  height:60px;position:relative;overflow:hidden;
  background:var(--w);
}
.sv-zigzag::before{
  content:'';position:absolute;
  bottom:0;left:0;right:0;
  height:60px;
  background:linear-gradient(135deg,var(--bg) 25%,transparent 25%),
             linear-gradient(225deg,var(--bg) 25%,transparent 25%),
             linear-gradient(315deg,var(--bg) 25%,transparent 25%),
             linear-gradient(45deg,var(--bg) 25%,transparent 25%);
  background-size:40px 60px;
  background-position:0 0,0 0,20px 0,20px 0;
}

/* ── NOT SURE CTA section ── */
.sv-bottom-cta{
  padding:8rem var(--site-pad);
  text-align:center;
  position:relative;overflow:hidden;
  background:var(--bg2);
  border-top:1.5px solid rgba(5,23,71,.07);
}
.sv-bottom-cta::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 55% 65% at 50% 50%,rgba(5,23,71,.1)0%,transparent 60%);
}
.sv-bottom-cta-eyebrow{
  font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--terra-dark);font-weight:700;margin-bottom:1.4rem;
  display:flex;align-items:center;justify-content:center;gap:.8rem;
}
.sv-bottom-cta-eyebrow::before,.sv-bottom-cta-eyebrow::after{content:'✦';font-size:.5rem}
.sv-bottom-cta h2{
  font-family:var(--fh);
  font-size:clamp(2.2rem,4.5vw,5rem);
  font-weight:400;letter-spacing:-.02em;
  line-height:1.05;margin-bottom:1.4rem;color:var(--w);
}
.sv-bottom-cta p{
  font-size:.93rem;color:var(--w2);
  max-width:480px;margin:0 auto 2.4rem;line-height:1.72;font-weight:300;
}

/* ── RESPONSIVE ── */
@media(max-width:900px){
  .sv-section{grid-template-columns:1fr;min-height:auto}
  .sv-section:nth-child(even){direction:ltr}
  .sv-sec-content{padding:4rem var(--site-pad)}
  .sv-sec-visual{min-height:280px}
  .sv-vis-emoji{font-size:7rem}
  .sv-sec-num{font-size:5rem;top:1.5rem;right:1rem}
  .sv-sticker-1,.sv-sticker-2,.sv-sticker-3{display:none}
}

/* ══ WORK PAGE — NEW MAGAZINE STYLE ══ */
#wk-hero{
  padding:10rem var(--site-pad) 4rem;
  position:relative;overflow:hidden;
  background:var(--bg);
  min-height:52vh;display:flex;flex-direction:column;justify-content:flex-end;
}
.wk-bg-dark{position:absolute;inset:0;background:radial-gradient(ellipse 60% 70% at 80% 30%,rgba(83,95,128,.12)0%,transparent 55%)}
.wk-big-num{
  position:absolute;top:3rem;right:var(--site-pad);
  font-family:var(--fh);font-size:clamp(8rem,18vw,22rem);
  font-weight:400;letter-spacing:-.05em;line-height:1;
  color:rgba(5,23,71,.06);pointer-events:none;user-select:none;
}
.wk-h1{
  font-family:var(--fh);font-size:clamp(3.2rem,7.5vw,9rem);
  font-weight:400;line-height:.88;letter-spacing:-.025em;
  margin-bottom:2rem;position:relative;z-index:1;color:var(--w);
}
.wk-h1 em{font-style:italic;color:var(--terra-dark)}
.wk-sub{max-width:550px;font-size:.95rem;color:var(--w2);line-height:1.78;position:relative;z-index:1;margin-bottom:0;font-weight:300}
.wk-hero-row{display:flex;align-items:flex-end;justify-content:space-between;gap:3rem;position:relative;z-index:1}
.wk-hero-stats{display:flex;gap:3rem;flex-shrink:0}
.wk-hero-stat-n{font-family:var(--fh);font-size:2.2rem;color:var(--terra-dark);letter-spacing:-.03em;line-height:1}
.wk-hero-stat-l{font-size:.6rem;color:var(--w3);letter-spacing:.1em;text-transform:uppercase;font-family:var(--ft);margin-top:.2rem}

/* Filter bar */
.wk-filter-bar{
  background:var(--bg);border-bottom:1.5px solid rgba(5,23,71,.07);
  padding:1.2rem var(--site-pad);
  display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;
  position:sticky;top:60px;z-index:90;
}
.wfb{font-family:var(--ft);font-size:.7rem;padding:.4rem 1rem;border-radius:100px;border:1.5px solid rgba(5,23,71,.12);background:transparent;color:var(--w3);transition:all .22s;letter-spacing:.08em;font-weight:600;text-transform:uppercase}
.wfb.on,.wfb:hover{background:var(--terra);color:#fff;border-color:var(--terra-dark)}

/* Magazine grid */
#wk-grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:3px;
  background:rgba(5,23,71,.06);
  padding:3px;
}
.wcard{
  background:var(--cream);
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;justify-content:flex-end;
  min-height:380px;
  transition:background .35s;
}
/* Magazine layout — varying sizes */
.wcard:nth-child(1){grid-column:span 5;min-height:480px}
.wcard:nth-child(2){grid-column:span 4;min-height:480px}
.wcard:nth-child(3){grid-column:span 3;min-height:480px}
.wcard:nth-child(4){grid-column:span 3;min-height:360px}
.wcard:nth-child(5){grid-column:span 5;min-height:360px}
.wcard:nth-child(6){grid-column:span 4;min-height:360px}
.wcard:nth-child(7){grid-column:span 4;min-height:360px}
.wcard:nth-child(8){grid-column:span 4;min-height:360px}
.wcard:nth-child(9){grid-column:span 4;min-height:360px}

/* Visual background panel */
.wcard-vis{
  position:absolute;inset:0;
  transition:transform .55s cubic-bezier(.25,.46,.45,.94);
}
.wcard:hover .wcard-vis{transform:scale(1.04)}

/* Gradient overlay so text is always readable */
.wcard-ov{
  position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 30%,rgba(8,31,98,.85)100%);
  transition:opacity .35s;
}
.wcard:hover .wcard-ov{opacity:.9}

/* Card content */
.wcard-body{
  position:relative;z-index:2;
  padding:2.2rem 2rem 2rem;
  transform:translateY(8px);
  transition:transform .35s;
}
.wcard:hover .wcard-body{transform:translateY(0)}
.wcard-ind{font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(253,252,249,.55);font-weight:700;font-family:var(--ft);margin-bottom:.5rem}
.wcard-t{font-family:var(--fh);font-size:1.45rem;font-weight:400;letter-spacing:-.02em;line-height:1.05;color:#FEFEFE;margin-bottom:.5rem}
.wcard-d{font-size:.78rem;color:rgba(255,255,255,.6);line-height:1.6;font-weight:300;max-height:0;overflow:hidden;transition:max-height .4s,opacity .4s;opacity:0}
.wcard:hover .wcard-d{max-height:80px;opacity:1}
.wcard-pills{display:flex;gap:.35rem;flex-wrap:wrap;margin-top:.8rem}
.wpill{font-size:.58rem;padding:.2rem .6rem;border-radius:100px;border:1px solid rgba(253,252,249,.25);color:rgba(255,255,255,.6);letter-spacing:.05em;font-family:var(--ft);backdrop-filter:blur(4px)}

/* Open arrow */
.wcard-arr{
  position:absolute;top:1.5rem;right:1.5rem;z-index:3;
  width:36px;height:36px;border-radius:50%;
  background:rgba(255,255,255,.1);backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.2);
  display:flex;align-items:center;justify-content:center;
  font-size:.82rem;color:#fff;
  transform:scale(0) rotate(-45deg);transition:transform .3s;
}
.wcard:hover .wcard-arr{transform:scale(1) rotate(0deg)}

/* Category color tints on the visual bg */
.wcard-vis-social{background:linear-gradient(145deg,#051747,#081F62)}
.wcard-vis-branding{background:linear-gradient(145deg,#051747,#535F80)}
.wcard-vis-strategy{background:linear-gradient(145deg,#081F62,#051747)}
.wcard-vis-events{background:linear-gradient(145deg,#081F62,#535F80)}
.wcard-vis-global{background:linear-gradient(145deg,#030d3b,#051747)}

/* SVG pattern overlays on cards */
.wcard-pat{position:absolute;inset:0;opacity:.18}

/* ══ WORK POPUP MODAL ══ */
#wk-modal{
  position:fixed;inset:0;z-index:9800;
  display:flex;align-items:center;justify-content:center;
  padding:2rem;
  opacity:0;pointer-events:none;
  transition:opacity .35s;
}
#wk-modal.open{opacity:1;pointer-events:all}
.wk-modal-bg{
  position:absolute;inset:0;
  background:rgba(5,23,71,.88);
  backdrop-filter:blur(20px);
}
.wk-modal-box{
  position:relative;z-index:1;
  width:100%;max-width:1000px;
  background:var(--bg);
  border-radius:24px;
  overflow:hidden;
  display:grid;grid-template-columns:1fr 1fr;
  box-shadow:0 40px 120px rgba(5,23,71,.5);
  transform:translateY(24px) scale(.97);
  transition:transform .4s cubic-bezier(.25,.46,.45,.94);
  max-height:90vh;
}
#wk-modal.open .wk-modal-box{transform:translateY(0) scale(1)}

/* Left visual panel */
.wk-modal-vis{
  position:relative;min-height:500px;
  display:flex;align-items:flex-end;
  overflow:hidden;
}
.wk-modal-vis-bg{
  position:absolute;inset:0;
  transition:background .4s;
}
.wk-modal-vis-ov{
  position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 30%,rgba(5,23,71,.9)100%);
}
.wk-modal-vis-content{position:relative;z-index:2;padding:2.5rem}
.wk-modal-num{
  font-family:var(--fh);font-size:5rem;font-weight:400;
  color:rgba(255,255,255,.08);letter-spacing:-.05em;
  position:absolute;top:1.5rem;left:2rem;line-height:1;
  pointer-events:none;
}
.wk-modal-cat{
  font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.5);font-weight:700;font-family:var(--ft);
  margin-bottom:.6rem;
}
.wk-modal-title{
  font-family:var(--fh);font-size:2.4rem;font-weight:400;
  color:#FEFEFE;letter-spacing:-.03em;line-height:1;
  margin-bottom:.5rem;
}
.wk-modal-tagline{
  font-size:.82rem;color:rgba(255,255,255,.5);
  font-style:italic;font-family:var(--fb);
}
/* SVG illustration inside modal */
.wk-modal-svg-wrap{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-60%);
  width:220px;height:220px;opacity:.35;
  pointer-events:none;
}

/* Right content panel */
.wk-modal-content{
  padding:3rem 2.8rem;
  overflow-y:auto;
  display:flex;flex-direction:column;gap:2rem;
  background:var(--bg);
}
.wk-modal-close{
  position:absolute;top:1.4rem;right:1.4rem;z-index:10;
  width:38px;height:38px;border-radius:50%;
  background:rgba(5,23,71,.08);border:1.5px solid rgba(5,23,71,.12);
  display:flex;align-items:center;justify-content:center;
  font-size:.9rem;color:var(--w3);transition:all .2s;
}
.wk-modal-close:hover{background:var(--terra);border-color:var(--terra-dark);color:#fff}

.wk-modal-label{font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;color:var(--terra-dark);font-weight:700;font-family:var(--ft);margin-bottom:.7rem}
.wk-modal-desc{font-size:.88rem;color:var(--w2);line-height:1.82;font-weight:300}
.wk-modal-tags{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:1rem}
.wk-modal-tag{
  font-size:.68rem;padding:.3rem .8rem;border-radius:100px;
  background:rgba(5,23,71,.1);color:var(--terra-dark);
  border:1.5px solid rgba(5,23,71,.2);font-family:var(--ft);
  letter-spacing:.06em;font-weight:600;
}
.wk-modal-results{
  display:grid;grid-template-columns:1fr 1fr;gap:1rem;
}
.wk-modal-result{
  background:var(--bg2);border-radius:12px;padding:1.2rem;
  border:1.5px solid rgba(5,23,71,.06);
}
.wk-modal-result-n{font-family:var(--fh);font-size:2rem;color:var(--terra-dark);letter-spacing:-.03em;line-height:1}
.wk-modal-result-l{font-size:.62rem;color:var(--w3);letter-spacing:.06em;margin-top:.2rem;font-family:var(--ft)}

/* Nav arrows */
.wk-modal-nav{display:flex;gap:.6rem;margin-top:auto;padding-top:1.5rem;border-top:1.5px solid rgba(5,23,71,.07)}
.wk-nav-btn{
  width:44px;height:44px;border-radius:50%;
  border:1.5px solid rgba(5,23,71,.15);background:transparent;
  display:flex;align-items:center;justify-content:center;
  font-size:1rem;color:var(--w3);transition:all .25s;
}
.wk-nav-btn:hover{background:var(--terra);border-color:var(--terra-dark);color:#fff}
.wk-modal-counter{font-size:.72rem;color:var(--w3);letter-spacing:.08em;font-family:var(--ft);display:flex;align-items:center;gap:.8rem;flex:1}
.wk-modal-cta{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.7rem 1.5rem;background:var(--terra);color:#fff;
  border-radius:100px;font-family:var(--ft);font-size:.74rem;font-weight:600;
  letter-spacing:.06em;text-decoration:none;transition:all .25s;
}
.wk-modal-cta:hover{background:var(--w);transform:translateY(-2px)}

/* bottom archive bar */
.wk-archive-bar{
  background:var(--bg2);border-top:1.5px solid rgba(5,23,71,.07);
  padding:1.4rem var(--site-pad);
  display:flex;justify-content:space-between;align-items:center;
  gap:1rem;
}
.wk-archive-txt{font-size:.75rem;color:var(--w3);font-style:italic}

@media(max-width:900px){
  #wk-grid{grid-template-columns:1fr 1fr}
  .wcard:nth-child(n){grid-column:span 1;min-height:280px}
  .wcard:nth-child(1){grid-column:span 2;min-height:340px}
  .wk-modal-box{grid-template-columns:1fr;max-height:92vh}
  .wk-modal-vis{min-height:220px}
  .wk-modal-svg-wrap{width:140px;height:140px}
  .wk-hero-row{flex-direction:column;align-items:flex-start;gap:2rem}
}
@media(max-width:600px){
  #wk-grid{grid-template-columns:1fr}
  .wcard:nth-child(n){grid-column:span 1;min-height:240px}
  #wk-modal{padding:.5rem}
  .wk-modal-box{border-radius:16px}
  .wk-modal-content{padding:1.8rem 1.5rem}
  .wk-modal-results{grid-template-columns:1fr 1fr}
  .wk-modal-title{font-size:1.8rem}
}

/* ══ CONTACT PAGE ══ */
#ct-hero{padding:10rem var(--site-pad) 4.5rem;position:relative;overflow:hidden;background:var(--bg)}
.ct-bg{position:absolute;inset:0;background:radial-gradient(ellipse 50% 55% at 60% 38%,rgba(5,23,71,.08)0%,transparent 60%)}
.ct-h1{font-family:var(--fh);font-size:clamp(3rem,7vw,8rem);font-weight:400;line-height:.9;letter-spacing:-.01em;margin-bottom:2rem;position:relative;z-index:1}
.ct-h1 em{font-style:italic;color:var(--terra-dark)}
.ct-layout{display:grid;grid-template-columns:1fr 1.3fr;gap:8rem;padding:2rem var(--site-pad) 8rem;align-items:start}
.ct-info h2{font-family:var(--fh);font-size:clamp(1.5rem,2.5vw,2.4rem);font-weight:400;letter-spacing:-.01em;margin-bottom:1.4rem}
.ct-body{font-size:.9rem;line-height:1.78;color:var(--w2);margin-bottom:3rem;font-weight:300}
.ctd{display:flex;gap:1rem;padding:1.15rem 0;border-bottom:1.5px solid rgba(5,23,71,.07);align-items:flex-start}
.ctd:first-of-type{border-top:1.5px solid rgba(5,23,71,.07)}
.ctd-ic{width:32px;height:32px;border-radius:6px;background:rgba(5,23,71,.1);border:1.5px solid rgba(5,23,71,.2);display:flex;align-items:center;justify-content:center;font-size:.78rem;flex-shrink:0;color:var(--terra-dark)}
.ctd strong{display:block;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--w3);margin-bottom:.15rem;font-family:var(--ft)}
.ctd span{font-size:.83rem;color:var(--w2)}
.ct-form{background:var(--cream);border:1.5px solid rgba(5,23,71,.07);padding:2.8rem;border-radius:var(--r-md)}
.flbl{display:block;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--w3);margin-bottom:.48rem;font-weight:600;font-family:var(--ft)}
.finp,.fsel,.fta{width:100%;background:#fff;border:1.5px solid rgba(5,23,71,.12);border-radius:var(--r-sm);padding:.8rem 1rem;font-family:var(--fb);font-size:.87rem;color:var(--w);transition:border-color .2s;outline:none;margin-bottom:1.3rem}
.finp:focus,.fsel:focus,.fta:focus{border-color:var(--terra-dark)}
.fsel{appearance:none;cursor:auto}
.fsel option{background:var(--cream);color:var(--w)}
.fta{resize:vertical;min-height:105px;line-height:1.6}
.fsub{width:100%;padding:.95rem;background:var(--terra);color:#fff;border:none;border-radius:100px;font-family:var(--ft);font-size:.88rem;font-weight:600;transition:all .25s;letter-spacing:.04em}
.fsub:hover{background:var(--w);color:#fff;transform:translateY(-2px)}
.fnote{font-size:.68rem;color:var(--w3);text-align:center;margin-top:.75rem;letter-spacing:.04em;font-family:var(--ft)}
#fsuc{display:none;text-align:center;padding:3.5rem 2rem}
#fsuc .fci{font-size:2.8rem;margin-bottom:1.4rem}
#fsuc h3{font-family:var(--fh);font-size:1.7rem;font-weight:400;letter-spacing:-.01em;margin-bottom:.9rem}
#fsuc p{font-size:.88rem;color:var(--w2);line-height:1.74;font-weight:300}
#fsuc a{color:var(--terra-dark);text-decoration:none}

/* ── BOOK YOUR SLOT (Calendly) ── */
#ct-book{background:var(--w);position:relative;overflow:hidden;padding:6rem var(--site-pad) 7rem}
#ct-book::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 55% 60% at 85% 15%,rgba(83,95,128,.18)0%,transparent 60%),radial-gradient(ellipse 40% 50% at 5% 90%,rgba(255,255,255,.05)0%,transparent 60%);pointer-events:none}
.ctb-inner{position:relative;z-index:1;max-width:1080px;margin:0 auto}
.ctb-head{text-align:center;max-width:620px;margin:0 auto 3rem}
.ctb-head .slbl{color:#A8B3DD;justify-content:center}
.ctb-head .slbl::before{background:#A8B3DD}
.ctb-h2{font-family:var(--fh);font-size:clamp(2.2rem,4.5vw,3.6rem);font-weight:400;line-height:1;letter-spacing:-.01em;color:#FEFEFE;margin-bottom:1.2rem}
.ctb-h2 em{font-style:italic;color:#A8B3DD}
.ctb-sub{font-size:.92rem;line-height:1.78;color:rgba(255,255,255,.55);font-weight:300}
.ctb-cal{text-align:center}
.ctb-btn{display:inline-flex;align-items:center;gap:.7rem;background:#FEFEFE;color:var(--w);padding:1.1rem 2.6rem;border-radius:100px;font-family:var(--ft);font-size:.92rem;font-weight:700;letter-spacing:.02em;text-decoration:none;transition:all .25s var(--ez);box-shadow:0 20px 50px rgba(0,0,0,.25)}
.ctb-btn-ic{width:30px;height:30px;border-radius:50%;background:var(--terra-dark);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ctb-btn:hover{transform:translateY(-3px);box-shadow:0 26px 60px rgba(0,0,0,.32)}
.ctb-note{margin-top:1.2rem;font-size:.78rem;color:rgba(255,255,255,.45);font-weight:300}
@media (max-width:768px){
  #ct-book{padding:4.5rem 1.5rem 5rem}
  .ctb-btn{padding:1rem 2rem;font-size:.85rem}
}

/* ══ FOOTER ══ */
footer{padding:6rem var(--site-pad) 3rem;border-top:1.5px solid rgba(5,23,71,.07);background:var(--w)}
.ft-top{display:grid;grid-template-columns:2.5fr 1fr 1fr 1fr;gap:5rem;margin-bottom:4rem}
.ft-brand{font-family:var(--fh);font-size:1.5rem;font-weight:400;letter-spacing:.01em;color:var(--sand);display:block;margin-bottom:.9rem;text-decoration:none;font-style:italic}
.ft-desc{font-size:.82rem;color:rgba(253,252,249,.35);line-height:1.74;margin-bottom:1.4rem}
.ft-tl{font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--terra-dark);font-weight:600;font-family:var(--ft)}
.ft-ch{font-size:.63rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(253,252,249,.3);font-weight:600;margin-bottom:1.15rem;font-family:var(--ft)}
.ft-links{display:flex;flex-direction:column;gap:.65rem}
.ft-links a{font-size:.8rem;color:rgba(253,252,249,.35);text-decoration:none;transition:color .2s;cursor:auto}
.ft-links a:hover{color:rgba(253,252,249,.85)}
.ft-bot{display:flex;justify-content:space-between;align-items:center;padding-top:2rem;border-top:1px solid rgba(255,255,255,.07)}
.ft-copy{font-size:.73rem;color:rgba(253,252,249,.3)}
.ft-kw{font-size:.7rem;color:rgba(253,252,249,.15);letter-spacing:.04em}

/* ══ FLOATING ══ */
.fab-wrap{position:fixed;bottom:2rem;right:2rem;z-index:700;display:flex;flex-direction:column;gap:.55rem;align-items:flex-end}
.fab{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.05rem;border:none;transition:all .25s;text-decoration:none;box-shadow:0 4px 18px rgba(5,23,71,.15)}
.fab-wa{background:#25d366;color:#fff}
.fab-wa:hover{transform:scale(1.12)}
.fab-bk{background:var(--terra);color:#ffffff;width:auto;height:46px;padding:0 1.2rem;border-radius:100px;font-family:var(--ft);font-size:.7rem;font-weight:600;letter-spacing:.06em;display:flex;align-items:center;justify-content:center;white-space:nowrap}
.fab-bk:hover{background:var(--sage);color:#fff;transform:translateY(-2px)}

/* ══ RESPONSIVE ══ */
@media(max-width:900px){
  nav{padding:1rem 1.5rem}.nav-links{display:none}
  .hvw{grid-template-columns:1fr 1fr}.hvc.big{grid-column:1/3;grid-row:2/4}
  .hero-sf{display:none}
  .hero-con{padding:7rem var(--site-pad) 6rem;width:100%}
  .hero-h1{font-size:3.4rem}
  .bento{grid-template-columns:1fr}.bc-1,.bc-2,.bc-3,.bc-4,.bc-5{grid-column:1;grid-row:auto;min-height:280px}
  .cases-grid,.who-grid,.ab-vg,.ab-why-grid{grid-template-columns:1fr}
  .proof-grid{grid-template-columns:repeat(2,1fr)}
  .tg{grid-template-columns:1fr}
  .logo-grid{grid-template-columns:repeat(4,1fr)}
  .ft-top{grid-template-columns:1fr 1fr;gap:2rem}
  .ct-layout,.si-bi{grid-template-columns:1fr;gap:2rem}
  .globe-g{grid-template-columns:1fr 1fr}
  .proc-row{grid-template-columns:1fr;gap:1rem}.ps{flex:none;border-right:none}.ps:nth-child(even){margin-top:0}.ps-cta{flex-direction:column;gap:1.5rem}
  .mpills .mp{grid-template-columns:1fr;gap:.8rem}
  #wk-grid{grid-template-columns:1fr 1fr}
  .sh{font-size:2.4rem;margin-bottom:2.5rem}
  section{padding-left:var(--site-pad)!important;padding-right:var(--site-pad)!important}
  #ab-hero{padding-left:var(--site-pad);padding-right:var(--site-pad)}
  footer{padding:3rem var(--site-pad) 2rem}
  .fab-wrap{bottom:1.2rem;right:1.2rem}
  .si-hd{grid-template-columns:50px 1fr auto;gap:1.5rem;padding:2rem 1.5rem}
  /* vyst grid responsive */
  .vyst-grid{grid-template-columns:repeat(3,1fr)}
  .vyst-count-card{grid-column:span 1;grid-row:span 1;min-height:120px}
  .vyst-you-card{grid-column:span 3}
  .clients-hd-row{flex-direction:column}
  /* dot-grid responsive — keep 5 cols, allow scroll */
  #partners{overflow-x:auto}
  .dot-grid{grid-template-columns:repeat(5,minmax(100px,1fr));grid-auto-rows:110px}
}
@media(max-width:600px){
  #wk-grid{grid-template-columns:1fr}
  .logo-grid{grid-template-columns:repeat(3,1fr)}
  .proof-grid{grid-template-columns:repeat(2,1fr)}
  .globe-g{grid-template-columns:1fr}
  .hero-h1{font-size:2.6rem}
  /* vyst grid mobile */
  .vyst-grid{grid-template-columns:repeat(2,1fr)}
  .vyst-count-card{grid-column:span 2;grid-row:span 1;flex-direction:row;align-items:center;gap:1.2rem}
  .vyst-you-card{grid-column:span 2}
  /* dot-grid mobile — keep same 5 col structure */
  .dot-grid{grid-template-columns:repeat(5,minmax(80px,1fr));grid-auto-rows:90px}
  .dc-logo-name{font-size:.62rem}
  .dc-logo-icon{font-size:1.2rem}
}

/* ══ NAV OVERLAP FIX ══ */
/* Sub-page heroes need clearance from fixed nav */
#sv-hero { padding-top: 9rem !important; }
#wk-hero { padding-top: 9rem !important; }
#ct-hero { padding-top: 9rem !important; }
#ab-hero { padding-bottom: 6rem !important; }
#ab2-hero { padding-top: 9rem !important; }

/* ══ RESPONSIVE FIXES ══ */
@media(max-width:900px){
  #hero { min-height:100svh; }
  .hero-con { padding:7rem var(--site-pad) 5rem !important; width:100% !important; }
  #sv-hero { padding: 7rem var(--site-pad) 4rem !important; }
  #wk-hero { padding: 7rem var(--site-pad) 3rem !important; }
  #ct-hero { padding: 7rem var(--site-pad) 3rem !important; }
  #ab-hero  { padding: 0 var(--site-pad) 5rem !important; }
  .ct-layout { padding: 1.5rem var(--site-pad) 5rem !important; }
}

/* ══ 3D ICON SYSTEM ══ */
.ic3d { display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }
.ic3d svg { display:block; }
/* Ensure icon marks have correct sizing */
.vyst-logo-mark.ic3d,
.dc-logo-icon.ic3d { font-size:0; line-height:1; }
.reel-card-inner .rc-icon.ic3d { font-size:0; }
.sf-icon-btn svg { display:block; }


/* ══ BLOG PREVIEW — Magazine Style ══ */
#blog-preview{padding:9rem var(--site-pad);background:var(--bg2)}
.blog-hd-row{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:4rem;gap:2rem}
.blog-hd-row .sh{margin-bottom:0}
.blog-read-all{font-size:.78rem;font-weight:600;letter-spacing:.08em;color:var(--terra-dark);text-decoration:none;border-bottom:1.5px solid rgba(5,23,71,.3);padding-bottom:.2rem;transition:border-color .2s;white-space:nowrap;font-family:var(--ft)}
.blog-read-all:hover{border-color:var(--terra-dark)}
/* Magazine layout: big left + stacked right */
.blog-mag{display:grid;grid-template-columns:1.15fr 1fr;gap:2px;background:rgba(5,23,71,.06);border-radius:var(--r-lg);overflow:hidden}
/* Featured — tall left card */
.blog-feat{background:var(--w);padding:3rem;display:flex;flex-direction:column;justify-content:flex-end;min-height:520px;position:relative;overflow:hidden;cursor:pointer;transition:background .3s}
.blog-feat::before{content:'';position:absolute;inset:0;background:linear-gradient(to bottom,transparent 30%,rgba(5,23,71,.7));z-index:0}
.blog-feat-bg{position:absolute;inset:0;background:linear-gradient(145deg,#051747,#081F62,#030d3b);z-index:0}
.blog-feat-pattern{position:absolute;inset:0;z-index:0;opacity:.06;background-image:repeating-linear-gradient(45deg,#fff 0,#fff 1px,transparent 0,transparent 50%);background-size:14px 14px}
.blog-feat-content{position:relative;z-index:1}
.blog-feat-cat{display:inline-block;background:var(--terra);color:#fff;font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;font-weight:700;padding:.28rem .8rem;border-radius:100px;margin-bottom:1.2rem;font-family:var(--ft)}
.blog-feat-title{font-family:var(--fh);font-size:clamp(1.6rem,2.5vw,2.4rem);font-weight:400;line-height:1.1;letter-spacing:-.01em;color:#FEFEFE;margin-bottom:1rem}
.blog-feat-exc{font-size:.83rem;color:rgba(255,255,255,.6);line-height:1.72;font-weight:300;margin-bottom:1.5rem;max-width:420px}
.blog-feat-meta{display:flex;align-items:center;gap:1rem}
.blog-feat-date{font-size:.65rem;color:rgba(255,255,255,.4);letter-spacing:.06em;font-family:var(--ft)}
.blog-feat-read{font-size:.65rem;color:#535F80;font-family:var(--ft);letter-spacing:.04em}
.blog-feat-arr{margin-left:auto;width:38px;height:38px;border-radius:50%;border:1.5px solid rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;font-size:.9rem;color:rgba(255,255,255,.6);transition:all .28s}
.blog-feat:hover .blog-feat-arr{background:var(--terra);border-color:var(--terra-dark);color:#fff}
/* Right side stacked articles */
.blog-stack{display:flex;flex-direction:column}
.blog-mini{background:var(--cream);padding:2rem 2.2rem;display:flex;flex-direction:column;gap:.6rem;border-bottom:1.5px solid rgba(5,23,71,.06);cursor:pointer;transition:background .3s;position:relative;flex:1}
.blog-mini:last-child{border-bottom:none}
.blog-mini:hover{background:#fff}
.blog-mini-cat{font-size:.56rem;letter-spacing:.2em;text-transform:uppercase;color:var(--terra-dark);font-weight:700;font-family:var(--ft)}
.blog-mini-title{font-family:var(--fh);font-size:clamp(.95rem,1.4vw,1.25rem);font-weight:400;letter-spacing:-.01em;line-height:1.18;color:var(--w);transition:color .2s}
.blog-mini:hover .blog-mini-title{color:var(--terra-dark)}
.blog-mini-exc{font-size:.78rem;color:var(--w3);line-height:1.6;font-weight:300;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.blog-mini-meta{display:flex;align-items:center;gap:.6rem;margin-top:auto;padding-top:.6rem}
.blog-mini-date{font-size:.62rem;color:var(--w3);letter-spacing:.05em;font-family:var(--ft)}
.blog-mini-read{font-size:.62rem;color:var(--terra-dark);font-family:var(--ft)}
.blog-mini-arr{position:absolute;bottom:1.4rem;right:1.4rem;font-size:.8rem;color:rgba(5,23,71,.2);transition:color .25s}
.blog-mini:hover .blog-mini-arr{color:var(--terra-dark)}
/* Newsletter strip */
.blog-nl{background:var(--w);border-radius:var(--r-md);padding:2rem 2.5rem;display:flex;align-items:center;justify-content:space-between;gap:2rem;margin-top:1.5rem}
.blog-nl-txt{}
.blog-nl-h{font-family:var(--fh);font-size:1.2rem;font-weight:400;letter-spacing:-.01em;color:#FEFEFE;margin-bottom:.2rem}
.blog-nl-sub{font-size:.75rem;color:rgba(255,255,255,.4);font-weight:300}
.blog-nl-form{display:flex;gap:.6rem;flex-shrink:0}
.blog-nl-inp{background:rgba(255,255,255,.08);border:1.5px solid rgba(255,255,255,.12);border-radius:100px;padding:.6rem 1.2rem;font-family:var(--fb);font-size:.8rem;color:#FEFEFE;outline:none;width:200px;transition:border-color .2s}
.blog-nl-inp::placeholder{color:rgba(255,255,255,.3)}
.blog-nl-inp:focus{border-color:var(--terra-dark)}
.blog-nl-btn{padding:.6rem 1.3rem;background:var(--terra);color:#051747;border:none;border-radius:100px;font-family:var(--ft);font-size:.75rem;font-weight:600;cursor:pointer;transition:all .25s;white-space:nowrap;letter-spacing:.04em}
.blog-nl-btn:hover{background:#535F80}
@media(max-width:900px){
  .blog-mag{grid-template-columns:1fr}
  .blog-feat{min-height:320px}
  .blog-hd-row{flex-direction:column;align-items:flex-start}
  .blog-nl{flex-direction:column;gap:1.2rem}
  .blog-nl-form{width:100%}
  .blog-nl-inp{flex:1}
}

/* ══ BLOG PAGE ══ */
#bl-hero{padding:10rem var(--site-pad) 5rem;position:relative;overflow:hidden;min-height:55vh;display:flex;flex-direction:column;justify-content:flex-end;background:var(--bg)}
.bl-bg{position:absolute;inset:0;background:radial-gradient(ellipse 55% 60% at 30% 55%,rgba(5,23,71,.08)0%,transparent 60%),radial-gradient(ellipse 40% 50% at 80% 40%,rgba(83,95,128,.06)0%,transparent 60%)}
.bl-h1{font-family:var(--fh);font-size:clamp(3rem,8vw,9rem);font-weight:400;line-height:.9;letter-spacing:-.01em;margin-bottom:1.5rem;position:relative;z-index:1}
.bl-h1 em{font-style:italic;color:var(--terra-dark)}
.bl-sub{max-width:540px;font-size:1rem;color:var(--w2);line-height:1.78;position:relative;z-index:1;font-weight:300}

#bl-filters{padding:2rem var(--site-pad);border-bottom:1.5px solid rgba(5,23,71,.07);display:flex;gap:.55rem;flex-wrap:wrap;background:var(--bg)}
#bl-grid{padding:0 var(--site-pad) 9rem;display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:rgba(5,23,71,.06);margin-top:0}
.bl-card{background:var(--cream);padding:2.8rem;display:flex;flex-direction:column;gap:1.1rem;transition:background .3s;position:relative;overflow:hidden;min-height:280px}
.bl-card:hover{background:#fff}
.bl-card-cat{font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;color:var(--terra-dark);font-weight:600;font-family:var(--ft)}
.bl-card-title{font-family:var(--fh);font-size:1.4rem;font-weight:400;letter-spacing:-.01em;line-height:1.1}
.bl-card-excerpt{font-size:.82rem;color:var(--w2);line-height:1.72;font-weight:300}
.bl-card-meta{display:flex;align-items:center;gap:.8rem;margin-top:auto;padding-top:1rem;border-top:1.5px solid rgba(5,23,71,.07)}
.bl-card-date{font-size:.65rem;color:var(--w3);letter-spacing:.05em;font-family:var(--ft)}
.bl-card-read{font-size:.65rem;color:var(--terra-dark);font-family:var(--ft)}
.bl-card-arr{position:absolute;bottom:1.8rem;right:1.8rem;width:32px;height:32px;border-radius:50%;border:1.5px solid rgba(5,23,71,.12);display:flex;align-items:center;justify-content:center;font-size:.78rem;color:var(--w3);transition:all .25s}
.bl-card:hover .bl-card-arr{border-color:var(--terra-dark);color:var(--terra-dark)}
@media(max-width:900px){
  #blog-preview{padding:6rem 1.8rem}
  .blog-grid{grid-template-columns:1fr}.blog-card.featured{grid-row:span 1;min-height:auto}
  #bl-hero{padding:7rem 1.8rem 4rem}
  #bl-filters,#bl-grid{padding-left:var(--site-pad);padding-right:var(--site-pad)}
  #bl-grid{grid-template-columns:1fr 1fr}
}

/* ══ GLOBAL ENHANCEMENTS ══ */
/* Grain texture overlay */
body::before{content:'';position:fixed;inset:0;z-index:9998;pointer-events:none;opacity:.025;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");background-repeat:repeat;background-size:128px 128px}

/* Section alternating backgrounds */
#svc{background:var(--bg2)}
#reels{background:var(--w)}
#reels .slbl,.reels-hint,.rc-over .rc-name{color:#FEFEFE}
#reels .sh{color:#FEFEFE}
#cases{background:var(--bg)}
#proof{background:var(--bg2)}
#process{background:var(--bg)}
#who{background:var(--bg2)}
#clients{background:var(--bg)}
#testi{background:var(--bg)}
#faq{background:var(--bg2)}
#blog-preview{background:var(--bg2)}
#social-follow{background:var(--bg2)}

/* Better sh heading on dark sections */
#reels .sh em,#reels .slbl{color:#E7E9F0}

/* Smooth section transitions */
section{transition:background .3s}

/* Gradient accents on featured elements */
.hero-h1 .hl{background:var(--gr);-webkit-background-clip:text;-webkit-text-fill-color:transparent;font-style:italic}

/* Counter hover lift */
.pf{transition:background .3s,transform .25s,box-shadow .25s}
.pf:hover{background:#fff;transform:translateY(-4px);box-shadow:0 12px 32px rgba(5,23,71,.08)}

/* Wcard hover lift */
.wcard{transition:background .3s,transform .25s,box-shadow .25s}
.wcard:hover{transform:translateY(-3px);box-shadow:0 12px 32px rgba(5,23,71,.08)}

/* BC hover lift */
.bc{transition:background .35s,transform .28s,box-shadow .28s}
.bc:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(5,23,71,.07)}

/* Tc hover lift */
.tc{transition:background .3s,transform .25s,box-shadow .25s}
.tc:hover{transform:translateY(-4px);box-shadow:0 12px 32px rgba(5,23,71,.08)}

/* Blog card hover lift */
.bl-card{transition:background .3s,transform .25s,box-shadow .25s}
.bl-card:hover{transform:translateY(-3px);box-shadow:0 12px 32px rgba(5,23,71,.08)}

/* Line decorators for section headers on alternating bg */
.slbl::before{border-radius:2px}

/* Process CTA card */
.proc-cta{background:linear-gradient(135deg,#051747,#535F80)!important;color:#ffffff!important}
.proc-cta .ps-step,.proc-cta .ps-t,.proc-cta .ps-b{color:rgba(255,255,255,.85)!important}

/* Contact form submit hover */
.fsub{position:relative;overflow:hidden}
.fsub::after{content:'';position:absolute;inset:0;background:rgba(255,255,255,.08);opacity:0;transition:opacity .2s}
.fsub:hover::after{opacity:1}

/* Prevent ugly selection highlight on interactive elements */
.bc,.wcard,.tc,.bl-card,.pf{user-select:none}

/* Smooth font rendering */
*{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}

/* Featured blog card on home */
.blog-card.featured{background:linear-gradient(175deg,var(--sand),var(--peach))!important}
.blog-card.featured:hover{background:linear-gradient(175deg,var(--peach),var(--sand))!important}

/* Work page border-top accent */
#wk-grid{border-radius:var(--r-lg);overflow:hidden}

/* ══ ADDITIONAL RESPONSIVE ══ */

/* Prevent horizontal overflow globally */
html,body{max-width:100%;overflow-x:hidden}

/* Fluid images */
img{max-width:100%;height:auto}

/* ── 1024px: tablet landscape ── */
@media(max-width:1024px){
  :root{--site-pad:2.5rem}
  .hero-inner{grid-template-columns:1fr 360px;gap:2rem}
  .ft-top{grid-template-columns:1.5fr 1fr 1fr;gap:3rem}
  .ft-top>:last-child{grid-column:1/-1}
  .bento{grid-template-columns:repeat(6,1fr)}
  .bc-1{grid-column:1/4;grid-row:1/3}
  .bc-2{grid-column:4/7;grid-row:1/2}
  .bc-3{grid-column:4/7;grid-row:2/3}
  .bc-4{grid-column:1/4;grid-row:3/4}
  .bc-5{grid-column:4/7;grid-row:3/4}
  .bc-1,.bc-4{min-height:260px}
  .bc-2,.bc-3,.bc-5{min-height:240px}
  .cases-grid{grid-template-columns:1fr 1fr}
  .proof-grid{grid-template-columns:repeat(3,1fr)}
  .globe-g{grid-template-columns:1fr 1fr}
  .ct-layout{gap:4rem}
  .faq-layout{gap:4rem}
  .si-bi{padding:0 2.5rem 3rem;gap:2.5rem}
}

/* ── 900px: tablet portrait / large mobile ── */
@media(max-width:900px){
  /* Typography scale */
  .hero-h1{font-size:clamp(2.2rem,6vw,3.2rem)!important;line-height:.93}
  .sst-h{font-size:clamp(2rem,7vw,4rem)}
  .fcta-h{font-size:clamp(1.8rem,6vw,3.2rem)}
  .sh{font-size:clamp(1.8rem,6vw,2.8rem)!important;margin-bottom:2rem!important}

  /* Hero chip — prevent overflow on mobile */
  .hero-chip{font-size:.65rem;padding:.42rem 1rem .42rem .6rem;white-space:normal;max-width:calc(100vw - 3rem)}

  /* Hero sub — full width on mobile */
  .hero-sub{max-width:100%}

  /* Hero CTAs — stack on very small */
  .hero-ctas{gap:.8rem}

  /* Hero stats strip */
  .hero-stats-strip{padding:1rem 1.5rem}
  .hero-stat-item{flex:1 1 45%;padding:.6rem .5rem;border-right:none;border-bottom:1px solid rgba(255,255,255,.07)}
  .hero-stat-item:nth-child(odd){border-right:1px solid rgba(255,255,255,.07)!important}

  /* Reels row */
  .reels-row{padding-bottom:1.2rem;margin-top:2rem}
  .rc{flex:0 0 160px;height:290px}

  /* Cases */
  .cc{padding:2rem;min-height:auto}

  /* Proof grid */
  .proof-grid{grid-template-columns:repeat(3,1fr)}

  /* Contact layout */
  .ct-layout{grid-template-columns:1fr;gap:2.5rem;padding:1.5rem var(--site-pad) 5rem}
  .ct-form{padding:2rem}

  /* Services list */
  .si-bi{padding:0 var(--site-pad) 3rem;grid-template-columns:1fr;gap:1.5rem}
  .si-hd{padding:1.8rem var(--site-pad);gap:1rem}
  .si-n{font-size:2rem}

  /* Footer */
  .ft-top{grid-template-columns:1fr 1fr;gap:2rem}
  .ft-top>:first-child{grid-column:1/-1}
  .ft-bot{flex-direction:column;gap:.8rem;text-align:center}

  /* FAQs */
  .faq-layout{grid-template-columns:1fr;gap:2.5rem}
  .faq-left-lede{max-width:100%}

  /* FCTAs */
  .fcta-btns{flex-direction:column;align-items:center}

  /* About page */
  .ab-why-grid{grid-template-columns:1fr;gap:2.5rem}
  .mp{grid-template-columns:1fr;gap:1rem}

  /* Services page */
  .sv-h1{font-size:clamp(2.4rem,8vw,5rem)}

  /* Work page */
  .wk-h1{font-size:clamp(2.4rem,8vw,5rem)}

  /* Blog */
  .blog-mag{grid-template-columns:1fr}
  .blog-feat{min-height:320px}
  .blog-stack{flex-direction:column}

  /* Partners — horizontal scroll */
  #partners{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .dot-grid{min-width:500px}

  /* Process CTA */
  .ps-cta{flex-direction:column;gap:1.2rem;text-align:center}
  .ps-cta-btn{width:100%}
  .ps-cta-btn .bp{width:100%;justify-content:center}

  /* Vyst */
  .vyst-grid{grid-template-columns:repeat(3,1fr)}
  .vyst-count-card{grid-column:span 3;grid-row:span 1;flex-direction:row;align-items:center;gap:1.5rem;justify-content:flex-start;min-height:100px}
  .vyst-you-card{grid-column:span 3}

  /* Clients header */
  .clients-hd-row{flex-direction:column;align-items:flex-start}

  /* Scroll stopper padding */
  #sstop{padding:6rem var(--site-pad)}

  /* Services bento */
  .bento{grid-template-columns:1fr}
  .bc-1,.bc-2,.bc-3,.bc-4,.bc-5{grid-column:1;grid-row:auto;min-height:260px}
}

/* ── 600px: small phones ── */
@media(max-width:600px){
  :root{--site-pad:1.2rem}

  /* Nav */
  nav{padding:.9rem 1.2rem}
  .nl{font-size:1.2rem}

  /* Hero */
  .hero-inner{padding-top:5rem;padding-bottom:0;gap:0}
  .hero-h1{font-size:clamp(1.9rem,7.5vw,2.8rem)!important;letter-spacing:-.015em;line-height:.95}
  .hero-chip{font-size:.6rem;margin-bottom:1.6rem}
  .hero-sub{font-size:.88rem;margin-bottom:2rem}
  .hero-ctas{flex-direction:column;align-items:flex-start;gap:.7rem}
  .hero-ctas .bp,.hero-ctas .bg{width:100%;justify-content:center}
  .hero-scroll{margin-top:2rem}
  .hero-right{height:280px}
  .hfc-main{width:170px}
  .hfc-main-num{font-size:2.2rem}
  .hero-orbit{width:260px;height:260px}
  .hero-stat-item{flex:1 1 100%;border-right:none!important;border-bottom:1px solid rgba(255,255,255,.07)}
  .hero-stat-item:last-child{border-bottom:none}

  /* Sections */
  #svc,#reels,#cases,#proof,#process,#who,#clients,#social-follow,#testi,#faq,#blog-preview,#fcta{
    padding-top:5rem!important;padding-bottom:5rem!important
  }

  /* Reels */
  .rc{flex:0 0 140px;height:250px}
  .reels-row{gap:8px}

  /* Cases */
  .cases-grid{grid-template-columns:1fr}
  .cc{padding:1.6rem;min-height:auto}
  .cc-metrics{gap:1.2rem;flex-wrap:wrap}
  .ba{height:160px}

  /* Proof */
  .proof-grid{grid-template-columns:1fr 1fr}
  .pf{padding:2rem 1.2rem}
  .pfn{font-size:2.2rem}

  /* Process */
  .proc-row{grid-template-columns:1fr;gap:.8rem}
  .ps{padding:1.8rem 1.6rem}
  .ps:nth-child(even){margin-top:0}

  /* Who */
  .who-grid{grid-template-columns:1fr}
  .wc{padding:2.5rem 2rem}

  /* Clients vyst */
  .vyst-grid{grid-template-columns:1fr 1fr}
  .vyst-count-card{grid-column:span 2}
  .vyst-you-card{grid-column:span 2}
  .vyst-logo-card{min-height:90px}

  /* About */
  .ab-vg{grid-template-columns:1fr}
  .globe-g{grid-template-columns:1fr 1fr}
  .ab-why-grid{grid-template-columns:1fr}

  /* Services list */
  .si-hd{grid-template-columns:40px 1fr auto;gap:.8rem;padding:1.4rem 1.2rem}
  .si-n{font-size:1.6rem}
  .si-name{font-size:clamp(1.2rem,5vw,1.8rem)}
  .si-bi{padding:0 var(--site-pad) 2.5rem;grid-template-columns:1fr}

  /* Work grid */
  #wk-grid{grid-template-columns:1fr}
  .wcard{padding:2rem;min-height:240px}

  /* Contact */
  .ct-layout{padding:1.2rem var(--site-pad) 4rem}
  .ct-form{padding:1.6rem}
  .finp,.fsel,.fta{font-size:.85rem;margin-bottom:1rem}
  #fsuc{padding:2.5rem 1.2rem}

  /* Footer */
  .ft-top{grid-template-columns:1fr;gap:1.8rem}
  .ft-bot{flex-direction:column;gap:.6rem;text-align:center}
  footer{padding:3rem var(--site-pad) 2rem}
  .fab-wrap{bottom:1rem;right:1rem;gap:.4rem}
  .fab{width:40px;height:40px;font-size:.95rem}
  .fab-bk{width:auto;min-width:auto;padding:0 1rem;font-size:.62rem;height:44px;border-radius:100px;white-space:nowrap}

  /* FAQ */
  .faq-layout{gap:2rem}
  .fq{font-size:.88rem;padding:1.3rem 0}
  .fa{font-size:.83rem}

  /* Blog */
  #bl-grid{grid-template-columns:1fr!important;padding-left:var(--site-pad)!important;padding-right:var(--site-pad)!important}
  #bl-filters{padding-left:var(--site-pad);padding-right:var(--site-pad);gap:.4rem}
  .bl-card{padding:1.8rem}
  .blog-nl{flex-direction:column;padding:1.5rem}
  .blog-nl-form{width:100%;flex-direction:column}
  .blog-nl-inp{width:100%}
  .blog-nl-btn{width:100%}

  /* Scroll stopper */
  #sstop{padding:5rem var(--site-pad)}

  /* Final CTA */
  #fcta{padding:6rem var(--site-pad)}
  .fcta-btns{gap:.7rem}
  .fcta-btns .bp,.fcta-btns .bg{width:100%;justify-content:center}

  /* Testimonials */
  .testi-controls{gap:.7rem}
  .tc{padding:1.8rem}

  /* Social follow */
  #social-follow{padding:5rem var(--site-pad)}
  .sf-left{height:260px}
  .reel-stack{width:140px;height:260px}

  /* Marquee text */
  .mqi{font-size:.7rem;padding:0 1.2rem;gap:1.2rem}

  /* Partners grid */
  .dot-grid{grid-template-columns:repeat(4,minmax(70px,1fr));grid-auto-rows:80px}
  .dc-logo-icon{font-size:1.1rem}
  .dc-logo-name{font-size:.56rem}

  /* Section labels */
  .slbl{font-size:.58rem}

  /* Buttons */
  .bp,.bg{font-size:.74rem;padding:.75rem 1.5rem}

  /* About hero */
  .ab-h1{font-size:clamp(2.6rem,10vw,4.5rem)}
  .ab-intro{font-size:.95rem}
  .ab-global .globe-g{grid-template-columns:1fr 1fr}
}

/* ══ TARGETED BUG FIXES (from mobile screenshots) ══ */

/* FIX 1: Hero — hide the floating card panel entirely on mobile.
   The absolute-positioned cards overflow and cover the headline text. */
@media(max-width:900px){
  .hero-right{display:none!important}
  .hero-inner{grid-template-columns:1fr!important}
  .hero-left{padding-bottom:3rem}
}

/* FIX 2: Partners dot-grid label card — on mobile the transparent label-card
   overlaps neighbours when the grid reflows. Hide it on mobile
   (the section heading above already reads "Our Partners"). */
@media(max-width:900px){
  .dc.label-card{display:none!important}
  .dot-grid{
    grid-template-columns:repeat(3,1fr)!important;
    grid-auto-rows:110px!important;
    min-width:0!important;
    overflow:hidden!important
  }
}
@media(max-width:600px){
  .dot-grid{
    grid-template-columns:repeat(3,1fr)!important;
    grid-auto-rows:90px!important
  }
}
@media(max-width:380px){
  .dot-grid{
    grid-template-columns:1fr 1fr!important;
    grid-auto-rows:80px!important
  }
}

/* FIX 3: Before/After drag handle — the orange circle (position:absolute top:50%)
   lands exactly on the centered italic text. Move it to bottom of the panel. */
.ba-hdl::after{
  top:auto;
  bottom:1.8rem;
  transform:translate(-50%,0);
  width:24px;
  height:24px
}
@media(max-width:600px){
  .ba-hdl::after{width:20px;height:20px;bottom:1.2rem}
  .ba-lb,.ba-la{bottom:1rem}
}


/* ── 380px: very small phones (SE, Galaxy A) ── */
@media(max-width:380px){
  .hero-h1{font-size:2rem!important}
  .hero-chip{font-size:.58rem}
  .ab-h1{font-size:2.2rem!important}
  .sst-h{font-size:1.8rem}
  .globe-g{grid-template-columns:1fr}
  .proof-grid{grid-template-columns:1fr}
  .dot-grid{grid-template-columns:repeat(3,minmax(60px,1fr));grid-auto-rows:75px}
  .vyst-grid{grid-template-columns:1fr}
  .vyst-count-card,.vyst-you-card{grid-column:1}
}

/* ══ MOBILE NAV HAMBURGER ══ */
.nav-hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:4px;background:none;border:none}
.nav-hamburger span{width:22px;height:1.5px;background:var(--w);border-radius:2px;transition:all .3s}
.nav-hamburger.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.nav-hamburger.open span:nth-child(2){opacity:0;transform:scaleX(0)}
.nav-hamburger.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* Mobile nav overlay */
#mob-nav-overlay{display:none;position:fixed;inset:0;background:rgba(5,23,71,.5);backdrop-filter:blur(4px);z-index:850}
#mob-nav-overlay.open{display:block}

/* Mobile nav drawer */
#mob-nav{
  position:fixed;top:0;right:-100%;height:100%;width:min(320px,88vw);
  background:var(--bg);z-index:900;display:flex;flex-direction:column;
  padding:2rem 2rem 3rem;gap:0;
  transition:right .38s cubic-bezier(.25,.46,.45,.94);
  box-shadow:-8px 0 40px rgba(5,23,71,.15);
  overflow-y:auto;
}
#mob-nav.open{right:0}
.mob-nav-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:2.5rem}
.mob-nav-close{background:none;border:1.5px solid rgba(5,23,71,.15);border-radius:50%;width:36px;height:36px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:.85rem;color:var(--w3);transition:all .2s}
.mob-nav-close:hover{background:var(--terra);border-color:var(--terra-dark);color:#fff}
.mob-nav-links{list-style:none;display:flex;flex-direction:column;gap:0;margin-bottom:2rem}
.mob-nav-links li{border-bottom:1px solid rgba(5,23,71,.07)}
.mob-nav-links a{display:block;padding:1.1rem 0;font-family:var(--ft);font-size:.88rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--w);text-decoration:none;transition:color .2s}
.mob-nav-links a:hover{color:var(--terra-dark)}

@media(max-width:900px){
  .nav-hamburger{display:flex}
  .nb{display:none}

  /* ── ABOUT PAGE HERO MOBILE FIX ── */
  #ab2-hero{padding-top:7rem !important;padding-bottom:5rem !important}

  /* ── FOUNDER MODAL MOBILE FIX ── */
  .ab2-modal-box{
    max-height:90vh;overflow-y:auto;
    border-radius:24px;
    margin:0;
  }
  #ab2-founder-modal{padding:1rem;align-items:flex-end}
  .ab2-modal-photo{height:180px}
  .ab2-modal-initial{font-size:7rem}

  /* ── ABOUT STAT CLUSTER MOBILE ── */
  .ab2-stat-cluster{flex-direction:row !important;gap:1.5rem;flex-wrap:wrap;justify-content:flex-start}

  /* ── HERO INNER MOBILE ── */
  .hero-inner{padding-top:5.5rem}
}