/* ==========================================================================
   PAPIN GUITARS - BRAND SYSTEM (light, Sep 2026)
   Warm cream ground like raw ash and maple, charcoal text like the bench,
   Burl Blue from Joe's own blue-burl finish as the ONE accent. Seafoam was
   the alternative but fails contrast as link text on cream (2.8:1).
   Oswald, all caps, for display; Inter for everything you read.
   ========================================================================== */
:root{
  --pick:#F4F1EA; --panel:#EBE6DB; --raise:#E2DCCF; --edge:#D6CEBF;
  --bone:#1A1A1A; --smoke:#4A463F; --steel:#6B655C;
  /* text that sits on the accent, or on a photo */
  --on-accent:#F4F1EA; --on-dark:#F4F1EA; --accent-on-dark:#A9C7DD;

  --neon:#1A4B6E; --neon-deep:#123752; --neon-glow:rgba(26,75,110,.18);
  --blue:#2C79D6; --blue-deep:#0F3F84;
  --red:#D93B22; --red-deep:#8E1F0D;
  --teal:#45C4BD; --teal-deep:#177E79;
  --amber:#D0842F; --amber-deep:#8E5310;
  --violet:#8B6BD8;

  /* ONE UI accent. The blue/red/teal/amber above are finish-swatch
     reference for the .chip colour samples only, never UI accents. */
  --accent:var(--neon); --accent-deep:var(--neon-deep);

  /* ---- type scale --------------------------------------------------------
     Text runs on three sizes only: 12 labels, 16 reading, 20 lead. Nothing
     smaller than 12. Headlines step down hero > waiting list > section >
     supporting section (5xl/hero override, 4xl, 3xl, 2xl). */
  --t-sm:12px; --t-base:16px; --t-lg:20px;
  --t-xl:clamp(24px,3vw,30px);
  --t-2xl:clamp(30px,4.2vw,42px);
  --t-3xl:clamp(32px,5vw,58px);
  --t-4xl:clamp(40px,7.5vw,92px);
  --t-5xl:clamp(56px,13vw,168px);

  /* ---- spacing: single 8px unit (s-1 is the 4px half-step) -------------- */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px;
  --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px; --s-10:128px;
  /* one vertical rhythm for every section (64 on phones) */
  --sec:88px;

  /* tracking: three values. Display caps, button caps, small caps labels. */
  --tr-disp:.01em; --tr-btn:.06em; --tr-cap:.12em;


  /* Type: Oswald (all caps) for display, Inter for text. --mono is the
     label-face name kept to avoid churn; it is Inter, not a monospace. */
  --disp:"Oswald","Arial Narrow",system-ui,sans-serif;
  --mono:"Inter",system-ui,-apple-system,sans-serif;
  --body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:hidden}
body{background:var(--pick);color:var(--bone);font-family:var(--body);font-size:var(--t-base);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:1240px;margin:0 auto;padding:0 var(--s-5);position:relative;z-index:2}
@media(max-width:620px){.wrap{padding:0 var(--s-4)}}

/* ---- type primitives -------------------------------------------------- */
.eyebrow{font-family:var(--mono);font-size:var(--t-sm);letter-spacing:var(--tr-cap);text-transform:uppercase;color:var(--accent)}
.eyebrow.dim{color:var(--steel)}
.dtitle{font-family:var(--disp);font-weight:700;letter-spacing:var(--tr-disp);line-height:1;text-transform:uppercase}
h2.dtitle{font-size:var(--t-3xl)}
.sub{color:var(--smoke);max-width:620px}
.rule{height:2px;width:60px;background:var(--accent);margin-top:var(--s-5)}
.pickmark{width:15px;height:15px;flex:none;color:var(--accent)}

/* ---- buttons ---------------------------------------------------------- */
/* One button height: 48px everywhere (44 in the nav). Text links (.btn-line)
   are links, not buttons, and size to their text. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);min-height:48px;padding:var(--s-3) var(--s-5);
  border-radius:2px;font-family:var(--disp);font-weight:600;font-size:var(--t-base);line-height:1.15;letter-spacing:var(--tr-btn);
  text-transform:uppercase;cursor:pointer;border:0;transition:transform .16s,box-shadow .16s,background .16s,color .16s}
.btn-fill{background:var(--accent);color:var(--on-accent);box-shadow:0 0 0 rgba(0,0,0,0)}
.btn-fill:hover{transform:translateY(-2px);box-shadow:0 10px 30px color-mix(in srgb,var(--accent) 38%,transparent)}
.btn-ghost{border:1px solid var(--edge);color:var(--bone);background:transparent}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}
.btn-line{min-height:0;justify-content:flex-start;padding:0 0 var(--s-1);background:none;color:var(--bone);border-bottom:1px solid var(--accent);border-radius:0}
.btn-line:hover{color:var(--accent);gap:var(--s-4)}
/* Merch CTA. A raised panel, deliberately quieter than the neon build CTA:
   hierarchy comes from weight, not from a second hue. */
.btn-merch{background:var(--raise);color:var(--bone);border:1px solid var(--edge);box-shadow:0 0 0 rgba(0,0,0,0)}
.btn-merch:hover{transform:translateY(-2px);border-color:var(--smoke);box-shadow:0 10px 24px rgba(26,26,26,.16)}
.btn-merch .cartmark{width:16px;height:16px;flex:none}

/* ---- nav -------------------------------------------------------------- */
nav{position:fixed;inset:0 0 auto 0;z-index:80;background:rgba(244,241,234,.92);backdrop-filter:blur(16px);
  border-bottom:1px solid var(--edge)}
.nav-in{max-width:1240px;margin:0 auto;padding:var(--s-4) var(--s-5);display:flex;align-items:center;gap:var(--s-5)}
.nav-logo img{height:32px;width:auto}
.nav-links{display:flex;gap:var(--s-5);margin-left:auto;font-family:var(--mono);font-size:var(--t-sm);letter-spacing:var(--tr-cap);
  text-transform:uppercase;color:var(--smoke)}
.nav-links a{position:relative;padding:var(--s-1) 0;transition:color .18s}
.nav-links a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--accent);transition:right .24s}
.nav-links a:hover{color:var(--bone)} .nav-links a:hover::after{right:0}
.nav-links a.on{color:var(--bone)} .nav-links a.on::after{right:0}
.nav-cta{min-height:44px;padding:0 var(--s-4);font-size:var(--t-sm)}
@media(max-width:1000px){.nav-links{display:none}}
@media(max-width:420px){.nav-in{gap:var(--s-3);padding:var(--s-3) var(--s-4)}.nav-cta{padding:0 var(--s-3)}.nav-logo img{height:26px}}

/* ---- hero ------------------------------------------------------------- */
/* No forced viewport height: the hero is as tall as its content plus padding,
   so a tall monitor does not get a screen of empty cream. */
.hero{position:relative;display:flex;align-items:flex-end;padding:var(--s-10) 0 var(--s-8);overflow:hidden}
/* clear the pinned info strip so hero copy never sits under it */
@media(min-width:861px){.hero{padding-bottom:var(--s-10)}}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:62% 45%;filter:saturate(1.04)}
.hero-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,10,11,.80) 0%,rgba(10,10,11,.42) 34%,rgba(10,10,11,.93) 86%,var(--pick) 100%),
             linear-gradient(90deg,rgba(10,10,11,.86) 0%,rgba(10,10,11,.45) 46%,rgba(10,10,11,.12) 100%)}
.hero-in{position:relative;z-index:2;width:100%}
.hero h1{font-family:var(--disp);font-weight:700;text-transform:uppercase;letter-spacing:var(--tr-disp);line-height:.95;
  font-size:var(--t-5xl);margin:var(--s-4) 0 0}
.hero h1 em{display:block;font-style:normal;color:var(--neon);text-shadow:0 0 42px var(--neon-glow)}
.hero .kick{display:flex;align-items:center;gap:var(--s-3)}
.hero p.sub{margin:var(--s-5) 0 var(--s-6);font-size:var(--t-base)}
.hero-ctas{display:flex;gap:var(--s-4);flex-wrap:wrap;align-items:center}
.hero-meta{margin-top:var(--s-5);font-size:var(--t-base);color:var(--smoke)}
.hero-meta a{border-bottom:1px solid color-mix(in srgb,var(--bone) 35%,transparent);transition:color .16s,border-color .16s}
.hero-meta a:hover{color:var(--accent);border-color:var(--accent)}
.hero-meta b{color:var(--bone)}

/* ---- marquee ---------------------------------------------------------- */
.marquee{border-top:1px solid var(--edge);border-bottom:1px solid var(--edge);
  background:var(--panel);overflow:hidden;padding:var(--s-4) 0}
.marquee-track{display:flex;gap:var(--s-6);width:max-content;animation:roll 34s linear infinite}
@keyframes roll{to{transform:translateX(-50%)}}
.marquee span{font-family:var(--mono);font-size:var(--t-sm);letter-spacing:var(--tr-cap);text-transform:uppercase;color:var(--smoke);
  display:flex;align-items:center;gap:var(--s-6);white-space:nowrap}
.marquee svg{width:10px;height:10px;color:var(--neon);flex:none}

/* ---- generic section -------------------------------------------------- */
section{padding:var(--sec) 0;position:relative}
@media(max-width:720px){:root{--sec:64px}}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--s-5);flex-wrap:wrap;margin-bottom:var(--s-7)}

/* ---- collections (Godin series cards) --------------------------------- */
.collections{background:var(--pick)}
.col-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-4)}
@media(max-width:940px){.col-grid{grid-template-columns:1fr}}
.col-card{position:relative;min-height:440px;border-radius:3px;overflow:hidden;display:flex;flex-direction:column;
  justify-content:flex-end;padding:var(--s-6);border:1px solid var(--edge);isolation:isolate}
.col-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
  transition:transform .7s cubic-bezier(.16,.84,.34,1)}
.col-card::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(10,10,11,.10) 0%,rgba(10,10,11,.62) 46%,rgba(10,10,11,.97) 100%)}
.col-card:hover img{transform:scale(1.07)}
.col-card > *{position:relative;z-index:2}
.col-card h3{font-family:var(--disp);font-weight:700;text-transform:uppercase;letter-spacing:0;line-height:.9;
  font-size:var(--t-2xl);margin:var(--s-2) 0 var(--s-2)}
.col-card h3 em{display:block;font-style:normal;color:var(--c,var(--neon))}
.col-card p{font-size:var(--t-base);color:var(--smoke);margin-bottom:var(--s-4);max-width:34ch}
.col-card .eyebrow{color:var(--c,var(--neon))}
.col-card .btn-line{border-color:var(--c,var(--neon));align-self:flex-start}

/* ---- craft band ------------------------------------------------------- */
.craft{background:var(--panel);border-top:1px solid var(--edge);border-bottom:1px solid var(--edge)}
.craft-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-7);align-items:center}
@media(max-width:940px){.craft-grid{grid-template-columns:1fr;gap:var(--s-6)}}
.craft-img{border-radius:3px;overflow:hidden;border:1px solid var(--edge)}
.craft-img img{width:100%;aspect-ratio:4/3;object-fit:cover}
.craft p{color:var(--smoke);margin-bottom:var(--s-4)}
.craft p b{color:var(--bone)}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-4);margin-top:var(--s-6)}
.stat{border-top:2px solid var(--neon);padding-top:var(--s-3)}
.stat .n{font-family:var(--disp);font-size:var(--t-2xl);font-weight:700;line-height:1}
.stat .l{font-size:var(--t-sm);color:var(--steel);margin-top:var(--s-1)}

/* ---- builds (tabbed grid) --------------------------------------------- */
.tabs{display:flex;gap:var(--s-2);flex-wrap:wrap;margin-bottom:var(--s-6)}
.tab{font-family:var(--mono);font-size:var(--t-sm);letter-spacing:var(--tr-cap);text-transform:uppercase;padding:var(--s-2) var(--s-4);
  border:1px solid var(--edge);border-radius:2px;background:transparent;color:var(--smoke);cursor:pointer;transition:all .18s}
.tab:hover{color:var(--bone);border-color:var(--smoke)}
.tab.on{background:var(--neon);border-color:var(--neon);color:var(--on-accent);font-weight:700}
.build-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-4)}
@media(max-width:1040px){.build-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){.build-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.build{border:1px solid var(--edge);border-radius:3px;overflow:hidden;background:var(--panel);
  transition:transform .22s,border-color .22s;display:flex;flex-direction:column}
.build:hover{transform:translateY(-5px);border-color:color-mix(in srgb,var(--c,var(--neon)) 60%,transparent)}
.build .shot{aspect-ratio:1;overflow:hidden;position:relative;background:var(--raise)}
.build .shot img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.16,.84,.34,1)}
.build:hover .shot img{transform:scale(1.06)}
.build .badge{position:absolute;top:11px;left:11px;z-index:2;font-family:var(--mono);font-size:var(--t-sm);font-weight:700;
  letter-spacing:var(--tr-cap);text-transform:uppercase;background:rgba(244,241,234,.94);color:var(--bone);
  border:1px solid color-mix(in srgb,var(--c,var(--neon)) 55%,transparent);border-radius:2px;padding:var(--s-1) var(--s-2)}
.build .meta{padding:var(--s-4) var(--s-4) var(--s-4);flex:1;display:flex;flex-direction:column}
.build .bname{font-family:var(--disp);font-size:var(--t-lg);font-weight:700;text-transform:uppercase;letter-spacing:var(--tr-disp)}
.build .bspec{font-size:var(--t-sm);color:var(--steel);margin-top:var(--s-1);line-height:1.5}
.build .bfoot{margin-top:auto;padding-top:var(--s-4);font-size:var(--t-sm);font-weight:600;color:var(--c,var(--neon))}

/* ---- artist ----------------------------------------------------------- */
.artist{background:var(--panel);border-top:1px solid var(--edge)}
.artist-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:var(--s-7);align-items:center}
@media(max-width:940px){.artist-grid{grid-template-columns:1fr;gap:var(--s-6)}}
.artist-img{border-radius:3px;overflow:hidden;border:1px solid var(--edge);position:relative}
.artist-img img{width:100%;object-fit:cover}
.artist h2{margin:var(--s-3) 0 var(--s-2)}
.artist .who{font-family:var(--mono);font-size:var(--t-sm);letter-spacing:var(--tr-cap);text-transform:uppercase;color:var(--neon)}
.artist blockquote{font-size:var(--t-lg);line-height:1.55;color:var(--bone);margin:var(--s-5) 0;padding-left:var(--s-5);
  border-left:2px solid var(--neon)}
.artist .src{font-family:var(--mono);font-size:var(--t-sm);letter-spacing:var(--tr-cap);text-transform:uppercase;color:var(--steel)}

/* ---- finish chips ----------------------------------------------------- */
.finish{background:var(--pick)}
.finish-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-7);align-items:center}
@media(max-width:940px){.finish-grid{grid-template-columns:1fr;gap:var(--s-6)}}
.finish p{color:var(--smoke);margin-bottom:var(--s-4)} .finish p b{color:var(--bone)}
.chips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-3)}
.chip{aspect-ratio:1;border-radius:3px;position:relative;overflow:hidden;border:1px solid var(--edge);
  transition:transform .2s}
.chip:hover{transform:translateY(-4px)}
.chip::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(255,255,255,.4) 0%,var(--edge) 24%,transparent 40%)}
.chip span{position:absolute;left:10px;bottom:9px;z-index:2;font-family:var(--mono);font-size:var(--t-sm);letter-spacing:var(--tr-cap);
  text-transform:uppercase;color:#fff;font-weight:700;text-shadow:0 1px 4px rgba(0,0,0,.8)}

/* ---- repairs ---------------------------------------------------------- */
.repairs{background:var(--panel);border-top:1px solid var(--edge);border-bottom:1px solid var(--edge)}
.rep-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--edge);
  border:1px solid var(--edge);margin-top:var(--s-7)}
@media(max-width:860px){.rep-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:540px){.rep-grid{grid-template-columns:1fr}}
.rep{background:var(--panel);padding:var(--s-5) var(--s-5);transition:background .2s}
.rep:hover{background:var(--raise)}
.rep .n{font-family:var(--mono);font-size:var(--t-sm);letter-spacing:var(--tr-cap);color:var(--accent)}
.rep h3{font-family:var(--disp);font-size:var(--t-lg);font-weight:700;text-transform:uppercase;letter-spacing:var(--tr-disp);margin:var(--s-2) 0 var(--s-2)}
.rep p{font-size:var(--t-base);color:var(--steel)}

/* ---- hero info strip (Hot Rod method) --------------------------------- */
/* Three facts a local customer needs before they trust a one man shop:
   where he is, how to call, how to write. Pinned under the hero the way
   Hot Rod does it. */
.hero-strip{position:absolute;inset:auto 0 0 0;z-index:3;border-top:1px solid var(--edge);
  background:rgba(244,241,234,.94);backdrop-filter:blur(14px)}
.hero-strip-in{max-width:1240px;margin:0 auto;padding:0 var(--s-5);display:grid;grid-template-columns:repeat(3,1fr)}
.hero-strip a{padding:var(--s-4) var(--s-5);border-left:1px solid var(--edge);transition:background .2s}
.hero-strip a:first-child{border-left:0;padding-left:0}
.hero-strip a:hover{background:rgba(26,26,26,.04)}
.hero-strip .k{font-family:var(--mono);font-size:var(--t-sm);letter-spacing:var(--tr-cap);text-transform:uppercase;color:var(--steel)}
.hero-strip .v{font-size:var(--t-base);font-weight:600;margin-top:var(--s-1);color:var(--bone);transition:color .18s}
.hero-strip a:hover .v{color:var(--accent)}
@media(max-width:860px){.hero-strip{display:none}}

/* ---- three paths ------------------------------------------------------ */
/* The whole audience arrives with one of three intents. Answer all three
   above the fold-plus-one rather than making anyone hunt. */
.paths{background:var(--panel);border-top:1px solid var(--edge);border-bottom:1px solid var(--edge)}
.paths-head{margin-bottom:var(--s-6)}
.paths-head .dtitle{margin-top:var(--s-3)}
.path-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-4)}
@media(max-width:900px){.path-grid{grid-template-columns:1fr}}
.path{display:flex;flex-direction:column;gap:var(--s-2);background:var(--pick);border:1px solid var(--edge);
  border-top:2px solid var(--c,var(--neon));border-radius:3px;padding:var(--s-5) var(--s-5) var(--s-5);
  transition:transform .2s,border-color .2s,background .2s}
.path:hover{transform:translateY(-5px);background:var(--raise);
  border-color:color-mix(in srgb,var(--c,var(--neon)) 55%,transparent);border-top-color:var(--c,var(--neon))}
.path-n{font-family:var(--mono);font-size:var(--t-sm);letter-spacing:var(--tr-cap);color:var(--c,var(--neon))}
.path h3{font-family:var(--disp);font-weight:700;font-size:var(--t-2xl);line-height:.95;
  letter-spacing:var(--tr-disp);text-transform:uppercase}
.path h3 em{font-style:normal;display:block;color:var(--c,var(--neon))}
.path p{font-size:var(--t-base);line-height:1.5;color:var(--steel);flex:1}
.path-go{font-family:var(--mono);font-size:var(--t-sm);font-weight:700;letter-spacing:var(--tr-cap);text-transform:uppercase;
  color:var(--bone);padding-top:var(--s-3);border-top:1px solid var(--edge);margin-top:var(--s-2);transition:color .18s,gap .18s}
.path:hover .path-go{color:var(--c,var(--neon))}

/* ---- check list (Hot Rod method) -------------------------------------- */
.checks{display:grid;gap:var(--s-3);margin:var(--s-5) 0 var(--s-5)}
.check{display:flex;gap:var(--s-3);align-items:flex-start}
.check svg{width:17px;height:17px;flex:none;margin-top:2px;color:var(--accent)}
.check span{font-size:var(--t-base);line-height:1.45;color:var(--smoke)}
.check b{color:var(--bone);font-weight:600}
/* Two-up checklist (repairs full service list). Collapses to one column on phones. */
.checks.cols-2{grid-template-columns:1fr 1fr;gap:var(--s-3) var(--s-6);align-items:start}
@media (max-width:720px){.checks.cols-2{grid-template-columns:1fr}}

/* ---- shop teaser ------------------------------------------------------ */
.shopteaser{background:var(--pick)}
.st-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--s-7);align-items:center}
@media(max-width:940px){.st-grid{grid-template-columns:1fr;gap:var(--s-6)}}
.st-img{border-radius:3px;overflow:hidden;border:1px solid var(--edge)}
.st-img img{width:100%;aspect-ratio:4/3;object-fit:cover}
.st-pills{display:flex;gap:var(--s-2);flex-wrap:wrap;margin:var(--s-5) 0 var(--s-5)}
.pill{font-size:var(--t-sm);border:1px solid var(--edge);
  border-radius:99px;padding:var(--s-2) var(--s-4);color:var(--smoke)}
.pill.live{border-color:color-mix(in srgb,var(--accent) 60%,transparent);color:var(--accent);display:inline-flex;align-items:center;gap:var(--s-2)}
.pill.live .dot{width:6px;height:6px;border-radius:50%;background:var(--accent);animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}

/* ---- faq -------------------------------------------------------------- */
.faq{background:var(--panel);border-top:1px solid var(--edge)}
.faq-list{border-top:1px solid var(--edge);margin-top:var(--s-6)}
.qa{border-bottom:1px solid var(--edge)}
.qa summary{list-style:none;cursor:pointer;padding:var(--s-5) 0;display:flex;align-items:center;gap:var(--s-4);
  font-size:var(--t-lg);font-weight:600;line-height:1.35;transition:color .18s}
.qa summary::-webkit-details-marker{display:none}
.qa summary:hover{color:var(--neon)}
.qa summary .ic{margin-left:auto;font-family:var(--mono);font-size:var(--t-lg);color:var(--neon);transition:transform .22s;line-height:1}
.qa[open] summary .ic{transform:rotate(45deg)}
.qa .ans{padding:0 0 var(--s-5) var(--s-6);color:var(--smoke);font-size:var(--t-base);max-width:70ch}

/* ---- contact ---------------------------------------------------------- */
.contact{background:var(--pick)}
/* The left column's children join the grid (display:contents): headline on
   the left, intro and buttons on the right (the same split as the builds
   header), then the two info blocks share a row and a top line. Before,
   one short column floated beside a tall one. */
.contact-grid{display:grid;grid-template-columns:1.05fr .95fr;column-gap:var(--s-7);align-items:start}
.contact-grid>.cmain{display:contents}
.cmain>.eyebrow{grid-column:1 / -1}
.cmain>h2{grid-column:1;grid-row:2 / span 2}
.cmain>p{grid-column:2;grid-row:2;margin-top:var(--s-3)}
.cmain>.cta-row{grid-column:2;grid-row:3}
.cmain>.cblock{grid-column:1;grid-row:4}
.cblock,.cmain~.cside{margin-top:var(--s-7);padding-top:var(--s-5);border-top:1px solid var(--edge)}
.cmain~.cside{grid-column:2;grid-row:4}
/* builds + repairs keep their plain two-column contact (form | aside) */
.contact-grid:not(:has(>.cmain)){row-gap:var(--s-7)}
@media(max-width:940px){.contact-grid{grid-template-columns:1fr}.contact-grid .cmain>*,.contact-grid .cmain~.cside{grid-column:1;grid-row:auto}
  .contact-grid .cmain>p{margin-top:0}
  .cmain~.cside{margin-top:var(--s-5)}}
.form{background:var(--panel);border:1px solid var(--edge);border-radius:3px;padding:var(--s-6)}
.form label{display:block;font-family:var(--mono);font-size:var(--t-sm);letter-spacing:var(--tr-cap);text-transform:uppercase;
  color:var(--steel);margin:var(--s-4) 0 var(--s-2)}
.form input,.form textarea,.form select{width:100%;background:var(--pick);border:1px solid var(--edge);border-radius:2px;
  color:var(--bone);padding:var(--s-3) var(--s-4);font-family:var(--body);font-size:var(--t-base);transition:border-color .18s,box-shadow .18s}
.form input:focus,.form textarea:focus,.form select:focus{outline:none;border-color:var(--neon);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--neon) 16%,transparent)}
.form .btn{width:100%;justify-content:center;margin-top:var(--s-5)}
.form-success{display:none;margin-top:var(--s-4);background:color-mix(in srgb,var(--neon) 9%,transparent);
  border:1px solid color-mix(in srgb,var(--neon) 42%,transparent);border-radius:2px;padding:var(--s-3) var(--s-4);font-size:var(--t-base)}
.phone-mock{background:var(--raise);border:1px solid var(--edge);border-radius:24px;padding:var(--s-5) var(--s-4);
  max-width:325px;margin:0 auto;box-shadow:0 30px 60px rgba(0,0,0,.6)}
.pm-head{text-align:center;font-family:var(--mono);font-size:var(--t-sm);letter-spacing:var(--tr-cap);color:var(--steel);
  border-bottom:1px solid var(--edge);padding-bottom:var(--s-3);margin-bottom:var(--s-3);text-transform:uppercase}
.pm-sys{text-align:center;font-family:var(--mono);font-size:var(--t-sm);color:var(--steel);margin-bottom:var(--s-3);text-transform:uppercase;letter-spacing:var(--tr-cap)}
.bubble{border-radius:14px;padding:var(--s-3) var(--s-4);font-size:var(--t-base);line-height:1.5;margin-bottom:var(--s-2);max-width:92%}
.bubble.in{background:#22222A;border-bottom-left-radius:4px}
.bubble.out{background:var(--neon);color:var(--on-accent);font-weight:500;margin-left:auto;border-bottom-right-radius:4px}
.pm-label{margin-top:var(--s-3);text-align:center;font-family:var(--mono);font-size:var(--t-sm);letter-spacing:var(--tr-cap);
  text-transform:uppercase;color:var(--neon)}
.cside h3{font-family:var(--disp);font-size:var(--t-lg);font-weight:700;text-transform:uppercase;letter-spacing:var(--tr-disp);margin:var(--s-5) 0 var(--s-2)}
.cside p{color:var(--smoke)}
.cside .big{font-family:var(--disp);font-size:var(--t-2xl);font-weight:700;color:var(--neon);letter-spacing:0}
.cblock h3,.cmain~.cside h3{font-family:var(--disp);font-size:var(--t-lg);font-weight:700;text-transform:uppercase;
  letter-spacing:var(--tr-disp);line-height:1.2;margin:0 0 var(--s-2)}
.cblock p{margin-top:var(--s-2);color:var(--smoke)}
.cblock .big{font-family:var(--disp);font-size:var(--t-2xl);font-weight:700;line-height:1.1;letter-spacing:var(--tr-disp);color:var(--accent)}

/* ---- footer ----------------------------------------------------------- */
footer{background:var(--panel);border-top:1px solid var(--edge);padding:var(--s-8) 0 var(--s-6)}
/* phones: clear the ~73px sticky call bar */
@media(max-width:720px){footer{padding-bottom:calc(var(--s-9) + var(--s-2))}}
.foot-top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:var(--s-7);padding-bottom:var(--s-6);
  border-bottom:1px solid var(--edge)}
@media(max-width:820px){.foot-top{grid-template-columns:1fr;gap:var(--s-5)}}
.foot-top img{height:30px;margin-bottom:var(--s-4)}
.foot-top p{font-size:var(--t-base);color:var(--steel);max-width:38ch}
.fcol h4{font-family:var(--mono);font-size:var(--t-sm);letter-spacing:var(--tr-cap);text-transform:uppercase;color:var(--neon);margin-bottom:var(--s-3)}
.fcol a{display:block;font-size:var(--t-base);color:var(--smoke);padding:var(--s-1) 0;transition:color .18s}
.fcol a:hover{color:var(--bone)}
.foot-bot{display:flex;justify-content:space-between;gap:var(--s-4);flex-wrap:wrap;padding-top:var(--s-5);
  font-size:var(--t-sm);color:var(--steel)}
.foot-bot a:hover{color:var(--neon)}

/* ---- sticky mobile cta ------------------------------------------------ */
.sticky-cta{display:none;position:fixed;bottom:0;left:0;right:0;z-index:90;background:rgba(244,241,234,.96);
  backdrop-filter:blur(12px);border-top:1px solid var(--edge);padding:var(--s-3) var(--s-4);gap:var(--s-2)}
@media(max-width:720px){.sticky-cta{display:flex}}
.sticky-cta .btn{flex:1 1 0;min-width:0;padding:var(--s-3) var(--s-2);white-space:nowrap}

/* ---- shop page -------------------------------------------------------- */
.page-head{padding:var(--s-10) 0 var(--s-7);position:relative;overflow:hidden;border-bottom:1px solid var(--edge)}
.page-head h1{font-family:var(--disp);font-weight:700;text-transform:uppercase;letter-spacing:var(--tr-disp);line-height:.98;
  font-size:var(--t-4xl);margin-top:var(--s-4)}
.page-head h1 em{font-style:normal;color:var(--neon)}
.crumb{font-family:var(--mono);font-size:var(--t-sm);letter-spacing:var(--tr-cap);text-transform:uppercase;color:var(--steel)}
.crumb a:hover{color:var(--neon)}
.shop-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-4)}
@media(max-width:1040px){.shop-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){.shop-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.prod{border:1px solid var(--edge);border-radius:3px;overflow:hidden;background:var(--panel);
  display:flex;flex-direction:column;transition:transform .2s,border-color .2s}
.prod:hover{transform:translateY(-5px);border-color:color-mix(in srgb,var(--p,var(--neon)) 55%,transparent)}
.prod .shot{aspect-ratio:1;position:relative;display:grid;place-items:center;overflow:hidden;
  background:radial-gradient(70% 70% at 50% 34%,#FBF9F4,#E4DDCF 80%)}
.prod .shot img.photo{width:100%;height:100%;object-fit:cover}
.prod .garment{width:76%;filter:drop-shadow(0 10px 16px rgba(26,26,26,.28))}
.prod .mark{position:absolute;left:50%;top:var(--my,48%);width:var(--mw,34%);transform:translate(-50%,-50%);
  opacity:.95;pointer-events:none;filter:drop-shadow(0 2px 5px rgba(0,0,0,.65))}
.prod .flag{position:absolute;top:11px;left:11px;z-index:3;font-family:var(--mono);font-size:var(--t-sm);font-weight:700;
  letter-spacing:var(--tr-cap);text-transform:uppercase;background:rgba(10,10,11,.84);
  border:1px solid color-mix(in srgb,var(--p,var(--neon)) 55%,transparent);color:var(--p,var(--neon));
  border-radius:2px;padding:var(--s-1) var(--s-2)}
.prod .meta{padding:var(--s-4) var(--s-4) var(--s-4);display:flex;flex-direction:column;gap:var(--s-1);flex:1}
.prod .pname{font-family:var(--disp);font-size:var(--t-lg);font-weight:700;text-transform:uppercase;letter-spacing:var(--tr-disp)}
.prod .pdesc{font-size:var(--t-sm);color:var(--steel);line-height:1.45}
.prod .prow{display:flex;align-items:center;justify-content:space-between;gap:var(--s-2);margin-top:auto;padding-top:var(--s-3)}
.prod .price{font-family:var(--disp);font-size:var(--t-lg);font-weight:700}
.prod .add{font-family:var(--mono);font-size:var(--t-sm);font-weight:700;letter-spacing:var(--tr-cap);text-transform:uppercase;
  padding:var(--s-2) var(--s-4);border-radius:2px;background:var(--p,var(--neon));color:var(--on-accent);border:0;cursor:pointer;transition:filter .16s,transform .16s}
.prod .add:hover{filter:brightness(1.1);transform:translateY(-1px)}
.prod .add.added{background:none;border:1px solid var(--neon);color:var(--neon)}
/* buyer-facing strip: the three facts that unblock an add-to-cart */
.pod-strip{display:flex;align-items:center;gap:var(--s-4);flex-wrap:wrap;margin-bottom:var(--s-5);padding:var(--s-3) var(--s-4);
  border:1px solid var(--edge);border-left:2px solid var(--accent);border-radius:3px;background:var(--panel)}
.pod-strip>span{font-size:var(--t-sm);color:var(--steel);flex:1;min-width:200px}
.pod-strip a{font-family:var(--mono);font-size:var(--t-sm);font-weight:700;letter-spacing:var(--tr-cap);text-transform:uppercase;
  color:var(--accent);border-bottom:1px solid color-mix(in srgb,var(--accent) 45%,transparent);padding-bottom:2px}
.pod-strip a:hover{color:var(--bone);border-color:var(--bone)}
.pod-panel{scroll-margin-top:var(--s-9)}

/* ---- Printify sample-state panel -------------------------------------- */
/* Reads like a page of the scope of work, sitting inside the store itself,
   so Joe can hand the link to anyone and they understand the model. */
.pod-panel{border:1px solid var(--edge);border-radius:3px;background:
  linear-gradient(180deg,color-mix(in srgb,var(--accent) 8%,var(--panel)),var(--panel));
  padding:var(--s-6) var(--s-6);margin-bottom:var(--s-7)}
@media(max-width:620px){.pod-panel{padding:var(--s-5) var(--s-5)}}
.pod-head{display:flex;align-items:center;gap:var(--s-4);flex-wrap:wrap;margin-bottom:var(--s-3)}
.pod-tag{font-family:var(--mono);font-size:var(--t-sm);font-weight:700;letter-spacing:var(--tr-cap);text-transform:uppercase;
  color:var(--on-accent);background:var(--accent);border-radius:2px;padding:var(--s-1) var(--s-2);flex:none}
.pod-head h3{font-family:var(--disp);font-weight:700;font-size:var(--t-xl);letter-spacing:0;line-height:1.15}
.pod-lede{color:var(--smoke);font-size:var(--t-base);line-height:1.6;max-width:74ch}
.pod-lede b{color:var(--bone)}
.pod-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--edge);
  border:1px solid var(--edge);border-radius:3px;margin-top:var(--s-5);overflow:hidden}
@media(max-width:860px){.pod-steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pod-step{background:var(--pick);padding:var(--s-4) var(--s-4);display:flex;flex-direction:column;gap:var(--s-1)}
.pod-step .n{font-family:var(--mono);font-size:var(--t-sm);letter-spacing:var(--tr-cap);color:var(--accent)}
.pod-step b{font-family:var(--disp);font-size:var(--t-base);font-weight:700;letter-spacing:0}
.pod-step span:last-child{font-size:var(--t-sm);line-height:1.45;color:var(--steel)}
.pod-foot{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-5);margin-top:var(--s-5);
  padding-top:var(--s-5);border-top:1px solid var(--edge)}
@media(max-width:760px){.pod-foot{grid-template-columns:1fr;gap:var(--s-4)}}
.pod-fact b{display:block;font-family:var(--disp);font-size:var(--t-lg);font-weight:700;letter-spacing:0;color:var(--accent)}
.pod-fact span{font-size:var(--t-sm);line-height:1.45;color:var(--steel)}
.prod .was{font-family:var(--mono);font-size:var(--t-sm);color:var(--steel);margin-left:var(--s-2);font-weight:400}
@media(max-width:620px){
  .pod-panel{padding:var(--s-5) var(--s-4);margin-bottom:var(--s-6)}
  .pod-lede{font-size:var(--t-base)}
  .pod-step{padding:var(--s-3) var(--s-3)}
  .pod-step b{font-size:var(--t-base)}
  .pod-step span:last-child{font-size:var(--t-sm)}
  .pod-foot{grid-template-columns:1fr 1fr;gap:var(--s-3);margin-top:var(--s-4);padding-top:var(--s-4)}
  .pod-fact:last-child{grid-column:1 / -1}
  .pod-fact b{font-size:var(--t-base)}
  .pod-fact span{font-size:var(--t-sm)}
}
.shop-note{margin-top:var(--s-6);display:flex;gap:var(--s-2);flex-wrap:wrap;align-items:center}
.bench-note{margin-top:var(--s-5);font-size:var(--t-base);color:var(--steel);font-style:italic}
.cart-toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,140%);z-index:95;background:var(--bone);color:var(--on-dark);
  border:1px solid color-mix(in srgb,var(--neon) 50%,transparent);border-radius:2px;padding:var(--s-3) var(--s-5);font-size:var(--t-base);
  box-shadow:0 16px 40px rgba(0,0,0,.6);transition:transform .28s cubic-bezier(.2,.9,.3,1.2);white-space:nowrap}
.cart-toast.show{transform:translate(-50%,0)}
.cart-toast b{color:var(--neon)}
@media(max-width:720px){.cart-toast{bottom:78px;font-size:var(--t-sm);padding:var(--s-3) var(--s-4)}}

/* ---- motion ----------------------------------------------------------- */
html.js [data-reveal]{opacity:0;transform:translateY(24px);
  transition:opacity .6s cubic-bezier(.16,.84,.34,1),transform .6s cubic-bezier(.16,.84,.34,1);
  transition-delay:var(--d,0ms);will-change:opacity,transform}
html.js [data-reveal].in{opacity:1;transform:none}
html.js [data-reveal="left"]{transform:translateX(-26px)}
html.js [data-reveal="right"]{transform:translateX(26px)}
html.js [data-reveal="zoom"]{transform:scale(.94)}
/* On narrow screens a sideways start pushes children past the viewport
   while they wait to reveal. Go vertical instead so nothing can clip. */
@media(max-width:720px){
  html.js [data-reveal="left"],html.js [data-reveal="right"]{transform:translateY(22px)}
}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* ---- mobile: 44px tap targets + heading breaks ------------------------- */
/* Inner-page H1s set the second half in an <em>. Inline it ran the words
   together ("The benchis open.", "Wear theshop."). Block it the way the
   hero already does so each half gets its own line. */
.page-head h1 em{display:block}
@media(max-width:720px){
  .nav-logo{display:flex;align-items:center;min-height:44px}
  .nav-cta{min-height:44px}
  .btn-line{min-height:44px;align-items:center}
  .tab{min-height:44px}
  .fcol a{display:flex;align-items:center;min-height:44px;padding:var(--s-1) 0}
  .pod-strip a{display:inline-flex;align-items:center;min-height:44px}
  .foot-bot{gap:var(--s-3)}
}

/* ---- layouts lifted out of inline styles (so they can respond) --------- */
.price-split{display:grid;grid-template-columns:1.1fr 1fr;gap:var(--s-7);align-items:center}
.shop-photos{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-4)}
@media(max-width:860px){
  .price-split{grid-template-columns:1fr;gap:var(--s-6);align-items:start}
}
@media(max-width:720px){
  .hero{padding-bottom:var(--s-8)}
  .shop-photos{grid-template-columns:1fr 1fr;gap:var(--s-3)}
}

/* ---- shop-page fixes -------------------------------------------------- */
/* .pod-strip>span (0,1,1) was beating .pod-tag (0,1,0), so the tag stretched
   to flex:1 and took the steel body colour on a neon ground. */
.pod-strip>span.pod-tag{flex:none;min-width:0;color:var(--on-accent)}
/* The old translate(-50%,140%) is ~63px, which cannot clear the toast's
   78px mobile bottom offset, so it sat on screen permanently. */
.cart-toast{transform:translate(-50%,calc(100% + 96px))}
.cart-toast.show{transform:translate(-50%,0)}


/* ---- light theme: hero, on-photo text, merch toast ------------------------ */
/* Text sits on cream; the blue-burl photo becomes its own panel (right on
   desktop, on top on phones) instead of a dark wash behind the words. */
.hero{background:var(--pick);align-items:center}
.hero-bg::after{display:none}
.hero h1 em{text-shadow:none}
@media(min-width:861px){
  .hero-bg{inset:0 0 0 auto;width:46%}
  .hero-in>*{max-width:min(600px,calc(54vw - 96px))}
  .hero h1{font-size:clamp(56px,8.4vw,128px)}
}
@media(max-width:860px){
  .hero{display:block;min-height:0;padding-top:72px}
  .hero-bg{position:relative;inset:auto;height:44svh;margin-bottom:var(--s-6)}
}
/* Collection cards keep their dark photo scrim, so their text stays light. */
.col-card{color:var(--on-dark)}
.col-card p{color:rgba(244,241,234,.82)}
.col-card h3 em,.col-card .eyebrow{color:var(--accent-on-dark)}
.col-card .btn-line{color:var(--on-dark);border-color:var(--accent-on-dark)}
.cart-toast b{color:var(--on-dark)}

/* Four-card step grids: four across on desktop so no empty cell shows the
   grid's hairline colour as a solid block (it read as a tan slab on cream). */
@media(min-width:861px){.rep-grid:has(>.rep:nth-child(4):last-child){grid-template-columns:repeat(4,minmax(0,1fr))}}
/* Section divider: line up with the content column instead of the viewport edge. */
hr.rule{border:0;margin:var(--s-5) 0 0 max(var(--s-5),calc((100% - 1240px)/2 + var(--s-5)))}
@media(max-width:620px){hr.rule{margin-left:var(--s-4)}}
/* Merch reassurance tags were never styled; give them the pill treatment. */
.shop-note .tag{font-size:var(--t-sm);
  border:1px solid var(--edge);border-radius:99px;padding:var(--s-2) var(--s-4);color:var(--smoke);background:var(--panel)}

/* ---- homepage hierarchy (Oct 2026) -------------------------------------- */
/* Headlines run in four tiers so the page has a reading order: hero, then the
   waiting list, then the sections that ask for a decision, then the ones that
   back them up. Every H2 used to be the same 58px. */
h2.dtitle.minor{font-size:var(--t-2xl)}
/* One ground. The page used to alternate cream and panel on nearly every
   section, which read as stripes. Now it is cream throughout, sections split
   by a hairline on the content column; the waiting list is the one band of
   colour, and only repairs and the footer keep the panel. */
.home .paths,.home .collections,.home .craft,.home .artist,.home .faq{background:var(--pick);border-top:0;border-bottom:0}
.home section.sep::before{content:"";position:absolute;top:0;height:1px;background:var(--edge);
  left:max(var(--s-5),calc((100% - 1240px)/2 + var(--s-5)));right:max(var(--s-5),calc((100% - 1240px)/2 + var(--s-5)))}
@media(max-width:620px){.home section.sep::before{left:var(--s-4);right:var(--s-4)}}
/* Same gap from kicker to headline, and headline to text, in every section. */
.home h2.dtitle{margin:var(--s-3) 0 var(--s-5)}
.home .sec-head h2.dtitle,.home .paths-head h2.dtitle{margin-bottom:0}

/* The waiting list: the one Burl Blue band, and the second-biggest headline. */
.waitlist{background:var(--accent);color:var(--on-accent)}
.waitlist-in{display:flex;gap:var(--s-6);flex-wrap:wrap;align-items:flex-end;justify-content:space-between}
.waitlist-copy{max-width:760px}
.waitlist .eyebrow{color:var(--accent-on-dark)}
.waitlist h2.dtitle{font-size:var(--t-4xl);line-height:.95}
.waitlist p{color:rgba(244,241,234,.86);max-width:60ch}
.waitlist p b{color:var(--on-accent)}
.waitlist-ctas{display:flex;gap:var(--s-5);flex-wrap:wrap;align-items:center}
.waitlist .btn-fill{background:var(--on-accent);color:var(--accent)}
.waitlist .btn-fill:hover{box-shadow:0 10px 30px rgba(8,22,34,.35)}
.waitlist .btn-line{color:var(--on-accent);border-color:var(--accent-on-dark)}
.waitlist .btn-line:hover{color:var(--accent-on-dark)}
.waitlist :focus-visible{outline:2px solid var(--on-accent);outline-offset:3px}

/* ---- 375 pass (Oct 2026) ------------------------------------------------ */
/* Headings, kickers, FAQ questions and buttons wrap to even lines instead of
   leaving one word (or a lone arrow) on the last line. */
h1,h2,h3,h4,summary,.eyebrow,.btn{text-wrap:balance}
/* In-page jumps (builds#inquiry, repairs#book, shop#shop) land below the
   fixed nav instead of under it. */
[id]{scroll-margin-top:calc(var(--s-8) + var(--s-2))}
.pod-panel{scroll-margin-top:var(--s-9)}
/* The shown phone number dials. It is a block with a 44px tap height. */
a.big{display:flex;align-items:center;width:fit-content;min-height:44px}
a.big:hover{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
/* Small inline links keep their look but get a 44px tall hit area. */
.hero-meta a,.crumb a{position:relative}
.hero-meta a::after,.crumb a::after{content:"";position:absolute;left:-4px;right:-4px;top:50%;height:44px;transform:translateY(-50%)}
/* Merch cards: on a phone the price and "Add to cart" cannot share a row
   without the button text breaking onto two lines, so the button drops under
   the price at full card width, one line, 44px tall. */
@media(max-width:480px){
  .prod .prow{flex-wrap:wrap}
  .prod .add{flex:1 0 100%;white-space:nowrap;min-height:44px}
}

/* ---- form slots (Oct 2026) ---------------------------------------------- */
/* Marked spot for the GHL form embed. Until it is pasted in, the phone and
   email inside are the inquiry, and both work. */
.form-slot{display:flex;gap:var(--s-3);flex-wrap:wrap;padding:var(--s-6);background:var(--panel);
  border:1px solid var(--edge);border-radius:3px}
@media(max-width:620px){.form-slot{padding:var(--s-5)}}
a.mail{display:flex;align-items:center;width:fit-content;min-height:44px;font-weight:600;color:var(--accent)}
a.mail:hover{text-decoration:underline;text-underline-offset:4px}
/* homepage merch teaser: the same tee mockup the Merch page uses; not a link, so no hover lift */
.st-mock{background:none}
.st-mock:hover{transform:none;border-color:var(--edge)}
.st-mock .shot{aspect-ratio:4/3}
.st-mock .garment{width:52%}
/* ---- pre-handoff fixes (Oct 21) --------------------------------------- */
/* Contact phone numbers sit on the 42px tier on every page. */
.cside .big{line-height:1.1}
/* Four finish swatches: the colours the build photos actually show. */
.chips.four{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:620px){.chips.four{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* ---- client photos (Oct 21) ------------------------------------------- */
/* Gallery cards go portrait so a whole guitar fits. Cutouts sit on a soft
   studio backdrop and are never cropped; photos still fill the card. */
.build .shot{aspect-ratio:3/4}
.build .shot.cut{background:radial-gradient(70% 55% at 50% 42%,#FBF9F4,var(--raise))}
.build .shot.cut img{object-fit:contain;padding:7% 0}
.build:hover .shot.cut img{transform:scale(1.03)}
/* Two-up photo row (repairs) */
.shop-photos.two{grid-template-columns:1fr 1fr;margin-bottom:var(--s-7)}
.shop-photos .ph{border:1px solid var(--edge);border-radius:3px;overflow:hidden;aspect-ratio:1}
.shop-photos .ph img{width:100%;height:100%;object-fit:cover}
@media(max-width:540px){.shop-photos.two{grid-template-columns:1fr;margin-bottom:var(--s-6)}}

/* ==========================================================================
   HOT ROD STRUCTURE (Oct 21 2026)
   Same building blocks as hotrod6strings.com: utility top bar, full-bleed
   photo hero, display marquee, split photo/text sections with a corner badge,
   checklists in tinted circles, captioned photo strips, ghost watermark text,
   and an accent closing band. Papin's cream, charcoal and Burl Blue; Oswald
   and Inter; Joe's verified facts only.
   ========================================================================== */
:root{--tr-kick:.24em}
.eyebrow{font-weight:600;letter-spacing:var(--tr-kick)}
.btn{border-radius:5px}
.btn-line{border-radius:0}
.btn-ghost{border:2px solid color-mix(in srgb,var(--bone) 22%,transparent)}
.btn-dark{background:var(--bone);color:var(--on-dark)}
.btn-dark:hover{background:#000;transform:translateY(-2px);box-shadow:0 10px 30px rgba(0,0,0,.35)}
.btn-outline-light{background:transparent;color:var(--on-dark);border:2px solid rgba(244,241,234,.5)}
.btn-outline-light:hover{border-color:var(--on-dark)}

/* motion: Hot Rod's fade-up, 28px over .7s, the same ease */
html.js [data-reveal]{transform:translateY(28px);transition-duration:.7s;transition-timing-function:cubic-bezier(.16,1,.3,1)}

/* utility top bar */
.topbar{background:var(--accent);color:var(--on-accent)}
.topbar-in{max-width:1240px;margin:0 auto;padding:var(--s-2) var(--s-5);display:flex;justify-content:space-between;align-items:center;gap:var(--s-5);
  font-size:var(--t-sm);font-weight:600;letter-spacing:var(--tr-cap);text-transform:uppercase}
.tb-links{display:flex;gap:var(--s-5)}
.topbar a{transition:color .16s}
.topbar a:hover{color:var(--accent-on-dark)}
@media(max-width:720px){.topbar{display:none}}
@media(min-width:721px){[id]{scroll-margin-top:calc(var(--s-9) + var(--s-3))}}

/* full-bleed photo hero */
.hero.hr-hero{display:flex;align-items:center;min-height:0;background:var(--bone);color:var(--on-dark);
  padding:calc(var(--s-10) + var(--s-7)) 0 calc(var(--s-10) + var(--s-6))}
.hero.hr-hero .hero-bg{position:absolute;inset:0;width:auto;height:auto;margin:0}
.hr-hero .hero-bg img{object-position:68% 50%}
.hr-hero .hero-bg::after{display:block;content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(17,17,17,.94) 0%,rgba(17,17,17,.82) 44%,rgba(17,17,17,.25) 100%),
             linear-gradient(0deg,rgba(17,17,17,.7) 0%,transparent 32%)}
.hr-hero .hero-in>*{max-width:720px}
.hr-hero .eyebrow{color:var(--accent-on-dark)}
.hr-hero h1{line-height:.85;color:var(--on-dark)}
.hr-hero h1 em{color:var(--accent-on-dark)}
.hr-hero p.sub{color:rgba(244,241,234,.84);font-size:var(--t-lg);max-width:36ch}
.hr-hero .hero-meta{color:rgba(244,241,234,.72)}
.hr-hero .hero-meta b{color:var(--on-dark)}
.hr-hero .hero-strip{background:rgba(17,17,17,.6);border-top-color:rgba(244,241,234,.14)}
.hr-hero .hero-strip a{border-left-color:rgba(244,241,234,.14)}
.hr-hero .hero-strip a:hover{background:rgba(255,255,255,.05)}
.hr-hero .hero-strip .k{color:var(--accent-on-dark)}
.hr-hero .hero-strip .v{color:var(--on-dark)}
.hr-hero .hero-strip a:hover .v{color:var(--accent-on-dark)}
.hr-hero .btn-fill{background:var(--on-dark);color:var(--accent)}
@media(max-width:860px){
  .hero.hr-hero{display:flex;padding:calc(var(--s-9) + var(--s-6)) 0 var(--s-9)}
  .hero.hr-hero .hero-bg{position:absolute;inset:0;height:auto;margin:0}
  .hr-hero .hero-bg::after{background:linear-gradient(0deg,rgba(17,17,17,.92) 8%,rgba(17,17,17,.7) 60%,rgba(17,17,17,.45) 100%)}
}

/* display marquee */
.marquee span{font-family:var(--disp);font-size:var(--t-lg);font-weight:500;letter-spacing:var(--tr-btn);color:var(--steel)}
.marquee svg{width:12px;height:12px}

/* sections */
.hr-sec{border-top:1px solid var(--edge);background:var(--pick)}
.hr-sec.alt{background:var(--panel)}
.home .hr-sec.faq{background:var(--pick)}
.hr-split{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-7);align-items:center}
.hr-head .dtitle{margin-bottom:0}
.hr-sub{margin-top:var(--s-4);color:var(--smoke);max-width:60ch}
.hr-sub b{color:var(--bone)}
.center{text-align:center}
.center .hr-sub{margin-left:auto;margin-right:auto}
.hr-ctas{display:flex;flex-wrap:wrap;gap:var(--s-4);margin-top:var(--s-6)}
.hr-ctas.center{justify-content:center}
@media(max-width:940px){.hr-split{grid-template-columns:1fr;gap:var(--s-7)}.hr-split.flip>.hr-photo{order:2}}

/* framed photo with a corner badge */
.hr-photo{position:relative}
.hr-photo .frame{position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:8px;border:1px solid var(--edge);background:var(--raise)}
.hr-photo .frame img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.16,1,.3,1)}
.hr-photo .frame:hover img{transform:scale(1.05)}
.hr-photo.portrait .frame{aspect-ratio:auto;max-width:460px;margin-left:auto;background:#000}
.hr-photo.portrait .frame img{height:auto}
.hr-badge{position:absolute;left:-16px;bottom:-16px;background:var(--accent);color:var(--on-accent);border-radius:5px;
  padding:var(--s-3) var(--s-5);font-family:var(--disp);font-weight:600;font-size:var(--t-lg);letter-spacing:var(--tr-btn);
  text-transform:uppercase;box-shadow:0 14px 30px rgba(18,55,82,.28)}
.hr-photo .cap{position:absolute;inset:auto 0 0 0;margin:0;padding:var(--s-7) var(--s-4) var(--s-4);
  background:linear-gradient(0deg,rgba(17,17,17,.85),transparent);color:rgba(244,241,234,.88);
  font-size:var(--t-sm);font-weight:600;letter-spacing:var(--tr-cap);text-transform:uppercase}
@media(max-width:620px){.hr-badge{left:-6px;bottom:-12px;font-size:var(--t-base)}}

/* tag chips */
.hr-chips{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-3);margin-top:var(--s-6)}
.hr-chips a{display:flex;align-items:center;justify-content:center;min-height:56px;border:1px solid var(--edge);border-radius:5px;
  background:var(--panel);font-family:var(--disp);font-weight:600;font-size:var(--t-base);letter-spacing:var(--tr-cap);
  text-transform:uppercase;color:var(--bone);transition:border-color .2s,color .2s,background .2s}
.hr-chips a:hover{border-color:var(--accent);color:var(--accent);background:var(--pick)}
@media(max-width:620px){.hr-chips{grid-template-columns:1fr 1fr}}

/* checklists */
.hr-checks{list-style:none;display:grid;gap:var(--s-4);margin-top:var(--s-6);padding:0}
.hr-checks li{display:flex;gap:var(--s-4);align-items:flex-start}
.hr-checks i{flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;margin-top:1px;
  background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent)}
.hr-checks i svg{width:14px;height:14px}
.hr-checks b{display:block;font-family:var(--disp);font-weight:600;font-size:var(--t-base);letter-spacing:var(--tr-btn);
  text-transform:uppercase;line-height:1.5;color:var(--bone)}
.hr-checks span{display:block;margin-top:2px;color:var(--smoke)}

/* captioned photo strip */
.hr-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-4);margin-top:var(--s-8)}
.hr-strip figure{margin:0;border:1px solid var(--edge);border-radius:8px;overflow:hidden;background:var(--panel)}
.hr-strip .ph{position:relative;aspect-ratio:2/3;overflow:hidden}
.hr-strip .ph.cut{background:radial-gradient(70% 55% at 50% 42%,#FBF9F4,var(--raise))}
.hr-strip .ph img{width:100%;height:100%;object-fit:contain;padding:6% 0;transition:transform .7s cubic-bezier(.16,1,.3,1)}
.hr-strip figure:hover img{transform:scale(1.04)}
.hr-strip figcaption{border-top:1px solid var(--edge);padding:var(--s-3) var(--s-4);font-size:var(--t-sm);font-weight:600;
  letter-spacing:var(--tr-cap);text-transform:uppercase;color:var(--smoke)}
@media(max-width:620px){.hr-strip{gap:var(--s-2)}.hr-strip figcaption{padding:var(--s-2)}}

/* ghost watermark text */
.ghost{position:absolute;z-index:0;font-family:var(--disp);font-weight:700;text-transform:uppercase;white-space:nowrap;
  line-height:.8;font-size:clamp(96px,14vw,200px);color:transparent;
  -webkit-text-stroke:1px color-mix(in srgb,var(--bone) 11%,transparent);pointer-events:none;user-select:none}

/* waiting-list band */
.hr-band{position:relative;overflow:hidden;background:var(--panel);border-top:1px solid var(--edge);border-bottom:1px solid var(--edge)}
.hr-band .ghost{left:50%;top:-10px;transform:translateX(-50%)}
.hr-band .wrap{position:relative;z-index:1}
.hr-band h2.dtitle{font-size:var(--t-4xl)}

/* Joe */
.legacy{overflow:hidden}
.legacy .ghost{right:-1%;top:var(--s-6)}
.legacy .wrap{position:relative;z-index:1}
.legacy-grid{grid-template-columns:1.1fr 1fr}
.hr-body p{margin-top:var(--s-4);color:var(--smoke)}
.hr-body p b{color:var(--bone)}
.hr-body blockquote{margin:var(--s-5) 0 0;font-size:var(--t-lg);line-height:1.5;font-style:italic;color:var(--bone);max-width:52ch}
.hr-body cite{display:block;margin-top:var(--s-2);font-size:var(--t-sm);font-style:normal;font-weight:600;letter-spacing:var(--tr-cap);
  text-transform:uppercase;color:var(--accent)}
@media(max-width:940px){.legacy-grid{grid-template-columns:1fr}.hr-photo.portrait .frame{margin:0 auto}}

/* merch strip */
.hr-merch{background:var(--panel);border-top:1px solid var(--edge);padding:var(--s-8) 0}
.hr-merch-in{display:flex;align-items:center;justify-content:space-between;gap:var(--s-6);flex-wrap:wrap}
.hr-merch .dtitle{margin:var(--s-3) 0 0}
.hr-merch .hr-sub{margin-top:var(--s-3)}

/* closing band */
.hr-close{position:relative;overflow:hidden;background:var(--accent);color:var(--on-accent);border-top:0}
.hr-close .ghost{left:0;bottom:-28px;-webkit-text-stroke:1px rgba(244,241,234,.18)}
.hr-close .wrap{position:relative;z-index:1}
.home .hr-close h2.dtitle{color:var(--on-accent);margin:0}
.hr-close p{margin:var(--s-4) auto 0;max-width:56ch;color:rgba(244,241,234,.86)}
.hr-close .addr{margin-top:var(--s-6);font-size:var(--t-sm);font-weight:600;letter-spacing:var(--tr-cap);text-transform:uppercase}
.hr-close .addr a{display:inline-flex;align-items:center;min-height:44px}
.hr-close .addr a:hover{color:var(--accent-on-dark)}
.hr-close :focus-visible{outline:2px solid var(--on-accent);outline-offset:3px}

/* footer hours box */
.foot-top{grid-template-columns:1.3fr 1fr 1fr 1.2fr}
.fcol.hours{border:1px solid var(--edge);border-radius:8px;background:var(--pick);padding:var(--s-5);align-self:start}
.fcol.hours .hrs{font-family:var(--disp);font-weight:600;font-size:var(--t-lg);letter-spacing:var(--tr-btn);text-transform:uppercase;color:var(--bone)}
.fcol.hours p{font-size:var(--t-base);color:var(--steel)}
.fcol.hours .hrs+p{margin-top:var(--s-3);padding-top:var(--s-3);border-top:1px solid var(--edge)}
.fcol.hours a{color:var(--accent);font-weight:600}
/* the taller header (top bar + nav) needs more room above inner-page titles */
@media(min-width:721px){.page-head{padding-top:calc(var(--s-10) + var(--s-5))}}
@media(max-width:1000px){.foot-top{grid-template-columns:1fr 1fr}}
@media(max-width:820px){.foot-top{grid-template-columns:1fr}}
.hr-close .addr a[href^="mailto:"]{text-transform:none;letter-spacing:.02em}
.nw{white-space:nowrap}

/* ---- Hot Rod inner pages (Oct 21) ------------------------------------- */
/* Page hero: full-bleed photo, dark wash, everything centred. */
.hr-pagehero{position:relative;overflow:hidden;text-align:center;color:var(--on-dark);background:#151515;
  padding:calc(var(--s-10) + var(--s-7)) 0 var(--s-10)}
.hr-pagehero .bg{position:absolute;inset:0}
.hr-pagehero .bg img{width:100%;height:100%;object-fit:cover}
.hr-pagehero .bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(17,17,17,.74) 0%,rgba(17,17,17,.62) 45%,rgba(17,17,17,.92) 100%)}
.hr-pagehero .bg.plain{background:radial-gradient(60% 80% at 50% 0%,color-mix(in srgb,var(--accent) 38%,#151515),#151515 70%)}
.hr-pagehero .bg.plain::after{display:none}
.hr-pagehero .wrap{position:relative;z-index:1}
.hr-pagehero .crumb{color:var(--accent-on-dark);font-weight:600;letter-spacing:var(--tr-kick)}
.hr-pagehero .crumb a:hover{color:var(--on-dark)}
.hr-pagehero h1{margin:var(--s-4) auto 0;max-width:18ch;font-family:var(--disp);font-weight:700;text-transform:uppercase;
  letter-spacing:var(--tr-disp);line-height:.92;font-size:var(--t-4xl);color:var(--on-dark)}
.hr-pagehero h1 em{display:block;font-style:normal;color:var(--accent-on-dark)}
.hr-pagehero .sub{margin:var(--s-5) auto 0;max-width:60ch;font-size:var(--t-lg);color:rgba(244,241,234,.84)}
.hr-pagehero .btn-fill{background:var(--on-dark);color:var(--accent)}
@media(max-width:720px){.hr-pagehero{padding:calc(var(--s-9) + var(--s-5)) 0 var(--s-8)}.hr-pagehero .sub{font-size:var(--t-base)}}

/* section heads off the homepage get the same rhythm */
.hr-head h2.dtitle{margin:var(--s-3) 0 0}
.hr-head .hr-sub+.hr-sub{margin-top:var(--s-3)}
.hr-head.center{text-align:center}
.hr-head.center .hr-sub{margin-left:auto;margin-right:auto}
.hr-close h2.dtitle{color:var(--on-accent);margin:0}

/* big price */
.hr-price{margin-top:var(--s-3);font-family:var(--disp);font-weight:700;font-size:var(--t-4xl);line-height:1;color:var(--bone)}
.hr-price span{display:block;margin-bottom:var(--s-2);font-size:var(--t-base);font-weight:600;letter-spacing:var(--tr-cap);color:var(--smoke)}

/* numbered step cards with a ghost number */
.hr-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-4);margin-top:var(--s-7)}
.hr-step{position:relative;overflow:hidden;border:1px solid var(--edge);border-radius:8px;background:var(--pick);
  padding:var(--s-6) var(--s-5);transition:border-color .2s}
.hr-sec:not(.alt) .hr-step{background:var(--panel)}
.hr-step:hover{border-color:color-mix(in srgb,var(--accent) 45%,transparent)}
.hr-step .num{position:absolute;right:-6px;top:-22px;font-family:var(--disp);font-weight:700;font-size:112px;line-height:1;
  color:transparent;-webkit-text-stroke:1px color-mix(in srgb,var(--bone) 12%,transparent);pointer-events:none}
.hr-step .st{position:relative;font-family:var(--disp);font-weight:600;font-size:var(--t-lg);letter-spacing:var(--tr-btn);
  text-transform:uppercase;color:var(--accent)}
.hr-step h3{position:relative;margin-top:var(--s-2);font-family:var(--disp);font-weight:700;font-size:var(--t-lg);
  letter-spacing:var(--tr-disp);text-transform:uppercase}
.hr-step p:not(.st){position:relative;margin-top:var(--s-2);color:var(--smoke)}
@media(max-width:940px){.hr-steps{grid-template-columns:1fr 1fr}}
@media(max-width:540px){.hr-steps{grid-template-columns:1fr}}

/* quote band */
.hr-quote blockquote{margin:var(--s-4) auto 0;max-width:22ch;font-family:var(--disp);font-weight:700;text-transform:uppercase;
  font-size:var(--t-2xl);line-height:1.05;letter-spacing:var(--tr-disp);color:var(--bone)}
.hr-quote cite,.hr-body cite{display:block;margin-top:var(--s-3);font-family:var(--body);font-size:var(--t-sm);font-style:normal;
  font-weight:600;letter-spacing:var(--tr-cap);text-transform:uppercase;color:var(--accent)}

/* two-column checklist + notes */
.hr-checks.cols-2{grid-template-columns:1fr 1fr;column-gap:var(--s-6);row-gap:var(--s-3)}
.hr-checks.notes{margin-top:var(--s-6);padding-top:var(--s-5);border-top:1px solid var(--edge)}
@media(max-width:540px){.hr-checks.cols-2{grid-template-columns:1fr}}

/* photo strip with real photos (cover, not cutouts) */
.hr-strip.photos .ph{aspect-ratio:4/5}
.hr-strip.photos .ph img{object-fit:cover;padding:0}
.hr-strip.photos{margin-top:var(--s-7)}

/* section-level spacing for blocks that used to carry inline margins */
.hr-sec .stats{margin-top:var(--s-6)}
.hr-sec .faq-list{margin-top:var(--s-6)}
.hr-grid{margin-top:var(--s-6)}
.hr-sec.contact .contact-grid{align-items:start}