/* ==============================================================
   LUSION.CO — ANIMATION STYLE STUDY v2 (single file, original code)
   - Smooth odometer preloader (rolling digits, no glitch)
   - Canvas pixel-wipe page transitions with pixel "LOADING" text
   - Word-mask hero reveal, line-mask titles
   - CTA pills with dot-expand hover, arrow slide
   - Menu cards with rotate+rise stagger, link clone-slide hovers
   - Scroll-drawn ribbons (lerped, buttery)
   - Project cards, reel strip decorations, crosses, scroll indicator
   - Dark next-page section with progress bar + auto-advance
   ============================================================== */

:root{
  --off-white:#ffffff;
  --white:#fff;
  --dark-white:#e4e6ef;
  --black:#000;
  --ink:#0b0b10;
  /* lighter, brighter blue pulled directly from the logo's own gradient
     (logo-mark.svg uses #0059e3/#206acd/#2caeec) — the old #1a2ffb read as
     a dark indigo/violet that didn't match the brand mark's actual blue. */
  --blue:#0059e3;
  --green:#c1ff00;
  --grey-blue:#2b2e3a;
  --radius:20px;
  --pad-x:max(5vw,40px);
  --pad-y:clamp(30px,4vw,50px);
  --bez:cubic-bezier(.4,0,.1,1);      /* lusion's main micro-interaction ease */
  --bez-soft:cubic-bezier(.35,0,0,1); /* cta ease */
  --bez-page:cubic-bezier(.83,0,.17,1);
  --cross:clamp(.875rem,1vw,2rem);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:auto}
body{
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
  background:var(--off-white);color:var(--ink);
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
body.locked{overflow:hidden}
button{font:inherit;border:none;background:none;cursor:pointer;color:inherit}
a{color:inherit;text-decoration:none}
::selection{background:var(--blue);color:#fff}

/* ==================== 1. PRELOADER (odometer) ==================== */
#preloader{
  position:fixed;inset:0;z-index:1000;background:var(--black);
  transition:transform .9s var(--bez-page);
}
#preloader.exit{transform:translateY(-101%)}
#pre-digits{
  position:absolute;left:2vw;bottom:0;color:var(--white);
  font-size:clamp(7em,8vw,20em);font-weight:500;letter-spacing:-.01em;
  height:.78em;line-height:.78em;overflow:hidden;display:flex;
  transition:opacity .4s ease,transform .5s var(--bez);
}
#preloader.exit #pre-digits,#preloader.logo #pre-digits{opacity:0;transform:translateY(.15em)}
.pd{position:relative;width:1ch;height:.78em;overflow:hidden}
.pd-strip{will-change:transform}
.pd-n{height:.78em;line-height:.72em;text-align:center}
/* pixel "LOADING" word, drawn on canvas once the counter reaches 100 —
   same technique as the page-transition wipe, reused here for consistency */
#pre-canvas{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .3s ease}
#preloader.logo #pre-canvas{opacity:1}

/* ==================== 2. TRANSITION CANVAS ==================== */
#transition-canvas{
  position:fixed;inset:0;z-index:900;width:100%;height:100%;
  pointer-events:none;
}
#transition-canvas.active{pointer-events:auto}

/* ==================== HEADER ==================== */
#header{
  position:fixed;top:0;left:0;right:0;z-index:520;
  display:flex;justify-content:space-between;align-items:center;
  padding:calc(var(--pad-y)*.6) var(--pad-x);
  font-size:clamp(1rem,1vw,1.5rem);pointer-events:none;
  transform:translateY(-130%);
  background:rgba(255,255,255,.45);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 1px 0 rgba(11,11,16,.04);
  transition:transform .9s var(--bez) .1s,background .35s ease,box-shadow .35s ease,backdrop-filter .35s ease;
}
body.ready #header{transform:none}
/* frosted-glass look at all times — except while a dark section is
   parked behind the header, where the blur/white wash would muddy the
   white/on-dark logo swap, so it goes fully transparent there instead */
#header.scrolled{background:rgba(255,255,255,.82);box-shadow:0 1px 0 rgba(11,11,16,.07);backdrop-filter:blur(16px)}
#header.on-dark{background:rgba(255,255,255,0);box-shadow:0 1px 0 rgba(11,11,16,0);backdrop-filter:none;-webkit-backdrop-filter:none}
#header.scrolled.on-dark{background:rgba(255,255,255,0);box-shadow:0 1px 0 rgba(11,11,16,0);backdrop-filter:none;-webkit-backdrop-filter:none}
#header>*{pointer-events:auto}
#logo{position:relative;display:block;width:10.2em;height:2.5em;cursor:pointer;flex-shrink:0}
.logo-img{position:absolute;left:0;top:50%;transform:translateY(-50%);
  height:2.5em;width:auto;max-width:none;display:block;
  transition:opacity .45s ease;-webkit-user-select:none;user-select:none;pointer-events:none}
.logo-img.logo-onlight{opacity:1}
.logo-img.logo-ondark{opacity:0}
#header.on-dark .logo-img.logo-onlight{opacity:0}
#header.on-dark .logo-img.logo-ondark{opacity:1}
#header-right{display:flex;align-items:center;gap:.75em}

/* sound button — animated bars */
#sound-btn{width:3.2em;height:3.2em;border-radius:50%;background:var(--white);
  display:flex;align-items:center;justify-content:center;gap:2.5px;
  transition:transform .4s var(--bez)}
#sound-btn:hover{transform:scale(1.08)}
#sound-btn i{width:2px;background:var(--ink);border-radius:2px;animation:sbar 1.1s ease-in-out infinite}
#sound-btn i:nth-child(1){height:8px;animation-delay:0s}
#sound-btn i:nth-child(2){height:14px;animation-delay:.15s}
#sound-btn i:nth-child(3){height:9px;animation-delay:.3s}
#sound-btn i:nth-child(4){height:13px;animation-delay:.45s}
@keyframes sbar{0%,100%{transform:scaleY(.4)}50%{transform:scaleY(1)}}

/* LET'S TALK pill — arrow slides in, dot hides, text shifts */
.talk-btn{
  position:relative;display:inline-flex;align-items:center;gap:.625em;
  height:3.2em;padding:0 1.125em 0 1.625em;border-radius:6.25em;
  background:var(--grey-blue);color:var(--white);
  font-size:.875em;font-weight:500;text-transform:uppercase;letter-spacing:.02em;
  overflow:hidden;transition:background .4s;white-space:nowrap;
}
.talk-btn .t-arrow{
  position:absolute;left:1.1em;top:calc(50% - .5em);width:1em;height:1em;
  transform:translateX(-2.5em);transition:transform .3s var(--bez);
}
.talk-btn .t-arrow svg{width:100%;height:100%;display:block}
.talk-btn .t-text{transition:transform .3s var(--bez)}
.talk-btn .t-dot{width:.32em;height:.32em;border-radius:50%;background:currentColor;
  transition:transform .15s var(--bez)}
.talk-btn:hover{background:var(--blue)}
.talk-btn:hover .t-arrow{transform:translateX(0)}
.talk-btn:hover .t-text{transform:translateX(1.5em)}
.talk-btn:hover .t-dot{transform:scale(0)}

/* MENU pill — text swap + dots rotate */
#menu-btn{
  position:relative;display:inline-flex;align-items:center;gap:.625em;
  height:3.2em;padding:0 1.125em 0 1.625em;border-radius:6.25em;
  background:var(--dark-white);color:var(--ink);
  font-size:.875em;font-weight:500;text-transform:uppercase;
  transition:background .4s,color .4s;
}
#menu-btn:hover{background:var(--white)}
.mb-texts{position:relative;overflow:hidden;height:1.2em}
.mb-texts span{display:block;line-height:1.2em;transition:transform .3s var(--bez)}
.mb-texts .close{position:absolute;left:0;top:0;transform:translateY(100%)}
#menu-btn.open .mb-texts .menu{transform:translateY(-100%)}
#menu-btn.open .mb-texts .close{transform:translateY(0)}
.mb-dots{position:relative;width:1.15em;height:1.15em;
  transition:transform .4s var(--bez);transform:rotate(180deg)}
#menu-btn:hover .mb-dots,#menu-btn.open .mb-dots{transform:rotate(270deg)}
.mb-dots i{position:absolute;top:calc(50% - .156em);width:.3125em;height:.3125em;
  border-radius:50%;background:currentColor}
.mb-dots i:first-child{left:.05em}
.mb-dots i:last-child{right:.05em}

/* ==================== MENU OVERLAY ==================== */
#menu-backdrop{
  position:fixed;top:0;right:0;height:100vh;width:50vw;z-index:505;
  background:linear-gradient(270deg,rgba(11,11,18,.5),rgba(11,11,18,0));
  opacity:0;transition:opacity .4s .3s;pointer-events:none;
}
#menu-backdrop.open{opacity:1;transition:opacity .4s}
#menu{
  position:fixed;z-index:510;right:var(--pad-x);
  top:calc(var(--pad-y) + 4.5em);width:min(340px,88vw);
  display:flex;flex-direction:column;gap:.625em;pointer-events:none;
}
.menu-card{
  background:var(--white);border-radius:.625em;
  opacity:0;will-change:transform;
}
#menu .menu-card:nth-child(1){transform:translate3d(0,5.5em,0) rotate(3.5deg)}
#menu .menu-card:nth-child(2){transform:translate3d(0,7.75em,0) rotate(-3.5deg)}
#menu .menu-card:nth-child(3){transform:translate3d(0,7.75em,0) rotate(-3.5deg)}
#menu .menu-card{transition:transform .5s var(--bez),opacity .5s var(--bez)}
#menu.open .menu-card{transform:translate3d(0,0,0) rotate(0);opacity:1;pointer-events:auto}
#menu.open .menu-card:nth-child(1){transition-delay:.0s}
#menu.open .menu-card:nth-child(2){transition-delay:.07s}
#menu.open .menu-card:nth-child(3){transition-delay:.14s}
#menu:not(.open) .menu-card:nth-child(1){transition-delay:.14s}
#menu:not(.open) .menu-card:nth-child(2){transition-delay:.07s}

.menu-links{padding:1em .3125em;display:flex;flex-direction:column}
.m-link{
  position:relative;display:block;padding:1em 1.625em;text-transform:uppercase;
  cursor:pointer;text-align:left;width:100%;
}
.m-link .lk-bg{position:absolute;inset:0;border-radius:6.25em;background:var(--blue);
  opacity:0;transform:scale(.85);transition:opacity .3s,transform .4s var(--bez)}
.m-link .lk-inner{position:relative;overflow:hidden;display:block}
.m-link .lk-t,.m-link .lk-c{display:block;font-size:1.4em;line-height:1;
  transition:transform .4s var(--bez)}
.m-link .lk-c{position:absolute;left:0;top:0;transform:translateY(100%)}
.m-link .lk-arrow{position:absolute;right:1.2em;top:calc(50% - .6em);width:1.2em;height:1.2em;
  transform:scale(0);transition:transform .2s var(--bez)}
.m-link .lk-arrow svg{width:100%;height:100%;display:block}
.m-link::before{content:"";position:absolute;top:calc(50% - .22em);right:1.7em;
  width:.44em;height:.44em;border-radius:50%;background:var(--ink);
  transform:scale(0);transition:transform .3s var(--bez)}
.m-link.active::before{transform:scale(1)}
.m-link:hover .lk-bg{opacity:.1;transform:scale(1)}
.m-link:hover .lk-t{transform:translateY(-100%)}
.m-link:hover .lk-c{transform:translateY(0)}
.m-link:hover .lk-arrow{transform:scale(1);transition:transform .2s .2s var(--bez)}
.m-link:hover.active::before{transform:scale(0)}

.menu-news{display:none;padding:1.875em}
.menu-news h3{font-size:1.9em;font-weight:400;line-height:1.15}
.news-input{position:relative;margin-top:1.2em}
.news-input input{
  width:100%;height:3.2em;border:0;border-radius:1rem;background:#eef0f4;
  padding:0 3em 0 1.25em;font:inherit;outline:none;
}
.news-input input::placeholder{opacity:.3}
.news-input button{position:absolute;right:.9em;top:calc(50% - .75em);width:1.5em;height:1.5em;
  transition:transform .3s var(--bez)}
.news-input button:hover{transform:translateX(.3em)}
.news-input svg{width:100%;height:100%;display:block}

.menu-labs{background:var(--black);color:var(--white);padding:1.25em 1.875em;cursor:pointer}
.labs-inner{position:relative;display:flex;align-items:center;gap:1.2em;overflow:hidden}
.labs-lucy svg{width:1.9em;height:2.6em;display:block}
.labs-texts{position:relative;flex:1;font-size:1.4em;text-transform:uppercase;overflow:hidden}
.labs-texts .lt,.labs-texts .ltc{display:block;transition:transform .4s var(--bez)}
.labs-texts .ltc{position:absolute;top:0;transform:translateY(100%)}
.labs-arrow,.labs-arrow2{width:1.3em;height:1.3em;flex-shrink:0;transition:transform .3s var(--bez)}
.labs-arrow2{position:absolute;right:0;top:calc(50% - .65em);transform:translate3d(-1.5em,2.4em,0)}
.labs-arrow svg,.labs-arrow2 svg{width:100%;height:100%;display:block}
.menu-labs:hover .labs-arrow{transform:translate3d(1.5em,-2.4em,0)}
.menu-labs:hover .labs-arrow2{transform:translate3d(0,0,0)}
.menu-labs:hover .lt{transform:translateY(-100%)}
.menu-labs:hover .ltc{transform:translateY(0)}

/* ==================== SCROLL INDICATOR ==================== */
#scroll-indicator{
  position:fixed;right:16px;top:40vh;width:6px;height:20vh;z-index:400;
  background:rgba(0,0,0,.1);border-radius:3px;
}
#scroll-indicator-bar{position:absolute;left:0;top:0;width:100%;height:25%;
  background:var(--black);border-radius:3px;will-change:transform}

/* ==================== SECTIONS ==================== */
.section{position:relative;padding:var(--pad-y) var(--pad-x)}

/* ---- HERO ---- */
#hero{min-height:100vh;display:flex;flex-direction:column}
#hero-visual{
  position:relative;flex:1;margin-top:calc(var(--pad-y)*1.4);min-height:64vh;
  display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;
  text-align:left;padding:6vh 6vw 6vh 4.2vw;border-radius:var(--radius);overflow:hidden;
  background:
    linear-gradient(180deg,rgba(4,10,26,0) 42%,rgba(4,10,26,.5) 100%),
    linear-gradient(90deg,rgba(4,10,26,.8) 0%,rgba(4,10,26,.58) 28%,rgba(4,10,26,.18) 55%,rgba(4,10,26,0) 72%),
    url("../imgs/hero/hero-frost.jpg") center/cover no-repeat;
  opacity:0;will-change:opacity;
  transition:opacity 1.1s ease .15s;
}
body.ready #hero-visual{opacity:1}

#hero-inner{position:relative;z-index:1;max-width:56%}
#hero-title{
  color:var(--white);
  font-size:clamp(28px,4.6vw,64px);font-weight:400;line-height:1.08;
  max-width:11em;margin:0;
}
#hero-title .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.12em;margin-bottom:-.12em}
#hero-title .w>span{display:inline-block;transform:translate3d(0,1.5em,0) rotate(12deg);
  transform-origin:left;will-change:transform;
  transition:transform 1s var(--bez)}
body.ready #hero-title .w>span{transform:translate3d(0,0,0) rotate(0)}

#hero-cta-row{display:flex;align-items:center;gap:1.8em;margin-top:2em;flex-wrap:wrap}
#hero-divider{width:1px;align-self:stretch;min-height:2.6em;background:rgba(255,255,255,.25);flex-shrink:0}
#hero-desc{
  color:rgba(255,255,255,.72);font-size:clamp(13px,1vw,16px);line-height:1.5;
  max-width:20em;margin:0;
}

/* ---- ABOUT INTRO (different opening than home's hero banner) ---- */
#about-intro{min-height:78vh;display:flex;flex-direction:column;justify-content:center;padding-top:16vh}
#about-intro h1.big-title{font-size:clamp(26px,4vw,54px)}
.ai-eyebrow{display:block;text-transform:uppercase;letter-spacing:.1em;
  font-size:clamp(11px,1vw,16px);opacity:.5;font-weight:500;margin-bottom:1.6em}
#ai-sub{max-width:32em;margin-top:1.6em;font-size:clamp(15px,1.3vw,22px);line-height:1.5;opacity:.72}

/* Contact is a utility page — visitors want the form, not a cinematic
   hero. Shrink the intro so the form sits within the first viewport
   instead of a huge gap pushing it down. */
body[data-page="contact"] #about-intro{min-height:auto;padding-top:calc(var(--pad-y)*2.6 + 4vh);padding-bottom:7vh}

/* ---- ABOUT stats row (fills the intro's right/lower space with real
   numbers instead of leaving it blank next to a narrow heading) ---- */
.about-stats{display:flex;flex-wrap:wrap;align-items:center;gap:2.6em 3.2em;margin-top:3.4em}
.about-stat{display:flex;flex-direction:column;gap:.35em;max-width:13em}
.about-stat-num{font-size:clamp(26px,2.6vw,38px);font-weight:600;line-height:1}
.about-stat-label{font-size:.85rem;opacity:.6;line-height:1.4}
@media(max-width:700px){.about-stats{gap:2em}}
@media(max-width:480px){
  /* flex-wrap on a narrow phone lets the badge + 3 stats wrap at whatever
     point their widths happen to land, so each "row" ends up a different
     height with a different gap above it — stack them into one deliberate
     column instead so the rhythm down the block is consistent. */
  .about-stats{flex-direction:column;align-items:flex-start;gap:1.5em}
  .rotate-badge{margin-bottom:.2em}
}

/* ---- WHY BLIZZNEX (pillar cards) ---- */
.pillars-wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:1.6vw;margin-top:6vh}
.pillar-card{
  padding:2.2em 1.8em;border-radius:var(--radius);background:var(--off-white);
  border:1px solid rgba(11,11,16,.08);
}
.pillar-num{display:block;font-size:.85em;opacity:.4;margin-bottom:1.4em}
.pillar-title{font-size:1.15rem;font-weight:600;line-height:1.3;margin-bottom:.6em}
.pillar-desc{font-size:.95rem;line-height:1.55;opacity:.7}
@media(max-width:1000px){.pillars-wrap{grid-template-columns:repeat(2,1fr);gap:3vw 4vw}}
@media(max-width:600px){
  /* once it drops to a single column the leftover 3vw row-gap (a bit over
     10px on most phones) is the only space between stacked cards — same
     class of bug as the earlier Featured Work fix. Give stacked cards a
     real gap instead of inheriting the tablet 2-column value. */
  .pillars-wrap{grid-template-columns:1fr;gap:1.6em}
}

/* Dark variant — used on service pages as a second contrast "beat"
   (same rhythm fix applied to the homepage's #process section). Scoped
   to a class, not the shared #why id, so it never touches audit.html's
   "What's Included" section, which reuses the same id/template. */
section.pillars-dark{
  background:var(--ink);color:var(--white);border-radius:var(--radius);
  margin-top:4vh;padding:10vh var(--pad-x);overflow:hidden;
}
@media(max-width:700px){
  /* the 4vh gap above + 10vh internal padding above the heading compounds
     to feel like a lot of dead air once the viewport itself is short —
     tighten both on mobile so the dark "beat" still separates cleanly
     from the section before it without such a large empty run first. */
  section.pillars-dark{margin-top:2.4em;padding:7vh var(--pad-x)}
}
.pillars-dark .section-subtitle,.pillars-dark .big-title{color:var(--white)}
.pillars-dark .pillar-card{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14)}
.pillars-dark .pillar-num{color:var(--green);opacity:.85}
.pillars-dark .pillar-title{color:var(--white)}
.pillars-dark .pillar-desc{color:rgba(255,255,255,.68);opacity:1}

/* ---- BLOG intro (heading + a real "topics" panel on the right, so wide
   screens don't leave that side empty next to a narrow-measure heading) ---- */
.blog-intro-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(200px,272px);gap:5vw;width:100%;align-items:end}
.blog-intro-topics{padding:1.6em;border-radius:var(--radius);background:var(--off-white);border:1px solid rgba(11,11,16,.08)}
.topic-chips{display:flex;flex-wrap:wrap;gap:.5em;margin-top:1em}
.topic-chip{
  display:inline-block;padding:.5em 1em;border-radius:50px;font-size:.8rem;font-weight:500;
  background:var(--white);border:1px solid rgba(11,11,16,.12);cursor:pointer;
  transition:background .25s var(--bez-soft),color .25s,border-color .25s;
}
.topic-chip.active{background:var(--ink);color:var(--white);border-color:var(--ink)}
/* filterable blog grid — cards fade/collapse out instead of a hard
   display:none jump, so switching topics feels intentional */
.blog-card.blog-hide{
  display:none;
}
@media(max-width:900px){.blog-intro-grid{grid-template-columns:1fr}.blog-intro-topics{margin-top:2vh}}

/* ---- BLOG grid ---- */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6vw;margin-top:6vh}
.blog-card{
  display:flex;flex-direction:column;gap:1.1em;height:100%;
  padding:0 0 2.2em;border-radius:var(--radius);background:var(--off-white);
  border:1px solid rgba(11,11,16,.08);transition:border-color .3s var(--bez-soft),transform .3s var(--bez-soft);
  color:inherit;text-decoration:none;
}
.blog-card:hover{border-color:rgba(11,11,16,.18);transform:translateY(-4px)}
/* card thumbnail — follows the Visuvate blog reference (image-topped cards)
   instead of a text-only card. Falls back to a quiet gradient tile (no
   broken-image icon) for posts/filler cards without an og_image yet. */
.blog-card-img{
  aspect-ratio:16/9;border-radius:var(--radius) var(--radius) 0 0;overflow:hidden;
  background:linear-gradient(135deg,#12131c,#1b1c2a);
}
.blog-card-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--bez-soft)}
.blog-card:hover .blog-card-img img{transform:scale(1.05)}
.blog-card-body{display:flex;flex-direction:column;gap:1.1em;flex:1;padding:1.8em 1.8em 0}
.blog-tag{display:inline-block;font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;opacity:.5;font-weight:500}
.blog-title{font-size:1.3rem;font-weight:600;line-height:1.3}
.blog-excerpt{font-size:.95rem;line-height:1.6;opacity:.7}
.blog-date{font-size:.8rem;opacity:.4;margin-top:auto;padding-top:.6em}
@media(max-width:1000px){.blog-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:650px){.blog-grid{grid-template-columns:1fr}}

/* ---- CONTACT form + info ---- */
.contact-wrap{display:grid;grid-template-columns:1.2fr .8fr;gap:5vw;margin-top:6vh;align-items:start}
.c-form{display:flex;flex-direction:column;gap:1.4em}

/* Honeypot spam-trap field — present in the DOM (so bots that auto-fill
   every input catch themselves) but invisible and unreachable to real
   visitors: off-screen, not tab-focusable, not read by screen readers. */
/* Honeypot — hidden the standard "visually-hidden" way (1x1px + clip),
   not via left:-9999px, which creates a huge off-screen layout area that
   only worked because body{overflow-x:hidden} was masking it. */
.hp-field{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.c-row-2{display:grid;grid-template-columns:1fr 1fr;gap:1.2em}
.c-field label{display:block;font-size:.85rem;opacity:.6;margin-bottom:.5em}
.c-field input,.c-field select,.c-field textarea{
  width:100%;background:var(--off-white);border:1px solid rgba(11,11,16,.14);
  border-radius:.8em;padding:.9em 1.1em;font:inherit;font-size:1rem;color:inherit;
  transition:border-color .3s var(--bez-soft);
}
.c-field input:focus,.c-field select:focus,.c-field textarea:focus{outline:none;border-color:var(--blue)}
.c-field textarea{resize:vertical;min-height:8em;font-family:inherit}
.c-info-block{margin-bottom:2.2em}
.c-info-label{display:block;font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;opacity:.5;margin-bottom:.6em}
.c-info-value{font-size:1.15rem;line-height:1.5}
.c-steps{margin-top:2.4em;padding-top:2.2em;border-top:1px solid rgba(11,11,16,.1)}
.c-step{display:flex;gap:1em;margin-bottom:1.2em;font-size:.95rem;line-height:1.5}
.c-step:last-child{margin-bottom:0}
.c-step-num{
  flex-shrink:0;width:1.8em;height:1.8em;border-radius:50%;background:var(--ink);color:var(--white);
  display:flex;align-items:center;justify-content:center;font-size:.8rem;
}
@media(max-width:900px){
  .contact-wrap{grid-template-columns:1fr;gap:6vh}
  .c-row-2{grid-template-columns:1fr}
}

/* ---- CASE STUDY (project detail page) ---- */
.cs-tags-row{display:flex;flex-wrap:wrap;gap:.6em;margin-top:1.8em}
.cs-tag{font-size:.78rem;padding:.5em 1.1em;border-radius:2em;border:1px solid rgba(11,11,16,.15);opacity:.65;text-transform:capitalize}

.cs-brief{display:grid;grid-template-columns:1fr 1fr;gap:5vw;margin-top:2vh}
.cs-brief h3{font-size:1.05rem;font-weight:600;margin-bottom:.7em}
.cs-brief p{font-size:1rem;line-height:1.65;opacity:.75}

/* ---- BLOG ARTICLE (dynamic blog-post.php) ---- */
#read-progress{position:fixed;left:0;top:0;width:100%;height:3px;z-index:500;background:transparent;pointer-events:none}
#read-progress-bar{height:100%;width:0%;background:var(--blue);transition:width .1s linear}
.post-byline{display:flex;align-items:center;gap:.7em;margin-top:1.4em;font-size:.85rem;opacity:.55}
.post-byline-dot{opacity:.6}
/* TOC when JS has relocated it to the top of the article on mobile (see
   blog-post.php) — a bit of breathing room above/below since it's now
   inline in the reading flow, not a sidebar card among other cards */
#post-toc-mobile-anchor:not(:empty){margin:2vh 0 0}
#post-toc-mobile-anchor .post-side-card{margin:0}
.post-hero-img{
  max-width:78em;margin:3vh auto 0;border-radius:var(--radius);overflow:hidden;
  aspect-ratio:1200/630;
}
.post-hero-img img{width:100%;height:100%;object-fit:cover;display:block}
.post-share{
  display:inline-flex;align-items:center;gap:.5em;padding:.5em 1em;
  border:1px solid rgba(11,11,16,.15);border-radius:2em;background:transparent;color:inherit;
  font:inherit;font-size:.82rem;cursor:pointer;opacity:1;transition:border-color .25s var(--bez-soft),background .25s var(--bez-soft);
}
.post-share:hover{border-color:rgba(11,11,16,.35);background:rgba(11,11,16,.04)}

/* Article + sticky sidebar. The first track is a flexible 1fr (not a
   fixed em cap) so it actually consumes the box's free space instead of
   leaving it stranded past the sidebar — that stranded-space bug was the
   "weird empty space on the right" on this page. .post-body itself still
   caps its own measure to ~46em for readability, so the extra room becomes
   a normal gutter next to the sidebar, not a dangling blank strip at the
   page edge. */
.post-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,320px);gap:clamp(28px,4vw,64px);max-width:78em;margin:0 auto;align-items:start}
.post-body{max-width:46em}
.post-sidebar{position:sticky;top:110px;display:flex;flex-direction:column;gap:1.2em}
.post-side-card{
  position:relative;padding:1.6em;border-radius:var(--radius);background:var(--off-white);
  border:1px solid rgba(11,11,16,.08);isolation:isolate;overflow:hidden;
}
/* Animated conic border-glow ring, sweeping slowly behind each sidebar
   card — visible, not just a static hover tint */
.post-side-card::before{
  content:"";position:absolute;inset:-1px;z-index:-1;border-radius:inherit;padding:1px;
  background:conic-gradient(from var(--glow-a,0deg),transparent 0 60%,rgba(26,47,251,.55) 75%,rgba(193,255,0,.5) 85%,transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  animation:post-side-glow 7s linear infinite;
}
@keyframes post-side-glow{to{--glow-a:360deg}}
@property --glow-a{syntax:'<angle>';inherits:false;initial-value:0deg}
.post-side-label{display:block;font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;opacity:.5;font-weight:500;margin-bottom:1em}
.post-side-card .post-share{width:100%;justify-content:center}
.post-side-link{display:block;font-size:.92rem;font-weight:600;line-height:1.4;color:inherit;text-decoration:none;padding:.8em 0;border-top:1px solid rgba(11,11,16,.08)}
.post-side-link:first-of-type{border-top:none;padding-top:0}
.post-side-link:hover{opacity:.65}
.post-side-link .post-side-tag{display:block;font-size:.72rem;font-weight:500;text-transform:uppercase;letter-spacing:.06em;opacity:.45;margin-bottom:.35em}
.post-side-cta h4{font-size:1rem;font-weight:600;margin-bottom:.5em}
.post-side-cta p{font-size:.88rem;line-height:1.55;opacity:.72;margin-bottom:1.1em}
.post-side-cta .pkg-cta{display:block;width:100%;text-align:center;padding:.8em 1em}

/* Table of contents — auto-built from the article's own h3s by JS, with
   scroll-spy highlighting for the section currently in view */
.post-toc{list-style:none;margin:0;padding:0}
.post-toc li{margin:0}
.post-toc a{
  display:block;font-size:.86rem;line-height:1.4;padding:.55em 0 .55em .9em;
  color:inherit;opacity:.55;text-decoration:none;border-left:2px solid rgba(11,11,16,.1);
  transition:opacity .2s,border-color .2s,color .2s;
}
.post-toc a:hover{opacity:.85}
.post-toc a.active{opacity:1;color:var(--blue);border-left-color:var(--blue);font-weight:600}

/* Font-size adjuster — persists via localStorage (real site preference,
   not a chat artifact), scales .post-body via a CSS variable */
.post-fontctl{display:flex;align-items:center;gap:.6em}
.post-fontctl button{
  width:2.2em;height:2.2em;border-radius:50%;border:1px solid rgba(11,11,16,.15);
  background:transparent;color:inherit;font:inherit;font-weight:700;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:border-color .2s,background .2s;
}
.post-fontctl button:hover{border-color:rgba(11,11,16,.35);background:rgba(11,11,16,.04)}
.post-fontctl button:first-child{font-size:.78rem}
.post-fontctl button:last-child{font-size:1.05rem}
.post-fontctl-label{font-size:.78rem;opacity:.5;margin-left:.2em}

@media(max-width:1000px){
  .post-layout{grid-template-columns:1fr;max-width:42em}
  .post-body{max-width:none}
  .post-sidebar{position:static;flex-direction:row;flex-wrap:wrap}
  .post-side-card{flex:1;min-width:220px}
}
@media(max-width:650px){.post-sidebar{flex-direction:column}}

.post-body{font-size:var(--post-fs,1.0625rem)}
.post-body h3{font-size:calc(var(--post-fs,1.0625rem)*1.28);font-weight:600;margin-bottom:.7em;scroll-margin-top:110px}
.post-body p{font-size:var(--post-fs,1.0625rem);line-height:1.8;opacity:.8}
.post-body ul{margin:0 0 0 1.2em;padding:0}
.post-body li{font-size:var(--post-fs,1.0625rem);line-height:1.8;opacity:.8;margin-bottom:.4em}
.post-body blockquote{
  margin:1.6em 0;padding:.2em 0 .2em 1.4em;border-left:3px solid var(--blue);
  font-size:calc(var(--post-fs,1.0625rem)*1.12);line-height:1.6;font-style:italic;opacity:.85;
}
.post-body img{width:100%;border-radius:var(--radius);margin:.4em 0}
.post-body a{color:var(--blue);text-decoration:underline;text-underline-offset:.2em}
/* .post-body a (above) has higher specificity than .pkg-cta's own color
   rule, so the "Get your free audit" button embedded in the article body
   was inheriting blue text on its own blue background — invisible. Force
   it back to the button's real white-on-blue styling. */
.post-body a.pkg-cta{color:var(--white);text-decoration:none}
.post-body>*+*{margin-top:1.6em}

.cs-deliverables{margin-top:6vh;padding-top:4vh;border-top:1px solid rgba(11,11,16,.1)}
.cs-deliverables-label{display:block;font-size:.8rem;text-transform:uppercase;opacity:.45;letter-spacing:.08em;margin-bottom:1em}

.cs-mockups{margin-top:8vh;padding:7vh 5vw;background:#f0f1f4;border-radius:var(--radius)}
.cs-mockup-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:1.6em;align-items:start}
.mockup-frame{grid-column:span 6;border-radius:1em;overflow:hidden;background:#fff;box-shadow:0 24px 60px rgba(15,15,25,.14)}
.mockup-frame.wide{grid-column:span 8}
.mockup-frame.narrow{grid-column:span 4}
.mockup-frame.phone{grid-column:span 4;max-width:240px;justify-self:center}
.mf-bar{display:flex;align-items:center;gap:.35em;padding:.7em .9em;background:#eceef2}
.mf-bar i{width:.55em;height:.55em;border-radius:50%;background:#d7dbe3}
.mf-body{padding:1.6em;background:linear-gradient(160deg,#fafbfd,#eef0f5)}
.mf-skel{height:.7em;border-radius:.4em;background:rgba(11,11,16,.09);margin-bottom:.7em}
.mf-skel.w40{width:40%}
.mf-skel.w60{width:60%}
.mf-skel.w80{width:80%}
.mf-block{height:5.5em;border-radius:.7em;margin-bottom:1em;background:linear-gradient(135deg,#1c46e8,#2caeec)}
.mf-caption{margin-top:1em;font-size:.85rem;text-align:center;opacity:.55}
@media(max-width:900px){
  .cs-brief{grid-template-columns:1fr;gap:3vh}
  .mockup-frame,.mockup-frame.wide,.mockup-frame.narrow{grid-column:1/-1}
  .mockup-frame.phone{grid-column:1/-1;max-width:260px}
}

.cs-result{margin-top:8vh;max-width:38em}
.cs-result h3{font-size:1.05rem;font-weight:600;margin-bottom:.7em}
.cs-result p{font-size:1.05rem;line-height:1.65;opacity:.75}

.cs-close-logo{padding:10vh 0 2vh;text-align:center;overflow:hidden}
.cs-close-logo h2{font-size:clamp(30px,6vw,92px);font-weight:400;letter-spacing:-.02em;line-height:1}

/* hero bottom: scroll to explore — reuses the standard .cta pill (see
   "CTA pill with dot-expand hover" above) so it matches every other
   button on the site instead of having its own one-off style */
#hero-scroll{position:relative;height:max(var(--pad-y),74px);margin:0 0;display:flex;align-items:center;justify-content:center}

/* ---- REEL (Bold Ideas + play reel card) ---- */
#reel{padding-top:12vh}
.big-title{
  font-size:clamp(32px,5.4vw,86px);font-weight:400;line-height:1;letter-spacing:-.02em;
}
.big-title .line{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.big-title .line>span{display:block;transform:translate3d(0,110%,0) rotate(3deg);
  transform-origin:left;transition:transform 1.1s var(--bez);will-change:transform}
.big-title.in .line>span{transform:translate3d(0,0,0) rotate(0)}
.big-title.in .line:nth-child(2)>span{transition-delay:.08s}
.big-title.in .line:nth-child(3)>span{transition-delay:.16s}
#reel .indent{padding-left:16vw}
@media(max-width:812px){#reel .indent{padding-left:0}}
#reel-content{display:flex;justify-content:flex-end;margin-top:7vh}
#reel-copy{max-width:34em;font-size:clamp(16px,1.5vw,26px);line-height:1.4}
.fade{opacity:0;transform:translateY(46px);transition:opacity .9s ease,transform 1s var(--bez)}
.fade.in{opacity:1;transform:none}

/* CTA pill with dot-expand hover */
.cta{
  position:relative;display:inline-flex;align-items:center;gap:1em;
  height:3.375em;padding:0 1.5em 0 1.625em;border-radius:5.3em;
  background:var(--white);color:var(--ink);overflow:hidden;
  font-size:clamp(.875rem,1vw,1.75rem);font-weight:500;text-transform:uppercase;
  box-shadow:0 6px 10px rgba(0,0,0,.04),0 2px 4px rgba(0,0,0,.04);
  transition:background .2s var(--bez-soft),color .5s;cursor:pointer;white-space:nowrap;
}
.cta .c-dot{position:relative;width:.5em;height:.5em;border-radius:100px;background:var(--ink);
  z-index:1;transition:background .5s var(--bez-soft),transform .4s var(--bez-soft)}
.cta .c-text{position:relative;z-index:1;transition:transform .4s var(--bez-soft),color .5s}
.cta .c-arrow{position:absolute;right:1em;width:1.2em;height:1.2em;z-index:1;
  transform:translateX(3em);transition:transform .4s var(--bez-soft)}
.cta .c-arrow svg{width:100%;height:100%;display:block}
.cta:hover{background:var(--blue);color:var(--white);transition:background .5s var(--bez-soft) .3s}
.cta:hover .c-dot{transform:translateX(3em) scale(24);background:var(--blue)}
.cta:hover .c-text{transform:translateX(-1.5em)}
.cta:hover .c-arrow{transform:translateX(0)}

/* dark pill variant — for use over light backgrounds (e.g. the new
   light-toned hero photo) where the default white-on-white pill would
   have no contrast */
.cta.cta-dark{background:var(--ink);color:var(--white)}
.cta.cta-dark .c-dot{background:var(--white)}
.cta.cta-dark:hover{background:var(--blue);color:var(--white)}
.cta.cta-dark:hover .c-dot{background:var(--blue)}

/* ==================== DESIGN SYSTEM — reusable accents ====================
   A small set of effects inspired by the "React Bits" references the client
   shared (gradient text, glare-on-hover, a soft glow on primary buttons, an
   aurora backdrop) — ported to plain CSS since this site is vanilla HTML/CSS/
   JS rather than React. Applied selectively to a few key spots rather than
   everywhere, so they read as an intentional accent, not noise. */

/* Gradient text — slow two-tone sweep using the site's own blue/lime pair */
.grad-text{
  background:linear-gradient(100deg,var(--ink) 0%,var(--blue) 35%,var(--green) 60%,var(--blue) 85%);
  background-size:280% auto;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:grad-sweep 9s ease-in-out infinite;
}
@keyframes grad-sweep{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

/* Glare hover — a soft diagonal shine sweeps across a card on hover/focus.
   Only applied to cards with no elements that poke outside their own box
   (pricing cards + project tiles have protruding badges/arrows, so they
   keep their existing hover treatment instead). */
.blog-card,.svc-feat-card,.pillar-card{position:relative;overflow:hidden}
.blog-card::after,.service-row::after,.svc-feat-card::after,.pillar-card::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.45) 49%,rgba(255,255,255,.45) 53%,transparent 68%);
  transform:translateX(-130%);transition:transform .85s var(--bez-soft);
}
.blog-card:hover::after,.service-row:hover::after,
.svc-feat-card:hover::after,.pillar-card:hover::after{transform:translateX(130%)}
.pillars-dark .pillar-card::after{background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.16) 49%,rgba(255,255,255,.16) 53%,transparent 68%)}

/* Glow — a soft colored bloom on primary CTAs when hovered/focused */
.cta:hover,.cta:focus-visible,.pkg-cta:hover,.pkg-cta:focus-visible{
  box-shadow:0 0 0 1px rgba(26,47,251,.3),0 10px 34px -8px rgba(26,47,251,.55);
}

/* Specular button — a bright diagonal highlight sweeps across the pill
   once on hover/focus, like light catching a polished surface */
.pkg-cta{position:relative;overflow:hidden}
.cta::before,.pkg-cta::before{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.85) 50%,transparent 58%);
  transform:translateX(-160%);transition:transform .65s var(--bez-soft);
}
.cta:hover::before,.cta:focus-visible::before,
.pkg-cta:hover::before,.pkg-cta:focus-visible::before{transform:translateX(160%)}
.pkg-card.featured .pkg-cta::before{background:linear-gradient(115deg,transparent 42%,rgba(11,11,16,.35) 50%,transparent 58%)}

/* Side rays — soft rotating light beams from a corner, for otherwise-plain
   light sections. z-index:-1 (not 0) keeps it reliably behind all content,
   including non-positioned children — see the aurora-bg note above. */
.side-rays-bg{position:relative;isolation:isolate}
.side-rays-bg::before{
  content:"";position:absolute;top:-25%;right:-20%;width:75%;height:75%;
  z-index:-1;pointer-events:none;transform-origin:100% 0%;
  background:conic-gradient(from 200deg at 100% 0%,rgba(26,47,251,.14),transparent 22%,transparent 78%,rgba(193,255,0,.1));
  filter:blur(50px);animation:rays-rotate 34s linear infinite;
}
@keyframes rays-rotate{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}

/* Strands — faint drifting diagonal threads, a quiet section watermark
   rather than a focal element. */
.strands-bg{position:relative;isolation:isolate}
.strands-bg::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.6;
  background-image:
    repeating-linear-gradient(115deg,rgba(26,47,251,.07) 0,rgba(26,47,251,.07) 1px,transparent 1px,transparent 90px),
    repeating-linear-gradient(65deg,rgba(193,255,0,.05) 0,rgba(193,255,0,.05) 1px,transparent 1px,transparent 130px);
  background-size:220% 220%;animation:strands-drift 24s linear infinite;
}
@keyframes strands-drift{0%{background-position:0% 0%,0% 0%}100%{background-position:220px 320px,-260px 240px}}

/* Laser flow — a bright pulse of light travels along a thin divider line;
   used as a decorative seam between two homepage sections. */
.laser-line{position:relative;height:2px;overflow:hidden;background:rgba(11,11,16,.08);
  border-radius:2px;margin:0 auto;max-width:1400px}
.laser-line::after{
  content:"";position:absolute;top:0;left:-30%;width:30%;height:100%;
  background:linear-gradient(90deg,transparent,var(--blue) 40%,var(--green) 55%,var(--blue) 70%,transparent);
  animation:laser-sweep 4.5s ease-in-out infinite;
}
@keyframes laser-sweep{0%{left:-30%}60%{left:100%}100%{left:100%}}

/* Rotating badge — an "option-wheel"-style circular rotating seal (SVG
   textPath ring + still center mark), used as a trust/credential accent
   rather than replacing any real form control. */
.rotate-badge{position:relative;width:5.5em;height:5.5em;flex-shrink:0}
.rotate-badge svg{width:100%;height:100%;display:block}
.rotate-badge .rb-ring{animation:rb-spin 16s linear infinite;transform-origin:50% 50%}
.rotate-badge .rb-center{fill:var(--blue)}
@keyframes rb-spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}

/* Aurora — soft moving colour blobs behind a dark section, used sparingly.
   z-index:-1 (rather than 0) so it reliably sits behind ALL of the host's
   content — including plain non-positioned children — without needing to
   raise every child's own stacking. isolation:isolate keeps that negative
   z-index scoped to this element instead of escaping to the page below it. */
.aurora-bg,#testimonials{position:relative;isolation:isolate}
.aurora-bg::before,#testimonials::before{
  content:"";position:absolute;inset:-15% -8%;z-index:-1;pointer-events:none;
  background:
    radial-gradient(38% 50% at 16% 20%,rgba(26,47,251,.55),transparent 70%),
    radial-gradient(32% 44% at 84% 26%,rgba(193,255,0,.22),transparent 70%),
    radial-gradient(42% 50% at 55% 92%,rgba(26,47,251,.35),transparent 70%);
  filter:blur(60px);animation:aurora-drift 16s ease-in-out infinite alternate;
}
@keyframes aurora-drift{0%{transform:translate3d(0,0,0) scale(1)}100%{transform:translate3d(2%,-3%,0) scale(1.08)}}

/* scroll-to-explore pill — white pill, bold black label, a small
   down-chevron flanking each side (bouncing gently to cue scrolling) */
.scroll-pill{
  position:relative;display:inline-flex;align-items:center;gap:1em;
  height:3.375em;padding:0 1.7em;border-radius:5.3em;border:none;
  background:var(--white);color:var(--ink);cursor:pointer;white-space:nowrap;
  font-size:clamp(.75rem,.9vw,1rem);font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  box-shadow:0 6px 10px rgba(0,0,0,.06),0 2px 4px rgba(0,0,0,.04);
  transition:box-shadow .3s ease,transform .3s ease;
}
.scroll-pill:hover{box-shadow:0 10px 20px rgba(0,0,0,.1),0 3px 6px rgba(0,0,0,.06);transform:translateY(-1px)}
.scroll-pill .sp-arrow{width:.85em;height:.85em;flex-shrink:0;display:flex}
.scroll-pill .sp-arrow svg{width:100%;height:100%;display:block}

#reel-cta-row{display:flex;justify-content:flex-end;margin-top:3em;padding-right:min(10vw,180px)}

/* reel video card + scrolling strip decorations */
#reel-card-wrap{position:relative;margin-top:10vh}
.reel-strip{position:relative;height:var(--cross);overflow:hidden;margin:.6em 0}
.reel-strip-inner{position:absolute;display:flex;white-space:nowrap;will-change:transform;
  font-size:calc(var(--cross)*.86);font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  line-height:var(--cross);
}
.reel-strip-inner span{padding-right:3em}
.reel-strip-inner span i{font-style:normal;letter-spacing:.35em;opacity:.9}
.strip-crosses{position:absolute;inset:0;pointer-events:none}
.strip-crosses .cross:nth-child(1){left:0}
.strip-crosses .cross:nth-child(2){left:calc(25% - var(--cross)/2)}
.strip-crosses .cross:nth-child(3){left:calc(50% - var(--cross)/2)}
.strip-crosses .cross:nth-child(4){left:calc(75% - var(--cross)/2)}
.strip-crosses .cross:nth-child(5){left:calc(100% - var(--cross))}
#reel-card{
  position:relative;height:78vh;min-height:420px;background:#0e0e16;
  border-radius:var(--radius);overflow:hidden;
}
#reel-card-title{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  color:var(--white);font-size:clamp(26px,4.4vw,72px);text-transform:uppercase;
  letter-spacing:.02em;white-space:nowrap;display:flex;gap:.35em;
}
#play-btn{
  position:absolute;left:calc(50% - 4.7em);top:calc(50% - 3em);width:9.4em;height:6em;
  border-radius:22.5em;overflow:hidden;display:flex;align-items:center;justify-content:center;
  font-size:clamp(10px,1vw,18px);
}
#play-btn .pb-base{position:absolute;inset:0;border-radius:22.5em;background:var(--white);
  transition:background .3s var(--bez)}
#play-btn .pb-fill{position:absolute;inset:0;background:var(--blue);
  transform:scale3d(1,0,1);transform-origin:bottom;transition:transform .4s var(--bez)}
#play-btn svg{position:relative;z-index:1;width:2em;height:2em;color:var(--ink);
  transition:color .3s var(--bez)}
#play-btn:hover .pb-fill{transform:scale3d(1,1,1)}
#play-btn:hover .pb-base{background:var(--blue);transition:background .1s .3s var(--bez)}
#play-btn:hover svg{color:var(--white)}

/* ---- RIBBON layers ---- */
.ribbon-wrap{position:absolute;inset:0;overflow:visible;pointer-events:none}
.ribbon-wrap svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.ribbon{fill:none;stroke-linecap:round;will-change:stroke-dashoffset}
.ribbon.blue{stroke:var(--blue)}
.ribbon.teal{stroke:#39c7de}
@media(max-width:812px){
  /* on a narrow, short section the "cover"/slice fit (needed to stop the
     stretch-distortion, see xMidYMid slice on the <svg> itself) still fills
     the entire box edge-to-edge — which makes the curve read as a big
     dominant shape instead of a subtle accent. Scale it down and anchor
     the shrink to the corner the path actually starts from (top-right, see
     the "M1500 100" starts below) so it looks like the ribbon is sweeping
     in from that corner rather than filling the whole card. getTotalLength()
     used for the scroll-draw animation is measured in the path's own local
     units, so this transform doesn't throw that math off. */
  .ribbon-wrap svg{transform:scale(.62);transform-origin:100% 0%}
}
.z-front{position:relative;z-index:2}

/* ---- FEATURED WORK ---- */
#work{padding-top:14vh}
#work-head{position:relative}
#work-disclaimer{
  position:absolute;right:0;bottom:.5em;width:min(340px,60vw);
  font-size:clamp(10px,.9vw,16px);text-transform:uppercase;line-height:1.5;
}
.project-list{display:grid;grid-template-columns:1fr 1fr;gap:2vw;margin-top:8vh}
/* mobile: stacks to a single column, so the 2vw column-gap (a few px on a
   360-430px screen) was the ONLY space between cards — the nth-child(n+3)
   row-gap compensation below is zeroed out for the same reason, but nothing
   replaced it, leaving stacked project cards almost touching. */
@media(max-width:812px){.project-list{grid-template-columns:1fr;gap:3.2em;margin-top:6vh}}
.project-item{position:relative;cursor:pointer}
.project-item:nth-child(n+3){margin-top:5em}
@media(max-width:812px){.project-item:nth-child(n+3){margin-top:0}}
.pi-main{position:relative;padding-top:65%;border-radius:15px;overflow:hidden}
/* zoom-in reveal: image starts slightly scaled up and settles to normal
   size as the card scrolls into view — works on touch devices too, not
   just on hover (hover then adds its own smaller extra zoom on top) */
.pi-img{position:absolute;inset:0;transform:scale(1.18);transition:transform 1.1s var(--bez-soft)}
.project-item.in .pi-img{transform:scale(1)}
.project-item:hover .pi-img{transform:scale(1.04)}
.pi-line1{font-size:clamp(10px,.9vw,15px);text-transform:uppercase;margin:1.5em 0 .8em;opacity:.85}
.pi-line2{position:relative;font-size:clamp(22px,3vw,52px);overflow:hidden}
.pi-line2-inner{display:inline-block;transition:transform .45s var(--bez)}
.pi-arrow{position:absolute;left:-1.1em;top:.12em;width:.8em;height:.8em;
  transition:transform .45s var(--bez)}
.pi-arrow svg{width:100%;height:100%;display:block}
.project-item:hover .pi-line2-inner{transform:translateX(1.2em)}
.project-item:hover .pi-arrow{transform:translateX(1.2em)}
.pi-line2-wrap{display:inline-block;position:relative;padding-left:0}
#work-cta-row{display:flex;justify-content:center;margin-top:12vh}

/* ---- SECTION SUBTITLE + squiggle underline reveal ---- */
.section-subtitle{
  position:relative;display:inline-block;font-size:clamp(13px,1.05vw,17px);font-weight:500;
  color:var(--ink);padding-bottom:12px;text-transform:uppercase;letter-spacing:.1em;
}
.section-subtitle.light{color:var(--white)}
.squiggle-svg{position:absolute;left:0;bottom:0;width:100%!important;height:7px;overflow:visible}
.squiggle-path{stroke-dasharray:196px;stroke-dashoffset:196px}
.squiggle.in .squiggle-path{animation:squiggle-draw 1.2s var(--bez) .1s forwards}
@keyframes squiggle-draw{
  0%{stroke-dashoffset:196px}
  100%{stroke-dashoffset:0}
}

/* ---- TESTIMONIALS (dark, pinned/staggered scroll) ---- */
#testimonials{
  background:var(--ink);color:var(--white);border-radius:var(--radius);
  margin-top:8vh;padding:12vh var(--pad-x) 8vh;overflow:hidden;
  /* overflow:hidden is safe here — the old sticky-pinned testimonial layout
     that needed overflow:visible on this ancestor was replaced by the
     spotlight rotator, so nothing below relies on position:sticky anymore.
     Clips the aurora glow (below) neatly to the section's rounded corners. */
}
#testimonials .big-title.light{color:var(--white);margin-top:.5em}

/* ---- Testimonial spotlight (single large featured quote, rotating) ---- */
.spotlight{position:relative;max-width:44em;margin:8vh auto 0;text-align:center}
.spotlight-mark{width:2.6em;height:2.6em;margin:0 auto 1em;color:var(--blue);opacity:.9}
.spotlight-mark svg{width:100%;height:100%;display:block}
.spotlight-track{position:relative}
.spotlight-slide{
  display:none;animation:spotlight-in .5s ease both;
}
.spotlight-slide.active{display:block}
@keyframes spotlight-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.spotlight-text{font-size:clamp(20px,2.6vw,32px);line-height:1.4;font-weight:400;letter-spacing:-.01em}
.spotlight-author{margin-top:1.8em}
.spotlight-author h4{font-size:1.05rem;font-weight:600}
.spotlight-author span{display:block;margin-top:.3em;font-size:.9rem;opacity:.55}
.spotlight-dots{display:flex;justify-content:center;gap:.6em;margin-top:2.4em}
.spotlight-dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.25);transition:background .3s,transform .3s}
.spotlight-dot.active{background:var(--white);transform:scale(1.3)}
@media(max-width:600px){.spotlight{margin-top:5vh}}

.client-tagline{text-align:center;margin:4vh 0 4vh;opacity:.6;font-size:clamp(1.2rem,2vw,1.7rem);line-height:1.45}
.logo-marquee{overflow:hidden;position:relative}
.logo-marquee-track{
  display:inline-flex;align-items:center;gap:16px;white-space:nowrap;
  animation:logo-scroll 28s linear infinite;
}
.logo-pill{
  display:inline-flex;align-items:center;gap:.5em;border:1px solid rgba(255,255,255,.14);
  border-radius:50px;padding:.85em 1.7em;font-size:.9rem;font-weight:500;color:rgba(255,255,255,.6);
}
.logo-pill i{font-style:normal;opacity:.55}
@keyframes logo-scroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* ---- GOAL ---- */
#goal{padding-top:16vh;min-height:120vh}
#goal-texts{max-width:34em;font-size:clamp(15px,1.35vw,24px);line-height:1.45;
  margin-left:auto;margin-top:8vh}
#goal-texts p:not(:first-child){margin-top:1.3em}

/* frosted-glass panel behind text that sits over the ribbon animation —
   ribbon stays fully visible around/behind it, ribbon motion is untouched */
#goal .z-front,#reel .z-front{
  background:rgba(255,255,255,.5);backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border:1px solid rgba(255,255,255,.6);border-radius:var(--radius);
  padding:clamp(28px,4.5vw,64px);
  box-shadow:0 8px 40px rgba(11,11,16,.06);
}
#goal .z-front #goal-texts{color:rgba(11,11,16,.72)}
#reel .z-front #reel-copy{color:rgba(11,11,16,.72)}
@media(max-width:812px){#goal .z-front,#reel .z-front{padding:24px;backdrop-filter:blur(12px)}}

/* ---- END SECTION (Let's build a brand now) ---- */
#end{background:transparent;padding-top:10vh;padding-bottom:12vh;text-align:left}
#end-inner{position:relative}
#end-sub{text-transform:uppercase;font-size:clamp(12px,1vw,18px);letter-spacing:.02em}
#end-title{position:relative;width:fit-content;margin:.3em 0 0;line-height:1;
  font-size:clamp(28px,4.6vw,68px);cursor:pointer}
#end-title .big-title .line>span.row1{display:inline-flex;align-items:center;gap:.18em}
/* Gradient sweep on "build a brand now" only — the other line mixes text
   with the inline arrow icon, which background-clip:text handles unreliably. */
#end-title .big-title .line>span:not(.row1){
  background:linear-gradient(100deg,var(--ink) 0%,var(--blue) 35%,#7a9e00 60%,var(--ink) 85%);
  background-size:280% auto;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:grad-sweep 9s ease-in-out infinite;
}
#end-title .arrow-icon{width:.7em;height:.7em;color:var(--blue);transition:transform .5s var(--bez-soft)}
#end-title:hover .arrow-icon{transform:rotate(45deg)}
#end-title .deco{position:absolute;height:.05em;background:var(--ink);
  transform:scaleX(0);transform-origin:left;transition:transform .9s var(--bez) .5s}
#end-title.in .deco{transform:scaleX(1)}
#end-title .d1{left:.03em;bottom:-.08em;width:calc(100% - .06em)}
/* continue pill with looping arrow/text drop */
#continue-pill{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:1em;
  height:3.375em;width:16em;margin:6vh 0 0;background:var(--white);border-radius:100px;
  box-shadow:0 6px 10px rgba(0,0,0,.04),0 2px 4px rgba(0,0,0,.04);
  font-size:clamp(12px,1.1vw,19px);overflow:hidden;
}
.loop-arrow{position:relative;width:1em;height:1em;overflow:hidden}
.loop-arrow svg{position:absolute;left:0;width:1em;height:1em;
  animation:loop-drop 3s cubic-bezier(.1,0,.1,1) infinite}
.loop-arrow svg:last-child{top:-1em}
.loop-arrow.delay svg{animation-delay:.3s}
@keyframes loop-drop{0%{transform:translateY(0)}33%{transform:translateY(1em)}100%{transform:translateY(1em)}}
.loop-text{position:relative;white-space:nowrap;font-size:.75em;
  text-transform:uppercase;letter-spacing:.05em}

/* ---- FOOTER (light) ---- */
#footer{background:var(--white);border-radius:0;padding-top:10vh}
#footer-mid{display:grid;grid-template-columns:repeat(12,1fr);gap:2vw}
@media(max-width:1000px){#footer-mid{grid-template-columns:repeat(6,1fr);row-gap:4em}}
#f-contact{grid-column:1/span 6;display:grid;grid-template-columns:repeat(6,1fr);gap:2vw;
  font-size:clamp(15px,1.2vw,22px);line-height:1.4}
@media(max-width:1000px){#f-contact{grid-column:1/span 6}}
#f-address{grid-column:1/span 3}
.f-addr-item{margin-top:1em}
.f-addr-item:first-of-type{margin-top:1.4em}
#f-socials{grid-column:4/span 3}
.f-social{position:relative;display:block;width:fit-content;margin-bottom:.3em}
.f-social .fs-arrow{position:absolute;left:-1.6em;top:.15em;width:1em;height:1em;
  transform:rotate(90deg);transition:transform .4s var(--bez-soft)}
.f-social .fs-arrow svg{width:100%;height:100%;display:block}
.f-social .fs-text{display:inline-block;transition:transform .4s var(--bez-soft)}
.f-social:hover .fs-text{transform:translateX(2em)}
.f-social:hover .fs-arrow{transform:translateX(2em) rotate(45deg)}
.f-block{grid-column:1/span 3;margin-top:2.5em}
.f-block.b2{grid-column:4/span 3}
.f-label{opacity:.55;font-size:.85em;margin-bottom:.4em}
.f-mail{position:relative;display:inline-block;padding-bottom:.15em}
.f-mail::before{content:"";position:absolute;left:0;bottom:0;width:100%;height:2px;
  background:var(--ink);transform:scaleX(0);transform-origin:left;
  transition:transform .3s var(--bez-soft)}
.f-mail:hover::before{transform:scaleX(1)}
#f-news{grid-column:7/span 6}
@media(max-width:1000px){#f-news{grid-column:1/span 6}}
#f-news h3{font-size:clamp(30px,3.4vw,64px);font-weight:400;line-height:1.1}
#f-news .news-input{max-width:32em;margin-top:1.5em}
#f-news .news-input input{background:#eef0f4;height:4em;border-radius:1.1em}
#f-news .f-news-desc{margin-top:1em;max-width:26em;color:rgba(11,11,16,.6);font-size:clamp(14px,1vw,17px);line-height:1.5}
.f-logo{display:block;height:44px;width:auto;margin-bottom:1.4em}
#footer-bottom{
  position:relative;display:flex;flex-wrap:wrap;gap:1.5em;align-items:center;
  justify-content:space-between;margin-top:10vh;padding-bottom:2vh;
  font-size:clamp(12px,1vw,18px);
}
#back-top{
  position:relative;width:3.75em;height:3.75em;border-radius:50%;background:var(--black);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
#back-top svg{width:1.4em;height:1.4em;transition:transform .4s var(--bez-soft)}
#back-top svg:last-child{position:absolute;transform:translateY(3em)}
#back-top:hover svg:first-child{transform:translateY(-3em)}
#back-top:hover svg:last-child{transform:translateY(0)}

/* ---- SCROLL-NAV (dark next page) ---- */
#scroll-nav{
  background:#121416;color:var(--white);text-transform:uppercase;
  padding-top:1em;padding-bottom:2em;
}
#sn-sub{padding-top:1em;font-size:clamp(12px,1vw,18px);line-height:1.5}
#sn-main{position:relative;margin-top:1em}
#sn-title{font-size:clamp(30px,5.4vw,80px);line-height:1;padding:.4em 0;cursor:pointer;
  transition:color .3s}
#sn-title:hover{color:var(--green)}
#sn-next{position:absolute;right:0;top:50%;transform:translateY(-50%);
  display:flex;align-items:center;gap:.75em;min-width:220px;width:22%;cursor:pointer;
  font-size:clamp(12px,1vw,18px)}
@media(max-width:812px){#sn-next{position:relative;width:100%;transform:none;margin-top:1em}}
#sn-bar{flex:1;height:4px;background:#34393f;border-radius:2px;overflow:hidden}
#sn-bar-inner{width:100%;height:100%;background:var(--green);
  transform:scaleX(0);transform-origin:left;will-change:transform}
#sn-arrow{width:1.2em;height:1.2em}
#sn-arrow svg{width:100%;height:100%;display:block}
#sn-crosses{position:relative;height:1em;margin-top:2em}
#sn-crosses .cross:nth-child(1){left:0}
#sn-crosses .cross:nth-child(2){left:calc(25% - var(--cross)/2)}
#sn-crosses .cross:nth-child(3){left:calc(50% - var(--cross)/2)}
#sn-crosses .cross:nth-child(4){left:calc(75% - var(--cross)/2)}
#sn-crosses .cross:nth-child(5){left:calc(100% - var(--cross))}

/* ==================== SERVICES (wide, interactive, world-class) ==================== */
/* overflow:hidden is required here — .side-rays-bg's glow pseudo-element
   extends right:-20% past this section's own box, which without clipping
   pushes the whole page wider than the viewport (the "sections overflowing"
   / index-not-responsive bug). */
#services{padding-top:14vh;overflow:hidden}
.services-list{position:relative;margin-top:7vh;padding-left:clamp(16px,2.4vw,32px)}
#services-rail{position:absolute;left:0;top:0;width:2px;height:100%;background:rgba(11,11,16,.08);overflow:hidden}
#services-rail i{display:block;width:100%;height:0;background:var(--blue);transform-origin:top;will-change:height}

.service-row{
  position:relative;display:grid;cursor:pointer;
  grid-template-columns:1.6em minmax(0,1fr) minmax(0,22em) 3.2em;
  align-items:center;column-gap:clamp(16px,2.4vw,44px);
  padding:clamp(28px,3.6vw,50px) clamp(20px,2.6vw,36px);
  margin-bottom:14px;border-radius:var(--radius);
  border:1px solid rgba(11,11,16,.12);
  overflow:hidden;-webkit-tap-highlight-color:transparent;
}
.service-row:last-child{margin-bottom:0}
.service-row::before{
  content:"";position:absolute;left:0;right:0;top:0;bottom:0;
  background:var(--ink);transform:scaleX(0);transform-origin:left;
  transition:transform .6s var(--bez-soft);z-index:0;
}
.service-row:hover::before,.service-row.touch-open::before{transform:scaleX(1)}
.service-row>*{position:relative;z-index:1}

.sr-ghost{
  position:absolute;right:clamp(16px,2vw,32px);top:50%;transform:translateY(-50%);
  font-size:clamp(70px,9vw,150px);font-weight:700;line-height:1;letter-spacing:-.02em;
  color:var(--ink);opacity:.05;z-index:0;pointer-events:none;
  transition:opacity .5s var(--bez-soft),color .5s;
}
.service-row:hover .sr-ghost,.service-row.touch-open .sr-ghost{opacity:.12;color:var(--white)}

.sr-num{font-size:.85rem;opacity:.4;transition:color .4s,opacity .4s}
.service-row:hover .sr-num,.service-row.touch-open .sr-num{color:var(--white);opacity:.55}

.sr-title-wrap{overflow:hidden;min-width:0}
.sr-title{
  display:block;font-size:clamp(26px,3.4vw,50px);font-weight:500;letter-spacing:-.015em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink);
  transition:transform .55s var(--bez-soft),color .45s;
}
.service-row:hover .sr-title,.service-row.touch-open .sr-title{transform:translateX(.32em);color:var(--white)}

.sr-desc{font-size:.95rem;line-height:1.5;color:var(--ink);opacity:.6;min-width:0;transition:color .4s,opacity .4s}
.service-row:hover .sr-desc,.service-row.touch-open .sr-desc{color:var(--white);opacity:.75}

.sr-tags{display:flex;flex-wrap:wrap;gap:.4em;margin-top:.75em}
.sr-tag{
  display:inline-block;padding:.32em .8em;border-radius:5em;
  border:1px solid rgba(11,11,16,.18);font-size:.68rem;text-transform:uppercase;letter-spacing:.06em;
  color:var(--ink);opacity:0;transform:translateY(6px);
  transition:opacity .4s var(--bez-soft),transform .4s var(--bez-soft),color .4s,border-color .4s;
}
.service-row:hover .sr-tag,.service-row.touch-open .sr-tag{opacity:.85;transform:none;color:var(--white);border-color:rgba(255,255,255,.28)}
.service-row:hover .sr-tag:nth-child(2),.service-row.touch-open .sr-tag:nth-child(2){transition-delay:.05s}
.service-row:hover .sr-tag:nth-child(3),.service-row.touch-open .sr-tag:nth-child(3){transition-delay:.1s}

.sr-arrow{
  justify-self:end;width:2.7em;height:2.7em;border-radius:50%;
  border:1px solid rgba(11,11,16,.18);display:flex;align-items:center;justify-content:center;
  transition:transform .5s var(--bez-soft),background .4s,border-color .4s;
}
.sr-arrow svg{width:1em;height:1em;color:var(--ink);transition:transform .5s var(--bez-soft),color .4s}
.service-row:hover .sr-arrow,.service-row.touch-open .sr-arrow{background:var(--white);border-color:var(--white);transform:scale(1.1)}
.service-row:hover .sr-arrow svg,.service-row.touch-open .sr-arrow svg{transform:rotate(45deg)}

@media(max-width:812px){
  .services-list{padding-left:0}
  #services-rail{display:none}
  .service-row{grid-template-columns:1.6em 1fr auto;row-gap:.7em;padding:22px 20px}
  .sr-ghost{display:none}
  .sr-desc{grid-column:1/-1;grid-row:2;max-width:none}
  .sr-tags{grid-column:1/-1;grid-row:3}
  .sr-title{white-space:normal;font-size:clamp(23px,6vw,32px)}
}

/* ==================== RESPONSIVE — TABLET & MOBILE ==================== */

/* ---- overall type weight bump (<=700px) — Helvetica Neue at 400 reads
   thin on small mobile screens; nudge body copy and the 400-weight
   display headings up a notch for better legibility/presence. ---- */
@media(max-width:700px){
  body{font-weight:500}
  .big-title,#end-title,#f-news h3,.menu-news h3{font-weight:500}
}

/* ---- tablet (<=1024px) ---- */
@media(max-width:1024px){
  :root{--pad-y:clamp(24px,3.6vw,44px)}
  #hero-visual{min-height:58vh;padding:6vh 6vw}
  #hero-inner{max-width:70%}
  #goal{min-height:auto;padding-bottom:10vh}
  #reel-cta-row{padding-right:0;justify-content:center}
  #reel-content{justify-content:center;text-align:center}
  #reel .indent{padding-left:0}
}

/* ---- header & menu buttons (<=700px) ----
   NOTE: --pad-x is redefined here too (not just the header's own padding)
   so that .section content uses the exact same horizontal inset as the
   header — previously only the header tightened its padding on mobile,
   leaving all page content noticeably narrower/more condensed than it. */
@media(max-width:700px){
  :root{--pad-x:max(4vw,16px)}
  #header{padding:.85em max(4vw,16px)}
  #sound-btn{display:none}
  #logo{width:8.4em;height:2em}
  .logo-img{height:2em}
  /* the "Let's talk" pill next to the hamburger crowded the mobile header —
     the menu already has a "Get in touch" entry, so drop the duplicate CTA
     here and let the menu button have the header to itself. */
  .talk-btn{display:none}
}
@media(max-width:560px){
  #logo{font-size:1.2em;letter-spacing:.09em}
  #header-right{gap:.5em}
  #menu-btn{padding:0 1em 0 1.3em}
  #menu{width:min(320px,90vw)}
}

/* ==================================================================
   MOBILE MENU — "Option Wheel" (React Bits reference, ported to vanilla
   CSS/JS since this site has no build step). This is NOT a radial/circular
   fan — the real component is a vertical, edge-anchored curling list: each
   option pivots from a fixed point near one edge, options near the centre
   are large/bright/sharp, options further away shrink toward the edge,
   dim, and blur, and the whole thing is scrollable/draggable/arrow-key-able
   with eased (not linear) motion. The base rules here are the CSS half —
   layout of every option each frame is computed in main.js and written to
   --ow-p plus an inline transform/opacity/filter, exactly mirroring the
   reference component's own runFrame loop. ================================================== */
@media(max-width:700px){
  #menu{inset:0;right:auto;top:auto;width:100%;height:100%}
  /* strong frosted-glass backdrop — light and blurred rather than a flat
     dark tint, matching the airier look used elsewhere on the site */
  #menu-backdrop{
    width:100%;background:rgba(255,255,255,.72);
    backdrop-filter:blur(26px) saturate(160%);-webkit-backdrop-filter:blur(26px) saturate(160%);
  }
  .menu-news{display:none}

  .menu-links{
    --ow-text-color:rgba(11,11,16,.34);
    --ow-active-color:#0b0b10;
    --ow-inset:9vw;
    position:absolute;inset:0;padding:0;
    overflow:hidden;cursor:grab;user-select:none;touch-action:none;outline:none;
    -webkit-mask-image:linear-gradient(to bottom,transparent,#000 20%,#000 80%,transparent);
    mask-image:linear-gradient(to bottom,transparent,#000 20%,#000 80%,transparent);
  }
  .menu-links.ow-dragging{cursor:grabbing}

  /* each option is centred vertically, pivoted from the left edge (--ow-inset
     in from the container's own left edge) — main.js drives the actual
     per-frame transform/opacity/filter/--ow-p, this just sets the anchor,
     type, and the colour blend from resting to active tone */
  .menu-links .m-link{
    position:absolute;top:50%;left:var(--ow-inset);width:auto;
    padding:0;background:none;box-shadow:none;text-align:left;
    transform-origin:left center;will-change:transform,opacity,filter;
    color:var(--ow-text-color);
    color:color-mix(in srgb,var(--ow-active-color) calc(var(--ow-p,0)*100%),var(--ow-text-color));
  }
  .menu-links .m-link .lk-bg,.menu-links .m-link .lk-arrow{display:none}
  .menu-links .m-link .lk-inner{overflow:visible}
  .menu-links .m-link .lk-c{display:none}
  .menu-links .m-link .lk-t{
    display:block;font-size:1.85rem;font-weight:500;letter-spacing:.01em;transform:none!important;
  }
  /* the currently-open PAGE (not just whichever option the wheel is resting
     on) always stays fully sharp/bright plus a small dot, so "where am I"
     doesn't get lost once that item scrolls away from the centre */
  .menu-links .m-link.active{opacity:1!important;filter:none!important;color:var(--ow-active-color)!important}
  .menu-links .m-link.active .lk-t{font-weight:700}
  .menu-links .m-link::before{
    content:"";position:absolute;left:-.85em;top:50%;transform:translateY(-50%) scale(0);
    width:.4em;height:.4em;border-radius:50%;background:var(--blue);
    transition:transform .3s var(--bez);
  }
  .menu-links .m-link.active::before{transform:translateY(-50%) scale(1)}

  /* "Get in touch" — a pinned bar under the wheel rather than one of its
     scrolling options, since it's an action, not a destination page. The
     "Lucy" icon is 3 horizontal bars — reads as a second hamburger/menu
     icon sitting right next to the real one, so it's hidden here; the
     arrow stays as the CTA affordance. */
  #menu .menu-card.menu-labs{
    position:absolute;left:50%;bottom:7vh;z-index:3;width:auto;
    padding:1em 1.7em;border-radius:50px;transform:translateX(-50%) scale(.85);
  }
  #menu.open .menu-card.menu-labs{transform:translateX(-50%) scale(1);transition-delay:.1s}
  .menu-labs .labs-lucy{display:none}
  .menu-labs .labs-texts{font-size:.85rem;text-transform:uppercase;letter-spacing:.03em}
}

/* ---- hero banner & about intro (<=700px) ----
   the photo keeps covering the whole card, but the dark wash flips to a
   top-to-bottom gradient (image visible up top, white text sits on solid
   dark ground at the bottom) and the text block goes full-width, stacked */
@media(max-width:700px){
  #hero-visual{
    min-height:78vh;padding:0 6vw 5vh;
    background:
      linear-gradient(0deg,rgba(4,10,26,.92) 0%,rgba(4,10,26,.78) 32%,rgba(4,10,26,.2) 58%,rgba(4,10,26,0) 72%),
      url("../imgs/hero/hero-frost.jpg") center/cover no-repeat;
  }
  #hero-inner{max-width:100%}
  #hero-title{font-size:clamp(30px,10vw,44px);max-width:none}
  #hero-cta-row{flex-direction:column;align-items:flex-start;gap:1.2em}
  #hero-divider{display:none}
  #hero-desc{max-width:none}
  #about-intro{min-height:60vh;padding-top:14vh}
}

/* ---- featured work disclaimer stacks under heading (<=812px) ---- */
@media(max-width:812px){
  #work-head{display:flex;flex-direction:column}
  #work-disclaimer{position:static;width:100%;margin-top:1.2em;text-align:left}
}

/* ---- footer contact block stacks (<=600px) ---- */
@media(max-width:600px){
  #f-contact{grid-template-columns:1fr;row-gap:2.2em}
  #f-address,#f-socials{grid-column:1/-1}
  .f-block,.f-block.b2{grid-column:1/-1;margin-top:1.4em}
  #footer-bottom{gap:1em}
  /* the arrow icon sits at left:-1.6em relative to the text (a hover-out
     decoration) — fine on desktop where #f-socials has room to its left,
     but once it goes full-width on mobile that negative offset pushes the
     arrow outside the section's own left padding, throwing off alignment
     against everything else. Reserve the space instead of overflowing it. */
  .f-social{padding-left:1.6em}
  .f-social .fs-arrow{left:0}
}

/* ==================================================================
   AUDIT CTA BAND
   ================================================================== */
#audit-band{
  background:var(--ink);color:var(--white);border-radius:var(--radius);
  padding:clamp(32px,6vw,72px);margin:6vh var(--pad-x, 0);text-align:center;
}
#audit-band .big-title{color:var(--white);font-size:clamp(30px,4.2vw,58px)}
#audit-band p{max-width:34em;margin:1em auto 0;opacity:.72;font-size:clamp(14px,1.1vw,18px)}
.audit-form{
  display:flex;gap:.6em;max-width:34em;margin:2em auto 0;flex-wrap:wrap;justify-content:center;
}
.audit-form input{
  flex:1;min-width:220px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);
  border-radius:50px;padding:.9em 1.4em;color:var(--white);font-size:.95rem;
}
.audit-form input::placeholder{color:rgba(255,255,255,.45)}
.audit-form button{
  background:var(--blue);color:var(--white);border-radius:50px;padding:.9em 1.8em;
  font-size:.95rem;font-weight:600;white-space:nowrap;transition:opacity .25s;
}
.audit-form button:hover{opacity:.85}
.audit-status{margin-top:1em;font-size:.9rem;opacity:.8}

/* ==================================================================
   PROCESS — "How We Work" (dark timeline strip + connected light cards)
   ================================================================== */
/* Two zones, one section (so both share the same padding/columns and stay
   perfectly aligned): a dark rounded "hero" strip with the heading and a
   4-node icon timeline, and a light card row underneath it, each card
   visually hanging off its node above via a short dotted connector. */
#process{padding-top:var(--pad-y);padding-bottom:0}
.process-hero{
  background:var(--ink);color:var(--white);border-radius:var(--radius);
  padding:8vh var(--pad-x) 11vh;text-align:center;position:relative;isolation:isolate;overflow:hidden;
}
.process-hero .section-subtitle{display:inline-block}
.process-hero .big-title{color:var(--white);justify-content:center}
.process-hero .big-title .line{justify-content:center}
.process-sub{max-width:34em;margin:1.6em auto 0;font-size:clamp(14px,1.1vw,18px);line-height:1.6;opacity:.72}
/* "growth" gradient — a light-on-dark variant of .grad-text (which assumes
   an ink base, wrong for a dark section), reusing the featured-package
   price's own white->blue->green->white recipe */
.process-hero .grad-text-light{
  background:linear-gradient(100deg,var(--white) 0%,#7fa8ff 35%,var(--green) 60%,var(--white) 85%);
  background-size:280% auto;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:grad-sweep 9s ease-in-out infinite;
}

.process-timeline{
  position:relative;display:grid;grid-template-columns:repeat(4,1fr);
  margin-top:8vh;max-width:52em;margin-left:auto;margin-right:auto;
}
.pt-rail{position:absolute;left:12.5%;right:12.5%;top:2.35em;height:2px;background:rgba(255,255,255,.16);overflow:hidden}
.pt-rail i{display:block;height:100%;width:0%;background:linear-gradient(90deg,var(--blue),var(--green));transition:width 1.4s var(--bez-soft) .1s}
.process-timeline.in .pt-rail i{width:100%}
.pt-node{position:relative;display:flex;flex-direction:column;align-items:center;gap:.9em}
.pt-num{font-size:.85rem;font-weight:600;letter-spacing:.04em;color:var(--blue)}
.pt-icon{
  position:relative;z-index:1;width:3.4em;height:3.4em;border-radius:50%;
  background:var(--ink);border:2px solid rgba(255,255,255,.22);
  display:flex;align-items:center;justify-content:center;
  transition:border-color .4s var(--bez),transform .4s var(--bez),box-shadow .4s var(--bez);
}
.pt-icon svg{width:1.3em;height:1.3em;color:var(--white)}
.pt-node:nth-child(2).in .pt-icon{transition-delay:.12s}
.pt-node:nth-child(3).in .pt-icon{transition-delay:.24s}
.pt-node:nth-child(4).in .pt-icon{transition-delay:.36s}
.pt-node.in .pt-icon{border-color:var(--blue);transform:scale(1.08);box-shadow:0 0 0 6px rgba(0,89,227,.16)}

.process-cards-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:2vw;
  padding:0 var(--pad-x);margin-top:4.5em;
}
.process-card{
  position:relative;padding:clamp(24px,2.4vw,34px) clamp(20px,2vw,28px) clamp(28px,2.6vw,36px);
  border-radius:var(--radius);background:var(--off-white);border:1px solid rgba(11,11,16,.08);
}
.pc-connector{
  position:absolute;left:50%;top:-3.4em;width:0;height:3.4em;
  border-left:2px dotted rgba(11,11,16,.28);transform:translateX(-50%);
}
.pc-connector::after{
  content:"";position:absolute;left:50%;bottom:0;width:.4em;height:.4em;border-radius:50%;
  background:var(--blue);transform:translate(-50%,50%);
}
.pc-num{display:none}
.pc-icon{
  width:2.7em;height:2.7em;border-radius:50%;background:rgba(0,89,227,.1);
  display:flex;align-items:center;justify-content:center;margin-bottom:1em;
}
.pc-icon svg{width:1.2em;height:1.2em;color:var(--blue)}
.process-card h4{font-size:1.15rem;font-weight:600}
.pc-underline{display:block;width:2em;height:2px;background:var(--blue);margin:.7em 0 1em}
.process-card p{font-size:.92rem;line-height:1.55;opacity:.68}

/* below 900px the cards wrap to 2x2 (then 1-up), which no longer lines up
   column-for-column with the 4-across timeline — rather than draw
   connectors that point at the wrong card, they're hidden from here down */
@media(max-width:900px){
  .process-timeline{grid-template-columns:repeat(4,1fr);max-width:34em}
  .pt-rail{left:8%;right:8%}
  .process-cards-grid{grid-template-columns:1fr 1fr;row-gap:3.2em;column-gap:6vw;margin-top:5em}
  .pc-connector{display:none}
}
@media(max-width:600px){
  /* the icon-timeline row just repeats the same 4 icons the cards below
     already show — on a narrow screen that reads as cluttered/duplicated
     rather than as one clear process, so it's dropped here in favour of a
     single, minimal stepped list: each card gets its own number badge and
     a continuous connecting line runs down the left edge of the stack. */
  .process-hero{padding:6vh var(--pad-x) 5.5vh}
  .process-sub{margin-top:1.1em}
  .process-timeline{display:none}
  .process-cards-grid{grid-template-columns:1fr;row-gap:0;padding:0 var(--pad-x);margin-top:3.4em}
  .process-card{
    padding:0 0 2.6em 3.6em;border-radius:0;background:none;border:none;
  }
  .process-card:last-child{padding-bottom:0}
  .pc-connector{
    display:block;left:1.15em;top:0;bottom:-2.6em;height:auto;width:0;
    transform:none;border-left:2px dotted rgba(11,11,16,.28);
  }
  .process-card:last-child .pc-connector{bottom:50%}
  .pc-connector::after{content:none}
  .pc-num{
    display:flex;position:absolute;left:0;top:0;width:2.3em;height:2.3em;
    border-radius:50%;align-items:center;justify-content:center;
    background:var(--off-white);border:2px solid var(--blue);color:var(--blue);
    font-size:.8rem;font-weight:600;letter-spacing:.02em;z-index:1;
  }
  .pc-icon{display:none}
  .process-card h4{margin-top:.1em}
}

/* ==================================================================
   TECH STRIP ("Technologies we build with")
   ================================================================== */
#tech-strip{margin-top:8vh;text-align:center}
#tech-strip .ts-label{font-size:.85rem;text-transform:uppercase;letter-spacing:.1em;opacity:.5}
.tech-marquee{
  overflow:hidden;position:relative;margin-top:2.2em;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.tech-marquee-track{display:inline-flex;align-items:center;gap:1.1em;animation:tech-scroll 32s linear infinite}
.tech-marquee:hover .tech-marquee-track{animation-play-state:paused}
.tech-card{
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  width:118px;height:88px;border:1px solid rgba(11,11,16,.12);border-radius:16px;
  color:rgba(11,11,16,.68);
}
.tech-ico{width:2.1em;height:2.1em}
@keyframes tech-scroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
@media(max-width:600px){.tech-card{width:92px;height:70px}.tech-ico{width:1.8em;height:1.8em}}

/* ==================================================================
   PRICING PACKAGES
   ================================================================== */
.pkg-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6vw;margin-top:6vh}
@media(max-width:960px){.pkg-grid{grid-template-columns:1fr;gap:1.4em}}
.pkg-card{
  border:1px solid rgba(11,11,16,.12);border-radius:var(--radius);
  padding:clamp(24px,2.4vw,40px);position:relative;
}
.pkg-card.featured{background:var(--ink);color:var(--white);border-color:var(--ink)}
.pkg-card.featured .pkg-price small,.pkg-card.featured .pkg-desc{color:rgba(255,255,255,.65)}
.pkg-card.featured .pkg-feat li{color:rgba(255,255,255,.85)}
.pkg-badge{
  position:absolute;top:-.9em;left:clamp(24px,2.4vw,40px);background:var(--blue);color:var(--white);
  font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  padding:.4em 1em;border-radius:50px;
}
.pkg-name{font-size:1.3rem;font-weight:600}
.pkg-price{margin-top:.5em;font-size:2rem;font-weight:600}
.pkg-card.featured .pkg-price{
  background:linear-gradient(100deg,var(--white) 0%,#7fa8ff 35%,var(--green) 60%,var(--white) 85%);
  background-size:280% auto;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:grad-sweep 9s ease-in-out infinite;display:inline-block;
}
.pkg-card.featured .pkg-price small{-webkit-background-clip:initial;background-clip:initial;color:rgba(255,255,255,.65)}
.pkg-price small{font-size:.9rem;font-weight:500;opacity:.55}
.pkg-desc{margin-top:.6em;font-size:.9rem;opacity:.65;line-height:1.4}
.pkg-feat{margin-top:1.6em;display:flex;flex-direction:column;gap:.7em}
.pkg-feat li{font-size:.9rem;display:flex;gap:.6em;align-items:flex-start}
.pkg-feat li::before{content:"✓";color:var(--blue);font-weight:700;flex-shrink:0}
.pkg-card.featured .pkg-feat li::before{color:#5eb8ff}
.pkg-cta{
  display:inline-block;margin-top:2em;width:100%;text-align:center;padding:.9em 0;
  border-radius:50px;font-weight:600;font-size:.95rem;background:var(--blue);color:var(--white);
  transition:transform .28s var(--bez-soft),box-shadow .28s var(--bez-soft),background .28s;
}
/* was opacity:.85 on hover — combined with the specular sweep (::before)
   and the glow box-shadow (both defined further down), dimming the whole
   button on top of those two effects made the hover feel muddy/"ugly".
   A clean lift + slightly deeper shade reads as one intentional effect
   instead of three fighting each other. */
.pkg-cta:hover{transform:translateY(-3px);background:#0048b8}
.pkg-card.featured .pkg-cta{background:var(--white);color:var(--ink)}
.pkg-card.featured .pkg-cta:hover{background:var(--white);transform:translateY(-3px)}

/* ==================================================================
   FAQ ACCORDION
   ================================================================== */
.faq-list{max-width:44em;margin:6vh auto 0}
.faq-item{border-bottom:1px solid rgba(11,11,16,.12)}
.faq-q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:1em;
  padding:1.5em 0;text-align:left;font-size:clamp(16px,1.4vw,20px);font-weight:500;
}
.faq-icon{width:20px;height:20px;flex-shrink:0;transition:transform .35s var(--bez)}
.faq-icon svg{width:100%;height:100%;display:block}
.faq-item.open .faq-icon{transform:rotate(135deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .4s var(--bez)}
.faq-a p{padding-bottom:1.6em;max-width:38em;font-size:.98rem;line-height:1.6;opacity:.72}

/* ==================================================================
   WHATSAPP FLOATING BUTTON
   ================================================================== */
#wa-float{
  position:fixed;right:24px;bottom:24px;width:58px;height:58px;border-radius:50%;
  background:#25D366;color:#fff;display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 24px rgba(0,0,0,.22);z-index:500;transition:transform .25s var(--bez);
}
#wa-float:hover{transform:scale(1.08)}
#wa-float svg{width:30px;height:30px}
@media(max-width:600px){#wa-float{right:16px;bottom:16px;width:50px;height:50px}#wa-float svg{width:26px;height:26px}}

/* ==================================================================
   INDIVIDUAL SERVICE PAGES
   ================================================================== */
.svc-hero{
  position:relative;border-radius:var(--radius);overflow:hidden;padding:clamp(36px,6vw,80px);
  color:var(--white);min-height:46vh;display:flex;flex-direction:column;justify-content:flex-end;
  margin-top:clamp(72px,12vh,130px);
}
.svc-hero h1{font-size:clamp(28px,4.4vw,60px);font-weight:500;line-height:1.05;letter-spacing:-.02em}
.svc-hero p{max-width:32em;margin-top:1em;font-size:clamp(14px,1.15vw,19px);opacity:.82;line-height:1.5}
.svc-hero-tags{display:flex;flex-wrap:wrap;gap:.6em;margin-top:1.6em}
.svc-hero-tags span{
  border:1px solid rgba(255,255,255,.35);border-radius:50px;padding:.5em 1.2em;font-size:.82rem;font-weight:500;
}
.svc-hero-cta{display:flex;gap:.8em;margin-top:2em;flex-wrap:wrap}
.svc-hero-cta a{
  padding:.9em 1.7em;border-radius:50px;font-weight:600;font-size:.92rem;transition:opacity .25s;
}
.svc-hero-cta a.primary{background:var(--white);color:var(--ink)}
.svc-hero-cta a.ghost{border:1px solid rgba(255,255,255,.5);color:var(--white)}
.svc-hero-cta a:hover{opacity:.82}

.svc-price-row{
  display:flex;align-items:baseline;gap:.6em;margin-top:6vh;padding-bottom:1.4em;
  border-bottom:1px solid rgba(11,11,16,.12);
}
.svc-price-row .svc-price{font-size:clamp(28px,3vw,44px);font-weight:600}
.svc-price-row .svc-price.grad-text{animation-duration:7s}
.svc-price-row .svc-price-note{font-size:.95rem;opacity:.6}

.svc-feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6vw;margin-top:5vh}
@media(max-width:812px){.svc-feat-grid{grid-template-columns:1fr}}
.svc-feat-card{border:1px solid rgba(11,11,16,.12);border-radius:var(--radius);padding:clamp(22px,2.2vw,34px)}
.svc-feat-card .svc-feat-icon{
  width:2.6em;height:2.6em;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:1.1rem;font-weight:700;color:var(--white);margin-bottom:1em;
}
.svc-feat-card .svc-feat-icon svg{width:1.3em;height:1.3em;display:block}
.svc-feat-card h4{font-size:1.05rem;font-weight:600}
.svc-feat-card p{margin-top:.6em;font-size:.9rem;opacity:.65;line-height:1.45}

.svc-example{
  margin-top:6vh;border-radius:var(--radius);padding:clamp(28px,3.4vw,52px);background:var(--dark-white);
  display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:2em;
}
.svc-example-label{font-size:.8rem;text-transform:uppercase;letter-spacing:.1em;opacity:.5}
.svc-example h3{margin-top:.5em;font-size:clamp(20px,2vw,30px);font-weight:600}
.svc-example p{margin-top:.6em;max-width:30em;font-size:.92rem;opacity:.65;line-height:1.5}
.svc-example a.pkg-cta{width:auto;padding:.9em 1.8em;flex-shrink:0}

@media(max-width:600px){
  .svc-hero-num{display:none}
  .svc-price-row{flex-direction:column;align-items:flex-start;gap:.2em}
}

/* ---- WHAT'S INCLUDED (deliverables checklist) — gives each service page
   real, concrete substance instead of stopping at price + 3 abstract
   feature cards. ---- */
.svc-deliverables{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,380px);gap:5vw;align-items:start}
.svc-del-intro .big-title{margin-top:.6em;max-width:11em}
.svc-del-list{display:flex;flex-direction:column;gap:1.15em;margin-top:1em}
.svc-del-list li{display:flex;gap:.9em;align-items:flex-start;font-size:.98rem;line-height:1.55}
.svc-del-check{
  flex-shrink:0;width:1.4em;height:1.4em;border-radius:50%;background:var(--green);
  display:flex;align-items:center;justify-content:center;margin-top:.15em;
}
.svc-del-check svg{width:.7em;height:.7em}
@media(max-width:900px){
  .svc-deliverables{grid-template-columns:1fr}
  .svc-del-list{margin-top:2.5vh}
}

/* ==================================================================
   FOUNDER SECTION (about.html)
   ================================================================== */
.founder-wrap{display:grid;grid-template-columns:.9fr 1.4fr;gap:6vw;align-items:center}
.founder-photo{
  aspect-ratio:1/1;border-radius:var(--radius);background:var(--ink);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.founder-mark{width:34%;opacity:.9;filter:invert(1) brightness(2)}
.founder-text p{font-size:clamp(15px,1.2vw,20px);line-height:1.55;opacity:.78;max-width:34em}
.founder-text p+p{margin-top:1.3em}
.founder-text .section-subtitle{margin-bottom:1em}
@media(max-width:812px){
  .founder-wrap{grid-template-columns:1fr;gap:2.6em}
  .founder-photo{max-width:220px;margin:0 auto}
}

/* ==================================================================
   COST ESTIMATOR
   ================================================================== */
.estimator{
  display:grid;grid-template-columns:1.2fr 1fr;gap:4vw;margin-top:6vh;
  border:1px solid rgba(11,11,16,.12);border-radius:var(--radius);padding:clamp(24px,3vw,48px);
}
@media(max-width:900px){.estimator{grid-template-columns:1fr;gap:2em}}
.est-field{margin-bottom:1.6em}
.est-field label{display:block;font-size:.82rem;text-transform:uppercase;letter-spacing:.08em;opacity:.55;margin-bottom:.6em}
.est-field select{
  width:100%;padding:.9em 1.1em;border-radius:12px;border:1px solid rgba(11,11,16,.18);
  font-size:.95rem;background:var(--white,#fff);color:var(--ink);
}
.est-checks{display:flex;flex-wrap:wrap;gap:.6em}
.est-check{
  border:1px solid rgba(11,11,16,.18);border-radius:50px;padding:.55em 1.2em;font-size:.85rem;
  cursor:pointer;user-select:none;transition:background .2s,color .2s,border-color .2s;
}
.est-check input{display:none}
.est-check.on{background:var(--ink);color:var(--white);border-color:var(--ink)}
.est-result{
  border-radius:var(--radius);background:var(--ink);color:var(--white);padding:clamp(24px,2.8vw,40px);
  display:flex;flex-direction:column;justify-content:center;
}
.est-result-label{font-size:.82rem;text-transform:uppercase;letter-spacing:.08em;opacity:.6}
.est-result-price{font-size:clamp(30px,3.6vw,52px);font-weight:600;margin-top:.4em}
.est-result-note{font-size:.85rem;opacity:.65;margin-top:.6em;line-height:1.5}
.est-result .pkg-cta{margin-top:1.6em}

/* ==================================================================
   LIVE AUDIT — signature interactive element
   ================================================================== */
.la-browser{
  max-width:640px;margin:6vh auto 0;border-radius:16px;overflow:hidden;
  border:1px solid rgba(11,11,16,.14);box-shadow:0 30px 70px -30px rgba(11,11,16,.25);
  position:relative;background:var(--white,#fff);
}
.la-browser-bar{
  display:flex;align-items:center;gap:.5em;padding:.8em 1em;background:#e9e9ec;
  border-bottom:1px solid rgba(11,11,16,.08);
}
.la-dot{width:10px;height:10px;border-radius:50%;background:#d6d6da}
.la-dot:nth-child(1){background:#ff5f57}
.la-dot:nth-child(2){background:#febc2e}
.la-dot:nth-child(3){background:#28c840}
.la-url{
  margin-left:.8em;background:#fff;border-radius:8px;padding:.35em 1em;font-size:.8rem;opacity:.6;
  flex:1;max-width:16em;
}
.la-browser-body{position:relative;min-height:230px;padding:2em 1.6em}
.la-state{
  position:absolute;inset:0;padding:2em 1.6em;opacity:0;transition:opacity .6s var(--bez-soft);
  display:flex;flex-direction:column;gap:.9em;justify-content:center;
}
.la-state.la-visible{opacity:1;position:relative}
.la-row{display:flex;align-items:center;gap:.8em;font-size:.98rem;font-weight:500}
.la-badge{
  width:1.6em;height:1.6em;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:.85rem;font-weight:700;flex-shrink:0;color:#fff;
}
.la-badge.bad{background:#e5484d}
.la-badge.good{background:#28c840}
.la-tag{
  position:absolute;top:1em;right:1em;font-size:.72rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;padding:.4em 1em;border-radius:50px;background:#e5484d;color:#fff;
  transition:background .4s;
}
.la-tag.fixed{background:#28c840}
.la-caption{text-align:center;max-width:30em;margin:2em auto 0;opacity:.65;font-size:.95rem}
#live-audit{text-align:center}
#live-audit .pkg-cta{margin-top:1.6em}

/* ==================================================================
   BEFORE / AFTER DRAG SLIDER (illustrative, not a real screenshot)
   ================================================================== */
.ba-slider{
  position:relative;max-width:640px;margin:5vh auto 0;aspect-ratio:16/10;
  border-radius:var(--radius);overflow:hidden;border:1px solid rgba(11,11,16,.14);
  user-select:none;cursor:ew-resize;
}
.ba-panel{position:absolute;inset:0;padding:1.8em;display:flex;flex-direction:column;gap:.7em}
.ba-before{background:#1c1c1c;color:#8a8a8a}
.ba-after{background:#fff;color:var(--ink);overflow:hidden}
.ba-skel{height:.9em;border-radius:5px;background:currentColor;opacity:.25}
.ba-before .ba-skel.crooked{transform:rotate(-1.2deg)}
.ba-label{
  position:absolute;top:1em;font-size:.72rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;padding:.4em 1em;border-radius:50px;
}
.ba-label.ba-label-before{left:1em;background:#e5484d;color:#fff}
.ba-label.ba-label-after{right:1em;background:#28c840;color:#fff}
.ba-handle{
  position:absolute;top:0;bottom:0;width:3px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.15);
  left:50%;transform:translateX(-50%);pointer-events:none;
}
.ba-handle::after{
  content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:2.6em;height:2.6em;border-radius:50%;background:#fff;
  box-shadow:0 4px 14px rgba(0,0,0,.25);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath stroke='%230b0b10' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M8 6 2 12l6 6M16 6l6 6-6 6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center;background-size:1.2em;
}
.ba-caption{text-align:center;font-size:.85rem;opacity:.55;margin-top:1em}

/* ---- misc small-screen type tightening ---- */
@media(max-width:480px){
  .big-title{font-size:clamp(28px,9vw,46px)}
  #end-title{font-size:clamp(24px,9vw,46px)}
  #continue-pill{width:14em}
  #reel-card-title{gap:.2em}
}