/* ==========================================================================
   ELOVIA MEDIA / Home
   Standalone. The homepage is dark by design: every render in the media set
   is ink and ember, so a light theme would fight the photography. The other
   pages (checkout, brief, thank you) keep style.css and their theme toggle.

   Radius system: pill for every button and chip, 22px for media and cards.
   One accent: ember. Layout families used once each: split hero, marquee,
   bento, media switcher, sticky split, timeline, price panel, full bleed,
   accordion, image CTA.
   ========================================================================== */

:root{
  --ink:#0e0b1c;
  --ink-2:#141026;
  --ink-3:#1c1733;
  --line:rgba(255,255,255,.09);
  --line-2:rgba(255,255,255,.16);
  --text:#f4f1ec;
  --muted:#aca6bd;
  --faint:#7d7791;
  --ember:#fd6c2b;
  --ember-2:#ff8a52;
  --ember-ink:#1f0c02;
  --wa:#25d366;
  --glass:rgba(14,11,28,.72);
  --glass-solid:rgba(14,11,28,.97);
  --hover:rgba(255,255,255,.05);
  --glow:.26;
  --grain:.05;

  --r:22px;
  --wrap:1240px;
  --pad:clamp(18px,4vw,40px);
  --ease:cubic-bezier(.16,1,.3,1);

  --f-display:'Bricolage Grotesque',system-ui,sans-serif;
  --f-body:'Geist',system-ui,-apple-system,'Segoe UI',sans-serif;
}

/* Light theme: a saved choice wins, otherwise the device setting decides.
   Cool greys, never the warm cream family, so the ember still leads. */
:root[data-theme="light"]{
  --ink:#f6f6f9; --ink-2:#ffffff; --ink-3:#efeef5;
  --line:rgba(21,17,42,.1); --line-2:rgba(21,17,42,.18);
  --text:#15112a; --muted:#56516d; --faint:#77728c;
  --ember-2:#c2410c;
  --glass:rgba(246,246,249,.8); --glass-solid:rgba(246,246,249,.98);
  --hover:rgba(21,17,42,.04); --glow:.16; --grain:.03;
  color-scheme:light;
}
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]){
    --ink:#f6f6f9; --ink-2:#ffffff; --ink-3:#efeef5;
    --line:rgba(21,17,42,.1); --line-2:rgba(21,17,42,.18);
    --text:#15112a; --muted:#56516d; --faint:#77728c;
    --ember-2:#c2410c;
    --glass:rgba(246,246,249,.8); --glass-solid:rgba(246,246,249,.98);
    --hover:rgba(21,17,42,.04); --glow:.16; --grain:.03;
    color-scheme:light;
  }
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:84px; -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--ink); color:var(--text);
  font:400 16px/1.6 var(--f-body);
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img,video{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
h1,h2,h3,h4{ margin:0; font-family:var(--f-display); font-weight:700; letter-spacing:-.02em; }
p{ margin:0; }
:focus-visible{ outline:2px solid var(--ember); outline-offset:3px; border-radius:6px; }
::selection{ background:var(--ember); color:var(--ember-ink); }

/* film grain, fixed and non-interactive so it never repaints on scroll */
body::after{
  content:""; position:fixed; inset:0; z-index:90; pointer-events:none; opacity:var(--grain);
  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'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad); }
.skip{ position:absolute; left:-999px; top:8px; z-index:100; background:var(--ember); color:var(--ember-ink); padding:8px 14px; border-radius:99px; }
.skip:focus{ left:8px; }

/* ---------- type ---------- */
.eyebrow{
  display:inline-block; margin-bottom:18px;
  font-size:.8rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ember-2);
}
.h2{ font-size:clamp(2rem,4.4vw,3.4rem); line-height:1.06; max-width:18ch; text-wrap:balance; }
.h2 em{ font-style:italic; color:var(--ember); padding-right:.06em; }
.lead{ margin-top:18px; max-width:56ch; font-size:clamp(1rem,1.3vw,1.14rem); color:var(--muted); }

/* ---------- buttons ---------- */
.btn{
  --bg:transparent;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  height:48px; padding:0 22px; border-radius:999px; white-space:nowrap;
  font-weight:600; font-size:.97rem; background:var(--bg);
  transition:transform .35s var(--ease), background-color .25s, border-color .25s, box-shadow .35s var(--ease);
}
.btn:active{ transform:translateY(1px) scale(.98); }
.btn--lg{ height:56px; padding:0 28px; font-size:1.02rem; }
.btn--full{ width:100%; }
.btn--ember{ --bg:var(--ember); color:var(--ember-ink); box-shadow:0 10px 30px -12px rgba(253,108,43,.7); }
.btn--ember:hover{ --bg:var(--ember-2); box-shadow:0 16px 40px -12px rgba(253,108,43,.8); }
.btn--ember .ph{ transition:transform .35s var(--ease); }
.btn--ember:hover .ph{ transform:translateX(4px); }
.btn--ghost{ border:1px solid var(--line-2); color:var(--text); }
.btn--ghost:hover{ border-color:var(--faint); --bg:var(--hover); }
.btn--light{ --bg:#f4f1ec; color:#0e0b1c; }
.btn--light:hover{ --bg:#fff; }
.btn .ph-whatsapp-logo{ font-size:1.25em; }

/* ---------- header ---------- */
.hdr{
  position:fixed; inset:0 0 auto; z-index:50; height:72px;
}
/* The frosted glass lives on a pseudo element. A backdrop-filter on the
   header itself would become the containing block for the fixed mobile
   menu and squash it into the header bar. */
.hdr::before{
  content:""; position:absolute; inset:0; z-index:-1;
  border-bottom:1px solid transparent; opacity:0;
  background:var(--glass);
  backdrop-filter:blur(16px) saturate(140%); -webkit-backdrop-filter:blur(16px) saturate(140%);
  transition:opacity .35s, border-color .35s;
}
.hdr.is-stuck::before{ opacity:1; border-color:var(--line); }
/* Over the hero the header always sits on dark photography, whatever the
   theme. Once it is stuck (or the menu is open) it takes the theme colours. */
.hdr:not(.is-stuck):not(:has(.nav.is-open)){
  --text:#f6f3ee; --muted:#ddd7e8; --line-2:rgba(255,255,255,.3); --hover:rgba(255,255,255,.08);
  color:var(--text);
}
.hdr{ color:var(--text); }
.hdr__in{ height:100%; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand{ display:inline-flex; align-items:center; gap:10px; min-height:44px; font-family:var(--f-display); font-weight:800; font-size:1.12rem; letter-spacing:-.01em; }
.nav{ display:flex; align-items:center; gap:30px; font-size:.95rem; color:var(--muted); }
.nav > a:not(.btn){ position:relative; transition:color .2s; }
.nav > a:not(.btn):hover{ color:var(--text); }
.nav > a:not(.btn)::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:1.5px; background:var(--ember);
  transform:scaleX(0); transform-origin:right; transition:transform .4s var(--ease);
}
.nav > a:not(.btn):hover::after{ transform:scaleX(1); transform-origin:left; }
.nav__cta{ height:42px; padding:0 18px; font-size:.92rem; }
.hdr__tools{ display:flex; align-items:center; gap:6px; position:relative; z-index:2; }
.nav{ margin-left:auto; }
.theme{
  width:42px; height:42px; border-radius:50%; display:grid; place-items:center;
  border:1px solid var(--line-2); color:var(--text); font-size:1.15rem;
  transition:border-color .2s, background-color .2s, transform .5s var(--ease);
}
.theme:hover{ background:var(--hover); }
.theme:active{ transform:rotate(-30deg) scale(.94); }
.theme i{ grid-area:1/1; transition:opacity .3s, transform .5s var(--ease); }
.theme .ph-moon{ opacity:0; transform:rotate(-60deg) scale(.6); }
:root[data-theme="light"] .theme .ph-sun{ opacity:0; transform:rotate(60deg) scale(.6); }
:root[data-theme="light"] .theme .ph-moon{ opacity:1; transform:none; }
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]) .theme .ph-sun{ opacity:0; transform:rotate(60deg) scale(.6); }
  :root:not([data-theme="dark"]) .theme .ph-moon{ opacity:1; transform:none; }
}
.burger{ display:none; width:44px; height:44px; position:relative; }
.burger i{ position:absolute; left:11px; right:11px; height:2px; background:var(--text); border-radius:2px; transition:transform .35s var(--ease); }
.burger i:first-child{ top:17px; } .burger i:last-child{ top:25px; }
.burger[aria-expanded="true"] i:first-child{ transform:translateY(4px) rotate(45deg); }
.burger[aria-expanded="true"] i:last-child{ transform:translateY(-4px) rotate(-45deg); }

@media (max-width:960px){
  .burger{ display:block; z-index:2; }
  .nav{
    position:fixed; inset:0; flex-direction:column; justify-content:center; gap:26px;
    background:var(--glass-solid); font-size:1.5rem; font-family:var(--f-display); color:var(--text);
    opacity:0; visibility:hidden; transition:opacity .3s, visibility .3s;
  }
  .nav.is-open{ opacity:1; visibility:visible; }
  .nav__cta{ height:54px; padding:0 28px; font-size:1.05rem; margin-top:10px; }
}

/* ---------- hero ---------- */
/* Full bleed renders behind the copy. The hero keeps light text in both
   themes because it always sits on a dark scrim over dark photography. */
.hero{
  --text:#f6f3ee; --muted:#d9d3e4;
  position:relative; min-height:100svh; display:flex; align-items:flex-end;
  padding:120px 0 clamp(56px,9vh,110px); overflow:hidden; isolation:isolate;
  color:var(--text); background:#0e0b1c;
}
.hero__bg{ position:absolute; inset:0; z-index:-3; transform:translateY(var(--hy,0)); will-change:transform; }
.hero__slide{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:70% 50%;
  opacity:0; transform:scale(1.14); transition:opacity 1.6s ease, transform 7s linear;
}
.hero__slide.is-on{ opacity:1; transform:scale(1.02); }
.hero__scrim{
  position:absolute; inset:0; z-index:-2;
  background:
    linear-gradient(90deg, rgba(10,8,22,.92) 0%, rgba(10,8,22,.72) 38%, rgba(10,8,22,.2) 70%, rgba(10,8,22,.05)),
    linear-gradient(0deg, rgba(10,8,22,.9) 0%, rgba(10,8,22,0) 45%),
    linear-gradient(180deg, rgba(10,8,22,.55) 0%, rgba(10,8,22,0) 22%);
}
/* a slow band of ember light crossing the scene */
.hero__sweep{
  position:absolute; inset:-20% -40%; z-index:-1; pointer-events:none; mix-blend-mode:screen; opacity:.5;
  background:linear-gradient(105deg, transparent 42%, rgba(253,108,43,.18) 50%, transparent 58%);
  animation:sweep 9s var(--ease) infinite;
}
@keyframes sweep{ 0%{ transform:translateX(-45%); } 60%,100%{ transform:translateX(45%); } }

.hero__inner{ position:relative; }
.hero__title{
  font-size:clamp(2.6rem,6.6vw,5.6rem); line-height:1; letter-spacing:-.04em; font-weight:800;
  max-width:12ch; text-shadow:0 2px 30px rgba(0,0,0,.35);
}
.hero__title .line{ display:block; overflow:hidden; padding-bottom:.08em; }
.swap{ position:relative; display:inline-grid; color:var(--ember); }
.swap b{ grid-area:1/1; font-weight:inherit; opacity:0; transform:translateY(70%); filter:blur(8px);
  transition:opacity .6s var(--ease), transform .8s var(--ease), filter .6s var(--ease); white-space:nowrap; }
.swap b.is-on{ opacity:1; transform:none; filter:none; }
.swap b.is-out{ opacity:0; transform:translateY(-70%); filter:blur(8px); }
.hero__sub{ margin-top:22px; max-width:46ch; font-size:clamp(1.02rem,1.4vw,1.2rem); color:var(--muted); }
.hero__cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:32px; }
.btn--glass{
  color:#f6f3ee; border:1px solid rgba(255,255,255,.28);
  background:rgba(255,255,255,.06); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.btn--glass:hover{ background:rgba(255,255,255,.14); }
.hero__dots{ display:flex; gap:8px; margin-top:44px; }
.hero__dots i{ width:28px; height:3px; border-radius:3px; background:rgba(255,255,255,.22); overflow:hidden; position:relative; }
.hero__dots i.is-on::after{ content:""; position:absolute; inset:0; background:var(--ember); transform-origin:left; animation:dot 5.5s linear forwards; }
@keyframes dot{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }

/* entrance: masked rise, staggered by --d */
.js .hero__in{ display:inline-block; opacity:0; transform:translateY(105%); }
.js .eyebrow.hero__in, .js .hero__sub.hero__in, .js .hero__cta.hero__in{ transform:translateY(24px); }
.js .hero__cta.hero__in{ display:flex; }
.js .hero__sub.hero__in{ display:block; }
/* .js.is-ready beats .js .eyebrow.hero__in, so every piece settles. */
.js.is-ready .hero__in{
  opacity:1; transform:none;
  transition:opacity .9s var(--ease) calc(var(--d)*110ms + 150ms), transform 1.1s var(--ease) calc(var(--d)*110ms + 150ms);
}
.js .hero__slide.is-on{ transform:scale(1.2); }
.is-ready .hero__slide.is-on{ transform:scale(1.02); }

@media (max-width:700px){
  .hero{ align-items:flex-end; padding:100px 0 44px; }
  .hero__slide{ object-position:62% 40%; }
  .hero__title{ font-size:clamp(2.1rem,10.4vw,3.4rem); max-width:none; }
  .hero__sub{ margin-top:16px; }
  .hero__cta{ margin-top:24px; }
  .hero__scrim{
    background:
      linear-gradient(0deg, rgba(10,8,22,.96) 0%, rgba(10,8,22,.82) 42%, rgba(10,8,22,.3) 75%, rgba(10,8,22,.5) 100%);
  }
  .hero__dots{ margin-top:30px; }
}
@media (max-width:520px){ .hero__cta .btn{ flex:1 1 100%; } }

/* ---------- marquee (the only one on the page) ---------- */
.marquee{ border-block:1px solid var(--line); overflow:hidden; padding:20px 0; background:var(--ink-2); }
.marquee__track{ display:flex; width:max-content; animation:marq 38s linear infinite; }
.marquee ul{ display:flex; margin:0; padding:0; list-style:none; }
.marquee li{
  display:flex; align-items:center; gap:34px; padding-right:34px; white-space:nowrap;
  font-family:var(--f-display); font-weight:600; font-size:clamp(1.1rem,2vw,1.5rem); color:var(--muted);
}
.marquee li::after{ content:""; width:7px; height:7px; background:var(--ember); transform:rotate(45deg); border-radius:1px; }
.marquee:hover .marquee__track{ animation-play-state:paused; }
@keyframes marq{ to{ transform:translateX(-50%); } }

/* ---------- sections ---------- */
.sec{ padding:clamp(80px,11vw,140px) 0; position:relative; }
.sec--tint{ background:linear-gradient(180deg,var(--ink-2),var(--ink)); }

/* scroll reveal */
.js .rv{ opacity:0; transform:translateY(28px); transition:opacity .9s var(--ease), transform 1s var(--ease); transition-delay:var(--rd,0ms); }
.js .rv.is-in{ opacity:1; transform:none; }

/* ---------- bento ---------- */
.bento{
  margin-top:clamp(40px,6vw,64px);
  display:grid; gap:16px;
  grid-template-columns:repeat(6,1fr);
  grid-template-areas:
    "a a a a b b"
    "a a a a c c"
    "d d d e e e";
}
.cell{
  position:relative; overflow:hidden; border-radius:var(--r); border:1px solid var(--line);
  background:var(--ink-2); padding:28px; min-height:240px;
  display:flex; flex-direction:column; justify-content:flex-end; gap:10px; isolation:isolate;
}
.cell h3{ font-size:clamp(1.25rem,1.9vw,1.6rem); line-height:1.15; max-width:22ch; }
.cell p{ color:var(--muted); max-width:44ch; font-size:.97rem; }
.cell > img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2;
  transition:transform 1.4s var(--ease);
}
.cell__txt, .stay{ --text:#f4f1ec; --muted:#d3cde0; color:var(--text); }
.cell > img + .cell__txt::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg,rgba(14,11,28,0) 30%,rgba(14,11,28,.92) 88%);
}
.cell:hover > img{ transform:scale(1.05); }
.cell__icon{ font-size:2.1rem; color:var(--ember); margin-bottom:auto; }
/* spotlight that follows the pointer (set by home.js) */
.cell::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:0; transition:opacity .4s;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%), rgba(253,108,43,.14), transparent 60%);
}
.cell:hover::after{ opacity:1; }
.cell--a{ grid-area:a; min-height:520px; }
.cell--b{ grid-area:b; }
.cell--c{ grid-area:c; }
.cell--d{ grid-area:d; min-height:320px; }
.cell--e{ grid-area:e; min-height:320px; }
.cell--ember{ background:linear-gradient(150deg,#ff7b3d,#e8531a 60%,#c7430f); border-color:transparent; }
.cell--ember h3, .cell--ember .cell__icon{ color:var(--ember-ink); }
.cell--ember p{ color:rgba(31,12,2,.78); }
@media (max-width:900px){
  .bento{ grid-template-columns:1fr 1fr; grid-template-areas:"a a" "b c" "d d" "e e"; }
  .cell--a{ min-height:420px; }
}
@media (max-width:600px){
  .bento{ grid-template-columns:1fr; grid-template-areas:"a" "b" "c" "d" "e"; }
  .cell{ min-height:220px; }
  .cell--a{ min-height:380px; }
}

/* ---------- portfolio ---------- */
.works{ margin-top:clamp(44px,6vw,72px); display:grid; gap:clamp(56px,8vw,110px); }
.work{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:clamp(24px,4vw,56px); align-items:center; }
.work:nth-child(even) .work__media{ order:2; }
.work__media{
  position:relative; border-radius:var(--r); overflow:hidden; aspect-ratio:16/10;
  border:1px solid var(--line-2); background:#0b0916;
  box-shadow:0 40px 90px -45px rgba(0,0,0,.7);
}
.work__media video{ width:100%; height:100%; object-fit:cover; }
/* image wipe as the project scrolls in */
.js .work__media{ clip-path:inset(0 0 100% 0 round var(--r)); transition:clip-path 1.3s var(--ease); }
.js .work.is-in .work__media{ clip-path:inset(0 0 0 0 round var(--r)); }
.js .work__body > *{ opacity:0; transform:translateY(22px); transition:opacity .8s var(--ease), transform .9s var(--ease); }
.js .work.is-in .work__body > *{ opacity:1; transform:none; }
.work.is-in .work__body > :nth-child(2){ transition-delay:.08s; }
.work.is-in .work__body > :nth-child(3){ transition-delay:.16s; }
.work.is-in .work__body > :nth-child(4){ transition-delay:.24s; }
.work.is-in .work__body > :nth-child(5){ transition-delay:.32s; }

.work__kind{ font-size:.86rem; font-weight:600; color:var(--ember-2); }
.work__body h3{ font-size:clamp(1.7rem,3vw,2.4rem); margin-top:6px; line-height:1.08; }
.work__sum{ margin-top:12px; color:var(--muted); max-width:52ch; }
.feats{ list-style:none; margin:22px 0 0; padding:0; display:grid; gap:14px; }
.feats li{ display:grid; grid-template-columns:40px 1fr; gap:14px; align-items:start; }
.feats .ph{
  width:40px; height:40px; border-radius:12px; display:grid; place-items:center; font-size:1.2rem;
  color:var(--ember); background:rgba(253,108,43,.1); border:1px solid rgba(253,108,43,.2);
}
.feats b{ display:block; font-weight:600; font-size:1rem; }
.feats span{ display:block; margin-top:2px; color:var(--muted); font-size:.93rem; line-height:1.55; }
.work__link{
  display:inline-flex; align-items:center; gap:8px; margin-top:24px;
  font-weight:600; color:var(--ember-2); border-bottom:1px solid rgba(253,108,43,.35); padding-bottom:3px;
  transition:gap .3s var(--ease), border-color .2s;
}
.work__link:hover{ gap:12px; border-color:var(--ember); }
.nda{ display:flex; gap:10px; align-items:center; justify-content:center; margin-top:clamp(56px,7vw,90px); color:var(--faint); text-align:center; }
.nda .ph{ color:var(--ember); }
@media (max-width:900px){
  .work{ grid-template-columns:minmax(0,1fr); }
  .work:nth-child(even) .work__media{ order:0; }
}

/* ---------- included (sticky split) ---------- */
.inc{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(32px,6vw,90px); align-items:start; }
.inc__head{ position:sticky; top:120px; }
.inc__head .btn{ margin-top:30px; }
.inc__body{ display:grid; gap:16px; }
.feat{
  display:grid; grid-template-columns:200px 1fr; gap:22px; align-items:center;
  padding:14px; padding-right:24px; border-radius:var(--r); border:1px solid var(--line); background:var(--ink-2);
  transition:border-color .3s, transform .5s var(--ease);
}
.feat:hover{ border-color:var(--line-2); transform:translateY(-3px); }
.feat img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:14px; }
.feat h3{ font-size:1.22rem; margin-bottom:6px; }
.feat p{ color:var(--muted); font-size:.96rem; }
.ticks{ list-style:none; margin:14px 0 0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:14px 24px; }
.ticks li{ display:flex; gap:12px; align-items:flex-start; color:var(--text); font-size:.98rem; }
.ticks .ph, .plan__list .ph{ color:var(--ember); font-size:1.15rem; margin-top:3px; flex:none; }
@media (max-width:900px){
  .inc{ grid-template-columns:1fr; }
  .inc__head{ position:static; }
}
@media (max-width:560px){
  .feat{ grid-template-columns:1fr; padding:12px 12px 20px; }
  .feat > div{ padding-inline:8px; }
  .ticks{ grid-template-columns:1fr; }
}

/* ---------- process timeline ---------- */
.sec--process{ overflow:hidden; isolation:isolate; background:var(--ink-2); }
.process__bg{
  position:absolute; z-index:-1; right:-10%; top:0; width:70%; height:100%; object-fit:cover; opacity:.32;
  mask:linear-gradient(90deg,transparent,#000 45%);
}
.steps{
  --prog:0;
  position:relative; list-style:none; margin:clamp(48px,6vw,72px) 0 0; padding:0;
  display:grid; grid-template-columns:repeat(4,1fr); gap:28px;
}
.steps::before, .steps::after{
  content:""; position:absolute; left:28px; right:28px; top:27px; height:2px; background:var(--line-2);
}
.steps::after{ background:var(--ember); transform-origin:left; transform:scaleX(var(--prog)); transition:transform .2s linear; }
.steps li{ position:relative; z-index:1; }
.steps__n{
  display:grid; place-items:center; width:56px; height:56px; border-radius:50%;
  background:var(--ink); border:1px solid var(--line-2); font-size:1.4rem; color:var(--ember);
  margin-bottom:22px; transition:background-color .5s, color .5s, border-color .5s;
}
.steps li.is-lit .steps__n{ background:var(--ember); color:var(--ember-ink); border-color:var(--ember); }
.steps h3{ font-size:1.3rem; margin-bottom:8px; }
.steps p{ color:var(--muted); font-size:.96rem; max-width:30ch; }
@media (max-width:900px){
  .steps{ grid-template-columns:1fr; gap:34px; }
  .steps::before, .steps::after{ left:27px; right:auto; top:28px; bottom:28px; width:2px; height:auto; }
  .steps::after{ transform-origin:top; transform:scaleY(var(--prog)); }
  .steps li{ padding-left:80px; }
  .steps__n{ position:absolute; left:0; top:0; }
  .process__bg{ width:100%; right:0; opacity:.18; }
}

/* ---------- pricing ---------- */
/* A render behind the price, heavily scrimmed, so the plan card floats. */
.price-sec{ position:relative; overflow:hidden; isolation:isolate; }
.price-sec__bg{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; opacity:.5;
  transform:scale(1.08); transition:transform 2.4s var(--ease);
}
.price-sec.is-seen .price-sec__bg{ transform:scale(1); }
.price-sec::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(90deg, var(--ink) 20%, color-mix(in srgb, var(--ink) 82%, transparent) 55%, color-mix(in srgb, var(--ink) 55%, transparent));
}
.price{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,440px); gap:clamp(32px,6vw,90px); align-items:center; }
.plan{
  position:relative; padding:34px; border-radius:var(--r);
  background:color-mix(in srgb, var(--ink-2) 88%, transparent);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(253,108,43,.35);
  box-shadow:0 40px 100px -40px rgba(253,108,43,.35), inset 0 1px 0 rgba(255,255,255,.06);
}
.plan__name{ font-weight:600; color:var(--ember-2); font-size:.95rem; }
.plan__amt{ display:flex; align-items:flex-start; gap:4px; margin:10px 0 4px; font-family:var(--f-display); font-weight:800; }
.plan__amt .cur{ font-size:1.9rem; margin-top:.4em; color:var(--ember); }
.plan__amt .num{ font-size:clamp(3.4rem,6vw,4.6rem); line-height:1; letter-spacing:-.04em; }
.plan__per{ color:var(--muted); font-size:.95rem; }
.plan__list{ list-style:none; margin:26px 0 28px; padding:22px 0 0; border-top:1px solid var(--line); display:grid; gap:12px; }
.plan__list li{ display:flex; gap:12px; }
.plan__note{ margin-top:14px; text-align:center; color:var(--muted); font-size:.9rem; }

/* what happens when you pay */
.after{ list-style:none; margin:34px 0 0; padding:0; display:grid; gap:0; position:relative; max-width:480px; }
.after::before{ content:""; position:absolute; left:21px; top:22px; bottom:22px; width:2px; background:linear-gradient(var(--ember), rgba(253,108,43,.15)); }
.after li{ display:grid; grid-template-columns:44px 1fr; gap:16px; align-items:center; padding:10px 0; position:relative; }
.after li > span{
  width:44px; height:44px; border-radius:50%; display:grid; place-items:center; font-size:1.15rem;
  background:var(--ink-2); border:1px solid rgba(253,108,43,.45); color:var(--ember);
}
.after li:nth-child(2) > span{ background:var(--ember); color:var(--ember-ink); border-color:var(--ember); box-shadow:0 0 0 6px rgba(253,108,43,.15); }
.after b{ display:block; font-weight:600; }
.after em{ display:block; font-style:normal; color:var(--muted); font-size:.92rem; }
@media (max-width:900px){ .price{ grid-template-columns:1fr; } .price-sec::before{ background:color-mix(in srgb, var(--ink) 86%, transparent); } }

/* ---------- headline word reveal (home.js splits .split headings) ---------- */
.split .w{ display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.08em; margin-bottom:-.08em; }
.split .w > span{ display:inline-block; transform:translateY(105%); transition:transform .9s var(--ease); transition-delay:calc(var(--i) * 45ms); }
.split.is-in .w > span{ transform:none; }
.js .split.rv{ opacity:1; transform:none; }

/* ---------- full bleed support ---------- */
.stay{ position:relative; min-height:78vh; display:flex; align-items:flex-end; overflow:hidden; isolation:isolate; padding:120px 0 clamp(64px,8vw,110px); }
.stay__img{ position:absolute; inset:0; width:100%; height:115%; object-fit:cover; z-index:-2; transform:translateY(var(--py,0)); will-change:transform; }
.stay::before{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(0deg,rgba(14,11,28,.96) 10%,rgba(14,11,28,.35) 60%,rgba(14,11,28,.7)); }
.stay .btn{ margin-top:30px; }

/* ---------- FAQ ---------- */
.faq{ display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(32px,6vw,90px); align-items:start; }
.acc details{ border-bottom:1px solid var(--line); }
.acc details:first-child{ border-top:1px solid var(--line); }
.acc summary{
  list-style:none; cursor:pointer; display:flex; justify-content:space-between; gap:20px; align-items:center;
  padding:22px 0; font-family:var(--f-display); font-weight:600; font-size:clamp(1.05rem,1.5vw,1.22rem);
}
.acc summary::-webkit-details-marker{ display:none; }
.acc summary .ph{ flex:none; font-size:1.2rem; color:var(--ember); transition:transform .4s var(--ease); }
.acc details[open] summary .ph{ transform:rotate(45deg); }
.acc details p{ padding:0 40px 24px 0; color:var(--muted); max-width:62ch; }
@media (max-width:900px){ .faq{ grid-template-columns:1fr; } }

/* ---------- closing CTA ---------- */
.close{ position:relative; overflow:hidden; isolation:isolate; padding:clamp(90px,12vw,160px) 0; border-top:1px solid var(--line); }
.close__img{ position:absolute; right:0; top:0; height:100%; width:55%; object-fit:cover; z-index:-2; mask:linear-gradient(90deg,transparent,#000 55%); }
.close__title{ font-size:clamp(2.2rem,5vw,4rem); line-height:1.04; letter-spacing:-.035em; max-width:16ch; font-weight:800; }
.close__cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:36px; }
@media (max-width:900px){ .close__img{ width:100%; opacity:.35; mask:none; } }

/* ---------- footer ---------- */
.ftr{ border-top:1px solid var(--line); padding:64px 0 28px; background:var(--ink); }
.ftr__grid{ display:grid; grid-template-columns:1.6fr 1fr 1.2fr; gap:40px; }
.ftr__grid p{ margin:14px 0 18px; color:var(--muted); max-width:34ch; }
.ftr h4{ font-family:var(--f-body); font-size:.82rem; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); margin-bottom:14px; font-weight:600; }
.ftr__grid nav a, .ftr__grid > div > a:not(.brand){ display:block; color:var(--muted); padding:5px 0; transition:color .2s; }
.ftr__grid a:hover{ color:var(--text); }
.ftr__social{ display:flex; gap:10px; }
.ftr__social a{ width:40px; height:40px; border-radius:50%; border:1px solid var(--line-2); display:grid; place-items:center; font-size:1.15rem; color:var(--muted); transition:color .2s, border-color .2s; }
.ftr__social a:hover{ color:var(--ember); border-color:var(--ember); }
.ftr__bot{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; margin-top:52px; padding-top:22px; border-top:1px solid var(--line); color:var(--faint); font-size:.88rem; }
@media (max-width:760px){ .ftr__grid{ grid-template-columns:1fr; } }

/* ---------- WhatsApp float ---------- */
.wa{
  position:fixed; right:clamp(16px,2.4vw,28px); bottom:clamp(16px,2.4vw,28px); z-index:60;
  display:flex; align-items:center; gap:12px;
  transform:translateY(120%) scale(.6); opacity:0; transition:transform .7s var(--ease), opacity .5s;
}
.wa.is-on{ transform:none; opacity:1; }
.wa__btn{
  position:relative; width:60px; height:60px; border-radius:50%; display:grid; place-items:center;
  background:var(--wa); color:#fff; font-size:2rem;
  box-shadow:0 14px 34px -8px rgba(37,211,102,.55), 0 4px 12px rgba(0,0,0,.35);
  transition:transform .4s var(--ease);
}
.wa__btn::before{
  content:""; position:absolute; inset:0; border-radius:50%; border:2px solid var(--wa);
  animation:waPing 2.8s var(--ease) infinite; animation-delay:2s;
}
@keyframes waPing{ 0%{ transform:scale(1); opacity:.8; } 70%,100%{ transform:scale(1.7); opacity:0; } }
.wa:hover .wa__btn{ transform:scale(1.08) rotate(-6deg); }
.wa__tip{
  padding:10px 16px; border-radius:999px; background:var(--text); color:var(--ink); font-weight:600; font-size:.92rem;
  box-shadow:0 10px 30px -10px rgba(0,0,0,.6);
  opacity:0; transform:translateX(10px); transition:opacity .4s, transform .5s var(--ease); pointer-events:none;
}
.wa.show-tip .wa__tip, .wa:hover .wa__tip{ opacity:1; transform:none; }
@media (max-width:600px){ .wa__tip{ display:none; } .wa__btn{ width:56px; height:56px; } }

/* ---------- phones: tuned rather than just stacked ---------- */
@media (max-width:600px){
  .hdr{ height:64px; }
  .brand{ font-size:1.02rem; }
  .brand img{ width:26px; height:26px; }
  .eyebrow{ font-size:.74rem; margin-bottom:12px; }
  .sec{ padding:72px 0; }
  .lead{ margin-top:14px; }
  .bento{ margin-top:32px; gap:12px; }
  .cell{ padding:22px; border-radius:18px; }
  .feat h3{ font-size:1.12rem; }
  .works{ gap:64px; }
  .work__media{ border-radius:16px; }
  .feats li{ grid-template-columns:36px 1fr; gap:12px; }
  .feats .ph{ width:36px; height:36px; font-size:1.05rem; border-radius:10px; }
  .after{ margin-top:26px; }
  .steps li{ padding-left:72px; }
  .steps__n{ width:52px; height:52px; font-size:1.25rem; }
  .steps::before, .steps::after{ left:25px; }
  .plan{ padding:24px; }
  .plan__amt .num{ font-size:3.2rem; }
  .stay{ min-height:68svh; padding-top:90px; }
  .acc summary{ padding:18px 0; font-size:1.02rem; }
  .acc details p{ padding-right:0; }
  .close{ padding:80px 0; }
  .close__cta .btn{ flex:1 1 100%; }
  .ftr{ padding:52px 0 calc(90px + env(safe-area-inset-bottom)); }
  .wa{ right:14px; bottom:calc(14px + env(safe-area-inset-bottom)); }
}
/* No hover on touch screens, so no half-triggered zoom or spotlight. */
@media (hover:none){
  .cell:hover > img{ transform:none; }
  .cell::after{ display:none; }
  .feat:hover{ transform:none; }
}
:root[data-theme="light"] .close__img{ opacity:.9; }
@media (max-width:900px){
  :root[data-theme="light"] .close__img{ opacity:.14; }
}
@media (max-width:900px) and (prefers-color-scheme:light){
  :root:not([data-theme="dark"]) .close__img{ opacity:.14; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation:none !important; transition-duration:.01ms !important; transition-delay:0ms !important; }
  .js .rv, .js .hero__in, .js .work__media, .js .work__body > *{ opacity:1 !important; transform:none !important; clip-path:none !important; }
  .split .w > span{ transform:none !important; }
  .hero__slide{ transform:none !important; }
  .hero__sweep{ display:none; }
  .marquee__track{ animation:none; }
  .stay__img, .hero__bg{ transform:none !important; }
}