/* ===========================================================
   SMRIMOO — Digital Sunset design system
   Vanilla CSS3. Coral leads; indigo + fuchsia give depth.
   =========================================================== */

:root{
  /* canvas */
  --canvas:#0d0b1a; --surface:#161327; --raised:#201a35;
  /* accents */
  --coral:#f05a2a; --amber:#ff8a4d; --ember:#d2401a;
  --fuchsia:#c0186a; --indigo:#7b2fbe; --indigo-soft:#9a5fe0;
  --coral-soft:rgba(240,90,42,.14);
  /* ink */
  --text:#f0ede8; --muted:#928aa6; --paper:#f5efe6; --paper-ink:#0d0b1a;
  --line:rgba(241,236,228,.09); --line-2:rgba(241,236,228,.16);
  /* signature gradient */
  --grad:linear-gradient(100deg,var(--amber),var(--coral) 32%,var(--fuchsia) 64%,var(--indigo));
  /* type */
  --font-d:'Syne',sans-serif; --font-b:'DM Sans',sans-serif;
  --font-m:'JetBrains Mono',monospace; --font-s:'Instrument Serif',serif;
  --font-brand:'Outfit',sans-serif;
  --radius:14px; --max:1400px;
  --ease:cubic-bezier(.2,.7,.2,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:auto;-webkit-text-size-adjust:100%;overflow-x:clip}
body{
  background:var(--canvas); color:var(--text);
  font-family:var(--font-b); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:clip; cursor:none;
}
h1,h2,h3,h4{font-family:var(--font-d);font-weight:700;line-height:1.04;letter-spacing:-.02em;overflow-wrap:break-word}
a{color:inherit;text-decoration:none}
img,svg,video{max-width:100%;display:block}
button{font-family:inherit;cursor:none}
ul{list-style:none}

.container{max-width:var(--max);margin:0 auto;padding:0 clamp(1.4rem,5vw,4rem);width:100%}
section{padding:clamp(4.5rem,11vw,9rem) 0;position:relative}
.mono{font-family:var(--font-m);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.eyebrow{display:inline-flex;align-items:center;gap:.6rem;margin-bottom:1.6rem}
.eyebrow::before{content:'';width:26px;height:1px;background:var(--coral)}
.section-head{max-width:46rem;margin:0 auto clamp(2.5rem,5vw,4rem);text-align:center}
.section-head .sub{margin-left:auto;margin-right:auto}
/* keep heads that have side content left-aligned */
.services .section-head,.work-head{text-align:left;max-width:none;margin-left:0;margin-right:0}
.section-head h2{font-size:clamp(2rem,5vw,3.6rem)}
.section-head .sub{color:var(--muted);margin-top:1rem;font-size:1.05rem;max-width:46ch}
.fill{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.serif{font-family:var(--font-s);font-weight:400;font-style:italic;letter-spacing:0}

/* word-split reveal */
[data-reveal]{overflow:hidden}
.word{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.18em;margin-bottom:-.18em;max-width:100%}
.word-inner{display:inline-block}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;font-family:var(--font-m);font-size:.8rem;font-weight:500;white-space:nowrap;
  letter-spacing:.06em;text-transform:uppercase;padding:1.05rem 1.95rem;border-radius:40px;
  transition:transform .35s var(--ease),box-shadow .35s,background .3s,color .3s,border-color .3s;position:relative;overflow:hidden;z-index:0}
.btn-primary{background:var(--coral);color:#150a06;border:1px solid transparent;font-weight:600;
  box-shadow:0 8px 26px -10px rgba(240,90,42,.7)}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 20px 50px -12px rgba(240,90,42,.95)}
.btn-primary::after{content:'';position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;pointer-events:none;
  background:linear-gradient(110deg,transparent 28%,rgba(255,255,255,.5) 50%,transparent 72%);
  transform:translateX(-130%);transition:transform .8s var(--ease)}
.btn-primary:hover::after{transform:translateX(130%)}
.btn-ghost{background:rgba(241,236,228,.02);color:var(--text);border:1px solid var(--line-2)}
.btn-ghost:hover{border-color:var(--coral);color:var(--coral);transform:translateY(-3px);box-shadow:0 14px 34px -16px rgba(240,90,42,.4)}
.btn-dark{background:var(--canvas);color:#fff;border:1px solid transparent;box-shadow:0 10px 30px -10px rgba(0,0,0,.55)}
.btn-dark:hover{transform:translateY(-3px)}

/* ============ custom cursor ============ */
.cursor,.cursor-dot{position:fixed;top:0;left:0;border-radius:50%;pointer-events:none;z-index:9999;
  transform:translate(-50%,-50%);will-change:transform}
.cursor{width:38px;height:38px;border:1px solid rgba(240,90,42,.55);transition:width .3s,height .3s,background .3s,border-color .3s}
.cursor-dot{width:5px;height:5px;background:var(--coral)}
body:has(a:hover) .cursor,body:has(button:hover) .cursor,body.cursor-hot .cursor{
  width:64px;height:64px;background:var(--coral-soft);border-color:transparent}

/* ============ loader: brand intro video ============ */
.loader{position:fixed;inset:0;z-index:10000;background:#050507;display:grid;place-items:center}
.loader .lvid{max-width:100%;max-height:100%;width:auto;height:auto;display:block;background:#050507}
body.loaded .loader{opacity:0;visibility:hidden;transition:opacity .6s,visibility .6s}

/* ============ nav ============ */
.nav{position:fixed;top:0;left:0;width:100%;z-index:1000;display:flex;align-items:center;
  justify-content:space-between;padding:1.5rem clamp(1.4rem,5vw,4rem);transition:padding .35s,background .35s,backdrop-filter .35s,border-color .35s;border-bottom:1px solid transparent}
.nav.scrolled{padding:.85rem clamp(1.4rem,5vw,4rem);background:rgba(11,8,16,.72);backdrop-filter:blur(18px);border-color:var(--line)}
/* Navigation Brand Header */
.brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none;
}
.brand-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}
.brand .bmark {
  width: 32px;
  height: 32px;
  filter: drop-shadow(0 0 10px rgba(240, 90, 42, 0.35));
  transform-origin: 50% 50%;
  transition: transform 0.65s cubic-bezier(0.2, 0.85, 0.25, 1), filter 0.4s;
  will-change: transform;
}
.brand .bword {
  font-family: var(--font-d), sans-serif;
  font-weight: 800;
  font-size: 1.45rem;
  letter-spacing: -0.015em;
  line-height: 0.95;
  color: #fff;
  display: flex;
  align-items: center;
}
.brand .bword span.o1 {
  color: #f05a2a;
  transition: color 0.35s ease;
}
.brand .bword span.o2 {
  color: #ff8a4d;
  transition: color 0.35s ease;
}
.brand .btag {
  font-family: var(--font-m), monospace;
  font-size: 0.48rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 0.08rem;
  line-height: 1;
  transition: color 0.3s ease;
}

/* Hover effects */
.brand:hover .bmark {
  transform: rotate(360deg) scale(1.06);
  filter: drop-shadow(0 0 16px rgba(240, 90, 42, 0.6));
}
.brand:hover .bword span.o1 {
  color: #ff8a4d;
}
.brand:hover .bword span.o2 {
  color: #f05a2a;
}
.brand:hover .btag {
  color: var(--text);
}
/* entrance after the loader reveals the site */
@keyframes brandMarkIn{0%{opacity:0;transform:rotate(-130deg) scale(.35)}62%{transform:rotate(10deg) scale(1.07)}100%{opacity:1;transform:rotate(0) scale(1)}}
@keyframes brandWordIn{0%{opacity:0;clip-path:inset(0 100% 0 0);transform:translateX(-7px)}100%{opacity:1;clip-path:inset(0 0 0 0);transform:translateX(0)}}
@media (prefers-reduced-motion:no-preference){
  body.loaded .nav .brand .bmark{animation:brandMarkIn .9s .12s cubic-bezier(.2,.85,.25,1)}
  body.loaded .nav .brand .bword{animation:brandWordIn .8s .42s cubic-bezier(.2,.8,.2,1) both}
}
.nav-links{display:flex;align-items:center;gap:2.2rem}
.nav-links a{font-size:.92rem;color:var(--text);opacity:.82;transition:opacity .25s,color .25s;position:relative}
.nav-links a:hover{opacity:1;color:var(--coral)}
.nav-cta{display:flex;align-items:center;gap:1.2rem}
.nav-burger{display:none;flex-direction:column;gap:5px;width:30px;height:20px;justify-content:center;background:none;border:none}
.nav-burger span{display:block;height:2px;width:100%;background:var(--text);transition:.3s}

/* mobile overlay */
.nav-overlay{position:fixed;inset:0;z-index:999;background:var(--canvas);
  display:flex;flex-direction:column;justify-content:center;padding:0 2rem;
  clip-path:circle(0% at 100% 0);transition:clip-path .6s var(--ease);pointer-events:none}
.nav-overlay.open{clip-path:circle(150% at 100% 0);pointer-events:auto}
.nav-overlay a{font-family:var(--font-d);font-weight:700;font-size:clamp(2rem,9vw,3rem);padding:.4rem 0;
  opacity:0;transform:translateY(20px);transition:opacity .4s,transform .4s}
.nav-overlay.open a{opacity:1;transform:translateY(0)}
.nav-overlay.open a:nth-child(1){transition-delay:.15s}
.nav-overlay.open a:nth-child(2){transition-delay:.22s}
.nav-overlay.open a:nth-child(3){transition-delay:.29s}
.nav-overlay.open a:nth-child(4){transition-delay:.36s}
.nav-overlay.open a:nth-child(5){transition-delay:.43s}

/* ============ hero ============ */
.hero{min-height:100vh;display:flex;flex-direction:column;justify-content:flex-end;
  padding-bottom:clamp(3rem,7vw,6rem);position:relative;overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.hero-bg canvas{position:absolute;inset:0;width:100%;height:100%}
.hero-aurora{position:absolute;inset:-25% -10% auto -10%;height:130%;filter:blur(70px);opacity:var(--aop,.55);
  background:
    radial-gradient(38% 46% at 22% 32%,var(--a1,var(--coral)),transparent 60%),
    radial-gradient(36% 44% at 72% 26%,var(--a2,var(--fuchsia)),transparent 60%),
    radial-gradient(48% 52% at 58% 72%,var(--a3,var(--indigo)),transparent 62%);
  animation:auroraDrift var(--adur,20s) ease-in-out infinite alternate}
@keyframes auroraDrift{0%{transform:translate3d(-4%,-2%,0) scale(1.05) rotate(-2deg)}100%{transform:translate3d(5%,3%,0) scale(1.16) rotate(3deg)}}
/* per-page hero themes — homepage keeps the default brand aurora (+ WebGL).
   Each inner page leans into its own accent within the brand palette. */
.hero-bg[data-hero="about"] .hero-aurora{--a1:var(--amber);--a2:var(--coral);--a3:var(--ember);--aop:.5;--adur:24s}
.hero-bg[data-hero="work"] .hero-aurora{--a1:var(--indigo);--a2:var(--fuchsia);--a3:var(--indigo-soft);--aop:.4;--adur:26s}
.hero-bg[data-hero="contact"] .hero-aurora{--a1:var(--indigo);--a2:var(--indigo-soft);--a3:var(--fuchsia);--aop:.3;--adur:28s}
.hero-bg[data-hero="brand-identity"] .hero-aurora{--a1:var(--fuchsia);--a2:var(--coral);--a3:var(--amber);--aop:.55}
.hero-bg[data-hero="ai-content-video"] .hero-aurora{--a1:var(--indigo);--a2:var(--fuchsia);--a3:var(--coral);--aop:.6;--adur:18s}
.hero-bg[data-hero="websites-web-apps-ecommerce"] .hero-aurora{--a1:var(--indigo);--a2:var(--indigo-soft);--a3:var(--fuchsia);--aop:.5}
.hero-bg[data-hero="custom-systems-crm"] .hero-aurora{--a1:var(--indigo-soft);--a2:var(--indigo);--a3:var(--fuchsia);--aop:.46}
.hero-bg[data-hero="ai-automation-agents"] .hero-aurora{--a1:var(--fuchsia);--a2:var(--indigo);--a3:var(--indigo-soft);--aop:.55}
.hero-bg[data-hero="digital-marketing"] .hero-aurora{--a1:var(--amber);--a2:var(--coral);--a3:var(--fuchsia);--aop:.55}
.hero-bg[data-hero="growth-strategy"] .hero-aurora{--a1:var(--ember);--a2:var(--amber);--a3:var(--coral);--aop:.5;--adur:24s}
.hero-bg[data-hero="social-media"] .hero-aurora{--a1:var(--fuchsia);--a2:var(--amber);--a3:var(--coral);--aop:.58;--adur:17s}
.hero-bg[data-hero="ui-ux-design"] .hero-aurora{--a1:var(--indigo-soft);--a2:var(--fuchsia);--a3:var(--coral);--aop:.55}
@media(prefers-reduced-motion:reduce){.hero-aurora{animation:none}}
.hero-grain{position:absolute;inset:0;z-index:1;opacity:.5;mix-blend-mode:overlay;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E")}
.hero-content{position:relative;z-index:2;width:100%;text-align:center}
.hero-title{font-family:var(--font-d);font-weight:800;font-size:clamp(3rem,9.5vw,8.4rem);line-height:.98;letter-spacing:-.035em;margin:1.4rem 0}
.hero-title .line{display:block;overflow:hidden}
.hero-sub{color:var(--muted);font-size:clamp(1.05rem,1.6vw,1.3rem);max-width:42ch;margin:0 auto 2.4rem}
.hero-actions{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:center}
.hero-stats{margin-top:clamp(2.5rem,6vw,4.5rem);padding-top:2rem;border-top:1px solid var(--line)}
.hero-stat .num{font-family:var(--font-d);font-weight:800}
.hero-stat .lbl{font-family:var(--font-m);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:.3rem}
.scroll-cue{position:absolute;bottom:1.6rem;right:clamp(1.4rem,5vw,4rem);z-index:2;font-family:var(--font-m);
  font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:.6rem}
.scroll-cue i{width:1px;height:34px;background:linear-gradient(var(--coral),transparent);display:block}

/* ============ marquee ============ */
.marquee-sec{padding:clamp(2rem,4vw,3.5rem) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.marquee-lab{padding:0 clamp(1.4rem,5vw,4rem);margin-bottom:1.6rem}
.marquee-wrap{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.marquee-track{display:flex;gap:clamp(2.5rem,5vw,4.5rem);align-items:center;white-space:nowrap;width:max-content;animation:marquee 96s linear infinite;will-change:transform}
.marquee-wrap:hover .marquee-track{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(-50%)}}
.mq-logo{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:clamp(1.8rem,3.2vw,2.5rem);
  opacity:0.7;
  transition:transform 0.35s var(--ease), opacity 0.35s var(--ease), filter 0.35s var(--ease);
}
.mq-logo:hover{
  opacity:1;
  transform:scale(1.1);
  filter:drop-shadow(0 0 10px rgba(255,255,255,0.12));
}
.mq-logo.white-bg{
  background:#fff;
  padding:4px clamp(0.4rem, 0.8vw, 0.6rem);
  border-radius:6px;
}
.mq-logo img,
.mq-logo svg{
  height:100%;
  width:auto;
  display:block;
}

/* ============ services ============ */
.services .section-head{display:flex;justify-content:space-between;align-items:flex-end;max-width:none;flex-wrap:wrap;gap:1rem}
.service-list{border-top:1px solid var(--line)}
.service-row{display:grid;grid-template-columns:46px 56px 1fr auto;gap:clamp(1rem,2.5vw,1.8rem);align-items:center;
  padding:clamp(1.5rem,3vw,2.2rem) 0;border-bottom:1px solid var(--line);position:relative;overflow:hidden;transition:padding-left .4s var(--ease)}
.service-row::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,var(--coral-soft),transparent 55%);opacity:0;transition:opacity .45s var(--ease);pointer-events:none}
.service-row::after{content:'';position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--grad);transition:width .6s var(--ease)}
.service-row:hover{padding-left:1rem}
.service-row:hover::after{width:100%}
.service-row:hover::before{opacity:1}
.service-num{font-family:var(--font-m);font-size:.8rem;color:var(--coral);align-self:center;position:relative;z-index:1}
.service-ico{width:50px;height:50px;border-radius:14px;display:grid;place-items:center;border:1px solid var(--line);
  background:var(--surface);color:var(--coral);position:relative;z-index:1;transition:transform .45s var(--ease),background .35s,border-color .35s,color .35s,box-shadow .35s}
.service-ico svg{width:23px;height:23px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.service-row:hover .service-ico{background:var(--coral);color:#150a06;border-color:var(--coral);transform:rotate(-6deg) scale(1.06);box-shadow:0 10px 26px -10px rgba(240,90,42,.6)}
.service-main{position:relative;z-index:1}
.service-main .service-title{font-size:clamp(1.5rem,3.4vw,2.6rem);transition:color .3s,transform .4s var(--ease)}
.service-row:hover .service-title{color:var(--coral)}
.service-promise{color:var(--muted);font-size:clamp(.9rem,1.4vw,1rem);margin-top:.45rem;max-width:54ch}
.service-caps{max-height:0;overflow:hidden;opacity:0;transition:max-height .55s var(--ease),opacity .4s,margin-top .4s;
  display:flex;flex-wrap:wrap;gap:.5rem;margin-top:0}
.service-row:hover .service-caps,.service-row:focus-within .service-caps{max-height:140px;opacity:1;margin-top:1rem}
.cap{font-family:var(--font-m);font-size:.68rem;color:var(--muted);border:1px solid var(--line);padding:.35rem .7rem;border-radius:30px;transition:border-color .3s,color .3s}
.service-row:hover .cap{border-color:var(--line-2);color:var(--text)}
.service-arrow{font-size:1.4rem;color:var(--muted);transition:transform .4s var(--ease),color .3s;position:relative;z-index:1}
.service-row:hover .service-arrow{transform:translate(6px,-6px);color:var(--coral)}

/* ============ why (diagram & interactive popover) ============ */
#why{padding:clamp(2rem,5vw,3.5rem) 0}
.why-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.why-copy h2{font-size:clamp(2rem,4.5vw,3.4rem)}
.why-copy .line2{color:var(--muted)}
.why-copy .why-sub{color:var(--muted);margin-top:1.4rem;max-width:38ch}
.why-toggle{display:flex;gap:.5rem;margin-top:1.6rem}
.why-toggle button{font-family:var(--font-m);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;
  padding:.5rem .9rem;border-radius:30px;border:1px solid var(--line);background:transparent;color:var(--muted);transition:.25s}
.why-toggle button.active{border-color:var(--coral);color:var(--coral)}

/* Visual Visualizations container on the right */
.why-visual-container{display:flex;flex-direction:column;align-items:center;gap:1.5rem;width:100%}
.why-diagram{position:relative;aspect-ratio:560 / 400;width:100%;max-width:440px;margin-inline:auto}
.why-diagram svg{width:100%;height:100%;overflow:visible}

/* Floating Glassmorphic Popover */
.why-popover{
  width:100%;
  max-width:440px;
  background:rgba(22,19,37,.62);
  border:1px solid var(--line-2);
  border-radius:var(--radius);
  padding:1.2rem;
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  box-shadow:0 8px 32px rgba(0,0,0,.24);
  position:relative;
  transition:border-color .3s,box-shadow .3s;
}
.why-popover.order-active{
  border-color:rgba(240,90,42,.25);
  box-shadow:0 8px 32px rgba(240,90,42,.06);
}
.why-popover.chaos-active{
  border-color:rgba(192,24,106,.25);
  box-shadow:0 8px 32px rgba(192,24,106,.06);
}

.popover-content{
  width:100%;
}
.popover-list{
  display:none;
  flex-direction:column;
  gap:.65rem;
  width:100%;
}
.popover-list.active{
  display:flex;
}

.popover-item{
  position:relative;
  display:flex;
  gap:1rem;
  align-items:flex-start;
  padding:.8rem 1rem .9rem;
  border-radius:10px;
  background:rgba(255,255,255,.015);
  border:1px solid rgba(255,255,255,.025);
  opacity:.3;
  transition:opacity .4s var(--ease),background-color .4s,border-color .4s,transform .4s var(--ease);
  cursor:pointer;
  overflow:hidden;
}
.popover-item.active{
  opacity:1;
  background:rgba(255,255,255,.04);
  border-color:rgba(255,255,255,.08);
  transform:translateY(-1px);
}

.popover-item-text{
  flex:1;
  display:flex;
  flex-direction:column;
}
.popover-item h4{
  font-family:var(--font-d);
  font-size:1.02rem;
  font-weight:700;
  color:var(--text);
  margin:0;
  line-height:1.2;
}
.popover-item-desc{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows .35s var(--ease);
}
.popover-item.active .popover-item-desc{
  grid-template-rows:1fr;
}
.popover-item-desc p{
  overflow:hidden;
  font-size:.84rem;
  line-height:1.5;
  color:var(--muted);
  margin:0;
  padding-top:0;
  opacity:0;
  transition:opacity .25s,padding-top .35s var(--ease);
}
.popover-item.active .popover-item-desc p{
  opacity:1;
  padding-top:.4rem;
}

/* Bad/Good Icons next to points */
.why-icon-bad, .why-icon-good{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:22px;
  height:22px;
  border-radius:50%;
  font-size:.7rem;
  font-weight:bold;
  flex-shrink:0;
  margin-top:.15rem;
}
.why-icon-bad{
  background:rgba(192,24,106,.12);
  color:var(--fuchsia);
  border:1px solid rgba(192,24,106,.2);
}
.why-icon-good{
  background:var(--coral-soft);
  color:var(--coral);
  border:1px solid rgba(240,90,42,.2);
}

/* Progress indicator per item */
.item-progress-bar{
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  height:2px;
  background:rgba(241,236,228,.03);
  opacity:0;
  transition:opacity .3s;
}
.popover-item.active .item-progress-bar{
  opacity:1;
}
.item-progress-fill{
  height:100%;
  width:0%;
  background:var(--coral);
}
.chaos-active .item-progress-fill{
  background:var(--fuchsia);
}

/* SVG Node Dimming & Highlight animations */
.node-scattered .s-node{
  opacity:.35;
  transition:opacity .5s var(--ease);
}
.node-scattered .s-node circle,
.node-scattered .s-node use{
  transform-box:fill-box;
  transform-origin:center;
  transition:transform .5s var(--ease);
}
.node-scattered .s-node.highlight{
  opacity:1;
}
.node-scattered .s-node.highlight circle,
.node-scattered .s-node.highlight use{
  transform:scale(1.12);
}
.node-scattered .s-node.highlight circle{
  stroke:var(--fuchsia);
  stroke-width:1.5px;
  filter:drop-shadow(0 0 6px rgba(192,24,106,.5));
}
.node-scattered .s-node.highlight use{
  stroke:var(--fuchsia) !important;
}

.node-connected .c-node{
  opacity:.32;
  transition:opacity .5s var(--ease);
}
.node-connected .c-node .node-bg,
.node-connected .c-node .node-icon{
  transform-box:fill-box;
  transform-origin:center;
  transition:transform .5s var(--ease);
}
.node-connected .c-node.highlight{
  opacity:1;
}
.node-connected .c-node.highlight .node-bg,
.node-connected .c-node.highlight .node-icon{
  transform:scale(1.12);
}
.node-connected.live .c-node.highlight .node-bg{
  stroke-width:2px;
}
.node-connected.live .active-brand.highlight .node-bg{filter:drop-shadow(0 0 8px rgba(240,90,42,.6))}
.node-connected.live .active-web.highlight .node-bg{filter:drop-shadow(0 0 8px rgba(255,138,77,.6))}
.node-connected.live .active-video.highlight .node-bg{filter:drop-shadow(0 0 8px rgba(192,24,106,.6))}
.node-connected.live .active-bot.highlight .node-bg{filter:drop-shadow(0 0 8px rgba(154,95,224,.6))}
.node-connected.live .active-marketing.highlight .node-bg{filter:drop-shadow(0 0 8px rgba(123,47,190,.6))}

/* Connected Flow Lines Highlight behavior */
.node-connected .flow-line{
  opacity:.15;
  transition:opacity .5s var(--ease),stroke-width .5s var(--ease);
}
.node-connected.live .flow-line.highlight{
  opacity:.85;
  stroke-width:2.2px;
}

/* Scattered state (Chaos) base styles */
.node-scattered circle{fill:#151125;stroke:#332a44;stroke-width:1}
.node-scattered line{stroke:var(--muted);stroke-width:1;opacity:.2}
.diag-lbl{font-family:var(--font-m);font-size:.58rem;fill:var(--muted);letter-spacing:.04em;opacity:.7}

/* Connected state (Order) base styles */
.node-connected{opacity:0}
.diag-lbl-active{font-family:var(--font-brand);font-size:.7rem;font-weight:800;fill:var(--text);letter-spacing:.02em;text-transform:uppercase}
.node-icon{fill:none;stroke-width:1.8px}
.node-bg{fill:#151125;stroke:var(--line);stroke-width:1.5px;transition:stroke .3s,filter .3s}

/* Accents mapping to Digital Sunset color palette */
.active-brand .node-bg{stroke:var(--coral)}
.active-brand .node-icon{stroke:var(--coral)}
.active-web .node-bg{stroke:var(--amber)}
.active-web .node-icon{stroke:var(--amber)}
.active-video .node-bg{stroke:var(--fuchsia)}
.active-video .node-icon{stroke:var(--fuchsia)}
.active-bot .node-bg{stroke:var(--indigo-soft)}
.active-bot .node-icon{stroke:var(--indigo-soft)}
.active-marketing .node-bg{stroke:var(--indigo)}
.active-marketing .node-icon{stroke:var(--indigo)}

/* Glowing lines animations */
.node-connected.live .flow-line{stroke-dasharray:6 6;animation:flowLine 1.2s linear infinite}
.fl-brand{stroke:var(--coral)}
.fl-web{stroke:var(--amber)}
.fl-video{stroke:var(--fuchsia)}
.fl-bot{stroke:var(--indigo-soft)}
.fl-marketing{stroke:var(--indigo)}

.node-connected .core-glow{fill:var(--coral);opacity:.2;transform-origin:200px 200px}
.node-connected .core-ring{transform-origin:200px 200px}
.node-connected .core-bg{transform-origin:200px 200px}

@media (prefers-reduced-motion:no-preference){
  .node-connected.live .c-node .node-bg,
  .node-connected.live .c-node .node-icon{animation:nodePop .6s var(--ease) cubic-bezier(0.34, 1.56, 0.64, 1) backwards}
  .node-connected.live .active-brand .node-bg,
  .node-connected.live .active-brand .node-icon{animation-delay:.08s}
  .node-connected.live .active-web .node-bg,
  .node-connected.live .active-web .node-icon{animation-delay:.16s}
  .node-connected.live .active-video .node-bg,
  .node-connected.live .active-video .node-icon{animation-delay:.24s}
  .node-connected.live .active-bot .node-bg,
  .node-connected.live .active-bot .node-icon{animation-delay:.32s}
  .node-connected.live .active-marketing .node-bg,
  .node-connected.live .active-marketing .node-icon{animation-delay:.4s}

  .node-connected.live .core-ring{animation:ringSpin 15s linear infinite}
  .node-connected.live .core-glow{animation:coreGlow 3s ease-in-out infinite}
  .node-connected.live .core-bg{animation:corePulse 3s ease-in-out infinite}
}

@keyframes flowLine{from{stroke-dashoffset:12}to{stroke-dashoffset:0}}
@keyframes nodePop{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes ringSpin{to{transform:rotate(360deg)}}
@keyframes corePulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
@keyframes coreGlow{0%,100%{transform:scale(1);opacity:.15}50%{transform:scale(1.35);opacity:.35}}

/* ============ AI showcase ============ */
.ai-sec{background:radial-gradient(80% 60% at 50% 0%,rgba(123,47,190,.10),transparent 60%),var(--surface)}
.ai-head{text-align:center;max-width:48rem;margin:0 auto clamp(2.5rem,5vw,4rem)}
.ai-head h2{font-size:clamp(2.2rem,5.5vw,4rem)}
.ai-head .sub{color:var(--muted);margin-top:1rem}
.reel-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem}
.reel-grid.reels-3{grid-template-columns:repeat(3,1fr);gap:1.2rem;max-width:1040px;margin-inline:auto}
.reel-grid.reels-4{grid-template-columns:repeat(4,1fr);gap:1.2rem;max-width:1200px;margin-inline:auto}
.reel{position:relative;aspect-ratio:9/16;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);margin:0;
  background:linear-gradient(160deg,var(--raised),#241a30);transition:transform .5s var(--ease),border-color .3s,box-shadow .5s}
.reel:hover{transform:translateY(-6px);border-color:var(--line-2);box-shadow:0 26px 60px -28px rgba(240,90,42,.5)}
.reel-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.reel .ph{position:absolute;inset:0;display:grid;place-items:center;background:var(--grad);opacity:.14}
.reel .play{position:absolute;inset:0;margin:auto;width:54px;height:54px;border-radius:50%;border:1px solid rgba(255,255,255,.4);
  display:grid;place-items:center;background:rgba(11,8,16,.4);backdrop-filter:blur(4px)}
.reel .play::after{content:'';border-left:12px solid #fff;border-top:8px solid transparent;border-bottom:8px solid transparent;margin-left:3px}
.reel .cap{position:absolute;left:0;bottom:0;width:100%;padding:1rem;font-family:var(--font-m);font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text);background:linear-gradient(transparent,rgba(11,8,16,.85))}
.reel video{width:100%;height:100%;object-fit:cover}
.reel.tall{grid-row:span 1}
.reel-vol{position:absolute;top:.6rem;right:.6rem;z-index:3;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(255,255,255,.22);background:rgba(11,8,16,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#fff;transition:background .25s,border-color .25s,transform .2s}
.reel-vol svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.reel-vol:hover{transform:scale(1.08);border-color:rgba(255,255,255,.42)}
.reel-vol.on{background:var(--coral);border-color:var(--coral)}
.reel-vol:focus-visible{outline:2px solid var(--coral);outline-offset:2px}
.ai-cta{text-align:center;margin-top:clamp(2rem,4vw,3rem)}

/* ============ process ============ */
.process-flow{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem;position:relative;margin-top:2rem}
.process-flow::before{content:'';position:absolute;top:36px;left:8%;right:8%;height:1px;background:var(--line);z-index:0}
.step-node{position:relative;z-index:1;text-align:center}
.step-dot{width:72px;height:72px;margin:0 auto 1.4rem;border-radius:50%;border:1px solid var(--line);
  display:grid;place-items:center;background:var(--canvas);font-family:var(--font-m);font-size:.8rem;color:var(--coral);transition:.4s}
.step-node:hover .step-dot{border-color:var(--coral);box-shadow:0 0 0 6px var(--coral-soft)}
.step-node h3{font-size:1.2rem;margin-bottom:.4rem}
.step-node p{color:var(--muted);font-size:.9rem}

/* ============ case studies ============ */
.work-head{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:1rem;margin-bottom:2.5rem}
.h-scroll-section{overflow:hidden}
.h-scroll-track{display:flex;gap:1.4rem;padding:0 clamp(1.4rem,5vw,4rem);width:max-content}
.case-card{width:min(78vw,440px);flex:none;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.8rem;display:flex;flex-direction:column;min-height:400px;transition:transform .4s var(--ease),border-color .4s var(--ease),box-shadow .4s var(--ease);position:relative;overflow:hidden}
.case-card::before{content:'';position:absolute;left:0;top:0;width:3px;height:0;background:var(--grad);transition:height .5s var(--ease)}
.case-card:hover{transform:translateY(-6px);border-color:rgba(240,90,42,0.25);box-shadow:0 12px 30px -10px rgba(240,90,42,0.12),0 20px 40px -20px rgba(123,47,190,0.1)}
.case-card:hover::before{height:100%}
.case-cat{font-family:var(--font-m);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);transition:color .3s}
.case-card:hover .case-cat{color:var(--amber)}
.case-name{font-size:clamp(1.4rem,2.8vw,1.9rem);margin:.8rem 0 1.1rem;transition:color .3s var(--ease)}
.case-card:hover .case-name{color:var(--text)}
.case-visual{flex:1;border-radius:12px;margin-bottom:1.2rem;background:radial-gradient(120% 120% at 50% 10%,rgba(240,90,42,0.04) 0%,rgba(123,47,190,0.02) 50%,transparent 100%),#120f22;border:1px solid rgba(241,236,228,0.04);position:relative;overflow:hidden;min-height:150px;display:flex;align-items:center;justify-content:center;transition:border-color .4s var(--ease),background .4s var(--ease)}
.case-card:hover .case-visual{border-color:rgba(240,90,42,0.15);background:radial-gradient(120% 120% at 50% 10%,rgba(240,90,42,0.08) 0%,rgba(123,47,190,0.04) 50%,transparent 100%),#0f0c1c}
.case-visual img{height:54px;width:auto;object-fit:contain;border-radius:10px;box-shadow:0 8px 20px rgba(0,0,0,0.3);border:1px solid rgba(255,255,255,0.07);transition:transform .4s cubic-bezier(.2,.85,.25,1)}
.case-card:hover .case-visual img{transform:scale(1.08);box-shadow:0 12px 28px rgba(0,0,0,0.45);border-color:rgba(255,255,255,0.12)}
.case-tags{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:1rem}
.case-tags .t{font-family:var(--font-m);font-size:.62rem;color:var(--coral);border:1px solid rgba(240,90,42,0.18);background:var(--coral-soft);padding:.3rem .75rem;border-radius:30px;transition:all .3s ease}
.case-card:hover .case-tags .t{border-color:var(--coral);background:rgba(240,90,42,0.16);color:#fff}
.case-desc{color:var(--muted);font-size:.92rem;transition:color .3s}
.case-card:hover .case-desc{color:rgba(240,237,232,0.85)}

/* ============ stats ============ */
.stats-sec{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.stat .num{font-family:var(--font-d);font-weight:800;line-height:1;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat .lbl{font-family:var(--font-m);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:.8rem}

/* ============ logos / testimonials ============ */
.logo-wall{display:flex;flex-wrap:wrap;gap:1rem;margin-bottom:3rem}
.logo-chip{flex:1 1 160px;min-height:90px;display:grid;place-items:center;border:1px solid var(--line);border-radius:10px;
  font-family:var(--font-d);font-weight:700;font-size:1.1rem;color:var(--muted);opacity:.7;transition:.3s;text-align:center;padding:1rem}
.logo-chip:hover{opacity:1;color:var(--text);border-color:var(--line-2)}
.t-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.2rem}
.t-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.8rem}
.t-quote{font-family:var(--font-d);font-weight:600;font-size:1.2rem;line-height:1.4;color:var(--text);opacity:.5}
.t-by{font-family:var(--font-m);font-size:.7rem;letter-spacing:.06em;color:var(--muted);margin-top:1.4rem}

/* ============ FAQ ============ */
.faq-wrap{max-width:840px;margin:0 auto}
.faq-item{border-bottom:1px solid var(--line)}
.faq-q{display:flex;justify-content:space-between;align-items:center;gap:1rem;width:100%;background:none;border:none;
  text-align:left;padding:1.5rem 0;color:var(--text);font-family:var(--font-d);font-weight:600;font-size:clamp(1.05rem,2vw,1.35rem)}
.faq-toggle{flex:none;width:24px;height:24px;position:relative;transition:transform .35s var(--ease)}
.faq-toggle::before,.faq-toggle::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--coral)}
.faq-toggle::before{width:14px;height:2px}
.faq-toggle::after{width:2px;height:14px;transition:transform .35s var(--ease)}
.faq-item.open .faq-toggle{transform:rotate(180deg)}
.faq-item.open .faq-toggle::after{transform:translate(-50%,-50%) scaleY(0)}
.faq-answer{height:0;overflow:hidden}
.faq-item.open .faq-answer{height:auto}
.faq-answer p{color:var(--muted);padding-bottom:1.5rem;max-width:64ch}

/* ============ CTA ============ */
.cta-sec{padding:0;margin:clamp(3rem,7vw,6rem) 0}
.cta-banner{background:var(--grad);background-size:160% 100%;border-radius:24px;text-align:center;
  padding:clamp(3.5rem,9vw,7rem) clamp(1.5rem,5vw,3rem);margin:0 clamp(1.4rem,5vw,4rem);position:relative;overflow:hidden;
  animation:ctaHue 12s linear infinite}
@keyframes ctaHue{to{background-position:160% 0}}
.cta-banner h2{font-size:clamp(2.2rem,6vw,4.6rem);color:#fff;text-shadow:0 2px 30px rgba(0,0,0,.2);max-width:18ch;margin:0 auto}
.cta-banner .sub{color:rgba(255,255,255,.85);margin:1.2rem auto 2.2rem;max-width:40ch}
.cta-banner .btn-dark:hover{box-shadow:0 16px 40px -14px rgba(0,0,0,.5)}

/* ============ footer ============ */
.footer {
  border-top: 1px solid var(--line);
  padding: clamp(4rem, 8vw, 6rem) 0 clamp(2rem, 4vw, 3rem);
  position: relative;
  overflow: hidden;
  background-color: #0d0b1a;
  z-index: 1;
}

.footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 10%;
  width: 80%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-2), transparent);
}

.footer .container {
  position: relative;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.8fr 1fr 1fr 1.4fr;
  gap: 3.5rem;
  position: relative;
  z-index: 2;
}

.footer-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
}

.footer-brand .brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  transition: transform 0.3s var(--ease);
}

.footer-brand .brand:hover {
  transform: translateY(-2px);
}

.footer-brand .brand-monogram {
  width: 48px;
  height: 48px;
  fill: var(--coral);
  transition: fill 0.3s var(--ease), filter 0.3s var(--ease);
  filter: drop-shadow(0 2px 8px rgba(240, 90, 42, 0.15));
}

.footer-brand .brand:hover .brand-monogram {
  fill: var(--amber);
  filter: drop-shadow(0 4px 12px rgba(240, 90, 42, 0.3));
}

.footer-tag {
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.6;
  max-width: 32ch;
  margin: 0;
}

/* Glowing Project Availability Badge */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  background: rgba(16, 185, 129, 0.06);
  border: 1px solid rgba(16, 185, 129, 0.15);
  padding: 0.6rem 1rem;
  border-radius: 100px;
  font-family: var(--font-m);
  font-size: 0.72rem;
  font-weight: 500;
  color: #34d399;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  box-shadow: 0 4px 20px -5px rgba(16, 185, 129, 0.05);
}

.status-dot {
  width: 8px;
  height: 8px;
  background-color: #10b981;
  border-radius: 50%;
  position: relative;
}

.status-dot::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #10b981;
  border-radius: 50%;
  animation: statusPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes statusPulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(2.5);
    opacity: 0;
  }
}

/* Social Icons styling */
.footer-social {
  display: flex;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

.footer-social a {
  width: 42px;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.02);
  transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.footer-social a:hover {
  border-color: var(--coral);
  color: #ffffff;
  background: var(--coral-soft);
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 6px 20px -6px rgba(240, 90, 42, 0.25);
}

.footer-social svg {
  transition: transform 0.3s var(--ease);
}

.footer-social a:hover svg {
  transform: scale(1.1);
}

/* Link Hover Underline animations */
.footer-col h4 {
  font-family: var(--font-m);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1.5rem;
  font-weight: 600;
}

.footer-col ul {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.footer-col ul li a {
  color: var(--text);
  opacity: 0.75;
  font-size: 0.92rem;
  display: inline-block;
  position: relative;
  padding-bottom: 2px;
  transition: opacity 0.3s var(--ease), color 0.3s var(--ease);
}

.footer-col ul li a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: var(--coral);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.3s var(--ease);
}

.footer-col ul li a:hover {
  opacity: 1;
  color: #ffffff;
}

.footer-col ul li a:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

.footer-contact p {
  color: var(--text);
  opacity: 0.75;
  font-size: 0.9rem;
  margin-bottom: 0.8rem;
  line-height: 1.6;
}

.footer-contact a {
  color: var(--coral);
  font-weight: 500;
  transition: color 0.3s var(--ease);
  display: inline-block;
  padding: 3px 0;
  position: relative;
}

.footer-contact a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: var(--coral);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.3s var(--ease);
}

.footer-contact a:hover {
  color: var(--amber);
}

.footer-contact a:hover::after {
  background-color: var(--amber);
  transform: scaleX(1);
  transform-origin: left;
}

/* Footer Bottom layout */
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-top: clamp(4rem, 8vw, 6rem);
  padding-top: 2rem;
  border-top: 1px solid var(--line);
  position: relative;
  z-index: 2;
}

.footer-bottom p, .footer-bottom a {
  font-family: var(--font-m);
  font-size: 0.75rem;
  color: var(--muted);
  margin: 0;
}

.footer-bottom .links {
  display: flex;
  gap: 2rem;
}

.footer-bottom .links a {
  transition: color 0.3s var(--ease);
  position: relative;
  padding-bottom: 2px;
}

.footer-bottom .links a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: var(--coral);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.3s var(--ease);
}

.footer-bottom .links a:hover {
  color: #ffffff;
}

.footer-bottom .links a:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* Massive background watermark smrimoo */
.footer-watermark-text {
  position: relative;
  display: block;
  width: max-content;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 3.5rem;
  margin-bottom: 3.5rem; /* Space at the bottom to prevent cropping */
  font-family: var(--font-d);
  font-size: clamp(5rem, 16vw, 18rem);
  font-weight: 900;
  color: #ffffff;
  opacity: 0.02;
  line-height: 0.95; /* Prevent vertical clipping of letters */
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  letter-spacing: -0.04em;
  text-transform: lowercase;
}

/* Footer-specific custom mobile breakpoints */
@media (max-width: 600px) {
  .footer {
    padding-bottom: 7rem; /* Extra padding to give watermark its own space */
  }
  .footer-brand {
    align-items: center;
    text-align: center;
  }
  .footer-brand .brand {
    margin: 0 auto;
  }
  .status-badge {
    margin: 0 auto;
  }
  .footer-social {
    justify-content: center;
  }
  .footer-col {
    text-align: center;
  }
  .footer-col ul {
    align-items: center;
  }
  .footer-bottom {
    flex-direction: column;
    text-align: center;
    gap: 1rem;
    margin-top: 3rem;
  }
  .footer-bottom .links {
    justify-content: center;
    gap: 1.5rem;
  }
  .footer-cookie {
    text-align: center;
  }
  .footer-watermark-text {
    margin-top: 2.2rem;
    margin-bottom: 2.2rem;
    font-size: 16vw;
    opacity: 0.055;
    line-height: 0.95;
  }
}

/* ============ responsive ============ */
@media(max-width:1024px){
  .footer-watermark-text {
    opacity: 0.055;
    margin-top: 2.8rem;
    margin-bottom: 2.8rem;
    line-height: 0.95;
  }
  .contact-grid {
    grid-template-columns: 1fr !important;
  }
  .contact-grid .form {
    order: -1;
  }
  .footer-grid{grid-template-columns:1fr 1fr}
  .why-grid{grid-template-columns:1fr;gap:2.5rem}
  .why-diagram{max-width:380px}
  .why-popover{max-width:440px}
  .diag-lbl-active{font-size:.6rem}
  .diag-lbl{font-size:.5rem}
  .reel-grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    gap: 1.2rem;
    padding-inline: clamp(1.4rem, 5vw, 4rem);
    padding-bottom: 2rem;
    margin-inline: calc(-1 * clamp(1.4rem, 5vw, 4rem));
    scrollbar-width: none;
  }
  .reel-grid::-webkit-scrollbar {
    display: none;
  }
  .reel-grid .reel {
    flex: 0 0 280px;
    scroll-snap-align: start;
  }
  .reel-grid .vshow {
    flex: 0 0 280px;
    aspect-ratio: 16/9;
    scroll-snap-align: start;
    position: relative;
    overflow: hidden;
    margin: 0;
    border-radius: var(--radius);
    border: 1px solid var(--line);
    background: linear-gradient(160deg,var(--raised),#241a30);
    transition: transform .5s var(--ease),border-color .3s,box-shadow .5s;
  }
  .reel-grid .vshow video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
}
@media(max-width:480px){
  .why-diagram{max-width:290px}
  .why-popover{max-width:100%;padding:1.1rem 1.25rem;min-height:165px}
  .popover-content h4{font-size:1rem}
  .popover-content p{font-size:.8rem}
  .diag-lbl-active{font-size:.52rem}
  .diag-lbl{font-size:.44rem}
}
@media(max-width:360px){
  .why-diagram{max-width:250px}
  .diag-lbl-active{font-size:.48rem}
  .diag-lbl{font-size:.4rem}
}
@media(max-width:768px){
  .nav-links,.nav-cta .btn{display:none}
  .nav-burger{display:flex}
  .nav-cta{gap:0}
  .hero{justify-content:center;padding-top:7rem}
  .service-row{grid-template-columns:auto 1fr;gap:.4rem 1rem}
  .service-arrow,.service-ico{display:none}
  .service-num{grid-row:1;align-self:start}
  .service-caps{max-height:none;opacity:1;margin-top:.8rem}
  .process-flow{grid-template-columns:1fr;gap:1.2rem}
  .process-flow::before{top:0;bottom:0;left:36px;right:auto;width:1px;height:auto}
  .step-node{display:grid;grid-template-columns:72px 1fr;column-gap:1.2rem;row-gap:.35rem;text-align:left;align-items:start}
  .step-dot{grid-column:1;grid-row:1 / span 2;margin:0;align-self:start}
  .step-node h3{grid-column:2;align-self:center}
  .step-node p{grid-column:2}
  .footer-grid{grid-template-columns:1fr}
  .case-card{padding:1.25rem;min-height:360px}
  .case-visual{min-height:130px}
  .case-visual img{height:44px}

  /* Responsive page-hero only for services pages */
  .page-hero.service-hero {
    min-height: auto !important;
    padding-top: 7.5rem !important;
    padding-bottom: 3rem !important;
  }
  .page-hero.service-hero h1 {
    font-size: clamp(1.8rem, 7.5vw, 2.6rem) !important;
    line-height: 1.15 !important;
  }
  .page-hero.service-hero .promise {
    font-size: 0.95rem !important;
    margin: 1rem auto 1.5rem !important;
    padding-inline: 1rem;
  }
  .page-hero.service-hero .hero-actions {
    flex-direction: column !important;
    gap: 0.75rem !important;
    width: 100%;
    padding-inline: 1.5rem;
    box-sizing: border-box;
  }
  .page-hero.service-hero .hero-actions .btn {
    width: 100% !important;
    box-sizing: border-box;
  }
}
@media(max-width:420px){
  .hero-title{font-size:clamp(2.6rem,13vw,3.4rem)}
}

/* touch: native cursor */
@media(hover:none){
  body{cursor:auto}
  .cursor,.cursor-dot{display:none}
  button,a{cursor:pointer}
  .marquee-track{animation-duration:48s}
}

/* reduced motion */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important;scroll-behavior:auto !important}
  .hero-aurora{opacity:.4}
  [data-reveal] .word-inner{transform:none !important;opacity:1 !important}
  .node-connected{opacity:1}
  body.loaded .loader{display:none}
}

/* ===========================================================
   SUBPAGES (service / work / about / contact / legal)
   =========================================================== */
.page-hero{position:relative;min-height:64vh;display:flex;align-items:flex-end;overflow:hidden;
  padding:9rem 0 clamp(2.5rem,5vw,4rem)}
.page-hero .hero-content{position:relative;z-index:2;width:100%;text-align:center}
.breadcrumb{display:flex;gap:.5rem;align-items:center;justify-content:center;margin-bottom:1.4rem;font-family:var(--font-m);
  font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.breadcrumb a{color:var(--muted);transition:color .2s}.breadcrumb a:hover{color:var(--coral)}
.breadcrumb .sep{opacity:.45}.breadcrumb [aria-current]{color:var(--coral)}
.page-hero h1{font-family:var(--font-d);font-weight:800;font-size:clamp(2.6rem,7vw,5.4rem);line-height:1;letter-spacing:-.03em;max-width:18ch;margin-inline:auto}
.page-hero .promise{color:var(--muted);font-size:clamp(1.05rem,1.6vw,1.25rem);max-width:48ch;margin:1.4rem auto 2rem}

.includes-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1rem}
.include{display:flex;gap:1rem;align-items:flex-start;padding:1.3rem;border:1px solid var(--line);
  border-radius:12px;background:var(--surface);transition:transform .3s var(--ease),border-color .3s}
.include:hover{border-color:var(--line-2);transform:translateY(-3px)}
.include .ic{flex:none;width:40px;height:40px;border-radius:11px;display:grid;place-items:center;background:var(--coral-soft);color:var(--coral);
  transition:background .35s,color .35s,transform .45s var(--ease)}
.include:hover .ic{background:var(--coral);color:#150a06;transform:rotate(-6deg) scale(1.05)}
.include .ic svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.include h3{font-family:var(--font-d);font-weight:700;font-size:1.02rem;line-height:1.25}
.include p{color:var(--muted);font-size:.86rem;margin-top:.25rem}

/* Service Bento Inclusions */
.includes-bento {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.2rem;
  margin-top: 2.2rem;
}
.includes-bento .include {
  grid-column: span 4;
}
.includes-bento .include.b-span-8 {
  grid-column: span 8;
  display: flex;
  gap: 1.5rem;
}
.includes-bento .include.b-span-8 .ic {
  width: 48px;
  height: 48px;
}
.includes-bento .include.b-span-8 h3 {
  font-size: 1.15rem;
}
.includes-bento .include.b-span-8 p {
  font-size: 0.9rem;
  line-height: 1.5;
}

@media(max-width:900px){
  .includes-bento {
    grid-template-columns: 1fr;
  }
  .includes-bento .include,
  .includes-bento .include.b-span-8 {
    grid-column: span 1;
    flex-direction: column;
    gap: 1rem;
  }
  .includes-bento .include.b-span-8 .ic {
    width: 40px;
    height: 40px;
  }
}

.mini-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.mini-step{padding:1.6rem;border:1px solid var(--line);border-radius:12px;background:var(--surface);position:relative;overflow:hidden}
.mini-step::before{content:'';position:absolute;left:0;top:0;width:3px;height:0;background:var(--grad);transition:height .5s var(--ease)}
.mini-step:hover::before{height:100%}
.mini-step .n{font-family:var(--font-m);font-size:.78rem;color:var(--coral);display:block;margin-bottom:.7rem}
.mini-step h3{font-size:1.12rem;margin-bottom:.4rem}
.mini-step p{color:var(--muted);font-size:.9rem}

/* Service Process Timeline */
.mini-steps-timeline {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.2rem;
  position: relative;
  margin-top: 2.2rem;
}
.mini-steps-timeline::before {
  content: '';
  position: absolute;
  top: 36px;
  left: 10%;
  right: 10%;
  height: 1px;
  background: var(--line);
  z-index: 0;
}
.mini-steps-timeline .mini-step {
  position: relative;
  z-index: 1;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.8rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  transition: border-color 0.4s var(--ease), transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.mini-steps-timeline .mini-step:hover {
  transform: translateY(-5px);
  border-color: rgba(240, 90, 42, 0.25);
  box-shadow: 0 15px 35px -15px rgba(240, 90, 42, 0.25);
}
.mini-steps-timeline .mini-step .n {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--canvas);
  display: grid;
  place-items: center;
  font-family: var(--font-m);
  font-size: 0.8rem;
  color: var(--coral);
  margin-bottom: 1.2rem;
  transition: border-color 0.4s, box-shadow 0.4s;
}
.mini-steps-timeline .mini-step:hover .n {
  border-color: var(--coral);
  box-shadow: 0 0 0 5px var(--coral-soft);
}

@media(max-width:768px){
  .mini-steps-timeline {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .mini-steps-timeline::before {
    display: none;
  }
}

.proof-grid,.work-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.work-grid .case-card{width:auto;min-height:340px}
.proof-grid .case-card{width:auto;min-height:300px}
/* ===== Work: featured case studies ===== */
.work-featured .wf-head,.work-bento-sec .wf-head{text-align:left;max-width:60rem;margin-left:0;margin-right:0}
.case-study{border-top:1px solid var(--line)}
.case-study.cs-split {
  display: grid;
  grid-template-columns: .82fr 1.18fr;
  gap: clamp(1.5rem, 4vw, 3.6rem);
  align-items: center;
  padding: clamp(2.2rem, 5vw, 4rem) 0;
}
.case-study.cs-split.flip .cs-media {
  order: 2;
}
.cs-logo-tile{aspect-ratio:4/3;border-radius:var(--radius);display:grid;place-items:center;overflow:hidden;background:radial-gradient(120% 120% at 50% 12%,rgba(240,90,42,.08),rgba(123,47,190,.05) 55%,transparent),#120f22;border:1px solid var(--line);transition:border-color .4s var(--ease)}
.cs-logo-tile img{width:min(56%,240px);height:auto;border-radius:12px;box-shadow:0 14px 34px rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.08)}
.case-study:hover .cs-logo-tile{border-color:rgba(240,90,42,.28)}
.cs-meta{font-family:var(--font-m);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--amber)}
.cs-name{font-size:clamp(1.7rem,3.6vw,2.6rem);margin:.5rem 0 1rem}
.cs-parts{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem 2rem;margin:1.6rem 0}
.cs-label{display:block;font-family:var(--font-m);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--coral);margin-bottom:.4rem}
.cs-part p{color:var(--muted);font-size:.92rem;line-height:1.55}
.cs-quote{position:relative;border-left:2px solid var(--coral);padding:.2rem 0 .2rem 1.1rem;margin:0 0 1.6rem;font-family:var(--font-s);font-size:1.12rem;line-height:1.5;color:var(--text)}
.cs-quote cite{display:block;margin-top:.7rem;font-family:var(--font-m);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-style:normal}

.case-study.cs-full {
  display: flex;
  flex-direction: column;
  gap: 2.2rem;
  padding: clamp(2.2rem, 5vw, 4rem) 0;
}
.cs-media-full {
  width: 100%;
}
.cs-media-full .banner-tile {
  aspect-ratio: 21/9;
  width: 100%;
}
.cs-media-full .banner-tile img {
  width: min(32%, 280px);
}
.cs-full-content {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: clamp(1.5rem, 4vw, 3.6rem);
}
.cs-full-sidebar {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.cs-full-sidebar .cs-name {
  margin-bottom: 0.8rem;
}
.cs-full-sidebar .case-tags {
  margin-bottom: 1.5rem;
}
.cs-full-details .grid-2x2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.6rem 2rem;
  margin: 0;
}

/* ===== Work: bento grid ===== */
.work-bento-sec .bento {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 240px;
  gap: 1.2rem;
  margin-top: 2.5rem;
}
.bento-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  height: 100%;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.4s var(--ease), border-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.bento-card.b-span-8 {
  grid-column: span 8;
}
.bento-card.b-span-4 {
  grid-column: span 4;
}
.bento-card.b-row-2 {
  grid-row: span 2;
}
.bento-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 3px;
  width: 0;
  background: var(--grad);
  transition: width 0.5s var(--ease);
  z-index: 10;
}
.bento-card:hover, .bento-card:focus-within {
  transform: translateY(-5px);
  border-color: rgba(240, 90, 42, 0.25);
  box-shadow: 0 20px 44px -22px rgba(240, 90, 42, 0.3);
  outline: none;
}
.bento-card:hover::before, .bento-card:focus-within::before {
  width: 100%;
}

.bento-logo-wrap {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  background: radial-gradient(120% 120% at 50% 12%, rgba(240, 90, 42, 0.04), rgba(123, 47, 190, 0.02) 55%, transparent), #0d0a1a;
  transition: transform 0.6s var(--ease);
}
.bento-logo-wrap img {
  width: 24%;
  min-width: 80px;
  height: auto;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.06);
  transition: transform 0.5s var(--ease);
}
.bento-card:hover .bento-logo-wrap img {
  transform: scale(0.85) translateY(-15px);
}

.bento-card .bento-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 1.5rem;
  background: linear-gradient(to top, rgba(13, 10, 26, 0.96) 65%, rgba(13, 10, 26, 0.55) 90%, transparent);
  border-top: 1px solid rgba(240, 90, 42, 0.15);
  transform: translateY(100%);
  opacity: 0;
  transition: transform 0.5s var(--ease), opacity 0.4s var(--ease);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  pointer-events: none;
  z-index: 5;
}
.bento-card:hover .bento-overlay,
.bento-card:focus-within .bento-overlay {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.bento-overlay h3 {
  font-size: 1.25rem;
  margin: 0;
  color: var(--text);
}
.bento-overlay .bento-meta {
  font-family: var(--font-m);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--amber);
}
.bento-overlay .bento-desc {
  font-size: 0.88rem;
  color: var(--muted);
  line-height: 1.45;
  margin: 0;
}
.bento-overlay .case-tags {
  margin-top: 0.2rem;
}

/* CTA Card Specific Styles */
.bento-card.bento-cta {
  background: linear-gradient(135deg, rgba(240, 90, 42, 0.08), rgba(123, 47, 190, 0.08)), var(--surface);
  border: 1px dashed rgba(240, 90, 42, 0.3);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 2.2rem;
  text-align: left;
}
.bento-card.bento-cta:hover {
  border-style: solid;
  border-color: var(--coral);
}
.bento-cta h3 {
  font-size: 1.4rem;
  line-height: 1.3;
  margin-bottom: 0.6rem;
  font-family: var(--font-d);
  font-weight: 700;
}
.bento-cta p {
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.45;
  margin-bottom: 1.4rem;
}

@media(max-width: 1024px) {
  .work-bento-sec .bento {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: minmax(220px, auto);
    gap: 1rem;
  }
  .bento-card.b-span-8,
  .bento-card.b-span-4 {
    grid-column: span 1;
  }
  .bento-card.b-row-2 {
    grid-row: span 1;
  }
  .bento-card {
    height: auto;
    min-height: 240px;
    padding: 1.5rem;
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction: column;
  }
  .bento-logo-wrap {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    background: #0d0a1a;
    border: 1px solid rgba(255,255,255,0.07);
    margin-bottom: 1rem;
    display: grid;
    place-items: center;
    flex: none;
  }
  .bento-logo-wrap img {
    width: 40px;
    min-width: 40px;
    box-shadow: none;
    border: none;
  }
  .bento-card:hover .bento-logo-wrap img {
    transform: none;
  }
  .bento-card .bento-overlay {
    position: static;
    transform: none;
    opacity: 1;
    padding: 0;
    background: transparent;
    border-top: none;
    pointer-events: auto;
  }
  .bento-overlay h3 {
    font-size: 1.2rem;
  }
  .cs-full-content {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

@media(max-width: 768px) {
  .case-study.cs-split {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .case-study.cs-split.flip .cs-media {
    order: 0;
  }
  .cs-full-details .grid-2x2 {
    grid-template-columns: 1fr;
    gap: 1.2rem;
  }
  .work-bento-sec .bento {
    grid-template-columns: 1fr;
  }
}

.about-lead{font-family:var(--font-d);font-weight:700;font-size:clamp(1.7rem,4vw,3rem);line-height:1.2;max-width:22ch}

/* about: why we exist */
.about-why-sec{border-bottom:1px solid var(--line);padding-bottom:clamp(3rem,6vw,5.5rem)}
.why-exist-head{border-left:2px solid transparent;border-image:linear-gradient(to bottom, var(--coral), var(--fuchsia)) 1;padding-left:clamp(1.2rem,3vw,2rem)}
.why-exist-body p{color:var(--muted);margin-bottom:1.4rem;font-size:1.05rem;line-height:1.65}
.why-exist-body p:last-child{margin-bottom:0}

/* about: story */
.story-grid{display:grid;grid-template-columns:.78fr 1.22fr;gap:clamp(2rem,5vw,4.5rem);align-items:start}
.story-grid .story-head{position:sticky;top:120px}
.story-media-card{margin-top:clamp(1.5rem,3vw,2.5rem);border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);background:var(--surface);position:relative;transition:transform .4s var(--ease),border-color .3s,box-shadow .4s var(--ease)}
.story-media-card::before{content:'';position:absolute;inset:0;border-radius:inherit;background:linear-gradient(135deg,rgba(240,90,42,.08),transparent 50%,rgba(123,47,190,.08));pointer-events:none;z-index:2;opacity:0;transition:opacity .4s ease}
.story-media-card:hover{transform:translateY(-4px);border-color:var(--line-2);box-shadow:0 20px 40px -20px rgba(240,90,42,.3),0 0 30px -10px rgba(123,47,190,.2)}
.story-media-card:hover::before{opacity:1}
.story-media-card img{width:100%;height:auto;display:block;object-fit:cover;transition:transform .6s var(--ease)}
.story-media-card:hover img{transform:scale(1.03)}
.story-body p{color:var(--muted);margin-bottom:1.2rem;font-size:1.02rem}
.story-body p strong{color:var(--text);font-weight:500}
.story-quote{font-family:var(--font-s);font-style:italic;font-size:clamp(1.4rem,3vw,2rem);line-height:1.3;color:var(--text);
  border-left:2px solid var(--coral);padding-left:1.4rem;margin:2rem 0}

/* about: team */
.team-lead-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;margin-bottom:1.4rem}
.team-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.4rem}
.team-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin:0;
  transition:transform .4s var(--ease),border-color .3s,box-shadow .45s}
.team-card:hover{transform:translateY(-5px);border-color:var(--line-2);box-shadow:0 26px 60px -30px rgba(240,90,42,.5)}
.team-photo{position:relative;aspect-ratio:4/5;overflow:hidden;background:linear-gradient(160deg,var(--raised),#241a30)}
.team-photo::before{content:attr(data-initials);position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--font-d);font-weight:800;font-size:2.4rem;letter-spacing:.04em;color:rgba(241,236,228,.18)}
.team-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;transition:transform .6s var(--ease)}
.team-card:hover .team-photo img{transform:scale(1.05)}
.team-info{padding:1.1rem 1.2rem 1.3rem}
.team-name{font-family:var(--font-d);font-weight:700;font-size:1.12rem;line-height:1.1}
.team-role{font-family:var(--font-m);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--coral);display:block;margin:.4rem 0 .7rem}
.team-bio{color:var(--muted);font-size:.85rem;line-height:1.5}
.team-lead{display:grid;grid-template-columns:160px 1fr;align-items:stretch}
.team-lead .team-photo{aspect-ratio:auto;height:100%;min-height:210px}
.team-lead .team-photo::before{font-size:2.8rem}
.team-lead .team-info{align-self:center;padding:1.6rem}
.team-lead .team-name{font-size:clamp(1.3rem,2.4vw,1.7rem)}
.team-lead .team-role{font-size:.66rem}
.team-lead .team-bio{font-size:.92rem}
@media(max-width:900px){.story-grid{grid-template-columns:1fr}.story-grid .story-head{position:static}}
@media(max-width:760px){.team-lead-grid{grid-template-columns:1fr}.team-grid{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.team-lead{grid-template-columns:1fr}.team-lead .team-photo{aspect-ratio:16/10;min-height:0}}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.values-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.2rem}
.value{padding:1.6rem;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.value{transition:transform .35s var(--ease),border-color .3s}
.value:hover{transform:translateY(-3px);border-color:var(--line-2)}
.value .ic{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;background:var(--coral-soft);color:var(--coral);margin-bottom:1rem;
  transition:background .35s,color .35s,transform .45s var(--ease)}
.value:hover .ic{background:var(--coral);color:#150a06;transform:rotate(-6deg) scale(1.05)}
.value .ic svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.value h3{font-size:1.12rem;margin-bottom:.5rem}.value p{color:var(--muted);font-size:.9rem}

.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:start}
.contact-info .ci{margin-bottom:1.6rem}
.contact-info .ci .lbl{font-family:var(--font-m);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:.4rem}
.contact-info .ci a,.contact-info .ci p{color:var(--text);font-size:1rem;line-height:1.5}
.contact-info .ci a:hover{color:var(--coral)}
.form{display:grid;gap:1rem}
.form .field{display:flex;flex-direction:column;gap:.4rem}
.form label{font-family:var(--font-m);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.form input,.form textarea,.form select{background:var(--surface);border:1px solid var(--line);border-radius:10px;
  padding:.9rem 1rem;color:var(--text);font-family:var(--font-b);font-size:.95rem;transition:border-color .25s;cursor:none;width:100%}
.form input:focus,.form textarea:focus,.form select:focus{outline:none;border-color:var(--coral)}
.form textarea{min-height:130px;resize:vertical}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.form .note{font-family:var(--font-m);font-size:.66rem;color:var(--muted)}
.map-embed{border:1px solid var(--line);border-radius:14px;overflow:hidden;margin-top:2.5rem}
.map-embed iframe{width:100%;height:300px;border:0;display:block;filter:grayscale(.35) invert(.9) hue-rotate(180deg) contrast(.9)}

.prose{max-width:760px;margin:0 auto}
.prose h2{font-size:1.4rem;margin:2.2rem 0 .8rem}
.prose p,.prose li{color:var(--muted);margin-bottom:.8rem}
.prose ul{padding-left:1.2rem;margin-bottom:1rem;list-style:disc}

@media(max-width:1024px){.proof-grid,.work-grid{grid-template-columns:1fr 1fr}}
@media(max-width:768px){
  .mini-steps{grid-template-columns:1fr}
  .two-col,.contact-grid,.form .row{grid-template-columns:1fr}
}
@media(max-width:640px){.proof-grid,.work-grid{grid-template-columns:1fr}}

/* ===========================================================
   Handoff additions — new components only (no design changes
   to existing elements). Frosted client-logo wall, cookie
   notice, stat sub-line, video showcase, legal prose extras.
   =========================================================== */

/* ============ unified responsive stats styling ============ */
.stats-grid,
.hero-stats {
  display: grid;
  grid-template-columns: repeat(4, auto);
  justify-content: center;
  gap: clamp(2rem, 5.5vw, 6rem);
  width: 100%;
}

.stat,
.hero-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-width: 0;
}

/* digits and symbols must never wrap */
.stat .num,
.hero-stat .num {
  white-space: nowrap;
}

/* typography clamps */
.stat .num {
  font-size: clamp(2.2rem, 5vw, 4.2rem);
}
.hero-stat .num {
  font-size: clamp(1.8rem, 2.8vw, 2.4rem);
}



/* stat labels */
.stat .lbl {
  font-size: clamp(0.62rem, 1vw, 0.72rem);
}
.hero-stat .lbl {
  font-size: clamp(0.58rem, 0.9vw, 0.66rem);
}

/* sub-line info text */
.stat .sub {
  display: block;
  font-family: var(--font-m);
  font-size: clamp(0.55rem, 0.9vw, 0.62rem);
  letter-spacing: .03em;
  color: var(--muted);
  margin-top: .4rem;
  opacity: .85;
  text-transform: none;
  line-height: 1.45;
  max-width: 24ch;
  margin-inline: auto;
}
.hero-stat .sub {
  display: block;
  font-family: var(--font-m);
  font-size: clamp(0.5rem, 0.8vw, 0.56rem);
  letter-spacing: .02em;
  color: var(--muted);
  margin-top: .35rem;
  opacity: .85;
  text-transform: none;
  line-height: 1.4;
  max-width: 22ch;
  margin-inline: auto;
}

/* responsive media queries */
@media(max-width:768px) {
  .stats-grid,
  .hero-stats {
    grid-template-columns: repeat(2, auto);
    gap: 2.5rem clamp(2rem, 8vw, 4rem);
    justify-content: center;
  }
}

@media(max-width:480px) {
  /* hide hero subtext on mobile to prevent clutter & overlap with scroll indicator */
  .hero-stat .sub {
    display: none;
  }
}

@media(max-width:360px) {
  .stats-grid,
  .hero-stats {
    grid-template-columns: auto;
    gap: 2rem;
    justify-content: center;
  }
}

/* client logo marquee — uniform light tiles, multi-row, pause on hover */
.logo-marquee{display:flex;flex-direction:column;gap:1rem;margin-bottom:3rem;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.logo-row{display:flex;overflow:hidden;width:100%}
.logo-track{display:flex;gap:1rem;align-items:center;width:max-content;flex:none;
  animation:logoScroll var(--dur,60s) linear infinite;will-change:transform}
.logo-row.rtl .logo-track{animation-direction:reverse}
.logo-marquee:hover .logo-track{animation-play-state:paused}
@keyframes logoScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.logo-tile{flex:none;width:clamp(124px,14vw,172px);aspect-ratio:8/5;display:grid;place-items:center;
  padding:clamp(.9rem,1.6vw,1.5rem);border-radius:16px;background:#ffffff;
  border:1px solid rgba(13,11,26,.06);box-shadow:0 14px 30px -18px rgba(0,0,0,.75);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.logo-tile:hover{transform:translateY(-5px);box-shadow:0 20px 44px -16px rgba(240,90,42,.6),0 0 0 1px rgba(240,90,42,.5)}
.logo-tile img{max-width:100%;max-height:100%;width:100%;height:100%;object-fit:contain;display:block}
@media(max-width:680px){.logo-tile{width:clamp(116px,40vw,150px)}.logo-marquee{gap:.8rem}.logo-track{gap:.8rem}}
@media(prefers-reduced-motion:reduce){.logo-track{animation:none}}

/* Unified case card mockup visual style (implemented under .case-visual) */

/* team: role + profession on separate lines */
.team-role{margin:.45rem 0 .1rem}
.team-prof{display:block;font-family:var(--font-b);font-size:.8rem;line-height:1.4;color:var(--muted);margin:0 0 .75rem}
.team-lead .team-prof{font-size:.88rem}
/* let team cards size to their content so bios are never clipped */
.team-grid{align-items:start}
/* tablet: 3 per row; mobile: single column (per spec) */
@media(max-width:820px){.team-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:560px){.team-grid{grid-template-columns:1fr}}

/* footer cookie notice */
.footer-cookie{flex-basis:100%;order:3;font-family:var(--font-m);font-size:.68rem;color:var(--muted);opacity:1;line-height:1.6}
.footer-cookie a{color:var(--coral);font-family:var(--font-m);font-size:.68rem}

/* landscape video showcase (AI Content & Video) */
.vshow-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.2rem;max-width:1040px;margin-inline:auto}
.vshow{position:relative;aspect-ratio:16/9;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);margin:0;
  background:linear-gradient(160deg,var(--raised),#241a30);transition:transform .4s var(--ease),border-color .4s var(--ease),box-shadow .4s var(--ease)}
.vshow:hover{transform:translateY(-6px);border-color:var(--line-2);box-shadow:0 26px 60px -28px rgba(240,90,42,.5)}
.vshow video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.vshow .cap{position:absolute;left:0;bottom:0;width:100%;padding:1rem;font-family:var(--font-m);font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text);background:linear-gradient(transparent,rgba(11,8,16,.85))}
@media(max-width:680px){.vshow-grid{grid-template-columns:1fr;max-width:560px}}

/* legal prose extras */
.prose h1{font-size:clamp(2rem,5vw,3rem);margin-bottom:1rem}
.prose h3{font-family:var(--font-d);font-weight:700;font-size:1.05rem;margin:1.4rem 0 .5rem;color:var(--text)}
.prose .legal-meta{font-family:var(--font-m);font-size:.72rem;color:var(--muted);margin-bottom:2rem}
.prose a{color:var(--coral)}
.prose strong{color:var(--text)}

/* ============ PREMIUM REVIEWS MARQUEE ============ */
.reviews-marquee {
  display: flex;
  overflow: hidden;
  width: 100%;
  margin-top: 2.5rem;
  padding: 1.5rem 0; /* Prevents card shadows and hover translations from being clipped */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}

.reviews-track {
  display: flex;
  gap: 1.5rem;
  align-items: stretch; /* Aligns all cards to the same height */
  width: max-content;
  animation: reviewsScroll var(--dur, 60s) linear infinite;
  will-change: transform;
}

.reviews-marquee:hover .reviews-track {
  animation-play-state: paused;
}

.reviews-track .t-card {
  flex: 0 0 clamp(290px, 80vw, 380px); /* Responsive width: 380px max, 290px min */
  margin: 0;
  min-height: 335px; /* Ensures vertical alignment and no clipping of long texts */
  background: #17142b;
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 16px;
  padding: 1.8rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 10px 30px -15px rgba(0, 0, 0, 0.3);
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.3s, box-shadow 0.35s;
  position: relative;
}

@keyframes reviewsScroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .reviews-track {
    animation: none;
    overflow-x: auto;
    width: auto;
    flex-wrap: nowrap;
    justify-content: flex-start;
  }
  .reviews-marquee {
    -webkit-mask-image: none;
    mask-image: none;
  }
}

.t-card:hover {
  transform: translateY(-6px);
  border-color: rgba(240, 90, 42, 0.4);
  box-shadow: 0 15px 40px -10px rgba(240, 90, 42, 0.12);
}

/* Card Header styles */
.t-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 1.2rem;
}
.t-user {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}
.t-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.95rem;
  color: #fff;
  text-transform: uppercase;
  flex-shrink: 0;
}
.t-meta h4 {
  font-family: var(--font-d);
  font-size: 0.92rem;
  font-weight: 600;
  color: #ffffff;
  margin: 0;
  line-height: 1.2;
}
.t-meta p {
  font-family: var(--font-m);
  font-size: 0.72rem;
  color: var(--muted);
  margin: 2px 0 0 0;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

/* Stars / Recommendation Status */
.t-stars-wrapper {
  margin-bottom: 0.8rem;
}
.t-stars {
  display: flex;
  gap: 2px;
  font-size: 0.86rem;
}
.t-fb-rec {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  color: #5b9eff;
}
.t-fb-thumb {
  background: #1877f2;
  color: #fff;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
}

/* Text Quote */
.t-quote {
  font-family: var(--font-b);
  font-size: 0.94rem;
  line-height: 1.55;
  color: #f0ede8;
  opacity: 0.9 !important; /* Full contrast */
  margin-bottom: 1.4rem;
  flex-grow: 1;
}
.t-card-title {
  font-family: var(--font-d);
  font-weight: 700;
  font-size: 1.02rem;
  color: #ffffff;
  margin: 0 0 0.4rem 0;
}

/* Platform badge */
.t-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-m);
  font-size: 0.66rem;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.04);
  padding: 4px 8px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.04);
  white-space: nowrap;
}

/* Attribution footer */
.t-by {
  font-family: var(--font-m);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: var(--muted);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding-top: 0.8rem;
  margin-top: auto;
}

/* ==========================================================================
   Bento Grid Graphics & Interactive Visual panels
   ========================================================================== */
.includes-bento .include.b-span-8 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.includes-bento .include.b-span-8 .include-body {
  flex: 1;
}
.includes-bento .include.b-span-8 .bento-graphic {
  width: 180px;
  height: 120px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: #090613;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
@media(max-width:900px){
  .includes-bento .include.b-span-8 .bento-graphic {
    display: none;
  }
}

/* Strategy/Positioning quadrant visual */
.quadrant-visual {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.quadrant-line-x {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: rgba(255,255,255,0.08);
}
.quadrant-line-y {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: rgba(255,255,255,0.08);
}
.quadrant-dot {
  position: absolute;
  top: 30%;
  left: 70%;
  width: 8px;
  height: 8px;
  background: var(--coral);
  border-radius: 50%;
  box-shadow: 0 0 10px var(--coral), 0 0 20px var(--coral);
  animation: pulse-dot 2s infinite ease-in-out;
}
.quadrant-label {
  position: absolute;
  font-family: var(--font-m);
  font-size: 8px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.ql-top { top: 6px; }
.ql-right { right: 6px; }
.ql-left { left: 6px; }
.ql-bottom { bottom: 6px; }

@keyframes pulse-dot {
  0%, 100% { transform: scale(1); opacity: 0.8; }
  50% { transform: scale(1.4); opacity: 1; box-shadow: 0 0 15px var(--coral), 0 0 30px var(--coral); }
}

/* Motion Branding circle draw visual */
.motion-visual {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.motion-ring {
  width: 60px;
  height: 60px;
  border: 2px dashed rgba(255,255,255,0.1);
  border-radius: 50%;
  position: absolute;
  animation: spin-ring 15s linear infinite;
}
.motion-ring-active {
  width: 60px;
  height: 60px;
  position: absolute;
}
.motion-ring-active svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.motion-ring-active circle {
  fill: none;
  stroke: var(--coral);
  stroke-width: 2;
  stroke-dasharray: 188.4;
  stroke-dashoffset: 188.4;
  animation: draw-ring 4s ease-in-out infinite alternate;
}
.motion-center {
  width: 10px;
  height: 10px;
  background: var(--text);
  transform: rotate(45deg);
  position: absolute;
  animation: pulse-center 2s infinite ease-in-out;
}

@keyframes spin-ring {
  100% { transform: rotate(360deg); }
}
@keyframes draw-ring {
  0% { stroke-dashoffset: 188.4; }
  30% { stroke-dashoffset: 120; }
  70% { stroke-dashoffset: 40; }
  100% { stroke-dashoffset: 0; }
}
@keyframes pulse-center {
  0%, 100% { transform: rotate(45deg) scale(1); }
  50% { transform: rotate(225deg) scale(1.2); }
}

/* Custom stack (React/Astro/Next) Code editor visual */
.code-visual {
  width: 100%;
  height: 100%;
  padding: 0.8rem;
  box-sizing: border-box;
  font-family: 'JetBrains Mono', monospace;
  font-size: 8px;
  color: #a9b2c3;
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
}
.code-header {
  display: flex;
  gap: 4px;
  margin-bottom: 2px;
}
.code-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #333;
}
.cd-red { background: #ff5f56; }
.cd-yellow { background: #ffbd2e; }
.cd-green { background: #27c93f; }
.code-line {
  white-space: nowrap;
  overflow: hidden;
}
.cl-kw { color: #f05a2a; }
.cl-tag { color: #80cbc4; }
.cl-attr { color: #addb67; }
.cl-str { color: #ecc48d; }

/* Shopify / cart ecom visual */
.ecom-visual {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ecom-card {
  width: 70px;
  height: 90px;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 6px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: absolute;
  transition: transform 0.4s var(--ease);
}
.ec-1 {
  transform: translateX(-25px) translateY(-5px) rotate(-6deg);
}
.ec-2 {
  transform: translateX(25px) translateY(5px) rotate(6deg);
  z-index: 1;
}
.ecom-card:hover {
  transform: scale(1.05) translateY(-5px);
  border-color: var(--coral);
}
.ec-img {
  width: 100%;
  height: 40px;
  background: linear-gradient(135deg, rgba(240,90,42,0.1), rgba(123,47,190,0.1));
  border-radius: 4px;
}
.ec-btn {
  height: 12px;
  background: var(--coral);
  border-radius: 3px;
  width: 100%;
}

/* AI Chatbot support UI visual */
.chat-visual {
  width: 100%;
  height: 100%;
  padding: 0.8rem;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.chat-bubble {
  padding: 6px 8px;
  border-radius: 8px;
  max-width: 80%;
  font-size: 8px;
  line-height: 1.3;
  text-align: left;
}
.cb-user {
  background: var(--line);
  color: var(--text);
  align-self: flex-start;
  border-bottom-left-radius: 2px;
}
.cb-ai {
  background: linear-gradient(135deg, rgba(240,90,42,0.1), rgba(240,90,42,0.2));
  border: 1px solid rgba(240,90,42,0.2);
  color: var(--text);
  align-self: flex-end;
  border-bottom-right-radius: 2px;
}

/* RAG / Vector node network graph visual */
.rag-visual {
  width: 100%;
  height: 100%;
  position: relative;
}
.rag-node {
  width: 6px;
  height: 6px;
  background: var(--muted);
  border-radius: 50%;
  position: absolute;
}
.rag-node.rn-center {
  width: 12px;
  height: 12px;
  background: var(--coral);
  box-shadow: 0 0 10px var(--coral);
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.rn-1 { left: 20%; top: 20%; }
.rn-2 { left: 80%; top: 25%; }
.rn-3 { left: 25%; top: 75%; }
.rn-4 { left: 75%; top: 75%; }
.rag-line {
  position: absolute;
  background: rgba(255,255,255,0.06);
  transform-origin: 0 0;
}

/* AI Video editor timeline visual */
.video-visual {
  width: 100%;
  height: 100%;
  padding: 8px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.video-track {
  height: 16px;
  background: var(--line);
  border-radius: 4px;
  position: relative;
  overflow: hidden;
  width: 100%;
}
.vt-clip {
  height: 100%;
  width: 60%;
  background: linear-gradient(90deg, var(--coral-soft), rgba(240,90,42,0.3));
  border-right: 1px solid var(--coral);
  position: absolute;
}
.vt-playhead {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--text);
  left: 45%;
  z-index: 2;
  box-shadow: 0 0 5px rgba(255,255,255,0.8);
}

/* Paid Ads mobile sponsor visual */
.ad-visual {
  width: 100%;
  height: 100%;
  padding: 8px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ad-header {
  display: flex;
  gap: 6px;
  align-items: center;
}
.ad-avatar {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--coral);
}
.ad-title {
  height: 4px;
  background: var(--line);
  width: 40px;
  border-radius: 2px;
}
.ad-image {
  height: 50px;
  background: linear-gradient(135deg, rgba(240,90,42,0.1), rgba(123,47,190,0.1));
  border-radius: 4px;
}
.ad-btn {
  height: 14px;
  background: var(--line);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 6px;
  text-transform: uppercase;
  color: var(--muted);
}
.ad-btn:hover {
  background: var(--coral);
  color: #fff;
  border-color: var(--coral);
}

/* Conversion Funnel representation visual */
.funnel-visual {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px;
}
.funnel-layer {
  height: 12px;
  background: var(--line);
  border-radius: 4px;
  display: grid;
  place-items: center;
  font-size: 7px;
  color: var(--muted);
}
.fl-1 { width: 120px; background: rgba(255,255,255,0.06); }
.fl-2 { width: 80px; background: rgba(255,255,255,0.1); }
.fl-3 { width: 50px; background: var(--coral-soft); color: var(--coral); border: 1px solid rgba(240,90,42,0.2); }

/* Growth Bar chart visual */
.chart-visual {
  width: 100%;
  height: 100%;
  padding: 12px;
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  position: relative;
}
.chart-bar {
  width: 14px;
  background: var(--line);
  border-radius: 3px 3px 0 0;
  transition: height 0.6s var(--ease);
}
.cb-active {
  background: var(--coral);
  box-shadow: 0 0 10px var(--coral-soft);
}
.chart-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 8px;
  color: #27c93f;
  background: rgba(39, 201, 63, 0.1);
  padding: 2px 4px;
  border-radius: 4px;
}

/* Growth strategy / clickpoint heatmap visual */
.heatmap-visual {
  width: 100%;
  height: 100%;
  position: relative;
  background: rgba(255,255,255,0.02);
}
.hm-point {
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--coral) 0%, transparent 70%);
  opacity: 0.6;
}
.hmp-1 { left: 30%; top: 40%; width: 24px; height: 24px; }
.hmp-2 { left: 65%; top: 30%; }
.hmp-3 { left: 45%; top: 70%; }

/* UI/UX Wireframe Mobile/Web hotspots visual */
.wireframe-visual {
  width: 100%;
  height: 100%;
  padding: 8px;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  align-items: center;
}
.wf-box {
  height: 36px;
  border: 1px dashed rgba(255,255,255,0.15);
  border-radius: 4px;
  position: relative;
}
.wf-hotspot {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--coral);
  box-shadow: 0 0 8px var(--coral);
}

/* Kanban / deal cards visual */
.kanban-visual {
  width: 100%;
  height: 100%;
  padding: 8px;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.kb-col {
  background: rgba(255,255,255,0.02);
  border-radius: 4px;
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.kb-card {
  height: 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 3px;
  display: flex;
  align-items: center;
  padding: 4px;
}
.kbc-bar {
  width: 100%;
  height: 3px;
  background: var(--line);
  border-radius: 1px;
}
.kb-card:hover {
  border-color: var(--coral);
}

/* Social feed layout grid visual */
.feed-visual {
  width: 100%;
  height: 100%;
  padding: 6px;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}
.feed-cell {
  aspect-ratio: 1;
  background: linear-gradient(135deg, rgba(255,255,255,0.03), rgba(255,255,255,0.06));
  border-radius: 4px;
  border: 1px solid var(--line);
  transition: border-color 0.3s;
}
.feed-cell:hover {
  border-color: var(--coral);
}

/* ==========================================================================
   Footer & Contact Page Upgrades
   ========================================================================== */

/* Contact page SVG icons alignment */
.contact-info .ci .lbl {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.ci-ic {
  width: 14px;
  height: 14px;
  stroke: var(--coral);
  stroke-width: 2.2;
  fill: none;
  flex-shrink: 0;
}

/* Footer Contact List styling */
.footer-contact-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
.footer-contact-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.45;
}
.footer-contact-list a {
  color: var(--muted);
  transition: color 0.3s var(--ease);
}
.footer-contact-list a:hover {
  color: var(--coral);
}
.fc-ic {
  width: 15px;
  height: 15px;
  stroke: var(--coral);
  stroke-width: 2;
  fill: none;
  flex-shrink: 0;
  margin-top: 0.2rem;
}

/* Testimonial Quote Card on Contact Page */
.contact-testimonial {
  margin-top: 2.5rem;
  padding: 2rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.02);
  backdrop-filter: blur(10px);
  position: relative;
  overflow: hidden;
}
.contact-testimonial::before {
  content: '"';
  position: absolute;
  top: -10px;
  left: 10px;
  font-family: var(--font-i);
  font-size: 8rem;
  color: var(--coral);
  opacity: 0.08;
  line-height: 1;
  pointer-events: none;
}
.testimonial-quote {
  font-family: var(--font-i);
  font-size: 1.25rem;
  line-height: 1.5;
  color: var(--text);
  margin-bottom: 1.5rem;
  position: relative;
  z-index: 1;
}
.testimonial-author {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}
.testimonial-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--coral), var(--amber));
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: var(--bg);
  font-size: 0.85rem;
  letter-spacing: 0.5px;
}
.testimonial-meta strong {
  display: block;
  font-size: 0.9rem;
  color: var(--text);
  font-weight: 500;
}
.testimonial-meta span {
  font-size: 0.78rem;
  color: var(--muted);
}

/* NDA Badge */
.nda-badge {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1.5rem;
  padding: 0.8rem 1rem;
  background: rgba(240, 90, 42, 0.03);
  border: 1px dashed rgba(240, 90, 42, 0.15);
  border-radius: calc(var(--radius) / 2);
  font-size: 0.8rem;
  color: var(--muted);
}
.nda-badge svg {
  color: var(--coral);
  flex-shrink: 0;
}

/* Form success message layout */
.form-success-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 3rem 2rem;
  border: 1px solid rgba(240, 90, 42, 0.2);
  border-radius: var(--radius);
  background: var(--surface);
  min-height: 380px;
}
.form-success-container svg {
  width: 52px;
  height: 52px;
  stroke: var(--coral);
  margin-bottom: 1.5rem;
}

/* Pricing/Service Packages Section */
.packages-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-top: 3rem;
}
.package-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.01);
  padding: 2.5rem;
  display: flex;
  flex-direction: column;
  transition: all 0.4s var(--ease);
  position: relative;
  overflow: hidden;
}
.package-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--coral), var(--amber));
  opacity: 0;
  transition: opacity 0.4s var(--ease);
}
.package-card:hover {
  border-color: rgba(240, 90, 42, 0.3);
  transform: translateY(-5px);
  background: rgba(255, 255, 255, 0.02);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}
.package-card:hover::before {
  opacity: 1;
}
.package-card.highlight {
  border-color: rgba(240, 90, 42, 0.4);
  background: rgba(240, 90, 42, 0.02);
}
.package-card.highlight::before {
  opacity: 1;
}
.package-badge {
  align-self: flex-start;
  font-family: var(--font-m);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--coral);
  border: 1px solid rgba(240, 90, 42, 0.3);
  padding: 0.3rem 0.8rem;
  border-radius: 100px;
  margin-bottom: 1.5rem;
  font-weight: 500;
}
.package-card.highlight .package-badge {
  background: var(--coral);
  color: var(--bg);
}
.package-card h3 {
  font-size: 1.6rem;
  margin-bottom: 1rem;
  color: var(--text);
  font-family: var(--font-s);
}
.package-desc {
  font-size: 0.88rem;
  color: var(--muted);
  line-height: 1.5;
  margin-bottom: 2rem;
}
.package-features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 2.5rem;
  flex-grow: 1;
}
.package-features li {
  font-size: 0.88rem;
  color: var(--text);
  opacity: 0.85;
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  line-height: 1.4;
}
.pf-ic {
  width: 14px;
  height: 14px;
  stroke: var(--coral);
  stroke-width: 2.5;
  fill: none;
  flex-shrink: 0;
  margin-top: 0.15rem;
}

/* ==========================================================================
   Mobile & Tablet Swipe-Scroll Carousels (Under 1024px)
   ========================================================================== */
@media (max-width: 1024px) {
  /* Turn long grids into premium horizontal swipe carousels */
  .includes-bento,
  .mini-steps-timeline,
  .packages-grid,
  .proof-grid {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    gap: 1.25rem !important;
    padding-left: clamp(1.4rem, 5vw, 4rem) !important;
    padding-right: clamp(1.4rem, 5vw, 4rem) !important;
    padding-bottom: 1.5rem !important;
    margin-left: calc(-1 * clamp(1.4rem, 5vw, 4rem)) !important;
    margin-right: calc(-1 * clamp(1.4rem, 5vw, 4rem)) !important;
    scroll-padding-left: clamp(1.4rem, 5vw, 4rem) !important;
    scrollbar-width: none !important; /* Hide scrollbar Firefox */
  }

  /* Hide scrollbars for Chrome/Safari */
  .includes-bento::-webkit-scrollbar,
  .mini-steps-timeline::-webkit-scrollbar,
  .packages-grid::-webkit-scrollbar,
  .proof-grid::-webkit-scrollbar {
    display: none !important;
  }

  /* Force items to act as cards peaking in from the right */
  .includes-bento .include,
  .includes-bento .include.b-span-8,
  .mini-steps-timeline .mini-step,
  .packages-grid .package-card,
  .proof-grid .case-card {
    flex: 0 0 78% !important;
    max-width: 78% !important;
    scroll-snap-align: start !important;
    margin-bottom: 0 !important;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1) !important;
  }
  .packages-grid .package-card {
    padding: 1.75rem !important;
  }
  .packages-grid .package-card h3 {
    font-size: 1.35rem !important;
  }

  /* On tablets, size cards so that two fit (with the third peaking in) */
  @media (min-width: 601px) {
    .includes-bento .include,
    .includes-bento .include.b-span-8,
    .mini-steps-timeline .mini-step,
    .packages-grid .package-card,
    .proof-grid .case-card {
      flex: 0 0 46% !important;
      max-width: 46% !important;
    }
  }

  /* Hide connection timeline line on mobile/tablet */
  .mini-steps-timeline::before {
    display: none !important;
  }

  /* Hide bento graphic visuals inside includes-bento to keep card layouts light */
  .includes-bento .include.b-span-8 .bento-graphic {
    display: none !important;
  }

  /* Force vertical layout for the b-span-8 item inside horizontal bento scroll */
  .includes-bento .include.b-span-8 {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
}

/* ==========================================================================
   About Page Team Highlights & Layout Fixes (Under 760px)
   ========================================================================== */
@media (max-width: 760px) {
  /* Stack lead cards and restore portrait photo aspect ratio to prevent collapsing */
  .team-lead {
    grid-template-columns: 1fr !important;
  }
  .team-lead .team-photo {
    aspect-ratio: 4/5 !important;
    height: auto !important;
    min-height: 0 !important;
  }
  
  /* Visual styling highlighting the Founders above the rest */
  .team-card.team-lead {
    border-color: rgba(240, 90, 42, 0.3) !important;
    background: rgba(240, 90, 42, 0.02) !important;
    box-shadow: 0 12px 30px rgba(240, 90, 42, 0.05) !important;
  }
  
  /* Give the leads' info section a premium spacing padding */
  .team-lead .team-info {
    padding: 1.8rem 1.5rem !important;
  }
  
  /* Turn the values grid and regular team grid on about page into horizontal swipe carousels */
  .values-grid,
  .team-grid {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    gap: 1.25rem !important;
    padding-left: clamp(1.4rem, 5vw, 4rem) !important;
    padding-right: clamp(1.4rem, 5vw, 4rem) !important;
    padding-bottom: 1.5rem !important;
    margin-left: calc(-1 * clamp(1.4rem, 5vw, 4rem)) !important;
    margin-right: calc(-1 * clamp(1.4rem, 5vw, 4rem)) !important;
    scroll-padding-left: clamp(1.4rem, 5vw, 4rem) !important;
    scrollbar-width: none !important;
  }
  .values-grid::-webkit-scrollbar,
  .team-grid::-webkit-scrollbar {
    display: none !important;
  }
  .values-grid .value,
  .team-grid .team-card:not(.team-lead) {
    flex: 0 0 78% !important;
    max-width: 78% !important;
    scroll-snap-align: start !important;
    margin-bottom: 0 !important;
  }
  
  @media (min-width: 601px) {
    .values-grid .value,
    .team-grid .team-card:not(.team-lead) {
      flex: 0 0 46% !important;
      max-width: 46% !important;
    }
  }
}