/* ==========================================================================
   J. Davey Custom Guitars
   Palette sampled from his own studio photographs: black backdrop, maple neck,
   bone pickguard, copper and racing green bodies.
   Mobile first. No oklch (breaks on Chrome < 111). No em-dashes anywhere.
   ========================================================================== */

:root{
  --ink:      #08090A;
  --ink-2:    #101215;
  --ink-3:    #191C21;
  --line:     #272B31;
  --line-2:   #363B43;

  --maple:    #D8A25A;
  --maple-hi: #F2C88C;
  --maple-dim:#AD8244;

  --copper:   #D96C31;
  --racing:   #4FA97A;
  --chrome:   #B9BFC6;

  --bone:     #EDE7DA;
  --bone-2:   #C3BEB3;
  --muted:    #A0A6AD;

  --shell: min(1180px, 100% - 40px);
  --shell-wide: min(1400px, 100% - 40px);
  --r: 4px;
  --r-lg: 10px;

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);

  --f-display: "Instrument Serif", "Times New Roman", serif;
  --f-body: "Inter Tight", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-mono: "DM Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --f-script: "Yellowtail", "Brush Script MT", cursive;

  --header-h: 58px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--ink);
  color:var(--bone);
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }
button{ font:inherit; color:inherit; }

::selection{ background:var(--maple); color:var(--ink); }

/* ---------- type scale ---------- */

h1,h2,h3,h4{ margin:0; font-weight:400; letter-spacing:-0.01em; }

.display{
  font-family:var(--f-display);
  font-weight:400;
  line-height:1.02;
  letter-spacing:-0.018em;
  color:var(--bone);
}
.d1{ font-size:clamp(2.6rem, 11.5vw, 6.4rem); }
.d2{ font-size:clamp(2.1rem, 8.6vw, 4.2rem); }
.d3{ font-size:clamp(1.7rem, 6.4vw, 2.7rem); }
.d4{ font-size:clamp(1.35rem, 5vw, 1.9rem); line-height:1.14; }

.display em{ font-style:italic; color:var(--maple); }

.lede{
  font-size:clamp(1.06rem, 4.2vw, 1.28rem);
  line-height:1.55;
  color:var(--bone-2);
  max-width:60ch;
}
p{ margin:0 0 1.05em; }
p:last-child{ margin-bottom:0; }
.muted{ color:var(--muted); }

/* the measured voice: prices, gauges, hours, serials */
.spec{
  font-family:var(--f-mono);
  font-size:.735rem;
  letter-spacing:.02em;
  color:var(--maple);
  font-weight:500;
}
.spec-dim{ color:var(--muted); }

.price{
  font-family:var(--f-mono);
  font-weight:500;
  color:var(--maple-hi);
  font-size:1.02rem;
  letter-spacing:-0.01em;
}

.rule{ height:1px; background:var(--line); border:0; margin:0; }

/* ---------- layout ---------- */

.shell{ width:var(--shell); margin-inline:auto; }
.shell-wide{ width:var(--shell-wide); margin-inline:auto; }

section{ position:relative; }
.band{ padding:clamp(56px, 13vw, 130px) 0; }
.band-tight{ padding:clamp(40px, 9vw, 84px) 0; }
.band-ink2{ background:var(--ink-2); }

.stack > * + *{ margin-top:1.1rem; }
.stack-lg > * + *{ margin-top:2rem; }

.grid{ display:grid; gap:14px; }
@media (min-width:720px){
  .g2{ grid-template-columns:repeat(2,1fr); gap:20px; }
  .g3{ grid-template-columns:repeat(3,1fr); gap:20px; }
}
@media (min-width:1000px){
  .g4{ grid-template-columns:repeat(4,1fr); gap:20px; }
}
@media (min-width:720px) and (max-width:999px){
  .g4{ grid-template-columns:repeat(2,1fr); gap:20px; }
}

/* ---------- section heading ---------- */

.head{ margin-bottom:clamp(26px, 6vw, 48px); }
.head .spec{ display:block; margin-bottom:.85rem; }
.head .lede{ margin-top:1rem; }

/* ---------- buttons ---------- */

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  min-height:52px; padding:0 1.4rem;
  border-radius:var(--r);
  font-weight:600; font-size:.96rem; letter-spacing:.005em;
  text-decoration:none; border:1px solid transparent;
  cursor:pointer;
  transition:background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
.btn-primary{ background:var(--maple); color:var(--ink); }
.btn-primary:hover{ background:var(--maple-hi); }
.btn-ghost{ border-color:var(--line-2); color:var(--bone); background:transparent; }
.btn-ghost:hover{ border-color:var(--maple); color:var(--maple-hi); }
.btn-block{ width:100%; }
.btn:active{ transform:translateY(1px); }
.btn:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible{
  outline:2px solid var(--maple-hi); outline-offset:3px;
}

.btn-row{ display:flex; flex-direction:column; gap:10px; }
@media (min-width:560px){ .btn-row{ flex-direction:row; flex-wrap:wrap; } .btn-row .btn{ flex:0 1 auto; } }

/* ---------- the wordmark ----------
   Set in Yellowtail rather than traced from his blue web logo. That logo is a
   3D shaded script whose letter counters are not recoverable from the bitmap,
   so a trace of it fills in the D, a, e and y and reads as one blob. The
   traced path is still in assets/logo-path.txt for reference.              */
.wordmark{
  font-family:var(--f-script);
  font-weight:400; line-height:1; white-space:nowrap;
  display:inline-block; letter-spacing:0;
}

/* ---------- header ---------- */

.hdr{
  position:sticky; top:0; z-index:60;
  height:var(--header-h);
  display:flex; align-items:center;
  background:rgba(8,9,10,.72);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.hdr.is-stuck{ border-bottom-color:var(--line); background:rgba(8,9,10,.92); }
.hdr .shell-wide{ display:flex; align-items:center; justify-content:space-between; gap:16px; }

.brand{ display:flex; align-items:baseline; gap:.62rem; text-decoration:none; }
.brand .wordmark{
  font-size:1.75rem; color:var(--bone);
  transition:color .25s var(--ease);
  padding-bottom:.12em;   /* the y descender needs room in a 58px bar */
}
.brand:hover .wordmark{ color:var(--maple-hi); }
.brand-sub{
  display:none; font-family:var(--f-mono); font-size:.6rem; color:var(--muted);
  letter-spacing:.14em; padding-left:.6rem; border-left:1px solid var(--line);
}
@media (min-width:520px){ .brand-sub{ display:block; } }

.nav-desk{ display:none; }
@media (min-width:1000px){
  .nav-desk{ display:flex; align-items:center; gap:1.6rem; }
  .nav-desk a{
    text-decoration:none; font-size:.9rem; color:var(--bone-2);
    position:relative; padding:.2rem 0; transition:color .2s var(--ease);
  }
  .nav-desk a::after{
    content:""; position:absolute; left:0; right:0; bottom:-2px; height:1px;
    background:var(--maple); transform:scaleX(0); transform-origin:left;
    transition:transform .3s var(--ease);
  }
  .nav-desk a:hover{ color:var(--bone); }
  .nav-desk a:hover::after, .nav-desk a[aria-current="page"]::after{ transform:scaleX(1); }
  .nav-desk a[aria-current="page"]{ color:var(--maple); }
}

.hdr-cta{ display:none; }
@media (min-width:1000px){
  .hdr-cta{ display:inline-flex; min-height:40px; font-size:.87rem; padding:0 1rem; }
}

.burger{
  width:44px; height:44px; margin-right:-10px;
  display:grid; place-items:center;
  background:none; border:0; cursor:pointer;
}
.burger span{
  display:block; width:22px; height:1.5px; background:var(--bone);
  transition:transform .32s var(--ease), opacity .2s var(--ease);
}
.burger span + span{ margin-top:6px; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7.5px) rotate(-45deg); }

/* declared after the base rule, or the base display:grid wins on desktop */
@media (min-width:1000px){ .burger{ display:none; } }

/* ---------- mobile menu sheet ---------- */

.sheet{
  position:fixed; inset:0; z-index:55;
  background:var(--ink);
  padding:calc(var(--header-h) + 28px) 20px 32px;
  display:flex; flex-direction:column;
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity .32s var(--ease), transform .32s var(--ease), visibility .32s;
  overflow-y:auto;
}
.sheet.is-open{ opacity:1; visibility:visible; transform:none; }
.sheet nav{ display:flex; flex-direction:column; }
.sheet nav a{
  font-family:var(--f-display); font-size:clamp(1.9rem,8.4vw,2.6rem);
  line-height:1.1; text-decoration:none; color:var(--bone);
  padding:.42rem 0; border-bottom:1px solid var(--line);
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
}
.sheet nav a .spec{ font-size:.66rem; color:var(--muted); }
.sheet nav a[aria-current="page"]{ color:var(--maple); }
.sheet-foot{ margin-top:auto; padding-top:28px; }
.sheet-foot .btn{ width:100%; }
.sheet-foot .btn + .btn{ margin-top:10px; }
body.menu-open{ overflow:hidden; }

/* ---------- hero ----------
   The wordmark sits under the strings, the way the decal sits under the
   strings on a real headstock. Canvas is transparent and layers between the
   mark and the headline.                                                   */

.hero{
  position:relative;
  min-height:calc(100svh - var(--header-h));
  display:flex; flex-direction:column; justify-content:flex-end;
  padding-bottom:clamp(26px, 6vw, 58px);
  overflow:hidden;
}
.hero-mark{
  position:absolute; left:50%; top:19%; transform:translateX(-50%);
  width:var(--shell); z-index:1; pointer-events:none;
}
.hero-mark .wordmark{ font-size:clamp(3.6rem, 19vw, 5.4rem); color:var(--bone); }
@media (min-width:1000px){
  .hero-mark{ top:16%; }
  .hero-mark .wordmark{ font-size:clamp(5rem, 6.4vw, 7rem); }
}
#strings{
  position:absolute; inset:0; width:100%; height:100%;
  display:block; touch-action:pan-y; z-index:2;
}
.hero-fade{
  position:absolute; left:0; right:0; bottom:0; height:52%;
  background:linear-gradient(to top, var(--ink) 30%, rgba(8,9,10,.92) 52%, rgba(8,9,10,.4) 80%, rgba(8,9,10,0) 100%);
  z-index:3; pointer-events:none;
}
.hero-inner{ position:relative; z-index:4; pointer-events:none; }
.hero-inner a, .hero-inner button{ pointer-events:auto; }

.hero h1{ margin-bottom:.9rem; }
.hero .lede{ max-width:33ch; }
.hero .btn-row{ margin-top:1.5rem; }

.pluck-hint{
  position:absolute; left:50%; top:calc(19% - 30px); transform:translateX(-50%);
  width:var(--shell); z-index:4; pointer-events:none; text-align:left;
  font-family:var(--f-mono); font-size:.68rem; color:var(--muted);
  opacity:0; transition:opacity .9s var(--ease);
}
@media (min-width:1000px){ .pluck-hint{ top:calc(17% - 32px); } }
.pluck-hint.show{ opacity:.85; }
.pluck-hint.gone{ opacity:0; }

/* ---------- open-now strip ---------- */

.status{
  display:inline-flex; align-items:center; gap:.55rem;
  font-family:var(--f-mono); font-size:.74rem; color:var(--bone-2);
}
.status .dot{
  width:7px; height:7px; border-radius:50%; background:var(--muted); flex:none;
}
.status.is-open .dot{ background:#4ADE80; box-shadow:0 0 0 3px rgba(74,222,128,.16); }
.status.is-shut .dot{ background:var(--copper); }

/* ---------- doors (the two front doors) ---------- */

.door{
  display:block; text-decoration:none;
  background:var(--ink-2); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:clamp(22px,5.4vw,34px);
  position:relative; overflow:hidden;
  transition:border-color .35s var(--ease), background .35s var(--ease), transform .35s var(--ease);
}
.door::after{
  content:""; position:absolute; left:0; right:0; top:0; height:2px;
  background:var(--accent, var(--maple));
  transform:scaleX(0); transform-origin:left;
  transition:transform .5s var(--ease-out);
}
.door:hover{ border-color:var(--line-2); background:var(--ink-3); }
.door:hover::after{ transform:scaleX(1); }
.door h3{ margin:.5rem 0 .55rem; }
.door .price{ display:block; margin-bottom:.7rem; }
.door p{ color:var(--muted); font-size:.95rem; }
.door .go{
  display:inline-flex; align-items:center; gap:.4rem; margin-top:1rem;
  color:var(--accent, var(--maple)); font-weight:600; font-size:.92rem;
}
.door .go svg{ transition:transform .3s var(--ease); }
.door:hover .go svg{ transform:translateX(4px); }

/* ---------- artist marquee ---------- */

.marquee{
  overflow:hidden; position:relative;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:clamp(16px,3.5vw,24px) 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
}
.marquee-track{ display:flex; width:max-content; animation:slide 46s linear infinite; }
.marquee:hover .marquee-track{ animation-play-state:paused; }
.marquee-track span{
  font-family:var(--f-display); font-size:clamp(1.25rem,4.6vw,2rem);
  color:var(--bone-2); white-space:nowrap; padding:0 clamp(16px,3.5vw,30px);
  display:inline-flex; align-items:center; gap:clamp(16px,3.5vw,30px);
}
.marquee-track span::after{
  content:"·"; color:var(--maple); opacity:.65;
}
@keyframes slide{ to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce){
  .marquee-track{ animation:none; }
  .marquee{ -webkit-mask-image:none; mask-image:none; overflow-x:auto; }
}

/* ---------- pull quote ---------- */

.quote{ text-align:center; }
.quote blockquote{
  margin:0; font-family:var(--f-display);
  font-size:clamp(1.55rem,6.4vw,3.2rem); line-height:1.14;
  letter-spacing:-0.015em; color:var(--bone);
}
.quote blockquote em{ font-style:italic; color:var(--maple); }
.quote cite{
  display:block; margin-top:1.5rem; font-style:normal;
  font-family:var(--f-mono); font-size:.76rem; color:var(--muted);
}

/* ---------- the decal moment ---------- */

.decal{ position:relative; }
.decal-stage{
  position:relative; border-radius:var(--r-lg); overflow:hidden;
  background:#000; border:1px solid var(--line);
  container-type:inline-size;   /* so the decal scales with the photo, not the viewport */
}
.decal-stage img{ width:100%; display:block; }
.decal-ink{
  position:absolute; left:63.1%; top:48.4%; width:auto;
  transform:translate(-50%,-50%) rotate(-2.5deg);
}
.decal-ink .wordmark{
  color:#171310; display:block;
  font-size:4.5vw;      /* fallback */
  font-size:5.4cqw;     /* matches the real decal against the headstock width */
}
.decal-sub{
  position:absolute; left:63.1%; top:60.2%; transform:translateX(-50%) rotate(-2.5deg);
  font-family:var(--f-body); font-weight:600;
  font-size:1.05vw; font-size:1.16cqw; letter-spacing:.42em;
  color:#171310; opacity:0; transition:opacity .7s var(--ease) .95s;
}
.decal.is-on .decal-sub{ opacity:1; }

/* ---------- placeholders for photography he does not have yet ---------- */

.ph{
  position:relative; display:flex; flex-direction:column; justify-content:flex-end;
  background:
    repeating-linear-gradient(135deg, rgba(216,162,90,.045) 0 12px, transparent 12px 24px),
    var(--ink-2);
  border:1px dashed var(--line-2); border-radius:var(--r-lg);
  padding:16px; min-height:200px; overflow:hidden;
}
.ph::before{
  content:""; position:absolute; inset:12px; border:1px solid rgba(216,162,90,.12);
  border-radius:3px; pointer-events:none;
}
.ph-tag{
  font-family:var(--f-mono); font-size:.62rem; color:var(--maple);
  letter-spacing:.1em; margin-bottom:.4rem;
}
.ph-what{ font-size:.88rem; color:var(--bone-2); line-height:1.4; max-width:34ch; }
.ph-icon{
  position:absolute; top:16px; right:16px; width:22px; height:22px;
  stroke:var(--maple); opacity:.5; fill:none; stroke-width:1.4;
}
.ph-4x5{ aspect-ratio:4/5; }
.ph-3x2{ aspect-ratio:3/2; }
.ph-1x1{ aspect-ratio:1/1; }
.ph-16x9{ aspect-ratio:16/9; }

/* ---------- figures / gallery ---------- */

.fig{
  position:relative; border-radius:var(--r-lg); overflow:hidden;
  background:#000; border:1px solid var(--line);
}
.fig img{ width:100%; display:block; transition:transform .8s var(--ease-out); }
.fig figcaption{
  padding:.7rem .9rem .85rem;
  font-family:var(--f-mono); font-size:.68rem; color:var(--muted);
  border-top:1px solid var(--line);
}
a.fig:hover img, button.fig:hover img{ transform:scale(1.03); }

.gal{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
@media (min-width:720px){ .gal{ grid-template-columns:repeat(3,1fr); gap:14px; } }
@media (min-width:1100px){ .gal{ grid-template-columns:repeat(4,1fr); gap:16px; } }
.gal button{
  padding:0; border:1px solid var(--line); background:#000; cursor:pointer;
  border-radius:var(--r); overflow:hidden; display:block; width:100%;
}
.gal button img{ width:100%; aspect-ratio:3/2; object-fit:cover; transition:transform .7s var(--ease-out), opacity .3s; }
.gal button:hover img{ transform:scale(1.05); }

/* lightbox */
.lb{
  position:fixed; inset:0; z-index:90; background:rgba(4,4,5,.96);
  display:flex; align-items:center; justify-content:center; padding:16px;
  opacity:0; visibility:hidden; transition:opacity .3s var(--ease), visibility .3s;
}
.lb.is-open{ opacity:1; visibility:visible; }
.lb img{ max-width:100%; max-height:78vh; border-radius:var(--r); }
.lb-cap{
  position:absolute; left:0; right:0; bottom:26px; text-align:center;
  font-family:var(--f-mono); font-size:.72rem; color:var(--bone-2); padding:0 20px;
}
.lb-x, .lb-prev, .lb-next{
  position:absolute; width:48px; height:48px; border-radius:50%;
  background:rgba(255,255,255,.07); border:1px solid var(--line-2);
  display:grid; place-items:center; cursor:pointer; color:var(--bone);
}
.lb-x{ top:16px; right:16px; }
.lb-prev{ left:12px; top:50%; transform:translateY(-50%); }
.lb-next{ right:12px; top:50%; transform:translateY(-50%); }
.lb-x:hover, .lb-prev:hover, .lb-next:hover{ background:rgba(255,255,255,.14); }

/* ---------- series cards ---------- */

.series{
  display:block; text-decoration:none; background:var(--ink-2);
  border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
  transition:border-color .35s var(--ease), transform .35s var(--ease);
}
.series:hover{ border-color:var(--line-2); }
.series-img{ position:relative; background:#000; overflow:hidden; }
/* three of the four series were shot on a white sheet, so the bottom edge is
   melted into the card rather than cutting a bright rectangle out of the dark */
.series-img::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top, rgba(8,9,10,.58) 0%, rgba(8,9,10,.12) 42%, rgba(8,9,10,0) 70%);
}
.series-img img{ width:100%; aspect-ratio:4/3; object-fit:cover; transition:transform .8s var(--ease-out); }
.series:hover .series-img img{ transform:scale(1.045); }
.series-body{ padding:18px 18px 22px; }
.series-body h3{ margin:.35rem 0 .3rem; }
.series-body p{ font-size:.92rem; color:var(--muted); margin-bottom:.9rem; }
.series-body .price{ font-size:.94rem; }

/* ---------- spec list ---------- */

.speclist{ list-style:none; margin:0; padding:0; }
.speclist li{
  display:flex; gap:.85rem; align-items:flex-start;
  padding:.62rem 0; border-bottom:1px solid var(--line);
  font-size:.94rem; color:var(--bone-2);
}
.speclist li::before{
  content:""; flex:none; width:5px; height:5px; margin-top:.62rem;
  border-radius:50%; background:var(--maple); opacity:.75;
}
.speclist li:last-child{ border-bottom:0; }

.numlist{ list-style:none; margin:0; padding:0; counter-reset:n; }
.numlist li{
  counter-increment:n; position:relative; padding:.62rem 0 .62rem 2.6rem;
  border-bottom:1px solid var(--line); font-size:.94rem; color:var(--bone-2);
}
.numlist li::before{
  content:counter(n,decimal-leading-zero);
  position:absolute; left:0; top:.72rem;
  font-family:var(--f-mono); font-size:.7rem; color:var(--maple-dim);
}
.numlist li:last-child{ border-bottom:0; }

/* ---------- FAQ / accordion ---------- */

.acc{ border-top:1px solid var(--line); }
.acc details{ border-bottom:1px solid var(--line); }
.acc summary{
  list-style:none; cursor:pointer; padding:1.05rem 2.4rem 1.05rem 0;
  position:relative; font-size:1.02rem; font-weight:500; color:var(--bone);
}
.acc summary::-webkit-details-marker{ display:none; }
.acc summary::after{
  content:""; position:absolute; right:4px; top:50%; width:11px; height:11px;
  border-right:1.5px solid var(--maple); border-bottom:1.5px solid var(--maple);
  transform:translateY(-70%) rotate(45deg); transition:transform .3s var(--ease);
}
.acc details[open] summary::after{ transform:translateY(-30%) rotate(-135deg); }
.acc .acc-body{ padding:0 0 1.2rem; color:var(--muted); font-size:.96rem; max-width:64ch; }

/* ---------- testimonials ---------- */

.said{
  background:var(--ink-2); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:22px;
  display:flex; flex-direction:column; height:100%;
}
.said p{ font-size:.98rem; color:var(--bone-2); line-height:1.55; }
.said footer{
  margin-top:auto; padding-top:1rem;
  font-family:var(--f-mono); font-size:.7rem; color:var(--maple);
}
.said footer small{ display:block; color:var(--muted); margin-top:.25rem; font-size:.95em; }

/* ---------- the bench slip (estimate tool) ---------- */

.slip{
  background:var(--ink-2); border:1px solid var(--line);
  border-radius:var(--r-lg); overflow:hidden;
  position:relative;
}
.slip-head{
  padding:16px 20px; border-bottom:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:var(--ink-3);
}
.slip-head strong{ font-family:var(--f-mono); font-size:.76rem; font-weight:500; letter-spacing:.06em; color:var(--bone-2); }
.slip-head .spec{ font-size:.66rem; }
.slip-body{ padding:20px; }
.slip-step + .slip-step{ margin-top:1.5rem; padding-top:1.5rem; border-top:1px solid var(--line); }
.slip-step > .spec{ display:block; margin-bottom:.75rem; }

.chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{
  border:1px solid var(--line-2); background:transparent; color:var(--bone-2);
  border-radius:999px; padding:.55rem 1rem; font-size:.88rem; cursor:pointer;
  transition:border-color .2s var(--ease), background .2s var(--ease), color .2s var(--ease);
  min-height:42px;
}
.chip:hover{ border-color:var(--maple-dim); color:var(--bone); }
.chip[aria-pressed="true"], .chip.is-on{
  background:var(--maple); border-color:var(--maple); color:var(--ink); font-weight:600;
}

.slip-total{
  margin-top:1.5rem; padding-top:1.5rem; border-top:1px solid var(--line);
  display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap;
}
.slip-total .band-price{
  font-family:var(--f-mono); font-weight:500; color:var(--maple-hi);
  font-size:clamp(1.5rem,6vw,2.1rem); line-height:1; letter-spacing:-0.02em;
}
.slip-note{ font-size:.82rem; color:var(--muted); margin-top:.55rem; max-width:46ch; }

/* forms */
.field{ margin-bottom:1rem; }
.field label{ display:block; font-family:var(--f-mono); font-size:.68rem; color:var(--muted); margin-bottom:.4rem; }
.field input, .field textarea, .field select{
  width:100%; background:var(--ink); color:var(--bone);
  border:1px solid var(--line-2); border-radius:var(--r);
  padding:.85rem .9rem; font-family:var(--f-body); font-size:1rem;
  min-height:50px;
}
.field textarea{ min-height:110px; resize:vertical; }
.field input::placeholder, .field textarea::placeholder{ color:#6B7076; }
@media (min-width:620px){ .field-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; } }

/* ---------- info rows ---------- */

.info{ list-style:none; margin:0; padding:0; }
.info li{ display:flex; gap:1rem; padding:.95rem 0; border-bottom:1px solid var(--line); }
.info li:last-child{ border-bottom:0; }
.info dt, .info .k{
  flex:none; width:88px; font-family:var(--f-mono); font-size:.68rem;
  color:var(--muted); padding-top:.2rem;
}
.info .v{ font-size:1rem; color:var(--bone); }
.info .v a{ color:var(--maple); text-decoration:none; display:inline-block; padding:3px 0; min-height:24px; }
.info .v a:hover{ text-decoration:underline; }

/* ---------- map ----------
   OpenStreetMap's embed pulls close to 2 MB of tiles and assets, so it is not
   loaded until the panel is nearly in view. Until then this is a real panel
   with the address in it, not an empty rectangle.                          */
.map{
  position:relative; border-radius:var(--r-lg); overflow:hidden;
  border:1px solid var(--line); background:var(--ink-2); line-height:0;
  height:300px;
}
@media (min-width:720px){ .map{ height:380px; } }
.map iframe{ width:100%; height:100%; border:0; filter:grayscale(.35) contrast(1.05) brightness(.86); }
.map-wait{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:.7rem; text-align:center;
  padding:20px; line-height:1.5;
  background:
    repeating-linear-gradient(0deg, rgba(216,162,90,.05) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(90deg, rgba(216,162,90,.05) 0 1px, transparent 1px 44px),
    var(--ink-2);
}
.map-wait svg{ width:24px; height:24px; stroke:var(--maple); fill:none; stroke-width:1.5; }
.map-wait span{ font-family:var(--f-mono); font-size:.72rem; color:var(--muted); max-width:30ch; }
.map.is-loaded .map-wait{ display:none; }

/* ---------- footer ---------- */

.ftr{ background:var(--ink-2); border-top:1px solid var(--line); padding:clamp(44px,9vw,76px) 0 0; }
.ftr-top{ display:grid; gap:34px; }
@media (min-width:820px){ .ftr-top{ grid-template-columns:1.3fr 1fr 1fr; gap:40px; } }
.ftr .ftr-h{ font-family:var(--f-mono); font-size:.68rem; color:var(--muted); margin-bottom:1rem; font-weight:400; letter-spacing:.06em; }
.ftr-links{ list-style:none; margin:0; padding:0; }
.ftr-links li{ margin-bottom:.35rem; }
.ftr-links a{ text-decoration:none; color:var(--bone-2); font-size:.95rem;
  display:inline-block; padding:4px 0; min-height:24px; }
.ftr-links a:hover{ color:var(--maple); }
.ftr-mark .wordmark{ font-size:2.3rem; color:var(--bone); }
.ftr-social{ display:flex; gap:10px; margin-top:1rem; }
.ftr-social a{
  width:40px; height:40px; border:1px solid var(--line-2); border-radius:var(--r);
  display:grid; place-items:center; color:var(--bone-2);
}
.ftr-social a:hover{ border-color:var(--maple); color:var(--maple); }
.ftr-social svg{ width:17px; height:17px; fill:currentColor; }
.ftr-bar{
  margin-top:clamp(34px,7vw,56px); padding:20px 0 calc(20px + var(--safe-b,0px));
  border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:10px 20px; justify-content:space-between;
  font-size:.8rem; color:var(--muted);
}
.ftr-bar a{ color:var(--maple); text-decoration:none; display:inline-block; padding:4px 0; }
.ftr-bar a:hover{ color:var(--maple); text-decoration:underline; }

/* ---------- sticky mobile action bar ---------- */

.dock{
  position:fixed; left:0; right:0; bottom:0; z-index:50;
  display:grid; grid-template-columns:1fr 1fr; gap:8px;
  padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  background:rgba(8,9,10,.9);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-top:1px solid var(--line);
  transform:translateY(110%); transition:transform .38s var(--ease);
}
.dock.show{ transform:none; }
.dock .btn{ min-height:48px; font-size:.9rem; padding:0 .6rem; }
@media (min-width:1000px){ .dock{ display:none; } }
body.has-dock{ padding-bottom:0; }
@media (max-width:999px){ body.has-dock .ftr-bar{ padding-bottom:88px; } }

/* ---------- scroll reveal ---------- */

.rv{ opacity:0; transform:translateY(22px); transition:opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.rv.in{ opacity:1; transform:none; }
.rv-d1{ transition-delay:.08s; } .rv-d2{ transition-delay:.16s; }
.rv-d3{ transition-delay:.24s; } .rv-d4{ transition-delay:.32s; }

@media (prefers-reduced-motion: reduce){
  .rv{ opacity:1; transform:none; transition:none; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}

/* ---------- utility ---------- */

.center{ text-align:center; }
.mx-auto{ margin-inline:auto; }
.narrow{ max-width:66ch; }
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.skip{
  position:absolute; left:12px; top:-60px; z-index:100;
  background:var(--maple); color:var(--ink); padding:.7rem 1rem;
  border-radius:var(--r); font-weight:600; text-decoration:none;
  transition:top .2s var(--ease);
}
.skip:focus{ top:12px; }

/* page hero for inner pages */
.phero{ padding:clamp(40px,10vw,86px) 0 clamp(30px,7vw,54px); position:relative; overflow:hidden; }
.phero .spec{ display:block; margin-bottom:1rem; }
.phero h1{ margin-bottom:1rem; }
.phero-glow{
  position:absolute; left:50%; top:-40%; width:min(760px,120vw); aspect-ratio:1;
  transform:translateX(-50%);
  background:radial-gradient(circle, rgba(216,162,90,.12) 0%, rgba(216,162,90,0) 66%);
  pointer-events:none;
}

/* crumbs */
.crumbs{ font-family:var(--f-mono); font-size:.68rem; color:var(--muted); margin-bottom:1.2rem; }
.crumbs a{ color:var(--muted); text-decoration:none; display:inline-block; padding:5px 0; }
.crumbs a:hover{ color:var(--maple); }
.crumbs span{ color:var(--line-2); padding:0 .4rem; }