/* Base theme. build_site.py substitutes the __TOKEN__ values from site.json theme settings.
   Everything visual routes through custom properties so a network of sites can look
   genuinely different without touching layout code. */

:root {
  --brand:        #1B3B6F;
  --brand-dark:   #0E1D38;
  --accent:       #C9A227;
  --accent-dark:  #A8861B;
  --ink:          #111827;
  --ink-soft:     #4A5568;
  --bg:           #ffffff;
  --bg-alt:       #F5F7FA;
  --line:         #DFE4EC;

  --font-head: "Playfair Display", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-body: "Source Sans 3", "Source Sans Pro", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;

  --radius: 6px;
  --shadow: 0 1px 2px rgba(16,24,40,.04), 0 8px 24px -8px rgba(16,24,40,.12);
  --shadow-lg: 0 2px 4px rgba(16,24,40,.04), 0 20px 48px -12px rgba(16,24,40,.18);
  --wrap: 1140px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

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

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

h1, h2, h3, h4 { font-family: var(--font-head); color: var(--ink); line-height: 1.2; margin: 0 0 .5em; font-weight: 700; letter-spacing: -.01em; }
h1 { font-size: clamp(1.9rem, 4.2vw, 2.9rem); }
h2 { font-size: clamp(1.4rem, 2.6vw, 1.95rem); margin-top: 2.2em; }
h3 { font-size: clamp(1.1rem, 1.8vw, 1.3rem); margin-top: 1.6em; }
p  { margin: 0 0 1.1em; }
a  { color: var(--brand-dark); text-underline-offset: 2px; }
ul, ol { margin: 0 0 1.2em; padding-left: 1.3em; }
li { margin-bottom: .45em; }
img { max-width: 100%; height: auto; display: block; border-radius: var(--radius); }

/* ---------- header ---------- */

.topbar { background: var(--brand-dark); color: #fff; font-size: .85rem; }
.topbar .wrap { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 38px; flex-wrap: wrap; }
.topbar a { color: #fff; text-decoration: none; }

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.96);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--line);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 72px; }

.logo { display: flex; align-items: center; gap: 11px; text-decoration: none; color: var(--ink); font-family: var(--font-head); font-weight: 700; font-size: 1.08rem; line-height: 1.15; }
.logo-mark { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 9px; background: linear-gradient(135deg, var(--brand), var(--brand-dark)); color: #fff; display: grid; place-items: center; font-size: .95rem; letter-spacing: .02em; }

.nav { display: flex; align-items: center; gap: 4px; }
.nav > li { list-style: none; position: relative; }
.nav ul { list-style: none; margin: 0; padding: 0; }
.nav-link { display: block; padding: 10px 13px; border-radius: 8px; text-decoration: none; color: var(--ink); font-weight: 500; font-size: .95rem; white-space: nowrap; background: none; border: 0; font-family: inherit; cursor: pointer; }
.nav-link:hover { background: var(--bg-alt); }

.dropdown { position: absolute; top: calc(100% + 6px); left: 0; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-lg); padding: 12px; display: grid;
  /* Hidden with visibility rather than display so closing can be delayed.
     Moving the pointer diagonally toward the menu no longer loses it. */
  visibility: hidden; opacity: 0; transform: translateY(-4px);
  transition: opacity .14s ease .28s, transform .14s ease .28s, visibility 0s linear .42s; }
.has-drop:hover > .dropdown,
.has-drop:focus-within > .dropdown,
.has-drop.open > .dropdown {
  visibility: visible; opacity: 1; transform: none;
  transition: opacity .14s ease, transform .14s ease, visibility 0s; }

/* Bridges the 6px gap under the trigger. Without it the pointer leaves the
   <li> on its way to the menu and the menu closes underneath it. */
.has-drop::after { content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 10px; }

/* Caret marking the items that open a menu */
.has-drop > .nav-link::after {
  content: ""; display: inline-block; width: .4em; height: .4em; margin-left: .55em;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-.15em) rotate(45deg);
  transition: transform .18s ease; }
.has-drop:hover > .nav-link::after,
.has-drop:focus-within > .nav-link::after,
.has-drop.open > .nav-link::after { transform: translateY(.05em) rotate(225deg); }
.dropdown.cols-2 { grid-template-columns: repeat(2, minmax(210px, 1fr)); width: max-content; max-width: 92vw; }
.dropdown.cols-3 { grid-template-columns: repeat(3, minmax(200px, 1fr)); width: max-content; max-width: 92vw; }
.dropdown a { display: block; padding: 8px 11px; border-radius: 7px; text-decoration: none; color: var(--ink); font-size: .92rem; }
.dropdown a:hover { background: var(--bg-alt); color: var(--brand-dark); }
.dropdown .group-label { grid-column: 1/-1; font-size: .72rem; text-transform: uppercase; letter-spacing: .09em; color: var(--ink-soft); padding: 8px 11px 4px; font-weight: 600; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 13px 22px; border-radius: var(--radius); font-weight: 600; text-decoration: none; border: 0; cursor: pointer; font-family: var(--font-body); font-size: 1rem; line-height: 1.2; transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease; }
.btn-call { background: var(--accent); color: #fff; box-shadow: var(--shadow); }
.btn-call:hover { background: var(--accent-dark); transform: translateY(-1px); }
.btn-ghost { background: #fff; color: var(--ink); border: 1px solid var(--line); }
.btn-ghost:hover { border-color: var(--brand); color: var(--brand-dark); }
.btn-lg { padding: 16px 30px; font-size: 1.06rem; }

.nav-toggle { display: none; background: none; border: 1px solid var(--line); border-radius: 9px; padding: 9px 11px; cursor: pointer; }
.nav-toggle span { display: block; width: 20px; height: 2px; background: var(--ink); margin: 4px 0; border-radius: 2px; }

/* ---------- hero ---------- */

.hero { background: var(--bg-alt); border-bottom: 1px solid var(--line); padding: clamp(38px, 6vw, 76px) 0; }
.hero h1 { margin-bottom: .35em; }
.hero-sub { font-size: clamp(1.03rem, 1.7vw, 1.2rem); color: var(--ink-soft); max-width: 60ch; margin-bottom: 1.6em; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.hero-split { display: grid; grid-template-columns: 1.08fr .92fr; gap: clamp(28px, 4vw, 56px); align-items: center; }
.hero-center { text-align: center; }
.hero-center .hero-sub { margin-left: auto; margin-right: auto; }
.hero-center .hero-actions { justify-content: center; }
.hero-stack .hero-media { margin-top: 34px; }

.trustbar { background: #fff; border-bottom: 1px solid var(--line); padding: 18px 0; }
.trustbar ul { display: flex; flex-wrap: wrap; gap: 12px 34px; margin: 0; padding: 0; list-style: none; justify-content: center; }
.trustbar li { display: flex; align-items: center; gap: 9px; font-size: .93rem; color: var(--ink-soft); font-weight: 500; margin: 0; }
.trustbar svg { flex: 0 0 18px; color: var(--brand); }

/* ---------- content ---------- */

main { padding: clamp(32px, 5vw, 60px) 0 0; }
.content { max-width: 74ch; }
.layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: clamp(28px, 4vw, 56px); align-items: start; }

.callout { background: var(--bg-alt); border-left: 3px solid var(--brand); border-radius: 0 var(--radius) var(--radius) 0; padding: 20px 24px; margin: 1.8em 0; }
.callout p:last-child { margin-bottom: 0; }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin: 1.6em 0 2em; }
.card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); }
.card h3 { margin-top: 0; font-size: 1.08rem; }
.card p:last-child { margin-bottom: 0; }
.card img { margin-bottom: 14px; }

table { width: 100%; border-collapse: collapse; margin: 1.4em 0 1.8em; font-size: .95rem; }
th, td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); }
th { background: var(--bg-alt); font-family: var(--font-head); font-weight: 700; font-size: .88rem; letter-spacing: .01em; }
tbody tr:hover { background: var(--bg-alt); }
.table-note { font-size: .85rem; color: var(--ink-soft); margin-top: -1.2em; }

details.faq { border-bottom: 1px solid var(--line); padding: 4px 0; }
details.faq summary { cursor: pointer; padding: 15px 30px 15px 0; font-family: var(--font-head); font-weight: 700; font-size: 1.03rem; list-style: none; position: relative; }
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-size: 1.4rem; color: var(--brand); font-weight: 400; }
details.faq[open] summary::after { content: "\2013"; }
details.faq .faq-body { padding: 0 0 15px; color: var(--ink-soft); }

/* ---------- form ---------- */

.form-card { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 26px; box-shadow: var(--shadow-lg); }
.form-card.sticky { position: sticky; top: 96px; }
.form-card h2, .form-card h3 { margin-top: 0; }
.field { margin-bottom: 14px; }
.field label { display: block; font-size: .88rem; font-weight: 600; margin-bottom: 6px; }
.field input, .field select, .field textarea { width: 100%; padding: 12px 13px; border: 1px solid var(--line); border-radius: 9px; font: inherit; font-size: .97rem; background: #fff; color: var(--ink); }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--brand); outline-offset: 1px; border-color: var(--brand); }
.field textarea { min-height: 92px; resize: vertical; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-note { font-size: .8rem; color: var(--ink-soft); margin: 10px 0 0; }
.form-card .btn { width: 100%; }

.cta-band { background: var(--brand-dark); color: #fff; border-radius: 16px; padding: clamp(28px, 4vw, 44px); margin: 3em 0; text-align: center; }
.cta-band h2 { color: #fff; margin-top: 0; }
.cta-band p { color: rgba(255,255,255,.85); max-width: 56ch; margin: 0 auto 1.4em; }

/* ---------- footer ---------- */

.site-footer { background: var(--ink); color: rgba(255,255,255,.72); margin-top: clamp(48px, 7vw, 88px); padding: clamp(34px, 5vw, 54px) 0 26px; font-size: .93rem; }
.footer-inner { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 28px; }
.site-footer strong { color: #fff; font-family: var(--font-head); display: block; margin-bottom: 8px; font-size: 1.02rem; }
.site-footer a { color: #fff; }
.footer-legal { border-top: 1px solid rgba(255,255,255,.14); margin-top: 30px; padding-top: 18px; font-size: .84rem; color: rgba(255,255,255,.55); display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; }

.skip { position: absolute; left: -9999px; }
.skip:focus { left: 12px; top: 12px; z-index: 100; background: #fff; padding: 10px 16px; border-radius: 8px; }

/* Fixed tap-to-call bar. Most of this traffic is mobile and most of it converts
   by phone, so the number stays reachable without scrolling. Hidden on desktop,
   where the header CTA covers it. */
.mobile-cta { display: none; }
@media (max-width: 820px) {
  .mobile-cta {
    display: grid; grid-template-columns: 1.25fr 1fr; gap: 8px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    background: rgba(255,255,255,.97); backdrop-filter: blur(8px);
    border-top: 1px solid var(--line); box-shadow: 0 -4px 18px rgba(16,24,40,.10);
  }
  .mobile-cta .btn { width: 100%; padding: 14px 12px; font-size: 1rem; }
  body { padding-bottom: 78px; }
}

/* ---------- responsive ---------- */

@media (max-width: 980px) {
  .layout { grid-template-columns: 1fr; }
  .form-card.sticky { position: static; }
  .hero-split { grid-template-columns: 1fr; }
}

@media (max-width: 1024px) {
  .nav-toggle { display: block; }
  .nav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: #fff; border-bottom: 1px solid var(--line); flex-direction: column; align-items: stretch; padding: 12px; gap: 2px; max-height: 74vh; overflow-y: auto; box-shadow: var(--shadow-lg); }
  .nav.open { display: flex; }
  .site-header { position: sticky; }
  .header-inner { position: relative; flex-wrap: wrap; }
  .has-drop::after { content: none; }
  .has-drop > .nav-link::after { float: right; transform: translateY(.25em) rotate(45deg); }
  .dropdown { position: static; display: grid !important;
    visibility: visible !important; opacity: 1 !important; transform: none !important; transition: none !important; grid-template-columns: 1fr !important; box-shadow: none; border: 0; border-left: 2px solid var(--line); border-radius: 0; margin: 2px 0 8px 12px; padding: 2px 0; width: auto; max-width: none; }
  .header-cta { display: none; }
  .topbar { font-size: .8rem; }
  body { font-size: 16px; }
}

@media (max-width: 520px) {
  .hero-actions .btn { width: 100%; }
}

@media print {
  .site-header, .topbar, .cta-band, .form-card { display: none; }
}

/* ==========================================================================
   Premium navy + gold refinements
   Image logos, restrained gold accenting, and typographic polish on top of
   the base theme. Loaded after everything above so these win.
   ========================================================================== */

.logo-img { width: 52px; height: 52px; flex: 0 0 52px; object-fit: contain; }
.logo-word {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.02rem;
  line-height: 1.15;
  letter-spacing: .005em;
  max-width: 9.5em;
  color: var(--brand-dark);
}
.footer-logo { width: 232px; height: auto; max-width: 100%; margin-bottom: 14px; }

/* Headings: display serif, tighter and darker than the base */
h1, h2, h3, h4 { letter-spacing: -.011em; color: var(--brand-dark); }
h1 { font-weight: 700; line-height: 1.12; }
h2 { font-weight: 600; }
h3, h4 { font-weight: 600; }
body { font-size: 1.03rem; line-height: 1.72; }
.content p { max-width: 68ch; }

/* A thin gold rule under section headings reads expensive and costs nothing */
.content h2 { padding-bottom: .34em; border-bottom: 1px solid var(--line); }
.content h2::after {
  content: ""; display: block; width: 54px; height: 2px;
  background: var(--accent); margin-top: .34em; margin-bottom: -.36em;
}

/* Header sits on navy; gold is the call button only */
.topbar { background: var(--brand-dark); letter-spacing: .012em; }
.topbar a { border-bottom: 1px solid rgba(255,255,255,.32); }
.site-header { border-bottom: 2px solid var(--brand-dark); }
.header-cta { box-shadow: 0 1px 2px rgba(14,29,56,.18); }
.nav-link { font-weight: 600; letter-spacing: .004em; }

/* Buttons */
.btn { font-family: var(--font-head); letter-spacing: .008em; }
.btn-call { background: var(--accent); color: #16233d; border-color: var(--accent); font-weight: 700; }
.btn-call:hover { background: var(--accent-dark); border-color: var(--accent-dark); color: #fff; }

/* Hero */
.hero { background: linear-gradient(178deg, #f7f9fc 0%, var(--bg-alt) 100%); }
.hero h1 { font-size: clamp(1.95rem, 3.6vw, 3rem); }
.hero-media img { border-radius: var(--radius); box-shadow: 0 18px 40px -22px rgba(14,29,56,.55); }

/* Trust bar in navy with gold ticks */
.trustbar { background: var(--brand-dark); color: #eaf0f8; border: 0; }
.trustbar svg { color: var(--accent); }
.trustbar li { color: #eaf0f8; }

/* Cards, callouts, tables */
.card, .form-card { box-shadow: 0 12px 30px -24px rgba(14,29,56,.6); }
.callout { border-left: 3px solid var(--accent); background: var(--bg-alt); }
table th { background: var(--brand-dark); color: #fff; font-family: var(--font-head); font-weight: 600; }
table tr:nth-child(even) td { background: var(--bg-alt); }

/* CTA band */
.cta-band { background: var(--brand-dark); color: #fff; border-radius: var(--radius); }
.cta-band h2 { color: #fff; border: 0; padding-bottom: 0; }
.cta-band h2::after { background: var(--accent); }

/* Form */
.form-card h3 { color: var(--brand-dark); }
.form-card { border-top: 3px solid var(--accent); }

/* Footer */
.site-footer { background: var(--brand-dark); color: #d7e0ee; }
.site-footer strong { color: #fff; font-family: var(--font-head); }
.site-footer a { color: #fff; }
.footer-legal { border-top: 1px solid rgba(255,255,255,.15); color: #b8c5d8; }

@media (max-width: 1024px) {
  .logo-img { width: 42px; height: 42px; flex: 0 0 42px; }
  .logo-word { font-size: .9rem; max-width: 7.5em; }
}

/* --------------------------------------------------------------------------
   Fixes found in browser testing
   -------------------------------------------------------------------------- */

/* The footer logo artwork has dark navy lettering, which vanishes against the
   navy footer. A light panel behind it keeps it legible whichever version of
   the artwork is dropped in. */
.footer-logo {
  background: #ffffff;
  padding: 12px 18px;
  border-radius: var(--radius);
  box-sizing: content-box;
}

/* Long email addresses were overrunning the next footer column */
.footer-inner > div { min-width: 0; }
.site-footer a, .site-footer p { overflow-wrap: anywhere; }

/* Trust bar items shared a row unevenly; give them room to balance */
.trustbar ul { justify-content: center; gap: 14px 34px; }

@media (max-width: 1024px) {
  /* three lines of brand name pushed the mobile hero down the page */
  .logo-word { font-size: .82rem; line-height: 1.2; max-width: 8.5em; }
  .footer-logo { width: 200px; padding: 10px 14px; }
}

/* --------------------------------------------------------------------------
   Footer HTML sitemap
   -------------------------------------------------------------------------- */

.footer-sitemap { padding: 8px 0 34px; border-bottom: 1px solid rgba(255,255,255,.15); margin-bottom: 30px; }
.footer-sitemap > h2 {
  color: #fff; font-size: .78rem; text-transform: uppercase; letter-spacing: .12em;
  font-weight: 600; border: 0; padding: 0; margin: 0 0 20px;
}
.footer-sitemap > h2::after { content: none; }
.footer-sitemap-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 22px 26px;
}
.footer-sitemap h3 {
  color: var(--accent); font-size: .82rem; font-weight: 600;
  letter-spacing: .02em; margin: 0 0 .55em;
}
.footer-sitemap ul { list-style: none; margin: 0; padding: 0; }
.footer-sitemap li { margin-bottom: .3em; }
.footer-sitemap a {
  color: #d7e0ee; text-decoration: none; font-size: .88rem; line-height: 1.5;
  border-bottom: 1px solid transparent;
}
.footer-sitemap a:hover { color: #fff; border-bottom-color: var(--accent); }

@media (max-width: 600px) {
  .footer-sitemap-cols { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 18px; }
  .footer-sitemap a { font-size: .84rem; }
}

/* The 16-town list would otherwise run twice as deep as any service group */
.footer-sitemap .wide { grid-column: span 2; }
.footer-sitemap .wide ul { columns: 2; column-gap: 26px; }
@media (max-width: 700px) {
  .footer-sitemap .wide { grid-column: span 1; }
  .footer-sitemap .wide ul { columns: 2; }
}

/* --------------------------------------------------------------------------
   Keeping the nav menus inside the viewport
   The menus are absolutely positioned, so a wide one anchored to an item near
   the right edge pushes the page's scroll width out. Menus after the first
   anchor to their item's right edge, and the wide services menu drops to two
   columns on narrower desktops.
   -------------------------------------------------------------------------- */
.has-drop ~ .has-drop > .dropdown { left: auto; right: 0; }
.dropdown { max-width: calc(100vw - 24px); }

@media (max-width: 1280px) {
  .dropdown.cols-3 { grid-template-columns: repeat(2, minmax(190px, 1fr)); }
}