/* Leatherback Lighting - /erie/ page layer.
   Built from 03-design-system/handoff/Leatherback Erie.dc.html (board 15a, 1440).
   Tokens, the fixture CTA, .proof, .eyebrow, .caption, .link-arrow and the footer
   all come from leatherback.css. Only what that file does not provide lives here,
   and every class defined here carries the erie- prefix, or is scoped under one
   that does, so a later shared class of the same name can never restyle this
   page by accident.

   MOBILE. No 375 board exists for this page. Everything under the 900px and
   820px queries is the engineering default from Home's 375 pattern: single
   column, 16px gutters, full-width CTA. Flagged for design sign-off.

   FLOORS. Nothing under 11px. Every tap target in <main> reaches 44px: the
   breadcrumb link by min-width and min-height, the close phone link by
   min-height, and the links that sit inside a sentence by vertical padding on
   the inline box (see "in-body links" below). The nav and footer are shared.

   BREAKPOINT COMPLEMENTS. leatherback.css switches the proof strip at
   max-width:900px. The desktop side here is written as the exact complement,
   "not all and (max-width:900px)", rather than min-width:901px, so a fractional
   viewport between 900 and 901 CSS px (125% and 150% display scaling, browser
   zoom) can never fall between the two. */

main p{text-wrap:pretty}

/* ---------- Erie header ---------- */
.erie-head{padding:72px 0 0}
.erie-crumbs ol{list-style:none;display:flex;align-items:center;gap:10px;margin:0 0 26px;padding:0;
  font-size:13px;color:var(--ink-60)}
.erie-crumbs a{display:inline-flex;align-items:center;min-width:44px;min-height:44px;padding-right:4px;
  text-decoration:none}
/* the separator is its own aria-hidden list item, as on /faq/, so no screen
   reader announces the angle mark. .35 is the board's value, ornament not text. */
.erie-crumbs-sep{color:rgba(244,247,255,.35)}
.erie-head .eyebrow{margin-bottom:16px}
.erie-head h1{max-width:24ch;margin:0 0 6px;line-height:1.04;letter-spacing:-1.7px}

/* the header ribbon: the house two-stroke ribbon at headline scale, with the
   sheen gradient running through the top stroke. The gradient stops take their
   colour here rather than from attributes in the markup. */
.erie-ribbon{display:block;width:250px;max-width:70%;height:15px;margin:18px 0 22px;overflow:visible;
  filter:drop-shadow(0 2px 8px rgba(217,164,65,.45))}
.erie-ribbon path{fill:none;stroke-linecap:round}
.erie-ribbon .a{stroke-width:2.6}
.erie-ribbon .b{stroke:var(--gold-pale);stroke-opacity:.5;stroke-width:1}
.erie-ribbon .s-edge{stop-color:var(--gold)}
.erie-ribbon .s-deep{stop-color:var(--gold-deep)}
.erie-ribbon .s-sheen{stop-color:#fff6e0}   /* the first stop of --metallic; it has no token of its own */

/* the lead is the page's own class, not .lead plus overrides */
.erie-lead{font-size:clamp(18px,1.4vw,20px);line-height:1.65;font-weight:400;color:var(--ink);
  max-width:72ch;margin:0 0 14px}
.erie-intro{max-width:72ch;line-height:1.75;color:var(--ink-82);margin:0 0 30px}
.erie-head-cta{margin:6px 0 46px}   /* clears the fixture's floor reflection */
.erie-updated{margin:0;padding-bottom:36px;border-bottom:1px solid rgba(217,164,65,.2)}

/* ---------- Erie proof: four figures, ruled inside the content column ----------
   .proof.erie-proof states the override of the shared .proof borders by
   specificity, not by the order the two stylesheets happen to load in. */
.proof.erie-proof{border:0;margin-top:36px}
.erie-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){
  .erie-proof .proof-in{grid-template-columns:repeat(4,1fr)}
}

/* ---------- section rhythm: the board runs 64px between sections on one ground ---------- */
.erie-section{padding:64px 0 0}
.erie-section .eyebrow{margin-bottom:14px}
.erie-section h2{font-size:clamp(28px,2.95vw,42px);line-height:1.1;letter-spacing:-1.2px;margin:0 0 14px}
.erie-sub{max-width:68ch;line-height:1.75;color:var(--ink-82);margin:0}

/* The installs lead counts the cards ("Three of them"). It ships inside the
   erie-proof-randa slot, and a build guard in the template stops that slot going
   live without erie-proof-allison. This rule is only the visual backstop behind
   that guard: if the grid ever holds fewer than three cards the sentence is not
   shown. Written as a hide rule so a browser without :has() drops it and simply
   shows the lead. The proper fix is a slot of its own in data/slots.json; when
   that exists, delete this rule and the guard together. */
.erie-installs:not(:has(.erie-install:nth-child(3))) .erie-sub{display:none}

/* ---------- Erie installs ----------
   One, two or three cards, and every count has to read as finished.
   Three or two: equal columns. One: the card becomes a feature, photograph
   beside its own story, so a single job never sits in a third of a row. */
.erie-install-grid{display:flex;align-items:flex-start;gap:24px;margin-top:40px}
.erie-install{flex:1 1 0;min-width:0}
.erie-install img{width:100%;height:260px;object-fit:cover;object-position:50% 55%;
  border-radius:var(--r-carousel);border:1px solid rgba(217,164,65,.22)}
.erie-install-body{padding-top:18px}
.erie-install-kicker{font-size:11px;font-weight:800;letter-spacing:2px;text-transform:uppercase;
  color:var(--gold);margin:0 0 8px}
.erie-install h3{font-size:22px;line-height:1.25;letter-spacing:-.3px;margin:0 0 10px}
.erie-install-body p:last-child{font-size:15px;line-height:1.7;color:var(--ink-82);margin:0 0 10px}
.erie-install figcaption{font-size:13px;line-height:1.55;color:var(--ink-60);margin-top:0}

@media not all and (max-width:900px){
  .erie-install:only-child{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
    column-gap:56px;align-items:center}
  .erie-install:only-child img{grid-column:1;grid-row:1 / span 2;height:auto;aspect-ratio:3/2}
  .erie-install:only-child .erie-install-body{grid-column:2;grid-row:1;align-self:end;padding-top:0}
  .erie-install:only-child figcaption{grid-column:2;grid-row:2;align-self:start}
  .erie-install:only-child h3{font-size:clamp(24px,2.1vw,30px);line-height:1.18;letter-spacing:-.7px;margin-bottom:14px}
  .erie-install:only-child .erie-install-body p:last-child{font-size:17px;line-height:1.75;margin-bottom:14px}
}
@media (max-width:900px){
  .erie-install-grid{flex-direction:column;gap:36px;margin-top:32px}
  .erie-install{flex:0 0 auto;width:100%}
  .erie-install img{height:auto;aspect-ratio:3/2}
}

/* ---------- Erie clients: the diagonal band with two review cards ----------
   The two band grounds on this page (here and the close) are the board's own
   gradients. Their stops are not in the README palette and have no token;
   /faq/ carries the same close-band ground. Flagged for design. */
.erie-band{padding:48px;border-radius:var(--r-band);
  background:radial-gradient(110% 70% at 50% 0%,#12193a 0%,rgba(18,25,58,0) 62%),var(--navy-alt)}
.erie-band h2{font-size:clamp(27px,2.8vw,40px);letter-spacing:-1.1px;margin-bottom:12px}
.erie-band .erie-sub{max-width:62ch;font-size:16px;line-height:1.7}
.erie-quote-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:36px}
.erie-quote-card{padding:32px 36px;background:var(--blue-card);border:1px solid rgba(217,164,65,.26);
  border-radius:var(--r-card)}
.erie-quote-stars{font-size:13px;letter-spacing:3px;color:var(--gold);margin:0 0 16px;line-height:1}
.erie-quote-card blockquote{margin:0 0 18px}
.erie-quote-card blockquote p{margin:0;font-size:clamp(18px,1.5vw,21px);line-height:1.6;font-weight:500;color:var(--ink)}
.erie-quote-card figcaption{margin-top:0;font-size:14px;line-height:1.6;font-weight:700;color:var(--gold-pale)}
.erie-quote-card figcaption span{display:block;font-weight:500;color:var(--ink-60);margin-top:3px}
.erie-quote-card .link-arrow{font-size:14px;margin-top:6px}
@media (max-width:900px){
  .erie-quote-grid{grid-template-columns:1fr}
}

/* ---------- Erie specifics: three ruled columns ---------- */
.erie-specifics h2{max-width:30ch}
.erie-specifics-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:40px}
.erie-specific{padding-top:22px;border-top:2px solid rgba(217,164,65,.45)}
.erie-specific h3{font-size:22px;line-height:1.25;letter-spacing:-.3px;margin:0 0 12px}
.erie-specific p{font-size:16px;line-height:1.7;color:var(--ink-82);margin:0 0 10px}
/* .7 is the board's value for the quieter second paragraph. It sits between
   --ink-82 and --ink-60 and has no token. Flagged for design. */
.erie-specific p + p{font-size:15px;color:rgba(244,247,255,.7);margin-bottom:0}
.erie-specific-photo{margin-top:18px}
.erie-specific-photo img{width:100%;aspect-ratio:3/2;object-fit:cover;
  border-radius:var(--r-carousel);border:1px solid rgba(217,164,65,.22)}
@media (max-width:900px){
  .erie-specifics-grid{grid-template-columns:1fr;gap:32px;margin-top:32px}
}

/* ---------- Erie questions: the four slots ----------
   Each article has an id for deep links. The shared sheet clears the sticky nav
   from the header's own measured height, so there are no per-breakpoint copies
   here to drift out of step with it. */
.erie-qa-list{margin-top:40px}
.erie-qa{display:grid;grid-template-columns:200px minmax(0,1fr);gap:36px;padding:36px 0;
  border-top:1px solid rgba(217,164,65,.2)}
.erie-qa:last-child{padding-bottom:0}
/* The board's own label here read "Slot 1 / The local objection" and so on. That is
   this repo's planning vocabulary, not customer copy, so the label now names the
   subject of the question instead. The board draws it at .7 alpha, 4.65:1 on the page
   ground; it is lifted to .78, 5.54:1, because the label is 11px. A recorded deviation. */
.erie-qa-topic{font-size:11px;font-weight:800;letter-spacing:2px;text-transform:uppercase;line-height:1.6;
  color:rgba(217,164,65,.78);margin:8px 0 0}
.erie-qa-body{min-width:0}   /* lets the single mobile column shrink below its longest word */
.erie-qa h3{font-size:clamp(22px,2.1vw,30px);line-height:1.18;letter-spacing:-.7px;max-width:32ch;margin:0 0 14px}
.erie-qa-answer{font-size:clamp(17px,1.35vw,19px);line-height:1.7;font-weight:500;color:var(--ink);
  max-width:74ch;margin:0 0 14px}
.erie-qa-detail{line-height:1.75;color:var(--ink-82);max-width:74ch;margin:0}
@media (max-width:820px){
  .erie-qa-list{margin-top:28px}
  .erie-qa{grid-template-columns:minmax(0,1fr);gap:8px;padding:28px 0}
  .erie-qa-topic{margin:0}
}

/* ---------- in-body links ----------
   A link inside a sentence is one text line tall. Vertical padding on the inline
   box grows the hit area past 44px without moving the line, the technique
   /faq/ uses for its inline phone link. 14px rather than 12 so the 16px
   paragraphs still clear the floor if a shorter fallback font is in use. */
.erie-specific p a,.erie-qa-answer a,.erie-qa-detail a{padding:14px 0}

/* ---------- Close ---------- */
.erie-close{padding-bottom:64px}
.erie-close-band{display:flex;align-items:center;flex-wrap:wrap;gap:32px;padding:44px 48px;
  border-radius:var(--r-band);
  background:radial-gradient(120% 80% at 84% 12%,#1a1408 0%,rgba(26,20,8,0) 58%),
    linear-gradient(160deg,#0a0f22 0%,#05070f 52%,#0b0d14 100%)}
.erie-close-copy{flex:1 1 340px}
.erie-close-band h2{font-size:clamp(26px,2.4vw,34px);line-height:1.12;letter-spacing:-.9px;margin:0 0 10px}
.erie-close-copy p{margin:0;max-width:56ch;color:var(--ink-82)}
.erie-close-cta{flex:0 0 auto;margin:0}
.erie-close-tel{flex:0 0 auto;display:inline-flex;align-items:center;min-height:44px;
  font-size:24px;font-weight:800;color:var(--ink);text-decoration:none;white-space:nowrap}
.erie-close-tel:hover{color:var(--gold-pale)}

/* ---------- mobile: Home's 375 pattern ---------- */
@media (max-width:820px){
  .erie-head{padding-top:12px}
  .erie-crumbs ol{margin-bottom:10px}
  .erie-ribbon{margin:14px 0 18px}
  .erie-intro{margin-bottom:24px}
  .erie-updated{padding-bottom:28px}
  .proof.erie-proof{margin-top:28px}
  .erie-section{padding-top:56px}
  .erie-band{padding:32px 20px;border-radius:var(--r-card)}
  .erie-quote-card{padding:26px 22px}
  .erie-close{padding-bottom:56px}
  .erie-close-band{padding:32px 20px;border-radius:var(--r-card);gap:22px}
  .erie-close-cta{flex:1 1 100%}
  /* full-width CTA from the 820 breakpoint, not only from the shared 680 one:
     the header CTA appears at 820 and the nav CTA goes at 820 */
  .erie-head-cta .fixture,.erie-close-cta .fixture{width:100%}
  .erie-close-tel{font-size:22px}
}