@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@700;800;900&family=Work+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&family=IBM+Plex+Mono:wght@500;600&display=swap');

/* Deliberate single visual world: dark charcoal workshop, warm amber accent.
   Painted explicitly regardless of viewer theme, per the brief's own
   design direction — not a light/dark toggle. */
:root{
  --ground:#161310;
  --ground-2:#1D1811;
  --surface:#221B13;
  --surface-2:#2A2116;
  --ink:#F4EEE1;
  --ink-dim:#C9BCA5;
  --ink-muted:#8F8171;
  --accent:#E8791C;
  --accent-bright:#FFA94D;
  --accent-soft:#FFD9A8;
  --accent-ink:#1A0E02;
  --line:rgba(244,238,225,0.09);
  --line-strong:rgba(244,238,225,0.16);
  --focus:#7FB6FF;
  --shadow-1: 0 1px 2px rgba(0,0,0,.4);
  --shadow-2: 0 10px 30px -12px rgba(0,0,0,.55);
  --shadow-glow: 0 0 0 1px rgba(232,121,28,0.35), 0 8px 24px -8px rgba(232,121,28,0.35);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:'Work Sans', ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;}
h1,h2,h3{
  font-family:'Big Shoulders Display', 'Arial Narrow', sans-serif;
  font-weight:900;
  letter-spacing:0.005em;
  line-height:0.94;
  text-wrap:balance;
  margin:0;
}
.mono{ font-family:'IBM Plex Mono', ui-monospace, monospace; }
.eyebrow{
  font-family:'IBM Plex Mono', monospace;
  font-size:0.7rem;
  font-weight:600;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--accent-bright);
  display:flex; align-items:center; gap:0.5rem;
}
.eyebrow::before{
  content:"";
  width:1.4rem; height:1px; background:var(--accent);
  display:inline-block;
}
p{line-height:1.6; max-width:34rem; color:var(--ink-dim); font-size:1rem;}
p.lede{font-size:1.06rem;}

:focus-visible{outline:2px solid var(--focus);outline-offset:3px; border-radius:2px;}

.wrap{ max-width:30rem; margin:0 auto; padding:0 1.35rem; }
@media (min-width:640px){ .wrap{max-width:40rem;} }
@media (min-width:960px){ .wrap{max-width:56rem;} }

/* ===== Site header: top bar + page nav ===== */
.site-header{
  position:sticky; top:0; z-index:40;
  background:color-mix(in srgb, var(--ground) 88%, transparent);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(10px) saturate(1.2);
}
.topbar-inner{
  max-width:56rem;margin:0 auto;padding:0.85rem 1rem;
  display:flex;align-items:center;justify-content:space-between;gap:0.6rem;
}
.brand{
  font-family:'Big Shoulders Display', sans-serif;
  font-weight:800; font-size:clamp(0.78rem, 3.6vw, 1.05rem); letter-spacing:0.01em;
  text-transform:uppercase; color:var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0;
  text-decoration:none;
}
.brand span{color:var(--accent-bright);}
.topbar-inner .btn{padding:0.5rem 0.85rem;font-size:0.72rem;flex:none;border-radius:8px;}

.subnav{border-top:1px solid var(--line);}
.subnav-inner{
  max-width:56rem;margin:0 auto;padding:0 1rem;
  display:flex;gap:1.5rem;overflow-x:auto;
  -ms-overflow-style:none; scrollbar-width:none;
}
.subnav-inner::-webkit-scrollbar{display:none;}
.subnav a{
  font-family:'IBM Plex Mono';font-size:0.72rem;letter-spacing:0.07em;
  text-transform:uppercase;color:var(--ink-muted);
  padding:0.7rem 0;white-space:nowrap;
  border-bottom:2px solid transparent;
  text-decoration:none;
}
.subnav a:hover{color:var(--ink);}
.subnav a.active{color:var(--accent-bright);border-bottom-color:var(--accent);}

/* ===== Buttons — refined, no skeuomorphic 3D press ===== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:0.5rem;
  background:linear-gradient(180deg, var(--accent-bright), var(--accent));
  color:var(--accent-ink);
  font-family:'Work Sans',sans-serif;
  font-weight:700;
  font-size:1rem;
  padding:1rem 1.5rem;
  border-radius:10px;
  text-decoration:none;
  border:none;
  box-shadow:var(--shadow-glow);
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
  cursor:pointer;
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-1px); filter:brightness(1.06); }
.btn:active{ transform:translateY(0); }
.btn-block{width:100%;}
.btn-ghost{
  background:transparent;
  color:var(--ink);
  border:1px solid var(--line-strong);
  box-shadow:none;
}
.btn-ghost:hover{border-color:var(--accent); color:var(--accent-bright); transform:none;}
.btn-sm{padding:0.62rem 1.05rem;font-size:0.85rem;border-radius:8px;}

/* ===== Hero ===== */
.hero{
  position:relative;
  padding:3rem 0 2.8rem;
  background-color:var(--ground);
  background-image:
    radial-gradient(ellipse 90% 55% at 18% -8%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 62%),
    radial-gradient(ellipse 60% 40% at 100% 10%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 60%),
    url("gallery-4.jpg");
  background-position: 0 0, 0 0, center 52%;
  background-size: auto, auto, cover;
  background-repeat: no-repeat;
  overflow:hidden;
}
.hero::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(22,19,16,0.90) 0%, rgba(22,19,16,0.78) 42%, rgba(22,19,16,0.90) 100%);
  pointer-events:none;
}
.hero::after{
  content:"";
  position:absolute; inset:0;
  background-image:radial-gradient(rgba(244,238,225,0.05) 1px, transparent 1px);
  background-size:22px 22px;
  mask-image:linear-gradient(180deg, black, transparent 75%);
  pointer-events:none;
}
.hero > .wrap{position:relative; z-index:1;}
.hero h1{
  font-size:clamp(2.5rem, 9.5vw, 4rem);
  margin-top:0.7rem;
  color:var(--ink);
}
.hero h1 em{ font-style:normal; color:var(--accent-bright); }
.hero .lede{ margin-top:1rem; }
.hours-strip{
  margin-top:1.5rem;
  display:flex;flex-wrap:wrap;gap:0.5rem 1.2rem;
  font-family:'IBM Plex Mono',monospace;
  font-size:0.83rem;
  color:var(--ink-dim);
  border-top:1px solid var(--line);
  padding-top:0.9rem;
}
.hours-strip b{color:var(--accent-bright);}
.hero-cta{margin-top:1.6rem;display:flex;flex-direction:column;gap:0.85rem;align-items:flex-start;}
.trust-line{
  font-size:0.86rem;color:var(--ink-muted);
  display:flex;align-items:center;gap:0.5rem;flex-wrap:wrap;
}
.stars{color:var(--accent-bright);letter-spacing:0.05em;}
.trust-line a{color:var(--accent-bright);text-decoration:underline;}

/* ===== Page header (non-hero pages) ===== */
.page-header{
  padding:2.6rem 0 0.5rem;
  background:
    radial-gradient(ellipse 90% 50% at 18% -10%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 62%),
    var(--ground);
}
.page-header h1{font-size:clamp(2.1rem,7.5vw,3rem);color:var(--ink);margin-top:0.6rem;}
.page-header .lede{margin-top:0.9rem;}

/* ===== Section shell ===== */
section{padding:4rem 0;}
section + section{border-top:1px solid var(--line);}
.section-head{margin-bottom:1.8rem;}
.section-head h2{font-size:clamp(1.9rem,7vw,2.5rem); color:var(--ink);}
.section-head p{margin-top:0.75rem;}

/* ===== Why weekends / founder ===== */
.founder{
  background:linear-gradient(160deg, var(--surface), var(--ground-2));
  border:1px solid var(--line-strong);
  border-radius:16px;
  padding:1.8rem 1.6rem;
  box-shadow:var(--shadow-2);
}
.founder p{ font-size:1.1rem; max-width:none; color:var(--ink); }
.founder .sign{
  margin-top:1.2rem;
  font-family:'IBM Plex Mono',monospace;
  font-size:0.76rem;
  color:var(--accent-bright);
  letter-spacing:0.05em;
  text-transform:uppercase;
}

/* ===== Photo rotator ("In the bay") ===== */
.photo-rotator{
  position:relative;
  aspect-ratio:4/3;
  border-radius:18px;
  overflow:hidden;
  border:1px solid var(--line-strong);
  box-shadow:var(--shadow-2);
  background:var(--surface);
}
@media (min-width:700px){ .photo-rotator{aspect-ratio:16/9;} }
.pr-slide{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  opacity:0;
  transition:opacity 1.1s ease;
}
.pr-slide.active{opacity:1;}
.photo-rotator::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(15,12,9,0) 55%, rgba(15,12,9,0.55) 100%);
  pointer-events:none;
}
.pr-tag{
  position:absolute; left:1rem; bottom:1rem; z-index:2;
  font-family:'IBM Plex Mono';font-size:0.7rem;letter-spacing:0.08em;
  text-transform:uppercase;color:var(--ink);
  background:color-mix(in srgb, var(--ground) 55%, transparent);
  border:1px solid var(--line-strong);
  padding:0.4rem 0.7rem;border-radius:99px;
  backdrop-filter:blur(6px);
}
.pr-dots{
  display:flex; justify-content:center; gap:0.5rem;
  margin-top:1rem;
}
.pr-dots button{
  width:0.5rem;height:0.5rem;border-radius:50%;
  border:none;padding:0;
  background:var(--line-strong);
  cursor:pointer;
  transition:background .2s ease, transform .2s ease;
}
.pr-dots button.active{background:var(--accent-bright); transform:scale(1.3);}

/* ===== Services ===== */
.services-grid{ display:grid; grid-template-columns:1fr; gap:1rem; }
@media (min-width:700px){ .services-grid{grid-template-columns:1fr 1fr;} }

.ticket{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:16px;
  padding:1.4rem;
  display:flex; flex-direction:column; gap:0.6rem;
  box-shadow:var(--shadow-1);
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.ticket:hover{ border-color:var(--line-strong); transform:translateY(-2px); box-shadow:var(--shadow-2); }
.ticket-top{display:flex;align-items:flex-start;justify-content:space-between;gap:0.75rem;}
.ticket-icon{
  flex:none; width:2.75rem; height:2.75rem; border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  color:var(--accent-bright);
  background:color-mix(in srgb, var(--accent) 14%, transparent);
}
.ticket-name{font-family:'Big Shoulders Display';font-weight:800;font-size:1.32rem;color:var(--ink);line-height:1.05;}
.ticket-price{
  font-family:'IBM Plex Mono';font-weight:600;font-size:0.92rem;
  color:var(--accent-bright);white-space:nowrap;
}
.ticket p{font-size:0.92rem;max-width:none;margin:0;}
.ticket .btn{margin-top:0.3rem;align-self:flex-start;}

/* ===== Proof / Reviews ===== */
.rating-block{
  display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
  margin-bottom:1.8rem;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:14px;
  padding:1.1rem 1.3rem;
}
.rating-num{ font-family:'Big Shoulders Display';font-weight:900;font-size:3rem;color:var(--accent-bright);line-height:0.85; }
.rating-meta{font-family:'IBM Plex Mono';font-size:0.82rem;color:var(--ink-dim);}
.rating-meta .stars{font-size:1rem;display:block;margin-bottom:0.2rem;}

.video-row{display:grid;grid-template-columns:1fr;gap:0.9rem;margin-bottom:1.8rem;}
@media (min-width:700px){ .video-row{grid-template-columns:1fr 1fr;} }
.video-card{
  position:relative;
  aspect-ratio:16/10;
  border-radius:14px;
  border:1px solid var(--line-strong);
  background:linear-gradient(160deg, var(--surface-2), var(--surface));
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:0.7rem; text-align:center; padding:1.2rem;
  overflow:hidden;
}
.play-btn{
  width:3.1rem;height:3.1rem;border-radius:50%;
  background:linear-gradient(180deg, var(--accent-bright), var(--accent));
  display:flex;align-items:center;justify-content:center;
  box-shadow:var(--shadow-glow);
}
.video-card .cap{font-size:0.88rem;color:var(--ink-dim);max-width:16rem;}
.video-card .tag{
  position:absolute; top:0.8rem; right:0.8rem;
  font-family:'IBM Plex Mono';font-size:0.64rem;letter-spacing:0.06em;
  color:var(--accent-bright);text-transform:uppercase;
  background:color-mix(in srgb, var(--accent) 16%, var(--surface));
  padding:0.25rem 0.55rem;border-radius:99px;
}

/* ===== How it works ===== */
.steps{display:flex;flex-direction:column;gap:0;}
.step{
  display:grid;grid-template-columns:3.2rem 1fr;gap:1.1rem;
  padding:1.25rem 0;
  border-bottom:1px solid var(--line);
}
.step:first-child{padding-top:0;}
.step:last-child{border-bottom:none;padding-bottom:0;}
.step-num{
  font-family:'Big Shoulders Display';font-weight:900;font-size:2.1rem;
  color:var(--accent); line-height:1.1;
}
.step h3{font-family:'Work Sans';text-transform:none;font-weight:700;font-size:1.08rem;letter-spacing:0;color:var(--ink);}
.step p{font-size:0.94rem;margin-top:0.35rem;max-width:none;}

/* ===== Service area ===== */
.area-chips{display:flex;flex-wrap:wrap;gap:0.6rem;margin-top:1.3rem;}
.chip{
  font-family:'IBM Plex Mono';font-size:0.82rem;
  background:var(--surface);
  border:1px solid var(--line);
  padding:0.48rem 0.9rem;
  border-radius:99px;
  color:var(--ink-dim);
}
.chip.home{border-color:var(--accent); color:var(--accent-bright); background:color-mix(in srgb, var(--accent) 12%, var(--surface));}

/* ===== Footer ===== */
footer{ padding:2.6rem 0 6.5rem; background:var(--ground-2); }
.foot-grid{display:flex;flex-direction:column;gap:1.4rem;}
.foot-brand{font-family:'Big Shoulders Display';font-weight:800;font-size:1.3rem;color:var(--ink);}
.foot-brand span{color:var(--accent-bright);}
.foot-line{font-size:0.9rem;color:var(--ink-dim);}
.foot-nav{display:flex;flex-wrap:wrap;gap:0.4rem 1.1rem;}
.foot-nav a{
  font-family:'IBM Plex Mono';font-size:0.76rem;letter-spacing:0.04em;
  text-transform:uppercase;color:var(--ink-dim);text-decoration:none;
}
.foot-nav a:hover{color:var(--accent-bright);}
.foot-tag{
  font-size:0.85rem;color:var(--ink-muted);
  border-top:1px solid var(--line);padding-top:1.2rem;margin-top:0.5rem;
  max-width:none;
}
.social-row{display:flex;gap:0.7rem;}
.social-row a{
  width:2.5rem;height:2.5rem;border-radius:10px;
  border:1px solid var(--line-strong);
  display:flex;align-items:center;justify-content:center;
  color:var(--ink-dim);
  transition:border-color .15s ease, color .15s ease, background .15s ease;
}
.social-row a:hover{border-color:var(--accent);color:var(--accent-bright); background:color-mix(in srgb, var(--accent) 10%, transparent);}

/* ===== Sticky mobile call bar ===== */
.mobile-bar{
  position:fixed; left:0.7rem; right:0.7rem; bottom:0.7rem; z-index:50;
  background:color-mix(in srgb, var(--surface-2) 92%, transparent);
  border:1px solid var(--line-strong);
  border-radius:16px;
  padding:0.7rem 0.9rem calc(0.7rem + env(safe-area-inset-bottom));
  display:flex; gap:0.8rem; align-items:center;
  box-shadow:0 12px 32px -8px rgba(0,0,0,.6);
  backdrop-filter:blur(14px);
  transform:translateY(140%);
  transition:transform 0.3s ease;
}
.mobile-bar.show{transform:translateY(0);}
.mobile-bar .hrs{
  font-family:'IBM Plex Mono';font-size:0.72rem;color:var(--ink-dim);flex:1;min-width:0;
  line-height:1.3;
}
.mobile-bar .hrs b{color:var(--ink);display:block;font-size:0.78rem;}
.mobile-bar .btn{flex:none;}

.icon{width:26px;height:26px;}

/* ===== Booking form ===== */
.book-section{
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 65%),
    var(--ground);
}
.book-card{
  background:linear-gradient(160deg, var(--surface), var(--ground-2));
  border:1px solid var(--line-strong);
  border-radius:18px;
  padding:1.8rem 1.5rem;
  box-shadow:var(--shadow-2);
}
.book-progress{
  display:flex; align-items:center; gap:0.6rem;
  margin-bottom:1.3rem;
}
.book-progress .dot{
  width:1.6rem;height:1.6rem;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:'IBM Plex Mono';font-size:0.72rem;font-weight:600;
  border:1px solid var(--line-strong); color:var(--ink-muted);
  flex:none;
}
.book-progress .dot.active{background:linear-gradient(180deg, var(--accent-bright), var(--accent));color:var(--accent-ink);border-color:transparent;}
.book-progress .dot.done{border-color:var(--accent);color:var(--accent-bright);}
.book-progress .track{height:1px;flex:1;background:var(--line-strong);}
.book-progress .label{
  font-family:'IBM Plex Mono';font-size:0.72rem;letter-spacing:0.06em;
  text-transform:uppercase;color:var(--ink-muted);
}
.book-step[hidden]{display:none;}
.book-step-actions{display:flex;flex-direction:column;gap:0.8rem;margin-top:1.4rem;}
.book-step-actions .btn{width:100%;}
@media (min-width:480px){
  .book-step-actions{flex-direction:row;}
  .book-step-actions .btn{flex:1;width:auto;}
  .book-step-actions .btn-ghost{flex:0 0 auto;}
}
.book-row{display:grid;grid-template-columns:1fr;gap:1rem;}
@media (min-width:600px){ .book-row.two{grid-template-columns:1fr 1fr;} }
.field{display:flex;flex-direction:column;gap:0.4rem;margin-top:1rem;}
.field[hidden]{display:none;}
.book-row .field{margin-top:0;}
.field label{
  font-family:'IBM Plex Mono';font-size:0.7rem;letter-spacing:0.08em;
  text-transform:uppercase;color:var(--ink-muted);
}
.field input[type="text"],
.field input[type="tel"],
.field input[type="email"],
.field input[type="number"],
.field select,
.field textarea{
  background:var(--ground-2);
  border:1px solid var(--line-strong);
  border-radius:10px;
  padding:0.85rem 0.9rem;
  color:var(--ink);
  font-family:'Work Sans',sans-serif;
  font-size:0.98rem;
  width:100%;
  appearance:none;
  -webkit-appearance:none;
}
.field select{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFA94D' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat;
  background-position:right 0.8rem center;
  background-size:1.1rem;
  padding-right:2.4rem;
}
.field textarea{resize:vertical;min-height:5rem;font-family:'Work Sans',sans-serif;line-height:1.5;}
.field input:focus,
.field select:focus,
.field textarea:focus{
  outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
.field input::placeholder, .field textarea::placeholder{color:var(--ink-muted);}

.day-toggle{display:flex;gap:0.7rem;flex-wrap:wrap;}
.day-toggle input{position:absolute;opacity:0;width:0;height:0;}
.day-toggle label{
  display:inline-flex;align-items:center;gap:0.4rem;
  padding:0.75rem 1.2rem;
  border:1px solid var(--line-strong);
  border-radius:999px;
  font-family:'IBM Plex Mono';font-size:0.88rem;color:var(--ink-dim);
  cursor:pointer; user-select:none;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.day-toggle input:checked + label{
  background:linear-gradient(180deg, var(--accent-bright), var(--accent));
  color:var(--accent-ink); border-color:transparent; font-weight:600;
}
.day-toggle input:focus-visible + label{ outline:2px solid var(--focus); outline-offset:2px; }

.book-submit{margin-top:1.4rem;}
.book-fineprint{
  margin-top:0.8rem; font-size:0.8rem; color:var(--ink-muted);
  display:flex; align-items:center; gap:0.4rem; flex-wrap:wrap;
}
.book-success{
  text-align:center;
  padding:2.2rem 1.5rem;
  background:linear-gradient(160deg, var(--surface), var(--ground-2));
  border:1px solid var(--line-strong);
  border-radius:18px;
  box-shadow:var(--shadow-2);
}
.book-success .success-check{
  display:flex; align-items:center; justify-content:center;
  width:3rem; height:3rem; margin:0 auto 1rem;
  border-radius:50%;
  background:linear-gradient(180deg, var(--accent-bright), var(--accent));
  color:var(--accent-ink);
  font-size:1.3rem; font-weight:700;
  box-shadow:var(--shadow-glow);
}
.book-success .success-title{
  display:block;
  font-family:'Big Shoulders Display', 'Arial Narrow', sans-serif;
  font-weight:900; font-size:1.6rem; letter-spacing:0.005em;
  color:var(--ink); margin-bottom:0.7rem;
}
.book-success .success-copy{
  max-width:26rem; margin:0 auto 0.4rem; color:var(--ink-dim); font-size:0.96rem;
}
.book-success .success-actions{
  display:flex; gap:0.7rem; flex-wrap:wrap; justify-content:center;
  margin-top:1.3rem;
}