/* ==========================================================================
   NIVOLVE — Website Transformation Company
   Design tokens, base, components
   ========================================================================== */

/* ---------- Self-hosted fonts (no third-party request) ---------- */
@font-face{
  font-family:"Bricolage Grotesque";
  src:url("../fonts/bricolage-grotesque-var.woff2") format("woff2-variations");
  font-weight:200 800; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Manrope";
  src:url("../fonts/manrope-var.woff2") format("woff2-variations");
  font-weight:200 800; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"JetBrains Mono";
  src:url("../fonts/jetbrains-mono-500.woff2") format("woff2");
  font-weight:500; font-style:normal; font-display:swap;
}

/* ---------- Tokens ---------- */
:root{
  /* Brand — contrast-corrected */
  --cream:      #FDFBFA;   /* page background */
  --cream-2:    #F4F1EF;   /* alternating band */
  --navy:       #0D2C62;   /* text + primary surface   (13.5:1 on cream) */
  --navy-deep:  #071B3D;   /* footer / deepest surface */
  --cyan:       #00A3E0;   /* fills only — never small text on light */
  --cyan-ink:   #0077A8;   /* accessible link/accent text (4.6:1 on cream) */
  --aqua:       #86D5DD;   /* decorative; 8:1 as text on navy */
  --muted:      #5A6B8C;   /* secondary text (5.2:1 on cream) */
  --line:       rgba(13,44,98,.12);
  --line-2:     rgba(13,44,98,.07);
  --line-dark:  rgba(134,213,221,.20);

  /* Type */
  --f-display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --f-body:    "Manrope", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --f-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;

  /* Fluid scale */
  --t-mega:  clamp(2.6rem, 1.2rem + 6.2vw, 6.4rem);
  --t-h1:    clamp(2.15rem, 1.15rem + 4.4vw, 4.6rem);
  --t-h2:    clamp(1.75rem, 1.05rem + 3vw, 3.3rem);
  --t-h3:    clamp(1.3rem, .98rem + 1.4vw, 1.9rem);
  --t-lead:  clamp(1.05rem, .96rem + .45vw, 1.32rem);
  --t-body:  clamp(1rem, .96rem + .2vw, 1.1rem);
  --t-small: .875rem;
  --t-label: .72rem;

  /* Space */
  --s-1:.5rem; --s-2:1rem; --s-3:1.5rem; --s-4:2rem;
  --s-5:3rem; --s-6:4.5rem; --s-7:7rem; --s-8:10rem;
  --pad: clamp(1.15rem, .5rem + 2.6vw, 3rem);
  --maxw: 1240px;
  --maxw-text: 62ch;

  --r-sm:10px; --r-md:16px; --r-lg:26px; --r-pill:999px;
  --ease: cubic-bezier(.22,1,.36,1);
  --ease-io: cubic-bezier(.65,0,.35,1);
  --shadow-sm: 0 1px 2px rgba(13,44,98,.05), 0 4px 14px -6px rgba(13,44,98,.10);
  --shadow-md: 0 2px 6px rgba(13,44,98,.06), 0 18px 44px -18px rgba(13,44,98,.20);
  --shadow-lg: 0 8px 20px rgba(13,44,98,.07), 0 40px 90px -30px rgba(13,44,98,.28);
  --nav-h: 68px;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  font-family:var(--f-body);
  font-size:var(--t-body);
  line-height:1.65;
  color:var(--navy);
  background:var(--cream);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video,canvas{display:block;max-width:100%}
img{height:auto}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none;padding:0}
:focus-visible{
  outline:3px solid var(--cyan-ink);
  outline-offset:3px;
  border-radius:4px;
}
::selection{background:var(--cyan);color:#fff}

/* ---------- Layout ---------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.wrap-narrow{max-width:900px}
.section{padding-block:clamp(4rem, 2rem + 9vw, 9rem);position:relative}
.section--tight{padding-block:clamp(3rem, 1.6rem + 6vw, 6rem)}
.section--band{background:var(--cream-2)}
.section--dark{background:var(--navy);color:var(--cream)}
.section--dark .lead,.section--dark p{color:rgba(253,251,250,.78)}
.section--dark .eyebrow{color:var(--aqua)}

/* ---------- Type ---------- */
h1,h2,h3,h4{
  font-family:var(--f-display);
  font-weight:700;
  line-height:1.02;
  letter-spacing:-.028em;
  text-wrap:balance;
}
h1{font-size:var(--t-h1)}
h2{font-size:var(--t-h2)}
h3{font-size:var(--t-h3);line-height:1.12;letter-spacing:-.02em}
.mega{font-size:var(--t-mega);line-height:.96;letter-spacing:-.038em}
.lead{font-size:var(--t-lead);color:var(--muted);max-width:var(--maxw-text);line-height:1.6}
p{max-width:var(--maxw-text)}
strong,b{font-weight:700;color:var(--navy)}
.section--dark strong{color:var(--cream)}

.eyebrow{
  font-family:var(--f-mono);
  font-size:var(--t-label);
  font-weight:500;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--cyan-ink);
  display:flex;align-items:center;gap:.7rem;
  margin-bottom:var(--s-3);
}
.eyebrow::before{
  content:"";width:26px;height:1px;background:currentColor;opacity:.5;flex:none;
}

/* Cadence list — the short declarative lines that carry this copy */
.cadence{margin-top:var(--s-4);display:flex;flex-direction:column;gap:.55rem}
.cadence li{
  font-size:clamp(1.05rem,.95rem + .6vw,1.45rem);
  line-height:1.4;
  color:var(--muted);
  font-weight:500;
  max-width:34ch;
}
.cadence li.is-key{color:var(--navy);font-weight:700}
.section--dark .cadence li{color:rgba(253,251,250,.72)}
.section--dark .cadence li.is-key{color:var(--cream)}

.pull{
  font-family:var(--f-display);
  font-size:clamp(1.5rem,1rem + 2.4vw,2.6rem);
  line-height:1.18;
  letter-spacing:-.025em;
  font-weight:600;
  max-width:22ch;
}

/* ---------- Buttons ---------- */
.btn{
  --btn-bg:var(--navy); --btn-fg:var(--cream);
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  min-height:52px;
  padding:.9rem 1.7rem;
  border:0;border-radius:var(--r-pill);
  background:var(--btn-bg);color:var(--btn-fg);
  font-family:var(--f-body);font-weight:700;font-size:var(--t-small);
  letter-spacing:.005em;
  cursor:pointer;
  overflow:hidden;
  isolation:isolate;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
  will-change:transform;
}
.btn span{position:relative;z-index:2}
.btn::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(100deg,var(--cyan),var(--aqua));
  transform:translateY(101%);
  transition:transform .5s var(--ease);
}
.btn:hover{transform:translateY(-3px);box-shadow:0 14px 34px -10px rgba(0,163,224,.55)}
.btn:hover::before{transform:translateY(0)}
.btn:hover span{color:var(--navy)}
.btn:active{transform:translateY(-1px)}

.btn--ghost{--btn-bg:transparent;--btn-fg:var(--navy);box-shadow:inset 0 0 0 1.5px var(--line)}
.btn--ghost:hover{box-shadow:inset 0 0 0 1.5px transparent,0 14px 34px -12px rgba(0,163,224,.4)}
.btn--light{--btn-bg:var(--cream);--btn-fg:var(--navy)}
.btn--lg{min-height:60px;padding:1.05rem 2.2rem;font-size:1rem}

/* Price chip inside CTA */
.btn .chip{
  position:relative;z-index:2;
  font-family:var(--f-mono);font-size:.78em;font-weight:500;
  padding:.2rem .55rem;border-radius:var(--r-pill);
  background:rgba(253,251,250,.16);
}
.btn--light .chip,.btn--ghost .chip{background:rgba(13,44,98,.09)}
.btn:hover .chip{background:rgba(13,44,98,.14);color:var(--navy)}

.cta-row{display:flex;flex-wrap:wrap;gap:var(--s-2);align-items:center;margin-top:var(--s-4)}
.cta-note{font-size:var(--t-small);color:var(--muted)}
.section--dark .cta-note{color:rgba(253,251,250,.6)}

/* Text link */
.tlink{
  color:var(--cyan-ink);font-weight:700;font-size:var(--t-small);
  display:inline-flex;align-items:center;gap:.45rem;
  padding-bottom:2px;
  background-image:linear-gradient(currentColor,currentColor);
  background-size:0% 1.5px;background-repeat:no-repeat;background-position:0 100%;
  transition:background-size .45s var(--ease);
}
.tlink:hover{background-size:100% 1.5px}
.tlink svg{transition:transform .35s var(--ease)}
.tlink:hover svg{transform:translateX(4px)}
.section--dark .tlink{color:var(--aqua)}

/* ==========================================================================
   Floating pill navigation
   ========================================================================== */
.nav{
  position:fixed;z-index:100;
  top:clamp(.7rem,1.6vw,1.35rem);
  left:50%;transform:translateX(-50%);
  width:min(calc(100% - 1.6rem),1160px);
  transition:width .5s var(--ease), top .5s var(--ease);
}
.nav__inner{
  display:flex;align-items:center;gap:var(--s-3);
  height:var(--nav-h);
  padding:0 .55rem 0 1.35rem;
  border-radius:var(--r-pill);
  background:rgba(253,251,250,.72);
  backdrop-filter:blur(18px) saturate(180%);
  -webkit-backdrop-filter:blur(18px) saturate(180%);
  box-shadow:inset 0 0 0 1px rgba(13,44,98,.09), 0 2px 8px rgba(13,44,98,.04);
  transition:box-shadow .5s var(--ease), background .5s var(--ease);
}
.nav.is-stuck{width:min(calc(100% - 1.6rem),980px)}
.nav.is-stuck .nav__inner{
  background:rgba(253,251,250,.86);
  box-shadow:inset 0 0 0 1px rgba(13,44,98,.10), 0 10px 34px -14px rgba(13,44,98,.35);
}
.nav__logo{flex:none;display:flex;align-items:center}
.nav__logo img{width:104px}
.nav__links{
  display:none!important;
}
.nav__link{
  position:relative;z-index:2;
  padding:.6rem .95rem;border-radius:var(--r-pill);
  font-size:.85rem;font-weight:600;color:var(--muted);
  white-space:nowrap;
  transition:color .3s var(--ease);
}
.nav__link:hover,.nav__link[aria-current="page"]{color:var(--navy)}
/* sliding highlight */
.nav__pill{
  position:absolute;z-index:1;top:0;left:0;height:100%;
  border-radius:var(--r-pill);
  background:rgba(13,44,98,.07);
  opacity:0;pointer-events:none;
  transition:opacity .3s var(--ease);
}
.nav__cta{flex:none;margin-left:auto}
.nav__cta .btn{min-height:46px;padding:.65rem 1.25rem;font-size:.82rem}
.nav__burger{
  display:flex;flex:none;margin-left:.75rem;
  width:46px;height:46px;border-radius:50%;border:0;
  background:var(--navy);color:var(--cream);
  align-items:center;justify-content:center;cursor:pointer;
  transition:transform .35s var(--ease);
}
.nav__burger:hover{transform:scale(1.06)}
.nav__burger span{display:block;width:17px;height:1.5px;background:currentColor;border-radius:2px;transition:transform .4s var(--ease),opacity .25s}
.nav__burger span+span{margin-top:5px}
.nav__burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)!important}
.nav__burger[aria-expanded="true"] span:nth-child(2){opacity:0!important}
.nav__burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)!important}

/* Mobile sheet */
.sheet{
  position:fixed;inset:0;z-index:99;
  background:var(--navy);color:var(--cream);
  padding:calc(var(--nav-h) + 3.2rem) var(--pad) var(--pad);
  display:flex;flex-direction:column;
  clip-path:circle(0% at calc(100% - 3.2rem) 2.9rem);
  transition:clip-path .7s var(--ease);
  pointer-events:none;
  overflow-y:auto;
}
.sheet.is-open{clip-path:circle(150% at calc(100% - 3.2rem) 2.9rem);pointer-events:auto}
.sheet__links{display:flex;flex-direction:column;gap:.2rem;margin-bottom:auto}
.sheet__link{
  font-family:var(--f-display);font-size:clamp(1.9rem,1.2rem + 3.4vw,2.7rem);
  font-weight:600;letter-spacing:-.03em;line-height:1.25;
  padding:.28rem 0;
  opacity:0;transform:translateY(24px);
  display:flex;align-items:baseline;gap:.85rem;
}
.sheet.is-open .sheet__link{opacity:1;transform:none;transition:opacity .5s var(--ease) var(--d,0s),transform .6s var(--ease) var(--d,0s)}
.sheet__link i{font-family:var(--f-mono);font-size:.72rem;font-style:normal;color:var(--aqua);opacity:.65}
.sheet__foot{padding-top:var(--s-4);border-top:1px solid var(--line-dark);margin-top:var(--s-4)}
.sheet__foot .btn{width:100%}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
  position:relative;
  min-height:min(100svh,900px);
  display:flex;align-items:center;
  padding-block:calc(var(--nav-h) + 5rem) var(--s-7);
  overflow:hidden;
}
.hero__canvas{
  position:absolute;inset:0;z-index:0;
  pointer-events:none;
}
.hero__canvas canvas{width:100%!important;height:100%!important}
/* soft vignette so type stays readable over the terrain */
.hero__veil{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(72% 52% at 4% 26%, rgba(253,251,250,.95) 0%, rgba(253,251,250,.58) 42%, rgba(253,251,250,0) 72%),
    linear-gradient(to bottom, rgba(253,251,250,.45) 0%, rgba(253,251,250,0) 24% 72%, var(--cream) 100%);
}
.hero__inner{position:relative;z-index:2;width:100%}
.hero__grid{display:grid;gap:var(--s-5);align-items:center}
.hero h1{max-width:16ch}
.hero__sub{
  font-family:var(--f-display);
  font-size:clamp(1.15rem,.95rem + 1.15vw,1.85rem);
  font-weight:600;letter-spacing:-.02em;line-height:1.22;
  color:var(--cyan-ink);
  max-width:24ch;margin-top:var(--s-3);
}
.hero__scroll{
  position:absolute;left:var(--pad);bottom:1.6rem;z-index:2;
  display:flex;align-items:center;gap:.6rem;
  font-family:var(--f-mono);font-size:var(--t-label);letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);
}
.hero__scroll i{
  width:1px;height:34px;background:var(--line);position:relative;overflow:hidden;display:block;
}
.hero__scroll i::after{
  content:"";position:absolute;inset:0;background:var(--cyan);
  animation:trickle 2.1s var(--ease-io) infinite;
}
@keyframes trickle{0%{transform:translateY(-100%)}55%,100%{transform:translateY(100%)}}

/* ==========================================================================
   Reveal primitives (GSAP toggles .is-in; CSS is the fallback)
   ========================================================================== */
.r-up,.r-fade,.r-line>*{will-change:transform,opacity}
.r-up{opacity:0;transform:translateY(30px);transition:opacity .8s var(--ease),transform .9s var(--ease)}
.r-fade{opacity:0;transition:opacity 1s var(--ease)}
.r-up.is-in,.r-fade.is-in{opacity:1;transform:none}
.no-js .r-up,.no-js .r-fade{opacity:1;transform:none}

/* Word-level hero reveal (JS splits into .w > span) */
.split .w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.06em;margin-bottom:-.06em}
.split .w>span{display:inline-block;transform:translateY(105%);filter:blur(7px);opacity:0}

/* ==========================================================================
   Cards / grids
   ========================================================================== */
.grid{display:grid;gap:var(--s-3)}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(265px,1fr))}
.grid--4{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}

.card{
  position:relative;isolation:isolate;overflow:hidden;
  padding:var(--s-4);
  border-radius:var(--r-md);
  background:var(--cream);
  box-shadow:inset 0 0 0 1px var(--line);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);
}
/* cursor spotlight */
.card::before{
  content:"";position:absolute;inset:0;z-index:-1;opacity:0;
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),rgba(0,163,224,.13),transparent 62%);
  transition:opacity .45s var(--ease);
}
.card:hover{transform:translateY(-5px);box-shadow:inset 0 0 0 1px rgba(0,163,224,.35),var(--shadow-md)}
.card:hover::before{opacity:1}
.card h3{margin-bottom:.55rem;overflow-wrap:break-word;word-wrap:break-word;}
.card p{color:var(--muted);font-size:var(--t-small);line-height:1.6}

.card--dark{background:rgba(255,255,255,.035);box-shadow:inset 0 0 0 1px var(--line-dark)}
.card--dark p{color:rgba(253,251,250,.68)}
.card--dark:hover{box-shadow:inset 0 0 0 1px rgba(134,213,221,.45),0 30px 70px -30px rgba(0,0,0,.6)}

/* Deliverables list — checkmark bento */
.deliver{display:grid;gap:.6rem;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));margin-top:var(--s-4)}
.deliver li{
  display:flex;align-items:center;gap:.75rem;
  padding:1rem 1.15rem;border-radius:var(--r-sm);
  background:var(--cream);
  box-shadow:inset 0 0 0 1px var(--line);
  font-weight:600;font-size:.95rem;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease);
}
.deliver li:hover{transform:translateY(-4px);box-shadow:inset 0 0 0 1px rgba(0,163,224,.4),var(--shadow-sm)}
.deliver .tick{
  flex:none;width:22px;height:22px;border-radius:50%;
  background:var(--navy);color:var(--cream);
  display:grid;place-items:center;
  transition:background .4s var(--ease)
}
.deliver li:hover .tick{background:var(--cyan);color:var(--navy)}
.deliver .tick svg{width:11px;height:11px}

/* Cost / stat blocks */
.stat{padding:var(--s-4) 0;border-top:1px solid var(--line-dark)}
.stat__n{
  font-family:var(--f-display);font-weight:700;
  font-size:clamp(2.6rem,1.6rem + 4vw,4.6rem);
  line-height:1;letter-spacing:-.04em;color:var(--aqua);
  font-variant-numeric:tabular-nums;
}
.stat__l{margin-top:.55rem;font-size:var(--t-small);color:rgba(253,251,250,.7);max-width:26ch}

/* ==========================================================================
   Process steps (horizontal pinned on desktop)
   ========================================================================== */
.steps{display:grid;gap:var(--s-3)}
.step{
  position:relative;padding:var(--s-4);border-radius:var(--r-md);
  background:var(--cream);box-shadow:inset 0 0 0 1px var(--line);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);
}
.step:hover{transform:translateY(-5px);box-shadow:inset 0 0 0 1px rgba(0,163,224,.35),var(--shadow-md)}
.step__n{
  font-family:var(--f-mono);font-size:var(--t-label);letter-spacing:.16em;
  color:var(--cyan-ink);margin-bottom:var(--s-3);display:block;
}
.step h3{margin-bottom:.6rem}
.step p{color:var(--muted);font-size:var(--t-small)}
.step p+p{margin-top:.6rem}
@media (min-width:900px){
  .steps--h{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* Progress rail */
.rail{display:none}
.rail__fill{height:100%;width:0;background:linear-gradient(90deg,var(--cyan),var(--aqua));border-radius:2px}
@media (min-width:900px){
  .rail{display:block;height:2px;background:var(--line);border-radius:2px;overflow:hidden;margin-top:var(--s-5)}
}

/* ==========================================================================
   Before / After comparison — CSS-drawn mockups
   ========================================================================== */
.compare{
  position:relative;border-radius:var(--r-lg);overflow:hidden;
  box-shadow:var(--shadow-lg);
  background:var(--cream);
  user-select:none;-webkit-user-select:none;
  touch-action:pan-y;
  cursor:ew-resize;
  aspect-ratio:16/10;
}
@media (max-width:640px){
  .compare{aspect-ratio:16/10!important}
  .compare__pane img{object-fit:cover!important}
}
.compare__pane{position:absolute;inset:0}
.compare__pane--after{clip-path:inset(0 0 0 var(--split,50%))}
.compare__pane--before{clip-path:inset(0 calc(100% - var(--split,50%)) 0 0)}
.compare__handle{
  position:absolute;top:0;bottom:0;left:var(--split,50%);
  width:2px;background:var(--cyan);z-index:5;
  transform:translateX(-1px);
}
.compare__knob{
  position:absolute;top:50%;left:50%;
  width:52px;height:52px;border-radius:50%;
  transform:translate(-50%,-50%);
  background:var(--cyan);color:var(--navy);
  display:grid;place-items:center;
  box-shadow:0 6px 22px -4px rgba(13,44,98,.5);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
.compare:hover .compare__knob{transform:translate(-50%,-50%) scale(1.09)}
.compare__knob svg{width:22px;height:22px;pointer-events:none}
.compare__tag{
  position:absolute;top:1rem;z-index:6;
  font-family:var(--f-mono);font-size:var(--t-label);letter-spacing:.16em;text-transform:uppercase;
  padding:.4rem .8rem;border-radius:var(--r-pill);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.compare__tag--b{left:1rem;background:rgba(13,44,98,.82);color:var(--cream)}
.compare__tag--a{right:1rem;background:rgba(0,163,224,.92);color:var(--navy)}

/* --- Fake site: OLD --- */
.mock{position:absolute;inset:0;overflow:hidden;font-size:clamp(6px,.85vw,11px)}
.mock--old{background:#e8e8e0;font-family:Georgia,"Times New Roman",serif;color:#222}
.mock--old .m-bar{background:linear-gradient(#3a5f8a,#1e3c5c);color:#fff;padding:.9em 1.2em;display:flex;align-items:center;justify-content:space-between;border-bottom:3px solid #b58b2a}
.mock--old .m-logo{font-weight:700;font-size:1.9em;text-shadow:1px 1px 0 rgba(0,0,0,.45);letter-spacing:.02em}
.mock--old .m-nav{display:flex;gap:1.1em;font-size:1em}
.mock--old .m-nav span{text-decoration:underline}
.mock--old .m-hero{background:linear-gradient(#cfd8e3,#aab8c8);padding:1.6em 1.2em;text-align:center;border-bottom:1px solid #8b98a8}
.mock--old .m-hero h4{font-family:Georgia,serif;font-size:2.3em;color:#1e3c5c;text-shadow:1px 1px 0 #fff;letter-spacing:0;line-height:1.2;font-weight:700}
.mock--old .m-hero p{font-size:1.05em;color:#4a5568;margin:.5em auto 0;max-width:none}
.mock--old .m-body{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.9em;padding:1.2em}
.mock--old .m-box{background:#fff;border:1px solid #b5b5aa;padding:.85em;box-shadow:2px 2px 0 rgba(0,0,0,.09)}
.mock--old .m-box b{display:block;color:#8a1f11;font-size:1.15em;margin-bottom:.45em;border-bottom:1px dotted #c0c0b0;padding-bottom:.25em}
.mock--old .m-ln{height:.5em;background:#dcdcd2;border-radius:1px;margin-bottom:.4em}
.mock--old .m-ln:nth-child(3){width:78%}
.mock--old .m-ln:nth-child(4){width:60%}
.mock--old .m-btn{display:inline-block;margin-top:.7em;background:linear-gradient(#f0c14b,#d4941e);border:1px solid #a8750f;padding:.4em .9em;font-size:.95em;color:#3a2c05;font-weight:700;border-radius:3px}
.mock--old .m-foot{background:#1e3c5c;color:#9fb3c8;padding:.75em 1.2em;font-size:.9em;display:flex;justify-content:space-between;position:absolute;left:0;right:0;bottom:0}
.mock--old .m-blink{color:#ffdf70}

/* --- Fake site: NEW --- */
.mock--new{background:var(--cream);font-family:var(--f-body);color:var(--navy);padding:1.6em 1.5em;display:flex;flex-direction:column;gap:1.4em}
.mock--new .m-bar{display:flex;align-items:center;justify-content:space-between;
  padding:.7em 1.1em;border-radius:99px;box-shadow:inset 0 0 0 1px var(--line)}
.mock--new .m-logo{font-family:var(--f-display);font-weight:700;font-size:1.5em;letter-spacing:-.03em}
.mock--new .m-nav{display:flex;gap:1.1em;font-size:.95em;color:var(--muted);font-weight:600}
.mock--new .m-pill{background:var(--navy);color:var(--cream);padding:.4em 1em;border-radius:99px;font-size:.9em;font-weight:700}
.mock--new .m-hero h4{font-family:var(--f-display);font-size:3.3em;line-height:1.02;letter-spacing:-.04em;font-weight:700;max-width:11ch}
.mock--new .m-hero p{color:var(--muted);font-size:1.15em;margin-top:.6em;max-width:26ch;line-height:1.5}
.mock--new .m-cta{display:inline-flex;align-items:center;gap:.5em;margin-top:1em;background:var(--cyan);color:var(--navy);
  padding:.6em 1.3em;border-radius:99px;font-weight:700;font-size:1em}
.mock--new .m-body{display:grid;grid-template-columns:repeat(3,1fr);gap:.8em;margin-top:auto}
.mock--new .m-box{border-radius:12px;padding:1em;box-shadow:inset 0 0 0 1px var(--line)}
.mock--new .m-box b{display:block;font-family:var(--f-display);font-size:1.15em;margin-bottom:.5em;letter-spacing:-.02em}
.mock--new .m-ln{height:.5em;background:rgba(13,44,98,.09);border-radius:99px;margin-bottom:.42em}
.mock--new .m-ln:nth-child(3){width:74%}
.mock--new .m-ln:nth-child(4){width:52%}
.mock--new .m-dot{width:.7em;height:.7em;border-radius:50%;background:var(--cyan)}

/* Comparison legend */
.legend{display:grid;gap:var(--s-3);grid-template-columns:repeat(auto-fit,minmax(230px,1fr));margin-top:var(--s-4)}
.legend div{padding-top:var(--s-2);border-top:2px solid var(--line)}
.legend h4{font-size:1.05rem;margin-bottom:.35rem}
.legend p{font-size:var(--t-small);color:var(--muted)}

/* ==========================================================================
   Portfolio / Insights cards
   ========================================================================== */
.tile{
  position:relative;display:block;border-radius:var(--r-md);overflow:hidden;
  background:var(--cream);box-shadow:inset 0 0 0 1px var(--line);
  transition:transform .55s var(--ease),box-shadow .55s var(--ease);
}
.tile:hover{transform:translateY(-6px);box-shadow:inset 0 0 0 1px rgba(0,163,224,.4),var(--shadow-md)}
.tile__art{
  aspect-ratio:3/2;position:relative;overflow:hidden;
  background:linear-gradient(135deg,var(--navy),#123a7e 55%,var(--cyan-ink));
}
.tile__art img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .8s var(--ease);
}
.tile:hover .tile__art img{
  transform:scale(1.08);
}
.tile__art::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(90% 70% at 78% 18%,rgba(134,213,221,.5),transparent 60%);
  transition:transform .8s var(--ease);
}
.tile:hover .tile__art::after{transform:scale(1.18)}
.tile__art i{
  position:absolute;inset:0;opacity:.5;
  background-image:linear-gradient(rgba(253,251,250,.18) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(253,251,250,.18) 1px,transparent 1px);
  background-size:34px 34px;
  transition:transform 1s var(--ease);
}
.tile:hover .tile__art i{transform:translate(-9px,-9px)}
.tile__art b{
  position:absolute;left:1.2rem;bottom:1.1rem;z-index:2;
  font-family:var(--f-display);font-size:1.5rem;font-weight:700;
  letter-spacing:-.03em;color:var(--cream);
}
.tile__meta{padding:1.15rem 1.25rem 1.35rem}
.tile__meta .k{font-family:var(--f-mono);font-size:var(--t-label);letter-spacing:.16em;text-transform:uppercase;color:var(--cyan-ink)}
.tile__meta h3{font-size:1.15rem;margin:.45rem 0 .4rem}
.tile__meta p{font-size:var(--t-small);color:var(--muted)}

/* ==========================================================================
   FAQ accordion
   ========================================================================== */
.faq{border-top:1px solid var(--line);margin-top:var(--s-4)}
.faq__item{border-bottom:1px solid var(--line)}
.faq__q{
  width:100%;background:none;border:0;cursor:pointer;text-align:left;
  display:flex;align-items:center;gap:var(--s-3);
  padding:1.5rem .25rem;
  font-family:var(--f-display);font-weight:600;
  font-size:clamp(1.05rem,.95rem + .5vw,1.35rem);letter-spacing:-.02em;
  color:var(--navy);
  transition:color .3s var(--ease);
}
.faq__q:hover{color:var(--cyan-ink)}
.faq__ico{
  margin-left:auto;flex:none;width:32px;height:32px;border-radius:50%;
  box-shadow:inset 0 0 0 1.5px var(--line);
  display:grid;place-items:center;
  transition:transform .5s var(--ease),background .4s var(--ease),box-shadow .4s var(--ease);
}
.faq__q[aria-expanded="true"] .faq__ico{transform:rotate(135deg);background:var(--cyan);box-shadow:inset 0 0 0 1.5px transparent}
.faq__ico svg{width:13px;height:13px}
.faq__a{overflow:hidden;height:0}
.faq__a>div{padding:0 3.5rem 1.6rem .25rem}
.faq__a p{color:var(--muted)}
.faq__a p+p{margin-top:.75rem}

/* ==========================================================================
   Big CTA band
   ========================================================================== */
.cta-band{
  position:relative;overflow:hidden;
  background:var(--navy);color:var(--cream);
  border-radius:var(--r-lg);
  padding:clamp(2.5rem,1.5rem + 5vw,5.5rem) var(--pad);
  text-align:center;
  isolation:isolate;
}
.cta-band__glow{
  position:absolute;z-index:-1;width:min(760px,120%);aspect-ratio:1;
  left:50%;top:105%;transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(0,163,224,.55),rgba(134,213,221,.16) 42%,transparent 68%);
  filter:blur(28px);
}
.cta-band__grid{
  position:absolute;inset:0;z-index:-1;opacity:.35;
  background-image:linear-gradient(rgba(134,213,221,.14) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(134,213,221,.14) 1px,transparent 1px);
  background-size:52px 52px;
  mask-image:radial-gradient(78% 78% at 50% 44%,#000 25%,transparent 78%);
  -webkit-mask-image:radial-gradient(78% 78% at 50% 44%,#000 25%,transparent 78%);
}
.cta-band h2{max-width:18ch;margin-inline:auto}
.cta-band p{max-width:46ch;margin:var(--s-3) auto 0;color:rgba(253,251,250,.75)}
.cta-band .cta-row{justify-content:center}
/* magnetic button wrapper */
.magnet{display:inline-block;will-change:transform}

/* ==========================================================================
   Marquee
   ========================================================================== */
.marquee{overflow:hidden;padding-block:var(--s-4);border-block:1px solid var(--line);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marquee__track{display:flex;gap:3.5rem;width:max-content;animation:slide 42s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee span{
  font-family:var(--f-display);font-size:clamp(1.1rem,.9rem + 1vw,1.7rem);
  font-weight:600;letter-spacing:-.02em;color:var(--muted);
  display:flex;align-items:center;gap:3.5rem;white-space:nowrap;
}
.marquee span::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--cyan);flex:none}
@keyframes slide{to{transform:translateX(-50%)}}

/* ==========================================================================
   Legal / prose pages
   ========================================================================== */
.prose{max-width:70ch}
.prose h2{font-size:clamp(1.3rem,1.05rem + 1.1vw,1.75rem);margin:var(--s-5) 0 var(--s-2)}
.prose h3{font-size:1.15rem;margin:var(--s-4) 0 .5rem}
.prose p{color:var(--muted);margin-bottom:var(--s-2)}
.prose ul{margin:0 0 var(--s-2);display:flex;flex-direction:column;gap:.5rem}
.prose ul li{position:relative;padding-left:1.4rem;color:var(--muted);max-width:var(--maxw-text)}
.prose ul li::before{content:"";position:absolute;left:.15rem;top:.72em;width:6px;height:6px;border-radius:50%;background:var(--cyan)}
.prose a{color:var(--cyan-ink);font-weight:700;text-decoration:underline;text-underline-offset:3px}

/* ==========================================================================
   Footer
   ========================================================================== */
.footer{background:var(--navy-deep);color:rgba(253,251,250,.7);padding-block:var(--s-6) var(--s-4);position:relative;overflow:hidden}
.footer__grid{display:grid;gap:var(--s-5);grid-template-columns:repeat(auto-fit,minmax(190px,1fr));margin-bottom:var(--s-6)}
.footer__brand img{width:128px;margin-bottom:var(--s-3);filter:brightness(0) invert(1)!important}
.footer__brand p{font-size:var(--t-small);max-width:30ch;color:rgba(253,251,250,.6)}
.footer h4{font-family:var(--f-mono);font-size:var(--t-label);letter-spacing:.16em;text-transform:uppercase;
  color:var(--aqua);font-weight:500;margin-bottom:var(--s-2)}
.footer li+li{margin-top:.55rem}
.footer a{font-size:var(--t-small);transition:color .3s var(--ease)}
.footer a:hover{color:var(--aqua)}
.footer__bar{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-4);align-items:center;justify-content:space-between;
  padding-top:var(--s-4);border-top:1px solid var(--line-dark);font-size:var(--t-small);color:rgba(253,251,250,.5);padding-right:calc(56px + clamp(1rem,2vw,1.75rem) + 12px)}

.footer__social{display:flex;align-items:center;gap:var(--s-2);flex-wrap:wrap}
.footer__social a{display:flex;align-items:center;justify-content:center;width:34px;height:34px;flex:0 0 34px;border-radius:50%;border:1px solid var(--line-dark);color:rgba(253,251,250,.7);transition:color .3s var(--ease),border-color .3s var(--ease),background-color .3s var(--ease)}
.footer__social a svg{width:16px;height:16px;fill:currentColor}
.footer__social a:hover,.footer__social a:focus-visible{color:var(--navy-deep);background:var(--aqua);border-color:var(--aqua)}
@media (max-width:640px){
  .footer__bar{flex-direction:column;text-align:center;padding-right:0;padding-bottom:calc(var(--s-4) + 64px)}
  .footer__social{justify-content:center;gap:var(--s-1)}
  .footer__social a{width:32px;height:32px;flex:0 0 32px}
  .footer__social a svg{width:14px;height:14px}
}

/* ==========================================================================
   Page loader
   ========================================================================== */
.loader{
  position:fixed;inset:0;z-index:9999;
  background:var(--navy);
  display:grid;place-items:center;
}
.loader img{width:150px;opacity:.96}
.loader__bar{position:absolute;left:0;bottom:0;height:2px;width:0;background:linear-gradient(90deg,var(--cyan),var(--aqua))}
.loader.is-done{pointer-events:none}

/* ==========================================================================
   Responsive
   ========================================================================== */
.split-2{display:flex;flex-direction:column;gap:var(--s-5)}
@media (min-width:960px){
  .hero__grid{grid-template-columns:1.35fr .85fr}
  .split-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-6);align-items:start}
  .split-2--sticky>div:first-child{position:sticky;top:calc(var(--nav-h) + 3rem)}
}
@media (max-width:900px){
  .nav__links,.nav__cta{display:none!important}
  .nav__burger{display:flex!important;margin-left:auto!important}
  .nav__inner{padding-right:.55rem!important;gap:var(--s-3)!important}
}
@media (max-width:640px){
  .mock--old .m-body,.mock--new .m-body{grid-template-columns:1fr}
  .mock--old .m-box:nth-child(n+2),.mock--new .m-box:nth-child(n+3){display:none}
  .compare__knob{width:44px;height:44px}
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;
  }
  .r-up,.r-fade{opacity:1!important;transform:none!important}
  .split .w>span{transform:none!important;filter:none!important;opacity:1!important}
  .hero__canvas{display:none}
  .marquee__track{animation:none}
  .loader{display:none}
}

/* ==========================================================================
   Interior page hero
   ========================================================================== */
.page-hero{
  position:relative;overflow:hidden;
  padding-block:calc(var(--nav-h) + clamp(4.5rem,3rem + 7vw,8rem)) clamp(2.5rem,1.5rem + 4vw,4.5rem);
  background:linear-gradient(180deg,rgba(134,213,221,.20),rgba(253,251,250,0) 78%);
}
.page-hero__grid{
  position:absolute;inset:0;z-index:0;opacity:.5;
  background-image:linear-gradient(rgba(13,44,98,.10) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(13,44,98,.10) 1px,transparent 1px);
  background-size:58px 58px;
  mask-image:radial-gradient(78% 100% at 22% 0%,#000 8%,transparent 72%);
  -webkit-mask-image:radial-gradient(78% 100% at 22% 0%,#000 8%,transparent 72%);
}
.page-hero .wrap{position:relative;z-index:1}
.page-hero .mega{font-size:clamp(2.2rem,1.3rem + 4.4vw,4.6rem);max-width:17ch}
.page-hero .hero__sub{margin-top:var(--s-2)}
.page-hero .lead{max-width:56ch}

/* Numbered marker inside demo cards */
.card .step__n{margin-bottom:1rem}

/* Placeholder flag — remove once real content is in */
.placeholder-note{
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:var(--f-mono);font-size:var(--t-label);letter-spacing:.1em;text-transform:uppercase;
  color:var(--cyan-ink);
  padding:.45rem .85rem;border-radius:var(--r-pill);
  background:rgba(0,163,224,.09);
  box-shadow:inset 0 0 0 1px rgba(0,163,224,.22);
  max-width:none;
}
.placeholder-note::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--cyan);flex:none}

/* ==========================================================================
   Skip link
   ========================================================================== */
.skip{
  position:fixed;top:.9rem;left:.9rem;z-index:200;
  transform:translateY(-160%);
  padding:.8rem 1.3rem;border-radius:var(--r-pill);
  background:var(--navy);color:var(--cream);
  font-weight:700;font-size:var(--t-small);
  transition:transform .3s var(--ease);
}
.skip:focus-visible{transform:none}

/* ==========================================================================
   Floating WhatsApp
   ========================================================================== */
.wa{
  position:fixed;z-index:90;
  right:clamp(1rem,2vw,1.75rem);
  bottom:clamp(1rem,2vw,1.75rem);
  width:56px;height:56px;border-radius:50%;
  display:grid;place-items:center;
  background:#25D366;color:#0B2E17;
  box-shadow:0 8px 26px -6px rgba(13,44,98,.45), inset 0 0 0 1px rgba(0,0,0,.06);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease);
}
.wa svg{width:30px;height:30px}
.wa::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  box-shadow:0 0 0 0 rgba(37,211,102,.55);
  animation:wa-ping 2.8s var(--ease-io) infinite;
}
@keyframes wa-ping{0%{box-shadow:0 0 0 0 rgba(37,211,102,.5)}70%,100%{box-shadow:0 0 0 18px rgba(37,211,102,0)}}
.wa:hover{transform:translateY(-4px) scale(1.06);box-shadow:0 14px 34px -8px rgba(13,44,98,.5)}
@media (prefers-reduced-motion:reduce){.wa::after{animation:none}}

@media (max-width:560px){.hide-sm{display:none}}

/* ==========================================================================
   Elementor Reset & Page-Width Layout Overrides
   ========================================================================== */
html, body {
  max-width: 100% !important;
  overflow-x: hidden !important;
}

.elementor-element-type-container,
.elementor-widget-container,
.elementor-widget-html {
  margin: 0 !important;
  padding: 0 !important;
  --padding-top: 0px !important;
  --padding-bottom: 0px !important;
  --padding-left: 0px !important;
  --padding-right: 0px !important;
  --widgets-spacing: 0px !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
}

/* Allow long button text to wrap and prevent container stretching */
.btn {
  white-space: normal !important;
  text-align: center !important;
  word-wrap: break-word !important;
  word-break: break-word !important;
}
@media (max-width:640px) {
  .btn {
    padding: .75rem 1.25rem !important;
    font-size: .85rem !important;
    min-height: 44px !important;
  }
  .btn--lg {
    min-height: 52px !important;
    padding: .9rem 1.5rem !important;
    font-size: .95rem !important;
  }
}

/* Allow long FAQ accordion questions to wrap */
.faq__q {
  white-space: normal !important;
  text-align: left !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 1rem !important;
}
.faq__ico {
  flex: none !important;
}

/* Remove FAQ hover color/background changes */
.faq__q:hover {
  background: none !important;
  background-color: transparent !important;
  color: var(--navy) !important;
}

/* Prevent price chip from shrinking or truncating */
.btn .chip {
  flex-shrink: 0 !important;
  white-space: nowrap !important;
}

/* Fix burger menu lines stack and hover color globally */
.nav__burger {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4.5px !important;
  background: var(--navy) !important;
  color: var(--cream) !important;
  border: 0 !important;
}
.nav__burger span {
  margin: 0 !important;
}
.nav__burger:hover {
  background: var(--cyan) !important;
  color: var(--navy) !important;
}
.nav__burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)!important}
.nav__burger[aria-expanded="true"] span:nth-child(2){opacity:0!important}
.nav__burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)!important}

/* Sheet link hover styling */
.sheet__link {
  color: var(--cream) !important;
  transition: color 0.3s var(--ease) !important;
}
.sheet__link:hover {
  color: var(--cyan) !important;
}
.sheet__link i {
  transition: color 0.3s var(--ease) !important;
}
.sheet__link:hover i {
  color: var(--aqua) !important;
  opacity: 1 !important;
}

/* Stack header and nav bar above mobile sheet */
.xpro-theme-builder-header,
.xpro-theme-builder-header-nav,
.site-header,
.xpro-header,
.elementor-16,
[data-elementor-id="16"],
.elementor-header {
  position: relative !important;
  z-index: 99999 !important;
}
.nav {
  z-index: 999999 !important;
}

/* Reduce hero headline font size to match other sections */
.hero h1.mega {
  font-size: clamp(2.2rem, 1.2rem + 4.5vw, 4.4rem) !important;
}

/* Ensure inline SVGs in buttons stay visible and transition color on hover */
.btn svg {
  position: relative;
  z-index: 2;
  transition: color 0.4s var(--ease);
}
.btn:hover svg {
  color: var(--navy) !important;
}