@import url('https://fonts.googleapis.com/css2?family=Geologica:wght@400;500;600;700&family=Montserrat:wght@400;500;600;700&display=swap');

/* =========================================================================
   Guardian Roofing — extracted from guardianroofing.com, 2026-07-22
   Tokens are frequency-ranked from the live DOM plus a full sweep of the
   page-authored CSS (see brand-spec.md "CSS rule sweep").
   ========================================================================= */

:root {
  /* colour — navy is the whole brand, gold is the whole call to action */
  --brand:          #003366;
  --brand-deep:     #002953;
  --brand-darkest:  #00264c;
  --brand-pale:     #eff0f7;
  --accent:         #ffc323;
  --accent-deep:    #f9c226;

  --ink-deep:       #003366;
  --ink:            #383f51;
  --ink-muted:      #6d7386;  /* 4.7:1 on white — safe for body-adjacent text */
  --ink-quiet:      #7c8398;  /* 3.8:1 — doc chrome only, never client copy */

  --bg-pure:        #ffffff;
  --bg-tint:        #eff0f7;
  --bg-soft:        #f4f4f4;
  --bg-dark:        #003366;

  --border:         #e3e5ef;
  --border-mid:     #b7bdc1;
  --text-on-dark:       #ffffff;
  --text-on-dark-muted: rgba(255,255,255,.78);

  /* type */
  --font-display: 'Geologica', system-ui, sans-serif;
  --font-body:    'Montserrat', system-ui, sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, Menlo, monospace;

  /* shape — pills for actions, soft rectangles for containers */
  --radius-pill:  70px;
  --radius-card:  20px;
  --radius-panel: 10px;
  --radius-input: 5px;

  --shadow-card:  0 8px 30px rgba(8,8,39,.10);
  --shadow-soft:  0 0 25px rgba(0,0,0,.08);
  --shadow-lift:  0 3px 25px rgba(0,0,0,.15);

  --container: 1200px;
  --container-narrow: 860px;
  --gutter: 24px;
  --section: 100px;
}

/* ---------- base ---------- */
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg-pure); color: var(--ink);
  font-family: var(--font-body); font-size: 1rem; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: var(--font-display); color: var(--ink-deep); margin: 0 0 16px; }
h1, .display { font-weight: 700; font-size: clamp(2rem, 1.4rem + 2.4vw, 2.7rem); line-height: 1.4; }
h2, .h2      { font-weight: 700; font-size: clamp(1.6rem, 1.2rem + 1.7vw, 2.2rem); line-height: 1.2; }
h3, .h3      { font-weight: 600; font-size: 1rem; line-height: 1.3; }
h4           { font-weight: 600; font-size: .95rem; }
p { margin: 0 0 16px; }
a { color: var(--brand); }
img { max-width: 100%; display: block; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.container.narrow { max-width: var(--container-narrow); }
.lede { font-size: 1rem; color: var(--ink); max-width: 68ch; }
.mt-48 { margin-top: 48px; }
.mt-32 { margin-top: 32px; }

.section { padding: var(--section) 0; }
.section.tight { padding: 65px 0; }
.section.bg-tint { background: var(--bg-tint); }
.section.bg-soft { background: var(--bg-soft); }
.section.on-dark { background: var(--bg-dark); }
.section.on-dark h1, .section.on-dark h2, .section.on-dark h3,
.section.on-dark h4, .section.on-dark .sec-label { color: var(--text-on-dark); }
.section.on-dark p, .section.on-dark .lede { color: var(--text-on-dark-muted); }

/* ---------- light-ground cards inside a dark section --------------------
   `.section.on-dark p` (0,2,1) outranks `.review-card .quote` (0,2,0), so the
   section's white text was landing on white card grounds — invisible copy in
   the testimonials rail and the services rail. Anything carrying its own light
   ground has to reassert its ink above the section rule. Add the card here the
   moment you add a light-ground card, or it will disappear on navy. */
.section.on-dark .service-card h3,
.section.on-dark .review-card .quote { color: var(--ink); }

.section.on-dark .review-card .who .name,
.section.on-dark .step h3,
.section.on-dark .location h3,
.section.on-dark .form-card h3,
.section.on-dark .award h3,
.section.on-dark .family-card h3,
.section.on-dark .post-card h3,
.section.on-dark .fieldset legend { color: var(--ink-deep); }

.section.on-dark .offer-card h3,
.section.on-dark .deal-card .offer,
.section.on-dark .criterion h3,
.section.on-dark .judging-note,
.section.on-dark .benefit-list .k { color: var(--brand); }

.section.on-dark .service-card p,
.section.on-dark .offer-card p,
.section.on-dark .offer-card .expiry,
.section.on-dark .offer-card .fine,
.section.on-dark .review-card .who .when,
.section.on-dark .step p,
.section.on-dark .location p,
.section.on-dark .form-card .sub,
.section.on-dark .award p,
.section.on-dark .benefit-list p,
.section.on-dark .criterion p,
.section.on-dark .deal-card .body > p,
.section.on-dark .deal-card .fine,
.section.on-dark .post-card p,
.section.on-dark .fieldset .hint,
.section.on-dark .field .assist,
.section.on-dark .consent p,
.section.on-dark .faq .answer { color: var(--ink-muted); }

.section.on-dark .deal-card .expiry,
.section.on-dark .field label { color: var(--ink-deep); }

/* Section label. The source site puts a small uppercase label above nearly
   every h2 ("ABOUT US", "OUR SERVICES", "FAQS"). Transcribed verbatim:
   Geologica 700 / 14.4px / 2px tracking, brand ink. No dash, no stripe,
   no mono — those are the AI tells the house rule bans, and this is not one. */
.sec-label {
  font-family: var(--font-display); font-weight: 700;
  font-size: .9rem; letter-spacing: 2px; text-transform: uppercase;
  color: var(--brand); margin: 0 0 10px;
}

/* ---------- buttons: gold pill is the brand's whole action language ------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-body); font-weight: 500; font-size: .9rem;
  padding: 14px 30px; border-radius: var(--radius-pill);
  text-decoration: none; cursor: pointer;
  background: var(--accent); color: var(--brand);
  border: 2px solid var(--accent);
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.btn:hover { background: var(--accent-deep); border-color: var(--accent-deep); }
.btn-navy { background: var(--brand); color: #fff; border-color: var(--brand); }
.btn-navy:hover { background: var(--brand-deep); border-color: var(--brand-deep); }
.btn-outline { background: transparent; color: var(--brand); border-color: var(--brand); }
.btn-outline:hover { background: var(--brand); color: #fff; }
.btn-outline.on-dark { color: #fff; border-color: #fff; }
.btn-outline.on-dark:hover { background: #fff; color: var(--brand); }
.btn-sm { padding: 10px 22px; font-size: .8rem; }
/* welded to a card's bottom edge — the source's service-card CTA */
.btn-welded { width: 100%; border-radius: 0 0 var(--radius-card) var(--radius-card); }

.phone-link {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-display); font-weight: 700; font-size: .98rem;
  color: var(--brand); text-decoration: none;
}
.phone-link.on-dark { color: #fff; }

/* ---------- the two-tone wedge — Guardian's signature shape -------------- */
/* .e14-e138:before on the live site: a right triangle filled with a hard-stop
   145deg navy/gold gradient, tucked behind the shield mark. */
.wedge { position: relative; display: inline-block; padding: 22px; }
.wedge::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background-image: linear-gradient(145deg, var(--brand) 30%, var(--accent) 30%);
  clip-path: polygon(100% 0, 0 0, 100% 100%);
  border-radius: 0 0 var(--radius-panel) 0;
}
.wedge > * { position: relative; z-index: 1; }

/* ---------- site chrome (demo pages) ---------- */
.announce-bar {
  background: var(--accent); color: var(--brand);
  display: flex; align-items: center; justify-content: center; gap: 18px;
  flex-wrap: wrap; padding: 11px var(--gutter); font-size: .86rem; font-weight: 600;
}
.announce-bar img { height: 20px; width: auto; }
.announce-bar .flag { font-family: var(--font-display); font-weight: 700; letter-spacing: 1px; text-transform: uppercase; font-size: .74rem; }
.announce-bar a { color: var(--brand); font-weight: 700; }

.nav-utility { background: var(--brand); }
.nav-utility > .container { display: flex; align-items: center; gap: 24px; min-height: 84px; }
.nav-utility .brand-mark { display: flex; align-items: center; gap: 12px; margin-right: auto; text-decoration: none; }
.nav-utility .brand-mark img { height: 52px; width: auto; }
.nav-utility .lockup { color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; line-height: 1.15; }
.nav-utility .lockup small { display: block; font-family: var(--font-body); font-weight: 400; font-size: .72rem; color: var(--text-on-dark-muted); letter-spacing: .5px; }

.nav { background: var(--bg-pure); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 60; }
.nav > .container { display: flex; align-items: center; gap: 30px; min-height: 62px; }
.nav .brand-mark { display: flex; align-items: center; flex-shrink: 0; }
.nav .brand-mark img { height: 38px; width: auto; }
.nav .links { display: flex; gap: 26px; margin-right: auto; flex-wrap: wrap; }
.nav .links a {
  color: var(--ink-deep); text-decoration: none; font-family: var(--font-display);
  font-weight: 600; font-size: .86rem; padding: 6px 0;
}
.nav .links a:hover { color: var(--accent-deep); }
.nav .actions { display: flex; align-items: center; gap: 16px; }

/* ---------- hero ---------- */
/* Two-layer hero, exactly as the source builds it: a photograph underneath,
   then navy-arc.png sized 67% x 100% from the left. The arc's curved right
   edge — not a linear gradient — is what separates copy from photo. */
.hero {
  position: relative; overflow: hidden; background: var(--brand);
  padding: 150px 0; color: #fff;
}
.hero .bg-image-abs { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.hero::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background-image: url('assets/guardian-roofing-brand/navy-arc.png');
  background-size: 67% 100%; background-position: 0% 50%; background-repeat: no-repeat;
}
.hero > .container > * { max-width: 58%; }
.hero > .container { position: relative; z-index: 2; }
.hero h1 { color: #fff; max-width: 20ch; }
.hero .hero-sub { font-family: var(--font-display); font-weight: 600; font-size: .95rem;
  color: #fff; text-transform: capitalize; margin: 0 0 24px; }
.hero .hero-actions { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin-top: 32px; }

.page-hero {
  background: var(--brand); color: #fff; padding: 80px 0; position: relative; overflow: hidden;
}
.page-hero .bg-image-abs { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; opacity: .35; }
.page-hero::after { content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(135deg, var(--brand) 10%, rgba(0,51,102,0)); }
.page-hero > .container { position: relative; z-index: 2; }
.page-hero h1 { color: #fff; margin: 0; }

/* ---------- trust intro ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.split.flip .media { order: 2; }
.split .media img { border-radius: var(--radius-card); box-shadow: var(--shadow-card); width: 100%; }
.claim-list { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 14px; }
.claim-list li { display: flex; align-items: flex-start; gap: 12px; font-weight: 600; color: var(--ink-deep); }
.claim-list li::before {
  content: ''; flex: 0 0 20px; height: 20px; margin-top: 2px; border-radius: 50%;
  background: var(--accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/14px no-repeat, linear-gradient(#000,#000);
  -webkit-mask-composite: xor; mask-composite: exclude;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/14px no-repeat, linear-gradient(#000,#000);
}
.section.on-dark .claim-list li { color: #fff; }

/* ---------- service cards / slider ---------- */
.card-rail {
  display: grid; grid-auto-flow: column; grid-auto-columns: min(300px, 82vw);
  gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: 12px; scrollbar-width: thin;
}
.card-rail > * { scroll-snap-align: start; }
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; }

.service-card {
  background: var(--bg-pure); border-radius: var(--radius-card);
  overflow: hidden; box-shadow: var(--shadow-card); display: flex; flex-direction: column;
}
.service-card .thumb { aspect-ratio: 4/3; overflow: hidden; }
.service-card .thumb img { width: 100%; height: 100%; object-fit: cover; }
.service-card .body { padding: 22px 22px 20px; flex: 1; }
.service-card h3 { color: var(--ink); font-size: 1rem; margin-bottom: 8px; }
.service-card p { font-size: .9rem; color: var(--ink-muted); margin: 0; }

/* ---------- awards marquee — infinite scroll, dissolving at both edges --- */
.marquee {
  overflow: hidden; position: relative;
  -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0) 1%, rgba(0,0,0,1) 10%, rgba(0,0,0,1) 90%, rgba(0,0,0,0) 99%);
  mask-image: linear-gradient(to right, rgba(0,0,0,0) 1%, rgba(0,0,0,1) 10%, rgba(0,0,0,1) 90%, rgba(0,0,0,0) 99%);
}
.marquee .track { display: flex; gap: 60px; align-items: center; width: max-content; animation: marquee 20s linear infinite; }
.marquee img { height: 74px; width: auto; object-fit: contain; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee .track { animation: none; } }

/* ---------- why-choose icon tiles ---------- */
.reason-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 34px 28px; }
.reason { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; }
.reason .dot {
  width: 62px; height: 62px; border-radius: 50%; background: var(--accent);
  display: grid; place-items: center; color: var(--brand);
  font-family: var(--font-display); font-weight: 700; font-size: 1.2rem;
}
.reason p { margin: 0; font-weight: 600; color: #fff; font-size: .95rem; }

/* ---------- offers / coupons ---------- */
.offer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 26px; }
.offer-card {
  border-radius: var(--radius-card); overflow: hidden; box-shadow: var(--shadow-card);
  background: var(--bg-pure); display: flex; flex-direction: column;
}
.offer-card .head { background: var(--brand); padding: 18px 22px; display: flex; align-items: center; justify-content: center; }
.offer-card .head img { height: 42px; width: auto; }
.offer-card .thumb { aspect-ratio: 16/9; overflow: hidden; }
.offer-card .thumb img { width: 100%; height: 100%; object-fit: cover; }
.offer-card .body { padding: 22px; flex: 1; }
.offer-card .body h3 { font-size: 1.05rem; color: var(--brand); margin-bottom: 10px; }
.offer-card .expiry { font-size: .8rem; font-weight: 600; color: var(--ink-muted); margin: 0 0 8px; }
.offer-card .fine { font-size: .72rem; color: var(--ink-muted); line-height: 1.5; margin: 0; }

/* ---------- testimonials ---------- */
.review-card {
  background: var(--bg-pure); border-radius: var(--radius-card); padding: 26px 24px;
  box-shadow: var(--shadow-card); display: flex; flex-direction: column; gap: 12px; height: 100%;
}
.review-card .stars { color: var(--accent); letter-spacing: 3px; font-size: 1rem; }
.review-card .quote { font-size: .9rem; color: var(--ink); margin: 0; }
.review-card .who { display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 6px; }
.review-card .who .name { font-family: var(--font-display); font-weight: 700; font-size: .9rem; color: var(--ink-deep); }
.review-card .who .when { font-size: .78rem; color: var(--ink-muted); }
.rating-summary { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.rating-summary .score { font-family: var(--font-display); font-weight: 700; font-size: 2.6rem; color: var(--brand); line-height: 1; }
.rating-summary .meta { font-size: .9rem; color: var(--ink-muted); }

/* ---------- process steps ---------- */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 22px; }
.step { text-align: center; padding: 26px 18px; border-radius: var(--radius-panel); background: var(--bg-tint); }
.step .n {
  width: 46px; height: 46px; margin: 0 auto 14px; border-radius: 50%;
  background: var(--brand); color: #fff; display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: 1.05rem;
}
.step h3 { margin-bottom: 8px; }
.step p { font-size: .86rem; color: var(--ink-muted); margin: 0; }

/* ---------- difference list ---------- */
.difference { display: grid; gap: 22px; }
.difference .row { display: flex; gap: 16px; align-items: flex-start; }
.difference .row::before {
  content: ''; flex: 0 0 22px; height: 22px; margin-top: 3px;
  background: var(--accent); border-radius: 50%;
}
.difference h3 { margin: 0 0 4px; }
.difference p { margin: 0; font-size: .9rem; color: var(--ink-muted); }
.section.on-dark .difference p { color: var(--text-on-dark-muted); }

/* ---------- content + sticky sidebar form ---------- */
.content-side { display: grid; grid-template-columns: minmax(0,1.7fr) minmax(0,1fr); gap: 56px; align-items: start; }
.prose h2 { margin-top: 40px; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 1.05rem; margin: 26px 0 8px; }
.prose ul { padding-left: 20px; margin: 0 0 18px; }
.prose li { margin-bottom: 10px; }
.form-card {
  position: sticky; top: 90px; background: var(--bg-pure);
  border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: 26px 22px 30px;
}
.form-card h3 { font-size: 1.15rem; margin-bottom: 6px; }
.form-card .sub { font-size: .85rem; color: var(--ink-muted); margin-bottom: 18px; }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-card input, .form-card select, .form-card textarea {
  width: 100%; min-width: 150px; padding: 14px 16px; margin-bottom: 12px;
  border: 1px solid var(--border-mid); border-radius: var(--radius-input);
  font-family: var(--font-body); font-size: .9rem; color: var(--ink); background: #fff;
}
.form-card textarea { min-height: 110px; resize: vertical; }
.form-card .submit {
  width: 100%; border: 0; border-radius: var(--radius-card); padding: 14px 20px;
  background: var(--accent); color: var(--brand); cursor: pointer;
  font-family: var(--font-display); font-weight: 700; font-size: .88rem; text-transform: uppercase;
}

/* ---------- FAQ accordion ---------- */
.faq { border-top: 1px solid var(--border); }
.faq details { border-bottom: 1px solid var(--border); }
.faq summary {
  cursor: pointer; list-style: none; padding: 20px 40px 20px 0; position: relative;
  font-family: var(--font-display); font-weight: 600; font-size: 1rem; color: var(--ink-deep);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+'; position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  font-size: 1.4rem; font-weight: 400; color: var(--accent-deep); line-height: 1;
}
.faq details[open] summary::after { content: '\2013'; }
.faq .answer { padding: 0 40px 22px 0; font-size: .92rem; color: var(--ink-muted); }

/* ---------- service-area maps ---------- */
.area-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.area .map { max-width: 240px; margin-bottom: 20px; }
.area h3 { font-size: 1.2rem; margin-bottom: 14px; }
.city-list { list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px 18px; }
.city-list li { display: flex; align-items: center; gap: 8px; font-size: .88rem; color: var(--ink); }
.city-list li::before { content: ''; flex: 0 0 8px; height: 8px; border-radius: 50%; background: var(--accent); }

/* ---------- location cards ---------- */
.location-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 22px; }
.location {
  background: var(--bg-pure); border-radius: var(--radius-panel); padding: 24px 22px;
  box-shadow: var(--shadow-soft); border-top: 4px solid var(--accent);
}
.location h3 { margin-bottom: 10px; }
.location p { font-size: .88rem; color: var(--ink-muted); margin: 0 0 6px; }

/* ---------- projects before/after ---------- */
.project-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.project-pair figure { margin: 0; }
.project-pair img { border-radius: var(--radius-panel); width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.project-pair figcaption {
  margin-top: 10px; font-family: var(--font-display); font-weight: 700;
  font-size: .78rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ink-muted);
}

/* ---------- benefit list (protection plan) ---------- */
.benefit-list { display: grid; gap: 0; border-top: 1px solid var(--border); }
.benefit-list .row { display: grid; grid-template-columns: 220px 1fr; gap: 26px;
  padding: 20px 0; border-bottom: 1px solid var(--border); align-items: start; }
.benefit-list .k { font-family: var(--font-display); font-weight: 700; font-size: .92rem; color: var(--brand); }
.benefit-list p { margin: 0; font-size: .9rem; color: var(--ink-muted); }
.price-tag {
  display: inline-flex; align-items: baseline; gap: 8px;
  font-family: var(--font-display); font-weight: 700; color: var(--brand);
}
.price-tag .amount { font-size: 2.6rem; line-height: 1; }
.price-tag .per { font-size: .95rem; color: var(--ink-muted); }
.terms-note { font-size: .78rem; color: var(--ink-muted); line-height: 1.6; max-width: 70ch; }

/* ---------- awards detail ---------- */
.award-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 30px; }
.award { text-align: center; }
.award .mark { height: 120px; display: grid; place-items: center; margin-bottom: 16px; }
.award .mark img { max-height: 120px; width: auto; }
.award h3 { margin-bottom: 8px; }
.award p { font-size: .86rem; color: var(--ink-muted); margin: 0; }

/* ---------- financing panel ---------- */
.finance-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.finance-panel img { border-radius: var(--radius-card); }

/* ---------- video band ---------- */
.video-band { position: relative; aspect-ratio: 21/9; overflow: hidden; background: var(--brand); }
.video-band img { width: 100%; height: 100%; object-fit: cover; }
.video-band .play {
  position: absolute; inset: 0; margin: auto; width: 84px; height: 84px; border-radius: 50%;
  background: var(--accent); border: 0; cursor: pointer; display: grid; place-items: center;
}
.video-band .play::after {
  content: ''; width: 0; height: 0; margin-left: 6px;
  border-left: 24px solid var(--brand); border-top: 15px solid transparent; border-bottom: 15px solid transparent;
}

/* ---------- closing CTA with van ---------- */
.cta-van { background: var(--brand); color: #fff; padding: 70px 0 0; overflow: hidden; }
.cta-van .inner { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: end; }
.cta-van h2 { color: #fff; }
.cta-van .hero-sub { color: var(--text-on-dark-muted); text-transform: capitalize; margin-bottom: 24px; }
.cta-van .actions { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; padding-bottom: 70px; }
.cta-van .van { align-self: end; }
.cta-van .van img { width: 100%; }

/* ---------- footer ---------- */
.footer { background: var(--brand); color: var(--text-on-dark-muted); padding: 70px 0 0; }
.footer .cols { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1.3fr; gap: 40px; }
.footer h4 { color: #fff; font-size: .95rem; margin: 0 0 16px; }
.footer a { color: var(--text-on-dark-muted); text-decoration: none; display: block; padding: 4px 0; font-size: .87rem; }
.footer a:hover { color: var(--accent); }
.footer .brand-block img { height: 62px; margin-bottom: 16px; }
.footer .brand-block p { font-size: .87rem; margin: 0 0 6px; }
.footer .office p { font-size: .87rem; margin: 0 0 4px; }
.footer .legal {
  margin-top: 56px; background: var(--brand-darkest); color: rgba(255,255,255,.6);
  font-size: .78rem; padding: 18px 0;
}
.footer .legal .container { display: flex; flex-wrap: wrap; gap: 10px 26px; justify-content: space-between; }

/* =========================================================================
   Second-pass patterns — templates missed on the first crawl
   (careers, halo project + nominations, referrals, Pickles campaign,
   service-area city pages, blog, utility pages). See brand-spec.md.
   ========================================================================= */

/* ---------- careers: value proposition + open roles ---------------------- */
.careers-why .inner { display: grid; grid-template-columns: 1.05fr .95fr; gap: 60px; align-items: center; }
.careers-why .shot img { width: 100%; border-radius: var(--radius-card); display: block; }
.careers-why p { margin-bottom: 18px; }

.job-openings { background: var(--bg-tint); }
.job-openings .lede { max-width: 760px; margin-bottom: 40px; }
/* ---------- halo project: the families ---------------------------------- */
.family-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 26px; }
.family-card {
  background: var(--bg-pure); border: 1px solid var(--border);
  border-radius: var(--radius-card); overflow: hidden; box-shadow: var(--shadow-card);
}
.family-card .shot { aspect-ratio: 4/3; overflow: hidden; background: var(--bg-soft); }
.family-card .shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.family-card .body { padding: 20px 24px 24px; }
.family-card h3 { margin: 0 0 10px; font-size: 1.05rem; }
.family-card .details {
  font-family: var(--font-body); font-weight: 600; font-size: .84rem;
  color: var(--brand); text-decoration: none; border-bottom: 2px solid var(--accent); padding-bottom: 2px;
}
.family-card .details:hover { color: var(--brand-deep); }

/* ---------- halo nominations: giveaway hero, eligibility, timeline ------- */
.giveaway-hero { background: var(--brand); color: #fff; padding: 110px 0 100px; text-align: center; }
/* not a .section.on-dark, so the shared on-dark label rule doesn't reach it */
.giveaway-hero .sec-label { color: var(--accent); }
.giveaway-hero h1 { color: #fff; max-width: 15ch; margin: 0 auto 20px; }
.giveaway-hero p { color: var(--text-on-dark-muted); max-width: 60ch; margin: 0 auto; }

.eligibility-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 22px; }
.criterion {
  background: var(--bg-pure); border: 1px solid var(--border);
  border-left: 4px solid var(--accent); border-radius: var(--radius-panel); padding: 22px 24px;
}
.criterion h3 { margin: 0 0 8px; font-size: .95rem; color: var(--brand); }
.criterion p { margin: 0; font-size: .9rem; color: var(--ink-muted); }

.judging-note {
  display: inline-block; background: var(--brand-pale); color: var(--brand);
  border-radius: var(--radius-pill); padding: 10px 22px; font-size: .85rem;
  font-weight: 600; margin-bottom: 36px;
}

/* ---------- forms with named fieldsets (nominations + referrals) --------- */
.fieldset-form { display: grid; gap: 34px; max-width: 760px; }
.fieldset { border: 0; padding: 0; margin: 0; }
.fieldset legend { padding: 0; margin: 0 0 4px; font-family: var(--font-display);
  font-weight: 700; font-size: 1.12rem; color: var(--ink-deep); }
.fieldset .hint { margin: 0 0 18px; font-size: .86rem; color: var(--ink-muted); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: grid; gap: 6px; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: .82rem; font-weight: 600; color: var(--ink-deep); }
.field .req { color: var(--brand); font-weight: 400; }
.field input, .field select, .field textarea {
  min-width: 150px; width: 100%; padding: 12px 14px; font: inherit; font-size: .92rem;
  color: var(--ink); background: var(--bg-pure);
  border: 1px solid var(--border-mid); border-radius: var(--radius-input);
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--brand);
}
.field .assist { font-size: .78rem; color: var(--ink-muted); }
.consent { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; }
.consent p { margin: 0; font-size: .8rem; color: var(--ink-muted); }
.consent input { margin-top: 3px; }

/* ---------- Portland Pickles campaign ------------------------------------
   The source animates a bat swing with a ball leaving the frame — three
   bespoke keyframe sets (swing3D / baseballShot / tailShot), transcribed.
   This is the only animated hero on the site. ------------------------------ */
.campaign-hero {
  position: relative; overflow: hidden; background: var(--brand);
  color: #fff; padding: 120px 0 130px;
}
.campaign-hero .partner {
  display: inline-block; font-size: .8rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 18px;
}
.campaign-hero h1 { color: #fff; max-width: 16ch; }
.campaign-hero p { color: var(--text-on-dark-muted); max-width: 52ch; margin: 18px 0 30px; }
.campaign-hero .badge { position: absolute; right: 6%; top: 50%; transform: translateY(-50%);
  width: 200px; opacity: .95; }
.campaign-hero .bat {
  position: absolute; bottom: 20px; left: 10%; width: 160px;
  transform-origin: bottom center; transform-style: preserve-3d;
  animation: swing3D 2s ease-in-out infinite;
}
.campaign-hero .baseball {
  position: absolute; bottom: 40px; left: 15%; width: 50px; height: 50px;
  transform-origin: center; opacity: 0;
  animation: baseballShot 2s ease-in-out infinite;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.3));
}
.campaign-hero .baseball-tail {
  position: absolute; bottom: 55px; left: 15%; width: 90px; height: 4px;
  background: linear-gradient(to left, rgba(255,255,255,.85), rgba(255,255,255,0));
  transform-origin: left center; opacity: 0;
  animation: tailShot 2s ease-in-out infinite;
}
@keyframes swing3D {
  0%, 5% { transform: rotateX(0deg) rotateZ(-30deg); }
  10%    { transform: rotateX(30deg) rotateZ(15deg); }
  100%   { transform: rotateX(0deg) rotateZ(-30deg); }
}
@keyframes baseballShot {
  0%   { transform: translate(0,0) scale(.9); opacity: 0; }
  5%   { opacity: 1; }
  10%  { transform: translate(40px,-20px) scale(1.1); }
  100% { transform: translate(100vw,-80vh) scale(.8); opacity: 0; }
}
@keyframes tailShot {
  0%   { transform: translate(0,0) rotate(10deg); opacity: .8; }
  10%  { transform: translate(40px,-20px) rotate(10deg); opacity: 1; }
  100% { transform: translate(100vw,-80vh) rotate(10deg); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .campaign-hero .bat,
  .campaign-hero .baseball,
  .campaign-hero .baseball-tail { animation: none; }
  .campaign-hero .baseball, .campaign-hero .baseball-tail { opacity: 1; }
}

.deal-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 26px; }
.deal-card {
  background: var(--bg-pure); border: 1px solid var(--border);
  border-radius: var(--radius-card); overflow: hidden; box-shadow: var(--shadow-card);
  display: flex; flex-direction: column;
}
.deal-card .cap {
  background: var(--brand); color: #fff; padding: 14px 24px;
  display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
}
.deal-card .cap .n { font-family: var(--font-display); font-weight: 700; font-size: .95rem; }
.deal-card .cap .tag { font-size: .74rem; color: var(--accent); text-transform: uppercase; letter-spacing: .05em; }
.deal-card .body { padding: 28px 24px 24px; flex: 1; display: flex; flex-direction: column; }
.deal-card .offer { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem;
  color: var(--brand); margin: 0 0 10px; line-height: 1.15; }
.deal-card .body > p { margin: 0 0 20px; font-size: .9rem; color: var(--ink-muted); }
.deal-card .btn { align-self: flex-start; margin-top: auto; }
.deal-card .expiry { margin: 18px 0 0; font-size: .82rem; font-weight: 600; color: var(--ink-deep); }
.deal-card .fine { margin: 6px 0 0; font-size: .74rem; color: var(--ink-muted); line-height: 1.5; }

/* ---------- service-area city pages (95 of them share this template) ----- */
/* the source carries the bare place name as its own h1 above the full title;
   kept as ink, not gold — gold on white is 1.64:1 and this is real copy */
.city-intro .place {
  font-family: var(--font-display); font-weight: 700; font-size: .9rem;
  color: var(--brand); letter-spacing: .04em; margin: 0 0 10px;
}
.city-intro .narrative { max-width: 74ch; }
.city-intro .narrative p { margin-bottom: 16px; }
.city-intro a { color: var(--brand); font-weight: 600; }

.city-services { background: var(--bg-tint); }
.city-service { padding: 34px 0; border-bottom: 1px solid var(--border); }
.city-service:last-child { border-bottom: 0; }
.city-service h2 { font-size: 1.4rem; margin-bottom: 12px; }
.city-service p { max-width: 74ch; margin-bottom: 14px; }
.city-service a { color: var(--brand); font-weight: 600; }

/* ---------- blog ---------------------------------------------------------- */
.blog-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; }
.post-card {
  background: var(--bg-pure); border: 1px solid var(--border);
  border-radius: var(--radius-card); overflow: hidden; display: flex; flex-direction: column;
}
.post-card:hover { box-shadow: var(--shadow-card); }
.post-card .shot { aspect-ratio: 16/10; overflow: hidden; background: var(--bg-soft); }
.post-card .shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.post-card .body { padding: 24px; flex: 1; display: flex; flex-direction: column; }
.post-card h3 { margin: 0 0 10px; font-size: 1.06rem; line-height: 1.35; }
.post-card p { margin: 0 0 18px; font-size: .88rem; color: var(--ink-muted); }
.post-card .more {
  margin-top: auto; font-size: .82rem; font-weight: 600; color: var(--brand);
  text-decoration: none; border-bottom: 2px solid var(--accent);
  padding-bottom: 2px; align-self: flex-start;
}

.article { max-width: 760px; }
.article .postnav {
  display: flex; gap: 26px; align-items: center; flex-wrap: wrap;
  padding-bottom: 26px; margin-bottom: 34px; border-bottom: 1px solid var(--border);
  font-size: .8rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
}
.article .postnav a { color: var(--brand); text-decoration: none; }
.article .postnav a:hover { color: var(--accent-deep); }
.article h2 { font-size: 1.4rem; margin: 38px 0 14px; }
.article p { margin-bottom: 16px; }
.article ul { margin: 0 0 20px 20px; }
.article li { margin-bottom: 7px; }

.recent-posts { background: var(--bg-tint); }

/* ---------- utility pages ------------------------------------------------- */
.utility-panel { text-align: center; padding: 120px 0; }
.utility-panel h1 { margin-bottom: 18px; }
.utility-panel p { max-width: 52ch; margin: 0 auto 30px; color: var(--ink-muted); }
.utility-panel .search {
  display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: 26px;
}
.utility-panel .search input {
  min-width: 150px; width: 320px; padding: 12px 16px; font: inherit; font-size: .92rem;
  border: 1px solid var(--border-mid); border-radius: var(--radius-input);
}

/* =========================================================================
   Doc chrome — ds-nav, sections catalog, page gallery
   ========================================================================= */
.ds-nav {
  background: var(--brand-deep); padding: 14px var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
}
.ds-nav .lockup-text { margin: 0; color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 1rem; }
.ds-nav .lockup-text small { display: block; font-family: var(--font-body); font-weight: 400;
  font-size: .74rem; color: rgba(255,255,255,.6); letter-spacing: .5px; }
.ds-nav .tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.ds-nav .tab { color: rgba(255,255,255,.7); text-decoration: none; font-size: .86rem;
  padding: 7px 14px; border-radius: var(--radius-pill); }
.ds-nav .tab:hover { color: #fff; }
.ds-nav .tab.active { background: #fff; color: var(--brand); }

.ds-hero { background: var(--bg-tint); padding: 74px 0 56px; }
.ds-hero .meta { display: flex; flex-wrap: wrap; gap: 14px 44px; margin-top: 30px; }
.ds-hero .meta > div { font-size: .8rem; color: var(--ink-muted); }
.ds-hero .meta strong { display: block; color: var(--ink-deep); font-size: .96rem; }
.ds-section { padding: 66px 0; border-bottom: 1px solid var(--border); }

.door-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 22px; }
.door {
  display: block; text-decoration: none; padding: 26px 24px;
  border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--bg-pure);
  transition: box-shadow .18s ease, transform .18s ease;
}
.door:hover { box-shadow: var(--shadow-card); transform: translateY(-2px); }
.door h3 { margin-bottom: 6px; }
.door p { margin: 0; font-size: .88rem; color: var(--ink-muted); }

.swatch-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 18px; }
.swatch { border: 1px solid var(--border); border-radius: var(--radius-panel); overflow: hidden; }
.swatch .chip-color { height: 84px; }
.swatch .meta { padding: 12px 14px; }
.swatch .t { font-family: var(--font-mono); font-size: .78rem; color: var(--ink-deep); }
.swatch .v { font-size: .74rem; color: var(--ink-muted); }

.type-spec { display: grid; grid-template-columns: 210px 1fr; gap: 30px; align-items: baseline;
  padding: 22px 0; border-bottom: 1px solid var(--border); }
.type-spec .spec { font-family: var(--font-mono); font-size: .76rem; color: var(--ink-muted); line-height: 1.6; }

.asset-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 18px; }
.asset-card { border: 1px solid var(--border); border-radius: var(--radius-panel); overflow: hidden; }
.asset-card .thumb { aspect-ratio: 4/3; background: var(--bg-soft); display: grid; place-items: center; overflow: hidden; }
.asset-card .thumb img { width: 100%; height: 100%; object-fit: cover; }
.asset-card .thumb img.contain { object-fit: contain; padding: 14px; }
.asset-card .thumb.navy { background: var(--brand); }
.asset-card .meta { padding: 11px 14px; font-size: .74rem; color: var(--ink-muted); }
.asset-card .meta strong { display: block; font-family: var(--font-mono); font-size: .76rem; color: var(--ink-deep); }

.sx-header { background: var(--bg-tint); padding: 70px 0 46px; }
.sx-header .meta { display: flex; flex-wrap: wrap; gap: 14px 40px; margin-top: 28px; }
.sx-header .meta > div { font-size: .8rem; color: var(--ink-muted); }
.sx-header .meta strong { display: block; color: var(--ink-deep); font-size: .96rem; }
.sx-index { border-bottom: 1px solid var(--border); background: var(--bg-pure); }
.sx-index .grid { max-width: var(--container); margin: 0 auto; padding: 20px var(--gutter);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 2px 14px; }
.sx-index a { display: flex; justify-content: space-between; gap: 8px; padding: 7px 10px;
  font-size: .82rem; color: var(--ink-muted); text-decoration: none; border-radius: 6px; }
.sx-index a:hover { background: var(--brand-pale); color: var(--brand); }
.sx-index a .num { color: var(--ink-quiet); }

.sx-pattern { border-bottom: 1px solid var(--border); }
.pattern-meta { max-width: var(--container); margin: 0 auto; padding: 40px var(--gutter) 18px;
  display: flex; gap: 26px; align-items: baseline; flex-wrap: wrap; }
.pattern-meta .id { font-family: var(--font-mono); font-size: .78rem; color: var(--ink-quiet);
  display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.pattern-meta .id .num { font-weight: 600; color: var(--brand); }
.pattern-meta .id .signature { background: var(--brand); color: #fff;
  font-size: .64rem; letter-spacing: 1px; padding: 3px 8px; border-radius: var(--radius-pill); }
.pattern-meta .name { margin: 0; font-family: var(--font-display); font-weight: 700; color: var(--ink-deep); }
.pattern-meta .purpose { margin: 2px 0 0; font-size: .86rem; color: var(--ink-muted); }
.sx-demo { position: relative; border-top: 1px dashed var(--border-mid); }
.sx-demo .demo-label { position: absolute; top: 0; right: var(--gutter); transform: translateY(-50%);
  background: var(--bg-pure); padding: 0 10px; font-family: var(--font-mono);
  font-size: .68rem; letter-spacing: 1px; color: var(--ink-quiet); z-index: 5; }

.page-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 26px; }
.page-card { border: 1px solid var(--border); border-radius: var(--radius-card); overflow: hidden;
  background: var(--bg-pure); text-decoration: none; display: block; transition: box-shadow .18s ease; }
.page-card:hover { box-shadow: var(--shadow-card); }
.page-card .preview { aspect-ratio: 16/10; overflow: hidden; background: var(--bg-soft); position: relative; }
.page-card .preview iframe { width: 200%; height: 200%; transform: scale(.5); transform-origin: 0 0;
  border: 0; pointer-events: none; }
.page-card .preview::after { content: ""; position: absolute; inset: 0; }
.page-card .body { padding: 20px 24px 24px; }
.page-card .body h3 { margin-bottom: 6px; }
.page-card .body p { margin: 0; font-size: .87rem; color: var(--ink-muted); }

/* =========================================================================
   Responsive contract — every fixed track collapses, nav actions hide
   ========================================================================= */
@media (max-width: 980px) {
  .content-side { grid-template-columns: 1fr; gap: 40px; }
  .form-card { position: static; }
  .footer .cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 880px) {
  :root { --section: 68px; }
  .split, .area-grid, .finance-panel, .cta-van .inner { grid-template-columns: 1fr; gap: 34px; }
  .split.flip .media { order: 0; }
  .benefit-list .row { grid-template-columns: 1fr; gap: 8px; }
  /* second-pass patterns: every fixed track collapses here too */
  .careers-why .inner { grid-template-columns: 1fr; gap: 34px; }
  .job { grid-template-columns: 1fr; gap: 16px; justify-items: start; }
  .field-row { grid-template-columns: 1fr; }
  .campaign-hero .badge { position: static; transform: none; display: block;
    width: 130px; margin: 26px 0 0; }
  .campaign-hero .bat, .campaign-hero .baseball, .campaign-hero .baseball-tail { display: none; }
  .type-spec { grid-template-columns: 1fr; gap: 10px; }
  .cta-van .actions { padding-bottom: 40px; }
  /* catalog chrome: the id column is nowrap, so stack it above the name */
  .pattern-meta { flex-direction: column; gap: 10px; }
  .pattern-meta .id { white-space: normal; flex-wrap: wrap; }
  .pattern-meta .name, .pattern-meta .purpose { overflow-wrap: anywhere; }
}
@media (max-width: 768px) {
  .nav .actions, .nav-utility .actions { display: none; }
  .nav .links { display: none; }
  .field-grid { grid-template-columns: 1fr; }
  .project-pair { grid-template-columns: 1fr; }
  .footer .cols { grid-template-columns: 1fr; }
  .hero { padding: 80px 0 90px; }
  .marquee img { height: 56px; }
}

@media (max-width: 880px) {
  /* the arc is a desktop device — on phones the copy needs the whole width */
  .hero::after { background-image: none; background: linear-gradient(180deg, rgba(0,51,102,.92), rgba(0,51,102,.78)); }
  .hero > .container > * { max-width: 100%; }
}

@media (max-width: 768px) {
  /* the announcement bar wraps to four lines at phone width — tighten it
     so it does not consume the whole first screen */
  .announce-bar { gap: 4px 12px; padding: 9px 16px; font-size: .78rem; line-height: 1.35; }
  .announce-bar img { height: 16px; }
  .announce-bar .flag { font-size: .66rem; }
}