/* ==========================================================================
   StackaWraps Studios — Legacy & Celebration Films
   Palette: deep charcoal / black + premium gold + warm cream
   ========================================================================== */

:root{
  --ink:            #05070b;
  --ink-2:          #0a0d14;
  --ink-3:          #101520;
  --gold:           #d9ac5e;
  --gold-light:     #f0d79a;
  --gold-deep:      #a9793a;
  --gold-hair:      rgba(217,172,94,.28);
  --gold-hair-soft: rgba(217,172,94,.16);
  --cream:          #f7f3ea;
  --muted:          #b3bbc7;
  --muted-2:        #8a93a1;

  --shell:      1120px;
  --shell-slim: 800px;

  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;

  --ease: cubic-bezier(.22,.72,.2,1);

  --step--1: clamp(.78rem, .74rem + .18vw, .86rem);
  --step-0:  clamp(.95rem, .9rem + .25vw, 1.05rem);
  --step-1:  clamp(1.05rem, .98rem + .4vw, 1.25rem);
  --step-2:  clamp(1.3rem, 1.15rem + .8vw, 1.85rem);
  --step-3:  clamp(1.9rem, 1.35rem + 3vw, 3.6rem);
}

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body,h1,h2,h3,p,ul,figure{ margin:0; }
ul{ padding:0; list-style:none; }
img,svg{ display:block; max-width:100%; }
img{ height:auto; }
button,input,select,textarea{ font:inherit; color:inherit; }

body{
  position:relative;
  background:var(--ink);
  color:var(--cream);
  font-family:"Montserrat","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-weight:400;
  font-size:var(--step-0);
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* ---------- ambient background ---------- */
.atmos{
  position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(680px 420px at 12% 18%, rgba(196,142,58,.13), transparent 65%),
    radial-gradient(520px 380px at 88% 34%, rgba(168,120,52,.10), transparent 66%),
    radial-gradient(760px 520px at 50% 88%, rgba(214,168,88,.11), transparent 70%),
    radial-gradient(420px 300px at 82% 72%, rgba(150,104,44,.08), transparent 70%),
    linear-gradient(180deg,#05070b 0%, #080b12 38%, #0a0e16 62%, #05070b 100%);
}
/* candlelight, champagne and gold particles lifted from the artwork,
   framing everything below the hero */
.page-bg{
  position:absolute; inset:0; z-index:-1;
  overflow:hidden; pointer-events:none;
  background-image:url("assets/bokeh-field.jpg");
  background-repeat:repeat;
  background-size:clamp(300px,48vw,600px) auto;
  opacity:.72;
}
.page-bg::before,
.page-bg::after{
  content:"";
  position:absolute; top:0; bottom:0;
  width:clamp(112px,26vw,380px);
  background-repeat:repeat-y;
  background-size:100% auto;
  opacity:.9;
}
.page-bg::before{ left:0;  background-image:url("assets/ambience-tile-left.jpg"); }
.page-bg::after{  right:0; background-image:url("assets/ambience-tile-right.jpg"); }

/* keeps the centre of the page calm enough to read while the
   candlelight and particles stay rich at the edges */
.page-veil{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    linear-gradient(90deg,
      rgba(5,7,11,.10) 0%,
      rgba(5,7,11,.66) 22%,
      rgba(5,7,11,.84) 44%,
      rgba(5,7,11,.84) 56%,
      rgba(5,7,11,.66) 78%,
      rgba(5,7,11,.10) 100%);
}
@media (max-width:700px){
  .page-veil{
    background:linear-gradient(90deg,
      rgba(5,7,11,.05) 0%,
      rgba(5,7,11,.62) 20%,
      rgba(5,7,11,.8) 42%,
      rgba(5,7,11,.8) 58%,
      rgba(5,7,11,.62) 80%,
      rgba(5,7,11,.05) 100%);
  }
}

.ambience{ position:relative; }
.ambience::before,
.ambience::after{
  content:"";
  position:absolute; top:0; bottom:0; z-index:-1;
  width:clamp(108px,24vw,340px);
  pointer-events:none;
  opacity:.82;
  background-repeat:no-repeat;
  background-position:center top;
  background-size:100% auto;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 4%,#000 74%,transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0%,#000 4%,#000 74%,transparent 100%);
}
.ambience::before{
  left:0;
  background-image:url("assets/ambience-top-left.jpg");
}
.ambience::after{
  right:0;
  background-image:url("assets/ambience-top-right.jpg");
}
@media (max-width:600px){
  .ambience::before,.ambience::after{ opacity:.8; }
  .page-bg{ opacity:.52; }
}

.grain{
  position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='.55'/></svg>");
}

/* ---------- helpers ---------- */
.shell{ width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:clamp(18px,5vw,40px); }
.shell--narrow{ max-width:var(--shell-slim); }
.shell--film{ max-width:1020px; }
.section{ padding-block:clamp(38px,7vw,76px); }

.sr-only{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}

.skip-link{
  position:fixed; left:50%; top:0; transform:translate(-50%,-160%);
  z-index:60; background:var(--gold-light); color:#12100a; font-weight:600;
  padding:10px 20px; border-radius:0 0 var(--r-sm) var(--r-sm); text-decoration:none;
  transition:transform .2s var(--ease);
}
.skip-link:focus{ transform:translate(-50%,0); }

:where(a,button,input,select,textarea):focus-visible{
  outline:2px solid var(--gold-light);
  outline-offset:3px;
  border-radius:4px;
}

/* ---------- scroll reveal ---------- */
.reveal{ opacity:0; transform:translateY(20px); }
.js .reveal{ transition:opacity .8s var(--ease), transform .8s var(--ease); }
html:not(.js) .reveal{ opacity:1; transform:none; }
.reveal.is-in{ opacity:1; transform:none; }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  --photo-top-h:clamp(210px,42vw,390px);
  --photo-bot-h:clamp(122px,20vw,196px);
  position:relative;
  overflow:hidden;
  isolation:isolate;
  min-height:calc(var(--photo-top-h) + var(--photo-bot-h));
  padding-block:clamp(30px,7vw,64px) clamp(18px,4vw,34px);
}
.hero__photos{ position:absolute; inset:0; z-index:-1; }
.hero__photo{
  position:absolute;
  width:clamp(118px,27vw,320px);
  object-fit:cover;
  filter:saturate(.9) contrast(1.03) brightness(.92);
  opacity:.95;
}
.hero__photo--tl,.hero__photo--tr{ top:0; height:var(--photo-top-h); }
.hero__photo--bl,.hero__photo--br{ top:calc(var(--photo-top-h) - 28px); height:calc(var(--photo-bot-h) + 28px); }
.hero__photo--tl,.hero__photo--bl{ left:0; }
.hero__photo--tr,.hero__photo--br{ right:0; }

/* Each photo is anchored to its outer page corner and dissolves inward,
   so the photography bleeds off the edges with no hard seams. */
.hero__photo--tl{
  -webkit-mask-image:radial-gradient(102% 114% at 0% 0%,#000 0%,#000 44%,rgba(0,0,0,.5) 72%,transparent 100%);
          mask-image:radial-gradient(102% 114% at 0% 0%,#000 0%,#000 44%,rgba(0,0,0,.5) 72%,transparent 100%);
}
.hero__photo--tr{
  -webkit-mask-image:radial-gradient(102% 114% at 100% 0%,#000 0%,#000 44%,rgba(0,0,0,.5) 72%,transparent 100%);
          mask-image:radial-gradient(102% 114% at 100% 0%,#000 0%,#000 44%,rgba(0,0,0,.5) 72%,transparent 100%);
}
.hero__photo--bl{
  -webkit-mask-image:radial-gradient(104% 86% at 0% 24%,#000 0%,#000 32%,rgba(0,0,0,.4) 66%,transparent 100%);
          mask-image:radial-gradient(104% 86% at 0% 24%,#000 0%,#000 32%,rgba(0,0,0,.4) 66%,transparent 100%);
}
.hero__photo--br{
  -webkit-mask-image:radial-gradient(104% 86% at 100% 24%,#000 0%,#000 32%,rgba(0,0,0,.4) 66%,transparent 100%);
          mask-image:radial-gradient(104% 86% at 100% 24%,#000 0%,#000 32%,rgba(0,0,0,.4) 66%,transparent 100%);
}

.hero__photos::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(68% 52% at 50% 38%, rgba(5,7,11,.96) 0%, rgba(5,7,11,.88) 42%, rgba(5,7,11,.42) 72%, rgba(5,7,11,0) 96%),
    linear-gradient(180deg, rgba(5,7,11,.5) 0%, rgba(5,7,11,.12) 26%, rgba(5,7,11,.28) 70%, rgba(5,7,11,0) 100%);
}

.hero__inner{ position:relative; text-align:center; }

.eyebrow{
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap;
  gap:.55em;
  color:var(--gold);
  font-size:clamp(.72rem,.62rem + .5vw,.95rem);
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  margin-bottom:clamp(14px,3vw,26px);
}
.eyebrow__mark{ display:inline-flex; color:var(--gold-light); filter:drop-shadow(0 0 8px rgba(217,172,94,.5)); }

.hero__title{
  font-weight:800;
  font-size:var(--step-3);
  line-height:1.02;
  letter-spacing:-.02em;
  text-transform:uppercase;
  text-wrap:balance;
}
.hero__title span{ display:block; }
.line-white{ color:#fff; text-shadow:0 6px 34px rgba(0,0,0,.75); }
.line-gold{
  background:linear-gradient(180deg,#f3dda9 0%,#d9ac5e 52%,#b98c40 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 4px 26px rgba(0,0,0,.6));
}

.tags{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  gap:.35em 0;
  margin-top:clamp(16px,3.4vw,30px);
  font-size:clamp(.68rem,.58rem + .55vw,.95rem);
  font-weight:500;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:#e9e2d4;
}
.tags li{ padding-inline:clamp(9px,2vw,18px); position:relative; }
.tags li + li::before{
  content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:1px; height:1em; background:var(--gold); opacity:.55;
}

/* ==========================================================================
   FILM
   ========================================================================== */
.film{ padding-block:clamp(30px,5.5vw,64px) clamp(32px,6vw,64px); }

.film__frame{
  position:relative;
  padding:clamp(5px,1vw,9px);
  border:1px solid var(--gold-hair);
  border-radius:var(--r-lg);
  background:linear-gradient(180deg, rgba(217,172,94,.10), rgba(10,13,20,.65));
  box-shadow:
    0 0 0 1px rgba(0,0,0,.5) inset,
    0 30px 60px -42px rgba(0,0,0,.95),
    0 14px 34px -26px rgba(217,172,94,.35);
  transition:box-shadow .5s var(--ease), transform .5s var(--ease);
}
.film__frame:hover,
.film__frame:focus-within{
  box-shadow:
    0 0 0 1px rgba(0,0,0,.5) inset,
    0 34px 68px -40px rgba(0,0,0,.95),
    0 10px 54px -18px rgba(217,172,94,.5);
}

.corner{ position:absolute; width:22px; height:22px; border:1.5px solid var(--gold); opacity:.85; pointer-events:none; }
.corner--tl{ top:-1px; left:-1px; border-right:0; border-bottom:0; border-radius:var(--r-lg) 0 0 0; }
.corner--tr{ top:-1px; right:-1px; border-left:0; border-bottom:0; border-radius:0 var(--r-lg) 0 0; }
.corner--bl{ bottom:-1px; left:-1px; border-right:0; border-top:0; border-radius:0 0 0 var(--r-lg); }
.corner--br{ bottom:-1px; right:-1px; border-left:0; border-top:0; border-radius:0 0 var(--r-lg) 0; }

.film__ratio{
  position:relative;
  width:100%;
  aspect-ratio:16 / 9;
  border-radius:var(--r-md);
  overflow:hidden;
  background:#05070b;
}
@supports not (aspect-ratio:16/9){
  .film__ratio{ height:0; padding-top:56.25%; }
}
.film__ratio iframe{
  position:absolute; inset:0;
  width:100%; height:100%;
  border:0; display:block;
}

.film__cover{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.35em;
  width:100%; height:100%;
  padding:0; margin:0;
  border:0; background:transparent;
  cursor:pointer;
  text-align:center;
  -webkit-tap-highlight-color:transparent;
}
.film__poster{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover;
  transition:transform 1.2s var(--ease), filter .6s var(--ease);
}
.film__scrim{
  position:absolute; inset:0;
  background:
    radial-gradient(52% 62% at 50% 50%, rgba(5,7,11,.62), rgba(5,7,11,.18) 70%, transparent 100%),
    linear-gradient(180deg, rgba(5,7,11,.28), rgba(5,7,11,.06) 40%, rgba(5,7,11,.6) 100%);
}
.film__button{
  position:relative;
  display:grid; place-items:center;
  width:clamp(62px,12vw,88px); aspect-ratio:1;
  border-radius:50%;
  color:#fff;
  background:radial-gradient(circle at 50% 35%, rgba(28,32,42,.94), rgba(8,10,15,.94));
  border:1.5px solid var(--gold);
  box-shadow:0 0 0 8px rgba(217,172,94,.08), 0 12px 34px -10px rgba(0,0,0,.9);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.film__button svg{ margin-left:5px; width:clamp(24px,4.4vw,34px); height:auto; }
.film__label{
  position:relative;
  margin-top:.7em;
  font-size:clamp(.7rem,.6rem + .5vw,.9rem);
  font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:#fff; text-shadow:0 2px 14px rgba(0,0,0,.9);
}
.film__hint{
  position:relative;
  font-size:clamp(.62rem,.55rem + .3vw,.76rem);
  letter-spacing:.08em;
  color:rgba(247,243,234,.72);
  text-shadow:0 2px 12px rgba(0,0,0,.9);
}
.film__cover:hover .film__button,
.film__cover:focus-visible .film__button{
  transform:scale(1.07);
  border-color:var(--gold-light);
  box-shadow:0 0 0 12px rgba(217,172,94,.12), 0 16px 40px -10px rgba(0,0,0,.9);
}
.film__cover:hover .film__poster{ transform:scale(1.035); filter:brightness(1.06); }
.film__cover:active .film__button{ transform:scale(.98); }

.film__sound{
  position:absolute; top:14px; left:14px; z-index:3;
  display:flex; align-items:center; gap:9px;
  min-height:44px;
  padding:10px 18px 10px 14px;
  border:1px solid var(--gold);
  border-radius:999px;
  background:rgba(6,8,13,.78);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  color:var(--gold-light);
  font-size:.76rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  cursor:pointer;
  box-shadow:0 10px 30px -14px rgba(0,0,0,.95), 0 0 26px -12px rgba(217,172,94,.6);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease);
  animation:sound-pulse 2.6s var(--ease) infinite;
}
.film__sound:hover{
  transform:translateY(-1px);
  background:rgba(217,172,94,.16);
  box-shadow:0 12px 34px -14px rgba(0,0,0,.95), 0 0 34px -8px rgba(217,172,94,.8);
}
.film__sound__icon{ display:inline-flex; }
.film__sound[hidden]{ display:none; }
@keyframes sound-pulse{
  0%,100%{ box-shadow:0 10px 30px -14px rgba(0,0,0,.95), 0 0 22px -14px rgba(217,172,94,.5); }
  50%    { box-shadow:0 10px 30px -14px rgba(0,0,0,.95), 0 0 30px -6px rgba(217,172,94,.75); }
}
@media (max-width:420px){
  .film__sound{ top:10px; left:10px; padding:9px 14px 9px 11px; font-size:.68rem; letter-spacing:.1em; }
}

.film__caption{
  margin-top:clamp(14px,2.6vw,20px);
  text-align:center;
  color:var(--muted);
  font-size:var(--step--1);
  font-weight:300;
  letter-spacing:.03em;
}

/* ==========================================================================
   BENEFITS
   ========================================================================== */
.benefits__grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:clamp(26px,5vw,46px) 0;
}
.benefit{ text-align:center; padding-inline:clamp(10px,3vw,26px); }
.benefit:nth-child(2n){ border-left:1px solid var(--gold-hair-soft); }

.benefit__icon{
  display:grid; place-items:center;
  width:clamp(52px,11vw,64px); aspect-ratio:1;
  margin:0 auto clamp(12px,2.4vw,16px);
  border:1px solid var(--gold-hair);
  border-radius:50%;
  color:var(--gold);
  background:radial-gradient(circle at 50% 30%, rgba(217,172,94,.13), rgba(10,13,20,.35));
  transition:box-shadow .45s var(--ease), transform .45s var(--ease), border-color .45s var(--ease);
}
.benefit:hover .benefit__icon{
  transform:translateY(-3px);
  border-color:var(--gold);
  box-shadow:0 0 26px -6px rgba(217,172,94,.5);
}
.benefit h3{
  font-size:clamp(.8rem,.7rem + .5vw,1rem);
  font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  line-height:1.35; color:#fff;
  text-wrap:balance;
}
.benefit p{
  margin-top:.6em;
  font-size:var(--step--1); font-weight:300; line-height:1.6;
  color:var(--muted); text-wrap:balance;
}

/* ==========================================================================
   CTA
   ========================================================================== */
.kicker{
  text-align:center;
  color:var(--gold);
  font-size:clamp(.66rem,.58rem + .35vw,.78rem);
  font-weight:600; letter-spacing:.24em; text-transform:uppercase;
  margin-bottom:.9em;
}
.cta__heading{
  text-align:center;
  font-size:var(--step-2);
  font-weight:800; letter-spacing:.01em; text-transform:uppercase;
  line-height:1.2; color:#fff; text-wrap:balance;
  margin-bottom:clamp(22px,4vw,34px);
}
.cta__grid{ display:grid; gap:12px; }

.action{
  display:flex; align-items:center; gap:13px;
  min-height:64px;
  padding:14px 16px;
  border:1px solid var(--gold-hair);
  border-radius:var(--r-md);
  background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015));
  color:var(--cream);
  text-decoration:none;
  transition:transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease);
}
.action:hover{
  transform:translateY(-2px);
  border-color:var(--gold);
  box-shadow:0 12px 34px -18px rgba(0,0,0,.9), 0 0 28px -12px rgba(217,172,94,.55);
}
.action__icon{
  display:grid; place-items:center;
  width:42px; height:42px; flex:0 0 42px;
  border-radius:50%;
  border:1px solid var(--gold-hair);
  color:var(--gold);
  background:rgba(217,172,94,.07);
}
.action__body{ display:flex; flex-direction:column; line-height:1.25; }
.action__label{
  font-size:.68rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold);
}
.action__value{ font-size:clamp(.95rem,.85rem + .4vw,1.1rem); font-weight:500; margin-top:.25em; }
.action__value--phone{
  font-size:clamp(1.35rem,1.05rem + 1.2vw,1.7rem);
  white-space:nowrap;
  font-weight:800; letter-spacing:.005em; color:#fff;
}
.action__value--email{ font-size:clamp(.9rem,.8rem + .35vw,1.02rem); color:var(--gold-light); text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:1px; word-break:break-word; }

.action--gold{
  background:linear-gradient(180deg,#f3dda9 0%,#dcae5f 55%,#c1912f 100%);
  border-color:transparent;
  color:#141007;
}
.action--gold .action__icon{
  background:rgba(20,16,7,.14);
  border-color:rgba(20,16,7,.25);
  color:#141007;
}
.action--gold .action__label{ color:rgba(20,16,7,.72); }
.action--gold .action__value{ color:#141007; font-weight:700; }
.action--gold:hover{ box-shadow:0 16px 40px -18px rgba(0,0,0,.9), 0 0 34px -10px rgba(217,172,94,.7); }

/* ==========================================================================
   ENQUIRY PANEL
   ========================================================================== */
.enquiry{ scroll-margin-top:20px; }

.panel{
  position:relative;
  padding:clamp(22px,4.6vw,44px);
  border:1px solid var(--gold-hair);
  border-radius:var(--r-lg);
  background:linear-gradient(180deg, rgba(16,21,32,.88), rgba(7,10,16,.92));
  box-shadow:0 30px 90px -40px #000, 0 0 40px -22px rgba(217,172,94,.35);
}
.panel__head{ text-align:center; margin-bottom:clamp(20px,3.4vw,30px); }
.panel__heading{
  font-size:var(--step-2);
  font-weight:800; text-transform:uppercase; letter-spacing:.01em; line-height:1.18;
  color:#fff; text-wrap:balance;
}
.panel__heading em{ font-style:normal; color:var(--gold); }
.panel__sub{
  margin-top:.75em;
  color:var(--muted);
  font-weight:300;
  font-size:var(--step-0);
  text-wrap:balance;
}

.form__row{ display:grid; gap:14px; }
.field{ margin-bottom:14px; }
.field label{
  display:block;
  margin-bottom:.45em;
  font-size:.68rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:#cfd4dc;
}
.field .req{ color:var(--gold); }
.field .opt{ color:var(--muted-2); font-weight:400; letter-spacing:.1em; text-transform:none; }

.field input,
.field select,
.field textarea{
  width:100%;
  min-height:52px;
  padding:14px 16px;
  border:1px solid rgba(217,172,94,.22);
  border-radius:var(--r-sm);
  background:rgba(255,255,255,.035);
  color:var(--cream);
  font-size:16px;               /* prevents iOS zoom on focus */
  font-weight:400;
  line-height:1.4;
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease);
  -webkit-appearance:none; appearance:none;
}
.field textarea{ min-height:118px; resize:vertical; }
.field input::placeholder,
.field textarea::placeholder{ color:#7d8593; }
.field input:hover,
.field select:hover,
.field textarea:hover{ border-color:rgba(217,172,94,.4); }
.field input:focus,
.field select:focus,
.field textarea:focus{
  outline:none;
  border-color:var(--gold);
  background:rgba(255,255,255,.06);
  box-shadow:0 0 0 3px rgba(217,172,94,.18);
}
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible{ outline:none; }

.select-wrap{ position:relative; }
.select-wrap select{ padding-right:46px; cursor:pointer; }
.select-wrap select:invalid{ color:#7d8593; }
.select-wrap select option{ background:#0d1119; color:var(--cream); }
.select-wrap__chev{
  position:absolute; right:16px; top:50%; transform:translateY(-50%);
  color:var(--gold); pointer-events:none;
}

.field.has-error input,
.field.has-error select,
.field.has-error textarea{
  border-color:#e08a7a;
  box-shadow:0 0 0 3px rgba(224,138,122,.14);
}
.err{
  margin-top:.5em;
  font-size:.78rem; font-weight:500; color:#eda595;
}

.hp-field{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.btn-gold{
  position:relative;
  display:flex; align-items:center; justify-content:center; gap:14px;
  width:100%;
  min-height:60px;
  margin-top:6px;
  padding:16px 26px;
  border:0; border-radius:999px;
  background:linear-gradient(180deg,#f3dda9 0%,#dcae5f 52%,#c1912f 100%);
  color:#141007;
  font-size:clamp(.82rem,.7rem + .55vw,1.1rem);
  font-weight:800; letter-spacing:.07em; text-transform:uppercase;
  white-space:nowrap;
  cursor:pointer;
  box-shadow:0 14px 34px -16px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.14) inset;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), filter .3s var(--ease);
}
.btn-gold:hover{
  transform:translateY(-2px);
  filter:brightness(1.05);
  box-shadow:0 20px 44px -18px rgba(0,0,0,.9), 0 0 40px -12px rgba(217,172,94,.7), 0 0 0 1px rgba(255,255,255,.2) inset;
}
.btn-gold:active{ transform:translateY(0); }
.btn-gold[disabled]{ opacity:.7; cursor:progress; transform:none; }
.btn-gold__arrow{
  display:grid; place-items:center;
  width:34px; height:34px; border-radius:50%;
  background:#141007; color:var(--gold-light);
  transition:transform .3s var(--ease);
}
.btn-gold:hover .btn-gold__arrow{ transform:translateX(3px); }

.form__status{ margin-top:1em; text-align:center; font-size:.85rem; color:#eda595; min-height:1em; }

.thanks{ text-align:center; padding-block:clamp(14px,3vw,26px); }
.thanks__mark{
  display:grid; place-items:center;
  width:66px; height:66px; margin:0 auto 18px;
  border-radius:50%; border:1px solid var(--gold);
  color:var(--gold-light);
  background:rgba(217,172,94,.1);
  box-shadow:0 0 34px -8px rgba(217,172,94,.55);
}
.thanks h3{
  font-size:var(--step-1); font-weight:700; line-height:1.35; color:#fff; text-wrap:balance;
}
.thanks p{ margin-top:.7em; color:var(--muted); font-weight:300; text-wrap:balance; }
.thanks__alt a{ color:var(--gold-light); font-weight:600; text-decoration:underline; text-underline-offset:3px; }

.assurances{
  display:grid; gap:20px;
  margin-top:clamp(24px,4vw,34px);
  padding-top:clamp(20px,3.4vw,28px);
  border-top:1px solid var(--gold-hair-soft);
}
.assurances li{ display:grid; grid-template-columns:auto 1fr; gap:4px 14px; align-items:center; }
.assurance__icon{
  grid-row:span 2;
  display:grid; place-items:center;
  width:42px; height:42px;
  border:1px solid var(--gold-hair); border-radius:50%;
  color:var(--gold); background:rgba(217,172,94,.06);
}
.assurances strong{
  font-size:.72rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:#fff;
  align-self:end;
}
.assurances span:not(.assurance__icon){
  font-size:.82rem; font-weight:300; color:var(--muted); line-height:1.45; align-self:start;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer{
  position:relative;
  margin-top:clamp(20px,4vw,40px);
  padding-block:clamp(34px,5vw,56px) clamp(20px,3vw,28px);
  border-top:1px solid var(--gold-hair-soft);
  background:linear-gradient(180deg, rgba(6,8,13,.4), rgba(3,4,7,.9));
}
.footer__inner{ display:grid; gap:clamp(26px,4vw,40px); }
.footer__brand img{ width:min(260px,64vw); height:auto; }
.footer__line{
  margin-top:14px;
  max-width:34ch;
  font-size:.84rem; font-weight:300; color:var(--muted); line-height:1.55;
}
.footer__office{
  color:var(--gold);
  font-size:.78rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  margin-bottom:.7em;
}
.footer__phone,.footer__email{ display:flex; align-items:center; gap:12px; }
.footer__phone{ margin-bottom:.55em; }
.footer__ico{ color:var(--gold); display:inline-flex; }
.footer__phone a{
  display:inline-block;
  padding-block:4px;
  font-size:clamp(1.55rem,1.15rem + 2vw,2.2rem);
  font-weight:800; letter-spacing:.005em;
  color:#fff; text-decoration:none;
  transition:color .3s var(--ease), text-shadow .3s var(--ease);
}
.footer__phone a:hover{ color:var(--gold-light); text-shadow:0 0 26px rgba(217,172,94,.55); }
.footer__email a{
  display:inline-block;
  padding-block:9px;
  font-size:clamp(1rem,.9rem + .6vw,1.2rem);
  font-weight:500; color:var(--gold-light);
  text-decoration:underline; text-underline-offset:5px; text-decoration-thickness:1px;
  word-break:break-word;
  transition:color .3s var(--ease);
}
.footer__email a:hover{ color:#fff; }
.footer__cta{ margin-top:1.1em; }
.footer__cta a{
  display:inline-block;
  padding:8px 0 10px;
  font-size:.95rem; font-weight:500; letter-spacing:.05em;
  color:var(--cream); text-decoration:none;
  border-bottom:1px solid var(--gold-hair);
  transition:color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.footer__cta a:hover{ color:var(--gold-light); border-color:var(--gold); }
.footer__legal{
  margin-top:clamp(26px,4vw,40px);
  text-align:center;
  font-size:.72rem; font-weight:300; letter-spacing:.06em; color:#6f7783;
}

/* ==========================================================================
   STICKY MOBILE CTA
   ========================================================================== */
.sticky{
  position:fixed; left:0; right:0; bottom:0; z-index:50;
  display:none;
  gap:10px;
  padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg, rgba(6,8,13,.82), rgba(4,5,9,.97));
  border-top:1px solid var(--gold-hair);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  transform:translateY(110%);
  transition:transform .45s var(--ease);
}
.sticky.is-visible{ transform:translateY(0); }
.sticky__btn{
  display:flex; align-items:center; justify-content:center; gap:8px;
  flex:1 1 0;
  min-height:52px;
  padding:12px 10px;
  border-radius:999px;
  font-size:.85rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  text-decoration:none;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.sticky__btn:active{ transform:scale(.98); }
.sticky__btn--call{
  color:var(--gold-light);
  border:1px solid var(--gold-hair);
  background:rgba(217,172,94,.08);
}
.sticky__btn--quote{
  color:#141007;
  background:linear-gradient(180deg,#f3dda9 0%,#dcae5f 55%,#c1912f 100%);
  box-shadow:0 10px 26px -14px rgba(0,0,0,.9);
}

@media (max-width:860px){
  .sticky{ display:flex; }
  .footer{ padding-bottom:calc(86px + env(safe-area-inset-bottom)); }
}

/* ==========================================================================
   BREAKPOINTS
   ========================================================================== */
@media (min-width:600px){
  .form__row{ grid-template-columns:1fr 1fr; }
  .assurances{ grid-template-columns:repeat(3,1fr); gap:22px; }
  .cta__grid{ grid-template-columns:1fr 1fr; }
  .cta__grid .action--gold{ grid-column:1 / -1; }
}

@media (min-width:768px){
  .benefits__grid{ grid-template-columns:repeat(3,1fr); }
  .benefit:nth-child(2n){ border-left:0; }
  .benefit:not(:nth-child(3n+1)){ border-left:1px solid var(--gold-hair-soft); }
}

@media (min-width:900px){
  .hero{ padding-block:clamp(48px,5vw,80px) clamp(24px,3vw,40px); }
  .hero__photo{ width:clamp(200px,22vw,340px); }
  .cta__grid{ grid-template-columns:repeat(3,1fr); }
  .cta__grid .action--gold{ grid-column:auto; }
  .footer__inner{ grid-template-columns:1.1fr 1fr; align-items:start; }
  .footer__contact{
    padding-left:clamp(24px,4vw,48px);
    border-left:1px solid var(--gold-hair-soft);
  }
}

/* reveal stagger (grids only) */
.benefits__grid .benefit:nth-child(2){ transition-delay:.07s; }
.benefits__grid .benefit:nth-child(3){ transition-delay:.14s; }
.benefits__grid .benefit:nth-child(4){ transition-delay:.05s; }
.benefits__grid .benefit:nth-child(5){ transition-delay:.12s; }
.benefits__grid .benefit:nth-child(6){ transition-delay:.19s; }
.cta__grid .action:nth-child(2){ transition-delay:.08s; }
.cta__grid .action:nth-child(3){ transition-delay:.16s; }

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
    scroll-behavior:auto!important;
  }
  .reveal{ opacity:1!important; transform:none!important; }
  .sticky{ transition:none; }
}

@media print{
  .sticky,.atmos,.grain,.film__cover{ display:none!important; }
  body{ background:#fff; color:#000; }
}
