/* Leatherback Lighting - /how-it-works/ page layer.
   Tokens, the fixture CTA, .wrap, .eyebrow, .ribbon, .metallic, .proof,
   .calc-band, .caption, figure and figcaption all come from leatherback.css.
   Only what that file does not provide lives here, and every class defined here
   carries the hiw- 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 /how-it-works/. The measurements are taken from the pages
   that do: the header, the question rhythm and the cost handoff follow
   handoff/Leatherback FAQ.dc.html (1440) as /faq/ and /hoa/ already apply it,
   and the proof strip and the band grounds follow Leatherback Erie.dc.html
   (board 15a, 1440). The one device that is this page's own is the step rail:
   a single gold hairline running down the left edge of the four steps with a
   diamond at each one, built from the shared .diamond geometry rather than a
   new shape. A process page is a sequence, and the rail is the sequence. It is
   flagged for design sign-off along with the rest.

   MOBILE. Home's 375 pattern: single column, 16px gutters from .wrap,
   full-width CTA, headline before photograph, breakpoints at 900 and 820. The
   rail survives the stack, because the order is still the content.

   FLOORS. Nothing under 11px; the smallest type here is the 12px step label.
   Every tap target in <main> reaches 44px: the breadcrumb link, the four index
   links, the "more" links and the close phone link by min-height, the three
   cost buttons at 54px.

   BREAKPOINT COMPLEMENTS. leatherback.css switches the shared proof strip at
   max-width:900px. The desktop side here is written as its 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}

.hiw-eyebrow{font-size:12px;letter-spacing:3.4px;margin:0 0 16px}

/* ---------- header ---------- */
.hiw-head{padding:72px 0 0}
.hiw-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)}
.hiw-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/, /erie/ and /hoa/,
   so no screen reader announces the angle mark. .35 is the boards' value for it. */
.hiw-crumbs-sep{color:rgba(244,247,255,.35)}
.hiw-head h1{font-size:clamp(32px,3.7vw,54px);line-height:1.04;letter-spacing:-1.6px;
  max-width:24ch;margin:0 0 6px}

/* the header ribbon: the house two-stroke ribbon at headline scale, with the
   sheen gradient running through the top stroke. Box and viewBox agree
   (236 x 15) so the arc starts flush with the headline. */
.hiw-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))}
.hiw-ribbon path{fill:none;stroke-linecap:round}
.hiw-ribbon .a{stroke-width:2.6}
.hiw-ribbon .b{stroke:var(--gold-pale);stroke-opacity:.5;stroke-width:1}
.hiw-ribbon .s-edge{stop-color:var(--gold)}
.hiw-ribbon .s-deep{stop-color:var(--gold-deep)}
.hiw-ribbon .s-sheen{stop-color:#fff6e0}   /* the first stop of --metallic; it has no token of its own */

.hiw-lead{font-size:clamp(18px,1.4vw,20px);line-height:1.65;color:var(--ink);
  max-width:72ch;margin:0 0 14px}
.hiw-sub{font-size:17px;line-height:1.75;color:var(--ink-82);max-width:72ch;margin:0 0 30px}
.hiw-updated{margin:0;padding-bottom:36px;border-bottom:1px solid rgba(217,164,65,.2)}

/* ---------- proof: five figures, ruled inside the content column ----------
   .proof.hiw-proof states the override of the shared .proof borders by
   specificity, not by the order the two stylesheets happen to load in. The
   five-column desktop grid is the shared default, so it is not restated. */
.proof.hiw-proof{border:0;margin-top:36px}
.hiw-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)}

/* ---------- the index: four steps, four links ---------- */
.hiw-index{padding:44px 0 0}
.hiw-index-list{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:14px;
  margin:0;padding:0;counter-reset:none}
.hiw-index-list a{display:flex;flex-direction:column;gap:6px;min-height:44px;height:100%;
  padding:18px 20px;text-decoration:none;
  background:var(--blue-card);border:1px solid rgba(217,164,65,.22);border-radius:var(--r-card);
  transition:border-color var(--t-fast),background var(--t-fast)}
.hiw-index-list a:hover{border-color:var(--gold);background:rgba(217,164,65,.08)}
.hiw-n{font-size:12px;font-weight:800;letter-spacing:2.4px;color:var(--gold)}
.hiw-index-t{font-size:17px;font-weight:700;line-height:1.3;letter-spacing:-.3px;color:var(--ink)}
.hiw-index-w{font-size:13px;line-height:1.5;color:var(--ink-60)}

/* ---------- the four steps ----------
   The rail is one hairline per step body, and each body fills its own row from
   edge to edge, so the four hairlines meet and read as a single line down the
   page. The diamond is the shared 9px mark at 11px, sat on the line.
   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. */
.hiw-steps{list-style:none;margin:8px 0 0;padding:0}
.hiw-step-in{display:grid;grid-template-columns:220px minmax(0,1fr);gap:36px;align-items:start}
.hiw-step-aside{padding-top:46px}
.hiw-step-no{font-size:12px;font-weight:800;letter-spacing:3.4px;text-transform:uppercase;
  line-height:1.5;color:var(--gold);margin:0 0 6px}
.hiw-step-when{font-size:13px;line-height:1.6;color:var(--ink-60);margin:0}
.hiw-step-body{position:relative;min-width:0;   /* lets the single mobile column shrink below its longest word */
  padding:44px 0 44px 30px;border-left:1px solid rgba(217,164,65,.28)}
.hiw-step-body::before{content:"";position:absolute;left:-6px;top:50px;width:11px;height:11px;
  background:var(--gold);transform:rotate(45deg);
  box-shadow:0 0 0 4px var(--blue-deep),0 0 14px rgba(217,164,65,.55)}
.hiw-step 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 heading */
.hiw-rule{width:112px;height:12px;margin:0 0 18px}
.hiw-step-lead{font-size:clamp(17px,1.35vw,20px);line-height:1.65;font-weight:500;color:var(--ink);
  max-width:74ch;margin:0 0 16px}
.hiw-detail{font-size:17px;line-height:1.75;color:var(--ink-82);max-width:74ch;margin:0 0 16px}
.hiw-step-body > :last-child{margin-bottom:0}

/* the "more" row: one or two links, each its own 44px target */
.hiw-more-row{display:flex;flex-wrap:wrap;gap:6px 28px;margin:4px 0 0}
.hiw-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)}
.hiw-more:hover{border-bottom-color:var(--gold-pale)}

.hiw-figure{margin:26px 0 22px;max-width:620px}
.hiw-figure img{width:100%;aspect-ratio:3/2;object-fit:cover;
  border-radius:var(--r-carousel);border:1px solid rgba(217,164,65,.22)}
/* the app frame is a portrait screenshot, so it keeps its own ratio and sits small */
.hiw-figure-phone{max-width:260px}
.hiw-figure-phone img{aspect-ratio:auto;border-radius:22px;border-color:rgba(217,164,65,.3)}

/* ---------- section rhythm ---------- */
.hiw-section{padding:64px 0 0}
.hiw-section h2{font-size:clamp(28px,2.95vw,42px);line-height:1.1;letter-spacing:-1.2px;
  max-width:26ch;margin:0 0 14px}

/* ---------- the four questions ----------
   Always open, never collapsed: the h3 and the .hiw-qa-answer under it are the
   speakable targets, and the FAQPage text is that answer plus the detail, word
   for word. The topic label names the subject of the question and never this
   repo's own slot vocabulary (decision log S33). /erie/ draws it at .7 alpha;
   it is lifted to .78, 5.54:1 on the page ground, because the label is 11px. */
.hiw-qa-list{margin-top:36px}
.hiw-qa{display:grid;grid-template-columns:200px minmax(0,1fr);gap:36px;padding:36px 0;
  border-top:1px solid rgba(217,164,65,.2)}
.hiw-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}
.hiw-qa-body{min-width:0}
.hiw-qa h3{font-size:clamp(21px,2.1vw,27px);line-height:1.18;letter-spacing:-.6px;
  max-width:32ch;margin:0 0 12px}
.hiw-qa-answer{font-size:clamp(17px,1.3vw,19px);line-height:1.65;font-weight:500;color:var(--ink);
  max-width:74ch;margin:0 0 14px}
.hiw-qa-detail{font-size:17px;line-height:1.75;color:var(--ink-82);max-width:74ch;margin:0}

/* ---------- 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, /faq/ and /hoa/
   use for cost. Only the spacing and the button column are this page's. */
.hiw-cost{margin-top:64px;padding:44px 0}
.hiw-cost-grid{display:grid;grid-template-columns:1fr 360px;gap:48px;align-items:center}
.hiw-cost .hiw-eyebrow{margin-bottom:14px}
.hiw-cost h2{font-size:clamp(28px,2.8vw,40px);line-height:1.08;letter-spacing:-1.2px;
  max-width:24ch;margin:0 0 16px}
.hiw-cost-lead{font-size:clamp(17px,1.35vw,19px);line-height:1.7;color:var(--ink);
  max-width:64ch;margin:0 0 14px}
.hiw-cost-body{font-size:17px;line-height:1.75;color:var(--ink-82);max-width:64ch;margin:0}
.hiw-cost-links{display:flex;flex-direction:column;gap:12px}
.hiw-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)}
.hiw-btn:not(.hiw-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 */
.hiw-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)}
.hiw-btn-gold:hover{color:var(--gold-ink);filter:brightness(1.06)}
.hiw-btn-gold:active{background:var(--gold-deep)}
@media (max-width:1000px){
  .hiw-cost-grid{grid-template-columns:1fr;gap:30px}
}

/* ---------- close ---------- */
.hiw-close{padding-bottom:64px}
.hiw-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%)}
.hiw-close-copy{flex:1 1 340px}
.hiw-close-band h2{font-size:clamp(26px,2.4vw,34px);line-height:1.12;letter-spacing:-.9px;
  max-width:24ch;margin:0 0 10px}
.hiw-close-copy p{margin:0;max-width:56ch;color:var(--ink-82)}
.hiw-close-cta{flex:0 0 auto;margin:0}
.hiw-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}
.hiw-close-tel:hover{color:var(--gold-pale)}

/* ---------- 900 and under: the index and the question rail stack ---------- */
@media (max-width:900px){
  .hiw-index-list{grid-template-columns:repeat(2,1fr)}
  .hiw-qa{grid-template-columns:minmax(0,1fr);gap:8px;padding:30px 0}
  .hiw-qa-topic{margin:0}
}

/* ---------- 820 and under: Home's 375 pattern ---------- */
@media (max-width:820px){
  .hiw-head{padding-top:12px}
  .hiw-crumbs ol{margin-bottom:10px}
  .hiw-ribbon{width:200px;margin:14px 0 18px}
  .hiw-sub{margin-bottom:24px}
  .hiw-updated{padding-bottom:28px}
  .proof.hiw-proof{margin-top:28px}

  .hiw-index{padding-top:36px}
  .hiw-index-list{grid-template-columns:1fr;gap:10px}
  .hiw-index-list a{flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:4px 12px;
    padding:14px 18px}
  .hiw-index-w{width:100%}

  /* the aside becomes a caption over the step, and the rail keeps running */
  .hiw-step-in{grid-template-columns:minmax(0,1fr);gap:0}
  .hiw-step-aside{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;
    padding:34px 0 0 20px;border-left:1px solid rgba(217,164,65,.28)}
  .hiw-step-no{margin:0}
  .hiw-step-body{padding:10px 0 34px 20px}
  .hiw-step-body::before{top:-32px;left:-6px}
  .hiw-detail{font-size:16px}
  .hiw-figure{margin:22px 0 18px}

  .hiw-section{padding-top:56px}
  .hiw-qa-detail{font-size:16px}

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

  .hiw-close{padding-bottom:56px}
  .hiw-close-band{padding:32px 20px;border-radius:var(--r-card);gap:22px}
  .hiw-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 */
  .hiw-close-cta .fixture{width:100%}
  .hiw-close-tel{font-size:22px}
}

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

/* ---------- page hero: copy over the photograph ----------
   The same treatment as the home hero, so an interior page reads as part of the
   same site: the image is the ground, its top and bottom edges fade out with a
   mask rather than stopping on a hard line, a scrim runs left to right so the
   copy stays readable over it, and the caption sits underneath in the content
   column. Eager, not lazy: it is the first thing on the page.

   The frame height is the first screen minus the header, measured into
   --header-h by the script in nav.html, with a floor so a short window cannot
   crush the copy. */
.page-hero{margin:0;position:relative}
.page-hero-frame{position:relative;overflow:hidden;isolation:isolate;
  min-height:max(460px,calc(100vh - var(--header-h,140px) - 140px))}
.page-hero-frame > img{position:absolute;inset:0;display:block;width:100%;height:100%;
  max-width:none;object-fit:cover;object-position:50% 44%;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.55) 6%,#000 16%,#000 80%,rgba(0,0,0,.45) 95%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.55) 6%,#000 16%,#000 80%,rgba(0,0,0,.45) 95%,transparent 100%)}
/* the scrim spans the whole frame, not just the content column */
.page-hero-frame::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  /* The subject of this photograph is on the LEFT, so the scrim and the copy sit on
     the right and leave him in the clear. The home hero is the mirror of this for
     the same reason: copy goes opposite the subject, not always to one side. */
  background:
    linear-gradient(270deg,rgba(5,13,32,.90),rgba(5,13,32,.66) 42%,rgba(5,13,32,.12) 76%,transparent 100%),
    linear-gradient(180deg,rgba(5,13,32,.34),transparent 32%)}
.page-hero-copy{position:relative;z-index:4;padding:44px 0 48px}
/* A real two column grid rather than auto margins: with a long headline a
   max-width plus margin-left:auto does nothing, because the element is already
   as wide as the space. The copy lives in column two; column one is the
   photograph. */
.page-hero-copy .wrap{max-width:var(--wrap);display:grid;
  grid-template-columns:1fr minmax(0,52ch)}
.page-hero-copy .wrap > *{grid-column:2}
.page-hero-cap{display:block;margin:14px 0 0}
.page-hero-cap .wrap{display:block;max-width:var(--wrap)}

@media (max-width:980px){
  .page-hero-frame{min-height:0}
  .page-hero-frame > img{position:absolute;inset:0}
  .page-hero-copy{padding:34px 0 38px}
}
@media (max-width:820px){
  /* On a phone the scrim goes top to bottom instead of left to right, because the
     copy fills the width and there is no clear side for it to sit against. */
  .page-hero-frame::after{
    background:linear-gradient(180deg,rgba(5,13,32,.78),rgba(5,13,32,.88))}
  .page-hero-copy{padding:26px 0 30px}
  .page-hero-copy .wrap{grid-template-columns:minmax(0,1fr)}
  .page-hero-copy .wrap > *{grid-column:1}
}