/* ============================================================
   PRISM ESTATE

   MEDIA SLOTS — every place a file drops in.
   Search index.html for data-slot="…" to jump to any of them.

   data-slot        ratio   what it holds                    file
   ---------------------------------------------------------------------------
   hero-film        16:9    silent looping villa film,       media/hero-film.mp4
                            full bleed behind the headline   + -tall.mp4, .jpg, -tall.jpg
   reel-1           9:16    vertical reel, left card         media/reel-1.mp4 + .jpg
   reel-2           9:16    vertical reel, middle card       media/reel-2.mp4 + .jpg
   reel-3           9:16    vertical reel, right card        media/reel-3.mp4 + .jpg
   villa-film       16:9    the property film — YouTube,     media/villa-film.jpg (still)
                            loaded on click (data-yt)
   step-1           4:3     screenshot — WhatsApp AUDIT      media/step-1.jpg
   step-2           4:3     screenshot — the devis           media/step-2.jpg
   step-3           4:3     photo — shoot day on site        media/step-3.jpg
   step-4           4:3     screenshot — delivered files     media/step-4.jpg
   ig-proof         4:5     screenshot — Instagram profile   media/ig-proof.jpg
   stat-1..4        text    offer facts (90 s, 48 h, 72 h,   edit index.html
                            3) until client results exist

   To fill a video slot: delete the <div class="ph">…</div> and put a <video>
   in its place carrying the same data-slot (the hero is a filled example).
   .slot-video already sizes and crops it.

   LOGO — assets/prism-lockup.svg and assets/prism-mark.svg are the files;
   the page itself draws the logo from the inline sprite at the top of <body>.

   MOTION — entrances use the individual `translate` property (keyframes);
   hover and tilt use `transform`. Keep them apart and they never fight.
   ============================================================ */

:root{
  /* Prism palette — same as the carousels */
  --ink:#160A2B;
  --card:#1F0F3A;
  --deep:#2A0F4F;
  --rich:#6A2BC2;
  --rich-hi:#7B3BD8;
  --violet:#A991ED;
  --lilac:#EEC5F6;
  --white:#FFFFFF;
  --grey:#B9AFC9;
  --soft:#E6E0F0;
  --light:#F5F3FC;
  --text-dark:#160A2B;
  --muted-dark:#5F5672;
  --line:rgba(255,255,255,.09);
  --line-2:rgba(169,145,237,.32);
  --line-dark:rgba(22,10,43,.10);
  --grad:linear-gradient(100deg,#EEC5F6 0%,#A991ED 50%,#EEC5F6 100%);
  --grad-dk:linear-gradient(100deg,#8B4FE0 0%,#5B1FB0 50%,#8B4FE0 100%);

  --display:"Inter Tight","Helvetica Neue",Arial,sans-serif;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --serif:"Instrument Serif",Georgia,serif;
  --ease:cubic-bezier(.2,.7,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --gut:clamp(18px,4vw,44px);
  --g:clamp(.9rem,1.6vw,1.3rem);
  --secpad:clamp(4rem,8vw,7rem);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--ink);color:var(--white);
  font-family:var(--sans);font-size:16.5px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
  transition:opacity .18s ease;
}
html.swapping body{opacity:0}
::selection{background:var(--violet);color:var(--ink)}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
img,svg{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--violet);outline-offset:3px;border-radius:4px}

.skip{
  position:fixed;top:-3.5rem;left:1rem;z-index:200;
  background:var(--rich);color:var(--white);padding:.55rem 1rem;border-radius:999px;
  font-weight:700;font-size:.92rem;transition:top .2s ease;
}
.skip:focus-visible{top:1rem}

.wrap{max-width:1260px;margin-inline:auto;padding-inline:var(--gut)}
.wrap-narrow{max-width:900px}
.sec{position:relative;padding-block:var(--secpad);scroll-margin-top:70px}
.sec-tight{padding-block:clamp(2.8rem,5.5vw,4.5rem)}
.sec-dark{background:var(--ink);color:var(--white)}
.sec-light{background:var(--light);color:var(--text-dark)}
/* soft purple light behind a dark section */
.sec-glow{background:radial-gradient(60% 50% at 85% 40%,rgba(106,43,194,.28),transparent 70%),var(--ink)}
.sec-glow-c{background:radial-gradient(55% 40% at 50% 28%,rgba(106,43,194,.30),transparent 72%),var(--ink)}

/* scroll progress, top edge */
.progress{
  position:fixed;top:0;left:0;right:0;height:2px;z-index:120;pointer-events:none;
  background:linear-gradient(90deg,var(--rich),var(--violet),var(--lilac));
  transform-origin:0 50%;transform:scaleX(var(--p,0));
}

/* ============================================================
   TYPE — clean, heavy, tight. Sentence case.
   ============================================================ */
.h-sec{
  font-family:var(--display);font-weight:800;
  font-size:clamp(2.2rem,5vw,4.2rem);line-height:1;letter-spacing:-.03em;
  text-wrap:balance;
}
/* Inter Tight's spaces are narrow; tight tracking eats them, so give words air */
.h-sec,.hero-title,.offer-tag,.sides-close,.g-title,.h-side,.h-mid,.tier-head h3,
.step-card h3,.addon h4,.acc-btn,.switch-name,.mq-group li,.cta-copy .h-sec{word-spacing:.1em}
.h-sec > span{display:inline}
.h-sec.center{text-align:center}
.hl{
  background:var(--grad);background-size:200% 100%;
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  animation:shimmer 8s linear infinite;
}
.sec-light .hl{background-image:var(--grad-dk)}
.sec-light .cta-card .hl{background-image:var(--grad)}
@keyframes shimmer{to{background-position:-200% 0}}

.kicker{
  display:inline-flex;align-items:center;gap:.55rem;margin-bottom:1rem;
  font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--violet);
}
.kicker::before{content:"";width:22px;height:2px;border-radius:2px;background:currentColor}
.kicker.center{display:flex;justify-content:center}
.sec-light .kicker{color:var(--rich)}

.sub{
  margin-top:1rem;font-size:1.05rem;max-width:56ch;
  color:var(--grey);
}
.sec-light .sub{color:var(--muted-dark)}
.sub.center{margin-inline:auto;text-align:center;text-wrap:balance}
.sub,.offer-desc,.offer-note,.g-sub,.fine{text-wrap:pretty}

/* LOGO — traced from the brand files, drawn from the sprite at the top of
   <body>. In the nav the three blades assemble on load, and the mark turns a
   third (it is three-fold symmetric, so it lands on itself) on hover. */
.brand{display:block;line-height:0}
.logo{display:block;width:auto;overflow:visible;color:var(--white)}
.logo-nav{height:46px}
.logo-mark{transform-box:view-box;transition:transform .9s var(--ease-out)}
.brand:hover .logo-mark{transform:rotate(120deg)}
.logo-nav .blade{transform-box:fill-box;transform-origin:center;animation:blade-in 1.1s var(--ease-out) both}
.logo-nav .b1{--bx:-35%;--by:-45%;animation-delay:.1s}
.logo-nav .b2{--bx:45%;--by:15%;animation-delay:.22s}
.logo-nav .b3{--bx:-30%;--by:45%;animation-delay:.34s}
.logo-nav .logo-word{animation:word-in .9s var(--ease-out) .45s both}
@keyframes blade-in{from{opacity:0;transform:translate(var(--bx),var(--by)) rotate(-40deg) scale(.6)}}
@keyframes word-in{from{opacity:0;transform:translateX(-10px)}}
.sprite{position:absolute;width:0;height:0;overflow:hidden}

/* ============================================================
   BUTTONS — pill, rich purple, light sweep on hover
   ============================================================ */
.btn{
  position:relative;overflow:hidden;isolation:isolate;
  display:inline-flex;align-items:center;gap:.55rem;
  border-radius:999px;font-weight:700;font-size:.93rem;line-height:1;
  padding:.82rem 1.25rem;white-space:nowrap;
  transition:background .25s ease,border-color .25s ease,color .25s ease,box-shadow .35s ease,transform .35s var(--ease-out);
}
.btn::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(110deg,transparent 25%,rgba(255,255,255,.28) 50%,transparent 75%);
  translate:-110% 0;transition:translate .75s var(--ease);
}
.btn:hover::after{translate:110% 0}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.98)}
.btn-lg{padding:1rem 1.5rem;font-size:1rem}
.btn-purple{
  background:var(--rich);color:var(--white);
  box-shadow:0 10px 30px -12px rgba(106,43,194,.9),inset 0 1px 0 rgba(255,255,255,.18);
}
.btn-purple:hover{background:var(--rich-hi);box-shadow:0 16px 40px -12px rgba(123,59,216,.95),inset 0 1px 0 rgba(255,255,255,.22)}
.btn-ghost{border:1px solid var(--line-2);color:var(--white);background:rgba(169,145,237,.06)}
.btn-ghost:hover{border-color:var(--violet);background:rgba(169,145,237,.14)}
.sec-light .btn-ghost{border-color:rgba(22,10,43,.18);color:var(--text-dark);background:transparent}
.sec-light .btn-ghost:hover{border-color:var(--rich);color:var(--rich)}
.chev{width:7px;height:10px;flex:none;transition:translate .3s var(--ease-out)}
.btn:hover .chev{translate:3px 0}
.ico{width:15px;height:15px;flex:none}

/* ============================================================
   STEPPED NOTCH — the dark block always intrudes into the light one.
   ============================================================ */
.notch{position:relative;height:clamp(26px,3.4vw,46px);background:var(--light);line-height:0}
.notch::before,.notch::after{content:"";position:absolute;background:var(--ink)}
.notch-to-light::before{top:0;left:0;width:46%;height:52%}
.notch-to-light::after{top:0;left:0;width:19%;height:100%}
.notch-to-dark::before{bottom:0;left:0;width:46%;height:52%}
.notch-to-dark::after{bottom:0;left:0;width:19%;height:100%}
.notch-right::before,.notch-right::after{left:auto;right:0}

/* ============================================================
   NAV — transparent over the hero, glass once scrolled,
   tucks away on the way down and returns on the way up.
   ============================================================ */
.nav{
  position:fixed;inset-inline:0;top:0;z-index:100;
  border-bottom:1px solid transparent;
  transition:transform .5s var(--ease-out),background .4s ease,border-color .4s ease;
}
.nav.scrolled{
  background:rgba(22,10,43,.78);-webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);
  border-bottom-color:var(--line);
}
.nav.nav-hide{transform:translateY(-102%)}
.nav-inner{
  max-width:1260px;margin-inline:auto;padding:.8rem var(--gut);
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem;
}
.nav-links{list-style:none;display:flex;gap:1.5rem;font-size:.9rem;font-weight:500;color:var(--soft)}
.nav-links a{position:relative;padding-block:.25rem;transition:color .22s ease}
.nav-links a::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:1.5px;border-radius:2px;background:var(--violet);
  transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease-out);
}
.nav-links a:hover{color:var(--white)}
.nav-links a:hover::after{transform:scaleX(1);transform-origin:left}
.nav .brand{justify-self:center}
.nav-right{display:flex;align-items:center;justify-content:flex-end;gap:1rem}
.lang{display:flex;align-items:center;gap:.4rem}
.lang-btn{color:var(--grey);font-weight:700;font-size:.82rem;transition:color .22s ease}
.lang-btn:hover{color:var(--white)}
.lang-btn.is-on{color:var(--violet)}
.lang-sep{color:rgba(185,175,201,.4);font-size:.78rem}
.nav-tel{display:flex;align-items:center;gap:.4rem;font-size:.86rem;font-weight:600;color:var(--soft);transition:color .22s ease}
.nav-tel:hover{color:var(--violet)}
.nav-cta{padding:.68rem 1.05rem;font-size:.88rem}

/* ============================================================
   MEDIA PLACEHOLDER — composed, never empty-looking
   ============================================================ */
.ph{
  position:relative;display:block;width:100%;
  background:
    radial-gradient(78% 60% at 50% 42%,rgba(169,145,237,.07),transparent 70%),
    var(--card);
  border:1px solid var(--line);border-radius:14px;overflow:hidden;
}
.ph-16x9{aspect-ratio:16/9}
.ph-9x16{aspect-ratio:9/16}
.ph-4x3{aspect-ratio:4/3}
.ph-ig{aspect-ratio:4/5}
.ph-fill{height:100%;border:0;border-radius:0}
.sec-light .ph{background:radial-gradient(78% 60% at 50% 42%,rgba(106,43,194,.06),transparent 70%),#ECE8F7;border-color:var(--line-dark)}

.ph-mark{
  position:absolute;inset:clamp(8px,1.2vw,14px);pointer-events:none;opacity:.55;
  background:
    linear-gradient(var(--violet),var(--violet)) 0 0/1px 16px no-repeat,
    linear-gradient(var(--violet),var(--violet)) 0 0/16px 1px no-repeat,
    linear-gradient(var(--violet),var(--violet)) 100% 0/1px 16px no-repeat,
    linear-gradient(var(--violet),var(--violet)) 100% 0/16px 1px no-repeat,
    linear-gradient(var(--violet),var(--violet)) 0 100%/1px 16px no-repeat,
    linear-gradient(var(--violet),var(--violet)) 0 100%/16px 1px no-repeat,
    linear-gradient(var(--violet),var(--violet)) 100% 100%/1px 16px no-repeat,
    linear-gradient(var(--violet),var(--violet)) 100% 100%/16px 1px no-repeat;
}
.ph-label{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:max-content;max-width:calc(100% - 2.2rem);text-align:center;
  color:var(--grey);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;
  padding:.42rem .72rem;border:1px solid var(--line);border-radius:999px;
  background:rgba(22,10,43,.6);
}
.sec-light .ph-label{color:var(--muted-dark);background:rgba(255,255,255,.7);border-color:var(--line-dark)}
.slot-video{display:block;width:100%;height:100%;object-fit:cover;background:var(--card);border-radius:14px}

/* ============================================================
   HERO — film, drifting light, grain, and a spotlight that
   follows the pointer. Content anchored bottom-left.
   ============================================================ */
.hero{
  position:relative;min-height:100svh;display:flex;align-items:flex-end;
  overflow:hidden;isolation:isolate;background:var(--ink);
}
/* The film drifts down slower than the page scrolls (script.js). Only the
   part already scrolled past opens up, so no edge ever shows. */
.hero-media{position:absolute;inset:0;z-index:0;will-change:translate}
.hero-media .ph,.hero-media .slot-video{height:100%;border-radius:0}
.hero-film{background:var(--ink);animation:film-in 2.4s var(--ease-out) both}
.hero .orb-2{opacity:.5}  /* top right is where the film shows most; keep it clear */
@keyframes film-in{from{opacity:0;scale:1.08}}

/* pause / play, with the film's progress running round the ring */
.film-toggle{
  position:absolute;z-index:3;right:calc(var(--gut) - 13px);
  bottom:calc(clamp(2rem,6vh,3.5rem) + 148px);
  display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;
  color:var(--white);background:rgba(22,10,43,.38);cursor:pointer;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  transition:background .25s ease,scale .25s var(--ease-out);
}
.film-toggle[hidden]{display:none}
.film-toggle:hover{background:rgba(106,43,194,.55);scale:1.06}
.film-toggle:focus-visible{outline:2px solid var(--violet);outline-offset:3px}
.ft-ring{position:absolute;inset:0;width:100%;height:100%;rotate:-90deg}
.ft-ring circle{fill:none;stroke:rgba(238,197,246,.18);stroke-width:2}
.ft-ring .ft-prog{stroke:var(--violet);stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--fp,0))}
.ft-ico{position:relative;width:14px;height:14px}
.film-toggle .ft-play,.film-toggle .t-play,
.film-toggle.is-paused .ft-pause,.film-toggle.is-paused .t-pause{display:none}
.film-toggle.is-paused .ft-play,.film-toggle.is-paused .t-play{display:block}
.film-toggle.is-paused .ft-play{translate:1px 0}

/* The glows sit low and left, under the scrim, so they never tint the film's
   centre. Remove .hero-glow if the real film reads better without it. */
.hero-glow{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.orb{position:absolute;border-radius:50%;will-change:transform}
.orb-1{
  width:70vmax;height:70vmax;left:-24vmax;bottom:-38vmax;
  background:radial-gradient(circle,rgba(106,43,194,.75),rgba(106,43,194,0) 62%);
  animation:drift-a 20s ease-in-out infinite alternate;
}
.orb-2{
  width:46vmax;height:46vmax;right:-16vmax;top:-12vmax;
  background:radial-gradient(circle,rgba(169,145,237,.32),rgba(169,145,237,0) 62%);
  animation:drift-b 24s ease-in-out infinite alternate;
}
.orb-3{
  width:32vmax;height:32vmax;left:30vw;bottom:-14vmax;
  background:radial-gradient(circle,rgba(238,197,246,.18),rgba(238,197,246,0) 62%);
  animation:drift-c 28s ease-in-out infinite alternate;
}
@keyframes drift-a{to{transform:translate(9vw,-7vh) scale(1.08)}}
@keyframes drift-b{to{transform:translate(-8vw,10vh) scale(.92)}}
@keyframes drift-c{to{transform:translate(-12vw,-9vh) scale(1.15)}}

.hero-scrim{
  position:absolute;inset:0;z-index:2;
  background:
    linear-gradient(to top right,rgba(22,10,43,.92) 0%,rgba(22,10,43,.55) 36%,rgba(22,10,43,.12) 64%,rgba(22,10,43,.3) 100%),
    linear-gradient(180deg,rgba(22,10,43,.7) 0%,rgba(22,10,43,0) 24%);
}
.hero-spot{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(520px circle at var(--mx,72%) var(--my,34%),rgba(169,145,237,.13),transparent 62%);
  transition:opacity .6s ease;
}
.grain{
  position:absolute;inset:-50%;z-index:2;pointer-events:none;opacity:.07;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1.2s steps(5) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)}20%{transform:translate(-4%,3%)}40%{transform:translate(3%,-5%)}
  60%{transform:translate(-6%,-2%)}80%{transform:translate(5%,4%)}100%{transform:translate(0,0)}
}

.hero-inner{
  position:relative;z-index:3;width:100%;max-width:1260px;margin-inline:auto;
  padding:7rem var(--gut) clamp(3.5rem,9vh,6.5rem);will-change:transform,opacity;
}
.eyebrow{
  display:inline-flex;align-items:center;gap:.5rem;color:var(--lilac);
  font-size:.82rem;font-weight:600;letter-spacing:.04em;
  padding:.45rem .85rem;border-radius:999px;
  background:rgba(169,145,237,.1);border:1px solid rgba(169,145,237,.25);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
.eyebrow .ico{color:var(--violet)}
.hero-title{
  font-family:var(--display);font-weight:800;
  font-size:clamp(2.7rem,6.6vw,6rem);line-height:.96;letter-spacing:-.04em;
  margin-top:1.3rem;max-width:15ch;
}
.hero-title .line{display:block;text-wrap:balance}
/* words are split by script.js and rise one after another */
html.js .hero-title [data-split]:not(.is-split){visibility:hidden}
.w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.12em;margin-bottom:-.12em}
.wi{display:inline-block;animation:word-up 1.1s var(--ease-out) both;animation-delay:calc(.25s + var(--i,0) * 70ms)}
@keyframes word-up{from{translate:0 108%}to{translate:0 0}}
/* gradient moves from the line to each word once it is split */
.hero-title .hl.is-split{background:none;color:var(--white);-webkit-text-fill-color:currentColor;animation:none}
.hero-title .hl.is-split .wi{
  background:var(--grad);background-size:200% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  animation:word-up 1.1s var(--ease-out) both,shimmer 8s linear infinite;
  animation-delay:calc(.25s + var(--i,0) * 70ms),0s;
}

.hero-lede{margin-top:1.5rem;font-size:clamp(1.02rem,1.25vw,1.16rem);color:var(--soft);max-width:54ch}
.hero-actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2rem}
.hero-note{display:flex;align-items:center;gap:.6rem;margin-top:1.1rem;font-size:.86rem;color:var(--grey)}
.pulse{position:relative;width:8px;height:8px;border-radius:50%;background:var(--violet);flex:none}
.pulse::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--violet);animation:ping 2s var(--ease-out) infinite}
@keyframes ping{from{transform:scale(1);opacity:.7}to{transform:scale(3.2);opacity:0}}

.hero-in{animation:fade-up .9s var(--ease-out) both;animation-delay:var(--d,0s)}
@keyframes fade-up{from{opacity:0;translate:0 18px}to{opacity:1;translate:0 0}}

.scroll-cue{
  position:absolute;right:var(--gut);bottom:clamp(2rem,6vh,3.5rem);z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:.7rem;
  font-size:.7rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--grey);
}
.scroll-cue span{writing-mode:vertical-rl}
.scroll-cue i{position:relative;width:1px;height:56px;background:rgba(185,175,201,.25);overflow:hidden}
.scroll-cue i::after{content:"";position:absolute;left:0;top:-40%;width:100%;height:40%;background:var(--violet);animation:cue 2s var(--ease) infinite}
@keyframes cue{to{top:100%}}

/* ============================================================
   MARQUEE — the two promises, on a loop
   ============================================================ */
.marquee{
  position:relative;overflow:hidden;background:var(--ink);
  border-top:1px solid var(--line);padding:1.15rem 0;
  -webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.mq-track{display:flex;width:max-content;animation:marquee 42s linear infinite}
.marquee:hover .mq-track{animation-play-state:paused}
.mq-group{display:flex;align-items:center;list-style:none;flex:none}
.mq-group li{
  font-family:var(--display);font-weight:800;letter-spacing:-.025em;white-space:nowrap;
  font-size:clamp(1.35rem,2.8vw,2.3rem);line-height:1.1;padding-right:clamp(1.2rem,2.6vw,2.2rem);
}
.mq-outline{
  background:var(--grad);background-size:200% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
}
.mq-star{color:var(--violet)}
.mq-star svg{width:clamp(20px,2.2vw,28px);height:auto;transform-origin:52.4% 62.7%;animation:spin-slow 12s linear infinite}
@keyframes marquee{to{transform:translateX(-50%)}}
@keyframes spin-slow{to{transform:rotate(360deg)}}

/* ============================================================
   LIGHT — THREE REELS
   The section is tall and its content pins. script.js turns the scroll
   position into --k (0 → 1) per card, so the cards are dealt in one after
   another, side by side, and run backwards on the way up. Without JS,
   with reduced motion or ?static=1 the three sit at rest.
   ============================================================ */
.reels-pin{padding-block:var(--secpad)}
.reels{
  --cw:min(250px,30vw);
  position:relative;height:calc(var(--cw) * 16 / 9 + 14px);
  margin:clamp(1.8rem,4.5vh,3rem) auto 0;
}
.reel-card{
  --k:1;--x:0px;--y:0px;--r:0deg;--spin:-7deg;--sc:1;
  position:absolute;top:0;left:50%;z-index:2;
  width:var(--cw);margin:0 0 0 calc(var(--cw) / -2);
  transform:
    translate3d(calc(var(--x) * (.25 + .75 * var(--k))),calc(var(--y) + (1 - var(--k)) * 62vh),0)
    rotate(calc(var(--r) * (3 - 2 * var(--k)) + (1 - var(--k)) * var(--spin)))
    scale(calc(var(--sc) * (.82 + .18 * var(--k))));
  opacity:clamp(0,calc(var(--k) * 2.5),1);
  will-change:transform,opacity;
}
.reel-card[data-card="0"]{--x:calc(var(--cw) * -1.1);--y:34px;--r:-5deg;--spin:-6deg;z-index:1}
.reel-card[data-card="2"]{--x:calc(var(--cw) * 1.1);--y:34px;--r:5deg;--spin:6deg;z-index:1}

.reel-phone{
  position:relative;padding:7px;border-radius:26px;background:#0E061C;
  border:1px solid rgba(169,145,237,.45);
  box-shadow:0 34px 60px -26px rgba(22,10,43,.6),0 0 0 5px rgba(169,145,237,.08);
}
.reel-card[data-card="1"] .reel-phone{
  border-color:rgba(169,145,237,.85);
  box-shadow:0 44px 80px -28px rgba(106,43,194,.6),0 0 0 6px rgba(169,145,237,.16);
}
/* the camera island */
.reel-phone::before{
  content:"";position:absolute;z-index:3;top:15px;left:50%;width:28%;height:6px;border-radius:6px;
  background:rgba(0,0,0,.65);transform:translateX(-50%);
}
.reels .ph{border:0;border-radius:19px;background:radial-gradient(70% 50% at 50% 40%,rgba(169,145,237,.18),transparent 70%),var(--card)}
.reels .ph-label{top:42%;color:var(--grey);background:rgba(22,10,43,.6);border-color:var(--line)}
.reels .slot-video{aspect-ratio:9/16;height:auto;border-radius:19px;background:#0E061C}
.reel-phone{cursor:pointer}
/* sound: muted by default; a tap on a card turns its sound on (the others off) */
.ig-sound{
  position:absolute;z-index:4;bottom:calc(7px + var(--cw) * .36);left:calc(7px + var(--cw) * .05);
  width:calc(var(--cw) * .11);height:calc(var(--cw) * .11);min-width:22px;min-height:22px;border-radius:50%;
  display:grid;place-items:center;color:#fff;background:rgba(0,0,0,.45);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:background .2s ease,transform .25s var(--ease-out);
}
.ig-sound:hover{background:rgba(0,0,0,.65);transform:scale(1.08)}
/* the comments, bubble and toast are decoration: taps go through to the cards */
.ig-sheet,.ig-activity,.ig-toast{pointer-events:none}
.ig-sound svg{width:58%;height:58%;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;max-width:none}
.ig-sound .snd-on,.ig-sound[aria-pressed="true"] .snd-off{display:none}
.ig-sound[aria-pressed="true"] .snd-on{display:block}
.ig-sound[aria-pressed="true"]{background:var(--rich)}
.ig-flash{
  position:absolute;left:50%;top:42%;width:3.8em;height:3.8em;margin:-1.9em 0 0 -1.9em;border-radius:50%;
  display:grid;place-items:center;background:rgba(0,0,0,.5);opacity:0;
}
.ig-flash svg{width:48%;height:48%}
.ig-flash.go{animation:ig-flash .9s ease both}
@keyframes ig-flash{0%{opacity:0;transform:scale(.7)}18%{opacity:1;transform:scale(1)}70%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.08)}}
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ============================================================
   INSTAGRAM-STYLE UI — on each reel and around the three.
   Icons are drawn here (no Instagram logo); handles and counts are
   illustrative. Everything inside a card is sized in em from --cw,
   so it scales with the card.
   ============================================================ */
.ig{
  position:absolute;inset:7px;z-index:3;border-radius:19px;overflow:hidden;pointer-events:none;
  color:#fff;font-size:calc(var(--cw) * .05);line-height:1.25;
  background:linear-gradient(180deg,rgba(0,0,0,.34),transparent 16%,transparent 56%,rgba(0,0,0,.55));
}
.ig svg,.ig-sheet svg,.ig-activity svg,.ig-toast svg{display:block;flex:none;max-width:none;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.ig svg.fill,.ig-activity svg.fill,.ig-toast svg.fill{fill:currentColor;stroke:none}
.ig .dot{fill:currentColor;stroke:none}
.ig-top{position:absolute;top:2.5em;left:1.1em;right:1.1em;display:flex;align-items:center;justify-content:space-between;font-size:1.2em}
.ig-top b{font-weight:800;letter-spacing:-.01em}
.ig-top svg{width:1.3em;height:1.3em}

/* the action rail: like, comment, share, save, more, audio */
.ig-rail{position:absolute;right:.6em;bottom:4.5em;list-style:none;display:flex;flex-direction:column;align-items:center;gap:.95em}
.ig-rail li{position:relative;display:flex;flex-direction:column;align-items:center;gap:.2em}
.ig-rail svg{width:1.95em;height:1.95em;filter:drop-shadow(0 1px 2px rgba(0,0,0,.35))}
.ig-n{font-size:.8em;font-weight:600;font-variant-numeric:tabular-nums;text-shadow:0 1px 2px rgba(0,0,0,.45)}
.ig-like svg,.ig-save svg{transition:fill .2s ease,stroke .2s ease}
.ig-like.is-liked svg{fill:#FF3040;stroke:#FF3040}
.ig-save.is-saved svg{fill:#fff}
.ig-disc{display:block;width:1.8em;height:1.8em;border-radius:.45em;border:.14em solid #fff;overflow:hidden;color:#fff;background:linear-gradient(135deg,var(--violet),var(--rich))}
/* Prism's mark, wherever the account shows (avatar, audio cover, replies) */
.ig svg.pe,.ig-sheet svg.pe{width:100%;height:100%;fill:currentColor;stroke:none}

/* account, caption, audio */
.ig-bottom{position:absolute;left:.95em;right:3.9em;bottom:1.15em}
.ig-user{display:flex;align-items:center;gap:.5em;font-size:.95em}
.ig-user b{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ig-av{flex:none;width:2em;height:2em;border-radius:50%;display:grid;place-items:center;overflow:hidden;color:#fff;background:radial-gradient(circle at 30% 22%,#3B1A72,var(--ink) 72%);border:.1em solid rgba(255,255,255,.9)}
.ig-follow{flex:none;border:1px solid rgba(255,255,255,.7);border-radius:.55em;padding:.15em .55em;font-size:.85em;font-weight:600}
.ig-cap{margin-top:.55em;font-size:.92em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ig-audio{display:flex;align-items:center;gap:.35em;margin-top:.45em;font-size:.8em;opacity:.92;min-width:0}
.ig-audio span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ig-audio svg{width:1.05em;height:1.05em;stroke-width:2.2}

/* a like: the icon pops; a double-tap: the big heart; hearts rise from the button */
.ig-pop{animation:ig-pop .5s var(--ease-out)}
@keyframes ig-pop{0%{transform:scale(1)}30%{transform:scale(1.32)}55%{transform:scale(.88)}75%{transform:scale(1.06)}100%{transform:scale(1)}}
.ig-burst{position:absolute;left:35%;top:31%;width:30%;opacity:0;color:#fff;filter:drop-shadow(0 6px 18px rgba(0,0,0,.35))}
.ig-burst svg{width:100%;height:auto}
.ig-burst.go{animation:ig-burst 1.05s var(--ease-out)}
@keyframes ig-burst{
  0%{opacity:0;transform:scale(.2) rotate(-14deg)}
  18%{opacity:1;transform:scale(1.18) rotate(-14deg)}
  32%{transform:scale(.94) rotate(-14deg)}
  46%{transform:scale(1.04) rotate(-14deg)}
  78%{opacity:1;transform:translateY(0) scale(1) rotate(-14deg)}
  100%{opacity:0;transform:translateY(-40%) scale(.9) rotate(-14deg)}
}
.ig-float{position:absolute;left:50%;top:0;width:1.3em;height:1.3em;margin-left:-.65em;color:#FF3040;animation:ig-float 1.7s ease-out forwards}
.ig-float svg{width:100%;height:100%;fill:currentColor;stroke:none}
@keyframes ig-float{
  0%{opacity:0;transform:translate(0,0) scale(.4)}
  12%{opacity:1;transform:translate(0,-.6em) scale(1)}
  100%{opacity:0;transform:translate(var(--dx,0),-9em) scale(.75) rotate(var(--rot,0deg))}
}

/* the comments sheet: PRIX comes in, the automatic reply answers */
.ig-sheet{
  position:absolute;z-index:5;left:max(12px,calc(50% - var(--cw) * 2.42));top:20%;
  width:calc(var(--cw) * .94);font-size:calc(var(--cw) * .052);line-height:1.3;
  background:#fff;color:#000;border-radius:1.4em;overflow:hidden;
  box-shadow:0 26px 50px -18px rgba(22,10,43,.38),0 0 0 1px rgba(22,10,43,.05);
}
.ig-sheet-head{display:flex;flex-direction:column;align-items:center;gap:.55em;padding:.65em 1em;border-bottom:1px solid #efefef;font-size:.95em}
.ig-sheet-head i{width:2.6em;height:.28em;border-radius:1em;background:#d4d4d4}
.ig-rows{
  display:flex;flex-direction:column;justify-content:flex-end;height:15.5em;overflow:hidden;
  -webkit-mask:linear-gradient(180deg,transparent,#000 2.2em);mask:linear-gradient(180deg,transparent,#000 2.2em);
}
.igc{display:grid;grid-template-rows:1fr}
.igc-in{min-height:0;overflow:hidden;display:flex;align-items:flex-start;gap:.6em;padding:.5em .9em}
.igc.reply .igc-in{padding-left:3.2em}
.igc-av{
  flex:none;width:2.1em;height:2.1em;border-radius:50%;display:grid;place-items:center;
  color:#fff;font-size:.9em;font-weight:700;
  background:linear-gradient(140deg,hsl(var(--h,270) 72% 66%),hsl(calc(var(--h,270) + 28) 62% 46%));
}
.igc-av svg{width:56%;height:56%;stroke-width:2.2}
.igc.reply .igc-av{width:1.75em;height:1.75em}
.igc-av.is-pe{overflow:hidden;background:radial-gradient(circle at 30% 22%,#3B1A72,var(--ink) 72%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.igc-body{flex:1;min-width:0;font-size:.92em}
.igc-body b{font-weight:600}
.igc-t{color:#737373;font-size:.9em;margin-left:.4em}
.igc-text{margin-top:.08em}
.igc-meta{margin-top:.2em;color:#737373;font-size:.82em;font-weight:600}
.igc-heart{flex:none;width:1em;height:1em;margin-top:.7em;color:#8e8e8e}
.igc.new{animation:igc-in .55s var(--ease-out) both}
.igc.out{animation:igc-out .4s ease forwards}
@keyframes igc-in{from{grid-template-rows:0fr;opacity:0;transform:translateY(.6em)}to{grid-template-rows:1fr;opacity:1;transform:none}}
@keyframes igc-out{to{grid-template-rows:0fr;opacity:0}}
.ig-sheet-input{display:flex;align-items:center;gap:.6em;padding:.6em .9em;border-top:1px solid #efefef;color:#737373;font-size:.9em}
.ig-sheet-input .igc-av{width:1.9em;height:1.9em}

/* the activity bubble — new likes, comments, saves — and the save toast */
.ig-activity{
  position:absolute;z-index:5;left:calc(50% + var(--cw) * 1.72);top:5%;
  display:flex;align-items:center;gap:.9em;padding:.6em .95em;border-radius:.9em;
  background:#FF3040;color:#fff;font-size:calc(var(--cw) * .058);font-weight:700;font-variant-numeric:tabular-nums;
  box-shadow:0 18px 36px -14px rgba(255,48,64,.6);
}
.ig-activity::after{content:"";position:absolute;left:1.2em;bottom:-.4em;width:.9em;height:.9em;background:#FF3040;transform:rotate(45deg);border-radius:.15em}
.ig-activity span{display:flex;align-items:center;gap:.35em}
.ig-activity svg{width:1.15em;height:1.15em}
.ig-activity.bump{animation:ig-pop .45s var(--ease-out)}
.ig-toast{
  position:absolute;z-index:5;left:calc(50% + var(--cw) * 1.45);top:75%;
  display:flex;align-items:center;gap:.55em;padding:.7em 1.05em;border-radius:.8em;
  background:#262626;color:#fff;font-size:calc(var(--cw) * .055);font-weight:600;
  box-shadow:0 18px 36px -14px rgba(0,0,0,.45);
}
.ig-toast svg{width:1.15em;height:1.15em}

/* the sheet and bubble arrive once the three cards are down; the toast shows on each save */
html.js .reels .ig-sheet,html.js .reels .ig-activity{
  opacity:0;scale:.86;translate:0 1em;
  transition:opacity .45s ease var(--cd,0s),scale .7s var(--ease-out) var(--cd,0s),translate .7s var(--ease-out) var(--cd,0s);
}
html.js .reels.is-live .ig-sheet,html.js .reels.is-live .ig-activity{opacity:1;scale:1;translate:0 0}
html.js .reels .ig-toast{opacity:0;translate:0 .7em;transition:opacity .35s ease,translate .45s var(--ease-out)}
html.js .reels .ig-toast.show{opacity:1;translate:0 0}

/* narrower than the five-across layout: the sheet becomes a two-line
   live comment over the top of the cards, the bubble and toast go */
@media (max-width:1100px){
  .ig-activity,.ig-toast{display:none}
  .ig-sheet{left:50%;top:1.5%;width:calc(var(--cw) * 1.5);margin-left:calc(var(--cw) * -.75);font-size:calc(var(--cw) * .06);border-radius:1.1em}
  .ig-sheet-head,.ig-sheet-input,.igc-meta{display:none}
  .ig-rows{height:6.6em;-webkit-mask:linear-gradient(180deg,transparent,#000 .7em);mask:linear-gradient(180deg,transparent,#000 .7em)}
  .igc-in{padding-block:.45em}
}

/* pinned mode: the section scrolls three screens while the stage holds still */
html.js .reels-sec{height:280vh}
html.js .reels-pin{
  position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;
  display:flex;flex-direction:column;justify-content:center;padding-block:74px 28px;
}
html.js .reels{--cw:clamp(120px,min(250px,calc((100svh - 330px) * .53),30vw),250px)}
/* a flex column would shrink the wrap to its heading; the stage needs the full width */
.reels-pin > .wrap{width:100%}

/* ============================================================
   DARK — the villa film
   ============================================================ */
.villa{margin-top:clamp(1.8rem,4vw,2.8rem)}
.villa .ph{border-radius:18px}
.villa figcaption{margin-top:1rem;color:var(--grey);font-size:.95rem}

/* the property film: a still and a play button until pressed, then YouTube */
.yt{position:relative;aspect-ratio:16/9;border-radius:18px;overflow:hidden;background:var(--card);isolation:isolate}
.yt-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:scale 1.4s var(--ease-out)}
.yt::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse at 50% 50%,rgba(22,10,43,.1) 0%,rgba(22,10,43,.5) 75%),
             linear-gradient(180deg,rgba(22,10,43,0) 55%,rgba(22,10,43,.45));
  transition:opacity .5s ease;
}
.yt-play{
  position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:1rem;color:var(--white);text-decoration:none;
}
.yt-btn{
  position:relative;display:grid;place-items:center;width:clamp(66px,8vw,96px);aspect-ratio:1;border-radius:50%;
  background:linear-gradient(135deg,var(--rich),#8B52E6);
  box-shadow:0 14px 40px -10px rgba(106,43,194,.8);
  transition:scale .35s var(--ease-out);
}
.yt-btn::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid rgba(169,145,237,.7);animation:yt-ring 2.4s var(--ease-out) infinite}
.yt-btn svg{width:34%;height:34%;translate:8% 0}
@keyframes yt-ring{from{scale:1;opacity:1}to{scale:1.55;opacity:0}}
.yt-txt{display:flex;align-items:center;gap:.6rem;font-family:var(--display);font-size:clamp(.98rem,1.2vw,1.1rem)}
.yt-txt b{font-weight:700;letter-spacing:-.01em}
.yt-txt small{font-size:.8em;font-weight:600;color:var(--soft);padding:.2em .6em;border-radius:99px;background:rgba(22,10,43,.5);border:1px solid var(--line-2)}
.yt-play:hover .yt-btn,.yt-play:focus-visible .yt-btn{scale:1.08}
.yt:hover .yt-poster{scale:1.035}
.yt-play:focus-visible{outline:none}
.yt-play:focus-visible .yt-btn{outline:2px solid var(--violet);outline-offset:5px}
.yt iframe{position:absolute;inset:0;z-index:3;width:100%;height:100%;border:0}
/* local preview only (file://): why the film won't start, and what to do */
.yt-note{
  position:absolute;left:50%;bottom:clamp(.8rem,3vw,1.6rem);z-index:3;translate:-50% 0;
  width:max-content;max-width:calc(100% - 2rem);margin:0;padding:.65rem 1rem;border-radius:12px;
  font-size:.86rem;line-height:1.45;text-align:center;color:var(--white);
  background:rgba(22,10,43,.82);border:1px solid var(--line-2);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
@media (max-width:680px){.yt-note{bottom:.5rem;padding:.45rem .7rem;font-size:.72rem;line-height:1.35}}
.yt.is-on .yt-play,.yt.is-on::before{opacity:0;pointer-events:none}
.yt.is-on .yt-play{transition:opacity .3s ease}

/* ============================================================
   SECTION HEAD + ROWS
   ============================================================ */
.sec-head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem 3rem;flex-wrap:wrap;
}
.sec-head .sub{max-width:44ch}
.row-4,.row-3{display:grid;gap:var(--g);margin-top:clamp(1.8rem,3.5vw,2.8rem)}
.row-4{grid-template-columns:repeat(4,1fr)}
.row-3{grid-template-columns:repeat(3,1fr)}

/* ============================================================
   THE AUDIT — copy on the left, the WhatsApp flow on the right
   ============================================================ */
.audit{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2.2rem,6vw,5rem);align-items:center}
.audit-list{list-style:none;margin-top:2rem;counter-reset:a}
.audit-list li{
  position:relative;padding:1rem 0 1rem 3.2rem;border-top:1px solid var(--line);
  font-size:1.02rem;color:var(--soft);transition:color .3s ease,padding-left .4s var(--ease-out);
}
.audit-list li:last-child{border-bottom:1px solid var(--line)}
.audit-list li::before{
  counter-increment:a;content:"0" counter(a);
  position:absolute;left:0;top:1.02rem;
  font-family:var(--display);font-weight:800;font-size:.95rem;color:var(--violet);
}
.audit-list li:hover{color:var(--white);padding-left:3.6rem}
.audit-cta{margin-top:2rem}
.fine{margin-top:.9rem;font-size:.86rem;color:var(--grey);max-width:46ch}

.chat{
  position:relative;max-width:400px;justify-self:center;width:100%;
  border-radius:26px;padding:1px;
  background:linear-gradient(160deg,rgba(169,145,237,.55),rgba(169,145,237,.08) 40%,rgba(106,43,194,.4));
  box-shadow:0 40px 90px -30px rgba(106,43,194,.6);
  transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform .6s var(--ease-out);
}
.chat-head,.chat-body{background:#1A0C33}
.chat-head{
  display:flex;align-items:center;gap:.7rem;padding:.9rem 1.1rem;border-radius:25px 25px 0 0;
  border-bottom:1px solid var(--line);
}
.chat-av{
  width:36px;height:36px;border-radius:50%;display:grid;place-items:center;flex:none;
  color:var(--white);background:linear-gradient(140deg,var(--violet),var(--rich));
}
.chat-av svg{width:58%;height:auto;translate:0 -6%}
.chat-who{display:flex;flex-direction:column;line-height:1.2;font-size:.92rem}
.chat-who small{color:var(--violet);font-size:.74rem}
.chat-body{
  display:flex;flex-direction:column;gap:.55rem;padding:1.1rem 1rem 1.3rem;border-radius:0 0 25px 25px;
  background:radial-gradient(90% 60% at 50% 100%,rgba(106,43,194,.22),transparent 70%),#1A0C33;
  min-height:440px;
}
.bubble{
  max-width:82%;padding:.62rem .85rem;border-radius:16px;font-size:.88rem;line-height:1.4;
  transition:opacity .45s ease,translate .5s var(--ease-out),scale .5s var(--ease-out);
}
.bubble.in{align-self:flex-start;background:#2B1650;color:var(--soft);border-bottom-left-radius:5px}
.bubble.out{align-self:flex-end;background:var(--rich);color:var(--white);border-bottom-right-radius:5px;font-weight:600}
.bubble-link{display:flex;align-items:center;gap:.4rem;font-weight:500!important}
.bubble-link svg{width:14px;height:14px;flex:none}
.bubble.stamp{
  align-self:center;max-width:none;padding:.28rem .7rem;font-size:.7rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--grey);background:rgba(255,255,255,.06);border-radius:999px;
}
.bubble-video{padding:.4rem;width:82%}
.vb-frame{
  position:relative;aspect-ratio:16/10;border-radius:12px;overflow:hidden;
  background:radial-gradient(80% 70% at 30% 30%,rgba(169,145,237,.45),transparent 60%),linear-gradient(140deg,#3A1C6E,#160A2B);
  display:grid;place-items:center;
}
.vb-play{
  width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.92);color:var(--rich);
  box-shadow:0 0 0 0 rgba(255,255,255,.4);animation:halo 2.4s ease-out infinite;
}
.vb-play svg{width:16px;height:16px;margin-left:2px}
@keyframes halo{to{box-shadow:0 0 0 16px rgba(255,255,255,0)}}
.vb-time{position:absolute;right:.5rem;bottom:.45rem;font-size:.7rem;font-weight:700;color:var(--white);background:rgba(22,10,43,.6);padding:.1rem .4rem;border-radius:5px}
.vb-bar{height:3px;border-radius:2px;background:rgba(255,255,255,.12);margin:.5rem .2rem 0;overflow:hidden}
.vb-bar span{display:block;height:100%;width:100%;background:var(--violet);transform-origin:0 50%;transform:scaleX(.35)}
.bubble.is-on .vb-bar span{animation:vbar 6s linear both}
@keyframes vbar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.vb-cap{font-size:.78rem;color:var(--grey);padding:.4rem .25rem .1rem}
/* the bubbles play in sequence once the chat is on screen (script.js) */
html.js .chat .bubble:not(.is-on){opacity:0;translate:0 12px;scale:.96}

/* ============================================================
   METHOD — four steps with a rail that fills as you scroll
   ============================================================ */
.steps{margin-top:clamp(2rem,4vw,3rem)}
.steps .row-4{margin-top:1.4rem}
.steps-track{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--g);height:14px}
.steps-track::before,.steps-fill{
  content:"";position:absolute;top:6px;height:2px;border-radius:2px;
  left:7px;right:calc((100% - 3 * var(--g)) / 4 - 7px);
}
.steps-track::before{background:var(--line)}
.steps-fill{
  background:linear-gradient(90deg,var(--rich),var(--violet));
  transform-origin:0 50%;transform:scaleX(var(--fill,0));
}
.steps-track i{
  position:relative;width:14px;height:14px;border-radius:50%;
  background:var(--ink);border:2px solid rgba(185,175,201,.35);
  transition:border-color .4s ease,background .4s ease,box-shadow .4s ease;
}
.steps-track i.is-on{border-color:var(--violet);background:var(--violet);box-shadow:0 0 0 6px rgba(169,145,237,.18)}

.step-card{
  position:relative;background:var(--card);border:1px solid var(--line);border-radius:18px;
  padding:.8rem .8rem 1.3rem;transition:border-color .3s ease,transform .5s var(--ease-out);
}
.step-card:hover{border-color:var(--line-2);transform:translateY(-4px)}
.step-card .ph{border-radius:12px}
.step-n{
  display:inline-block;margin:1rem .3rem 0;
  font-family:var(--display);font-weight:900;font-size:.82rem;letter-spacing:-.01em;
  color:var(--white);background:var(--rich);padding:.2rem .55rem;border-radius:999px;
}
.step-card h3{
  font-family:var(--display);font-weight:800;letter-spacing:-.02em;
  font-size:1.25rem;line-height:1.1;margin:.55rem .3rem 0;
}
.step-card > p{color:var(--grey);font-size:.92rem;margin:.45rem .3rem 0;line-height:1.5}

/* ============================================================
   METHOD SCENES — one short loop per step, built from real logos,
   real photos (free licences, credited on the image or in the
   README) and app UI. Everything is sized in em off the card's
   width (container units), so a scene scales like a picture.
   data-at="s" shows an element at that second of the loop,
   data-off="s" hides it again; script.js plays each scene while it
   is on screen. Without JS or with reduced motion: the last frame.
   ============================================================ */
.scene{
  position:relative;aspect-ratio:4/3;border-radius:12px;overflow:hidden;isolation:isolate;
  container-type:inline-size;background:#0E061C;
}
.scene-in{position:absolute;inset:0;font-size:10px;font-size:4.17cqw;line-height:1.3;font-family:var(--sans)}
.scene img{display:block;max-width:none}
.scene svg{display:block;flex:none;max-width:none;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.scene svg .f{fill:currentColor;stroke:none}
.scene svg.pe{fill:currentColor;stroke:none}
.scene-badge{
  position:absolute;right:.7em;bottom:.7em;z-index:4;width:2.6em;height:2.6em;border-radius:.8em;
  display:grid;place-items:center;background:#fff;box-shadow:0 .4em 1.2em rgba(0,0,0,.25);
}
.scene-badge img{width:62%;height:auto}
/* the timeline — only once script.js has taken a scene over */
html.js .scene.anim [data-at]{transition:opacity .35s ease,translate .5s var(--ease-out)}
html.js .scene.anim [data-at]:not(.on){opacity:0}
.transient{display:none}
html.js .scene.anim .transient.on{display:flex}

/* ---------- 1 · WhatsApp ---------- */
.scene-wa{background:#EFE7DD;color:#111B21}
.wa-head{
  position:absolute;inset:0 0 auto;height:3.1em;z-index:2;display:flex;align-items:center;gap:.55em;padding:0 .9em 0 .5em;
  background:#008069;color:#fff;
}
.wa-head > svg{width:1.45em;height:1.45em}
.wa-head > svg:nth-last-child(2){margin-left:auto}
.wa-head > svg:last-child{margin-left:.6em}
.wa-av{width:2.1em;height:2.1em;border-radius:50%;display:grid;place-items:center;background:linear-gradient(140deg,var(--violet),var(--rich))}
.wa-av svg{width:58%;translate:0 -6%;color:#fff}
.wa-who{display:flex;flex-direction:column;line-height:1.15;font-size:.95em}
.wa-who small{font-size:.78em;opacity:.85}
.wa-body{position:absolute;inset:3.1em 0 0;display:flex;flex-direction:column;justify-content:flex-end;gap:.4em;padding:.6em .7em .7em;overflow:hidden}
.wa-day{align-self:center;padding:.2em .7em;border-radius:.5em;background:#fff;color:#54656F;font-size:.72em;box-shadow:0 1px .5px rgba(11,20,26,.13)}
.wa-b{
  position:relative;max-width:78%;padding:.4em .55em .35em;border-radius:.6em;font-size:.92em;
  box-shadow:0 1px .5px rgba(11,20,26,.13);
}
.wa-b.out{align-self:flex-end;background:#D9FDD3;border-top-right-radius:.15em}
.wa-b.in{align-self:flex-start;background:#fff;border-top-left-radius:.15em}
.wa-time{display:inline-flex;align-items:center;gap:.2em;float:right;margin:.45em 0 0 .7em;font-size:.68em;color:#667781}
.wa-time i{display:inline-flex;color:#53BDEB}
.wa-ticks{width:1.35em;height:1.35em;stroke-width:2.2}
html.js .scene.anim .wa-time i:not(.on){opacity:1;color:#8696A0}
.wa-link{padding:.3em}
.wa-prev{display:flex;gap:.5em;align-items:center;padding:.3em;border-radius:.45em;background:rgba(0,0,0,.05)}
.wa-prev-img{width:3em;height:3em;border-radius:.35em;object-fit:cover;filter:blur(.12em)}
.wa-prev p{display:flex;flex-direction:column;gap:.15em;font-size:.85em}
.wa-prev span{display:flex;align-items:center;gap:.3em;color:#667781;font-size:.85em}
.wa-fav{width:1.1em;height:1.1em;image-rendering:auto}
.wa-url{display:block;margin:.3em .25em 0;color:#027EB5;font-size:.82em}
.wa-typing{gap:.25em;padding:.6em .7em}
.wa-typing i{width:.45em;height:.45em;border-radius:50%;background:#8696A0;animation:wa-dot 1s ease-in-out infinite}
.wa-typing i:nth-child(2){animation-delay:.15s}.wa-typing i:nth-child(3){animation-delay:.3s}
@keyframes wa-dot{0%,60%,100%{transform:none;opacity:.5}30%{transform:translateY(-.25em);opacity:1}}
.wa-loom{padding:.3em;width:50%}
.loom-thumb{position:relative;aspect-ratio:16/9;border-radius:.45em;overflow:hidden;background:#222}
.loom-img{width:100%;height:100%;object-fit:cover;filter:blur(.18em) brightness(.85)}
.loom-play{position:absolute;inset:0;margin:auto;width:2.2em;height:2.2em;border-radius:50%;display:grid;place-items:center;background:#625DF5;color:#fff}
.loom-play svg{width:52%;margin-left:8%}
.loom-dur{position:absolute;right:.35em;bottom:.5em;padding:.05em .35em;border-radius:.3em;background:rgba(0,0,0,.6);color:#fff;font-size:.68em;font-weight:600}
.loom-bar{position:absolute;left:0;right:0;bottom:0;height:.22em;background:rgba(255,255,255,.3)}
.loom-bar i{display:block;height:100%;width:100%;background:#625DF5;transform-origin:0 50%;transform:scaleX(.4)}
html.js .scene.anim .wa-loom.on .loom-bar i{animation:bar-fill 5.5s linear .8s both}
@keyframes bar-fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.loom-meta{display:flex;align-items:center;gap:.35em;margin:.35em .2em 0;font-size:.85em}
.loom-logo{width:1.15em;height:1.15em}
html.js .scene.anim .wa-body > [data-at]:not(.on){display:none}
html.js .scene.anim .wa-body > .on{animation:wa-in .4s var(--ease-out)}
@keyframes wa-in{from{opacity:0;translate:0 .8em;scale:.96}to{opacity:1;translate:0 0;scale:1}}

/* ---------- 2 · the call ---------- */
.scene-call{background:#0B141A;color:#fff}
.call-bg{position:absolute;inset:-12%;width:124%;height:124%;object-fit:cover;filter:blur(.9em) brightness(.42) saturate(1.2)}
.call-enc{position:absolute;top:1em;left:0;right:0;display:flex;align-items:center;justify-content:center;gap:.3em;font-size:.78em;color:rgba(255,255,255,.75)}
.call-enc svg{width:1em;height:1em}
.call-id{position:absolute;top:2.8em;left:0;right:0;display:flex;flex-direction:column;align-items:center;gap:.25em}
.call-av{position:relative;width:4.8em;height:4.8em;border-radius:50%;display:grid;place-items:center;background:linear-gradient(140deg,var(--violet),var(--rich))}
.call-av svg{width:55%;translate:0 -6%;color:#fff}
.call-av .ring{position:absolute;inset:0;border-radius:50%;border:.12em solid rgba(255,255,255,.55);animation:ring 2.2s ease-out infinite}
.call-av .r2{animation-delay:1.1s}
@keyframes ring{from{transform:scale(1);opacity:.8}to{transform:scale(1.7);opacity:0}}
.call-id b{margin-top:.45em;font-size:1.3em;font-weight:600}
.call-state{font-size:.92em;color:rgba(255,255,255,.82);font-variant-numeric:tabular-nums}
.call-ended{display:none}
.scene-call:has(.call-ended.on) .call-time,.scene-call:has(.call-ended.on) .ring{display:none}
.scene-call:has(.call-ended.on) .call-ended{display:inline}
html:not(.js) .call-ended{display:none}
.call-ctrls{
  position:absolute;left:1.6em;right:1.6em;bottom:1.2em;display:flex;justify-content:space-between;
  padding:.55em .8em;border-radius:2em;background:rgba(255,255,255,.1);
}
.call-ctrls span{width:2.5em;height:2.5em;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.16)}
.call-ctrls svg{width:1.3em;height:1.3em}
.call-ctrls .end{background:#EA0038}
.scene-call:has(.call-ended.on) .call-ctrls{opacity:.35;transition:opacity .4s ease}
.call-note{
  position:absolute;z-index:3;left:.8em;right:.8em;top:.75em;display:flex;gap:.65em;align-items:center;
  padding:.65em .8em;border-radius:1.1em;background:rgba(246,246,246,.97);color:#111;
  box-shadow:0 .7em 1.8em rgba(0,0,0,.4);
}
html.js .scene.anim .call-note:not(.on){translate:0 -140%}
.note-app{width:2.1em;height:2.1em;padding:.3em;border-radius:.55em;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.06)}
.note-txt{min-width:0;flex:1;font-size:.85em;line-height:1.25}
.note-txt p:first-child{display:flex;justify-content:space-between;gap:.5em}
.note-txt p:first-child span{color:#8a8a8a;font-size:.88em}
.note-doc{display:flex;align-items:center;gap:.35em;margin-top:.15em;font-weight:600}
.note-pdf{width:1.25em;height:1.25em}
.note-sub{color:#6b6b6b;font-size:.85em}

/* ---------- 3 · the camera monitor ---------- */
.scene-cam{background:#000;color:#fff}
.cam-shot{position:absolute;inset:0;margin:0;overflow:hidden}
.cam-shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cam-log{filter:saturate(.3) contrast(.7) brightness(1.15)}
.cam-grade{filter:saturate(1.12) contrast(1.06)}
.cam-shot + .cam-shot{opacity:0}
html.js .scene.anim .cam-shot{opacity:0;transition:opacity .18s linear}
html.js .scene.anim .cam-shot.on{opacity:1}
html.js .scene.anim .cam-shot.on img{animation:cam-kb 4.5s linear both}
html.js .scene.anim .cam-shot.on .cam-grade{animation:cam-kb 4.5s linear both,cam-wipe 4.5s var(--ease) both}
@keyframes cam-kb{from{transform:scale(1.04) translateX(1.5%)}to{transform:scale(1.14) translateX(-1.5%)}}
@keyframes cam-wipe{0%,24%{clip-path:inset(0 100% 0 0)}72%,100%{clip-path:inset(0 0 0 0)}}
.cam-div{position:absolute;top:0;bottom:0;left:100%;width:.14em;background:#fff;opacity:0;box-shadow:0 0 .7em rgba(0,0,0,.6)}
html.js .scene.anim .cam-shot.on .cam-div{animation:cam-div 4.5s var(--ease) both}
@keyframes cam-div{0%,24%{left:0;opacity:1}72%{left:100%;opacity:1}74%,100%{left:100%;opacity:0}}
.cam-credit{position:absolute;right:.7em;bottom:2.5em;font-size:.58em;color:rgba(255,255,255,.75);text-shadow:0 1px 2px rgba(0,0,0,.8)}
.cam-grid{
  position:absolute;inset:0;pointer-events:none;opacity:.22;
  background:
    linear-gradient(90deg,transparent calc(33.33% - .5px),#fff calc(33.33% - .5px),#fff calc(33.33% + .5px),transparent calc(33.33% + .5px),transparent calc(66.66% - .5px),#fff calc(66.66% - .5px),#fff calc(66.66% + .5px),transparent calc(66.66% + .5px)),
    linear-gradient(180deg,transparent calc(33.33% - .5px),#fff calc(33.33% - .5px),#fff calc(33.33% + .5px),transparent calc(33.33% + .5px),transparent calc(66.66% - .5px),#fff calc(66.66% - .5px),#fff calc(66.66% + .5px),transparent calc(66.66% + .5px));
}
.cam-focus{
  position:absolute;left:50%;top:50%;width:4.4em;height:3.3em;margin:-1.65em 0 0 -2.2em;opacity:.9;
  background:
    linear-gradient(#fff,#fff) 0 0/.9em .12em no-repeat,linear-gradient(#fff,#fff) 0 0/.12em .9em no-repeat,
    linear-gradient(#fff,#fff) 100% 0/.9em .12em no-repeat,linear-gradient(#fff,#fff) 100% 0/.12em .9em no-repeat,
    linear-gradient(#fff,#fff) 0 100%/.9em .12em no-repeat,linear-gradient(#fff,#fff) 0 100%/.12em .9em no-repeat,
    linear-gradient(#fff,#fff) 100% 100%/.9em .12em no-repeat,linear-gradient(#fff,#fff) 100% 100%/.12em .9em no-repeat;
}
html.js .scene.anim .cam-focus{animation:cam-focus 4.4s ease-in-out infinite}
@keyframes cam-focus{0%,18%{transform:scale(1.25);opacity:.4}26%,100%{transform:scale(1);opacity:.95}}
.cam-top,.cam-bot{
  position:absolute;left:0;right:0;display:flex;align-items:center;gap:.9em;padding:.55em .8em;
  font-size:.78em;font-weight:600;letter-spacing:.03em;font-variant-numeric:tabular-nums;text-shadow:0 1px 2px rgba(0,0,0,.7);
}
.cam-top{top:0;background:linear-gradient(180deg,rgba(0,0,0,.55),transparent)}
.cam-bot{bottom:0;background:linear-gradient(0deg,rgba(0,0,0,.6),transparent);gap:.75em}
.cam-rec{display:flex;align-items:center;gap:.35em;color:#ff3b30}
.cam-rec i{width:.65em;height:.65em;border-radius:50%;background:#ff3b30}
html.js .scene.anim .cam-rec i{animation:rec 1s steps(1) infinite}
@keyframes rec{50%{opacity:.15}}
.cam-tc{margin-left:auto;margin-right:auto}
.cam-batt{display:flex;align-items:center;gap:.3em}
.cam-batt-i{width:1.7em;height:.85em;stroke-width:1.6}
.cam-meter{margin-left:auto;display:flex;gap:.15em;align-items:flex-end;height:1em}
.cam-meter i{width:.3em;height:60%;background:linear-gradient(0deg,#4cd964 60%,#ffcc00 85%,#ff3b30);border-radius:.1em}
html.js .scene.anim .cam-meter i{animation:meter .9s ease-in-out infinite alternate}
html.js .scene.anim .cam-meter i:last-child{animation-duration:.7s;animation-delay:-.3s}
@keyframes meter{0%{height:30%}40%{height:85%}70%{height:50%}100%{height:95%}}

/* ---------- 4 · Google Drive, then Instagram ---------- */
.scene-drive{background:#fff;color:#1F1F1F}
.gd-head{display:flex;align-items:center;gap:.5em;padding:.85em 1em .7em;border-bottom:1px solid #E8EAED}
.gd-logo{width:1.75em;height:auto}
.gd-head b{font-size:1.1em;font-weight:500;color:#444746}
.gd-path{margin-left:auto;font-size:.76em;color:#5F6368}
.gd-list{list-style:none;padding:.25em .7em}
.gd-list li{
  display:grid;grid-template-columns:2.5em 1fr 1.35em;grid-template-rows:auto auto auto;column-gap:.65em;align-items:center;
  padding:.42em .2em;border-bottom:1px solid #F1F3F4;
}
.gd-thumb{grid-row:1/4;width:2.5em;height:2.5em;border-radius:.4em;object-fit:cover}
.gd-icon{object-fit:contain;padding:.35em;background:#FCE8E6}
.gd-list b{font-size:.88em;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gd-sub{font-size:.72em;color:#5F6368}
.gd-bar{height:.28em;margin-top:.2em;border-radius:1em;background:#E8EAED;overflow:hidden}
.gd-bar i{display:block;height:100%;background:#1A73E8;transform-origin:0 50%}
html.js .scene.anim .gd-list li.on .gd-bar i{animation:bar-fill 1s ease-out both}
.gd-ok{grid-column:3;grid-row:1/4;width:1.35em;height:1.35em;color:#188038}
.gd-ok .k{stroke:#fff;stroke-width:2.4}
html.js .scene.anim .gd-list li.on .gd-ok{animation:gd-pop .4s var(--ease-out) 1s both}
@keyframes gd-pop{from{opacity:0;transform:scale(.3)}to{opacity:1;transform:none}}
.ig-note{
  position:absolute;left:.7em;right:.7em;bottom:.7em;display:flex;align-items:center;gap:.6em;
  padding:.55em .65em;border-radius:1em;background:rgba(255,255,255,.98);
  box-shadow:0 .8em 2em rgba(22,10,43,.28),0 0 0 1px rgba(0,0,0,.05);
}
html.js .scene.anim .ig-note:not(.on){translate:0 150%}
.ig-note-app{width:2.2em;height:2.2em;border-radius:.6em}
.ig-note p{display:flex;flex-direction:column;font-size:.8em;line-height:1.25;min-width:0}
.ig-note-thumb{margin-left:auto;width:2.3em;height:2.3em;border-radius:.3em;object-fit:cover}

/* ============================================================
   OFFERS — the switch, the tier cards, the add-ons
   ============================================================ */
/* both offers sit on the page; the switch stays pinned while they scroll by,
   lighting the one being read (script.js) and jumping to the other */
.offer-track{position:relative}
.switch-wrap{
  position:sticky;top:14px;z-index:20;display:flex;justify-content:center;
  margin-top:clamp(1.8rem,3.5vw,2.6rem);pointer-events:none;
  transition:top .5s var(--ease-out);
}
.switch-wrap .switch{pointer-events:auto;background:rgba(27,13,52,.94);box-shadow:0 18px 40px -20px rgba(0,0,0,.8)}
/* step below the nav whenever the nav is showing */
body:has(.nav.scrolled:not(.nav-hide)) .switch-wrap{top:calc(var(--nav-h,74px) + 10px)}
.switch{
  position:relative;display:inline-grid;grid-template-columns:1fr 1fr;
  padding:6px;border-radius:999px;background:rgba(31,15,58,.85);border:1px solid var(--line);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
.switch-ind{
  position:absolute;top:6px;bottom:6px;left:6px;width:calc(50% - 6px);border-radius:999px;
  background:linear-gradient(135deg,var(--rich-hi),var(--rich));
  box-shadow:0 10px 30px -10px rgba(106,43,194,.9),inset 0 1px 0 rgba(255,255,255,.2);
  transition:transform .6s var(--ease-out);
}
.switch[data-on="content"] .switch-ind{transform:translateX(100%)}
.switch-tab{
  position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;
  padding:.7rem clamp(1rem,3vw,2rem);border-radius:999px;line-height:1.15;
  color:var(--grey);transition:color .35s ease;
}
.switch-tab.is-on{color:var(--white)}
.switch-name{font-family:var(--display);font-weight:800;font-size:clamp(.98rem,1.6vw,1.12rem);letter-spacing:-.01em}
.switch-sub{font-size:.74rem;font-weight:500;opacity:.8}

.offer-panel{scroll-margin-top:calc(var(--nav-h,74px) + 96px)}
.offer-panel + .offer-panel{
  margin-top:clamp(3.5rem,8vw,6rem);padding-top:clamp(.5rem,2vw,1.5rem);
  border-top:1px solid var(--line);
}
.offer-intro{text-align:center;margin-top:clamp(2rem,4vw,3rem)}
.offer-kind{
  display:inline-flex;align-items:center;gap:.6rem;margin-bottom:1.1rem;
  padding:.32rem .95rem .32rem .34rem;border-radius:999px;font-size:.92rem;
  border:1px solid var(--line-2);background:rgba(169,145,237,.07);
}
.offer-num{
  display:grid;place-items:center;width:2em;height:2em;border-radius:50%;
  font-family:var(--display);font-weight:800;font-size:.78rem;
  background:linear-gradient(135deg,var(--rich-hi),var(--rich));
}
.offer-kind b{font-family:var(--display);font-weight:800;letter-spacing:-.01em}
.offer-unit{color:var(--grey);font-size:.84rem}
.offer-unit::before{content:"·";margin-right:.5rem}
.offer-tag{
  font-family:var(--display);font-weight:800;letter-spacing:-.025em;
  font-size:clamp(1.5rem,3.2vw,2.4rem);line-height:1.05;
}
.offer-desc{margin:.7rem auto 0;color:var(--grey);max-width:56ch}

.card{
  position:relative;isolation:isolate;
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,0) 40%),var(--card);
  border:1px solid var(--line);border-radius:22px;
  padding:1.7rem 1.45rem 1.45rem;display:flex;flex-direction:column;
  transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform .6s var(--ease-out),border-color .3s ease,box-shadow .4s ease;
}
/* spotlight that follows the pointer */
.card::before,.addon::before,.g-card::before{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background:radial-gradient(380px circle at var(--mx,50%) var(--my,0%),rgba(169,145,237,.16),transparent 45%);
  opacity:0;transition:opacity .4s ease;
}
.card:hover::before,.addon:hover::before,.g-card:hover::before{opacity:1}
.card:hover{border-color:var(--line-2)}

.card-featured{
  border-color:transparent;
  background:radial-gradient(120% 60% at 50% 0%,rgba(106,43,194,.42),transparent 62%),var(--card);
  box-shadow:0 34px 90px -34px rgba(106,43,194,.85);
}
/* a light beam travelling round the featured card's edge */
@property --ang{syntax:"<angle>";initial-value:0deg;inherits:false}
.card-featured::after{
  content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1.5px;pointer-events:none;
  background:conic-gradient(from var(--ang),rgba(169,145,237,.35) 0deg,rgba(169,145,237,.35) 200deg,#EEC5F6 260deg,#A991ED 290deg,rgba(169,145,237,.35) 330deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  animation:beam 5s linear infinite;
}
@keyframes beam{to{--ang:360deg}}
.badge{
  position:absolute;top:-.75rem;left:50%;transform:translateX(-50%);z-index:2;
  background:var(--white);color:var(--rich);font-size:.7rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  padding:.32rem .75rem;border-radius:999px;white-space:nowrap;
  box-shadow:0 8px 24px -8px rgba(106,43,194,.8);
}
.tier-head{display:flex;align-items:center;justify-content:space-between;gap:.7rem}
.tier-head h3{font-family:var(--display);font-weight:800;font-size:clamp(1.35rem,2vw,1.6rem);letter-spacing:-.02em;line-height:1}
.chip-count{
  background:rgba(169,145,237,.1);border:1px solid rgba(169,145,237,.22);
  color:var(--lilac);font-size:.7rem;font-weight:600;padding:.26rem .6rem;
  border-radius:999px;white-space:nowrap;
}
.price{display:flex;align-items:baseline;flex-wrap:wrap;gap:.2rem .45rem;margin-top:1.3rem}
.price-n{font-family:var(--display);font-weight:900;font-size:clamp(2.4rem,3.8vw,3.2rem);letter-spacing:-.04em;line-height:1}
.price-u{font-weight:800;font-size:.9rem;color:var(--violet);letter-spacing:.04em}
.price-per{font-size:.9rem;color:var(--grey)}
.tier-time{
  display:inline-flex;align-items:center;gap:.45rem;align-self:flex-start;margin-top:.9rem;
  font-size:.82rem;font-weight:600;color:var(--soft);
}
.tier-time .ico{color:var(--violet)}

.ticks{list-style:none;display:grid;gap:.75rem;margin-top:1.3rem;padding-top:1.2rem;border-top:1px solid var(--line);flex:1;align-content:start}
.ticks li{display:flex;gap:.7rem;align-items:flex-start;font-size:.93rem;line-height:1.45;color:var(--soft)}
.tick{width:20px;height:20px;flex:none;margin-top:.05em}
.tick circle{fill:rgba(169,145,237,.14)}
.tick path{fill:none;stroke:var(--violet);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:13}
.card-featured .tick circle{fill:var(--violet)}
.card-featured .tick path{stroke:var(--ink)}
/* ticks draw themselves in once the card has arrived */
html.js .card.reveal:not(.is-in) .tick path{stroke-dashoffset:13}
.card.reveal.is-in .tick path{animation:draw 0.55s var(--ease-out) both;animation-delay:calc(.4s + var(--d,0s) + var(--t,0) * 90ms)}
.ticks li:nth-child(2){--t:1}.ticks li:nth-child(3){--t:2}.ticks li:nth-child(4){--t:3}.ticks li:nth-child(5){--t:4}.ticks li:nth-child(6){--t:5}
@keyframes draw{from{stroke-dashoffset:13}to{stroke-dashoffset:0}}
.card-btn{margin-top:1.5rem;justify-content:center;width:100%}

.offer-note{
  display:flex;align-items:center;justify-content:center;gap:.6rem;flex-wrap:wrap;text-align:center;
  margin:clamp(1.6rem,3vw,2.2rem) auto 0;max-width:76ch;font-size:.95rem;color:var(--grey);
}
.offer-note .ico{color:var(--violet)}
.offer-note b{color:var(--white);font-weight:700}

.addons{margin-top:clamp(3.5rem,7vw,5.5rem);padding-top:clamp(2.5rem,5vw,3.5rem);border-top:1px solid var(--line)}
.addons-head{display:flex;align-items:baseline;justify-content:space-between;gap:.5rem 2rem;flex-wrap:wrap}
.addons-head .sub{margin-top:0}
.h-mid{font-family:var(--display);font-weight:800;font-size:clamp(1.7rem,3vw,2.4rem);letter-spacing:-.03em;line-height:1}
.addon{
  position:relative;isolation:isolate;border:1px solid var(--line);border-radius:20px;padding:1.4rem;
  background:var(--card);
  transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform .6s var(--ease-out),border-color .3s ease;
}
.addon:hover{border-color:var(--line-2)}
.addon-ico{
  width:46px;height:46px;border-radius:14px;display:grid;place-items:center;color:var(--violet);
  background:rgba(169,145,237,.12);border:1px solid rgba(169,145,237,.2);
  transition:transform .5s var(--ease-out),background .3s ease,color .3s ease;
}
.addon-ico svg{width:22px;height:22px}
.addon:hover .addon-ico{transform:rotate(-8deg) scale(1.08);background:var(--rich);color:var(--white)}
.addon h4{font-family:var(--display);font-weight:800;font-size:1.2rem;letter-spacing:-.02em;margin-top:1.1rem}
.addon-price{font-weight:700;color:var(--violet);font-size:.92rem;margin-top:.25rem}
.addon-desc{color:var(--grey);font-size:.9rem;line-height:1.5;margin-top:.6rem}

/* ============================================================
   GUARANTEES
   ============================================================ */
.g-card{
  position:relative;isolation:isolate;display:flex;flex-direction:column;
  padding:1.5rem 1.35rem;border-radius:20px;border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(106,43,194,.16),rgba(106,43,194,0) 55%),var(--card);
  min-height:17rem;
  transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform .6s var(--ease-out),border-color .3s ease;
}
.g-card:hover{border-color:var(--line-2)}
.g-ico{
  width:48px;height:48px;border-radius:50%;display:grid;place-items:center;color:var(--violet);
  background:rgba(169,145,237,.12);border:1px solid rgba(169,145,237,.24);
  transition:transform .6s var(--ease-out);
}
.g-ico svg{width:22px;height:22px}
.g-card:hover .g-ico{transform:rotate(-12deg) scale(1.08)}
.g-tag{margin-top:auto;padding-top:1.4rem;font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--violet)}
.g-title{font-family:var(--display);font-weight:800;font-size:clamp(1.25rem,1.8vw,1.5rem);line-height:1.08;letter-spacing:-.02em;margin-top:.45rem}
.g-sub{color:var(--grey);font-size:.88rem;line-height:1.5;margin-top:.55rem}

.rules{
  list-style:none;counter-reset:r;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--g);
  margin-top:clamp(2rem,4vw,3rem);
}
.rules li{
  position:relative;padding:1.1rem 0 0 2.6rem;border-top:1px solid var(--line);
  font-size:.92rem;color:var(--grey);line-height:1.5;
}
.rules li::before{
  counter-increment:r;content:counter(r);position:absolute;left:0;top:1.05rem;
  width:1.7rem;height:1.7rem;border-radius:50%;display:grid;place-items:center;
  font-family:var(--display);font-weight:800;font-size:.8rem;color:var(--ink);background:var(--violet);
}
.rules b{display:block;color:var(--white);font-weight:700;margin-bottom:.15rem}

/* ============================================================
   SCOPE
   ============================================================ */
.sides{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(1.4rem,3vw,2.4rem);align-items:start}
.side{padding-top:1.5rem;border-top:1px solid var(--line)}
.side-ours{
  background:linear-gradient(180deg,rgba(169,145,237,.13),rgba(169,145,237,.03) 58%,transparent);
  border-top:2px solid var(--violet);padding:1.5rem 1.5rem .5rem;border-radius:0 0 18px 18px;
}
.h-side{font-family:var(--display);font-weight:800;font-size:clamp(1.6rem,2.8vw,2.3rem);line-height:1;letter-spacing:-.03em}
.side-ours .h-side{color:var(--violet)}
.side-list{list-style:none;margin-top:1.1rem}
.side-list li{
  position:relative;padding:.75rem 0 .75rem 1.6rem;border-bottom:1px solid var(--line);color:var(--soft);font-size:.98rem;
  transition:padding-left .4s var(--ease-out),color .3s ease;
}
.side-list li:hover{padding-left:2rem;color:var(--white)}
.side-list li:last-child{border-bottom:0}
.side-list li::before{content:"";position:absolute;left:0;top:1.35rem;width:10px;height:2px;border-radius:2px;background:var(--grey)}
.side-ours .side-list li::before{background:var(--violet)}
.sides-close{
  margin:clamp(2.2rem,4.5vw,3.5rem) auto 0;text-align:center;max-width:36ch;
  font-family:var(--display);font-weight:800;letter-spacing:-.025em;
  font-size:clamp(1.3rem,2.4vw,1.9rem);line-height:1.15;text-wrap:balance;
}

/* ============================================================
   STATS
   ============================================================ */
.stats .stat{
  position:relative;background:var(--white);border-radius:20px;overflow:hidden;
  text-align:center;padding:clamp(3.4rem,7vw,5rem) 1rem 1.6rem;
  box-shadow:0 14px 40px -16px rgba(22,10,43,.18);
  transition:transform .5s var(--ease-out),box-shadow .4s ease;
}
.stats .stat:hover{transform:translateY(-6px);box-shadow:0 24px 50px -18px rgba(106,43,194,.35)}
.stat-top{
  position:absolute;inset:0 0 auto;height:70%;
  background:linear-gradient(180deg,var(--violet) 0%,rgba(169,145,237,.4) 50%,rgba(255,255,255,0) 100%);
}
.stat-n{
  position:relative;font-family:var(--display);font-weight:900;letter-spacing:-.04em;
  font-size:clamp(2.6rem,4.6vw,3.8rem);line-height:1;color:var(--text-dark);font-variant-numeric:tabular-nums;
  word-spacing:.12em;
}
.stat-l{position:relative;color:var(--muted-dark);font-size:.88rem;margin-top:.45rem;line-height:1.4}

/* ============================================================
   FAQ
   ============================================================ */
.tabs{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin-top:clamp(1.4rem,3vw,2.2rem)}
.tab{
  background:var(--white);color:var(--text-dark);font-size:.86rem;font-weight:600;
  padding:.55rem 1rem;border-radius:999px;border:1px solid var(--line-dark);
  transition:background .25s ease,color .25s ease,border-color .25s ease,transform .3s var(--ease-out);
}
.tab:hover{border-color:var(--rich);transform:translateY(-1px)}
.tab.is-on{background:var(--rich);border-color:var(--rich);color:var(--white)}

.acc{margin-top:clamp(1.4rem,3vw,2.2rem);border-top:1px solid var(--line-dark)}
.acc-item{border-bottom:1px solid var(--line-dark)}
.acc-item[hidden]{display:none}
.acc-item.is-showing{animation:fade-up .45s var(--ease-out) both}
.acc-btn{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:1.2rem;
  padding:1.15rem .2rem;text-align:left;font-family:var(--display);font-size:1.12rem;font-weight:700;letter-spacing:-.015em;
  color:var(--text-dark);transition:color .25s ease;
}
.acc-btn:hover,.acc-btn[aria-expanded="true"]{color:var(--rich)}
.acc-ico{
  position:relative;width:30px;height:30px;flex:none;border-radius:50%;
  border:1px solid var(--line-dark);transition:background .3s ease,border-color .3s ease,transform .45s var(--ease-out);
}
.acc-ico::before,.acc-ico::after{
  content:"";position:absolute;inset:0;margin:auto;background:var(--muted-dark);border-radius:2px;
  transition:transform .4s var(--ease),background .25s ease;
}
.acc-ico::before{width:12px;height:1.8px}
.acc-ico::after{width:1.8px;height:12px}
.acc-btn:hover .acc-ico{border-color:var(--rich)}
.acc-btn[aria-expanded="true"] .acc-ico{background:var(--rich);border-color:var(--rich);transform:rotate(180deg)}
.acc-btn[aria-expanded="true"] .acc-ico::before{background:var(--white)}
.acc-btn[aria-expanded="true"] .acc-ico::after{transform:rotate(90deg) scaleY(0);background:var(--white)}
.acc-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease)}
.acc-item.open .acc-panel{grid-template-rows:1fr}
.acc-body{overflow:hidden}
.acc-body p{color:var(--muted-dark);font-size:.98rem;line-height:1.65;padding:0 .2rem 1.25rem;max-width:70ch}
.faq-empty{margin-top:1.6rem;text-align:center;color:var(--muted-dark)}

/* ============================================================
   FINAL CTA CARD
   ============================================================ */
.cta-card{
  position:relative;isolation:isolate;overflow:hidden;
  background:var(--ink);border-radius:28px;color:var(--white);
  padding:clamp(1.6rem,4vw,3.2rem);
  display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(1.6rem,4vw,3rem);align-items:center;
}
.cta-glow{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(480px circle at var(--mx,20%) var(--my,80%),rgba(106,43,194,.55),transparent 60%),
    radial-gradient(60% 60% at 100% 0%,rgba(169,145,237,.18),transparent 70%);
  transition:background .2s linear;
}
.cta-copy .h-sec{font-size:clamp(2rem,4.2vw,3.5rem)}
.cta-copy p{color:var(--grey);margin-top:1rem;max-width:44ch}
.cta-copy .btn{margin-top:1.6rem}
.cta-alt{margin-top:1.4rem;display:flex;gap:.7rem;flex-wrap:wrap;align-items:center;color:var(--grey);font-size:.92rem}
.cta-alt a{border-bottom:1px solid var(--line-2);padding-bottom:1px;transition:color .22s ease,border-color .22s ease}
.cta-alt a:hover{color:var(--violet);border-color:var(--violet)}
@media (max-width:680px){.cta-alt{flex-direction:column;align-items:flex-start;gap:.75rem}.cta-alt > span[aria-hidden]{display:none}}
.cta-media .ph{background:radial-gradient(78% 60% at 50% 42%,rgba(169,145,237,.1),transparent 70%),var(--card);border-color:var(--line)}
.cta-media .ph-label{color:var(--grey);background:rgba(22,10,43,.6);border-color:var(--line)}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{position:relative;isolation:isolate;background:var(--ink);padding:clamp(2.6rem,5vw,3.8rem) 0 1.6rem;overflow:hidden}
/* the mark, huge and faint, turning a third as the footer scrolls in */
.foot-mark{
  position:absolute;z-index:-1;right:-8%;bottom:-34%;width:min(620px,72vw);height:auto;pointer-events:none;
  color:rgba(169,145,237,.07);transform-origin:52.4% 62.7%;transform:rotate(var(--rot,0deg));
}
.foot-top{display:flex;justify-content:space-between;gap:2rem 4rem;flex-wrap:wrap}
.foot-top > :first-child{flex:1 1 280px}
.foot-brand{display:inline-block;line-height:0}
.logo-foot{height:58px}
.foot-line{color:var(--grey);font-size:.92rem;margin-top:1rem}
.foot-cta{margin-top:1.2rem}
.foot-links{font-size:.92rem}
.foot-h{font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--violet);margin-bottom:.8rem}
.foot-links ul{list-style:none;display:flex;flex-direction:column;gap:.5rem;color:var(--soft)}
.foot-links a{transition:color .22s ease}
.foot-links a:hover{color:var(--violet)}
.foot-bot{
  margin-top:clamp(2.4rem,5vw,3.5rem);padding-top:1.2rem;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  color:var(--grey);font-size:.85rem;
}
.foot-legal{display:flex;gap:1.2rem}
.foot-legal a:hover{color:var(--violet)}

/* mobile follow-along CTA */
.fab{display:none}

/* ============================================================
   SCROLL REVEAL — script.js adds .is-in as each element arrives.
   Without JavaScript nothing is hidden.
   ============================================================ */
html.js .reveal:not(.is-in){opacity:0}
.reveal.is-in{animation:rise .95s var(--ease-out) both;animation-delay:var(--d,0s)}
.reveal-blur.is-in{animation-name:rise-blur;animation-duration:1.15s}
@keyframes rise{from{opacity:0;translate:0 34px}to{opacity:1;translate:0 0}}
@keyframes rise-blur{from{opacity:0;translate:0 26px;filter:blur(12px)}to{opacity:1;translate:0 0;filter:blur(0)}}

/* the villa film opens up from a smaller frame */
html.js .clip-reveal{clip-path:inset(9% 7% 9% 7% round 18px);transition:clip-path 1.5s var(--ease-out)}
html.js .clip-reveal.is-in{clip-path:inset(0 0 0 0 round 18px)}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  .row-4{grid-template-columns:repeat(2,1fr)}
  .nav-links{display:none}
  .nav-inner{grid-template-columns:auto 1fr}
  .nav .brand{justify-self:start}
  .steps-track{display:none}
  .guar .g-card{min-height:14rem}
}
@media (max-width:900px){
  .row-3{grid-template-columns:1fr}
  .sides{grid-template-columns:1fr}
  .cta-card{grid-template-columns:1fr}
  .audit{grid-template-columns:1fr}
  .rules{grid-template-columns:1fr}
  .nav-tel{display:none}
  .scroll-cue{display:none}
  .film-toggle{right:var(--gut);bottom:14px;width:40px;height:40px}
  .row-3.cards{max-width:520px;margin-inline:auto}
}
@media (max-width:680px){
  body{font-size:16px}
  .nav-inner{padding-block:.65rem}
  .nav-cta span{display:none}
  .nav-cta{padding:.62rem .75rem}
  .nav-cta .chev{width:8px;height:11px}

  /* four- and three-up rows become a snap-scrolling rail */
  .row-scroll{
    display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
    scrollbar-width:none;margin-inline:calc(var(--gut) * -1);
    padding-inline:var(--gut);padding-block:1rem .6rem;gap:.8rem;
  }
  .row-scroll::-webkit-scrollbar{display:none}
  .row-scroll > *{flex:0 0 82%;scroll-snap-align:center}
  .row-3.cards{max-width:none;margin-inline:calc(var(--gut) * -1)}
  .stats.row-scroll > *{flex:0 0 62%}
  .card,.addon,.g-card,.chat{transform:none!important}

  /* the three reels fan out and overlap, the middle one in front */
  .reels{--cw:min(46vw,250px)}
  html.js .reels{--cw:clamp(120px,min(46vw,calc((100svh - 360px) * .53)),250px)}
  html.js .reels-sec{height:240vh}
  .reel-card[data-card="0"]{--x:calc(var(--cw) * -.6);--y:22px;--r:-7deg;--sc:.84}
  .reel-card[data-card="2"]{--x:calc(var(--cw) * .6);--y:22px;--r:7deg;--sc:.84}
  .reel-phone{padding:5px;border-radius:22px}
  .reels .ph,.reels .slot-video{border-radius:17px}
  .ig{inset:5px;border-radius:17px}
  .logo-nav{height:38px}
  .logo-foot{height:50px}

  .hero-title{max-width:none;letter-spacing:-.035em}
  .hero-actions .btn{width:100%;justify-content:center}
  .chat-body{min-height:420px}
  .foot-bot{flex-direction:column;gap:.6rem}
  .footer{padding-bottom:5.5rem}

  .fab{
    display:flex;justify-content:center;position:fixed;left:12px;right:12px;bottom:12px;z-index:90;
    padding:1rem 1.2rem;font-size:.98rem;
    translate:0 160%;transition:translate .55s var(--ease-out),background .25s ease;
  }
  .fab.is-on{translate:0 0}
}

/* ============================================================
   REDUCED MOTION + ?static=1 — everything in its final place
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  html.js .reveal:not(.is-in),html.js .chat .bubble:not(.is-on){opacity:1;translate:none;scale:none}
  html.js .clip-reveal{clip-path:none}
  html.js .hero-title [data-split]:not(.is-split){visibility:visible}
  html.js .reels-sec{height:auto}
  html.js .reels-pin{position:static;height:auto;padding-block:var(--secpad)}
  html.js .reels .ig-sheet,html.js .reels .ig-activity,html.js .reels .ig-toast{opacity:1;scale:1;translate:none}
  .grain{display:none}
}
html.static *,html.static *::before,html.static *::after{animation:none!important;transition:none!important}
html.static .reels-sec{height:auto!important}
html.static .reels-pin{position:static!important;height:auto!important;padding-block:var(--secpad)!important}
html.static .reels .ig-sheet,html.static .reels .ig-activity,html.static .reels .ig-toast{opacity:1!important;scale:1!important;translate:none!important}
html.static .reveal,html.static .chat .bubble{opacity:1!important;translate:none!important;scale:none!important}
html.static .clip-reveal{clip-path:none!important}
html.static .hero-title [data-split]{visibility:visible!important}
html.static .tick path{stroke-dashoffset:0!important}

/* ============================================================
   PORTFOLIO PAGE — a persuasion page for a visitor who is warm but
   unsure: proof first (the reels, decoded), then the doubts named and
   answered, then the risk removed, then one easy step (the audit).
   ============================================================ */
.nav-links a[aria-current="page"]{color:var(--white)}
.nav-links a[aria-current="page"]::after{transform:scaleX(1)}

/* hero: copy on the left, the three reels playing on the right */
.p-hero{position:relative;isolation:isolate;overflow:hidden;background:var(--ink);padding:clamp(7rem,13vh,9rem) 0 clamp(2.5rem,5vw,3.5rem)}
.p-hero .hero-glow{z-index:-1}
.p-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.p-hero .kicker{margin-bottom:0}
.p-title{font-size:clamp(2.6rem,5.6vw,5.2rem);max-width:13ch}
.p-phones{position:relative;height:clamp(400px,44vw,560px)}
.p-phone{
  position:absolute;left:50%;top:50%;width:clamp(150px,14.5vw,210px);padding:0;
  transform:translate(-50%,-50%) translate(var(--x),var(--y)) rotate(var(--r));
  transition:transform .6s var(--ease-out);
}
.p-phone .reel-phone{display:block}
.p-phone-front{z-index:2;width:clamp(170px,16.5vw,236px)}
.p-phone:hover{transform:translate(-50%,-50%) translate(var(--x),calc(var(--y) - 3%)) rotate(var(--r)) scale(1.03);z-index:3}
.p-phone video,.case-phone video{display:block;width:100%;aspect-ratio:9/16;object-fit:cover;border-radius:19px;background:#0E061C}
.p-play{
  position:absolute;left:50%;bottom:7%;z-index:4;translate:-50% 0;
  display:inline-flex;align-items:center;gap:.4rem;padding:.42rem .75rem;border-radius:999px;white-space:nowrap;
  font-size:.74rem;font-weight:700;color:#fff;background:rgba(22,10,43,.6);border:1px solid rgba(255,255,255,.18);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:background .25s ease;
}
.p-play svg{width:.85rem;height:.85rem;fill:currentColor}
.p-phone:hover .p-play,.case-phone:hover .p-play{background:var(--rich)}
/* the side phones tuck behind the middle one: their pill shows on hover only */
.p-phone:not(.p-phone-front) .p-play{opacity:0;transition:opacity .25s ease,background .25s ease}
.p-phone:not(.p-phone-front):hover .p-play,.p-phone:not(.p-phone-front):focus-visible .p-play{opacity:1}
.p-facts{
  list-style:none;display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;margin-top:clamp(2rem,4vw,3rem);padding-top:1.4rem;
  border-top:1px solid var(--line);color:var(--soft);font-size:.9rem;font-weight:600;
}
.p-facts li{display:flex;align-items:center;gap:.5rem}
.p-facts li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--violet);box-shadow:0 0 0 4px rgba(169,145,237,.18)}

/* what we see / what we do */
.mirror{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--g);margin-top:clamp(1.8rem,3.5vw,2.8rem)}
.mirror-card{background:#fff;border-radius:20px;padding:1.4rem;box-shadow:0 14px 40px -18px rgba(22,10,43,.2);display:flex;flex-direction:column;gap:1rem}
.mirror-card p{display:flex;gap:.7rem;align-items:flex-start;line-height:1.5}
.mirror-card svg{flex:none;width:1.6rem;height:1.6rem;padding:.3rem;border-radius:50%;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.mirror-seen{color:var(--muted-dark);font-size:.95rem;padding-bottom:1rem;border-bottom:1px dashed rgba(22,10,43,.14)}
.mirror-seen svg{color:#C2189B;background:rgba(255,92,210,.12)}
.mirror-do{color:var(--text-dark);font-weight:600;font-size:.98rem}
.mirror-do svg{color:#fff;background:var(--rich)}

/* the cases: a playing reel, and what it does, shot by shot */
.cases{display:grid;gap:clamp(3rem,7vw,5.5rem);margin-top:clamp(2.5rem,5vw,4rem)}
.case{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.case-flip .case-media{order:2}
.case-media{display:flex;justify-content:center}
.case-phone{position:relative;width:min(280px,72vw);padding:0;transition:transform .6s var(--ease-out)}
.case-phone .reel-phone{display:block}
.case-phone:hover{transform:translateY(-6px) rotate(-1deg)}
.case-n{
  font-family:var(--display);font-weight:900;font-size:clamp(3rem,6vw,4.6rem);line-height:.9;letter-spacing:-.04em;
  color:transparent;background:linear-gradient(180deg,rgba(169,145,237,.55),rgba(169,145,237,.08));
  -webkit-background-clip:text;background-clip:text;
}
.case-tags{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:.8rem}
.case-tags span{font-size:.72rem;font-weight:700;letter-spacing:.04em;padding:.28rem .65rem;border-radius:999px;color:var(--lilac);background:rgba(169,145,237,.1);border:1px solid rgba(169,145,237,.24)}
.case h3{font-family:var(--display);font-weight:800;font-size:clamp(1.7rem,3vw,2.4rem);line-height:1.02;letter-spacing:-.03em;word-spacing:.1em;margin-top:.8rem}
.case-credit{margin-top:.4rem;color:var(--violet);font-weight:600;font-size:.92rem}
.case-credit:empty{display:none}
.case-brief{margin-top:1rem;color:var(--soft);font-size:1rem;max-width:52ch}
.case-brief b{display:block;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--violet);margin-bottom:.25rem}
.case-h{margin-top:1.4rem;font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--violet)}
.case-list{list-style:none;margin-top:.5rem;border-top:1px solid var(--line)}
.case-list li{display:flex;gap:.9rem;align-items:baseline;padding:.8rem 0;border-bottom:1px solid var(--line);color:var(--soft);font-size:.96rem;line-height:1.5}
.case-list .t{flex:none;font-family:var(--display);font-weight:800;font-size:.8rem;color:var(--ink);background:var(--violet);border-radius:.4rem;padding:.12rem .42rem;font-variant-numeric:tabular-nums}
.case-stills{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;margin-top:1.3rem;max-width:420px}
.case-stills img{width:100%;aspect-ratio:9/16;object-fit:cover;border-radius:12px;transition:transform .5s var(--ease-out)}
.case-stills img:hover{transform:scale(1.04) rotate(-1deg)}
.case-cta{
  display:flex;align-items:center;justify-content:space-between;gap:1rem 2rem;flex-wrap:wrap;
  margin-top:clamp(3rem,6vw,4.5rem);padding:1.4rem 1.6rem;border-radius:20px;
  background:linear-gradient(120deg,rgba(106,43,194,.35),rgba(106,43,194,.08));border:1px solid var(--line-2);
}
.case-cta p{font-family:var(--display);font-weight:800;font-size:clamp(1.2rem,2.2vw,1.55rem);letter-spacing:-.02em;word-spacing:.1em}

/* before / after */
.ba-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--g);margin-top:clamp(1.8rem,3.5vw,2.8rem)}
.ba-frame{--pos:50%;position:relative;aspect-ratio:4/5;border-radius:20px;overflow:hidden;box-shadow:0 18px 50px -22px rgba(22,10,43,.35);touch-action:pan-y}
.ba-layer{position:absolute;inset:0}
.ba-layer .ph,.ba-layer img,.ba-layer video{width:100%;height:100%;object-fit:cover;border:0;border-radius:0}
.ba-before{clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.ba .ba-after .ph{background:radial-gradient(70% 60% at 50% 40%,rgba(169,145,237,.22),transparent 70%),var(--card)}
.ba .ba-after .ph-label{color:var(--grey);background:rgba(22,10,43,.6);border-color:var(--line)}
.ba .ba-before .ph{background:linear-gradient(180deg,#D5D3DA,#BDBAC4)}
.ba .ba-before .ph-label{color:#4A4556;background:rgba(255,255,255,.6);border-color:rgba(22,10,43,.12)}
.ba .ba-before .ph-label{left:25%}
.ba .ba-after .ph-label{left:75%}
.ba-tag{position:absolute;top:.9rem;z-index:3;padding:.3rem .7rem;border-radius:999px;font-size:.74rem;font-weight:700;letter-spacing:.04em;pointer-events:none}
.ba-tag-before{left:.9rem;background:rgba(255,255,255,.88);color:var(--text-dark)}
.ba-tag-after{right:.9rem;background:var(--rich);color:#fff}
.ba-handle{position:absolute;top:0;bottom:0;left:var(--pos);z-index:3;width:2px;margin-left:-1px;background:#fff;box-shadow:0 0 12px rgba(0,0,0,.35);pointer-events:none}
.ba-handle i{
  position:absolute;top:50%;left:50%;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;
  background:#fff;box-shadow:0 6px 20px rgba(22,10,43,.35);
}
.ba-handle i::before,.ba-handle i::after{content:"";position:absolute;top:50%;width:0;height:0;margin-top:-6px;border:6px solid transparent}
.ba-handle i::before{left:7px;border-right-color:var(--rich)}
.ba-handle i::after{right:7px;border-left-color:var(--rich)}
.ba-range{position:absolute;inset:0;z-index:4;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;-webkit-appearance:none;appearance:none}
.ba-frame:focus-within .ba-handle i{outline:3px solid var(--violet);outline-offset:3px}
.ba figcaption{margin-top:.9rem;color:var(--muted-dark);font-size:.95rem;line-height:1.5}
.ba figcaption b{color:var(--text-dark);margin-right:.3rem}

/* photos: one album at a time, a property switcher above it */
.case{scroll-margin-top:90px}
.alb-tabs{
  position:relative;display:flex;gap:.35rem;width:max-content;max-width:100%;margin-top:clamp(1.8rem,3.5vw,2.6rem);
  padding:.35rem;border-radius:999px;background:rgba(255,255,255,.04);border:1px solid var(--line);
  overflow-x:auto;scrollbar-width:none;
}
.alb-tabs::-webkit-scrollbar{display:none}
.alb-ind{
  position:absolute;top:.35rem;bottom:.35rem;left:0;width:0;border-radius:999px;pointer-events:none;
  background:linear-gradient(120deg,var(--rich),#4E1C96);box-shadow:0 10px 30px -10px rgba(106,43,194,.8);
  transition:translate .55s var(--ease-out),width .55s var(--ease-out);
}
.alb-tab{
  position:relative;z-index:1;flex:none;display:flex;align-items:center;gap:.7rem;padding:.4rem 1.1rem .4rem .4rem;border-radius:999px;
  text-align:left;color:var(--grey);transition:color .3s ease;
}
.alb-tab:hover{color:var(--white)}
.alb-tab.is-on{color:var(--white)}
.alb-tab img{width:42px;height:42px;border-radius:50%;object-fit:cover;flex:none;border:2px solid rgba(255,255,255,.14);transition:border-color .3s ease}
.alb-tab.is-on img{border-color:rgba(255,255,255,.55)}
.alb-tab-txt{display:flex;flex-direction:column;line-height:1.15}
.alb-tab b{font-family:var(--display);font-weight:800;font-size:1rem;letter-spacing:-.01em;word-spacing:.06em;white-space:nowrap}
.alb-tab small{font-size:.74rem;font-weight:600;opacity:.75;white-space:nowrap}
.alb-tab:focus-visible{outline:2px solid var(--violet);outline-offset:2px}
/* without JavaScript the pill sits on the first tab */
html:not(.js) .alb-tab.is-on{background:var(--rich)}

.albs{margin-top:clamp(1.2rem,2.4vw,1.8rem)}
.alb[hidden]{display:none}
.alb-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:clamp(140px,15.5vw,236px);gap:clamp(.5rem,1vw,.8rem)}
.ph-tile{position:relative;overflow:hidden;padding:0;border-radius:16px;background:var(--card);cursor:zoom-in;isolation:isolate}
.ph-big{grid-column:span 2;grid-row:span 2}
.ph-wide{grid-column:span 2}
.ph-tile img{width:100%;height:100%;object-fit:cover;object-position:var(--op,50% 50%);transition:transform 1s var(--ease-out),scale 1.6s var(--ease-out)}
.ph-tile::after{
  content:"";position:absolute;inset:auto 0 0 0;height:55%;z-index:1;pointer-events:none;
  background:linear-gradient(0deg,rgba(14,6,28,.72),transparent);transition:opacity .4s ease;
}
.ph-cap{
  position:absolute;left:.9rem;bottom:.75rem;z-index:2;font-family:var(--display);font-weight:800;font-size:.95rem;
  letter-spacing:-.01em;word-spacing:.06em;color:#fff;text-align:left;transition:opacity .4s ease,translate .5s var(--ease-out);
}
.ph-big .ph-cap{font-size:1.15rem;left:1.1rem;bottom:1rem}
.ph-tile:hover img{transform:scale(1.06)}
.ph-tile:focus-visible{outline:3px solid var(--violet);outline-offset:3px}
@media (hover:hover) and (pointer:fine){
  .ph-tile:not(:hover):not(:focus-visible)::after{opacity:0}
  .ph-tile:not(:hover):not(:focus-visible) .ph-cap{opacity:0;translate:0 8px}
}
/* each tile wipes up into place, the photo settling inside it */
.ph-tile{clip-path:inset(0 0 0 0 round 16px);transition:clip-path 1.1s var(--ease-out);transition-delay:calc(var(--i,0) * 75ms)}
html.js .alb:not(.is-in) .ph-tile{clip-path:inset(100% 0 0 0 round 16px);transition:none}
html.js .alb:not(.is-in) .ph-tile img{scale:1.22;transition:none}
.alb.is-in .ph-tile img{transition-delay:0s,calc(var(--i,0) * 75ms)}

.alb-reel{
  display:inline-flex;align-items:center;gap:.6rem;margin-top:1rem;color:var(--lilac);font-weight:600;font-size:.92rem;
  transition:color .25s ease;
}
.alb-reel:hover{color:var(--white)}
.alb-reel-ico{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--rich);color:#fff;flex:none;transition:transform .4s var(--ease-out)}
.alb-reel:hover .alb-reel-ico{transform:scale(1.12)}
.alb-reel-ico svg{width:12px;height:12px;fill:currentColor;margin-left:2px}

.ph-h{margin-top:clamp(2.2rem,4.5vw,3.2rem)}
.ph-points{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--g);margin-top:.9rem}
.ph-points li{display:flex;gap:1rem;align-items:flex-start;padding:1.2rem 1.3rem;border-radius:18px;background:var(--card);border:1px solid var(--line)}
.ph-points .g-ico{flex:none}
.ph-points p{color:var(--soft);font-size:.95rem;line-height:1.5}
.ph-points b{display:block;font-family:var(--display);font-weight:800;font-size:1.08rem;letter-spacing:-.01em;color:var(--white);margin-bottom:.15rem}
.ph-offer{
  display:flex;align-items:center;justify-content:space-between;gap:1rem 2rem;flex-wrap:wrap;
  margin-top:var(--g);padding:1.1rem 1.1rem 1.1rem 1.5rem;border-radius:18px;border:1px dashed var(--line-2);
}
.ph-offer p{font-family:var(--display);font-weight:800;font-size:clamp(1.02rem,1.7vw,1.2rem);letter-spacing:-.01em;word-spacing:.08em}
.ph-offer .btn{margin-top:0}

/* the photo viewer */
.pb-fig{display:grid;justify-items:center;gap:.9rem;margin:0}
.pb-img{
  width:min(92vw,calc(82vh * 1.5),1500px);aspect-ratio:3/2;object-fit:contain;border-radius:14px;background:#0E061C;
  box-shadow:0 30px 80px rgba(0,0,0,.6);transition:opacity .3s ease,translate .45s var(--ease-out);
}
.pb-img.is-swap{opacity:0;translate:var(--dx,0) 0;transition:none}
.pb-cap{display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:.35rem .8rem;color:var(--soft);font-size:.95rem;padding-inline:16px}
.pb-alb{font-family:var(--display);font-weight:800;color:#fff}
.pb-count{color:var(--grey);font-size:.85rem;font-variant-numeric:tabular-nums}
.pb-nav{
  position:fixed;top:50%;z-index:2;width:52px;height:52px;margin-top:-26px;border-radius:50%;
  display:grid;place-items:center;color:#fff;background:rgba(255,255,255,.12);transition:background .2s ease,scale .3s var(--ease-out);
}
.pb-nav:hover{background:var(--rich);scale:1.06}
.pb-nav svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.pb-prev{left:16px}
.pb-next{right:16px}
.pb[open]{touch-action:pan-y}

/* objections, answered straight */
.obj-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--g);margin-top:clamp(1.8rem,3.5vw,2.8rem)}
.obj{position:relative;background:#fff;border-radius:20px;padding:1.5rem 1.4rem;box-shadow:0 14px 40px -18px rgba(22,10,43,.18);transition:transform .5s var(--ease-out),box-shadow .4s ease}
.obj:hover{transform:translateY(-5px);box-shadow:0 22px 50px -18px rgba(106,43,194,.32)}
.obj h3{font-family:var(--display);font-weight:800;font-size:1.18rem;line-height:1.15;letter-spacing:-.015em;word-spacing:.08em;color:var(--text-dark)}
.obj p{margin-top:.7rem;color:var(--muted-dark);font-size:.95rem;line-height:1.55}

/* no risk */
.risk{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--g);margin-top:clamp(1.8rem,3.5vw,2.6rem)}
.risk li{display:flex;align-items:center;gap:1rem;padding:1.2rem 1.3rem;border-radius:18px;background:var(--card);border:1px solid var(--line)}
.risk .g-ico{flex:none}
.risk b{font-family:var(--display);font-weight:800;font-size:1.08rem;line-height:1.2;letter-spacing:-.01em;word-spacing:.08em}
.risk-note{margin-top:1.4rem;text-align:center;color:var(--grey);font-size:.92rem}

/* final card: the dark card sits in a light section, so its ghost button stays light */
.sec-light .cta-card .btn-ghost{border-color:var(--line-2);color:var(--white);background:rgba(169,145,237,.06)}
.sec-light .cta-card .btn-ghost:hover{border-color:var(--violet);color:var(--white);background:rgba(169,145,237,.14)}
.cta-copy .hero-actions{margin-top:1.6rem}
.cta-copy .hero-actions .btn{margin-top:0}

/* final card: three stills fanned */
.cta-collage{position:relative;height:clamp(300px,34vw,420px)}
.cta-collage img{
  position:absolute;top:50%;left:50%;width:42%;aspect-ratio:3/4;object-fit:cover;border-radius:16px;
  box-shadow:0 24px 50px -18px rgba(0,0,0,.6);border:4px solid rgba(255,255,255,.08);
  transition:transform .7s var(--ease-out);
}
.cta-collage img:nth-child(1){transform:translate(-115%,-46%) rotate(-9deg)}
.cta-collage img:nth-child(2){z-index:2;transform:translate(-50%,-52%)}
.cta-collage img:nth-child(3){transform:translate(15%,-46%) rotate(9deg)}
.cta-card:hover .cta-collage img:nth-child(1){transform:translate(-125%,-48%) rotate(-12deg)}
.cta-card:hover .cta-collage img:nth-child(3){transform:translate(25%,-48%) rotate(12deg)}

/* the lightbox: one reel, full size, with sound */
.lb{
  width:100vw;height:100vh;max-width:none;max-height:none;margin:0;padding:0;border:0;
  background:transparent;place-items:center;
}
.lb[open]{display:grid;animation:lb-in .35s var(--ease-out)}
.lb::backdrop{background:rgba(10,4,20,.9);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
@keyframes lb-in{from{opacity:0;scale:.96}to{opacity:1;scale:1}}
.lb-video{height:min(88vh,calc(92vw * 16 / 9));aspect-ratio:9/16;border-radius:22px;background:#000;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.lb-close{
  position:fixed;top:16px;right:16px;z-index:2;width:46px;height:46px;border-radius:50%;
  display:grid;place-items:center;color:#fff;background:rgba(255,255,255,.12);transition:background .2s ease;
}
.lb-close:hover{background:var(--rich)}
.lb-close svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
html:has(.lb[open]){overflow:hidden}

@media (max-width:1000px){
  .p-hero-grid{grid-template-columns:1fr}
  .p-phones{height:clamp(360px,90vw,520px)}
  .p-phone{width:clamp(130px,30vw,200px)}
  .p-phone-front{width:clamp(150px,34vw,224px)}
  .case,.case-flip{grid-template-columns:1fr}
  .case-flip .case-media{order:0}
  .mirror,.obj-grid,.risk,.ph-points{grid-template-columns:1fr}
  .ba-grid{grid-template-columns:1fr}
  .cta-collage{height:300px}
}
@media (max-width:680px){
  .mirror.row-scroll{display:flex}
  .p-play{font-size:.66rem;padding:.35rem .6rem}
  .case-stills{max-width:none}
  .case-cta{flex-direction:column;align-items:flex-start}
  .case-cta .btn{width:100%;justify-content:center}

  /* albums: the switcher runs edge to edge, the grid goes two-up */
  .alb-tabs{margin-inline:calc(var(--gut) * -1);max-width:none;width:auto;border-radius:0;border-inline:0;padding-inline:var(--gut)}
  .alb-ind{display:none}
  .alb-tab{padding:.3rem .9rem .3rem .3rem;border:1px solid transparent}
  .alb-tab.is-on{background:var(--rich)}
  .alb-tab img{width:34px;height:34px}
  .alb-tab small{display:none}
  .alb-tab b{font-size:.92rem}
  .alb-grid{grid-template-columns:1fr 1fr;grid-auto-rows:34vw}
  .ph-cap{font-size:.82rem;left:.7rem;bottom:.6rem}
  .ph-big .ph-cap{font-size:1rem}
  .ph-offer{flex-direction:column;align-items:flex-start;padding:1.1rem}
  .ph-offer .btn{width:100%;justify-content:center}
  .pb-nav{top:auto;bottom:18px;margin-top:0}
  .pb-prev{left:calc(50% - 64px)}
  .pb-next{right:calc(50% - 64px)}
  .pb-img{border-radius:10px}
}
html.static .ph-tile,html.static .ph-tile img{clip-path:none!important;scale:none!important}

/* ============================================================
   ABOUT PAGE — the story in seven beats: the first visit (hero),
   the frustration it started from, the people, the bet, the four
   habits, the guarantee, one next step.
   Gold appears twice on the whole site, both here: the promise in
   the hero, and the guarantee.
   ============================================================ */
:root{
  --gold:#E6C485;
  --grad-gold:linear-gradient(100deg,#F8E8C4 0%,#DDB066 45%,#F8E8C4 100%);
}
.gold{
  background:var(--grad-gold);background-size:200% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  animation:shimmer 8s linear infinite;
}
.hero-title .gold.is-split{background:none;color:var(--white);-webkit-text-fill-color:currentColor;animation:none}
.hero-title .gold.is-split .wi{
  background:var(--grad-gold);background-size:200% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  animation:word-up 1.1s var(--ease-out) both,shimmer 8s linear infinite;
  animation-delay:calc(.25s + var(--i,0) * 70ms),0s;
}
/* six links in the nav: a little tighter until there is room */
@media (max-width:1320px){.nav-links{gap:1.1rem;font-size:.86rem}}

/* ---------- hero: the doorway ----------
   Base (reduced motion, ?static=1): the hall fills the hero behind the copy. */
.a-hero{position:relative;isolation:isolate;background:var(--ink)}
.a-pin{
  position:relative;min-height:100svh;overflow:hidden;isolation:isolate;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:7rem 0 clamp(3rem,8vh,5.5rem);
}
.a-hero .hero-glow{z-index:0}
.a-spill{display:none}
.a-door{position:absolute;inset:0;z-index:1;overflow:hidden;background:var(--card)}
.a-door-img{width:100%;height:100%;object-fit:cover;object-position:50% 42%}
.a-door-shade{
  position:absolute;inset:0;
  background:
    linear-gradient(to top,rgba(22,10,43,.94) 0%,rgba(22,10,43,.62) 34%,rgba(22,10,43,.12) 62%,rgba(22,10,43,.4) 100%),
    linear-gradient(to right,rgba(22,10,43,.55),rgba(22,10,43,0) 60%);
}
.a-hero .grain{z-index:2}
.a-hero-copy,.a-hero-after{position:relative;z-index:3;width:100%}
.a-title{max-width:16ch;font-size:clamp(2.4rem,5.4vw,5rem)}
.a-lede{margin-top:1.4rem;max-width:58ch;font-size:clamp(1.02rem,1.3vw,1.2rem);color:var(--soft)}
.a-lede b{color:var(--white);font-weight:600}
.a-cities{list-style:none;display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1.4rem}
.a-cities li{
  display:flex;align-items:center;gap:.5rem;padding:.48rem .85rem .48rem .7rem;border-radius:999px;font-size:.88rem;
  background:rgba(22,10,43,.55);border:1px solid rgba(230,196,133,.3);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
.a-cities svg{width:15px;height:15px;fill:var(--gold);rotate:45deg}
.a-cities b{font-weight:700}
.a-cities span{color:var(--gold);font-variant-numeric:tabular-nums}
.a-cities-note{margin-top:.6rem;font-size:.76rem;color:var(--grey)}
.a-cue{display:none}

/* live: the hero is 2.6 screens tall and its stage pins. script.js opens
   the arch (clip-path) and hands the title over to the founding line. */
html.a-live .a-hero{height:260vh}
html.a-live .a-pin{position:sticky;top:0;height:100vh;height:100svh;min-height:0;display:block;padding:0}
html.a-live .a-door{
  clip-path:inset(46% 35% 0 round 15vw 15vw 0 0);   /* until script.js has measured */
  animation:a-door-in 1.6s var(--ease-out) .25s both;
}
@keyframes a-door-in{from{opacity:0;translate:0 5%}}
html.a-live .a-door-img{scale:var(--zoom,1.22);translate:0 var(--iy,0px);transform-origin:50% 62%}
html.a-live .a-door-shade{opacity:var(--shade,.1)}
html.a-live .a-spill{
  display:block;position:absolute;z-index:0;left:50%;bottom:0;width:min(1200px,150vw);height:52vh;translate:-50% 0;pointer-events:none;
  background:radial-gradient(42% 70% at 50% 100%,rgba(230,196,133,.24),rgba(230,196,133,0) 70%);
  opacity:calc(1 - var(--e,0));
}
html.a-live .a-hero-copy{
  position:absolute;left:0;right:0;top:clamp(5.6rem,13vh,8.5rem);margin-inline:auto;text-align:center;
  opacity:var(--to,1);translate:0 var(--ty,0px);
}
html.a-live .a-title{max-width:none;margin-inline:auto;font-size:clamp(2.3rem,5.1vw,4.8rem)}
html.a-live .a-hero-after{
  position:absolute;left:0;right:0;bottom:clamp(2.4rem,8vh,5rem);margin-inline:auto;
  opacity:var(--ao,0);translate:0 var(--ay,26px);
}
html.a-live .a-cue{display:flex;opacity:var(--co,1)}

/* ---------- the origin: three steps, read left to right (top to bottom on
   a phone). One photo, three states: a rushed phone shot, the camera being
   set, the frame we deliver. Each picture plays its moment once the step is
   on screen (.is-in, from the scroll reveal); without JS or with reduced
   motion every picture simply shows its state. ---------- */
.a-origin-head{max-width:780px}
.a-story{
  --gap:clamp(1.6rem,3vw,2.6rem);
  list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);
  margin-top:clamp(2rem,4vw,3rem);
}
.a-chap{position:relative;display:flex;flex-direction:column;container-type:inline-size}
/* this leads to that: an arrow between the pictures */
.a-chap:not(:last-child)::after{
  content:"";position:absolute;z-index:3;top:calc(37.5cqw - 18px);right:calc(var(--gap) / -2 - 18px);
  width:36px;height:36px;border-radius:50%;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h13m-5-5 5 5-5 5' fill='none' stroke='%236A2BC2' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat;
  box-shadow:0 8px 22px -8px rgba(22,10,43,.4);
}
.a-shot{
  position:relative;aspect-ratio:4/3;border-radius:18px;overflow:hidden;isolation:isolate;container-type:inline-size;
  background:#1A1230;box-shadow:0 22px 50px -26px rgba(22,10,43,.5);
}
.a-shot-view{position:absolute;inset:0;overflow:hidden}
.a-shot-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.a-shot-noise{
  position:absolute;inset:0;opacity:.26;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.a-shot-flash,.a-shot-sheen{position:absolute;inset:0;opacity:0;pointer-events:none}
.a-shot-flash{background:#fff}
.a-shot-sheen{background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.34) 50%,transparent 65%)}

/* 1 · a phone photo: a portrait frame, tilted, grey, noisy — taken again and again */
.a-shot[data-state="0"] .a-shot-view{inset:0 22%;border-radius:4cqw}
.a-shot[data-state="0"] .a-shot-img{rotate:-4deg;scale:1.22;filter:brightness(.62) contrast(.82) saturate(.5) sepia(.2) blur(.3px)}
.a-chap.is-in .a-shot[data-state="0"] .a-shot-flash{animation:a-snap 2.8s ease-out .9s infinite}
.a-chap.is-in .a-shot[data-state="0"] .a-ph-shutter{animation:a-press 2.8s ease-out .9s infinite}
@keyframes a-snap{0%{opacity:0}2%{opacity:.8}14%,100%{opacity:0}}
@keyframes a-press{0%,100%{scale:1}2%{scale:.84}14%{scale:1}}
/* 2 · a camera being set: the full frame, almost straight, the numbers settle */
.a-shot[data-state="1"] .a-shot-img{rotate:-1.2deg;scale:1.06;filter:brightness(.86) contrast(.94) saturate(.82)}
/* 3 · the frame we deliver: it develops into full colour, a light sweep, our tag */
.a-chap.is-in .a-shot[data-state="2"] .a-shot-img{animation:a-develop 1.6s ease .35s both}
.a-chap.is-in .a-shot[data-state="2"] .a-shot-sheen{animation:a-sheen 1.5s var(--ease-out) 1.3s both}
@keyframes a-develop{from{filter:brightness(.82) saturate(.55) contrast(.92)}to{filter:none}}
@keyframes a-sheen{from{opacity:1;translate:-120% 0}to{opacity:1;translate:120% 0}}

/* the phone's camera screen */
.a-ui{position:absolute;top:0;bottom:0;left:0;right:0;pointer-events:none;color:#fff}
.a-ui-phone{left:22%;right:22%}
.a-ph-top{position:absolute;top:3.5cqw;left:3.5cqw;right:3.5cqw;display:flex;justify-content:space-between;align-items:center}
.a-ph-top svg{width:5.5cqw;height:5.5cqw}
.a-ph-pill{font:600 2.8cqw/1 var(--sans);padding:.8cqw 1.6cqw;border:1px solid rgba(255,255,255,.75);border-radius:99px}
.a-ph-grid{
  position:absolute;inset:0;
  background:
    linear-gradient(90deg,transparent 33.2%,rgba(255,255,255,.3) 33.2% 33.6%,transparent 33.6% 66.4%,rgba(255,255,255,.3) 66.4% 66.8%,transparent 66.8%),
    linear-gradient(180deg,transparent 33.2%,rgba(255,255,255,.3) 33.2% 33.6%,transparent 33.6% 66.4%,rgba(255,255,255,.3) 66.4% 66.8%,transparent 66.8%);
}
.a-ph-bot{position:absolute;left:0;right:0;bottom:3.6cqw;display:flex;flex-direction:column;align-items:center;gap:2.6cqw}
.a-ph-modes{display:flex;gap:3cqw;font:600 2.5cqw/1 var(--sans);letter-spacing:.06em}
.a-ph-modes i{font-style:normal;opacity:.8}
.a-ph-modes b{color:#FFD60A}
.a-ph-shutter{width:12cqw;height:12cqw;border-radius:50%;background:#fff;box-shadow:0 0 0 .8cqw rgba(0,0,0,.3),0 0 0 1.5cqw #fff}
/* the camera's monitor */
.a-ui-cam{font:600 2.9cqw/1 var(--sans);font-variant-numeric:tabular-nums;text-shadow:0 1px 3px rgba(0,0,0,.5)}
.a-cam-c{position:absolute;width:7cqw;height:7cqw;border:0 solid rgba(255,255,255,.92)}
.a-tl{top:4cqw;left:4cqw;border-width:.5cqw 0 0 .5cqw}
.a-tr{top:4cqw;right:4cqw;border-width:.5cqw .5cqw 0 0}
.a-bl{bottom:4cqw;left:4cqw;border-width:0 0 .5cqw .5cqw}
.a-br{bottom:4cqw;right:4cqw;border-width:0 .5cqw .5cqw 0}
.a-cam-top{position:absolute;top:4.4cqw;left:0;right:0;display:flex;justify-content:center;gap:2cqw}
.a-cam-top > span{display:flex;align-items:center;gap:.6cqw;padding:1.1cqw 1.8cqw;border-radius:1.2cqw;background:rgba(0,0,0,.48)}
.a-dial{display:inline-block;height:1.15em;overflow:hidden;font-weight:700}
.a-dial > span{display:flex;flex-direction:column;translate:0 -3.45em}
.a-dial i{display:block;height:1.15em;line-height:1.15em;font-style:normal}
.a-chap.is-in .a-dial > span{animation:a-dial 1.8s var(--ease-out) .5s both}
@keyframes a-dial{0%{translate:0 0}35%{translate:0 -1.15em}65%{translate:0 -2.3em}100%{translate:0 -3.45em}}
.a-cam-focus{position:absolute;left:50%;top:56%;width:22cqw;height:15cqw;translate:-50% -50%;border:.45cqw solid #7CE38B;border-radius:.8cqw}
.a-chap.is-in .a-cam-focus{animation:a-focus 1.6s ease .6s both}
@keyframes a-focus{0%{scale:1.5;opacity:0;border-color:#fff}30%{scale:.9;opacity:1;border-color:#fff}55%{scale:1.06;border-color:#fff}80%{scale:1;border-color:#fff}100%{scale:1;border-color:#7CE38B}}
.a-cam-level{position:absolute;left:30%;right:30%;top:56%;height:.4cqw;background:#7CE38B}
.a-chap.is-in .a-cam-level{animation:a-level 1.4s var(--ease-out) 1.7s both}
@keyframes a-level{from{rotate:-3deg;background:rgba(255,255,255,.85)}to{rotate:0deg;background:#7CE38B}}
/* our tag on the finished frame */
.a-shot-tag{
  position:absolute;left:3.5cqw;bottom:3.5cqw;display:flex;align-items:center;gap:1.4cqw;
  padding:1.6cqw 2.8cqw 1.6cqw 2.2cqw;border-radius:99px;background:rgba(22,10,43,.66);color:#fff;font:700 3.3cqw/1 var(--sans);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
.a-shot-tag svg{width:4.4cqw;height:auto;color:var(--violet)}

/* the words under each picture */
.a-chap-n{
  display:flex;align-items:center;gap:.6rem;margin-top:1.15rem;
  font-size:.74rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--rich);
}
.a-chap-n span{
  display:grid;place-items:center;width:1.9rem;height:1.9rem;border-radius:50%;flex:none;
  background:var(--rich);color:#fff;font-family:var(--display);font-size:.76rem;font-weight:800;letter-spacing:0;
}
.a-chap-h{
  margin-top:.75rem;font-family:var(--display);font-weight:800;letter-spacing:-.02em;word-spacing:.08em;line-height:1.14;
  font-size:clamp(1.2rem,1.55vw,1.42rem);text-wrap:balance;color:var(--text-dark);
}
.a-chap-end .a-chap-h{font-size:clamp(1.45rem,2.1vw,1.85rem);line-height:1.06}
.a-chap-txt{margin-top:.6rem;color:var(--muted-dark);font-size:1rem;line-height:1.6;max-width:40ch}
.a-origin-note{margin-top:clamp(1.6rem,3vw,2.2rem);font-size:.8rem;color:var(--muted-dark)}

/* ---------- who we are: one person, first message to delivery ---------- */
.a-team-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:clamp(2.2rem,6vw,5rem);align-items:center}
.a-track{position:relative;margin-top:2.4rem;padding-top:52px;max-width:540px}
.a-steps{list-style:none;display:grid;grid-template-columns:repeat(4,1fr)}
.a-step{position:relative;padding:1.5rem .6rem 0 0;font-size:.86rem;font-weight:600;line-height:1.3;color:var(--white);transition:color .45s ease}
.a-step i{
  position:absolute;top:0;left:0;width:12px;height:12px;border-radius:50%;
  background:var(--violet);border:2px solid var(--violet);box-shadow:0 0 0 5px rgba(169,145,237,.18);
  transition:background .45s ease,border-color .45s ease,box-shadow .45s ease;
}
.anim .a-step:not(.on){color:var(--grey)}
.anim .a-step:not(.on) i{background:var(--ink);border-color:rgba(185,175,201,.35);box-shadow:none}
.a-track-line{position:absolute;left:6px;width:75%;top:57px;height:2px;border-radius:2px;background:var(--line)}
.a-track-line i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--rich),var(--violet));transform-origin:0 50%;scale:var(--f,1) 1;transition:scale .9s var(--ease-out)}
.a-track-av{
  position:absolute;top:0;left:calc(6px + var(--x,3) * 25%);width:40px;height:40px;margin-left:-20px;border-radius:50%;
  display:grid;place-items:center;color:#fff;background:linear-gradient(140deg,var(--violet),var(--rich));
  box-shadow:0 10px 24px -8px rgba(106,43,194,.9);transition:left .9s var(--ease-out);
}
.a-track-av::after{content:"";position:absolute;left:50%;bottom:-6px;translate:-50% 0;border:5px solid transparent;border-top-color:var(--rich);border-bottom:0}
.a-track-av svg{width:58%;height:auto;translate:0 -6%}
.anim .a-track{--x:0;--f:0}
.anim .a-track:has(.a-step:nth-child(2).on){--x:1;--f:.3333}
.anim .a-track:has(.a-step:nth-child(3).on){--x:2;--f:.6667}
.anim .a-track:has(.a-step:nth-child(4).on){--x:3;--f:1}
.a-track-note{margin-top:1.2rem;font-size:.88rem;font-weight:600;color:var(--violet)}

.a-chat{
  position:relative;width:100%;max-width:420px;justify-self:center;border-radius:26px;padding:1px;
  background:linear-gradient(160deg,rgba(169,145,237,.55),rgba(169,145,237,.08) 40%,rgba(106,43,194,.4));
  box-shadow:0 40px 90px -30px rgba(106,43,194,.6);
}
.a-chat .chat-body{min-height:0;gap:.5rem;padding-bottom:1.1rem}
.a-chat .bubble{font-size:.86rem}
.a-doc{display:flex;align-items:center;gap:.65rem;max-width:86%}
.a-doc img{width:30px;height:30px;flex:none}
.a-doc b{display:block;font-size:.82rem;font-weight:600;color:var(--white)}
.a-doc small{display:block;margin-top:.15rem;font-size:.74rem;color:var(--grey)}
.a-vid{padding:.35rem;width:78%}
.a-vid-thumb{position:relative;display:grid;place-items:center;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:var(--card)}
.a-vid-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.a-vid-cap{display:block;padding:.45rem .3rem .15rem;font-size:.84rem}
html.js .anim .a-chat [data-at]:not(.on){opacity:0;translate:0 12px;scale:.97}

/* ---------- the bet: one sentence, lit word by word ---------- */
.a-bet{overflow:hidden;isolation:isolate;padding-block:clamp(5rem,11vw,9rem)}
.a-bet-mark{
  position:absolute;z-index:-1;left:50%;top:50%;width:min(780px,120vw);height:auto;translate:-50% -50%;
  color:rgba(106,43,194,.055);transform-origin:52.4% 62.7%;rotate:var(--rot,0deg);
}
.a-bet-txt{
  margin-top:1.2rem;text-align:center;font-family:var(--display);font-weight:800;letter-spacing:-.03em;word-spacing:.1em;
  line-height:1.12;font-size:clamp(1.9rem,4.3vw,3.7rem);text-wrap:balance;color:var(--text-dark);
}
.a-bet-txt em{font-style:normal}
.sw{opacity:calc(.13 + .87 * clamp(0, var(--k,99) - var(--i,0), 1));transition:opacity .25s linear}
.a-bet-txt em .sw{
  background:var(--grad-dk);background-size:200% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  animation:shimmer 8s linear infinite;
}
.a-bet-sign{margin-top:1.8rem;text-align:center;font-family:var(--serif);font-style:italic;font-size:clamp(1.25rem,1.9vw,1.6rem);color:var(--muted-dark)}

/* ---------- how we work: four cards that stack ---------- */
.a-rules{list-style:none;display:grid;gap:clamp(1.4rem,3vw,2.2rem);margin-top:clamp(2rem,4vw,3rem)}
.a-rule{
  position:sticky;top:calc(var(--nav-h,74px) + 18px + var(--i,0) * 16px);
  display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(1.2rem,3vw,2.4rem);align-items:center;
  padding:clamp(.9rem,1.6vw,1.2rem);border-radius:26px;border:1px solid var(--line);
  background:linear-gradient(150deg,#26124A 0%,#1A0C33 55%,#170A2E 100%);
  box-shadow:0 -18px 50px -24px rgba(0,0,0,.75);
  transform-origin:50% 0;scale:calc(1 - var(--cov,0) * .05);
}
/* the card underneath dims as the next one slides over it (script.js sets --cov) */
.a-rule::after{content:"";position:absolute;inset:-1px;z-index:3;border-radius:inherit;background:#0A0416;opacity:calc(var(--cov,0) * .62);pointer-events:none}
.a-rule-copy{padding:clamp(.5rem,2vw,1.4rem)}
.a-rule-top{display:flex;align-items:center;gap:.8rem}
.a-rule-n{font-family:var(--display);font-weight:900;font-size:clamp(2.6rem,4.6vw,4rem);line-height:.9;letter-spacing:-.05em;color:transparent;-webkit-text-stroke:1.5px rgba(169,145,237,.55)}
.a-rule-tag{font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--violet);padding:.35rem .7rem;border-radius:999px;background:rgba(169,145,237,.1);border:1px solid rgba(169,145,237,.22)}
.a-rule h3{margin-top:1.1rem;font-family:var(--display);font-weight:800;letter-spacing:-.025em;word-spacing:.1em;line-height:1.05;font-size:clamp(1.5rem,2.5vw,2.15rem);text-wrap:balance}
.a-rule-copy > p:last-child{margin-top:.8rem;color:var(--grey);font-size:1rem;max-width:38ch}
.a-rule .scene{border-radius:18px}

.a-sc-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* 1 · preparation: the list ticks off, the lights come on, the camera rolls */
.a-prep-dim{filter:brightness(.34) saturate(.55)}
html.js .scene.anim .a-prep-lit[data-at]{transition:opacity 1.3s ease}
.a-mon{
  position:absolute;inset:.7em;pointer-events:none;
  --c:rgba(255,255,255,.85);
  background:
    linear-gradient(var(--c),var(--c)) 0 0/1px 1.1em no-repeat,linear-gradient(var(--c),var(--c)) 0 0/1.1em 1px no-repeat,
    linear-gradient(var(--c),var(--c)) 100% 0/1px 1.1em no-repeat,linear-gradient(var(--c),var(--c)) 100% 0/1.1em 1px no-repeat,
    linear-gradient(var(--c),var(--c)) 0 100%/1px 1.1em no-repeat,linear-gradient(var(--c),var(--c)) 0 100%/1.1em 1px no-repeat,
    linear-gradient(var(--c),var(--c)) 100% 100%/1px 1.1em no-repeat,linear-gradient(var(--c),var(--c)) 100% 100%/1.1em 1px no-repeat;
}
.a-rec{
  position:absolute;top:1.1em;right:1.2em;display:flex;align-items:center;gap:.4em;padding:.35em .6em;border-radius:.3em;
  background:rgba(0,0,0,.5);color:#fff;font-size:.56em;font-weight:700;letter-spacing:.06em;font-variant-numeric:tabular-nums;
}
.a-rec i{width:.65em;height:.65em;border-radius:50%;background:#FF3B30;animation:a-blink 1s steps(1) infinite}
@keyframes a-blink{50%{opacity:.25}}
.a-list{
  position:absolute;left:1.1em;bottom:1.1em;width:min(56%,16em);padding:.8em .9em .5em;border-radius:.75em;
  background:rgba(255,255,255,.95);color:#1C1C1E;box-shadow:0 .6em 1.6em rgba(0,0,0,.35);font-size:.56em;line-height:1.25;
}
.a-list-h{font-weight:700;font-size:1.08em;margin-bottom:.45em}
.a-list-i{position:relative;display:flex;align-items:center;gap:.55em;padding:.5em 0;border-top:1px solid rgba(60,60,67,.14)}
.a-list-i svg{width:1.4em;height:1.4em;color:#C7C7CC;stroke-width:1.6}
.a-list-i .a-tick{position:absolute;left:0;color:var(--rich);stroke:#fff;stroke-width:2.6}
/* 2 · the right hour: the sun crosses the sky, interiors first, the pool at sunset */
.a-sky{position:absolute;left:0;right:0;top:0;height:42%;overflow:hidden;background:linear-gradient(180deg,#4C8AD3 0%,#A6CBEF 100%)}
.a-sky-dusk{position:absolute;inset:0;background:linear-gradient(180deg,#2A1A55 0%,#7E3A80 42%,#E9794A 80%,#FFC46B 100%)}
html.js .scene.anim .a-sky-dusk[data-at]{transition:opacity 1.8s ease}
.a-arc{position:absolute;inset:0;width:100%;height:100%;color:rgba(255,255,255,.6);stroke-dasharray:3 4}
.a-arc path{vector-effect:non-scaling-stroke;stroke-width:1.4}
.a-sun{position:absolute;top:0;bottom:0;left:88%;width:0}
.a-sun i{
  position:absolute;left:0;bottom:20%;width:1.7em;height:1.7em;margin:0 0 -.85em -.85em;border-radius:50%;
  background:radial-gradient(circle,#FFF6D6 0 30%,#FFD36B 34% 48%,rgba(255,200,90,.35) 52%,rgba(255,200,90,0) 70%);
}
html.js .scene.anim .a-sun.on{animation:a-sun-x 8.4s linear both}
html.js .scene.anim .a-sun.on i{animation:a-sun-y 8.4s both}
@keyframes a-sun-x{from{left:6%}to{left:94%}}
@keyframes a-sun-y{
  0%{bottom:0;animation-timing-function:cubic-bezier(.5,1,.89,1)}
  50%{bottom:78%;animation-timing-function:cubic-bezier(.11,0,.5,0)}
  100%{bottom:0}
}
.a-hc-row{position:absolute;left:.55em;right:.55em;bottom:.55em;top:calc(42% + .55em);display:grid;grid-template-columns:1fr 1fr;gap:.5em}
.a-hc{position:relative;border-radius:.55em;overflow:hidden;background:#000}
.a-hc img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.a-hc-cap{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;gap:.15em;padding:1.6em .6em .5em;color:#fff;background:linear-gradient(to top,rgba(10,4,22,.88),rgba(10,4,22,0))}
.a-hc-cap b{font-size:.68em;font-weight:700}
.a-hc-cap span{font-size:.52em;opacity:.85}
.a-hc-ring{position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 .14em var(--violet)}
.a-hc .a-hc-ok{position:absolute;top:.45em;right:.45em;width:1.3em;height:1.3em;color:var(--rich);stroke:#fff;stroke-width:2.6}
/* 3 · the date, in writing — and no "soon" */
.a-sc-quote{background:radial-gradient(70% 70% at 30% 30%,#3A1C6E,#160A2B)}
.a-paper{
  position:absolute;left:7%;top:13%;width:55%;padding:.85em .95em 1.1em;border-radius:.45em;background:#fff;color:var(--ink);
  rotate:-2.5deg;box-shadow:0 1em 2.4em -.6em rgba(0,0,0,.6);display:flex;flex-direction:column;gap:.6em;font-size:.6em;line-height:1.3;
}
.a-paper-head{display:flex;align-items:center;justify-content:space-between;padding-bottom:.6em;border-bottom:1px solid rgba(22,10,43,.12)}
.a-paper-head svg{height:2.2em;width:auto}
.a-paper-head b{font-size:.82em;letter-spacing:.16em;color:var(--rich)}
.a-sk{display:block;height:.5em;border-radius:.3em;background:#ECE7F4}
.a-row{position:relative;isolation:isolate;display:flex;justify-content:space-between;align-items:baseline;gap:.6em;padding:.5em .35em;border-bottom:1px dashed rgba(22,10,43,.16)}
.a-row span{color:#5F5672}
.a-row b{font-weight:700}
.a-hl{position:absolute;z-index:-1;inset:.1em -.15em;border-radius:.3em;background:#EEC5F6;transform-origin:0 50%}
html.js .scene.anim .a-hl[data-at]{transition:scale .7s var(--ease-out),opacity .15s ease}
html.js .scene.anim .a-hl:not(.on){scale:0 1}
.a-soon{position:absolute;right:5%;bottom:13%;width:44%;display:flex;flex-direction:column;align-items:flex-end;gap:.55em}
.a-soon-b{position:relative;padding:.55em .8em;border-radius:.75em .75em .75em .15em;background:#fff;color:#111B21;font-size:.62em;white-space:nowrap;box-shadow:0 .5em 1.4em rgba(0,0,0,.35)}
.a-strike{position:absolute;left:-5%;right:-5%;top:50%;height:.16em;margin-top:-.08em;border-radius:.1em;background:#E5484D;rotate:-7deg;transform-origin:0 50%}
html.js .scene.anim .a-strike[data-at]{transition:scale .45s var(--ease-out),opacity .1s}
html.js .scene.anim .a-strike:not(.on){scale:0 1}
.a-soon-tag{padding:.4em .75em;border-radius:99px;background:var(--rich);color:#fff;font-weight:700;font-size:.56em;box-shadow:0 .4em 1.2em -.3em rgba(106,43,194,.9)}
/* 4 · one film: the vertical cuts come out of the main frame */
.a-sc-film{background:radial-gradient(60% 60% at 50% 45%,rgba(106,43,194,.45),transparent 70%),#0E061C}
.a-w{position:absolute;left:50%;top:50%;z-index:2;width:58%;aspect-ratio:16/9;translate:-50% -50%;border-radius:.5em;overflow:hidden;box-shadow:0 1em 2.4em -.6em rgba(0,0,0,.7)}
.a-w > img,.a-v > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.a-w-tag,.a-v-tag{
  position:absolute;left:.45em;bottom:.45em;display:flex;align-items:center;gap:.35em;padding:.3em .55em;border-radius:99px;
  background:rgba(10,4,22,.62);color:#fff;font-size:.48em;font-weight:700;white-space:nowrap;
}
.a-v-tag img{width:1.3em;height:1.3em}
.a-tt{display:grid;place-items:center;width:1.3em;height:1.3em;border-radius:.32em;background:#000}
.a-tt svg{width:72%;height:72%;color:#fff}
.a-crop{position:absolute;top:0;bottom:0;left:50%;aspect-ratio:9/16;translate:-50% 0;border:.1em dashed rgba(255,255,255,.95);box-shadow:0 0 0 30em rgba(10,4,22,.5)}
.scene:not(.anim) .a-crop{display:none}
.a-v{position:absolute;left:50%;top:13%;height:74%;aspect-ratio:9/16;border-radius:.5em;overflow:hidden;box-shadow:0 1em 2em -.6em rgba(0,0,0,.7)}
.a-v-l{translate:-155% 0;rotate:-6deg}
.a-v-r{translate:55% 0;rotate:6deg}
html.js .scene.anim .a-v[data-at]{transition:opacity .3s ease,translate .9s var(--ease-out),rotate .9s var(--ease-out)}
html.js .scene.anim .a-v:not(.on){translate:-50% 0;rotate:0deg}
.a-v .a-v-tag{left:50%;translate:-50% 0;bottom:.5em;font-size:.44em}

/* ---------- the guarantee: a gold seal stamps in ---------- */
.a-guar{overflow:hidden;isolation:isolate;background:radial-gradient(46% 52% at 50% 30%,rgba(230,196,133,.1),transparent 70%),var(--ink)}
.a-seal{position:relative;width:clamp(150px,17vw,196px);aspect-ratio:1;margin:0 auto clamp(1.4rem,3vw,2.2rem)}
.a-seal-ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible;animation:spin-slow 40s linear infinite}
.a-seal-ring text{font-family:var(--sans);font-weight:700;font-size:11.5px;letter-spacing:.06em;fill:var(--gold)}
.a-seal-o{fill:none;stroke:rgba(230,196,133,.35);stroke-width:1}
.a-seal-disc{
  position:absolute;inset:23%;border-radius:50%;display:grid;place-items:center;color:var(--gold);
  background:radial-gradient(circle at 35% 30%,#3A1C6E,#1A0C33 70%);border:1px solid rgba(230,196,133,.5);
  box-shadow:0 0 0 6px rgba(230,196,133,.06),0 22px 50px -18px rgba(230,196,133,.45);
}
.a-seal-disc svg{width:56%;height:auto;translate:0 -5%}
html.js .a-seal.reveal.is-in{animation:a-stamp .9s cubic-bezier(.3,1.45,.45,1) both}
@keyframes a-stamp{from{opacity:0;scale:1.9;rotate:-28deg}to{opacity:1;scale:1;rotate:0deg}}
.a-seal::after{content:"";position:absolute;inset:20%;border-radius:50%;border:2px solid var(--gold);opacity:0;pointer-events:none}
.a-seal.is-in::after{animation:a-burst 1.2s var(--ease-out) .5s both}
@keyframes a-burst{from{opacity:.85;scale:1}to{opacity:0;scale:2.1}}
.a-guar .h-sec{font-size:clamp(2.1rem,4.8vw,4.1rem)}
.a-guar .h-sec > span{display:block}
.a-guar .sub{margin-top:1.3rem;font-size:1.1rem}

/* ---------- the next step ---------- */
.a-wa-ico{width:20px;height:20px;flex:none}
.a-now{display:flex;align-items:center;gap:.6rem;margin-top:1.1rem;font-size:.9rem;color:var(--soft)}
.a-now[hidden]{display:none}
.a-now-dot{position:relative;width:8px;height:8px;border-radius:50%;background:#3DDC84;flex:none}
.a-now-dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:inherit;animation:ping 2s var(--ease-out) infinite}
.a-now.is-off .a-now-dot{background:var(--gold)}
.a-qr{display:flex;flex-direction:column;align-items:center;gap:1.1rem;text-align:center}
.a-qr-card{
  padding:18px;border-radius:22px;background:#fff;color:var(--ink);rotate:-3deg;
  box-shadow:0 30px 70px -28px rgba(106,43,194,.85),0 0 0 8px rgba(255,255,255,.06);
  transition:rotate .6s var(--ease-out),scale .6s var(--ease-out);
}
.cta-card:hover .a-qr-card{rotate:0deg;scale:1.03}
.a-qr-code{display:block;width:clamp(150px,14vw,184px);height:auto}
html[lang="en"] .a-qr-fr,html:not([lang="en"]) .a-qr-en{display:none}
.a-qr p{max-width:28ch;font-size:.88rem;color:var(--grey)}

@media (max-width:900px){
  .a-story{grid-template-columns:1fr;gap:2.8rem;max-width:560px;margin-inline:auto}
  .a-chap:not(:last-child)::after{top:auto;right:auto;left:50%;bottom:calc(var(--gap) / -2 - 18px);margin-left:-18px;rotate:90deg}
  .a-team-grid{grid-template-columns:1fr}
  .a-rule{grid-template-columns:1fr;gap:.5rem;top:calc(var(--nav-h,64px) + 10px + var(--i,0) * 10px)}
  .a-rule-copy{padding:.6rem .5rem .3rem}
  .a-qr{display:none}
}
@media (max-width:680px){
  .a-title{letter-spacing:-.035em}
  html.a-live .a-title{font-size:clamp(2.1rem,9.4vw,2.8rem)}
  .a-cities li{font-size:.82rem;padding:.42rem .7rem .42rem .6rem}
  .a-track{max-width:none}
  .a-step{font-size:.76rem}
  .a-rule .scene-in{font-size:5.2cqw}
  .a-rule h3{font-size:1.45rem}
  .a-rule-copy > p:last-child{font-size:.95rem}
  .a-bet-txt{font-size:clamp(1.7rem,7.4vw,2.2rem);text-align:left}
  .a-bet .kicker.center{justify-content:flex-start}
  .a-bet-sign{text-align:left}
}

/* ============================================================
   MENU — where the nav links don't fit (≤ 1080 px). script.js
   builds it from the page's own nav links. Hidden on wider screens.
   ============================================================ */
.m-btn,.m-menu{display:none}
@media (max-width:1080px){
  .m-btn{
    display:grid;place-items:center;flex:none;width:42px;height:42px;border-radius:50%;
    color:var(--white);background:rgba(169,145,237,.1);border:1px solid var(--line-2);
    transition:background .25s ease,border-color .25s ease;
  }
  .m-btn:hover,.m-open .m-btn{background:rgba(169,145,237,.2);border-color:var(--violet)}
  .m-bars{position:relative;width:16px;height:10px}
  .m-bars i{position:absolute;left:0;right:0;height:2px;border-radius:2px;background:currentColor;transition:top .35s var(--ease-out),rotate .35s var(--ease-out)}
  .m-bars i:first-child{top:0}
  .m-bars i:last-child{top:8px}
  .m-open .m-bars i:first-child{top:4px;rotate:45deg}
  .m-open .m-bars i:last-child{top:4px;rotate:-45deg}

  .m-menu{
    display:flex;flex-direction:column;position:fixed;inset:0;z-index:99;overflow-y:auto;overscroll-behavior:contain;
    padding:calc(var(--nav-h,70px) + .6rem) var(--gut) 1.6rem;
    background:radial-gradient(90% 45% at 100% 0%,rgba(106,43,194,.38),transparent 70%),#140826;
    opacity:0;visibility:hidden;transition:opacity .3s ease,visibility 0s linear .3s;
  }
  .m-menu.is-open{opacity:1;visibility:visible;transition:opacity .3s ease}
  .m-links{list-style:none}
  .m-links li{border-bottom:1px solid var(--line);opacity:0;translate:0 14px;transition:opacity .4s ease,translate .5s var(--ease-out)}
  .m-menu.is-open .m-links li{opacity:1;translate:0 0;transition-delay:calc(.06s + var(--i,0) * .045s)}
  .m-links a{
    display:flex;align-items:baseline;gap:.9rem;padding:.8rem 0;
    font-family:var(--display);font-weight:800;font-size:clamp(1.6rem,6.6vw,2.2rem);letter-spacing:-.03em;line-height:1.1;
    word-spacing:.1em;color:var(--white);transition:color .2s ease;
  }
  .m-links a:hover,.m-links a[aria-current]{color:var(--violet)}
  .m-n{flex:none;min-width:1.7rem;font-family:var(--sans);font-size:.76rem;font-weight:700;letter-spacing:.06em;color:var(--violet)}
  .m-foot{margin-top:auto;padding-top:1.8rem;display:flex;flex-direction:column;gap:1rem}
  .m-cta{justify-content:center}
  .m-contact{display:flex;flex-wrap:wrap;gap:0 1.3rem;font-size:.92rem;color:var(--grey)}
  .m-contact a{padding:.55rem 0;transition:color .2s ease}
  .m-contact a:hover{color:var(--violet)}
  /* while it is open: the page stays put, the bar blends into the menu */
  html.m-open{overflow:hidden}
  html.m-open .nav{background:transparent;border-bottom-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
  html.m-open .fab{translate:0 160%}
}

/* ============================================================
   PHONES (≤ 680 px) — easier to read, easier to tap, lighter to
   run. Nothing here reaches wider screens.
   ============================================================ */
@media (max-width:680px){
  /* lighter rendering: no live blur over moving content (the film, the
     reels, the page scrolling under the bar), no endless repaint of the
     gradient text, no film grain — the same look, far less work */
  .nav.scrolled{background:rgba(22,10,43,.95);-webkit-backdrop-filter:none;backdrop-filter:none}
  .switch,.ig-sound,.p-play,.film-toggle,.eyebrow,.a-cities li,.a-shot-tag{-webkit-backdrop-filter:none;backdrop-filter:none}
  .eyebrow{background:rgba(22,10,43,.6)}
  .film-toggle{background:rgba(22,10,43,.62)}
  .p-play{background:rgba(22,10,43,.8)}
  .ig-sound{background:rgba(0,0,0,.58)}
  .a-cities li{background:rgba(22,10,43,.74)}
  .a-shot-tag{background:rgba(22,10,43,.8)}
  .hl,.gold,.a-bet-txt em .sw{animation:none}
  .hero-title .hl.is-split .wi,.hero-title .gold.is-split .wi{
    animation:word-up 1.1s var(--ease-out) both;animation-delay:calc(.25s + var(--i,0) * 70ms);
  }
  .grain{display:none}

  /* the bar: language and menu only (the audit is in the hero, the menu
     and the button that follows the reader) */
  .nav-cta{display:none}
  .nav-right{gap:.6rem}
  .lang{gap:0}
  .lang-btn{display:inline-grid;place-items:center;min-width:36px;min-height:42px;font-size:.86rem}

  /* small labels up to a readable size */
  .chip-count,.badge,.g-tag,.case-tags span{font-size:.75rem}
  .p-play{font-size:.76rem}
  .hero-note,.fine{font-size:.9rem}
  .g-sub{font-size:.92rem}
  .addon-desc{font-size:.94rem}

  /* fingers, not cursors: every control at least ~40 px tall */
  .tab{padding:.72rem 1.05rem}
  .cta-alt a{position:relative}
  .cta-alt a::after{content:"";position:absolute;left:0;right:0;top:-10px;bottom:-10px}
  .ig-sound::after{content:"";position:absolute;inset:-10px;border-radius:50%}
  .foot-links ul{gap:0}
  .foot-links a{display:inline-block;padding:.5rem 0}
  nav.foot-links ul{display:grid;grid-template-columns:1fr 1fr;column-gap:1rem}
  .foot-legal a{display:inline-block;padding:.45rem 0}

  /* the button that follows the reader: a little slimmer (it steps aside
     for the footer, so the footer needs no room kept for it) */
  .fab{padding:.9rem 1.2rem;font-size:.96rem}
  .footer{padding-bottom:2.2rem}
}

/* rail dots under the swipeable packs — phones only */
.rail-dots{display:none}

/* ============================================================
   PHONES (≤ 680 px), round 2 — a calmer hero, no gap above the
   three reels, the packs' dots.
   ============================================================ */
@media (max-width:680px){
  /* hero: the film gets the top of the screen, the words sit low and
     tight, one button ("Voir les offres" is in the menu and just below) */
  .hero-inner{padding:6rem var(--gut) 2rem}
  .hero .eyebrow{padding:0;border:0;background:none;font-size:.8rem;gap:.4rem;letter-spacing:.02em}
  .hero .hero-title{margin-top:.7rem;font-size:clamp(2.15rem,9.6vw,2.6rem);line-height:1}
  .hero .hero-lede{margin-top:.85rem;font-size:.98rem;line-height:1.55;color:var(--soft)}
  .hero .hero-actions{margin-top:1.25rem}
  .hero .hero-actions .btn-ghost{display:none}
  .hero .hero-note{margin-top:.8rem;font-size:.8rem;line-height:1.45}
  .hero-scrim{
    background:
      linear-gradient(to top,rgba(22,10,43,.96) 0%,rgba(22,10,43,.84) 34%,rgba(22,10,43,.25) 60%,rgba(22,10,43,0) 74%),
      linear-gradient(180deg,rgba(22,10,43,.6) 0%,rgba(22,10,43,0) 18%);
  }
  .film-toggle{top:calc(var(--nav-h,64px) + 10px);bottom:auto}

  /* the three reels: the heading starts at the top of the stage instead of
     floating in the middle, and the cards take the room that frees up */
  html.js .reels-pin{justify-content:flex-start;padding:clamp(2.4rem,6.5vh,3.4rem) 0 5.4rem}
  /* the cards sit in the middle of the room left under the heading (above
     the button that follows the reader) */
  html.js .reels-pin > .wrap{flex:1;display:flex;flex-direction:column}
  html.js .reels{--cw:clamp(120px,min(48vw,calc((100svh - 330px) * .55)),255px);width:100%;margin:auto 0;top:1.2rem}

  /* the packs: dots under the rail */
  .rail-dots{display:flex;justify-content:center;gap:.15rem;margin-top:.2rem}
  .rail-dots button{display:grid;place-items:center;width:30px;height:30px;padding:0}
  .rail-dots button::before{content:"";width:7px;height:7px;border-radius:99px;background:rgba(185,175,201,.35);transition:width .35s var(--ease-out),background .3s ease}
  .rail-dots button.is-on::before{width:22px;background:var(--violet)}
}