/* Leatherback Lighting - /faq/ page layer.
   Only what the shared stylesheet does not already provide. Tokens, the fixture
   CTA, .wrap, .eyebrow, .ribbon, .metallic, .calc-band, figure and figcaption
   all come from leatherback.css. Values are read off handoff/Leatherback FAQ.dc.html (1440).
   No mobile board exists for this page: everything under 820px follows Home's
   375 pattern and is an engineering default awaiting design sign-off. */

/* The current-page nav state is shared: .nav-links a[aria-current="page"] in leatherback.css. */

/* ---------- shared within the page ---------- */
.faq-head p,.faq-item p,.faq-cost p,.faq-close p{text-wrap:pretty}
.faq-eyebrow{font-size:12px;letter-spacing:3.4px;margin:0 0 16px}

/* ---------- FAQ header ---------- */
.faq-head{padding:72px 0 0}
.faq-crumbs ol{display:flex;align-items:center;gap:10px;list-style:none;margin:0 0 26px;padding:0;
  font-size:13px;line-height:1.4;color:var(--ink-60)}
.faq-crumbs a{display:inline-flex;align-items:center;min-width:44px;min-height:44px;
  padding-right:4px;text-decoration:none}
.faq-head h1{font-size:clamp(34px,3.9vw,56px);line-height:1.04;letter-spacing:-1.6px;
  max-width:26ch;margin:0 0 6px}
/* the headline ribbon: the house two-stroke ribbon at H1 scale. Box and viewBox
   agree (236 x 15) so the arc starts flush with the headline. */
.faq-ribbon-lg{display:block;width:236px;max-width:100%;height:15px;margin:18px 0 22px;
  overflow:visible;filter:drop-shadow(0 2px 8px rgba(217,164,65,.45))}
.faq-ribbon-lg path{fill:none;stroke-linecap:round}
.faq-ribbon-lg .a{stroke-width:2.6}
.faq-ribbon-lg .b{stroke:var(--gold-pale);stroke-opacity:.5;stroke-width:1}
.faq-ribbon-lg .s-end{stop-color:var(--gold);stop-opacity:0}
.faq-ribbon-lg .s-deep{stop-color:var(--gold-deep)}
.faq-ribbon-lg .s-hi{stop-color:#fff6e0} /* the metallic highlight stop, as in --metallic */
.faq-lead{font-size:clamp(17px,1.35vw,19px);line-height:1.7;color:var(--ink);
  max-width:70ch;margin:0 0 14px}
.faq-sub{font-size:17px;line-height:1.7;color:var(--ink-82);max-width:70ch;margin:0 0 30px}
/* inline phone link: the link box stays the size of its text, so the line pitch
   and the focus ring are untouched. The 44px target is a positioned overlay
   centred on the number; being positioned it sits above the lines either side,
   so the whole 44px band belongs to the link. nowrap keeps it one box. */
.faq-tel-inline{position:relative;white-space:nowrap}
.faq-tel-inline::after{content:"";position:absolute;left:0;right:0;top:50%;
  height:44px;transform:translateY(-50%)}
.faq-updated{font-size:13px;color:var(--ink-60);margin:0;padding-bottom:36px;
  border-bottom:1px solid rgba(217,164,65,.2)}

/* ---------- question index ---------- */
.faq-index{padding:36px 0 0}
.faq-index .faq-eyebrow{margin-bottom:18px}
.faq-index-list{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:1fr 1fr;gap:10px 40px;max-width:1100px}
.faq-index-list a{display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:baseline;
  min-height:44px;padding:8px 0;font-size:16px;line-height:1.5;color:var(--ink-82);
  text-decoration:none;border-bottom:1px solid rgba(217,164,65,.14);
  transition:color var(--t-fast),border-color var(--t-fast)}
.faq-index-list a:hover{color:var(--gold-pale);border-bottom-color:rgba(217,164,65,.5)}
.faq-n{font-size:12px;font-weight:800;color:var(--gold)}

/* ---------- the answers ----------
   Always open. scroll-margin clears the sticky nav when the index jumps here:
   96px single-row nav from 1240 up, two rows between 821 and 1239. */
.faq-answers{padding:56px 0 0}
.faq-item{display:grid;grid-template-columns:64px 1fr;gap:28px;padding:40px 0;
  border-top:1px solid rgba(217,164,65,.2)}
.faq-item-n{font-size:30px;font-weight:800;line-height:1;color:rgba(217,164,65,.55);margin:0}
.faq-body{min-width:0}
.faq-item h2{font-size:clamp(25px,2.6vw,34px);line-height:1.14;letter-spacing:-.8px;
  max-width:30ch;margin:0 0 8px}
/* box matches the 112 x 12 viewBox, so the arc sits flush under the question */
.faq-ribbon{width:112px;height:12px;margin:0 0 18px}
.faq-answer{font-size:20px;line-height:1.65;font-weight:500;color:var(--ink);
  max-width:74ch;margin:0 0 16px}
.faq-detail{font-size:17px;line-height:1.75;color:var(--ink-82);max-width:74ch;margin:0 0 16px}
.faq-more-row{margin:0}
.faq-more{display:inline-flex;align-items:center;min-height:44px;font-size:16px;font-weight:700;
  color:var(--gold-pale);text-decoration:none;border-bottom:1px solid rgba(240,217,160,.4);
  transition:border-color var(--t-fast)}
.faq-more:hover{border-bottom-color:var(--gold-pale)}
.faq-body > :last-child{margin-bottom:0}

/* the mockup example, present only once its content slot is ready */
.faq-figure{margin:12px 0 0;max-width:760px}
.faq-figure img{width:100%;border-radius:var(--r-carousel)}


/* ---------- cost handoff: the house diagonal band ----------
   The band itself (ground, gold glow, 1320 width, the diagonal and its 32px
   step at 1000px) is the shared .calc-band, the same surface Home uses for
   cost. Only the spacing is this page's. */
.faq-cost{margin-top:64px;padding:44px 0}
.faq-cost-grid{display:grid;grid-template-columns:1fr 360px;gap:48px;align-items:center}
.faq-cost .faq-eyebrow{margin-bottom:14px}
.faq-cost h2{font-size:clamp(28px,2.8vw,40px);line-height:1.08;letter-spacing:-1.2px;margin:0 0 16px}
.faq-cost-lead{font-size:clamp(17px,1.35vw,19px);line-height:1.7;color:var(--ink);
  max-width:64ch;margin:0 0 14px}
.faq-cost-body{font-size:17px;line-height:1.75;color:var(--ink-82);max-width:64ch;margin:0}
.faq-cost-links{display:flex;flex-direction:column;gap:12px}
.faq-btn{display:flex;align-items:center;justify-content:center;min-height:54px;padding:8px 20px;
  border:1px solid rgba(217,164,65,.4);border-radius:var(--r-btn);
  font-size:16px;font-weight:700;line-height:1.3;text-align:center;text-decoration:none;
  color:var(--gold-pale);
  transition:background var(--t-fast),border-color var(--t-fast),filter var(--t-fast)}
.faq-btn:not(.faq-btn-gold):hover{color:var(--gold-pale);border-color:var(--gold);
  background:rgba(217,164,65,.08)}
/* gold fill: ink is --gold-ink, never cream */
.faq-btn-gold{border-color:transparent;font-weight:800;color:var(--gold-ink);
  background:linear-gradient(180deg,var(--gold-pale) 0%,var(--gold) 46%,var(--gold-deep) 100%);
  box-shadow:0 10px 26px rgba(217,164,65,.28),inset 0 1px 0 rgba(255,255,255,.6)}
.faq-btn-gold:hover{color:var(--gold-ink);filter:brightness(1.06)}
.faq-btn-gold:active{background:var(--gold-deep)}

@media (max-width:1000px){
  .faq-cost-grid{grid-template-columns:1fr;gap:30px}
}

/* ---------- close ---------- */
.faq-close{padding:72px 0 64px}
.faq-close-in{display:flex;align-items:center;gap:32px;flex-wrap:wrap;padding-top:44px;
  border-top:1px solid rgba(217,164,65,.24)}
.faq-close-copy{flex:1 1 320px}
.faq-close h2{font-size:clamp(24px,2.2vw,30px);line-height:1.15;letter-spacing:-.6px;margin:0 0 8px}
.faq-close-copy p{font-size:17px;line-height:1.7;color:var(--ink-82);max-width:56ch;margin:0}
.faq-close .fixture{flex:0 0 auto}
.faq-close-tel{flex:0 0 auto;display:inline-flex;align-items:center;min-height:44px;
  font-size:24px;font-weight:800;line-height:1.2;color:var(--ink);text-decoration:none;white-space:nowrap}
.faq-close-tel:hover{color:var(--gold-pale)}

/* ---------- 820 and under: Home's 375 pattern ----------
   Single column, 16px gutters from .wrap, full-width CTA, headline first. */
@media (max-width:820px){
  .faq-head{padding-top:36px}
  .faq-crumbs ol{margin-bottom:14px}
  .faq-ribbon-lg{width:200px;margin:16px 0 20px}
  .faq-sub{margin-bottom:24px}
  .faq-updated{padding-bottom:28px}

  .faq-index{padding-top:28px}
  .faq-index-list{grid-template-columns:1fr;gap:0}

  .faq-answers{padding-top:36px}
  .faq-item{grid-template-columns:1fr;gap:10px;padding:32px 0}
  .faq-item-n{font-size:22px}
  .faq-answer{font-size:18px}
  .faq-detail{font-size:16px}

  .faq-cost{margin-top:40px;padding:36px 0}

  .faq-close{padding:52px 0 52px}
  .faq-close-in{flex-direction:column;align-items:stretch;gap:24px;padding-top:36px}
  .faq-close-copy{flex:0 0 auto}
  .faq-close .fixture{width:100%}
  .faq-close-tel{justify-content:center}
}

@media (prefers-reduced-motion:reduce){
  .faq-index-list a,.faq-more,.faq-btn{transition:none}
}