/* Concept A — deliberately single-theme: a night-time shop under sodium lamps */
  :root{
    color-scheme: dark;
    --night:#0B0D12; --asphalt:#141821; --panel:#1A1F2A; --line:#2A3140;
    --sodium:#FFB547; --sodium-dim:#B9812F; --text:#ECE8DF; --muted:#9097A6;
    --tail:#E0463A; --go:#5FD08A;
    --display:"Big Shoulders Display", "Arial Narrow", Impact, sans-serif;
    --body:"Barlow", "Segoe UI", system-ui, sans-serif;
    --mono:"JetBrains Mono", ui-monospace, Menlo, monospace;
  }
  *{box-sizing:border-box}
  body{background:var(--night);color:var(--text);font:400 17px/1.6 var(--body);margin:0}
  a{color:inherit}
  :focus-visible{outline:2px solid var(--sodium);outline-offset:3px}
  .wrap{max-width:1180px;margin:0 auto;padding-inline:clamp(16px,4vw,40px)}
  .mono{font-family:var(--mono);font-size:12.5px;letter-spacing:.08em;text-transform:uppercase}

  /* nav */
  header.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:10;background:rgba(11,13,18,.88);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
  .nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:14px;flex-wrap:wrap}
  .logo{display:flex;align-items:center;gap:10px;text-decoration:none}
  .logo svg{flex:none}
  .logo b{font:900 26px/1 var(--display);letter-spacing:.04em;text-transform:uppercase}
  .logo b span{color:var(--sodium)}
  .nav nav{display:flex;gap:22px;flex-wrap:wrap}
  .nav nav a{text-decoration:none;color:var(--muted);font-weight:500;font-size:15px}
  .nav nav a:hover{color:var(--text)}
  .btn{display:inline-flex;align-items:center;gap:10px;background:var(--sodium);color:var(--night);font:800 18px/1 var(--display);letter-spacing:.06em;text-transform:uppercase;padding:14px 22px;border:0;border-radius:2px;text-decoration:none;cursor:pointer}
  .btn:hover{background:#FFC870}
  .btn.ghost{background:transparent;color:var(--text);box-shadow:inset 0 0 0 1.5px var(--line)}
  .btn.ghost:hover{box-shadow:inset 0 0 0 1.5px var(--sodium)}

  /* hero: a roll-up door half raised, light spilling out */
  .hero{--door:clamp(120px,21vw,215px);position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
  .door{position:absolute;inset:0 0 auto 0;height:var(--door);background:
      repeating-linear-gradient(180deg,#232937 0 26px,#1B202B 26px 28px,#2B3242 28px 30px);
    box-shadow:0 10px 30px rgba(0,0,0,.6);animation:lift 1.6s cubic-bezier(.2,.7,.2,1) both}
  .door::after{content:"";position:absolute;left:50%;bottom:10px;width:90px;height:8px;margin-left:-45px;background:#0E1118;border-radius:2px}
  @keyframes lift{from{height:calc(var(--door) + 140px)}}
  .spill{position:absolute;inset:0;background:radial-gradient(120% 70% at 50% 100%,rgba(255,181,71,.22),transparent 60%)}
  .hero .wrap{position:relative;padding-block:clamp(170px,26vw,260px) 64px;display:grid;grid-template-columns:1.3fr .9fr;gap:40px;align-items:end}
  .status{display:inline-flex;align-items:center;gap:10px;padding:8px 14px;border:1px solid var(--line);background:rgba(20,24,33,.8);border-radius:99px}
  .dot{width:9px;height:9px;border-radius:50%;background:var(--muted)}
  .dot.open{background:var(--go);box-shadow:0 0 12px var(--go)}
  .dot.closed{background:var(--tail);box-shadow:0 0 12px var(--tail)}
  h1{font:900 clamp(64px,11vw,148px)/.86 var(--display);text-transform:uppercase;margin:22px 0 20px;letter-spacing:.005em;text-wrap:balance}
  h1 em{font-style:normal;color:var(--sodium)}
  .lede{font-size:clamp(18px,2vw,21px);color:#C9C5BC;max-width:34ch;margin:0 0 28px}
  .cta-row{display:flex;gap:12px;flex-wrap:wrap}
  .ticket{background:var(--panel);border:1px solid var(--line);padding:22px;font-family:var(--mono);font-size:14px;position:relative}
  .ticket::before{content:"";position:absolute;inset:-1px -1px auto -1px;height:6px;background:repeating-linear-gradient(90deg,var(--sodium) 0 14px,transparent 14px 22px)}
  .ticket h3{font:800 22px/1 var(--display);letter-spacing:.06em;text-transform:uppercase;margin:6px 0 14px}
  .ticket dl{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;margin:0}
  .ticket dt{color:var(--muted)} .ticket dd{margin:0;text-align:right}
  .ticket .today{color:var(--sodium)}

  section{padding-block:clamp(64px,9vw,110px);border-bottom:1px solid var(--line)}
  .kicker{color:var(--sodium)}
  h2{font:800 clamp(40px,6vw,72px)/.92 var(--display);text-transform:uppercase;margin:10px 0 18px;text-wrap:balance}
  .sec-head{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap;margin-bottom:40px}
  .sec-head p{color:var(--muted);max-width:44ch;margin:0}

  /* services as a shop labor sheet */
  .sheet{border-top:2px solid var(--text)}
  .row{display:grid;grid-template-columns:90px 1.2fr 1.6fr 140px;gap:20px;align-items:baseline;padding:22px 4px;border-bottom:1px solid var(--line);transition:background .2s}
  .row:hover{background:var(--asphalt)}
  .row .code{font-family:var(--mono);color:var(--sodium-dim);font-size:13px}
  .row h4{font:800 28px/1 var(--display);text-transform:uppercase;letter-spacing:.02em;margin:0}
  .row p{margin:0;color:var(--muted);font-size:15.5px}
  .row .price{font-family:var(--mono);text-align:right;font-size:14px}
  .row .price b{display:block;font:800 26px/1 var(--display);color:var(--text);letter-spacing:.02em}

  /* process */
  .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--line)}
  .step{padding:26px;border-right:1px solid var(--line)}
  .step:last-child{border-right:0}
  .step .n{font:900 64px/1 var(--display);color:var(--sodium)}
  .step h4{font:800 24px/1.05 var(--display);text-transform:uppercase;margin:12px 0 8px}
  .step p{margin:0;color:var(--muted);font-size:15.5px}

  /* night drop */
  #night-drop{overflow-x:clip}
  .drop{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
  .envelope{background:var(--panel);border:1px dashed var(--sodium-dim);padding:28px;font-family:var(--mono);font-size:14px;line-height:2}
  .envelope .line{display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line)}
  .envelope .line span:last-child{color:var(--muted)}
  .drop ul{padding:0;margin:20px 0 0;list-style:none;display:grid;gap:12px}
  .drop li{display:flex;gap:12px}
  .drop li::before{content:"";flex:none;width:10px;height:10px;margin-top:9px;background:var(--sodium)}

  /* reviews */
  .quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
  blockquote{margin:0;padding:24px 0 0;border-top:2px solid var(--sodium)}
  blockquote p{font-size:19px;margin:0 0 16px}
  blockquote cite{font-style:normal;color:var(--muted)}
  .note{margin-top:24px;color:var(--muted)}

  /* booking */
  .book{display:grid;grid-template-columns:.9fr 1.1fr;gap:48px}
  .hours{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:14px;margin-top:24px;font-variant-numeric:tabular-nums}
  .hours td{padding:10px 0;border-bottom:1px solid var(--line)}
  .hours td:last-child{text-align:right}
  .hours tr.is-today td{color:var(--sodium)}
  form{background:var(--panel);border:1px solid var(--line);padding:clamp(20px,3vw,32px);display:grid;grid-template-columns:1fr 1fr;gap:16px}
  form .full{grid-column:1/-1}
  label{display:grid;gap:6px;font:600 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
  input,select,textarea{font:400 16px/1.4 var(--body);color:var(--text);background:var(--night);border:1px solid var(--line);border-radius:2px;padding:12px;width:100%}
  input:focus,select:focus,textarea:focus{border-color:var(--sodium);outline:none}
  textarea{min-height:96px;resize:vertical}
  .sent{grid-column:1/-1;color:var(--go);font-family:var(--mono);font-size:14px;margin:0}

  footer{padding-block:40px;color:var(--muted);font-size:14px}
  footer .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

  @media (max-width:900px){
    .hero .wrap,.drop,.book{grid-template-columns:1fr}
    .steps{grid-template-columns:1fr 1fr}
    .step:nth-child(2){border-right:0}
    .step:nth-child(-n+2){border-bottom:1px solid var(--line)}
    .quotes{grid-template-columns:1fr}
    .row{grid-template-columns:1fr auto;gap:6px 16px}
    .row .code{grid-column:1/-1}
    .row p{grid-column:1/-1;order:3}
    .nav nav{display:none}
  }
  @media (max-width:520px){
    .logo b{font-size:20px}
    .nav .btn{font-size:15px;padding:11px 14px;white-space:nowrap}
    .nav .wrap{flex-wrap:nowrap}
    .steps{grid-template-columns:1fr}
    .step{border-right:0!important;border-bottom:1px solid var(--line)}
    form{grid-template-columns:1fr}
  }

  /* ---------- motion ---------- */
  .spill{animation:flicker 2.4s linear both}
  @keyframes flicker{0%{opacity:0}6%{opacity:.8}9%{opacity:.1}15%{opacity:.9}18%{opacity:.25}26%{opacity:1}29%{opacity:.6}36%,100%{opacity:1}}
  .sweep{position:absolute;inset:0;pointer-events:none;background:linear-gradient(100deg,transparent 42%,rgba(255,228,180,.09) 50%,transparent 58%);background-size:260% 100%;background-position:160% 0;animation:sweep 10s ease-in-out 2s infinite}
  @keyframes sweep{0%{background-position:160% 0}35%,100%{background-position:-60% 0}}
  .hero .status,.hero h1 .ln,.hero .lede,.hero .cta-row,.hero .ticket{display:inline-block;animation:rise .9s cubic-bezier(.2,.7,.2,1) backwards}
  .hero h1 .ln{display:inline-block}
  .hero .status{display:inline-flex;animation-delay:.9s}
  .hero h1 .ln:nth-child(1){animation-delay:1.05s}
  .hero h1 .ln:nth-child(2){animation-delay:1.2s}
  .hero .lede{display:block;animation-delay:1.35s}
  .hero .cta-row{display:flex;animation-delay:1.5s}
  .hero .ticket{display:block;animation-delay:1.65s}
  @keyframes rise{from{opacity:0;transform:translateY(28px)}}
  .dot.open{animation:pulse 2s ease-out infinite}
  @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(95,208,138,.7)}100%{box-shadow:0 0 0 12px rgba(95,208,138,0)}}
  .ticket::before{background-size:22px 6px;transition:none}
  .ticket:hover::before{animation:crawl .6s linear infinite}
  @keyframes crawl{to{background-position:22px 0}}
  .btn{transition:background .2s,transform .2s,box-shadow .2s}
  .btn:hover{transform:translateY(-2px)}
  .btn:active{transform:translateY(0)}
  .btn .arr{display:inline-block;transition:transform .25s}
  .btn:hover .arr{transform:translateX(5px)}

  /* scroll reveals — elements start only slightly faded, never hidden */
  .rv{transition:transform .8s cubic-bezier(.2,.7,.2,1),opacity .8s,background .2s;transition-delay:calc(var(--i,0)*70ms),calc(var(--i,0)*70ms),0s}
  .rv.pre{transform:translateY(28px);opacity:.35}
  .row.rv.pre{transform:translateX(-28px)}
  .row{position:relative}
  .row::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--sodium);transform:scaleY(0);transition:transform .3s}
  .row:hover::before{transform:scaleY(1)}
  .row h4{transition:transform .3s,color .3s}
  .row:hover h4{transform:translateX(8px);color:var(--sodium)}
  .steps{position:relative}
  .steps::after{content:"";position:absolute;left:0;right:0;top:-1px;height:3px;background:var(--sodium);transform-origin:left;transition:transform 1.6s cubic-bezier(.4,0,.2,1) .2s}
  .steps.pre::after{transform:scaleX(0)}
  .step{transition:transform .7s cubic-bezier(.2,.7,.2,1),opacity .7s;transition-delay:calc(.25s + var(--i,0)*.28s)}
  .steps.pre .step{transform:translateY(24px);opacity:.35}
  .step .n{display:inline-block;transition:transform .3s}
  .step:hover .n{transform:rotate(-8deg) scale(1.1)}
  .envelope{position:relative}
  .stamp{position:absolute;right:16px;top:-16px;background:var(--panel);border:2px solid var(--tail);color:var(--tail);font:600 12px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;text-align:center;padding:6px 10px;transform:rotate(-8deg);transition:transform .45s cubic-bezier(.3,1.6,.5,1) 1s,opacity .2s 1s}
  .envelope.pre .stamp{transform:rotate(-2deg) scale(2);opacity:0}
  .envelope .line{transition:opacity .5s;transition-delay:calc(.2s + var(--i,0)*90ms)}
  .envelope.pre .line{opacity:.2}
  blockquote{transition:border-color .3s}
  blockquote:hover{border-color:var(--text)}
  .sent:not([hidden]){animation:rise .5s both}

  @media (prefers-reduced-motion:reduce){
    *,*::before,*::after{animation:none!important;transition:none!important}
  }

  .sent.err,.ok.err{color:#E0463A}