/* ==========================================================================
   Luxe Party Solutions — assets/css/luxe.css
   ========================================================================== */

:root{
  --void:#0A0A0B;               /* page ground */
  --panel:#121215;              /* raised surfaces, alternating sections */
  --panel-2:#191920;            /* inputs, hover states */
  --gold:#C8A96E;               /* brand gold, exact */
  --gold-lt:#E3C892;            /* small text + accents on dark */
  --bone:#F4F2EE;               /* primary light */
  --mute:#93908A;               /* secondary light */
  --hair:rgba(255,255,255,.09);
  --hair-2:rgba(255,255,255,.18);

  --display:"Cormorant Garamond",Georgia,serif;
  --sans:"Montserrat",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;

  --wrap:1280px;
  --head-h:100px;
  --lt:1;
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--void); color:var(--bone);
  font-family:var(--sans); font-size:16px; line-height:1.7; font-weight:400;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:inherit}
button{font:inherit}
::selection{background:var(--gold); color:var(--void)}

h1,h2{
  font-family:var(--display); font-weight:300; color:var(--bone);
  margin:0; line-height:1.03; letter-spacing:-.015em;
}
h1{font-size:clamp(3rem,7.4vw,6.2rem)}
h2{font-size:clamp(2.2rem,4.4vw,3.8rem)}
h3{
  font-family:var(--sans); font-weight:500; font-size:1rem; letter-spacing:.005em;
  color:var(--bone); margin:0; line-height:1.4;
}
p{margin:0 0 1em; color:var(--mute)}
p:last-child{margin-bottom:0}
strong{color:var(--bone); font-weight:600}

.wrap{width:min(100% - 2.5rem,var(--wrap)); margin-inline:auto}
.narrow{width:min(100% - 2.5rem,720px); margin-inline:auto}
.lede{font-size:1.05rem; color:var(--mute); max-width:60ch; line-height:1.8}
.section{padding:clamp(4.5rem,10vw,9rem) 0}
.hero + .section{padding-top:clamp(3.5rem,7vw,6rem)}
.hero--short + .section{padding-top:clamp(2rem,4vw,3.25rem)}
.section--panel{background:var(--panel)}
.section--bone{background:var(--bone); color:var(--void)}
.section--bone h1,.section--bone h2,.section--bone h3{color:var(--void)}
.section--bone p{color:#57534C}
.center{text-align:center}
.center .lede{margin-inline:auto}

.eyebrow{
  font-family:var(--display); font-style:italic; font-size:1.15rem;
  color:var(--gold); margin:0 0 1rem; letter-spacing:.01em;
}
.hero--short .eyebrow{font-size:1rem; margin-bottom:.6rem}

.skip{position:absolute; left:-9999px; top:0; background:var(--gold); color:var(--void); padding:.8rem 1.2rem; z-index:999}
.skip:focus{left:.5rem; top:.5rem}
:focus-visible{outline:2px solid var(--gold); outline-offset:3px; border-radius:2px}

/* ---------- buttons ---------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:1rem 2.1rem; border-radius:1px; border:1px solid transparent;
  font-size:.74rem; font-weight:600; letter-spacing:.13em;
  text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:background .25s ease,color .25s ease,border-color .25s ease;
}
.btn--solid{background:var(--gold); color:var(--void); border-color:var(--gold)}
.btn--solid:hover{background:var(--gold-lt); border-color:var(--gold-lt)}
.btn--line{background:transparent; color:var(--bone); border-color:var(--hair-2)}
.btn--line:hover{border-color:var(--gold); color:var(--gold)}
.section--bone .btn--line{color:var(--void); border-color:rgba(0,0,0,.25)}
.section--bone .btn--line:hover{background:var(--void); color:var(--bone); border-color:var(--void)}
.btn--sm{padding:.72rem 1.25rem; font-size:.68rem; letter-spacing:.1em}
.btn[disabled]{opacity:.4; cursor:not-allowed}

/* ---------- loader ------------------------------------------------------ */
#loader{position:fixed; inset:0; z-index:1000; display:grid; place-items:center; background:var(--void)}
#loader.done{opacity:0; visibility:hidden; transition:opacity .55s ease,visibility .55s}
.build{width:min(44vw,240px); height:auto; overflow:visible}
.build .part{opacity:0; fill:var(--bone)}
.build .ground{
  fill:var(--gold); transform:scaleX(0); transform-box:view-box; transform-origin:512px 638px;
  animation:groundOut calc(320ms*var(--lt)) cubic-bezier(.2,.7,.3,1) forwards,
            groundFade calc(420ms*var(--lt)) ease calc(1700ms*var(--lt)) forwards;
}
@keyframes groundFade{from{opacity:1} to{opacity:0}}
.build .g-tent{
  transform:scaleY(.04); transform-box:view-box; transform-origin:512px 637px;
  animation:hoist calc(900ms*var(--lt)) cubic-bezier(.22,1.1,.3,1) calc(210ms*var(--lt)) forwards;
}
.build .g-diamond{
  transform:translateY(-190px); transform-box:view-box;
  animation:settle calc(620ms*var(--lt)) cubic-bezier(.3,1.5,.45,1) calc(840ms*var(--lt)) forwards;
}
.build .g-luxe{transform-box:view-box; animation:riseIn calc(520ms*var(--lt)) ease-out calc(1230ms*var(--lt)) forwards}
.build .g-sub{
  transform-box:view-box; transform-origin:512px 895px;
  animation:trackIn calc(560ms*var(--lt)) ease-out calc(1430ms*var(--lt)) forwards;
}
@keyframes groundOut{from{transform:scaleX(0)} to{transform:scaleX(1); opacity:1}}
@keyframes hoist{from{transform:scaleY(.04); opacity:1} to{transform:scaleY(1); opacity:1}}
@keyframes settle{from{transform:translateY(-190px); opacity:0} 30%{opacity:1} to{transform:translateY(0); opacity:1}}
@keyframes riseIn{from{transform:translateY(16px); opacity:0} to{transform:translateY(0); opacity:1}}
@keyframes trackIn{from{transform:scaleX(1.35); opacity:0} to{transform:scaleX(1); opacity:1}}

/* ---------- header ------------------------------------------------------ */
.site-head{
  position:fixed; top:0; left:0; right:0; z-index:90; height:var(--head-h);
  display:flex; align-items:center;
  background:rgba(10,10,11,.82); backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  border-bottom:1px solid var(--hair);
  transition:background .35s ease,border-color .35s ease;
}
.site-head .wrap{display:flex; align-items:center; gap:1.5rem; width:min(100% - 2.5rem,1440px)}
.brand{display:flex; align-items:center; margin-right:auto; text-decoration:none}
.brand img{height:74px; width:auto}

.nav{display:flex; align-items:center; gap:2.4rem}
.nav a{
  text-decoration:none; font-size:.78rem; font-weight:500; letter-spacing:.08em;
  color:var(--bone); padding:.35rem 0; position:relative; transition:color .2s;
}
.nav a:hover{color:var(--gold)}
.nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background:var(--gold); transform:scaleX(0); transform-origin:left; transition:transform .3s ease;
}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}
.nav a[aria-current="page"]{color:var(--gold)}

.head-tools{display:flex; align-items:center; gap:1.25rem}
.social{display:flex; gap:1rem}
.social a{color:var(--mute); transition:color .2s}
.social a:hover{color:var(--gold)}
.social svg{width:18px; height:18px; display:block}

.cart-btn{
  display:inline-flex; align-items:center; gap:.6rem; text-decoration:none;
  background:transparent; border:1px solid var(--gold); color:var(--gold);
  border-radius:1px; padding:.72rem 1.35rem; cursor:pointer;
  font-size:.72rem; font-weight:600; letter-spacing:.12em;
  transition:background .25s ease,color .25s ease;
}
.cart-btn:hover{background:var(--gold); color:var(--void)}
.cart-btn .n{
  min-width:18px; height:18px; border-radius:18px; background:var(--gold); color:var(--void);
  display:grid; place-items:center; font-size:.64rem; font-weight:700; padding:0 5px;
}
.cart-btn:hover .n{background:var(--void); color:var(--gold)}
.cart-btn[data-empty="1"] .n{display:none}

.site-head.over{background:transparent; border-bottom-color:transparent; backdrop-filter:none; -webkit-backdrop-filter:none}

.burger{display:none; width:42px; height:42px; border:0; background:none; cursor:pointer; padding:10px 8px}
.burger span{display:block; height:1.4px; background:var(--bone); margin:5px 0; transition:transform .3s,opacity .2s}
body.menu-open .burger span:nth-child(1){transform:translateY(6.4px) rotate(45deg)}
body.menu-open .burger span:nth-child(2){opacity:0}
body.menu-open .burger span:nth-child(3){transform:translateY(-6.4px) rotate(-45deg)}

/* ---------- hero -------------------------------------------------------- */
.hero{position:relative; min-height:min(92vh,860px); display:flex; align-items:center; isolation:isolate}
.hero--short{min-height:min(40vh,340px)}
.hero--flat{
  background:
    radial-gradient(880px 420px at 20% -10%, rgba(200,169,110,.13), transparent 64%),
    linear-gradient(180deg,#15151A 0%, #0D0D10 55%, var(--void) 100%);
}
.hero--flat::before{display:none}
.hero--short h1{font-size:clamp(2rem,3.8vw,3.1rem)}
.hero__bg{position:absolute; inset:0; z-index:-2; overflow:hidden; background:#1A1A1D}
.hero__bg img{width:100%; height:100%; object-fit:cover}
.hero::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(180deg,rgba(10,10,11,.68) 0%,rgba(10,10,11,.24) 30%,rgba(10,10,11,.70) 80%,var(--void) 100%),
    linear-gradient(96deg,rgba(10,10,11,.92) 0%,rgba(10,10,11,.68) 34%,rgba(10,10,11,.26) 64%,rgba(10,10,11,.42) 100%);
}
@media (max-width:860px){
  .hero::before{
    background:linear-gradient(180deg,rgba(10,10,11,.82) 0%,rgba(10,10,11,.62) 38%,rgba(10,10,11,.90) 82%,var(--void) 100%);
  }
}
.hero__inner{padding:calc(var(--head-h) + 4rem) 0 7rem; max-width:46rem}
.hero--short .hero__inner{padding:calc(var(--head-h) + 2.25rem) 0 3.25rem}
.hero p{color:rgba(244,242,238,.78); font-size:1.05rem; max-width:36rem; margin-top:1.8rem}
.hero__cta{display:flex; flex-wrap:wrap; gap:.9rem; margin-top:2.6rem}

/* tent peak drawn as a hairline rather than a filled shape */
.peakline{position:absolute; left:0; right:0; bottom:0; z-index:1; width:100%; height:clamp(38px,5vw,70px); display:block; overflow:visible}
.peakline path{fill:none; stroke:var(--gold); stroke-width:1.1; vector-effect:non-scaling-stroke; opacity:.85}

/* ---------- home sections ---------------------------------------------- */
.split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2.5rem,7vw,6rem); align-items:start}
.split--end{align-items:end}

.pillars{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.5rem,4vw,3.5rem); margin-top:clamp(3rem,6vw,5rem)}
.pillar{border-top:1px solid var(--gold); padding-top:1.5rem}
.pillar h3{margin-bottom:.6rem; color:var(--gold-lt)}
.pillar p{font-size:.92rem; margin:0}

.reviews{max-width:64rem; margin-inline:auto}
.reviews__stage{display:grid}
.rev{
  grid-area:1/1; margin:0; display:grid; grid-template-columns:auto 1fr; gap:2.2rem; align-items:start;
  opacity:0; visibility:hidden; transform:translateY(14px);
  transition:opacity .65s ease,transform .65s cubic-bezier(.2,.7,.3,1),visibility .65s;
}
.rev.is-on{opacity:1; visibility:visible; transform:none}
.rev .mark{font-family:var(--display); font-size:5.5rem; line-height:.62; color:var(--gold)}
.rev__text{
  display:block; font-family:var(--display); font-weight:300;
  font-size:clamp(1.35rem,2.5vw,2.05rem); line-height:1.42; color:var(--void);
}
.rev cite{
  display:block; margin-top:1.6rem; font-family:var(--sans); font-style:normal;
  font-size:.72rem; letter-spacing:.16em; color:#8C7434;
}
.reviews__dots{display:flex; gap:.55rem; justify-content:center; margin-top:2.75rem}
.reviews__dots button{
  width:34px; height:2px; padding:0; border:0; cursor:pointer; background:rgba(0,0,0,.16);
  transition:background .35s ease,transform .35s ease;
}
.reviews__dots button:hover{background:rgba(0,0,0,.34)}
.reviews__dots button[aria-current="true"]{background:var(--gold); transform:scaleY(2)}

/* ---------- products ---------------------------------------------------- */
.filters{display:flex; flex-wrap:wrap; gap:.5rem; margin:0 0 2rem}
.chip{
  border:1px solid var(--hair); background:transparent; border-radius:1px;
  padding:.6rem 1.15rem; font-size:.75rem; font-weight:500; letter-spacing:.05em;
  cursor:pointer; color:var(--mute); transition:all .22s ease;
}
.chip:hover{border-color:var(--hair-2); color:var(--bone)}
.chip[aria-pressed="true"]{background:var(--gold); border-color:var(--gold); color:var(--void); font-weight:600}

.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:clamp(1rem,2vw,1.6rem)}

.card{
  background:var(--panel); border:1px solid var(--hair); border-radius:1px;
  display:flex; flex-direction:column; transition:border-color .3s ease,background .3s ease;
}
.card:hover{border-color:var(--hair-2); background:var(--panel-2)}
.card__media{position:relative; aspect-ratio:5/4; overflow:hidden; background:#1A1A1D}
.card__media img{width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.card:hover .card__media img{transform:scale(1.05)}
.card__tag{
  position:absolute; top:.8rem; left:.8rem; background:rgba(10,10,11,.78);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(200,169,110,.5); color:var(--gold-lt);
  font-size:.58rem; font-weight:600; letter-spacing:.13em; padding:.3rem .6rem; border-radius:1px;
}
.card__body{padding:1.3rem 1.35rem 1.45rem; display:flex; flex-direction:column; flex:1; gap:.45rem}
.card__meta{font-size:.8rem; color:var(--mute); margin:0; line-height:1.6}
.card__price{font-family:var(--display); font-size:1.65rem; font-weight:400; color:var(--gold-lt); margin:.35rem 0 .2rem}
.card__body .btn{margin-top:auto; width:100%}
.card.in-quote{border-color:var(--gold)}
.card.in-quote .btn--line{background:var(--gold); color:var(--void); border-color:var(--gold)}

.result-count{font-size:.78rem; color:var(--mute); letter-spacing:.06em; margin:0 0 1.75rem}
.empty{padding:4rem 0; text-align:center; color:var(--mute)}
.empty a{color:var(--gold)}

.tray{
  position:fixed; left:0; right:0; bottom:0; z-index:80;
  background:rgba(10,10,11,.94); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  transform:translateY(105%); transition:transform .4s cubic-bezier(.3,.9,.3,1);
  border-top:1px solid var(--gold);
}
.tray.show{transform:translateY(0)}
.tray .wrap{display:flex; align-items:center; gap:1.5rem; padding:1.05rem 0; flex-wrap:wrap}
.tray p{margin:0; font-size:.85rem; flex:1; min-width:190px; color:var(--mute); letter-spacing:.04em}
.tray strong{color:var(--gold)}
.tray .clear{background:none; border:0; color:var(--mute); cursor:pointer; font-size:.76rem; text-decoration:underline; letter-spacing:.04em}
.tray .clear:hover{color:var(--bone)}


/* ---------- slide-out drawer ------------------------------------------- */
.scrim{
  position:fixed; inset:0; z-index:95; background:rgba(0,0,0,.62);
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
  opacity:0; pointer-events:none; transition:opacity .35s ease;
}
body.menu-open .scrim{opacity:1; pointer-events:auto}

.drawer{
  position:fixed; top:0; right:0; bottom:0; z-index:96;
  width:min(88vw,370px); display:flex; flex-direction:column; overflow-y:auto;
  background:var(--panel); border-left:1px solid var(--hair);
  box-shadow:-30px 0 70px rgba(0,0,0,.55);
  padding:1.35rem 1.75rem 2.25rem;
  transform:translateX(101%); transition:transform .42s cubic-bezier(.32,.72,0,1);
  visibility:hidden;
}
body.menu-open .drawer{transform:translateX(0); visibility:visible}

.drawer__top{display:flex; align-items:center; justify-content:space-between; margin-bottom:2.25rem}
.drawer__top img{height:60px; width:auto}
.drawer__close{
  width:42px; height:42px; display:grid; place-items:center; cursor:pointer;
  background:transparent; border:1px solid var(--hair); border-radius:1px;
  color:var(--mute); transition:color .2s,border-color .2s;
}
.drawer__close:hover{color:var(--gold); border-color:var(--gold)}
.drawer__close svg{width:19px; height:19px}

.drawer__nav{display:grid; gap:.1rem; margin-bottom:2.4rem}
.drawer__nav a{
  font-family:var(--display); font-weight:300; font-size:1.65rem; line-height:1.35;
  text-decoration:none; color:var(--bone); padding:.28rem 0;
  border-bottom:1px solid transparent; transition:color .2s;
}
.drawer__nav a:hover{color:var(--gold)}
.drawer__nav a[aria-current="page"]{color:var(--gold)}

.drawer h4{
  font-family:var(--sans); font-size:.62rem; font-weight:600; letter-spacing:.22em;
  color:var(--gold); margin:0 0 1rem; padding-top:1.5rem; border-top:1px solid var(--hair);
}
.drawer__cats{display:grid; gap:.15rem; margin-bottom:2rem}
.drawer__cats a{
  font-size:.85rem; color:var(--mute); text-decoration:none; padding:.42rem 0;
  transition:color .2s,padding-left .2s;
}
.drawer__cats a:hover{color:var(--bone); padding-left:.35rem}

.drawer__foot{
  margin-top:auto; padding-top:1.75rem; border-top:1px solid var(--hair);
  display:grid; gap:.75rem; justify-items:start; font-size:.86rem;
}
.drawer__foot .btn{width:100%; margin-bottom:.5rem}
.drawer__foot a:not(.btn){color:var(--mute); text-decoration:none; transition:color .2s}
.drawer__foot a:not(.btn):hover{color:var(--gold)}

@media (min-width:861px){
  .drawer,.scrim{display:none}
}

/* ---------- quantity stepper ------------------------------------------- */
.qty{
  margin-top:auto; display:grid; grid-template-columns:44px 1fr 44px; align-items:center;
  border:1px solid var(--gold); border-radius:1px; overflow:hidden; background:rgba(200,169,110,.08);
}
.qty button{
  height:40px; background:transparent; border:0; cursor:pointer; color:var(--gold);
  font-size:1.15rem; line-height:1; padding:0; transition:background .18s ease;
}
.qty button:hover{background:rgba(200,169,110,.2)}
.qty button:active{background:rgba(200,169,110,.32)}
.qty .q{
  text-align:center; font-size:.85rem; font-weight:600; letter-spacing:.06em;
  color:var(--bone); font-variant-numeric:tabular-nums;
}

/* ---------- pricing ----------------------------------------------------- */
.ladder{border-top:1px solid var(--hair); margin:0}
.ladder-label{
  font-size:.64rem; font-weight:600; letter-spacing:.2em; color:var(--gold);
  margin:2.75rem 0 0; padding-bottom:.9rem;
}
.rung-note{
  display:block; margin-top:.45rem; max-width:42ch;
  font-size:.82rem; line-height:1.6; color:var(--mute); letter-spacing:0;
}
.rung{display:flex; align-items:baseline; gap:1.5rem; padding:1.5rem 0; border-bottom:1px solid var(--hair)}
.rung dt{font-size:.95rem; flex:1; margin:0; color:var(--bone); letter-spacing:.02em}
.rung:has(.rung-note){align-items:flex-start}
.rung dd{margin:0; font-family:var(--display); font-size:1.85rem; color:var(--gold-lt)}
.included{display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(1.5rem,4vw,3.5rem); margin-top:clamp(2.5rem,5vw,3.5rem)}
.included > div{border-top:1px solid var(--gold); padding-top:1.5rem}
.included h3{margin-bottom:.6rem; color:var(--gold-lt)}
.included p{font-size:.92rem}

/* ---------- gallery ----------------------------------------------------- */
.masonry{columns:3; column-gap:1rem}
.masonry img{width:100%; margin-bottom:1rem; break-inside:avoid; background:var(--panel); border-radius:1px}

/* ---------- about ------------------------------------------------------- */
.people{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4.5rem); margin-top:clamp(3rem,6vw,4.5rem)}
.person img{
  width:100%; height:auto; max-width:330px; aspect-ratio:4/5; object-fit:cover; object-position:center 22%;
  margin-bottom:1.7rem; border-radius:1px;
  filter:grayscale(1) contrast(1.02) brightness(1.06); transition:filter .55s ease;
}
.person:hover img{filter:grayscale(0) contrast(1) brightness(1)}
.person h3{font-family:var(--display); font-weight:400; font-size:1.9rem; margin-bottom:.3rem; letter-spacing:-.01em}
.person .role{font-size:.68rem; letter-spacing:.2em; color:var(--gold); margin-bottom:1.2rem}
.person p{font-size:.92rem}

/* ---------- form -------------------------------------------------------- */
.form-layout{display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(2.5rem,6vw,5.5rem); align-items:start}
.contact-block{position:sticky; top:calc(var(--head-h) + 2.5rem)}
.contact-block dl{margin:2.5rem 0 0}
.contact-block dt{font-size:.66rem; letter-spacing:.2em; color:var(--gold); margin-bottom:.4rem}
.contact-block dd{margin:0 0 1.75rem; font-size:1.05rem; color:var(--bone)}
.contact-block dd a{text-decoration:none; border-bottom:1px solid var(--hair-2); transition:border-color .2s}
.contact-block dd a:hover{border-color:var(--gold)}

form{background:var(--panel); border:1px solid var(--hair); border-radius:1px; padding:clamp(1.6rem,3.5vw,2.8rem)}
.f-row{display:grid; grid-template-columns:1fr 1fr; gap:1.1rem}
.field{margin-bottom:1.15rem; display:flex; flex-direction:column}
.field label{font-size:.7rem; font-weight:600; letter-spacing:.11em; margin-bottom:.5rem; color:var(--mute)}
.field .opt{font-weight:400; letter-spacing:.04em}
.field input,.field textarea{
  font:inherit; font-size:.92rem; color:var(--bone); background:var(--panel-2);
  border:1px solid var(--hair); border-radius:1px; padding:.85rem .9rem; width:100%;
  transition:border-color .22s,background .22s;
}
.field input::placeholder,.field textarea::placeholder{color:#6A6660}
.field input:focus,.field textarea:focus{background:#1F1F27; border-color:var(--gold); outline:none}
.field input[type=date],.field input[type=time]{color-scheme:dark}
.field textarea{resize:vertical; min-height:120px; line-height:1.65}
fieldset{border:0; padding:0; margin:0 0 1.5rem}
fieldset legend{font-size:.7rem; font-weight:600; letter-spacing:.11em; color:var(--mute); margin-bottom:.65rem; padding:0}
.radios{display:flex; flex-wrap:wrap; gap:.5rem}
.radios label{
  display:inline-flex; align-items:center; gap:.5rem; border:1px solid var(--hair);
  border-radius:1px; padding:.55rem .95rem; font-size:.82rem; cursor:pointer;
  color:var(--mute); transition:border-color .2s,color .2s;
}
.radios label:hover{border-color:var(--hair-2); color:var(--bone)}
.radios input{accent-color:var(--gold)}
.radios input:checked ~ span{color:var(--gold); font-weight:600}
.hp{position:absolute; left:-9999px}
.form-note{font-size:.76rem; color:var(--mute); margin-top:1.1rem; letter-spacing:.03em}
.form-legend{
  font-size:.72rem; letter-spacing:.1em; color:var(--mute);
  margin:0 0 1.6rem; padding-bottom:1.2rem; border-bottom:1px solid var(--hair);
}
.field-hint{font-size:.8rem; color:var(--mute); margin:-.15rem 0 .55rem; line-height:1.55}
.field-hint a{color:var(--gold-lt); text-decoration:none; border-bottom:1px solid rgba(227,200,146,.4)}
.field-hint a:hover{border-color:var(--gold-lt)}
.contact-block .lede a{color:var(--gold-lt); text-decoration:none; border-bottom:1px solid rgba(227,200,146,.4)}
.contact-block .lede a:hover{border-color:var(--gold-lt)}
/* only flag a field once the visitor has actually interacted with it */
.field input:user-invalid,.field textarea:user-invalid{border-color:#C2694A; background:rgba(194,105,74,.07)}
.field input:user-invalid:focus,.field textarea:user-invalid:focus{border-color:#C2694A}


/* ---------- typed quantity + toast -------------------------------------- */
.qty input.q{
  -moz-appearance:textfield; appearance:textfield;
  width:100%; height:40px; min-width:0; padding:0 .2rem;
  background:transparent; border:0; border-left:1px solid rgba(200,169,110,.35);
  border-right:1px solid rgba(200,169,110,.35);
  text-align:center; font-family:var(--sans); font-size:.85rem; font-weight:600;
  letter-spacing:.06em; color:var(--bone); font-variant-numeric:tabular-nums;
}
.qty input.q::-webkit-outer-spin-button,
.qty input.q::-webkit-inner-spin-button{-webkit-appearance:none; margin:0}
.qty input.q:focus{outline:none; background:rgba(200,169,110,.14)}

.toast{
  position:fixed; top:calc(var(--head-h) + 1rem); right:1.5rem; z-index:120;
  display:grid; gap:.15rem; min-width:190px; max-width:280px;
  padding:.85rem 1.1rem; border-radius:1px;
  background:rgba(18,18,21,.96); border:1px solid var(--gold);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  box-shadow:0 18px 44px rgba(0,0,0,.5);
  opacity:0; transform:translateY(-12px) scale(.97); pointer-events:none;
  transition:opacity .3s ease,transform .35s cubic-bezier(.2,.9,.3,1);
}
.toast.show{opacity:1; transform:none}
.toast b{
  font-size:.68rem; font-weight:600; letter-spacing:.16em; color:var(--gold);
}
.toast span{font-size:.86rem; color:var(--bone); line-height:1.4}
@media (max-width:560px){
  .toast{right:1rem; left:1rem; max-width:none; top:calc(var(--head-h) + .75rem)}
}


/* ---------- legal pages ------------------------------------------------- */
.legal{max-width:min(100% - 2.5rem,780px)}
.legal .lede{margin-bottom:2.5rem}
.legal p{font-size:.95rem; line-height:1.85; color:var(--mute)}
.legal strong{color:var(--bone)}

.legal-dates{
  display:flex; flex-wrap:wrap; gap:.6rem 2rem; margin:0 0 3rem;
  padding-bottom:1.4rem; border-bottom:1px solid var(--hair);
  font-size:.7rem; letter-spacing:.16em; color:var(--gold);
}
.legal-dates span{white-space:nowrap}

.legal-toc{margin:0 0 3.5rem; padding:1.6rem 1.75rem; border:1px solid var(--hair); border-radius:1px; background:var(--panel)}
.legal-toc ol{margin:0; padding:0; list-style:none; counter-reset:toc; columns:2; column-gap:2rem}
.legal-toc li{counter-increment:toc; break-inside:avoid; margin-bottom:.55rem}
.legal-toc li::before{content:counter(toc,decimal-leading-zero); color:var(--gold); font-size:.68rem; letter-spacing:.1em; margin-right:.65rem}
.legal-toc a{font-size:.86rem; color:var(--mute); text-decoration:none; transition:color .2s}
.legal-toc a:hover{color:var(--gold)}

.legal-sec{scroll-margin-top:calc(var(--head-h) + 2rem); margin-bottom:3rem}
.legal-sec h2{
  font-family:var(--display); font-weight:300; font-size:clamp(1.5rem,2.4vw,1.95rem);
  line-height:1.2; margin:0 0 1.1rem; display:flex; align-items:baseline; gap:1rem;
}
.legal-sec h2 .num{
  font-family:var(--sans); font-size:.66rem; font-weight:600; letter-spacing:.16em;
  color:var(--gold); flex:none;
}
.legal-sec h3{
  font-size:.72rem; font-weight:600; letter-spacing:.16em; color:var(--gold-lt);
  margin:2rem 0 .8rem;
}
.legal-sec ol,.legal-sec ul{margin:1rem 0 1.2rem; padding-left:0; list-style:none}
.legal-sec li{
  position:relative; padding-left:1.9rem; margin-bottom:.6rem;
  font-size:.95rem; line-height:1.7; color:var(--mute);
}
.legal-sec ol{counter-reset:item}
.legal-sec ol > li{counter-increment:item}
.legal-sec ol > li::before{
  content:counter(item) "."; position:absolute; left:0; top:0;
  color:var(--gold); font-size:.82rem; font-variant-numeric:tabular-nums;
}
.legal-sec ul > li::before{
  content:""; position:absolute; left:.35rem; top:.7rem;
  width:5px; height:5px; background:var(--gold); transform:rotate(45deg);
}
.legal-sec li strong{color:var(--bone)}

.legal-close{
  margin:3.5rem 0 0; padding:1.5rem 1.75rem; border-left:2px solid var(--gold);
  background:var(--panel); font-size:.92rem;
}
.legal-contact{margin-top:3.5rem; padding-top:2rem; border-top:1px solid var(--hair)}
.legal-org{font-family:var(--display); font-size:1.4rem; color:var(--bone) !important; margin:0 0 1.5rem}
.legal-contact dl{display:flex; flex-wrap:wrap; gap:1.5rem 3rem; margin:0 0 1.5rem}
.legal-contact dt{font-size:.64rem; letter-spacing:.18em; color:var(--gold); margin-bottom:.3rem}
.legal-contact dd{margin:0; font-size:.95rem; color:var(--bone)}
.legal-contact dd a{text-decoration:none; border-bottom:1px solid var(--hair-2); transition:border-color .2s}
.legal-contact dd a:hover{border-color:var(--gold)}
.legal-area{font-size:.78rem; letter-spacing:.1em; margin:0}

@media (max-width:640px){
  .legal-toc ol{columns:1}
  .legal-toc{padding:1.3rem 1.4rem}
  .legal-sec h2{flex-direction:column; gap:.4rem}
}

/* ---------- footer ------------------------------------------------------ */
.site-foot{background:var(--void); border-top:1px solid var(--hair); padding:clamp(4rem,8vw,6rem) 0 2rem; font-size:.86rem}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:2.5rem}
.foot-grid img{height:112px; width:auto; margin-bottom:1.4rem}
.site-foot h4{color:var(--gold); font-family:var(--sans); font-size:.66rem; font-weight:600; letter-spacing:.2em; margin:0 0 1.2rem}
.site-foot ul{list-style:none; margin:0; padding:0; display:grid; gap:.7rem}
.site-foot a{text-decoration:none; color:var(--mute); transition:color .2s}
.site-foot a:hover{color:var(--gold)}
.site-foot p{color:var(--mute)}
.foot-base{
  margin-top:clamp(3rem,6vw,4.5rem); padding-top:1.8rem; border-top:1px solid var(--hair);
  display:flex; flex-wrap:wrap; gap:1rem 2rem; font-size:.72rem; color:#6A6660; letter-spacing:.05em;
}
.foot-base p{margin:0; margin-right:auto; color:#6A6660}


/* ==========================================================================
   Atmosphere & motion
   ========================================================================== */

/* film grain — kills banding on the dark gradients and adds depth */
.grain{
  position:fixed; inset:0; z-index:98; pointer-events:none; opacity:.05;
  background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABAAgMAAADXB5lNAAAADFBMVEX///+qqqpVVVUAAAABM1s0AAAES0lEQVR42gFABL/7ABRD6DjOKmKVQFizH70gGasDNdLu9taLxETWD2rl9PRosQIs0BiXLaAnXhx6i++lJ8hVAfY9WuAZU0gf+HyT2RFQXhMEBE6hoP83BeCESiCM+U/H2QK+hiQL3x2KViAVMOGyKwGyAPn9+kFJ3xvID2L5ykiwC1kDF9U5iw1IDCW92emdBCpfWgB4Evw3N0Ygk+wptcQafQOlANRzydhAxp8Enuq4nh0sijwBD4H7KUtTsYCMoDu00hj2+QCxP0Y9KSFZIMu7QPQ1pDKTAHIMABhRq8OBIHm8mOSRDu0AxpvU9TQq1RMZxy3TG/h2AQDY4cla2tKsHsKMITYJkRmvAs4DodMuWN4BDOMHWP2UnaEC12aTTKEAR93UfDgF+OVTAANQdgD5CEROdlVoOcAnEQQNANGDzPqwQJEZwSm5lkDnt6ID5h3m+ImOj9f6RXsEMI+pQQEk+cz1Gme7En69z8E0Zd3qALAgsYD55DqKICtv/cVSVBwCa3JEhxjG6xPQHEhPsSgvIgL6FS/8eWFiCOt3fOpz8R3wBG0dif5+/AuTpwU/UaDOtnADBoXpU28P+g1FGM9sTQ8eyQJiMdjfjozbp/Vd5LkEDKdUAw9mj1cu3BFFouZpg/JDRFQC+qo2HZnZbBi9RRXxw+e94QMS0+LZ+7U8Ve7tW/9rAC3dAa0Ju/DAE46iAP0EYr4dlGkAXIxDy0jZfSe8BzpzGucaIgLnDgdNC2M5YL8vJP0v1sDoARdF9rMd5Q4DVrIBA+u66QsEHwVy040ZuiOAG0tr9HcVXQOo956XFdPGQ0WPSRKjFAX/AtnhTAd7JJ9lGy8oOHrqJYgD9p9duE934LWThrSisQL/6QL8LXcvT+EU47/bja5T5EnIBDeDVOwJWhJX0tScrwHvhdEEPOPx3uEUegMNSYlR7hZZCwLGd+M9GCcME7KCSexCvdz8BAUhxugfe2LxGD725NFcjScA3EEfYcKj2g+Z6+U358TA1wEB2G0TFczoZwspwUVBUBIxAq2xamOX6ZHZMZAzdP4f9CYDEehl8FZR/vmolaWa+zPatAI6n+YoD+NhHvJf1YDliD2xAW3u3EAv/huOVbG1W19a6BwDrMj2Wri/TEU16bH3SEFxAAFF8jMIvHzD+lrs24EKRw1AAlTUcgH4E7yqdOw0SZJBf98DLnU9WlLNkPY1z/CzBXM05ANwQrTVCUYj8S9YO/qyRf4VArQgUS438VhCW8aIxp1wtiQEThE64tSk4QAhjJfgDrjxCgCPKHDPGdpvK8QpLqTpBs/QAv00MSxM6ZxBgQXYJPfjRw0DDTFoZKz0KJ5rKmNy9Qf6xwOdq3HyuvUEUf6U4qbx1mChAai66R+cCdbvsg8P6gHhtYoCIRh9m6Ar0k+bh+E0/2js2wHDcK2W2z1qu78XEADWCSTcA0tq8f6a588/EgmcuicNHWHXc/aA5Ln8XQAAAABJRU5ErkJggg=="); background-size:150px 150px;
  mix-blend-mode:overlay;
}

/* scroll progress hairline */
.progress{
  position:fixed; top:0; left:0; right:0; height:2px; z-index:99;
  background:linear-gradient(90deg,var(--gold),var(--gold-lt));
  transform:scaleX(0); transform-origin:left; will-change:transform;
}

/* hero: slow drift, cursor-tracked light, staged entrance */
.hero__bg img{animation:drift 26s cubic-bezier(.2,.5,.3,1) forwards}
@keyframes drift{from{transform:scale(1)} to{transform:scale(1.07)}}

.hero::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(560px circle at var(--mx,50%) var(--my,38%),
             rgba(200,169,110,.18), transparent 68%);
  opacity:0; transition:opacity .8s ease;
}
.hero:hover::after{opacity:1}

.js .hero__inner > *{
  opacity:0; transform:translateY(26px);
  transition:opacity .95s cubic-bezier(.2,.7,.3,1),transform .95s cubic-bezier(.2,.7,.3,1);
}
body.loaded .hero__inner > *{opacity:1; transform:none}
body.loaded .hero__inner > *:nth-child(1){transition-delay:.04s}
body.loaded .hero__inner > *:nth-child(2){transition-delay:.13s}
body.loaded .hero__inner > *:nth-child(3){transition-delay:.22s}
body.loaded .hero__inner > *:nth-child(4){transition-delay:.31s}

/* the tent line draws itself, picking up where the loader left off */
.js .peakline path{stroke-dasharray:1; stroke-dashoffset:1}
body.loaded .peakline path{stroke-dashoffset:0; transition:stroke-dashoffset 1.6s cubic-bezier(.3,.8,.3,1) .3s}

/* service ribbon */
.ribbon{
  border-top:1px solid var(--hair); border-bottom:1px solid var(--hair);
  overflow:hidden; padding:1.05rem 0; background:var(--void);
}
.ribbon__track{display:flex; width:max-content; animation:slide 48s linear infinite}
.ribbon:hover .ribbon__track{animation-play-state:paused}
.ribbon span{
  font-size:.72rem; font-weight:500; letter-spacing:.28em; color:var(--mute);
  padding:0 1.6rem; white-space:nowrap;
}
.ribbon span.dot{color:var(--gold); padding:0; letter-spacing:0}
@keyframes slide{from{transform:translateX(0)} to{transform:translateX(-50%)}}

/* sections ease in once, not on every scroll pass */
.js .rise{opacity:0; transform:translateY(30px); transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.3,1)}
.rise.seen{opacity:1; transform:none}

/* cards catch the cursor like a light source */
.card{position:relative; overflow:hidden}
.card::after{
  content:""; position:absolute; inset:0; z-index:3; pointer-events:none; opacity:0;
  background:radial-gradient(300px circle at var(--cx,50%) var(--cy,50%),
             rgba(200,169,110,.13), transparent 62%);
  transition:opacity .4s ease;
}
.card:hover::after{opacity:1}

/* gold sheen across the primary button */
.btn--solid{position:relative; overflow:hidden}
.btn--solid::before{
  content:""; position:absolute; top:0; left:-120%; width:60%; height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
  transition:left .7s cubic-bezier(.3,.8,.3,1);
}
.btn--solid:hover::before{left:130%}

/* ---------- gallery lightbox ------------------------------------------- */
.masonry img{cursor:zoom-in; transition:opacity .3s ease,transform .5s cubic-bezier(.2,.7,.3,1)}
.masonry:hover img{opacity:.5}
.masonry img:hover{opacity:1; transform:scale(1.015)}

.lb{
  position:fixed; inset:0; z-index:200; display:grid; place-items:center;
  background:rgba(6,6,7,.94); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  opacity:0; pointer-events:none; transition:opacity .3s ease;
}
.lb.open{opacity:1; pointer-events:auto}
.lb img{max-width:min(92vw,1200px); max-height:82vh; width:auto; border:1px solid var(--hair)}
.lb button{
  position:absolute; background:transparent; border:1px solid var(--hair-2); color:var(--bone);
  width:48px; height:48px; display:grid; place-items:center; cursor:pointer; border-radius:1px;
  transition:border-color .2s,color .2s,background .2s;
}
.lb button:hover{border-color:var(--gold); color:var(--gold); background:rgba(200,169,110,.08)}
.lb__close{top:1.5rem; right:1.5rem}
.lb__prev{left:1.5rem; top:50%; margin-top:-24px}
.lb__next{right:1.5rem; top:50%; margin-top:-24px}
.lb svg{width:20px; height:20px}
.lb__count{
  position:absolute; bottom:1.6rem; left:50%; transform:translateX(-50%);
  font-size:.72rem; letter-spacing:.18em; color:var(--mute); margin:0;
}
@media (max-width:640px){
  .lb__prev{left:.6rem} .lb__next{right:.6rem} .lb__close{top:.8rem; right:.8rem}
  .lb button{width:42px; height:42px}
}

@media (hover:none){
  .hero::after{display:none}
  .card::after{display:none}
}

/* ---------- responsive -------------------------------------------------- */
@media (max-width:1000px){
  .form-layout{grid-template-columns:1fr}
  .contact-block{position:static}
  .foot-grid{grid-template-columns:1fr 1fr; gap:2.5rem 2rem}
  .masonry{columns:2}
}
@media (max-width:860px){
  :root{--head-h:78px}
  .brand img{height:56px}
  .burger{display:block}
  .nav{display:none}
  .head-tools .social{display:none}
  .cart-btn{padding:.62rem 1rem; font-size:.66rem}
  .split,.pillars,.people,.included,.f-row{grid-template-columns:1fr}
  .pillars{gap:2rem}
  .quote-card{grid-template-columns:1fr; gap:.75rem}
  .hero__inner{padding-bottom:5rem}
}
@media (max-width:560px){
  .masonry{columns:1}
  .foot-grid{grid-template-columns:1fr}
  .grid{grid-template-columns:repeat(auto-fill,minmax(155px,1fr)); gap:.75rem}
  .card__body{padding:.95rem 1rem 1.15rem}
  .card__price{font-size:1.35rem}
  .btn{padding:.9rem 1.5rem}
  .peakline{height:30px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  #loader{display:none}
  *,*::before,*::after{animation-duration:.001ms !important; transition-duration:.001ms !important}
  .hero__inner > *{opacity:1 !important; transform:none !important}
  .peakline path{stroke-dashoffset:0 !important}
  .rise{opacity:1 !important; transform:none !important}
  .ribbon__track{animation:none}
  .grain{display:none}
}
