/* Leatherback Lighting - /cost/ page layer.
   Only what the shared stylesheet does not already provide. Tokens, the fixture
   CTA, .wrap, .eyebrow, .ribbon, .metallic, .proof, .calc-band, figure and
   figcaption all come from leatherback.css. Every class defined here carries the
   cost- prefix, or is scoped under one that does, so a later shared class of the
   same name can never restyle this page by accident.

   NO BOARD EXISTS FOR THIS PAGE. The geometry is taken from the two built answer
   pages so the three read as one site: the numbered question column and the
   two-column index come from /faq/ (Leatherback FAQ.dc.html, 1440), the ruled
   proof strip and the topic-labelled question rhythm come from /erie/
   (Leatherback Erie.dc.html, 1440). Nothing here invents a new measurement.
   Flagged for design sign-off.

   FLOORS. Nothing under 11px. Every tap target in <main> reaches 44px: the
   breadcrumb and index links by min-height, the buttons by min-height, the phone
   link inside a sentence by a positioned overlay (see "inline phone link"), and
   the links that sit inside a sentence by vertical padding on the inline box.

   MOBILE. Home's 375 pattern: single column, 16px gutters from .wrap, full-width
   CTA, headline before anything else. Breakpoint at 820px, with the proof strip
   following the shared sheet's own 900px switch. */

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

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

/* ---------- header ---------- */
.cost-head{padding:72px 0 0}
.cost-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)}
.cost-crumbs a{display:inline-flex;align-items:center;min-width:44px;min-height:44px;
  padding-right:4px;text-decoration:none}
.cost-head h1{font-size:clamp(34px,3.9vw,56px);line-height:1.04;letter-spacing:-1.6px;
  max-width:24ch;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. */
.cost-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))}
.cost-ribbon-lg path{fill:none;stroke-linecap:round}
.cost-ribbon-lg .a{stroke-width:2.6}
.cost-ribbon-lg .b{stroke:var(--gold-pale);stroke-opacity:.5;stroke-width:1}
.cost-ribbon-lg .s-end{stop-color:var(--gold);stop-opacity:0}
.cost-ribbon-lg .s-deep{stop-color:var(--gold-deep)}
.cost-ribbon-lg .s-hi{stop-color:#fff6e0}   /* the metallic highlight stop, as in --metallic */
.cost-lead{font-size:clamp(18px,1.4vw,20px);line-height:1.65;font-weight:500;color:var(--ink);
  max-width:70ch;margin:0 0 14px}
.cost-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
   centered 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. */
.cost-tel-inline{position:relative;white-space:nowrap}
.cost-tel-inline::after{content:"";position:absolute;left:0;right:0;top:50%;
  height:44px;transform:translateY(-50%)}
.cost-updated{font-size:13px;color:var(--ink-60);margin:0}

/* ---------- the rate card at a glance ----------
   .proof.cost-proof states the override of the shared .proof borders by
   specificity, not by the order the two stylesheets happen to load in. The
   desktop side is written as the exact complement of the shared sheet's
   max-width:900px switch, so a fractional viewport between 900 and 901 CSS px
   (125% and 150% display scaling, browser zoom) can never fall between the two. */
.proof.cost-proof{border:0;margin-top:36px}
.cost-proof .proof-in{padding-top:24px;padding-bottom:24px;
  border-top:1px solid rgba(217,164,65,.3);border-bottom:1px solid rgba(217,164,65,.3)}
@media not all and (max-width:900px){
  .cost-proof .proof-in{grid-template-columns:repeat(4,1fr)}
}

/* ---------- question index ---------- */
.cost-index{padding:44px 0 0}
.cost-index .cost-eyebrow{margin-bottom:18px}
.cost-index-list{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:1fr 1fr;gap:10px 40px;max-width:1100px}
.cost-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)}
.cost-index-list a:hover{color:var(--gold-pale);border-bottom-color:rgba(217,164,65,.5)}
.cost-n{font-size:12px;font-weight:800;color:var(--gold)}

/* ---------- the answers ----------
   Always open. The shared sheet clears the sticky nav from the header's own
   measured height, so there are no per-breakpoint scroll-margin copies here to
   drift out of step with it. */
.cost-answers{padding:56px 0 0}
.cost-q{display:grid;grid-template-columns:64px 1fr;gap:28px;padding:40px 0;
  border-top:1px solid rgba(217,164,65,.2)}
.cost-q-n{font-size:30px;font-weight:800;line-height:1;color:rgba(217,164,65,.55);margin:0}
.cost-q-body{min-width:0}
.cost-q h2{font-size:clamp(25px,2.6vw,34px);line-height:1.14;letter-spacing:-.8px;
  max-width:32ch;margin:0 0 8px}
/* box matches the 112 x 12 viewBox, so the arc sits flush under the question */
.cost-ribbon{width:112px;height:12px;margin:0 0 18px}
.cost-answer{font-size:20px;line-height:1.65;font-weight:500;color:var(--ink);
  max-width:74ch;margin:0 0 16px}
.cost-detail{font-size:17px;line-height:1.75;color:var(--ink-82);max-width:74ch;margin:0 0 16px}
.cost-more-row{margin:0}
.cost-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)}
.cost-more:hover{border-bottom-color:var(--gold-pale)}
.cost-q-body > :last-child{margin-bottom:0}

/* ---------- what the rate buys: the one list on the page ----------
   A ruled list rather than a card grid, because each line is a sentence and a
   card would force it to be a fragment. The gold rule is the same .3 alpha as
   the proof strip above it. */
.cost-includes{list-style:none;margin:0 0 16px;padding:0;max-width:74ch;
  border-top:1px solid rgba(217,164,65,.3)}
.cost-includes li{padding:14px 0;font-size:16px;line-height:1.7;color:var(--ink-82);
  border-bottom:1px solid rgba(217,164,65,.16)}
.cost-includes strong{display:block;font-size:15px;font-weight:800;letter-spacing:.2px;
  color:var(--ink);margin-bottom:2px}

/* ---------- the running-cost chart ---------- */
.cost-chart{margin:12px 0 16px;max-width:760px}
.cost-chart img{width:100%;border-radius:var(--r-carousel)}

/* ---------- calculator 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 and /faq/ uses for its cost handoff. Only the spacing is this page's. */
.cost-calc{margin-top:64px;padding:44px 0}
/* The calculator itself is the shared .calc component, so this column is sized
   to it the way Home's band is. */
.cost-calc-grid{display:grid;grid-template-columns:1fr 470px;gap:56px;align-items:center}
.cost-calc .cost-eyebrow{margin-bottom:14px}
.cost-calc h2{font-size:clamp(28px,2.8vw,40px);line-height:1.08;letter-spacing:-1.2px;margin:0 0 16px}
.cost-calc-lead{font-size:clamp(17px,1.35vw,19px);line-height:1.7;color:var(--ink);
  max-width:64ch;margin:0 0 14px}
.cost-calc-body{font-size:17px;line-height:1.75;color:var(--ink-82);max-width:64ch;margin:0}
.cost-calc-links{display:flex;flex-wrap:wrap;gap:12px;margin:24px 0 0}
.cost-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)}
.cost-btn:not(.cost-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 */
.cost-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)}
.cost-btn-gold:hover{color:var(--gold-ink);filter:brightness(1.06)}
.cost-btn-gold:active{background:var(--gold-deep)}

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

/* ---------- close ---------- */
.cost-close{padding:72px 0 64px}
.cost-close-in{display:flex;align-items:center;gap:32px;flex-wrap:wrap;padding-top:44px;
  border-top:1px solid rgba(217,164,65,.24)}
.cost-close-copy{flex:1 1 320px}
.cost-close h2{font-size:clamp(24px,2.2vw,30px);line-height:1.15;letter-spacing:-.6px;margin:0 0 8px}
.cost-close-copy p{font-size:17px;line-height:1.7;color:var(--ink-82);max-width:56ch;margin:0}
.cost-close .fixture{flex:0 0 auto}
.cost-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}
.cost-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){
  .cost-head{padding-top:36px}
  .cost-crumbs ol{margin-bottom:14px}
  .cost-ribbon-lg{width:200px;margin:16px 0 20px}
  .cost-sub{margin-bottom:24px}
  .proof.cost-proof{margin-top:28px}

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

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

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

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

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