/* ===== Inferno Escape Room — Tempe, AZ ===== */
:root{
  --black:#0d0b0b;
  --char:#161210;
  --char-2:#1e1815;
  --panel:#211a16;
  --ember:#ff5a1f;
  --ember-hot:#ff3d1f;
  --amber:#ffb020;
  --smoke:#c9a98f;
  --off:#f6efe7;
  --muted:#b6a89d;
  --line:rgba(255,120,50,.16);
  --radius:16px;
  --radius-sm:11px;
  --wrap:1180px;
  --shadow:0 18px 50px rgba(0,0,0,.55);
  --glow:0 0 32px rgba(255,90,31,.4);
  --f-head:'Oswald',system-ui,sans-serif;
  --f-body:'Inter',system-ui,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;font-family:var(--f-body);
  background:var(--black);color:var(--off);
  line-height:1.65;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}

.wrap{width:min(var(--wrap),92vw);margin-inline:auto}
.wrap--narrow{width:min(760px,92vw)}

h1,h2,h3{font-family:var(--f-head);font-weight:600;line-height:1.08;margin:0;letter-spacing:.5px}
h2{font-size:clamp(1.7rem,4vw,2.7rem);text-transform:uppercase}
h3{font-size:1.22rem;letter-spacing:.6px}
p{margin:0}

.grad{background:linear-gradient(100deg,var(--amber),var(--ember) 50%,var(--ember-hot));-webkit-background-clip:text;background-clip:text;color:transparent}

.eyebrow{
  font-family:var(--f-head);text-transform:uppercase;letter-spacing:3px;
  font-size:.78rem;color:var(--ember);margin-bottom:.7rem;font-weight:600;
}

/* ===== Buttons ===== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--f-head);font-weight:600;letter-spacing:1px;text-transform:uppercase;
  font-size:.92rem;padding:.85rem 1.6rem;border-radius:999px;border:1.5px solid transparent;
  cursor:pointer;transition:transform .2s ease,box-shadow .25s ease,background .25s ease,color .2s ease;
}
.btn--sm{padding:.55rem 1.1rem;font-size:.82rem}
.btn--block{width:100%}
.btn--primary{
  background:linear-gradient(100deg,var(--amber),var(--ember) 55%,var(--ember-hot));
  color:#1a0d05;box-shadow:0 10px 26px rgba(255,90,31,.35);
}
.btn--primary:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(255,90,31,.5)}
.btn--ghost{border-color:var(--line);color:var(--off);background:rgba(255,255,255,.02)}
.btn--ghost:hover{border-color:var(--ember);color:var(--amber);transform:translateY(-2px)}

/* ===== Intro Animation ===== */
.intro{
  position:fixed;inset:0;z-index:9999;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.2rem;
  background:radial-gradient(circle at 50% 42%,#241610,var(--black) 70%);
  transition:opacity .55s ease,visibility .55s ease;
}
.intro.hide{opacity:0;visibility:hidden;pointer-events:none}
.intro__inner{display:flex;flex-direction:column;align-items:center;gap:.6rem}
.intro__lock{width:min(180px,42vw)}
.intro__shackle{transform-origin:100px 96px;animation:shackle .7s ease 1.7s forwards}
.intro__dial-fill{stroke-dasharray:100;stroke-dashoffset:100;transform:rotate(-90deg);transform-origin:100px 150px;animation:dialFill 1.9s cubic-bezier(.6,.02,.3,1) forwards}
.intro__needle{transform-origin:100px 150px;animation:spinNeedle 1.9s cubic-bezier(.6,.02,.3,1) forwards}
.intro__timer{font-family:var(--f-head);font-size:2.6rem;letter-spacing:3px;color:var(--amber);text-shadow:var(--glow)}
.intro__sec{font-size:1.2rem;color:var(--ember);margin-left:2px}
.intro__tag{font-family:var(--f-head);letter-spacing:4px;text-transform:uppercase;font-size:.8rem;color:var(--smoke)}
.intro__skip{
  position:absolute;bottom:2rem;right:2rem;background:transparent;border:1px solid var(--line);
  color:var(--muted);font-family:var(--f-head);letter-spacing:2px;text-transform:uppercase;
  padding:.5rem 1.1rem;border-radius:999px;cursor:pointer;font-size:.75rem;transition:.2s;
}
.intro__skip:hover{color:var(--amber);border-color:var(--ember)}
@keyframes dialFill{to{stroke-dashoffset:0}}
@keyframes spinNeedle{0%{transform:rotate(0)}70%{transform:rotate(710deg)}85%{transform:rotate(690deg)}100%{transform:rotate(700deg)}}
@keyframes shackle{to{transform:translateY(-16px) rotate(-4deg)}}

/* ===== Header ===== */
.site-header{
  position:sticky;top:0;z-index:900;
  background:rgba(13,11,11,.82);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.header__row{display:flex;align-items:center;justify-content:space-between;height:70px;gap:1rem}
.brand{display:flex;align-items:center;gap:.6rem}
.brand__mark{width:34px;height:34px;filter:drop-shadow(0 0 10px rgba(255,90,31,.5))}
.brand__text{font-family:var(--f-head);font-weight:700;letter-spacing:2px;font-size:1.15rem;line-height:.95;display:flex;flex-direction:column}
.brand__sub{font-size:.56rem;letter-spacing:4px;color:var(--ember);font-weight:600}
.nav{display:flex;align-items:center;gap:1.6rem}
.nav a{font-family:var(--f-head);letter-spacing:1px;text-transform:uppercase;font-size:.85rem;color:var(--muted);transition:color .2s}
.nav a:hover{color:var(--amber)}
.nav .nav__book{color:#1a0d05}
.nav .nav__book:hover{color:#1a0d05}
.nav-toggle{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px}
.nav-toggle span{width:26px;height:2px;background:var(--off);transition:.3s;border-radius:2px}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ===== Hero ===== */
.hero{position:relative;overflow:hidden;padding:clamp(3.5rem,9vw,7rem) 0 clamp(3rem,6vw,5rem)}
.hero__glow{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(60% 55% at 50% 0%,rgba(255,90,31,.28),transparent 60%),
    radial-gradient(40% 40% at 85% 30%,rgba(255,176,32,.14),transparent 60%),
    radial-gradient(50% 50% at 10% 80%,rgba(255,61,31,.12),transparent 60%);
}
.hero__inner{position:relative;z-index:1;max-width:820px}
.hero__title{font-size:clamp(2.4rem,7vw,4.6rem);text-transform:uppercase;letter-spacing:1px}
.hero__sub{color:var(--smoke);font-size:clamp(1rem,2.3vw,1.2rem);margin:1.4rem 0 2rem;max-width:640px}
.hero__cta{display:flex;flex-wrap:wrap;gap:.9rem;margin-bottom:1.5rem}
.hero__trust{font-family:var(--f-head);letter-spacing:1.5px;text-transform:uppercase;font-size:.78rem;color:var(--muted)}

/* ===== Trust bar ===== */
.trustbar{background:var(--char);border-block:1px solid var(--line)}
.trustbar__row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.9rem 1.6rem;padding:1rem 0;font-family:var(--f-head);letter-spacing:1.5px;text-transform:uppercase;font-size:.82rem;color:var(--muted)}
.trustbar strong{color:var(--amber)}
.dot{width:5px;height:5px;border-radius:50%;background:var(--ember);opacity:.7}

/* ===== Sections ===== */
.section{padding:clamp(3.5rem,8vw,6rem) 0}
.section--alt{background:linear-gradient(180deg,var(--char),var(--black))}
.section__head{max-width:680px;margin-bottom:2.6rem}
.section__lede{color:var(--smoke);margin-top:.9rem;font-size:1.05rem}

.grid{display:grid;gap:1.4rem}
.grid.two{grid-template-columns:repeat(2,1fr)}
.grid.three{grid-template-columns:repeat(3,1fr)}
.rooms{grid-template-columns:repeat(4,1fr)}
.features{grid-template-columns:repeat(4,1fr)}
.extras{margin-top:1.4rem}

/* ===== Cards ===== */
.card{
  background:linear-gradient(180deg,var(--panel),var(--char-2));
  border:1px solid var(--line);border-radius:var(--radius);
  padding:1.6rem;transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;
  position:relative;overflow:hidden;
}
.card::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:linear-gradient(90deg,var(--amber),var(--ember),transparent);opacity:.55}
.card:hover{transform:translateY(-6px);border-color:var(--ember);box-shadow:var(--shadow)}

.room__icon,.extra__icon,.feature__icon{color:var(--ember)}
.room__icon svg{width:44px;height:44px;margin-bottom:.9rem;filter:drop-shadow(0 0 8px rgba(255,90,31,.35))}
.room h3{margin-bottom:.5rem}
.room p{color:var(--muted);font-size:.94rem;margin-bottom:1.1rem}
.room__meta{list-style:none;margin:0;padding:.9rem 0 0;border-top:1px solid var(--line);display:grid;gap:.4rem}
.room__meta li{display:flex;justify-content:space-between;font-size:.86rem}
.room__meta span{color:var(--muted);font-family:var(--f-head);letter-spacing:1px;text-transform:uppercase;font-size:.74rem}
.room__meta b{color:var(--amber);font-weight:600}

.extra{display:flex;gap:1.1rem;align-items:flex-start}
.extra__icon svg{width:42px;height:42px;flex:none}
.extra p{color:var(--muted);font-size:.95rem;margin-top:.5rem}

/* ===== Features ===== */
.feature{padding:1.4rem;border:1px solid var(--line);border-radius:var(--radius);background:rgba(255,255,255,.015);transition:.25s}
.feature:hover{border-color:var(--ember);transform:translateY(-4px)}
.feature__icon svg{width:40px;height:40px;color:var(--ember);margin-bottom:.9rem}
.feature h3{margin-bottom:.5rem;font-size:1.08rem}
.feature p{color:var(--muted);font-size:.93rem}

/* ===== Showcase ===== */
.showcase{grid-template-columns:repeat(3,1fr)}
.scene{margin:0;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--char);transition:.25s}
.scene:hover{border-color:var(--ember);transform:translateY(-4px)}
.scene svg{width:100%;height:auto}
.scene figcaption{padding:.85rem 1.1rem;font-family:var(--f-head);letter-spacing:1px;text-transform:uppercase;font-size:.78rem;color:var(--smoke);border-top:1px solid var(--line)}
.scene--panel{display:flex;flex-direction:column}
.mock{padding:1.4rem;background:radial-gradient(circle at 50% 0%,#241610,var(--char));flex:1}
.mock__clock{text-align:center;margin-bottom:1.2rem}
.mock__label{display:block;font-family:var(--f-head);letter-spacing:2px;text-transform:uppercase;font-size:.68rem;color:var(--muted)}
.mock__time{display:block;font-family:var(--f-head);font-size:2.6rem;color:var(--amber);letter-spacing:3px;text-shadow:var(--glow)}
.mock__bar{display:block;height:6px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden;margin-top:.5rem}
.mock__bar i{display:block;height:100%;background:linear-gradient(90deg,var(--ember-hot),var(--amber))}
.mock__board{list-style:none;margin:0;padding:0;display:grid;gap:.45rem}
.mock__board li{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.7rem;font-size:.86rem;padding:.5rem .7rem;border-radius:9px;background:rgba(255,255,255,.03)}
.mock__board .rank{font-family:var(--f-head);color:var(--ember);width:1.4rem;text-align:center}
.mock__board .t{font-family:var(--f-head);color:var(--amber);letter-spacing:1px}
.gear{animation:spin 14s linear infinite}
.gear--b{animation-direction:reverse;animation-duration:9s}
@keyframes spin{to{transform:rotate(360deg)}}

/* ===== Reviews ===== */
.quote{margin:0;padding:1.6rem;border:1px solid var(--line);border-radius:var(--radius);background:linear-gradient(180deg,var(--panel),var(--char-2));position:relative}
.quote::before{content:"\201C";position:absolute;top:-.2rem;left:1rem;font-family:var(--f-head);font-size:3.4rem;color:var(--ember);opacity:.4}
.quote p{color:var(--off);font-size:.97rem;padding-top:.6rem}
.quote footer{margin-top:1rem;font-family:var(--f-head);letter-spacing:1px;color:var(--amber);font-size:.85rem}

/* ===== FAQ ===== */
.faq{display:grid;gap:.7rem}
.faq__item{border:1px solid var(--line);border-radius:var(--radius-sm);background:rgba(255,255,255,.02);overflow:hidden}
.faq__q{
  width:100%;display:flex;justify-content:space-between;align-items:center;gap:1rem;
  background:none;border:0;cursor:pointer;text-align:left;color:var(--off);
  font-family:var(--f-head);letter-spacing:.5px;font-size:1.02rem;padding:1.05rem 1.2rem;
}
.faq__q:hover{color:var(--amber)}
.faq__ico{position:relative;width:16px;height:16px;flex:none}
.faq__ico::before,.faq__ico::after{content:"";position:absolute;background:var(--ember);border-radius:2px;transition:.3s}
.faq__ico::before{top:7px;left:0;width:16px;height:2px}
.faq__ico::after{top:0;left:7px;width:2px;height:16px}
.faq__q[aria-expanded="true"] .faq__ico::after{transform:rotate(90deg);opacity:0}
.faq__a{max-height:0;overflow:hidden;transition:max-height .35s ease}
.faq__a p{padding:0 1.2rem 1.1rem;color:var(--muted);font-size:.95rem}

/* ===== CTA band ===== */
.cta-band{background:linear-gradient(100deg,#3a1608,#1a0d07);border-block:1px solid var(--line);position:relative;overflow:hidden}
.cta-band::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 120% at 50% 0%,rgba(255,90,31,.28),transparent 60%);pointer-events:none}
.cta-band__inner{position:relative;text-align:center;padding:clamp(3rem,7vw,4.6rem) 0;max-width:640px;margin-inline:auto}
.cta-band__inner p{color:var(--smoke);margin:.9rem 0 1.7rem;font-size:1.06rem}
.cta-band__btns{display:flex;gap:.9rem;justify-content:center;flex-wrap:wrap}

/* ===== Contact ===== */
.contact{align-items:start;gap:2rem}
.contact__list{list-style:none;margin:1.6rem 0 0;padding:0;display:grid;gap:1.1rem}
.contact__list li{display:flex;gap:.9rem;align-items:flex-start}
.contact__ico{color:var(--ember);flex:none}
.contact__ico svg{width:26px;height:26px}
.contact__list a:hover{color:var(--amber)}
.contact__list small{color:var(--muted)}
.book h3{margin-bottom:.4rem}
.book>p{color:var(--muted);font-size:.93rem;margin-bottom:1.2rem}
.book__form{display:grid;gap:.85rem}
.book__form label{display:grid;gap:.35rem;font-family:var(--f-head);letter-spacing:1px;text-transform:uppercase;font-size:.74rem;color:var(--muted)}
.book__grid{display:grid;grid-template-columns:1fr 1.4fr;gap:.85rem}
.book__form input,.book__form select{
  font-family:var(--f-body);font-size:.95rem;padding:.7rem .8rem;border-radius:10px;
  background:var(--black);border:1px solid var(--line);color:var(--off);text-transform:none;letter-spacing:0;
}
.book__form input:focus,.book__form select:focus{outline:none;border-color:var(--ember);box-shadow:0 0 0 3px rgba(255,90,31,.15)}
.book__form .btn{margin-top:.3rem}
.book__note{font-family:var(--f-body);text-transform:none;letter-spacing:0;font-size:.82rem;color:var(--muted);text-align:center;margin-top:.4rem}
.book__note a{color:var(--amber)}

/* ===== Footer ===== */
.site-footer{background:var(--char);border-top:1px solid var(--line);padding:2.6rem 0 5.5rem}
.footer__row{display:flex;justify-content:space-between;gap:2rem;flex-wrap:wrap;padding-bottom:1.6rem;border-bottom:1px solid var(--line)}
.footer__brand{max-width:360px}
.footer__brand .brand__text{flex-direction:row;gap:.4rem;align-items:baseline;margin-bottom:.6rem}
.footer__brand p{color:var(--muted);font-size:.9rem}
.footer__nav{display:flex;gap:1.4rem;flex-wrap:wrap;align-content:flex-start}
.footer__nav a{font-family:var(--f-head);letter-spacing:1px;text-transform:uppercase;font-size:.85rem;color:var(--muted)}
.footer__nav a:hover{color:var(--amber)}
.footer__base{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding-top:1.4rem;font-size:.83rem;color:var(--muted)}
.footer__credit a{color:var(--amber)}
.footer__credit a:hover{text-decoration:underline}

/* ===== Mobile bar ===== */
.mobile-bar{display:none}
.mobile-bar__btn{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  font-family:var(--f-head);letter-spacing:1px;text-transform:uppercase;font-size:.72rem;padding:.55rem 0;
}
.mobile-bar__btn svg{width:20px;height:20px}
.mobile-bar .call{color:var(--off);border-right:1px solid var(--line)}
.mobile-bar .book{color:#1a0d05;background:linear-gradient(100deg,var(--amber),var(--ember))}

/* ===== Reveal ===== */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .gear,.intro__dial-fill,.intro__needle,.intro__shackle{animation:none}
}

/* ===== Responsive ===== */
@media (max-width:980px){
  .rooms{grid-template-columns:repeat(2,1fr)}
  .features{grid-template-columns:repeat(2,1fr)}
  .showcase{grid-template-columns:1fr}
  .three{grid-template-columns:1fr}
}
@media (max-width:760px){
  .nav{
    position:fixed;inset:70px 0 auto 0;flex-direction:column;gap:0;align-items:stretch;
    background:rgba(13,11,11,.98);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);
    padding:.5rem 0 1rem;transform:translateY(-140%);transition:transform .35s ease;
  }
  .nav.open{transform:translateY(0)}
  .nav a{padding:.9rem 8vw;border-top:1px solid var(--line)}
  .nav .nav__book{margin:.7rem 8vw 0;text-align:center;border-radius:999px;padding:.8rem}
  .nav-toggle{display:flex}
  .grid.two{grid-template-columns:1fr}
  .contact{gap:1.4rem}
  .footer__base{flex-direction:column;gap:.4rem}
  .mobile-bar{
    display:flex;position:fixed;inset:auto 0 0 0;z-index:800;
    background:rgba(13,11,11,.96);backdrop-filter:blur(10px);border-top:1px solid var(--line);
  }
}
@media (max-width:440px){
  .rooms{grid-template-columns:1fr}
  .features{grid-template-columns:1fr}
  .book__grid{grid-template-columns:1fr}
}