/* ===== Foundations ===== */
:root{
  --bg: #000000;
  --bg-alt: #000000;
  --ink: #f3ede6;
  --ink-dim: #b8afa6;
  --ink-faint: #7a716a;
  --wine: #6e1630;
  --wine-bright: #9c2a4a;
  --gold: #c9a25a;
  --line: rgba(243,237,230,0.12);
  --card-glow: 0 0 0 1px rgba(243,237,230,.22), 0 0 26px -4px rgba(243,237,230,.14);
  --card-glow-dark: 0 0 0 1px rgba(20,10,8,.12), 0 0 30px -8px rgba(20,10,8,.14);
  --ff-display: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
  --ff-body: "Inter", "Helvetica Neue", Arial, sans-serif;
  --ease: cubic-bezier(.16,.84,.44,1);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--ff-body);
  font-weight:300;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,video{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
h1,h2,h3{font-family:var(--ff-display);margin:0;font-weight:600;}
p{margin:0;}
.italic{font-style:italic;font-weight:400;color:var(--ink-dim);}

.grain{
  position:fixed;inset:0;pointer-events:none;z-index:999;
  opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ===== Preloader ===== */
.preloader{
  position:fixed;inset:0;z-index:10000;
  background:var(--bg);
  display:flex;align-items:center;justify-content:center;
}
.preloader-inner{
  display:flex;flex-direction:column;align-items:center;gap:22px;
}
.preloader-mark{
  font-family:var(--ff-display);
  font-size:13px;
  letter-spacing:.36em;
  text-transform:uppercase;
  color:var(--ink-dim);
}
.preloader-bar{
  width:220px;height:1px;
  background:rgba(243,237,230,.14);
  position:relative;
  overflow:hidden;
}
.preloader-fill{
  position:absolute;left:0;top:0;bottom:0;
  width:0%;
  background:linear-gradient(90deg, var(--wine-bright), var(--gold));
  box-shadow:0 0 12px 1px rgba(201,162,90,.6);
}
.preloader-percent{
  font-family:var(--ff-body);
  font-size:11px;
  letter-spacing:.1em;
  color:var(--ink-faint);
}

/* ===== Custom cursor (desktop, fine pointer only) — a soft warm glow
   that follows the pointer, with a small high-contrast core dot, rather
   than a plain ring outline. ===== */
.custom-cursor{
  position:fixed;top:0;left:0;
  width:70px;height:70px;
  border-radius:50%;
  transform:translate(-50%,-50%);
  pointer-events:none;
  z-index:9999;
  background:radial-gradient(circle, rgba(201,162,90,.55), rgba(156,42,74,.32) 45%, transparent 72%);
  filter:blur(3px);
  opacity:.75;
  transition:width .4s var(--ease), height .4s var(--ease), opacity .4s var(--ease);
  will-change:transform;
}
.custom-cursor::after{
  content:"";
  position:absolute;left:50%;top:50%;
  width:7px;height:7px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:var(--ink);
  mix-blend-mode:difference;
}
.custom-cursor.is-active{
  width:130px;height:130px;
  opacity:1;
}
body.has-custom-cursor,
body.has-custom-cursor a,
body.has-custom-cursor button{
  cursor:none;
}
@media (hover:none), (pointer:coarse){
  .custom-cursor{display:none;}
}

/* ===== Sound widget ===== */
.sound-widget{
  position:fixed;top:24px;right:24px;z-index:60;
  display:flex;align-items:center;gap:10px;
}
.sound-hint{
  font-family:var(--ff-body);
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink-dim);
  background:rgba(20,10,8,.55);
  border:1px solid var(--line);
  padding:9px 14px;
  border-radius:999px;
  backdrop-filter:blur(6px);
  white-space:nowrap;
  opacity:0;
  transform:translateX(8px);
  pointer-events:none;
  transition:opacity .4s var(--ease), transform .4s var(--ease);
}
.sound-widget:hover .sound-hint,
.sound-widget.is-hinting .sound-hint{
  opacity:1;
  transform:translateX(0);
}
.sound-toggle{
  position:relative;
  width:48px;height:48px;border-radius:50%;
  background:rgba(243,237,230,0.06);
  border:1px solid var(--line);
  backdrop-filter:blur(6px);
  color:var(--ink);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:background .3s var(--ease),border-color .3s var(--ease);
}
.sound-toggle:hover{background:rgba(243,237,230,0.12);border-color:rgba(243,237,230,.3);}
.sound-toggle svg{width:20px;height:20px;}
.sound-toggle__glow{
  position:absolute;inset:-7px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(156,42,74,.55), rgba(201,162,90,.2) 55%, transparent 75%);
  opacity:0;
  pointer-events:none;
  transition:opacity .4s var(--ease);
}
.sound-toggle[aria-pressed="true"] .sound-toggle__glow{
  opacity:1;
  animation:soundPulseRing 2.2s ease-in-out infinite;
}
@keyframes soundPulseRing{
  0%,100%{ transform:scale(1); opacity:.55; }
  50%{ transform:scale(1.3); opacity:.85; }
}
.sound-bars{
  display:none;
  align-items:flex-end;
  gap:3px;
  height:16px;
}
.sound-toggle[aria-pressed="true"] .sound-bars{display:flex;}
.sound-toggle[aria-pressed="true"] .icon-sound-off{display:none;}
.sound-bars i{
  width:3px;border-radius:2px;display:block;
  background:var(--ink);
  animation:soundBar .9s ease-in-out infinite;
}
.sound-bars i:nth-child(1){height:6px;animation-delay:0s;}
.sound-bars i:nth-child(2){height:14px;animation-delay:.15s;}
.sound-bars i:nth-child(3){height:9px;animation-delay:.3s;}
.sound-bars i:nth-child(4){height:16px;animation-delay:.45s;}
@keyframes soundBar{
  0%,100%{transform:scaleY(.4);}
  50%{transform:scaleY(1);}
}
@media (prefers-reduced-motion: reduce){
  .sound-toggle__glow, .sound-bars i{animation:none;}
}

/* ===== Hero ===== */
.hero{
  position:relative;
  height:100svh;
  min-height:640px;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  perspective:1200px;
  background:
    radial-gradient(ellipse 70% 55% at 50% 38%, rgba(110,22,48,.28), transparent 65%),
    var(--bg);
}

.card-field{
  position:absolute;inset:0;
  z-index:1;
  transform-style:preserve-3d;
  will-change:transform;
}

.card{
  position:absolute;
  left:var(--x);
  top:var(--y);
  width:var(--w);
  min-width:96px;
  max-width:190px;
  aspect-ratio:3/4.4;
  border-radius:10px;
  overflow:hidden;
  box-shadow:0 20px 60px -18px rgba(0,0,0,.75), 0 2px 0 rgba(255,255,255,.03) inset, var(--card-glow);
  will-change:transform;
  cursor:grab;
  touch-action:none;
}
.card:active{cursor:grabbing;}
.card img,.card video{
  width:100%;height:100%;object-fit:cover;
  border-radius:inherit;
  pointer-events:none;
  user-select:none;
  -webkit-user-drag:none;
}
.card::after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.35) 100%);
  pointer-events:none;
}
.card--video::before{
  content:"";
  position:absolute;top:10px;left:10px;width:7px;height:7px;border-radius:50%;
  background:var(--wine-bright);
  box-shadow:0 0 0 3px rgba(156,42,74,.25);
  z-index:2;
}

.hero-copy{
  position:relative;z-index:2;
  max-width:760px;
  padding:0 24px;
  text-align:center;
  pointer-events:none;
}
.hero-copy .btn{pointer-events:auto;}

.eyebrow{
  font-family:var(--ff-body);
  font-size:12px;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--ink-dim);
  margin-bottom:22px;
}
.headline{
  font-size:clamp(2.4rem, 6vw, 5.2rem);
  line-height:1.02;
  letter-spacing:-.02em;
  color:var(--ink);
}
.headline-accent{
  display:block;
  color:var(--ink-dim);
  font-style:italic;
  font-weight:400;
  font-size:.55em;
  margin-top:.35em;
}
.subhead{
  font-family:var(--ff-display);
  font-size:clamp(1.1rem,2vw,1.5rem);
  color:var(--wine-bright);
  margin-top:28px;
  font-weight:500;
}
.body-text{
  margin:22px auto 0;
  max-width:560px;
  font-size:16px;
  line-height:1.7;
  color:var(--ink-dim);
  font-weight:300;
}

.btn{
  display:inline-block;
  margin-top:40px;
  padding:17px 38px;
  border-radius:999px;
  font-family:var(--ff-body);
  font-size:14px;
  letter-spacing:.02em;
  font-weight:500;
}
.btn--primary{
  position:relative;
  background:linear-gradient(135deg, var(--wine-bright), var(--wine));
  color:var(--ink);
  border:1px solid rgba(201,162,90,.5);
  box-shadow:
    0 0 0 1px rgba(201,162,90,.25),
    0 0 18px 2px rgba(156,42,74,.55),
    0 0 40px 6px rgba(201,162,90,.2);
  transition:transform .45s var(--ease), box-shadow .45s var(--ease), background .45s var(--ease);
  animation:neonPulse 3.2s ease-in-out infinite;
}
.btn--primary:hover{
  background:linear-gradient(135deg, var(--gold), var(--wine-bright));
  color:#100809;
  transform:translateY(-2px);
  box-shadow:
    0 0 0 1px rgba(201,162,90,.6),
    0 0 26px 4px rgba(201,162,90,.65),
    0 0 60px 10px rgba(156,42,74,.4);
}
@keyframes neonPulse{
  0%,100%{ box-shadow:0 0 0 1px rgba(201,162,90,.25), 0 0 18px 2px rgba(156,42,74,.55), 0 0 40px 6px rgba(201,162,90,.2); }
  50%{ box-shadow:0 0 0 1px rgba(201,162,90,.4), 0 0 26px 4px rgba(156,42,74,.7), 0 0 55px 10px rgba(201,162,90,.32); }
}
@media (prefers-reduced-motion: reduce){
  .btn--primary{ animation:none; }
}

.scroll-cue{
  position:absolute;bottom:34px;left:50%;transform:translateX(-50%);
  z-index:2;
}
.scroll-cue span{
  display:block;width:1px;height:46px;
  background:linear-gradient(180deg, var(--ink-dim), transparent);
  animation:scrollcue 2.2s ease-in-out infinite;
}
@keyframes scrollcue{
  0%{opacity:0;transform:scaleY(.3);transform-origin:top;}
  40%{opacity:1;transform:scaleY(1);transform-origin:top;}
  100%{opacity:0;transform:scaleY(1);transform-origin:bottom;}
}

/* ===== Cinematic scroll reveal =====
   Full-bleed video, visible immediately (no fade-in delay, no gap,
   no small-card phase). While the section is pinned, a slow Ken Burns
   zoom plays and the caption/headline fades in and back out. */
.reveal-seq{
  position:relative;
  height:100svh;
  overflow:hidden;
  background:#000000;
}
.reveal-media{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}
.reveal-media video{
  width:100%;height:100%;object-fit:cover;display:block;
}
.reveal-media--scrub{
  background-size:cover;
  background-position:center;
}
.reveal-media--scrub canvas{
  width:100%;height:100%;display:block;
  /* The footage was shot on a white studio backdrop, which otherwise
     flashes hard against the page's black. A slight grade — darkened and
     a touch warmer — keeps it always visible (no dead black time) while
     softening that contrast so it sits closer to the site's palette. */
  filter:brightness(.8) saturate(1.08) contrast(1.02);
}
.reveal-media--scrub::after{
  content:"";
  position:absolute;inset:0;
  z-index:1;
  pointer-events:none;
  background:radial-gradient(ellipse 75% 70% at 50% 50%, transparent 55%, rgba(0,0,0,.55) 100%);
}
.reveal-overlay{
  position:absolute;inset:0;
  background:rgba(0,0,0,.45);
  opacity:0;
  z-index:2;
  pointer-events:none;
}
.reveal-text{
  position:absolute;inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  text-align:center;
  padding:0 40px;
  font-family:var(--ff-display);
  font-size:clamp(2rem,5.5vw,4.4rem);
  line-height:1.14;
  color:var(--ink);
  opacity:0;
  z-index:3;
  pointer-events:none;
}
/* Side variant — small tilted card that flies in from the right
   edge, with a text block reading in the space beside it */
.reveal-seq--side{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:6vw;
  padding:0 8vw;
}
.reveal-media--side{
  position:relative;
  inset:auto;
  flex:0 0 auto;
  width:min(340px, 34vw);
  aspect-ratio:9/16; /* matches the source video exactly — no cropping */
  border-radius:0;
  overflow:visible;
  /* ambient bloom behind the flower instead of a card outline, so the
     video's rectangle never reads as a "card" against the black page */
  background:radial-gradient(ellipse 55% 42% at 50% 46%, rgba(156,42,74,.4), rgba(201,162,90,.12) 55%, transparent 78%);
}
.reveal-media--side video{
  /* soft radial mask: fades the video's hard rectangular edge into the
     page's black before it reaches the frame border, so only the flower
     (and its own built-in zoom) is ever visible — never a video "box" */
  -webkit-mask-image:radial-gradient(ellipse 58% 50% at 50% 45%, #000 62%, transparent 92%);
  mask-image:radial-gradient(ellipse 58% 50% at 50% 45%, #000 62%, transparent 92%);
}
.reveal-side-text{
  max-width:420px;
  opacity:0;
}
.reveal-side-text .eyebrow{
  color:var(--wine-bright);
  margin-bottom:18px;
}
.reveal-side-heading{
  font-family:var(--ff-display);
  font-size:clamp(1.6rem,3.4vw,2.6rem);
  line-height:1.25;
  color:var(--ink);
  font-weight:500;
}
@media (max-width: 780px){
  .reveal-seq--side{
    flex-direction:column;
    justify-content:center;
    padding:0 24px;
    gap:36px;
  }
  .reveal-media--side{
    width:min(280px, 62vw);
  }
  .reveal-side-text{
    text-align:center;
    order:2;
  }
}

/* ===== Floating accent cards (used inside content sections) ===== */
.accent-card{
  position:absolute;
  left:var(--accent-x);
  top:var(--accent-y);
  width:var(--accent-w, 120px);
  aspect-ratio:3/4;
  border-radius:10px;
  overflow:hidden;
  box-shadow:0 20px 50px -15px rgba(0,0,0,.65), var(--card-glow);
  transform:translate(-50%,-50%) rotate(var(--r,0deg));
  z-index:1;
  pointer-events:none;
  opacity:.92;
  animation:accentFloat 7s ease-in-out infinite;
  animation-delay:var(--delay,0s);
}
.accent-card img,
.accent-card video{
  width:100%;height:100%;object-fit:cover;display:block;
  border-radius:inherit;
}
@keyframes accentFloat{
  0%,100%{ transform:translate(-50%,-50%) rotate(var(--r,0deg)) translateY(0); }
  50%{ transform:translate(-50%,-50%) rotate(calc(var(--r,0deg) + 3deg)) translateY(-16px); }
}
@media (max-width: 900px){
  .accent-card{ display:none; }
}
@media (prefers-reduced-motion: reduce){
  .accent-card{ animation:none; }
}

/* ===== Cursor-spotlight glow — every card catches a soft light
   that follows the pointer, so hovering feels alive and premium =====
   Note: .card already has its own position:absolute (it's placed by
   --x/--y coordinates) — redeclaring position:relative here used to
   silently override that (same specificity, later in the cascade),
   which made every hero card lay out in normal document flow instead
   of at its intended coordinate. Left out of this list on purpose. */
.step-media,
.create-thumb,
.create-item,
.portfolio-card,
.trust-portrait,
.package-card{
  position:relative;
}
.card::before,
.step-media::before,
.create-thumb::before,
.create-item::before,
.portfolio-card::before,
.trust-portrait::before,
.package-card::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:6;
  opacity:0;
  background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%), rgba(201,162,90,.4), rgba(156,42,74,.22) 42%, transparent 68%);
  transition:opacity .5s var(--ease);
  pointer-events:none;
  mix-blend-mode:screen;
  border-radius:inherit;
}
.card:hover::before,
.step-media:hover::before,
.create-thumb:hover::before,
.create-item:hover::before,
.portfolio-card:hover::before,
.trust-portrait:hover::before,
.package-card:hover::before{
  opacity:1;
}
@media (hover:none){
  .card::before,
  .step-media::before,
  .create-thumb::before,
  .create-item::before,
  .portfolio-card::before,
  .trust-portrait::before,
  .package-card::before{
    display:none;
  }
}

/* ===== Sections ===== */
.section{
  position:relative;
  padding:150px 24px;
  background:var(--bg-alt);
  overflow:hidden;
}
.section-inner{
  position:relative;
  z-index:2;
  max-width:1080px;
  margin:0 auto;
}
.section-head{
  font-size:clamp(1.9rem,4vw,3.2rem);
  line-height:1.08;
  letter-spacing:-.01em;
  margin-bottom:64px;
  max-width:820px;
}

.reveal{
  opacity:0;
  transform:translateY(36px);
}

/* Pain */
.pain{padding-top:130px;padding-bottom:130px;}
.pain-line{
  font-family:var(--ff-display);
  font-size:clamp(1.3rem,2.6vw,2rem);
  line-height:1.45;
  color:var(--ink-dim);
  max-width:900px;
  padding:34px 0;
  border-bottom:1px solid var(--line);
}
.pain-line:first-child{border-top:1px solid var(--line);}
.pain-line:last-child{color:var(--ink);}

/* How it works */
.steps{list-style:none;margin:0;padding:0;display:grid;gap:0;}
.step{
  display:grid;
  grid-template-columns:70px 84px 1fr;
  gap:28px;
  padding:32px 0;
  border-top:1px solid var(--line);
  align-items:center;
}
.steps li:last-child{border-bottom:1px solid var(--line);}
.step-num{
  font-family:var(--ff-display);
  font-size:14px;
  color:var(--wine-bright);
  letter-spacing:.08em;
}
.step-media{
  width:84px;height:84px;
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 15px 40px -14px rgba(0,0,0,.65), var(--card-glow);
  flex:0 0 auto;
}
.step-media img,.step-media video{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit;}
.step h3{
  font-size:clamp(1.2rem,2vw,1.6rem);
  margin-bottom:10px;
}
.step p{color:var(--ink-dim);line-height:1.6;font-size:15px;max-width:560px;}

/* What I create — mobile: simple vertical stack.
   Desktop (>=900px): horizontal scroll-pinned track, see #createViewport
   below and the matchMedia block in main.js. */
.create-viewport{
  overflow:hidden;
}
.create-grid{
  display:flex;
  flex-direction:column;
  gap:16px;
}
@media (min-width:900px){
  /* Break out of .section-inner's 1080px cap so the track uses the full
     window width — on wide monitors a narrow, capped track meant lots of
     empty black space beside it and a long, "empty-feeling" scroll pin. */
  .create-viewport{
    width:100vw;
    position:relative;
    left:50%;
    transform:translateX(-50%);
    padding:0 40px;
  }
  .create-grid{
    flex-direction:row;
    flex-wrap:nowrap;
    width:max-content;
    gap:20px;
  }
}
.create-item{
  position:relative;
  overflow:hidden;
  background:var(--bg-alt);
  border:1px solid var(--line);
  border-radius:18px;
  padding:40px 36px;
  min-height:200px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
@media (min-width:900px){
  .create-item{
    flex:0 0 300px;
    min-height:300px;
  }
}
/* ambient gradient blob — a soft wash of color that idles behind the
   card content, giving each card presence even before you hover it */
.create-item::after,
.trust-portrait::after{
  content:"";
  position:absolute;
  z-index:-1;
  top:-25%;
  left:-15%;
  width:75%;
  height:75%;
  background:radial-gradient(circle, rgba(201,162,90,.5), rgba(156,42,74,.4) 45%, transparent 72%);
  filter:blur(42px);
  animation:blobDrift 10s ease-in-out infinite;
  pointer-events:none;
}
.create-item:nth-child(even)::after{
  background:radial-gradient(circle, rgba(156,42,74,.5), rgba(201,162,90,.35) 45%, transparent 72%);
  top:auto; bottom:-25%; left:auto; right:-15%;
  animation-delay:-4s;
}
@keyframes blobDrift{
  0%,100%{ transform:translate(0,0) scale(1); }
  50%{ transform:translate(14%,10%) scale(1.2); }
}
@media (prefers-reduced-motion: reduce){
  .create-item::after,
  .trust-portrait::after{ animation:none; }
}
.create-thumb{
  position:absolute;
  top:24px;right:24px;
  width:60px;height:60px;
  border-radius:8px;
  overflow:hidden;
  box-shadow:0 12px 30px -10px rgba(0,0,0,.65), var(--card-glow);
  opacity:.9;
}
.create-thumb img,.create-thumb video{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit;}
.create-index{
  font-family:var(--ff-display);
  color:var(--ink-faint);
  font-size:13px;
  letter-spacing:.08em;
  margin-bottom:24px;
}
.create-item p{
  font-family:var(--ff-display);
  font-size:clamp(1.05rem,1.6vw,1.3rem);
  line-height:1.4;
  color:var(--ink);
  font-weight:400;
}

/* Portfolio: compact auto-advancing card stack (no full-viewport pin,
   so it never leaves empty space above/below on short content) */
.portfolio-note{
  color:var(--ink-faint);
  font-size:13px;
  margin-top:-40px;
  margin-bottom:48px;
}
.portfolio-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:20px;
}
.portfolio-arrow{
  flex:0 0 auto;
  width:44px;height:44px;
  border-radius:50%;
  border:1px solid var(--line);
  background:rgba(243,237,230,.04);
  color:var(--ink-dim);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:border-color .3s var(--ease), color .3s var(--ease), background .3s var(--ease), transform .3s var(--ease);
}
.portfolio-arrow svg{width:18px;height:18px;}
.portfolio-arrow:hover{
  border-color:var(--wine-bright);
  color:var(--ink);
  background:rgba(156,42,74,.15);
  transform:scale(1.06);
}
@media (max-width: 640px){
  .portfolio-arrow{width:36px;height:36px;}
  .portfolio-arrow svg{width:15px;height:15px;}
}
.portfolio-viewport{
  overflow:hidden;
  width:100%;
  max-width:860px;
  margin:0 auto;
}
.portfolio-track{
  display:flex;
  gap:20px;
  will-change:transform;
}
.portfolio-card{
  position:relative;
  flex:0 0 260px;
  aspect-ratio:3/4;
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 30px 70px -18px rgba(0,0,0,.7), var(--card-glow);
  cursor:pointer;
}
.portfolio-card img,
.portfolio-card video{
  width:100%;height:100%;object-fit:cover;display:block;
  border-radius:inherit;
  transition:transform .6s var(--ease);
}
.portfolio-contain-bg{
  position:absolute;inset:0;
  background:#000;
  z-index:0;
}
.portfolio-card video.is-contained{
  position:relative;
  z-index:1;
  object-fit:contain;
  background:transparent;
}
.portfolio-card:hover img,
.portfolio-card:hover video{
  transform:scale(1.08);
}
.portfolio-card::after{
  content:"";
  position:absolute;inset:0;
  z-index:1;
  background:linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.6) 100%);
}
.portfolio-tag{
  position:absolute;
  left:20px;bottom:18px;
  z-index:2;
  font-family:var(--ff-display);
  font-size:15px;
  letter-spacing:.03em;
  color:var(--ink);
}
.portfolio-dots{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  margin-top:28px;
}
.portfolio-dot{
  width:7px;height:7px;
  border-radius:50%;
  background:rgba(243,237,230,.22);
  border:none;
  padding:0;
  cursor:pointer;
  transition:background .3s var(--ease), transform .3s var(--ease);
}
.portfolio-dot.is-active{
  background:var(--wine-bright);
  transform:scale(1.3);
}
@media (max-width: 640px){
  .portfolio-viewport{ max-width:min(300px, 80vw); }
  .portfolio-card{ flex:0 0 100%; }
}

/* ===== Portfolio fullscreen lightbox (GSAP Flip target) ===== */
.portfolio-lightbox{
  position:fixed;inset:0;z-index:500;
  display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.88);
  backdrop-filter:blur(10px);
  opacity:0;
  visibility:hidden;
  transition:opacity .4s var(--ease), visibility 0s linear .4s;
}
.portfolio-lightbox.is-open{
  opacity:1;
  visibility:visible;
  transition:opacity .4s var(--ease), visibility 0s linear 0s;
}
.portfolio-lightbox__stage{
  position:relative;
  width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
}
.portfolio-card.in-lightbox{
  position:relative !important;
  inset:auto !important;
  flex:none !important;
  width:min(78vw, 460px);
  aspect-ratio:3/4;
  cursor:default;
  box-shadow:0 60px 140px -30px rgba(0,0,0,.85), var(--card-glow);
}
.portfolio-lightbox__close{
  position:absolute;top:28px;right:28px;z-index:2;
  width:46px;height:46px;border-radius:50%;
  border:1px solid var(--line);
  background:rgba(243,237,230,.06);
  color:var(--ink);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  transition:background .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.portfolio-lightbox__close:hover{
  background:rgba(156,42,74,.2);
  border-color:var(--wine-bright);
  transform:rotate(90deg);
}
.portfolio-lightbox__close svg{width:18px;height:18px;}
body.lightbox-open{overflow:hidden;}

/* Trust */
.trust-inner{
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:70px;
  align-items:center;
}
.trust-portrait{
  position:relative;
  border-radius:10px;
  aspect-ratio:3/4;
  box-shadow:0 30px 70px -20px rgba(0,0,0,.7), var(--card-glow);
}
.trust-portrait img{width:100%;height:100%;object-fit:cover;border-radius:inherit;}
.trust-note{
  font-family:var(--ff-display);
  font-size:clamp(1.4rem,2.6vw,2.1rem);
  line-height:1.35;
  color:var(--ink);
}
.trust-guarantee{
  margin-top:30px;
  padding-top:30px;
  border-top:1px solid var(--line);
  color:var(--ink-dim);
  font-size:16px;
  line-height:1.7;
  max-width:480px;
}

/* Packages */
.package-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}
.package-card{
  border:1px solid var(--line);
  border-radius:14px;
  padding:44px 32px;
  text-align:left;
  transition:border-color .4s var(--ease), transform .4s var(--ease);
}
.package-card:hover{border-color:rgba(243,237,230,.35);transform:translateY(-6px);}
.package-card h3{
  font-size:1.4rem;
  margin-bottom:18px;
}
.package-price{
  font-family:var(--ff-display);
  font-size:clamp(1.5rem, 2.4vw, 2.1rem);
  color:var(--ink-faint);
  margin-bottom:20px;
}
.package-desc{color:var(--ink-dim);font-size:14px;line-height:1.6;}
.package-card--featured{
  background:linear-gradient(160deg, rgba(110,22,48,.22), rgba(110,22,48,.03));
  border-color:var(--wine-bright);
}
.package-features{
  list-style:none;
  margin:22px 0 30px;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:11px;
}
.package-features li{
  position:relative;
  padding-left:20px;
  color:var(--ink-dim);
  font-size:14px;
  line-height:1.5;
}
.package-features li::before{
  content:"";
  position:absolute;left:0;top:8px;
  width:5px;height:5px;
  border-radius:50%;
  background:var(--wine-bright);
}
.package-card--featured .package-features li::before{
  background:var(--gold);
}
.package-cta{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:13px 24px;
  border-radius:999px;
  border:1px solid var(--line);
  font-family:var(--ff-body);
  font-size:14px;
  font-weight:500;
  color:var(--ink);
  transition:border-color .35s var(--ease), background .35s var(--ease), gap .35s var(--ease), transform .35s var(--ease);
}
.package-cta:hover{
  border-color:var(--wine-bright);
  background:rgba(156,42,74,.15);
  gap:12px;
  transform:translateY(-2px);
}
.package-card--featured .package-cta{
  border-color:rgba(201,162,90,.5);
  color:var(--gold);
}
.package-card--featured .package-cta:hover{
  background:rgba(201,162,90,.15);
}

/* Scarcity */
.scarcity{
  padding:110px 24px;
  text-align:center;
}
.scarcity-line{
  font-family:var(--ff-display);
  font-size:clamp(1.4rem,3vw,2.2rem);
  font-style:italic;
  color:var(--ink-dim);
  max-width:760px;
  margin:0 auto;
}

/* FAQ */
.faq-list{border-top:1px solid var(--line);}
.faq-item{border-bottom:1px solid var(--line);}
.faq-q{
  width:100%;
  background:none;
  border:none;
  color:var(--ink);
  font-family:var(--ff-display);
  font-size:clamp(1.05rem,1.8vw,1.35rem);
  text-align:left;
  padding:30px 0;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}
.faq-icon{
  position:relative;
  width:18px;height:18px;flex:0 0 auto;
}
.faq-icon::before,.faq-icon::after{
  content:"";
  position:absolute;background:var(--ink-dim);
  transition:transform .35s var(--ease);
}
.faq-icon::before{top:50%;left:0;width:100%;height:1px;transform:translateY(-50%);}
.faq-icon::after{left:50%;top:0;height:100%;width:1px;transform:translateX(-50%);}
.faq-item.open .faq-icon::after{transform:translateX(-50%) rotate(90deg);opacity:0;}
.faq-a{
  height:0;
  overflow:hidden;
}
.faq-a p{
  color:var(--ink-dim);
  font-size:15px;
  line-height:1.7;
  padding-bottom:30px;
  max-width:620px;
}

/* Final CTA */
.final-cta{
  text-align:center;
  padding-bottom:80px;
}
.final-cta .section-head{margin:0 auto 26px;}
.final-body{
  color:var(--ink-dim);
  font-size:16px;
  line-height:1.7;
  max-width:520px;
  margin:0 auto;
}
.footer{
  text-align:center;
  padding:70px 24px 30px;
  color:var(--ink-faint);
  font-size:12px;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.social-links{
  display:flex;
  justify-content:center;
  gap:14px;
  margin-bottom:28px;
}
.social-link{
  width:44px;height:44px;
  border-radius:50%;
  border:1px solid var(--line);
  background:rgba(243,237,230,.04);
  display:flex;align-items:center;justify-content:center;
  color:var(--ink-dim);
  transition:border-color .3s var(--ease), background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
.social-link svg{width:19px;height:19px;}
.social-link:hover{
  border-color:var(--wine-bright);
  background:rgba(156,42,74,.15);
  color:var(--ink);
  transform:translateY(-3px);
}

/* ===== Footer legal links + company details (Spanish LSSI requires the
   provider's name, tax ID, address and contact email to be reachable from
   every page) ===== */
.footer-legal{
  margin-top:22px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:10px;
  font-size:12px;
  letter-spacing:.03em;
  text-transform:none;
}
.footer-legal__link{
  background:none;
  border:none;
  padding:0;
  color:var(--ink-faint);
  font-family:var(--ff-body);
  font-size:12px;
  cursor:pointer;
  text-decoration:underline;
  text-decoration-color:transparent;
  transition:color .3s var(--ease), text-decoration-color .3s var(--ease);
}
.footer-legal__link:hover{
  color:var(--ink-dim);
  text-decoration-color:currentColor;
}
.footer-legal__sep{color:var(--ink-faint);}
.footer-company{
  margin-top:16px;
  color:var(--ink-faint);
  font-size:11px;
  line-height:1.7;
  letter-spacing:.02em;
  text-transform:none;
}
.footer-company a{text-decoration:underline; text-decoration-color:transparent; transition:text-decoration-color .3s var(--ease);}
.footer-company a:hover{text-decoration-color:currentColor;}

/* ===== Legal document modal ===== */
.legal-modal{
  position:fixed;inset:0;z-index:600;
  display:flex;align-items:center;justify-content:center;
  padding:24px;
  background:rgba(0,0,0,.88);
  backdrop-filter:blur(10px);
  opacity:0;
  visibility:hidden;
  transition:opacity .4s var(--ease), visibility 0s linear .4s;
}
.legal-modal.is-open{
  opacity:1;
  visibility:visible;
  transition:opacity .4s var(--ease), visibility 0s linear 0s;
}
.legal-modal__box{
  position:relative;
  width:min(720px, 100%);
  max-height:min(80vh, 720px);
  display:flex;
  flex-direction:column;
  background:var(--bg-alt);
  border:1px solid var(--line);
  border-radius:18px;
  padding:32px;
  box-shadow:0 40px 100px -20px rgba(0,0,0,.8), var(--card-glow);
}
.legal-modal__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:18px;
}
.legal-modal__tabs{
  display:flex;
  gap:8px;
}
.legal-modal__tab{
  padding:8px 16px;
  border-radius:999px;
  border:1px solid var(--line);
  background:transparent;
  color:var(--ink-dim);
  font-family:var(--ff-body);
  font-size:13px;
  cursor:pointer;
  transition:border-color .3s var(--ease), background .3s var(--ease), color .3s var(--ease);
}
.legal-modal__tab.is-active{
  border-color:var(--wine-bright);
  background:rgba(156,42,74,.18);
  color:var(--ink);
}
.legal-modal__close{
  flex:0 0 auto;
  width:38px;height:38px;
  border-radius:50%;
  border:1px solid var(--line);
  background:rgba(243,237,230,.06);
  color:var(--ink);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  transition:background .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.legal-modal__close:hover{
  background:rgba(156,42,74,.2);
  border-color:var(--wine-bright);
  transform:rotate(90deg);
}
.legal-modal__close svg{width:16px;height:16px;}
.legal-modal__title{
  font-size:1.4rem;
  margin-bottom:16px;
}
.legal-modal__body{
  overflow-y:auto;
  color:var(--ink-dim);
  font-size:14px;
  line-height:1.75;
  padding-right:8px;
}
.legal-modal__body p{margin:0 0 16px;}
.legal-modal__body p:last-child{margin-bottom:0;}
body.legal-open{overflow:hidden;}

/* ===== Responsive ===== */
@media (max-width: 860px){
  .trust-inner{grid-template-columns:1fr;gap:40px;}
  .trust-portrait{max-width:280px;}
  .package-grid{grid-template-columns:1fr;}
  .step{grid-template-columns:44px 60px 1fr;gap:16px;}
  .step-media{width:60px;height:60px;border-radius:9px;}
  .create-thumb{width:48px;height:48px;top:20px;right:20px;}
}

@media (max-width: 640px){
  .section{padding:100px 20px;}
  .hero-copy{padding:0 20px;}
  .hero{min-height:112svh;}
  .card{max-width:130px; min-width:68px;}
  .card:nth-child(n+5):not(:nth-child(5)){display:none;}
  /* these must beat the inline --x/--y/--w set by renderCards() in JS,
     which otherwise always wins over a plain stylesheet rule */
  .card:nth-child(1){--x:14% !important; --y:8% !important; --w:15vw !important;}
  .card:nth-child(2){--x:86% !important; --y:8% !important; --w:15vw !important;}
  .card:nth-child(3){--x:0% !important; --y:63% !important; --w:13vw !important;}
  .card:nth-child(4){--x:100% !important; --y:63% !important; --w:13vw !important;}
  .card:nth-child(5){--x:50% !important; --y:95% !important; --w:22vw !important;}
  /* Idle float — on touch devices there's no pointer to drive the 3D
     tilt/parallax, so each card gets a gentle continuous drift instead,
     to keep the hero feeling alive rather than perfectly static. */
  .card{ animation:cardFloat 6s ease-in-out infinite; }
  .card:nth-child(2),.card:nth-child(4){ animation-delay:-2s; }
  .card:nth-child(3),.card:nth-child(5){ animation-delay:-4s; }

  .headline{font-size:2.05rem;}
  .eyebrow{margin-bottom:14px;}
  .subhead{margin-top:16px;}
  .body-text{margin-top:16px;font-size:15px;}
  .btn{margin-top:28px;padding:15px 32px;}
}
@keyframes cardFloat{
  0%,100%{ margin-top:0; }
  50%{ margin-top:-10px; }
}
@media (prefers-reduced-motion: reduce){
  .card{ animation:none; }
}

@media (hover:none){
  .card{cursor:default;}
}