/* ── enquiry form ── */
.join{text-align:center;position:relative}
.join .mark{width:min(180px,42vw);margin:0 auto 30px;opacity:.95}
.join h2{font-size:clamp(38px,6.4vw,86px);margin-bottom:20px}
.form{display:flex;gap:11px;max-width:520px;margin:34px auto 0;flex-wrap:wrap;justify-content:center}
.form input{flex:1 1 250px;background:var(--basalt);border:1px solid var(--line);border-radius:2px;
  padding:15px 17px;color:var(--ink-1);font-family:var(--body);font-size:15px;transition:border-color .3s}
.form input::placeholder{color:var(--ink-3)}
.form input:focus{outline:none;border-color:var(--gold)}
.enq{max-width:760px;margin:36px auto 0;text-align:left;display:grid;gap:20px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:680px){.grid2{grid-template-columns:1fr}}
.fld > label{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:9px}
.fld > label .opt{text-transform:none;letter-spacing:.04em;color:rgba(240,237,229,.28);font-size:10.5px}
.enq input,.enq select,.enq textarea{width:100%;background:var(--basalt);border:1px solid var(--line);
  border-radius:2px;padding:14px 15px;color:var(--ink-1);font-family:var(--body);font-size:15px;
  transition:border-color .3s;appearance:none}
.enq textarea{resize:vertical;min-height:84px}
.enq input::placeholder,.enq textarea::placeholder{color:var(--ink-3)}
.enq input:focus,.enq select:focus,.enq textarea:focus{outline:none;border-color:var(--gold)}
.enq input.bad,.enq select.bad{border-color:#d98b6a}
.enq select{background-image:linear-gradient(45deg,transparent 50%,var(--gold) 50%),
  linear-gradient(135deg,var(--gold) 50%,transparent 50%);
  background-position:calc(100% - 19px) calc(50% + 2px),calc(100% - 14px) calc(50% + 2px);
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:40px;cursor:pointer}
.enq select option{background:var(--basalt);color:var(--ink-1)}
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(134px,1fr));gap:11px;
  align-items:stretch}
.pcard{position:relative;cursor:pointer;display:flex;flex-direction:column}
.pcard input{position:absolute;opacity:0;width:0;height:0}
/* Cards are stretched to the tallest in the row and the price is pinned to the bottom, so a
   two-line name (the pairs) does not leave the row ragged. */
.pc-in{display:flex;flex-direction:column;flex:1;
  border:1px solid var(--line);border-radius:4px;overflow:hidden;
  background:var(--basalt);transition:.3s cubic-bezier(.22,.7,.2,1)}
.pc-price{margin-top:auto}
.pcard:hover .pc-in{border-color:var(--gold);transform:translateY(-3px)}
.pcard input:checked + .pc-in{border-color:var(--gold);background:rgba(224,190,123,.1);
  box-shadow:0 0 0 1px var(--gold) inset}
.pcard input:focus-visible + .pc-in{outline:2px solid var(--gold);outline-offset:2px}
.pc-shot{display:block;aspect-ratio:1.05;overflow:hidden;position:relative;background:var(--dust)}
.pc-shot img{width:100%;height:100%;object-fit:cover;filter:saturate(.86)}
.pc-shot.none{display:flex;align-items:center;justify-content:center;font-family:var(--display);
  font-size:34px;color:var(--ink-3)}
.pcard input:checked + .pc-in .pc-shot::after{content:"✓";position:absolute;top:7px;right:8px;
  width:21px;height:21px;border-radius:50%;background:var(--gold);color:#140F06;
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700}
.pc-nm{display:block;padding:11px 12px 0;font-family:var(--body);font-size:14.5px;
  font-weight:500;letter-spacing:0;text-transform:none;color:var(--ink-1);line-height:1.25}
.pc-sub{display:block;padding:3px 12px 0;font-family:var(--body);font-size:12.5px;
  letter-spacing:0;text-transform:none;color:var(--ink-3);line-height:1.35}
.pc-price{display:block;padding:7px 12px 12px;font-family:var(--mono);font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.chips{display:flex;flex-wrap:wrap;gap:9px}
.chip{position:relative;cursor:pointer}
.chip input{position:absolute;opacity:0;width:0;height:0}
.chip span{display:inline-block;font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;
  text-transform:uppercase;padding:10px 14px;border:1px solid var(--line);border-radius:2px;
  color:var(--ink-2);transition:.28s cubic-bezier(.22,.7,.2,1)}
.chip span:hover{border-color:var(--gold);color:var(--gold)}
.chip input:checked + span{background:rgba(224,190,123,.13);border-color:var(--gold);color:var(--gold)}
.chip input:focus-visible + span{outline:2px solid var(--gold);outline-offset:2px}
.note{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-3);margin-top:18px}

/* ── enquiry modal ────────────────────────────────────────────────────────────
   The form lives in one place and is opened from every page, so a visitor never
   loses the product page they were reading in order to ask about it. Native
   <dialog> is used deliberately: it brings the top layer, the backdrop, focus
   trapping and Escape-to-close without a library. */
dialog.enqd{position:fixed;inset:0;margin:auto;border:0;padding:0;background:transparent;
  max-width:min(920px,94vw);width:100%;max-height:92vh;color:var(--ink-1);overflow:visible}
dialog.enqd::backdrop{background:rgba(6,5,4,.82);backdrop-filter:blur(7px)}
dialog.enqd .sheet{background:var(--obsidian);border:1px solid var(--line);border-radius:12px;
  padding:clamp(26px,4vw,48px);max-height:92vh;overflow-y:auto;text-align:center;
  box-shadow:0 40px 120px rgba(0,0,0,.6)}
dialog.enqd .x{position:sticky;top:0;float:right;margin:-8px -6px 0 0;z-index:2;
  background:var(--basalt);border:1px solid var(--line);color:var(--ink-2);border-radius:50%;
  width:36px;height:36px;font-size:19px;line-height:1;cursor:pointer;transition:.2s}
dialog.enqd .x:hover{border-color:var(--gold);color:var(--gold)}
dialog.enqd .join{text-align:center}
dialog.enqd .join .mark{width:min(120px,32vw);margin:0 auto 20px}
dialog.enqd .join h2{font-size:clamp(30px,4.6vw,52px)}
dialog.enqd .enq{margin-top:26px}
dialog.enqd .lede{margin:0 auto;max-width:60ch}
/* the reveal animation is scroll-driven on the page; inside the dialog it would start
   invisible and never fire, so neutralise it here */
dialog.enqd .r{opacity:1;animation:none}
@media(max-width:680px){
  dialog.enqd{max-width:100vw;max-height:100vh}
  dialog.enqd .sheet{border-radius:0;max-height:100vh;min-height:100vh}
}
@media(max-width:600px){.grid2{grid-template-columns:1fr}}

/* ── three-step flow ── */
/* The steps carry the whole conversion job now, so the progress cue has to be readable at a
   glance without competing with the gold on the product cards. A hairline bar does that. */
.steps{display:flex;align-items:center;gap:14px;margin-bottom:2px}
.sbar{flex:1;height:2px;background:var(--line);border-radius:2px;overflow:hidden}
.sbar > i{display:block;height:100%;width:33.333%;border-radius:2px;
  background:linear-gradient(90deg,var(--gold-lo,#A8873F),var(--gold));
  transition:width .42s cubic-bezier(.4,0,.2,1)}
.scount{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-3);white-space:nowrap}

.step{display:grid;gap:20px;padding:0;animation:stepIn .34s ease both}
.step[hidden]{display:none}
@keyframes stepIn{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  .step{animation:none}
  .sbar > i{transition:none}
}

.steplede{margin:0;font-size:15px;line-height:1.55;color:var(--ink-2,rgba(240,237,229,.62))}

.stepnav{display:flex;gap:11px;align-items:center}
.stepnav .btn-back{flex:0 0 auto}
/* the forward action is the one we want thumbed on a phone, so it takes the rest of the row */
.stepnav #nextBtn,.stepnav #submitBtn{flex:1;justify-content:center}
.stepnav .btn[hidden]{display:none}

/* the custom-build note only exists once someone asks for one */
.reveal{animation:stepIn .3s ease both}
.reveal[hidden]{display:none}

/* The modal header was sized for the old single long form. With a short step 1 it pushed the
   primary action below the fold, which is the one thing a frictionless first step cannot do.
   Trim it inside the dialog only, so the page hero elsewhere is untouched. */
dialog.enqd .join .mark{width:min(78px,19vw);margin:0 auto 13px}
dialog.enqd .join h2{font-size:clamp(25px,3.3vw,38px);margin-bottom:11px}
dialog.enqd .join .eyebrow{font-size:9.5px}
dialog.enqd .lede{font-size:13.5px;line-height:1.55;max-width:54ch}
dialog.enqd .enq{margin-top:20px;gap:17px}

/* Steps 2 and 3 are long enough to scroll on any laptop, so the action bar is pinned to the
   bottom of the sheet rather than left at the end of the content. The gradient stops the
   fields underneath from colliding with the buttons as they scroll past. */
dialog.enqd .stepnav{position:sticky;bottom:0;z-index:3;margin:0 -2px -4px;padding:15px 2px 6px;
  background:linear-gradient(to top,var(--obsidian) 68%,rgba(12,11,10,0))}

/* Steps 2 and 3 are questions, not an introduction — drop the intro copy once it has been read
   so the fields sit higher, which matters most on a phone. */
dialog.enqd[data-step="2"] .lede,
dialog.enqd[data-step="3"] .lede{display:none}
dialog.enqd[data-step="2"] .join .mark,
dialog.enqd[data-step="3"] .join .mark{width:min(58px,15vw);margin-bottom:10px}
dialog.enqd[data-step="2"] .join h2,
dialog.enqd[data-step="3"] .join h2{font-size:clamp(21px,2.6vw,29px);margin-bottom:14px}