/* Shared look of the offer pages (teams.html, christmas.html): the waitlist page's night blue, gold and type */
:root{
  --navy-900:#040D1E; --navy-850:#071A33; --navy-800:#0A2748;
  --yellow:#F7C63E; --yellow-d:#E4AF22; --gold:#D4AF37; --red:#C8463A;
  --gut:clamp(1.15rem,4.4vw,4.5rem); --wrap:74rem;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; color-scheme:dark}
body{margin:0; background:var(--navy-900); color:#fff; font-family:Geist,system-ui,-apple-system,"Segoe UI",sans-serif; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden}
img{max-width:100%; height:auto; display:block}
a{color:inherit}
h1,h2,h3{font-family:Outfit,sans-serif; letter-spacing:-.03em; line-height:1.04; margin:0; text-wrap:balance}
.wrap{max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut)}
:focus-visible{outline:3px solid var(--yellow); outline-offset:3px; border-radius:6px}
.gold{background:linear-gradient(180deg,#FFE08A 0%,#F7C63E 50%,#C9981F 100%); -webkit-background-clip:text; background-clip:text; color:transparent}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
[hidden]{display:none !important}

/* buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.55rem; font-family:Outfit,sans-serif; font-weight:600; font-size:1rem;
  padding:.9rem 1.5rem; border:0; border-radius:999px; cursor:pointer; text-decoration:none; white-space:nowrap; transition:transform .18s, background .18s}
.btn:hover{transform:translateY(-2px)}
.btn svg{width:17px; height:17px; flex:none}
.btn-y{background:var(--yellow); color:#14203A; box-shadow:0 10px 26px -10px rgba(247,198,62,.85)}
.btn-y:hover{background:var(--yellow-d)}
.btn-ghost{background:rgba(255,255,255,.08); color:#fff; border:1px solid rgba(255,255,255,.18)}
.btn[disabled]{opacity:.7; cursor:progress; transform:none}

/* header */
header{position:sticky; top:0; z-index:60; background:rgba(5,15,34,.86); backdrop-filter:blur(14px); box-shadow:0 8px 28px -18px rgba(0,0,0,.8)}
.bar{max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut); height:72px; display:flex; align-items:center; gap:1.6rem}
.logo img{height:28px; width:auto}
nav{display:flex; gap:2rem; margin-inline:auto; font-size:.95rem; font-weight:500}
nav a{color:rgba(255,255,255,.82); text-decoration:none}
nav a[aria-current]{color:var(--yellow)}
nav a:hover{color:#fff}

/* hero */
.hero{position:relative; padding:clamp(3rem,8vw,6rem) 0 clamp(2.5rem,6vw,4.5rem); text-align:center; overflow:hidden; isolation:isolate;
  background:radial-gradient(60% 55% at 50% 30%, rgba(31,63,191,.55) 0%, rgba(8,32,66,0) 70%), linear-gradient(170deg,#071E3F 0%,#08234A 45%,#040D1E 100%)}
.hero::before{content:""; position:absolute; inset:0; z-index:-1; opacity:.4; background-image:radial-gradient(rgba(255,255,255,.1) 1px, transparent 1px);
  background-size:28px 28px; mask-image:radial-gradient(70% 60% at 50% 40%, #000, transparent)}
.kick{font-family:Outfit,sans-serif; font-weight:600; font-size:.8rem; letter-spacing:.32em; text-transform:uppercase; color:var(--yellow); margin:0 0 1.1rem}
.hero h1{font-size:clamp(2.5rem,1.4rem + 5vw,5rem); font-weight:800}
.lead{color:rgba(255,255,255,.82); font-size:clamp(1.02rem,.95rem + .35vw,1.22rem); max-width:40rem; margin:1.3rem auto 0}
.ctas{display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap; margin-top:1.8rem}

/* a row of the same lid, one name under each: one design, every person */
.team{display:flex; justify-content:center; align-items:flex-end; gap:clamp(.3rem,1.4vw,1rem); margin:clamp(2rem,5vw,3.2rem) auto 0; max-width:62rem}
.team figure{margin:0; flex:1 1 0; min-width:0; text-align:center}
.team img{filter:drop-shadow(0 22px 28px rgba(2,10,26,.7))}
.team figure:nth-child(odd){transform:translateY(10px)}
.team figcaption{display:inline-block; margin-top:.6rem; font-size:clamp(.62rem,.55rem + .3vw,.82rem); font-weight:600; color:#14203A; background:var(--yellow);
  border-radius:999px; padding:.18rem .7rem; white-space:nowrap}
.concept{font-size:.75rem; letter-spacing:.12em; color:rgba(255,255,255,.5); margin-top:1.2rem}

/* sections */
section{padding:clamp(3.2rem,7vw,5.5rem) 0; border-top:1px solid rgba(255,255,255,.06)}
.sec h2{font-size:clamp(1.9rem,1.3rem + 2.4vw,3rem); font-weight:800}
.sec .sub{color:rgba(255,255,255,.72); font-size:1.05rem; max-width:42rem; margin:.9rem 0 0}
.sk{font-family:Outfit,sans-serif; font-weight:600; font-size:.74rem; letter-spacing:.22em; text-transform:uppercase; color:var(--yellow); margin:0 0 .8rem}
.grid{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(.9rem,2vw,1.4rem); margin-top:2.2rem}
.g3{grid-template-columns:repeat(3,1fr)}
.card{position:relative; background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.1); border-radius:18px; padding:1.4rem}
.card h3{font-size:1.2rem; font-weight:700}
.card p{color:rgba(255,255,255,.72); margin:.5rem 0 0; font-size:.95rem}
.card .n{font-family:Outfit,sans-serif; font-weight:800; color:var(--yellow); letter-spacing:.1em; font-size:.85rem; margin:0}

/* prices */
.card .price{font-family:Outfit,sans-serif; font-weight:800; font-size:2.3rem; line-height:1.05; color:#fff; margin-top:.7rem; letter-spacing:-.03em}
.card .per{color:rgba(255,255,255,.62); font-size:.9rem; margin-top:.2rem}
.plan.top{border-color:rgba(247,198,62,.6); background:radial-gradient(120% 80% at 0% 0%,rgba(247,198,62,.14),transparent 60%),linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.02))}
.badge{position:absolute; top:-.75rem; left:1.2rem; font-family:Outfit,sans-serif; font-weight:700; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:#14203A; background:var(--yellow); border-radius:999px; padding:.25rem .7rem}
.plan ul{list-style:none; padding:0; margin:1rem 0 0; display:grid; gap:.5rem; font-size:.92rem; color:rgba(255,255,255,.84)}
.plan li{display:flex; gap:.55rem}
.plan li::before{content:""; flex:none; width:16px; height:16px; margin-top:.25rem;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F7C63E' stroke-width='3'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") no-repeat center/contain}
.more{margin-top:1.4rem; color:rgba(255,255,255,.7); font-size:.95rem}
.more a{color:var(--yellow)}
.note{font-size:.82rem; color:rgba(255,255,255,.55); margin-top:1.2rem}

/* options table */
.opts{width:100%; border-collapse:collapse; margin-top:1.8rem; font-size:.97rem}
.opts td{padding:.85rem .2rem; border-bottom:1px solid rgba(255,255,255,.08)}
.opts td:last-child{text-align:right; font-family:Outfit,sans-serif; font-weight:700; color:var(--yellow); white-space:nowrap}
.opts small{display:block; color:rgba(255,255,255,.6)}

/* deadline strip (christmas) */
.dates{display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; margin-top:2rem}
.date{background:rgba(4,13,30,.6); border:1px solid rgba(247,198,62,.4); border-radius:16px; padding:.9rem 1.3rem; min-width:13rem}
.date b{display:block; font-family:Outfit,sans-serif; font-size:1.4rem; color:var(--yellow)}
.date span{font-size:.88rem; color:rgba(255,255,255,.75)}

/* faq */
details{border-bottom:1px solid rgba(255,255,255,.1); padding:1.05rem 0}
summary{cursor:pointer; font-family:Outfit,sans-serif; font-weight:600; font-size:1.1rem; list-style:none; display:flex; justify-content:space-between; gap:1rem}
summary::after{content:"+"; color:var(--yellow); font-size:1.4rem; line-height:1}
details[open] summary::after{content:"–"}
details p{color:rgba(255,255,255,.72); margin:.7rem 0 0; max-width:46rem}

/* the booking form */
.book{display:grid; grid-template-columns:1fr 1.2fr; gap:clamp(1.5rem,4vw,3rem); padding:clamp(1.5rem,3.4vw,2.6rem); border-radius:22px;
  border:1px solid rgba(247,198,62,.38); background:radial-gradient(120% 90% at 0% 0%,rgba(247,198,62,.13),transparent 55%),linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02))}
.book h2{font-size:clamp(1.7rem,1.2rem + 1.6vw,2.4rem); font-weight:800}
.book .side p{color:rgba(255,255,255,.76)}
.bf{display:grid; grid-template-columns:1fr 1fr; gap:.85rem 1rem; align-content:start}
.bf .full{grid-column:1/-1}
.bf label{display:block; font-size:.78rem; letter-spacing:.06em; color:rgba(255,255,255,.7); margin:0 0 .35rem}
.bf label i{font-style:normal; color:rgba(255,255,255,.45)}
.bf input,.bf select,.bf textarea{width:100%; font:inherit; font-size:.98rem; color:#fff; background:rgba(4,13,30,.62); border:1px solid rgba(255,255,255,.2);
  border-radius:12px; padding:.75rem .9rem; outline:none}
.bf select{appearance:none; -webkit-appearance:none; padding-right:2.4rem; cursor:pointer;
  background:rgba(4,13,30,.62) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F7C63E' stroke-width='2.4'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right .8rem center/16px}
.bf select option{color:#0C1526}
.bf textarea{min-height:5.5rem; resize:vertical}
.bf input:focus,.bf select:focus,.bf textarea:focus{border-color:rgba(247,198,62,.8); box-shadow:0 0 0 4px rgba(247,198,62,.14)}
.bf .chk{display:flex; gap:.6rem; align-items:flex-start; font-size:.88rem; letter-spacing:0; color:rgba(255,255,255,.8); cursor:pointer; margin:0}
.bf .chk input{width:1.1rem; height:1.1rem; margin:.15rem 0 0; flex:none; accent-color:var(--yellow); padding:0}
.bf .btn{justify-self:start}
.err{color:#FFB4A8; font-size:.9rem; margin:0}
.err:empty{display:none}
.micro{font-size:.84rem; color:rgba(255,255,255,.62); margin:0}
.micro a{color:rgba(255,255,255,.85)}
.ok{display:none; align-self:center; text-align:center; background:rgba(4,13,30,.62); border:1px solid rgba(247,198,62,.45); border-radius:18px; padding:2rem 1.4rem}
.ok h3{font-size:1.5rem} .ok p{color:rgba(255,255,255,.8)}
.book.sent .bf{display:none} .book.sent .ok{display:block}

footer{border-top:1px solid rgba(255,255,255,.08); padding:2rem 0; color:rgba(255,255,255,.55); font-size:.86rem}
footer .wrap{display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap}
footer a{color:rgba(255,255,255,.75)}

@media (max-width:900px){
  nav{display:none}
  .bar{justify-content:space-between}
  .bar .btn{padding:.6rem 1rem; font-size:.88rem}
  .grid{grid-template-columns:1fr 1fr}
  .g3{grid-template-columns:1fr}
  .book,.bf{grid-template-columns:1fr}
  .bf .btn{justify-self:stretch}
  .team figure:nth-child(n+4){display:none}
}
@media (max-width:560px){ .grid{grid-template-columns:1fr} }