/* brand.css — GLOBAL site styling so town/hub/blog pages match the homepage brand.
   Enqueued on every page (functions.php). Uses tokens.css custom properties.
   tokens.css already provides: vars, .hz-wrap, .hz-cta, .hz-eyebrow, typography scale.
   calculator.css provides: .hz-hero, .hz-calc, .hz-trust. This file adds the SECTIONS
   (bands, service cards, steps, detail, prose, nearby, figures) + the brand webfont. */

/* --- typography (brand display font on all pages) --- */
body { font-family: "Source Sans Pro", var(--hz-grotesk, system-ui, sans-serif); color: var(--hz-ink); }
a { color: var(--hz-teal); }
h1, h2, h3, h4 { font-family: "Source Sans Pro", var(--hz-grotesk, sans-serif); color: var(--hz-ink); line-height: 1.1; letter-spacing: -.01em; }
h1 { font-weight: 900; font-size: clamp(34px, 4.4vw, 54px); }
h2 { font-weight: 800; font-size: clamp(26px, 2.8vw, 36px); }
h3 { font-weight: 700; font-size: clamp(19px, 1.9vw, 23px); }

/* --- bands (the town/hub section rhythm) --- */
.hz-band { padding: var(--hz-s8) 0; }
.hz-band--sand { background: var(--hz-sand); color: var(--hz-ink); }
.hz-band--white { background: var(--hz-white); color: var(--hz-ink); }
.hz-band--teal, .hz-on-teal { background: linear-gradient(160deg, var(--hz-teal) 0%, var(--hz-teal-deep) 100%); color: var(--hz-white); }
.hz-band--teal h1, .hz-band--teal h2, .hz-band--teal h3, .hz-on-teal h1, .hz-on-teal h2, .hz-on-teal h3, .hz-on-teal p { color: var(--hz-white); }
.hz-band--teal a, .hz-on-teal a { color: var(--hz-spark); }
/* CTA label stays ink-on-gold even inside teal bands (AA-lock; matches home-page buttons) — pin ff4ef44f */
.hz-band--teal a.hz-cta, .hz-on-teal a.hz-cta { color: var(--hz-ink); }

/* --- intro / prose --- */
.hz-lede { font-size: var(--hz-body-lg); line-height: 1.55; max-width: 64ch; margin: 0 0 var(--hz-s5); }
.hz-prose { max-width: 68ch; line-height: 1.65; }
.hz-prose p, .hz-detail__body p { margin: 0 0 var(--hz-s4); }
.hz-detail { margin: var(--hz-s6) 0; }
.hz-detail__body { max-width: 66ch; line-height: 1.6; }

/* --- CTA wrap (button styling lives in tokens .hz-cta) --- */
.hz-ctawrap { margin: var(--hz-s5) 0; }

/* --- service cards + generic grid --- */
/* cards wide enough that the gold button label + arrow fit on one line at a readable size */
.hz-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--hz-s5); margin-top: var(--hz-s5); }
.hz-svc { display: flex; flex-direction: column; align-items: flex-start; gap: var(--hz-s3); background: var(--hz-white); border-top: 3px solid var(--hz-gold); border-radius: var(--hz-radius); padding: var(--hz-s5); box-shadow: var(--hz-shadow-card); }
.hz-svc > * { margin: 0; }
.hz-svc > p:last-child { margin-top: auto; }
/* "Read about…" rendered as the house-style gold CTA button, pinned to the card foot
   (scoped to card links only — inline .hz-svc__link in prose stays a normal text link) */
/* one line, always inside the card, and every button the same height:
   the button fills the card width (so it can never spill past the card edge) and the
   label + arrow stay on a single line at a size that fits the narrowest card */
.hz-svc > p:last-child { align-self: stretch; }
.hz-svc .hz-svc__link { display: flex; width: 100%; box-sizing: border-box; align-items: center; justify-content: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: var(--hz-s3); background: var(--hz-gold); color: var(--hz-ink); font-family: var(--hz-grotesk); font-weight: 600; font-size: clamp(.7rem, .6rem + .25vw, .92rem); line-height: 1; padding: 0 .6rem; border-radius: 999px; text-decoration: none; height: 44px; min-height: 44px; }
.hz-svc .hz-svc__link:hover { filter: brightness(.96); }
.hz-svc > p:last-child br { display: none; }
/* Areas-we-cover cards rendered in the Horizon teal box style (words kept) */
.hz-svc--area { background: linear-gradient(180deg, var(--hz-teal) 0%, var(--hz-teal-deep) 100%); border-top: 3px solid var(--hz-gold); color: var(--hz-white); }
.hz-svc--area h3 { color: var(--hz-white); }
.hz-svc--area p { color: rgba(255,255,255,.9); }

/* --- how-it-works steps --- */
.hz-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--hz-s5); margin-top: var(--hz-s6); list-style: none; padding: 0; }
.hz-step { background: var(--hz-white); border-radius: var(--hz-radius); padding: var(--hz-s5); box-shadow: var(--hz-shadow-card); }
.hz-step h3 { margin-top: 0; }

/* --- nearby towns + figures --- */
.hz-nearby { margin-top: var(--hz-s6); }
.hz-nearby .hz-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--hz-s3); }
.hz-figure { margin: var(--hz-s5) 0; }
.hz-figure img { max-width: 100%; height: auto; border-radius: var(--hz-radius); display: block; }

@media (max-width: 880px) {
  .hz-steps { grid-template-columns: 1fr; }
}

/* --- BLOG: uniform full-image cards, Horizon smokey-glass overlay, WHOLE card clickable --- */
.hz-postlist { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--hz-s5); margin-top: var(--hz-s6); }
.hz-postcard { position: relative; aspect-ratio: 5 / 5.4; border-radius: var(--hz-radius); overflow: hidden; box-shadow: 0 12px 32px rgba(10,34,51,.16); background: linear-gradient(160deg, var(--hz-teal), var(--hz-teal-deep)); transition: transform .25s ease, box-shadow .25s ease; }
.hz-postcard:hover { transform: translateY(-6px); box-shadow: 0 22px 48px rgba(10,34,51,.24); }
.hz-postcard:hover .hz-postcard__cta { background: var(--hz-spark); }
.hz-postcard__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }  /* all images cropped to ONE size = aligned */
.hz-postcard__glass { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; padding: var(--hz-s5); color: var(--hz-white);
  background: linear-gradient(to top, rgba(10,34,51,.97) 0%, rgba(10,34,51,.86) 52%, rgba(14,60,54,.30) 80%, transparent 100%); }
.hz-postcard__glass::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 72%; backdrop-filter: blur(2.5px); -webkit-backdrop-filter: blur(2.5px); z-index: 0; }
.hz-postcard__glass > * { position: relative; z-index: 1; }
.hz-postcard__tag { align-self: flex-start; background: var(--hz-gold); color: var(--hz-ink); font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 3px 10px; border-radius: 999px; }
.hz-postcard h2 { margin: 0; font-family: "Source Sans Pro", var(--hz-grotesk); font-weight: 800; font-size: clamp(17px, 1.45vw, 20px); line-height: 1.2; color: var(--hz-spark); text-shadow: 0 1px 10px rgba(0,0,0,.6); }
.hz-postcard__glass { text-decoration: none; }  /* the whole glass panel IS the link -> whole card clickable */
.hz-postcard__excerpt { margin: 0; font-size: 13px; line-height: 1.5; color: rgba(255,255,255,.85); }  /* plain, non-link text */
.hz-postcard__cta { align-self: flex-end; margin-top: 2px; background: var(--hz-white); color: var(--hz-teal); font-weight: 800; font-size: 12px; padding: 6px 15px; border-radius: 999px; transition: background .2s ease; }
.hz-postcard:hover .hz-postcard__cta { background: var(--hz-sand); }
.hz-postcard .hz-postmeta { margin: 4px 0 0; font-size: 12px; color: rgba(255,255,255,.82); font-weight: 600; }  /* date at the bottom */
.hz-pagination { grid-column: 1 / -1; margin-top: var(--hz-s5); }
@media (max-width: 980px) { .hz-postlist { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .hz-postlist { grid-template-columns: 1fr; } }

/* pin cc4b5364 — section headers: hero-weight + brand brown, light bands sitewide (teal bands stay white) */
.hz-band:not(.hz-on-teal) h2 { font-weight: 900; letter-spacing: -.02em; color: var(--hz-brown); }

/* insight/podcast video embed + insight backlink (pin fix 2026-07-03) */
.hz-video{position:relative;padding-top:56.25%;margin:var(--hz-s6) 0;border-radius:var(--hz-radius);overflow:hidden;background:#000;box-shadow:var(--hz-shadow-card)}
.hz-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.hz-backlink{display:inline-flex;align-items:center;gap:8px;margin-top:var(--hz-s7);padding:var(--hz-s3) var(--hz-s5);font-weight:600;color:var(--hz-teal);text-decoration:none;border:1px solid var(--hz-teal);border-radius:999px;min-height:44px;transition:background .15s,color .15s}
.hz-backlink:hover{background:var(--hz-teal);color:var(--hz-white)}

/* neighbourhood image tiles with smoky-glass overlay (pin build 2026-07-10) */
.hz-hoods{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--hz-s4);margin-top:var(--hz-s6)}
.hz-hood{position:relative;min-height:260px;border-radius:var(--hz-radius);overflow:hidden;background-size:cover;background-position:center;display:flex;align-items:flex-end;box-shadow:var(--hz-shadow-card,0 6px 20px rgba(0,0,0,.12))}
.hz-hood::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 30%,rgba(0,0,0,.4) 100%)}
.hz-hood__panel{position:relative;margin:var(--hz-s3);padding:var(--hz-s3) var(--hz-s4);background:rgba(255,255,255,.16);backdrop-filter:blur(10px) saturate(140%);-webkit-backdrop-filter:blur(10px) saturate(140%);border:1px solid rgba(255,255,255,.35);border-radius:calc(var(--hz-radius) - 4px);color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.5)}
.hz-hood__panel h3{margin:0 0 .25em;color:#fff}
.hz-hood__panel p{margin:0;font-size:.9rem;line-height:1.45;color:#fff}
.hz-hoods__credit{margin-top:var(--hz-s4);font-size:.72rem;color:#6b7770;opacity:.85}
@media (max-width:980px){ .hz-hoods{grid-template-columns:repeat(2,1fr)} }
@media (max-width:880px){ .hz-hoods{grid-template-columns:1fr} }

/* --- tracked contact form: house-style designed card (pin 9b5a15de0255) --- */
.hz-form{max-width:660px;margin:var(--hz-s5) 0;background:var(--hz-white);border-top:4px solid var(--hz-gold);border-radius:var(--hz-radius);box-shadow:var(--hz-shadow-card);padding:var(--hz-s6)}
.hz-form__grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--hz-s4)}
.hz-form label{display:flex;flex-direction:column;gap:6px;font-weight:700;color:var(--hz-ink);font-size:var(--hz-caption);text-transform:uppercase;letter-spacing:.04em}
.hz-form__full{margin-top:var(--hz-s4)}
.hz-form__opt{font-weight:400;color:#6b7a75;text-transform:none;letter-spacing:0}
.hz-form input,.hz-form select,.hz-form textarea{font:inherit;font-weight:400;font-size:var(--hz-body);text-transform:none;letter-spacing:0;padding:var(--hz-s3) var(--hz-s4);border:1.5px solid #d5ddda;border-radius:10px;background:#fbfcfc;color:var(--hz-ink);min-height:46px;transition:border-color .15s,box-shadow .15s}
.hz-form textarea{min-height:120px;resize:vertical}
.hz-form input:focus,.hz-form select:focus,.hz-form textarea:focus{outline:none;border-color:var(--hz-teal);background:#fff;box-shadow:0 0 0 3px rgba(14,92,82,.14)}
.hz-form__hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}
.hz-form__submit{margin-top:var(--hz-s5);width:100%;justify-content:center;border:0;cursor:pointer;font-size:var(--hz-body-lg);font-weight:800;padding:var(--hz-s4) var(--hz-s5)}
.hz-form__note{margin:var(--hz-s4) 0 0;font-size:var(--hz-body);color:var(--hz-teal);font-weight:600;min-height:1.2em}
@media(max-width:640px){.hz-form__grid{grid-template-columns:1fr}.hz-form{padding:var(--hz-s5)}}

/* --- how-it-works steps: homepage numbered gold-badge cards, site-wide (pin d166b243f0af) --- */
.hz-steps{counter-reset:hz-step}
.hz-step{position:relative;border-top:3px solid var(--hz-gold);box-shadow:0 14px 34px rgba(10,34,51,.12);transition:transform .25s ease,box-shadow .25s ease}
.hz-step:hover{transform:translateY(-6px);box-shadow:0 22px 48px rgba(10,34,51,.18)}
.hz-step::before{counter-increment:hz-step;content:counter(hz-step);display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:999px;background:var(--hz-gold);color:var(--hz-ink);font-weight:700;font-size:var(--hz-body-lg);margin-bottom:var(--hz-s3)}
/* --- service-detail accordions: homepage FAQ execution (pin e248b7ff513a) --- */
details.hz-detail{border-bottom:1px solid #e6ece9;padding:var(--hz-s4) 0;margin:0}
details.hz-detail>summary{list-style:none;cursor:pointer;font-weight:700;font-size:var(--hz-body-lg);color:var(--hz-ink)}
details.hz-detail>summary::-webkit-details-marker{display:none}
details.hz-detail>summary::after{content:"+";float:right;color:var(--hz-teal);font-weight:700;margin-left:var(--hz-s3)}
details.hz-detail[open]>summary::after{content:"\2212"}
details.hz-detail .hz-detail__body{padding-top:var(--hz-s3)}

/* --- contact form OVERLAY MODAL (house style, X to close) --- */
.hz-modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:var(--hz-s5)}
.hz-modal[hidden]{display:none}
.hz-modal__backdrop{position:absolute;inset:0;background:rgba(10,34,51,.66);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.hz-modal__card{position:relative;z-index:1;width:100%;max-width:680px;max-height:92vh;overflow:auto;background:var(--hz-white);border-top:4px solid var(--hz-gold);border-radius:var(--hz-radius);box-shadow:0 30px 80px rgba(10,34,51,.4);padding:var(--hz-s6);animation:hz-modal-in .2s ease}
@keyframes hz-modal-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.hz-modal__close{position:absolute;top:var(--hz-s3);right:var(--hz-s3);width:40px;height:40px;border:0;border-radius:999px;background:var(--hz-sand);color:var(--hz-ink);font-size:26px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s}
.hz-modal__close:hover{background:var(--hz-gold)}
.hz-modal__title{margin:0 var(--hz-s6) var(--hz-s2) 0;color:var(--hz-ink)}
.hz-modal__lede{margin:0 0 var(--hz-s4);color:#4a5a55;font-size:var(--hz-body)}
.hz-modal .hz-form{margin:0;border-top:0;box-shadow:none;padding:0;max-width:none}

/* --- FLIP CARDS: finance "solutions we cover" branded cards (pin 610dfb626d19, 2026-07-10).
   These rules previously lived ONLY in finance.html's <head> <style>, which the Nimbus
   deployer strips (it extracts <main> only) — so the cards rendered unstyled (raw stacked
   text) on the live preview. Moved into the enqueued theme CSS so the Horizon-HQ styling
   deploys with the theme and applies on every page that uses .hz-flip. --- */
.hz-grid:has(> .hz-flip){grid-template-columns:repeat(3,1fr)}
.hz-flip{perspective:1200px;height:360px}
.hz-flip__inner{position:relative;width:100%;height:100%;transition:transform .6s;transform-style:preserve-3d}
.hz-flip.is-flipped .hz-flip__inner{transform:rotateY(180deg)}
.hz-flip__face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:var(--hz-white);border:1px solid #e6ece9;border-top:3px solid var(--hz-gold);border-radius:var(--hz-radius);padding:var(--hz-s5);display:flex;flex-direction:column;overflow-y:auto}
.hz-flip__face h3{margin:0 0 var(--hz-s2)}
.hz-flip__front p{margin:0 0 var(--hz-s3)}
.hz-flip__back{transform:rotateY(180deg)}
.hz-flip__back p{margin:0 0 var(--hz-s3)}
.hz-flip__back ul,.hz-flip__back ol{margin:0 0 var(--hz-s3);padding-inline-start:var(--hz-s6)}
.hz-flip__back li{margin-bottom:var(--hz-s2)}
.hz-flip__btn{align-self:flex-start;font-weight:600;text-decoration:underline;text-underline-offset:3px;color:var(--hz-teal);background:none;border:0;cursor:pointer;padding:0;font:inherit}
.hz-flip__front .hz-flip__btn{margin-top:auto;padding-top:var(--hz-s3)}
.hz-flip__back .hz-flip__btn{align-self:flex-end;margin:0 0 var(--hz-s3)}
@media (max-width:980px){ .hz-grid:has(> .hz-flip){grid-template-columns:repeat(2,1fr)} }
@media (max-width:880px){ .hz-grid:has(> .hz-flip){grid-template-columns:1fr} .hz-flip{height:420px} }
/* Force brand body font (Source Sans Pro) over Blocksy's body{...!important} default — Matt 2026-07-14.
   Higher specificity (html body...) so it wins the !important tie; headings keep their own font. */
html body,html body p,html body li,html body a,html body span,html body input,html body select,html body textarea,html body button{font-family:"Source Sans Pro",var(--hz-grotesk,system-ui,sans-serif)!important}
/* Flip-card hover "pop" + whole-card is clickable (Matt 2026-07-15) */
.hz-flip{cursor:pointer;transition:transform .2s ease}
.hz-flip:hover{transform:translateY(-5px)}
.hz-flip__face{transition:box-shadow .2s ease}
.hz-flip:hover .hz-flip__face{box-shadow:0 14px 34px rgba(14,34,51,.16)}
/* jump-to-accordion links land with breathing room instead of jamming to the top */
details[id]{scroll-margin-top:90px}
/* Card EXPAND MODAL — roomy detail panel with a close X (replaces the flip; Matt 2026-07-15) */
#hz-card-modal{position:fixed;inset:0;z-index:99998;display:flex;align-items:center;justify-content:center;padding:20px}
#hz-card-modal[hidden]{display:none}
.hz-cardmodal__backdrop{position:absolute;inset:0;background:rgba(10,34,51,.7);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.hz-cardmodal__panel{position:relative;z-index:1;width:100%;max-width:720px;max-height:86vh;overflow:auto;background:#fff;border-top:4px solid var(--hz-gold);border-radius:14px;box-shadow:0 30px 80px rgba(10,34,51,.45);padding:32px 40px 30px;animation:hzcmin .18s ease}
@keyframes hzcmin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.hz-cardmodal__x{position:absolute;top:12px;right:12px;width:40px;height:40px;border:0;border-radius:999px;background:#0E5C52;color:#fff;font-size:24px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s}
.hz-cardmodal__x:hover{background:#0A463E}
.hz-cardmodal__body h3{margin:0 40px 14px 0;font-size:24px;line-height:1.2;color:var(--hz-ink)}
.hz-cardmodal__body p{margin:0 0 12px;line-height:1.6}
.hz-cardmodal__body ul,.hz-cardmodal__body ol{margin:0 0 12px;padding-inline-start:22px}
.hz-cardmodal__body li{margin-bottom:6px}