/* =========================================================
   Microsite Base — shared styles
   Plain CSS, no build step. Edit freely.
   Brand color and font are driven by CSS variables below so
   a single change re-themes the whole site.
   ========================================================= */

:root {
  /* Sampled from the logo James supplied, 2026-09-11. Contrast for every pair
     the site uses is recorded in the brand kit's palette.md. Gold fails on
     white at 2.38:1, so it is a background and an accent, never text. */
  --brand:        #022CFA;   /* logo blue: links, buttons, accents */
  --gold:         #CDA239;   /* logo gold: the arc, and the CTA button */
  --gold-light:   #E3BE63;   /* gold on a dark background */
  --brand-dark:   #0023CC;   /* darker shade for hovers */
  --ink:          #0F1A33;   /* body text, and the mark's shadow faces */
  --ink-soft:     #47516B;   /* secondary text */
  --line:         #e3e8ee;   /* hairlines / borders */
  --bg:           #ffffff;
  --bg-alt:       #F4F6FD;   /* alternating section background */
  --bg-dark:      #060F2E;   /* footer / dark band */
  --max:          1160px;    /* content max width */
  --radius:       10px;
  --font-head: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  color: var(--ink);
  line-height: 1.65;
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 20px; }

h1, h2, h3, h4 { font-family: var(--font-head); line-height: 1.12; color: var(--ink); letter-spacing: -.02em; }
h1 { font-size: clamp(2.1rem, 5.4vw, 3.5rem); font-weight: 800; }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); font-weight: 800; margin-bottom: .55em; }
h3 { font-size: 1.2rem; font-weight: 700; margin-bottom: .35em; letter-spacing: -.01em; }
p  { margin-bottom: 1rem; color: var(--ink-soft); }
a  { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; height: auto; display: block; }

/* ---------- buttons ---------- */
.btn {
  display: inline-block;
  background: var(--brand);
  color: #fff;
  padding: 14px 28px;
  border-radius: var(--radius);
  font-weight: 600;
  font-family: var(--font-body);
  border: none;
  cursor: pointer;
  transition: background .15s ease;
}
.btn:hover { background: var(--brand-dark); text-decoration: none; }
.btn--ghost { background: transparent; color: var(--brand); border: 2px solid var(--brand); }
.btn--ghost:hover { background: var(--brand); color: #fff; }
.btn--lg { padding: 18px 38px; font-size: 1.05rem; }

.muted { color: var(--ink-soft); font-size: .9rem; }

/* ---------- header / nav ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; padding: 12px 20px; max-width: var(--max); margin: 0 auto;
}
.nav__logo img { max-height: 46px; width: auto; }
.nav__links { display: flex; align-items: center; gap: 22px; list-style: none; }
.nav__links a { color: var(--ink); font-weight: 500; font-size: .97rem; }
.nav__links a:hover { color: var(--brand); text-decoration: none; }

/* dropdown for services */
.has-dropdown { position: relative; }
.dropdown {
  display: none; position: absolute; top: 100%; left: 0;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  min-width: 250px; padding: 8px 0; box-shadow: 0 12px 30px rgba(0,0,0,.08);
}
/* invisible bridge: fills the gap between the menu item and the dropdown
   so hover isn't lost when the mouse travels down into the submenu */
.has-dropdown::after {
  content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 14px; display: none;
}
.has-dropdown:hover::after { display: block; }
.has-dropdown:hover .dropdown { display: block; }
.dropdown li { list-style: none; }
.dropdown a { display: block; padding: 9px 18px; font-size: .92rem; }
.dropdown a:hover { background: var(--bg-alt); }

.nav__call {
  background: var(--brand); color: #fff !important;
  padding: 10px 18px; border-radius: var(--radius); font-weight: 600;
}
.nav__call:hover { background: var(--brand-dark); text-decoration: none; }

/* mobile nav toggle */
.nav__toggle { display: none; background: none; border: 0; font-size: 1.6rem; cursor: pointer; color: var(--ink); }
@media (max-width: 900px) {
  .nav__links { display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: flex-start; gap: 0;
    background: #fff; border-bottom: 1px solid var(--line); padding: 10px 20px; }
  .nav__links.open { display: flex; }
  .nav__links li { width: 100%; padding: 8px 0; }
  .dropdown { position: static; display: block; box-shadow: none; border: 0; padding: 4px 0 4px 14px; min-width: 0; }
  .nav__toggle { display: block; }
}

/* ---------- hero ---------- */
.hero { position: relative; color: #fff; }
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(21,33,46,.55), rgba(21,33,46,.78)); z-index: 1; }
.hero__inner { position: relative; z-index: 2; max-width: var(--max); margin: 0 auto; padding: 90px 20px; }
.hero__eyebrow { text-transform: uppercase; letter-spacing: .08em; font-size: .85rem; font-weight: 600; opacity: .9; }
.hero h1 { color: #fff; margin: 10px 0 16px; max-width: 18ch; }
.hero p { color: rgba(255,255,255,.9); font-size: 1.15rem; max-width: 46ch; }
.hero__cta { margin-top: 26px; display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }

/* ---------- sections ---------- */
.section { padding: 64px 0; }
.section--alt { background: var(--bg-alt); }
.section--dark { background: var(--bg-dark); color: #fff; }
.section--dark h2, .section--dark h3 { color: #fff; }
.section--dark p { color: rgba(255,255,255,.82); }
.section__lead { max-width: 65ch; }
.center { text-align: center; }
.center .section__lead { margin: 0 auto; }

/* two-column split */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
@media (max-width: 800px) { .split { grid-template-columns: 1fr; gap: 28px; } }

/* feature / why-us grid */
.grid { display: grid; gap: 24px; }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px) { .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } }

.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px;
}
.section--alt .card { background: #fff; }
.card h3 { margin-bottom: .4em; }
.card p:last-child { margin-bottom: 0; }

/* service / area link list */
.linklist { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; list-style: none; }
@media (max-width: 800px) { .linklist { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .linklist { grid-template-columns: 1fr; } }
.linklist a {
  display: block; padding: 14px 18px; border: 1px solid var(--line);
  border-radius: var(--radius); background: #fff; color: var(--ink); font-weight: 600;
}
.linklist a:hover { border-color: var(--brand); color: var(--brand); text-decoration: none; }

/* cost table */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
th, td { text-align: left; padding: 14px 18px; border-bottom: 1px solid var(--line); font-size: .96rem; }
th { background: var(--bg-alt); font-family: var(--font-body); font-weight: 700; color: var(--ink); }
tr:last-child td { border-bottom: 0; }

/* FAQ */
.faq details { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 4px 20px; margin-bottom: 12px; }
.faq summary { cursor: pointer; font-weight: 600; font-family: var(--font-head); font-size: 1.1rem; padding: 16px 0; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; float: right; color: var(--brand); font-size: 1.4rem; line-height: 1; }
.faq details[open] summary::after { content: "\2013"; }
.faq details > p { padding-bottom: 16px; margin-bottom: 0; }

/* CTA band */
.cta-band { background: var(--brand); color: #fff; text-align: center; padding: 56px 20px; }
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(255,255,255,.9); }
.cta-band .btn { background: #fff; color: var(--brand); }
.cta-band .btn:hover { background: #f0f3f7; }

/* ---------- estimate / contact form ---------- */
.form-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 30px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 600px) { .form-row { grid-template-columns: 1fr; } }
.field { margin-bottom: 16px; }
.field label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: 6px; color: var(--ink); }
.field input, .field textarea, .field select {
  width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px;
  font-family: var(--font-body); font-size: 1rem;
}
.field textarea { min-height: 130px; resize: vertical; }

/* ---------- footer ---------- */
.site-footer { background: var(--bg-dark); color: rgba(255,255,255,.8); padding: 56px 0 28px; }
.site-footer h4 { color: #fff; margin-bottom: 14px; font-family: var(--font-body); font-size: 1rem; letter-spacing: .02em; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 36px; }
@media (max-width: 800px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; } }
@media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; } }
.site-footer ul { list-style: none; }
.site-footer li { margin-bottom: 9px; }
.site-footer a { color: rgba(255,255,255,.8); font-size: .93rem; }
.site-footer a:hover { color: #fff; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.15); margin-top: 40px; padding-top: 20px; font-size: .85rem; color: rgba(255,255,255,.55); }
.footer-disclaimer { font-size: .82rem; color: rgba(255,255,255,.55); margin-top: 10px; line-height: 1.5; }

/* ---------- article pages (about, FAQ, team, careers, legal) ---------- */
.article { max-width: 820px; }
.article h1 { margin-bottom: 14px; }
.article h2 { margin-top: 40px; }
.article h3 { margin-top: 26px; }
.article ul, .article ol { margin: 0 0 1rem 1.3em; color: var(--ink-soft); }
.article li { margin-bottom: .45rem; }
.article__date { margin-top: -4px; }
.faq-page h2 { font-size: 1.35rem; margin-top: 34px; }
.contact-list { list-style: none; margin: 22px 0; }
.contact-list li { padding: 12px 0; border-bottom: 1px solid var(--line); }
.contact-list li:last-child { border-bottom: 0; }
.team-grid { margin-top: 24px; }
.team-card .avatar { width: 56px; height: 56px; border-radius: 50%; background: var(--brand); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; margin-bottom: 14px; }
.team-card .role { color: var(--brand); font-weight: 600; font-size: .9rem; margin-bottom: 8px; }

/* phone link — class is a stable hook for WhatConverts dynamic number insertion */
.wc-phone { font-weight: 700; }


/* ---- Brand kit, added 2026-09-10 ----
   Navy carries the page, gold points at things. Gold is an accent and never a
   background for body text: it fails contrast at reading sizes on white. */

.site-header .brand-logo { height: 44px; width: auto; display: block; }
.site-footer .brand-logo { height: 40px; width: auto; margin-bottom: 1rem; }

h2 { position: relative; }
.wrap > h2::after, section > .wrap > h2::after {
  content: ""; display: block; width: 84px; height: 3px;
  background: var(--gold); margin-top: .6rem;
}

a { color: var(--brand); }
a:hover { color: var(--brand-dark); }

.btn { background: var(--brand); border-color: var(--brand); }
.btn:hover { background: var(--brand-dark); border-color: var(--brand-dark); }
.btn--gold, .btn--accent {
  background: var(--gold); border-color: var(--gold); color: #1a1a1a;
}
.btn--gold:hover, .btn--accent:hover { background: var(--gold-light); border-color: var(--gold-light); }

.site-footer { background: var(--bg-dark); }
.site-footer h4 { color: #fff; }
.site-footer a { color: var(--gold-light); }
.site-footer a:hover { color: #fff; }
/* The export set footer body text to rgba(255,255,255,.8), which fails AA on
   the darker navy. Lifted to a solid value that passes. */
.site-footer p, .site-footer li, .footer-disclaimer, .footer-bottom { color: #D6DEE8 !important; }

.wc-phone { color: var(--gold-light); font-weight: 700; }
.site-header .wc-phone { color: var(--brand); }

/* Founder block on the home page and the About bio. */
.founder { display: grid; grid-template-columns: 220px 1fr; gap: 2rem; align-items: start; }
.founder img { width: 100%; height: auto; border-radius: 10px; display: block;
  border: 3px solid var(--gold); }
.founder .founder-role { color: var(--ink-soft); font-size: .95rem; margin-top: -.4rem; }
@media (max-width: 720px) {
  .founder { grid-template-columns: 1fr; }
  .founder img { max-width: 240px; }
}

/* City page lead image. */
.city-hero-img { width: 100%; height: auto; border-radius: 10px; display: block; margin: 1.5rem 0; }

/* ---- Contrast and LCP fixes, 2026-09-10 ----
   pa11y reported 1:1 on the hero h1 and on .btn--ghost. Both were text with no
   solid colour resolvable behind them: the hero sits on a background image and
   the ghost button is transparent. A checker cannot compute a ratio against an
   image, and neither can a person if the image fails to load. Solid fallbacks
   fix both the audit and the real-world case. */

.hero { background-color: var(--brand-dark); }
.hero::after {
  background: linear-gradient(180deg, rgba(7,27,48,.72), rgba(7,27,48,.88));
}
.hero h1, .hero p, .hero .hero__sub { color: #fff; }
.hero p, .hero .hero__sub { color: #E8EEF5; }

.btn--ghost {
  background: #fff;
  color: var(--brand);
  border: 2px solid var(--brand);
}
.btn--ghost:hover { background: var(--brand); color: #fff; }
.hero .btn--ghost {
  background: transparent; color: #fff; border-color: #fff;
}
.hero .btn--ghost:hover { background: #fff; color: var(--brand); }


/* The home hero background. Replaces the export's stock image with the branded
   one, and drops the duplicate inline copy that was doubling the LCP payload. */


/* The phone number inside a link inherits the link colour, which on the pale
   panel used by the estimate page did not reach 4.5:1. Pin it to navy, and
   keep the gold-on-dark version where the ground is dark. */
a .wc-phone, a strong, .wc-phone strong { color: inherit; }
.site-footer a strong, .site-footer .wc-phone { color: var(--gold-light); }
.hero a strong, .hero .wc-phone { color: #fff; }
main a strong, section a strong { color: var(--brand); }

/* Correction: .wc-phone was set to gold globally, which fails contrast on the
   white and paper backgrounds used by most pages. Navy is the default; gold is
   only for the dark grounds where it actually reads. */
.wc-phone { color: var(--brand) !important; font-weight: 700; }
.site-footer .wc-phone, .site-footer a strong { color: var(--gold-light) !important; }
.hero .wc-phone, .hero a strong { color: #fff !important; }

/* The nav call button has a navy background, so forcing navy text on it
   produced navy on navy. White is the only correct value there. */
.nav__call, .nav__call.wc-phone, .site-header .nav__call { color: #fff !important; }

/* Footer headings are h3 rather than h4 so the document outline does not skip a
   level. They keep the smaller footer size visually. */
.site-footer .footer-h { font-size: 1rem; margin: 0 0 .75rem; color: #fff; font-weight: 700; }

/* ===================================================================
   Round 3, 2026-09-10. Typography, logo and one button system.
   =================================================================== */

/* Body copy was too small to read comfortably. Everything scales from here. */
html { font-size: 18px; }
@media (max-width: 640px) { html { font-size: 17px; } }
body { line-height: 1.65; }
p, li { font-size: 1.05rem; }
h3 { font-size: 1.35rem; }
.muted { font-size: 1rem; }
.hero p, .hero__sub { font-size: 1.2rem; line-height: 1.6; }

/* The logo was small enough that the second line was unreadable. */
.site-header .brand-logo { height: 62px; }
.site-footer .brand-logo { height: 52px; }
@media (max-width: 900px) { .site-header .brand-logo { height: 50px; } }

/* ---- One button system ----
   Every call to action is gold with dark text. It is the only accent on the
   page, so it should be the thing the eye lands on. Hover darkens the gold
   rather than changing the text colour, because the previous rules changed
   background and colour independently and left text invisible on hover. */
.btn,
.btn--lg,
.btn--gold,
.btn--accent,
.btn--ghost,
a.btn {
  background: var(--gold);
  color: #14202E;
  border: 2px solid var(--gold);
  font-weight: 700;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.btn:hover, .btn:focus-visible,
.btn--lg:hover, .btn--gold:hover, .btn--accent:hover, .btn--ghost:hover,
a.btn:hover, a.btn:focus-visible {
  background: #B4901F;
  border-color: #B4901F;
  color: #14202E;
  text-decoration: none;
}

/* A secondary action, still gold but outlined, for the phone next to a
   primary. On dark grounds it uses the lighter gold so it stays legible. */
.btn--secondary {
  background: transparent; color: var(--gold); border-color: var(--gold);
}
.btn--secondary:hover { background: var(--gold); color: #14202E; border-color: var(--gold); }
.hero .btn--secondary { color: var(--gold-light); border-color: var(--gold-light); }
.hero .btn--secondary:hover { background: var(--gold-light); color: #14202E; border-color: var(--gold-light); }

/* The nav call button keeps the navy pill so it reads as chrome, not content. */
.nav__call, .nav__call.wc-phone, .site-header .nav__call {
  background: var(--brand) !important;
  color: #fff !important;
  border: 2px solid var(--brand) !important;
}
.nav__call:hover, .site-header .nav__call:hover {
  background: var(--brand-dark) !important;
  border-color: var(--brand-dark) !important;
  color: #fff !important;
}

/* The footer address should break on its own lines rather than wrapping
   mid-locality, which read as a typo. */
.footer-address { font-style: normal; line-height: 1.55; }
.footer-address span { display: block; }

/* Specificity correction. The grouped rule above includes a.btn, which is more
   specific than a bare .btn--secondary, so the outlined variant was losing its
   transparent background and rendering as white text on gold. */
a.btn.btn--secondary, .btn.btn--secondary, a.btn--secondary {
  background: transparent;
  color: var(--brand);
  border-color: var(--brand);
}
a.btn.btn--secondary:hover, .btn.btn--secondary:hover, a.btn--secondary:hover {
  background: var(--brand); color: #fff; border-color: var(--brand);
}
.hero a.btn.btn--secondary, .hero .btn.btn--secondary {
  background: transparent; color: #fff; border-color: #fff;
}
.hero a.btn.btn--secondary:hover, .hero .btn.btn--secondary:hover {
  background: #fff; color: var(--brand); border-color: #fff;
}

/* The theme caps nav logo images at 46px, which overrode the height set above
   and left the second line of the wordmark too small to read. */
.nav__logo img, .site-header .nav__logo img { max-height: none; height: 64px; }
@media (max-width: 900px) { .nav__logo img, .site-header .nav__logo img { height: 50px; } }

/* ---- Nav fit, 2026-09-10 ----
   The 18px root made the header contents wider than the bar, so link labels
   and the phone pill were breaking onto two lines. The nav is chrome rather
   than reading copy, so it takes its own smaller scale and never wraps. The
   hamburger now takes over earlier, before the row can run out of room. */
.nav { gap: 14px; }
.nav__links { gap: 16px; }
.nav__links > li > a,
.nav__call {
  font-size: .95rem;
  white-space: nowrap;
}
.nav__call { padding: 11px 18px; }
.nav__logo img, .site-header .nav__logo img { max-height: none; height: 58px; }

@media (max-width: 1180px) {
  .nav__links {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: #fff; border-top: 1px solid var(--line);
    box-shadow: 0 14px 30px rgba(14,42,71,.10); padding: 8px 0;
  }
  .nav__links.open { display: flex; }
  .nav__links > li > a { display: block; padding: 13px 22px; font-size: 1rem; }
  .nav__toggle { display: block; }
  .site-header { position: relative; }
  .dropdown { position: static; display: block; box-shadow: none; border: 0; padding: 0; }
  .dropdown a { padding-left: 42px; }
}
@media (max-width: 900px) { .nav__logo img, .site-header .nav__logo img { height: 48px; } }

/* Measured at 1408px the row had negative headroom, so it was fitting by
   luck. Tighter scale and the hamburger takes over sooner. */
.nav { gap: 12px; }
.nav__links { gap: 13px; }
.nav__links > li > a { font-size: .9rem; }
.nav__call { font-size: .9rem; padding: 10px 15px; }
@media (max-width: 1260px) {
  .nav__links {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: #fff; border-top: 1px solid var(--line);
    box-shadow: 0 14px 30px rgba(14,42,71,.10); padding: 8px 0;
  }
  .nav__links.open { display: flex; }
  .nav__links > li > a { display: block; padding: 13px 22px; font-size: 1rem; }
  .nav__toggle { display: block; }
  .site-header { position: relative; }
  .dropdown { position: static; display: block; box-shadow: none; border: 0; padding: 0; }
  .dropdown a { padding-left: 42px; }
}

/* Keyboard users land on a 14 item nav before the content. This lets them past it.
   Off-screen until focused, then pinned top-left over the header. */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--brand); color: #fff; padding: 12px 18px;
  border-radius: 0 0 var(--radius) 0; font-weight: 700; text-decoration: none;
}
.skip-link:focus { left: 0; }

/* Utility classes replacing the 399 inline style attributes the export left
   behind. Each holds exactly the declarations its inline style held, so the
   rendering is unchanged. They exist so the site can run a Content Security
   Policy without style-src 'unsafe-inline'. */
.mt-10 { margin-top: 10px; }
.mt-16 { margin-top: 1rem; }
.mt-18 { margin-top: 18px; }
.mt-20 { margin-top: 20px; }
.mt-24 { margin-top: 24px; }
.mt-28 { margin-top: 28px; }
.mt-34 { margin-top: 34px; }
.mb-22 { margin-bottom: 22px; }
.mt-18-center { margin: 18px auto 0; }
.w-full { width: 100%; }
.center-block { text-align: center; margin-left: auto; margin-right: auto; }
.measure-820 { max-width: 820px; margin: 28px auto 0; }
.footer-text { color: rgba(255, 255, 255, .8); }
.section--tight { padding: 18px 0; }
.media-full { width: 100%; border-radius: var(--radius); }
/* Bot trap. Off-screen rather than display:none so scrapers still fill it in. */
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-status--ok { color: #0F6B36; }
.form-status--error { color: #B3261E; }


/* ============================================================
   WinCore Homes — theme and site-specific components.
   Generated by build.mjs. Do not edit here; edit data/site.json
   for colours and build.mjs for the components.
   ============================================================ */
:root {
  --brand:      #14506B;
  --brand-dark: #0E3B50;
  --gold:       #D98324;
  --gold-light: #EBA95A;
  --ink:        #132029;
  --ink-soft:   #4A5A66;
  --line:       #DDE5EA;
  --bg-alt:     #F2F6F8;
  --bg-dark:    #0B2431;
  /* The accent at 2.91:1 on white fails WCAG 1.4.3 even for large text. This
     is the same hue darkened to 4.04:1, for accent-coloured text on a light
     background. The lighter accent stays for fills and dark grounds. */
  --accent-ink: #B86C18;
}

/* Wordmark stands in for a logo until a real one exists. */
.brand-word { font-weight: 800; font-size: 1.35rem; letter-spacing: -.02em; color: var(--brand); }
.brand-word--footer { color: #fff; margin-bottom: .6rem; }

/* Hero has no photograph yet, so it carries a flat brand background instead
   of an image the site does not have. Swap for a picture element when real
   property photography exists. */
.hero { background: var(--bg-dark); color: #fff; padding: 84px 0 72px; }
.hero h1, .hero p { color: #fff; }
.hero__eyebrow { color: var(--gold-light); text-transform: uppercase; letter-spacing: .09em; font-size: .82rem; font-weight: 700; }
.hero__inner { max-width: var(--max); margin: 0 auto; padding: 0 20px; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; }

.measure-820 { max-width: 820px; }
.split { display: grid; grid-template-columns: 1.05fr .95fr; gap: 44px; align-items: start; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; gap: 32px; } }

.card--feature { padding: 30px; }
.step-n { font-weight: 800; font-size: 1.6rem; color: var(--accent-ink); line-height: 1; margin-bottom: .3rem; }

.ticklist { margin: 0 0 1rem 1.15rem; color: var(--ink-soft); }
.ticklist li { margin-bottom: .55rem; }

.footer-links { list-style: none; margin: 0; padding: 0; }
.footer-links li { margin-bottom: .35rem; }

/* Fourteen situations do not fit one dropdown column.

   The display property has to stay on the hover state. The base stylesheet
   hides the menu with .dropdown { display: none } and reveals it with
   .has-dropdown:hover .dropdown { display: block }. Putting display: grid on
   a bare .dropdown--wide gave it equal specificity and a later position, so
   it beat the display: none and the menu stood permanently open over the
   hero. Only the width belongs on the element itself. */
.dropdown--wide { min-width: 420px; }
.has-dropdown:hover .dropdown--wide { display: grid; grid-template-columns: 1fr 1fr; }
@media (max-width: 900px) {
  .dropdown--wide, .has-dropdown:hover .dropdown--wide { display: block; min-width: 0; }
}

.crumbs { font-size: .85rem; color: var(--ink-soft); margin-bottom: 1rem; }
.crumbs a { color: var(--ink-soft); }

.badge { display: inline-block; font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; padding: 5px 11px; border-radius: 999px; margin-bottom: .6rem; }
.badge--available { background: #E6F4EA; color: #14612F; }
.badge--pending   { background: #FDF1DD; color: #7A4A08; }
.badge--sold      { background: #EDEFF1; color: #4A5A66; }

.listing-card { display: flex; flex-direction: column; }
.listing-card__img { border-radius: var(--radius); margin-bottom: 14px; object-fit: cover; aspect-ratio: 4 / 3; }
.listing-price { font-size: 1.35rem; font-weight: 800; color: var(--ink); margin-bottom: .2rem; }
.listing-specs { font-size: .92rem; color: var(--ink-soft); margin-bottom: .6rem; }

.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
.gallery img { border-radius: var(--radius); object-fit: cover; aspect-ratio: 3 / 2; width: 100%; }

.team-photo { border-radius: var(--radius); }

/* The CTA band's background IS var(--brand), and a.btn.btn--secondary sets its
   text to var(--brand) too, so the Call button rendered invisible on every
   page. The hero carries an override for the same collision; the band needs
   its own. Caught by pa11y at a 1:1 contrast ratio. */
.cta-band a.btn.btn--secondary, .cta-band .btn.btn--secondary {
  background: transparent; color: #fff; border-color: #fff;
}
.cta-band a.btn.btn--secondary:hover, .cta-band .btn.btn--secondary:hover {
  background: #fff; color: var(--brand); border-color: #fff;
}
/* .wc-phone carries color var(--brand) !important in the base stylesheet,
   which no amount of specificity beats. The footer and the hero already have
   their own !important overrides for exactly this; the CTA band never got one,
   which is why the button text stayed the same colour as the band behind it. */
.cta-band .wc-phone, .cta-band a strong { color: #fff !important; }
.cta-band .wc-phone:hover { color: var(--brand) !important; }

table { width: 100%; border-collapse: collapse; }
table th, table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); font-size: .95rem; }
table th { color: var(--ink); font-weight: 600; width: 45%; }
table td { color: var(--ink-soft); }

/* Visually hidden, but still focusable and still submitted, which is what
   makes it work as a honeypot. display:none would stop some bots filling it. */
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }