/* Leatherback Lighting - /contact/ page layer.
   Tokens, the fixture CTA, .wrap, .eyebrow, .ribbon, .caption, .skip and the
   nav, ratebar and footer components all come from leatherback.css. Only what
   that file does not provide lives here, and every class defined here carries
   the contact- 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 /contact/. Nothing below is a new design decision: the
   header rhythm, the question blocks and the closing band are the ones already
   approved on handoff/Leatherback FAQ.dc.html (1440) and carried through
   site/assets/css/hoa.css; the band ground and the ruled card grid are
   Leatherback Erie.dc.html (board 15a, 1440). It is the existing design applied
   to a seventh page, and it is flagged for design sign-off.

   THE ONE THING THIS PAGE DOES DIFFERENTLY. There is no form handler on this
   site, so the four routes to a person ARE the page's primary interface. They
   are drawn as four ruled cards with the value set large, and the two that can
   be actioned (phone, email) are links filling the card's own width, so on a
   phone the target is the card rather than a line of text inside it.

   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, the four route values, the inline tel and mailto links, the
   "more" links and the closing phone link, all by min-height.

   BREAKPOINT COMPLEMENTS. Where a rule needs the desktop side of a shared
   breakpoint it is written as that breakpoint's 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}

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

/* ---------- header ---------- */
.contact-head{padding:72px 0 0}
.contact-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)}
.contact-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. */
.contact-crumbs-sep{color:rgba(244,247,255,.35)}
.contact-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. */
.contact-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))}
.contact-ribbon path{fill:none;stroke-linecap:round}
.contact-ribbon .a{stroke-width:2.6}
.contact-ribbon .b{stroke:var(--gold-pale);stroke-opacity:.5;stroke-width:1}
.contact-ribbon .s-edge{stop-color:var(--gold)}
.contact-ribbon .s-deep{stop-color:var(--gold-deep)}
.contact-ribbon .s-sheen{stop-color:#fff6e0}   /* the first stop of --metallic; it has no token of its own */

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

/* Inline phone and email inside running copy. The 44px floor is reached with an
   invisible overlay rather than padding, which is /cost/'s technique for its
   inline phone link: padding on an inline link opens the line spacing around it
   and the paragraph stops setting evenly. */
.contact-tel-inline,.contact-mail-inline{position:relative;font-weight:700;
  color:var(--gold-pale);text-decoration:underline;
  text-decoration-color:rgba(240,217,160,.55);text-underline-offset:3px;
  transition:text-decoration-color var(--t-fast)}
.contact-tel-inline::after,.contact-mail-inline::after{content:"";position:absolute;
  left:0;right:0;top:50%;height:44px;transform:translateY(-50%)}
.contact-tel-inline:hover,.contact-mail-inline:hover{text-decoration-color:var(--gold-pale)}
.contact-tel-inline{white-space:nowrap}
/* the email address is long: it may break rather than push a paragraph wider
   than the gutter on a narrow screen */
.contact-mail-inline{word-break:break-word}

/* ---------- the four routes ----------
   Ruled cards rather than a bordered box: the same 2px gold top rule the
   service columns on /hoa/ use, so this reads as the same family. */
.contact-routes{padding:44px 0 0}
.contact-routes-h{font-size:clamp(22px,1.9vw,26px);line-height:1.2;letter-spacing:-.6px;
  margin:0 0 26px;color:var(--ink-82);font-weight:700}
.contact-route-grid{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:26px;
  margin:0;padding:0}
.contact-route{display:flex;flex-direction:column;gap:10px;padding:22px 0 0;
  border-top:2px solid rgba(217,164,65,.45)}
/* 11px is the floor; .78 alpha measures 5.54:1 on the page ground, which is the
   value /hoa/ settled on for a label at this size. */
.contact-route-k{font-size:11px;font-weight:800;letter-spacing:2px;text-transform:uppercase;
  line-height:1.6;color:rgba(217,164,65,.78);margin:0}
.contact-route-v{display:flex;align-items:center;min-height:44px;margin:0;
  font-size:clamp(20px,1.7vw,24px);font-weight:800;letter-spacing:-.6px;line-height:1.25;
  font-style:normal;color:var(--ink);text-decoration:none}
/* the email, the address and the hours do not fit the phone number's size */
.contact-route-v-sm{font-size:clamp(16px,1.25vw,18px);font-weight:700;letter-spacing:-.2px;
  line-height:1.45;align-items:flex-start;padding-top:2px}
a.contact-route-v{border-bottom:1px solid rgba(240,217,160,.34);align-self:flex-start;
  transition:color var(--t-fast),border-color var(--t-fast)}
a.contact-route-v:hover{color:var(--gold-pale);border-bottom-color:var(--gold-pale)}
.contact-route-v-sm[href]{word-break:break-word}
.contact-route-n{font-size:14px;line-height:1.6;color:var(--ink-60);margin:0}
@media (max-width:1080px){
  .contact-route-grid{grid-template-columns:repeat(2,1fr);gap:24px 30px}
}

/* ---------- 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. */
.contact-answers{padding:56px 0 0}
.contact-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). */
.contact-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}
.contact-q-body{min-width:0}   /* lets the single mobile column shrink below its longest word */
.contact-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 */
.contact-rule{width:112px;height:12px;margin:0 0 18px}
.contact-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}
.contact-detail{font-size:17px;line-height:1.75;color:var(--ink-82);max-width:74ch;margin:0 0 16px}
.contact-more-row{display:flex;flex-wrap:wrap;gap:8px 28px;margin:0}
.contact-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)}
.contact-more:hover{border-bottom-color:var(--gold-pale)}
.contact-q-body > :last-child{margin-bottom:0}

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

/* ---------- service area band ----------
   The band ground is /erie/'s, the same gradient its client band uses and the
   one /hoa/ reuses for its numbers. Its stops are not in the README palette and
   have no token. Flagged for design. */
.contact-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)}
.contact-band h2{font-size:clamp(27px,2.8vw,40px);letter-spacing:-1.1px;max-width:24ch;margin-bottom:12px}
.contact-band .contact-sub-2{max-width:68ch;font-size:16px;line-height:1.7}
/* Seven towns. Only the one with a page is a link; the rest are plain text
   until theirs exist (S30), so the two states are drawn as the same chip and
   differ only in the gold. The chip itself is the <a> or the <span>, never the
   <li>, so the linked town's tap target is the whole 44px chip rather than the
   word inside it. */
.contact-cities{list-style:none;display:flex;flex-wrap:wrap;gap:12px;margin:32px 0 0;padding:0}
.contact-cities li{display:flex}
.contact-cities a,.contact-cities span{display:flex;align-items:center;min-height:44px;
  padding:8px 20px;font-size:16px;font-weight:700;line-height:1.3;color:var(--ink-82);
  text-decoration:none;background:var(--blue-card);
  border:1px solid rgba(217,164,65,.26);border-radius:var(--r-pill)}
.contact-cities a{color:var(--gold-pale);border-color:rgba(217,164,65,.5);
  transition:border-color var(--t-fast),background var(--t-fast)}
.contact-cities a:hover{color:var(--gold-pale);border-color:var(--gold);
  background:rgba(217,164,65,.09)}
.contact-area-note{font-size:15px;line-height:1.75;color:var(--ink-82);max-width:72ch;margin:28px 0 0}

/* ---------- what we can send: four ruled columns ---------- */
.contact-cred-grid{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:28px;
  margin:40px 0 0;padding:0}
.contact-cred-grid li{padding-top:22px;border-top:2px solid rgba(217,164,65,.45)}
.contact-cred-grid h3{font-size:20px;line-height:1.25;letter-spacing:-.3px;margin:0 0 12px}
.contact-cred-grid p{font-size:15px;line-height:1.7;color:var(--ink-82);margin:0}
@media (max-width:1080px){
  .contact-cred-grid{grid-template-columns:repeat(2,1fr);gap:26px 30px}
}

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

/* ---------- 900 and under ---------- */
@media (max-width:900px){
  .contact-route-grid{grid-template-columns:1fr;gap:26px}
  .contact-cred-grid{grid-template-columns:1fr;gap:28px;margin-top:32px}
}

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

  .contact-routes{padding-top:32px}
  .contact-routes-h{margin-bottom:22px}

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

  .contact-section{padding-top:56px}
  .contact-band{padding:32px 20px;border-radius:var(--r-card)}
  .contact-cities{gap:10px;margin-top:26px}

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

@media (prefers-reduced-motion:reduce){
  .contact-tel-inline,.contact-mail-inline,.contact-more,.contact-cities a,
  a.contact-route-v{transition:none}
}