/* Palette is sampled from the booth photograph: amber stage bar, deep green
   wall wash, near-black with a green cast. One committed accent, no second. */
:root{
  --bg:#070a09;--panel:#0d1a13;--surface:rgba(18,26,21,.72);
  --border:#1e2a22;--border-soft:#2f4136;
  --ink:#f4f1ea;--muted:#8f8f84;--dim:#79796f;
  --amber:#ff9436;--amber-hi:#ffab5e;--off:#4a5049;

  --s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:24px;
  --s-6:32px;--s-7:48px;--s-8:72px;--s-9:112px;

  --fs-sm:14px;--fs-md:16px;--fs-lg:18px;

  --z-sticky:100;--z-dock:150;--z-drawer:200;

  --topbar-h:60px;
  --gutter:40px;
  --shell:1360px;
  --measure:64ch;

  --ease:cubic-bezier(.22,1,.36,1);
  --dur-fast:140ms;--dur:240ms;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:'Space Grotesk',sans-serif;font-size:var(--fs-md);line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
a{color:var(--amber);text-decoration:none}
img{max-width:100%;display:block}
figure{margin:0}
:where(h1,h2,h3){text-wrap:balance}
:where(p){text-wrap:pretty}
.amber{color:var(--amber)}

h1{
  font-family:'Michroma',sans-serif;font-weight:400;
  font-size:clamp(32px,7.4vw,86px);line-height:1.04;letter-spacing:-.005em;
  text-transform:uppercase;margin:var(--s-5) 0 0;overflow-wrap:break-word;
}
.section-title{
  font-family:'Michroma',sans-serif;font-weight:400;
  font-size:clamp(18px,2vw,24px);line-height:1.25;
  text-transform:uppercase;margin:0;
}
h3{font-size:var(--fs-lg);font-weight:600;line-height:1.3;margin:0}

:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
.btn-amber:focus-visible,.section-cta :focus-visible{outline-color:var(--ink)}
.section-cta .btn-dark:focus-visible{outline-color:var(--bg)}

.shell{max-width:var(--shell);margin-inline:auto;padding-inline:var(--gutter)}

.skiplink{
  position:absolute;left:var(--gutter);top:-100px;z-index:var(--z-drawer);
  background:var(--amber);color:var(--bg);padding:var(--s-3) var(--s-4);font-weight:600;
  transition:top var(--dur) var(--ease);
}
.skiplink:focus{top:var(--s-2)}

@keyframes ledPulse{0%,100%{opacity:1}50%{opacity:.3}}
/* Transform only, never opacity: a non-scrolling renderer (print, headless,
   background tab) must still show fully legible content. */
@keyframes rise{from{transform:translateY(26px)}to{transform:none}}
@keyframes drawProgress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes driftUp{from{transform:translateY(3%) scale(1.06)}to{transform:translateY(-3%) scale(1.06)}}

/* Scroll-driven only. Everything below is a no-op without support, and the
   default state is already the finished state, so nothing can ship invisible. */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .reveal{animation:rise linear both;animation-timeline:view();animation-range:entry 5% cover 30%}
    .hero-media img{animation:driftUp linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
  }
}
@supports (animation-timeline:scroll()){
  @media (prefers-reduced-motion:no-preference){
    .progress{animation:drawProgress linear both;animation-timeline:scroll(root)}
  }
}

.btn{
  display:inline-block;padding:15px 28px;font-size:var(--fs-sm);font-weight:600;cursor:pointer;
  border:1px solid transparent;text-align:center;
  transition:background-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease),
             border-color var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease);
}
.btn:active{transform:translateY(1px)}
/* The notch marks a primary action and nothing else, so it stays a signifier. */
.btn-amber,.btn-dark{
  clip-path:polygon(0 0,calc(100% - 13px) 0,100% 13px,100% 100%,13px 100%,0 calc(100% - 13px));
}
.btn-amber{background:var(--amber);color:var(--bg)}
.btn-amber:hover{background:var(--amber-hi)}
.btn-outline{border-color:var(--border-soft);color:var(--ink);font-weight:500}
.btn-outline:hover{border-color:var(--amber);color:var(--amber)}
.btn-dark{background:var(--bg);color:var(--ink)}
.btn-dark:hover{background:#111713}
.btn-ghost{border-color:rgba(7,10,9,.6);color:var(--bg);font-weight:600}
.btn-ghost:hover{border-color:var(--bg);background:rgba(7,10,9,.08)}
.btn-block{width:100%;display:block}
.btn[aria-disabled="true"],.btn:disabled{
  background:var(--panel);color:var(--dim);border-color:var(--border);
  pointer-events:none;transform:none;clip-path:none;
}

.topbar{
  position:sticky;top:0;z-index:var(--z-sticky);display:flex;align-items:center;gap:var(--s-6);
  padding:0 var(--gutter);height:var(--topbar-h);border-bottom:1px solid var(--border);
  background:rgba(7,10,9,.92);backdrop-filter:blur(10px);
}
.logo{font-family:'Michroma',sans-serif;font-size:13px;letter-spacing:.08em;color:var(--ink)}
.navlinks{flex:1;display:flex;gap:var(--s-5);font-size:var(--fs-sm);color:var(--muted)}
.navlinks a{color:inherit;transition:color var(--dur-fast) var(--ease)}
.navlinks a:hover,.navlinks a[aria-current="true"]{color:var(--amber)}
.progress{
  position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--amber);
  transform:scaleX(0);transform-origin:0 50%;
}

/* Availability is real state a visitor acts on, so the indicator earns its place. */
.status-pill{display:flex;align-items:center;gap:var(--s-2);margin:0;font-size:var(--fs-sm);color:var(--muted)}
.led{width:7px;height:7px;border-radius:50%;background:var(--amber);flex:none;
  animation:ledPulse 2.4s ease-in-out infinite}
body[data-status="in-session"] .led{background:var(--amber-hi)}
body[data-status="offline"] .led{background:var(--off);animation:none}

.navtoggle{
  display:none;background:none;border:1px solid var(--border-soft);color:var(--ink);
  font-size:18px;line-height:1;cursor:pointer;width:44px;height:44px;
}
.navtoggle:hover{border-color:var(--amber);color:var(--amber)}

/* Hero: asymmetric split, photograph bled to the right viewport edge. */
.hero{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,42vw);
  align-items:center;gap:var(--s-8);
  min-height:min(86vh,880px);
  padding-left:max(var(--gutter),calc((100% - var(--shell)) / 2 + var(--gutter)));
}
.hero-type{padding-block:var(--s-8);max-width:760px}
.kicker{margin:0;font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--amber)}
.hero-copy{margin:var(--s-6) 0 0;max-width:44ch;font-size:var(--fs-lg);line-height:1.6;color:var(--muted)}
.hero-ctas{display:flex;gap:var(--s-3);align-items:center;flex-wrap:wrap;margin-top:var(--s-6)}
.hero-media{position:relative;align-self:stretch;overflow:hidden;background:var(--panel)}
.hero-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 45%;
  transform:scale(1.06)}
/* Short blend into the type column only. Any longer and it sits over Sam. */
.hero-media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,var(--bg),rgba(7,10,9,.4) 12%,transparent 34%);
}

/* Broken grid: heading sits in a narrow left rail, content runs wide beside it. */
.section{max-width:var(--shell);margin-inline:auto;padding:var(--s-9) var(--gutter);
  display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);
  column-gap:var(--s-8);row-gap:var(--s-5);align-items:start;
  scroll-margin-top:var(--topbar-h);
}
.section > .section-title{grid-column:1;position:sticky;top:calc(var(--topbar-h) + var(--s-6))}
.section > *:not(.section-title){grid-column:2}
.deck{margin:0;max-width:var(--measure);color:var(--muted)}

/* Services are a spec list, not a card grid: the lead offer is set larger and
   the rest are hairline rows, so hierarchy replaces four equal boxes. */
.services{margin:0;display:grid}
.service{display:grid;grid-template-columns:minmax(190px,1fr) 2fr;gap:var(--s-6);
  padding:var(--s-5) 0;border-top:1px solid var(--border)}
.service:last-child{border-bottom:1px solid var(--border)}
.service dt{font-size:var(--fs-lg);font-weight:600}
.service dd{margin:0;color:var(--muted);max-width:var(--measure)}
.service-meta{display:block;margin-top:var(--s-1);font-family:'JetBrains Mono',monospace;
  font-size:12px;font-weight:400;color:var(--dim)}
.service-lead{border-top:2px solid var(--amber);padding-block:var(--s-6)}
.service-lead dt{font-size:clamp(24px,2.8vw,34px);font-weight:600;line-height:1.15}
.service-lead .service-meta{color:var(--amber)}
.service-lead dd{font-size:var(--fs-lg);color:var(--ink)}

.section-panel{background:var(--panel);border-block:1px solid var(--border);padding-block:var(--s-9)}
.section-panel .section-title{margin-bottom:var(--s-4)}
.patchgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--s-7);margin-top:var(--s-8)}
.patch h3{padding-bottom:var(--s-3);border-bottom:1px solid var(--border-soft)}
.chips{display:flex;flex-wrap:wrap;gap:var(--s-2);margin:var(--s-4) 0 0;padding:0;list-style:none}
.chips li{font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--muted);
  border:1px solid var(--border-soft);padding:5px 10px}

/* Numbers survive in exactly one place: this is a genuinely ordered sequence. */
.chain{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:var(--s-6);
  margin:0;padding:0;list-style:none}
.chain-step{border-top:1px solid var(--border);padding-top:var(--s-4)}
.chain-step-last{border-top-color:var(--amber)}
.chain-num{display:block;font-family:'Michroma',sans-serif;font-size:clamp(38px,4.4vw,58px);
  line-height:1;color:#3d5245}
.chain-step-last .chain-num{color:var(--amber)}
.chain-step h3{margin-top:var(--s-4)}
.chain-step p{margin:var(--s-2) 0 0;color:var(--muted);max-width:var(--measure)}

/* The one drenched surface in the middle of the page. */
.section-operator{background:var(--panel);border-block:1px solid var(--border);padding-block:var(--s-9)}
.operator-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--s-7) var(--s-6);align-items:start}
/* Portrait spans both rows so the left column never leaves a dead quadrant. */
.operator-photo{grid-column:1 / span 5;grid-row:1 / span 2;position:relative;overflow:hidden;
  min-height:560px;align-self:stretch;
  background:var(--bg);border:1px solid var(--border)}
.operator-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 35%}
.operator-copy{grid-column:7 / span 6;grid-row:1;display:flex;flex-direction:column;gap:var(--s-5)}
.operator-lede{margin:0;font-size:clamp(22px,2.8vw,32px);line-height:1.25;font-weight:500;max-width:20ch}
.operator-copy p:not(.operator-lede){margin:0;color:var(--muted);max-width:var(--measure)}
.operator-strip{grid-column:7 / span 6;grid-row:2;position:relative;overflow:hidden;aspect-ratio:7 / 4;
  background:var(--bg);border:1px solid var(--border)}
.operator-strip img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 45%}
.operator-strip figcaption{position:absolute;left:0;right:0;bottom:0;
  padding:var(--s-8) var(--s-4) var(--s-4);font-size:var(--fs-lg);font-weight:500;color:var(--ink);
  background:linear-gradient(180deg,transparent,rgba(7,10,9,.92))}

/* Cards survive only here, where comparing parallel options is the whole job. */
/* Rates break out of the narrow rail: three tiers need room to be compared. */
.section > .pricing{grid-column:1 / -1;margin-top:var(--s-6)}
.pricing{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--s-5)}
.price-card{border:1px solid var(--border);background:var(--surface);padding:var(--s-5);
  display:flex;flex-direction:column;gap:var(--s-3);
  transition:border-color var(--dur) var(--ease)}
.price-card:hover{border-color:var(--border-soft)}
.price-card-featured{border-color:var(--amber);background:rgba(255,148,54,.06);position:relative}
.price-card-featured:hover{border-color:var(--amber)}
.price-badge{position:absolute;top:-1px;right:-1px;margin:0;
  font-family:'JetBrains Mono',monospace;font-size:12px;
  background:var(--amber);color:var(--bg);padding:3px 10px}
.price{margin:0;font-size:36px;font-weight:600;line-height:1}
.price small{font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:400;color:var(--dim)}
.price-card p:not(.price):not(.price-badge){margin:0;color:var(--muted);flex:1}
.price-card .btn{margin-top:var(--s-2)}

/* Drenched: the surface is the color. */
.section-cta{background:var(--amber);color:var(--bg);padding-block:var(--s-9)}
.section-cta .led{background:var(--bg);opacity:.85}
.cta-status{display:flex;align-items:center;gap:var(--s-2);margin:0;font-size:var(--fs-sm);
  color:rgba(7,10,9,.8)}
.cta-title{margin:var(--s-5) 0 0;font-family:'Michroma',sans-serif;font-weight:400;
  font-size:clamp(30px,6.4vw,76px);text-transform:uppercase;line-height:1.06;overflow-wrap:break-word}
.cta-buttons{display:flex;gap:var(--s-3);margin-top:var(--s-7);flex-wrap:wrap}

.footer{border-top:1px solid var(--border);padding-block:var(--s-6) 100px}
.footer p{margin:0;font-size:var(--fs-sm);color:var(--dim);max-width:var(--measure)}

.mobile-cta{display:none;position:fixed;bottom:0;left:0;right:0;z-index:var(--z-dock);gap:var(--s-2);
  padding:var(--s-3) 18px 14px;
  background:linear-gradient(180deg,rgba(7,10,9,0),var(--bg) 40%)}
.mobile-cta .btn{flex:1}

@media (max-width:1080px){
  .section{grid-template-columns:1fr;row-gap:var(--s-6)}
  .section > .section-title{position:static}
  .section > *:not(.section-title){grid-column:1}
  /* Single column: reset the row spans too, or the portrait keeps its 2-row
     span and the strip lands on top of it. */
  .operator-grid{grid-template-columns:1fr}
  .operator-photo,.operator-copy,.operator-strip{grid-column:1;grid-row:auto}
  .operator-photo{min-height:0;aspect-ratio:4 / 5;max-width:min(100%,440px)}
}

@media (max-width:960px){
  :root{--gutter:18px;--fs-md:15px;--s-9:64px;--s-8:48px}
  .status-pill,.topbar .btn-amber{display:none}
  .navtoggle{display:block;margin-left:auto}
  .navlinks{
    position:fixed;top:var(--topbar-h);left:0;right:0;z-index:var(--z-drawer);
    flex-direction:column;gap:0;flex:none;
    background:var(--bg);border-bottom:1px solid var(--border);
    box-shadow:0 18px 40px rgba(0,0,0,.9);
    transform:translateY(-8px);opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease),visibility var(--dur);
  }
  .navlinks a{padding:var(--s-4) var(--gutter);border-bottom:1px solid var(--border)}
  body.nav-open .navlinks{transform:none;opacity:1;visibility:visible;pointer-events:auto}
  .hero{grid-template-columns:1fr;min-height:0;gap:0;padding-left:0}
  .hero-type{padding:var(--s-7) var(--gutter) var(--s-8)}
  .hero-media{aspect-ratio:4 / 5;align-self:auto}
  .hero-media::after{background:linear-gradient(180deg,var(--bg),transparent 26%)}
  .service{grid-template-columns:1fr;gap:var(--s-2)}
  .mobile-cta{display:flex}
  body{padding-bottom:76px}
}

@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;
  }
  .led{opacity:1}
  .btn:active{transform:none}
  .navlinks{transform:none!important}
  .progress{display:none}
}