/* Leatherback Lighting - /about/ page layer.
   Tokens, the fixture CTA, .wrap, .eyebrow, .ribbon, .metallic, .proof, .quotes,
   .calc-band, .caption, .page-head-cta, figure and figcaption all come from
   leatherback.css. Only what that file does not provide lives here, and every
   class defined here carries the about- 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 /about/. The measurements below are taken from the pages
   that do have boards, by way of the two pages already built to them: the header,
   question rhythm and cost handoff follow handoff/Leatherback FAQ.dc.html (1440)
   through site/assets/css/hoa.css, and the proof strip, the ruled columns and the
   band grounds follow Leatherback Erie.dc.html (board 15a, 1440). Nothing here is
   a new design decision; it is the existing set applied to a seventh page, and it
   is flagged for design sign-off.

   MOBILE. Home's 375 pattern: single column, 16px gutters from .wrap, full-width
   CTA, breakpoints at 900 and 820. Engineering default, also awaiting sign-off.

   FLOORS. Nothing under 11px. Every tap target in <main> reaches 44px: the
   breadcrumb link and the "more" links by min-height, 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}

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

/* ---------- header ---------- */
.about-head{padding:72px 0 0}
.about-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)}
.about-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. */
.about-crumbs-sep{color:rgba(244,247,255,.35)}
.about-head h1{font-size:clamp(31px,3.5vw,52px);line-height:1.05;letter-spacing:-1.6px;
  max-width:22ch;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. */
.about-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))}
.about-ribbon path{fill:none;stroke-linecap:round}
.about-ribbon .a{stroke-width:2.6}
.about-ribbon .b{stroke:var(--gold-pale);stroke-opacity:.5;stroke-width:1}
.about-ribbon .s-edge{stop-color:var(--gold)}
.about-ribbon .s-deep{stop-color:var(--gold-deep)}
.about-ribbon .s-sheen{stop-color:#fff6e0}   /* the first stop of --metallic; it has no token of its own */

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

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

/* ---------- the four 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. */
.about-answers{padding:56px 0 0}
.about-q{display:grid;grid-template-columns:200px minmax(0,1fr);gap:36px;padding:40px 0;
  border-top:1px solid rgba(217,164,65,.2)}
/* The topic label names the subject of the question, 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. */
.about-q-topic{font-size:11px;font-weight:800;letter-spacing:2px;text-transform:uppercase;
  line-height:1.6;color:rgba(217,164,65,.78);margin:10px 0 0}
.about-q-body{min-width:0}   /* lets the single mobile column shrink below its longest word */
.about-q 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 */
.about-rule{width:112px;height:12px;margin:0 0 18px}
.about-answer{font-size:clamp(17px,1.35vw,20px);line-height:1.65;font-weight:500;color:var(--ink);
  max-width:74ch;margin:0 0 16px}
.about-detail{font-size:17px;line-height:1.75;color:var(--ink-82);max-width:74ch;margin:0 0 16px}
.about-more-row{margin:0}
.about-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)}
.about-more:hover{border-bottom-color:var(--gold-pale)}
.about-q-body > :last-child{margin-bottom:0}

/* ---------- section rhythm ---------- */
.about-section{padding:64px 0 0}
.about-section h2{font-size:clamp(28px,2.95vw,42px);line-height:1.1;letter-spacing:-1.2px;
  max-width:26ch;margin:0 0 14px}
.about-sub-2{max-width:72ch;line-height:1.75;color:var(--ink-82);margin:0}

/* ---------- the two brands band ----------
   The band ground is /erie/'s, the same gradient its client band uses, carried
   through hoa.css. Its stops are not in the README palette and have no token.
   Flagged for design. */
.about-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)}
.about-band h2{font-size:clamp(27px,2.8vw,40px);letter-spacing:-1.1px;max-width:24ch;margin-bottom:12px}
.about-band .about-sub-2{max-width:68ch;font-size:16px;line-height:1.7}
/* Two cards, never one row of prose: O18 says the two brands must not blend, and a
   grid with a rule between them is the layout version of that decision. */
.about-brand-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin:36px 0 0}
.about-brand-card{padding:28px;background:var(--blue-card);
  border:1px solid rgba(217,164,65,.26);border-radius:var(--r-card)}
/* the brand whose site this is carries the gold edge; the parent does not */
.about-brand-ours{border-color:var(--gold);background:
  radial-gradient(120% 90% at 10% 0%,rgba(217,164,65,.1) 0%,rgba(217,164,65,0) 60%),var(--blue-card)}
.about-brand-kicker{font-size:11px;font-weight:800;letter-spacing:2px;text-transform:uppercase;
  line-height:1.6;color:rgba(217,164,65,.78);margin:0 0 8px}
.about-brand-card h3{font-size:22px;line-height:1.25;letter-spacing:-.3px;margin:0 0 10px}
.about-brand-card p{font-size:16px;line-height:1.7;color:var(--ink-82);margin:0}
.about-brand-note{font-size:15px;line-height:1.75;color:var(--ink-82);max-width:72ch;margin:28px 0 0}
@media (max-width:900px){
  .about-brand-grid{grid-template-columns:1fr;gap:14px;margin-top:28px}
}

/* ---------- how the work is set up: three ruled columns ---------- */
.about-work-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:40px}
.about-work-item{padding-top:22px;border-top:2px solid rgba(217,164,65,.45)}
.about-work-item h3{font-size:22px;line-height:1.25;letter-spacing:-.3px;margin:0 0 12px}
.about-work-item p{font-size:16px;line-height:1.7;color:var(--ink-82);margin:0 0 10px}
/* .7 is /erie/'s value for the quieter second paragraph in this pattern. It sits
   between --ink-82 and --ink-60 and has no token. Flagged for design. */
.about-work-item p + p{font-size:15px;color:rgba(244,247,255,.7);margin-bottom:0}

.about-figure{margin:40px 0 0;max-width:860px}
.about-figure 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){
  .about-work-grid{grid-template-columns:1fr;gap:32px;margin-top:32px}
  .about-figure{margin-top:32px}
}

/* ---------- where the name came from ----------
   Two columns of plain reading text, the widest measure on the page. It is the one
   section that is story rather than answer, so it gets no rules and no cards. */
.about-name-cols{columns:2;column-gap:56px;margin-top:8px;max-width:96ch}
.about-name-cols p{font-size:17px;line-height:1.8;color:var(--ink-82);
  margin:0 0 1em;break-inside:avoid}
.about-name-cols p:last-child{margin-bottom:0}
@media (max-width:900px){
  .about-name-cols{columns:1}
}

/* No rules for a customer-quotes block on this page. There is none: /testimonials/
   turned out to be the mascot page and carries no quotes to migrate, and Home
   already owns the three review quotes in its home-review-quotes slot. If /about/
   ever gets its own slot, it uses the shared .quotes grid from leatherback.css and
   needs an .about-quotes margin rule here, nothing more. */

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

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

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

  .about-answers{padding-top:36px}
  .about-q{grid-template-columns:minmax(0,1fr);gap:8px;padding:32px 0}
  .about-q-topic{margin:0}
  .about-detail{font-size:16px}

  .about-section{padding-top:56px}
  .about-band{padding:32px 20px;border-radius:var(--r-card)}
  .about-brand-card{padding:22px}

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

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

@media (prefers-reduced-motion:reduce){
  .about-more,.about-btn{transition:none}
}