/* MTO Windows & Doors: home page only. Phone first (390px), checked at 1440px.
   Scoped to body.home so it never leaks into other pages. Locked palette only. */

body.home {
  --royal: #1D4FA3; --navy: #0F2A5C; --sky: #A7D3F5; --paper: #FFFFFF; --slate: #6B7480;
  --mist: #E6E9EE; --ice: #EEF5FC; --glass: #DDEEFB; --muted: #566070; --night: #0A1F45;
  --ink: #0F2A5C; --line: rgba(15, 42, 92, .14);
  --head: "Montserrat", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --body: "Nunito Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  background: #FFFFFF; color: var(--navy);
}
body.home main { overflow-x: clip; }
body.home .sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
body.home main h2, body.home main h3 { font-family: var(--head); color: var(--navy); }
body.home main h2 { font-weight: 800; letter-spacing: -0.02em; line-height: 1.04; font-size: clamp(2rem, 7.4vw, 3.4rem); margin: 0 0 .35em; }
body.home main h3 { font-weight: 700; letter-spacing: -0.01em; line-height: 1.15; }

/* shared bits */
.home .h-head { margin-bottom: 28px; }
.home .h-head-center { text-align: center; }
.home .h-head-center .h-sub { margin-left: auto; margin-right: auto; }
.home .h-eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 12px; font-family: var(--head); font-weight: 800; font-size: .78rem; letter-spacing: .2em; text-transform: uppercase; color: var(--royal); }
.home .h-eyebrow::before { content: ""; width: 26px; height: 3px; border-radius: 3px; background: currentColor; }
.home .h-eyebrow-light { color: var(--sky); }
.home .h-sub { font-size: 1.12rem; line-height: 1.5; color: var(--muted); margin: 0; max-width: 34em; }
.home .btn { min-height: 48px; }

/* subtle brand signature, bottom right of a key visual */
.home .otm-sig {
  position: absolute; right: 12px; bottom: 10px; z-index: 6; display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 8px 4px 6px; border-radius: 999px; background: rgba(255, 255, 255, .78);
  font-family: var(--head); font-weight: 800; font-size: 10.5px; letter-spacing: .14em; color: var(--navy);
  line-height: 1; pointer-events: none; user-select: none;
}
.home .otm-sig img { width: 12px; height: auto; display: block; }
.home .otm-sig-light { background: rgba(10, 31, 69, .55); color: #FFFFFF; right: 5%; bottom: 3.2%; }

/* ---------------- 1. Hero ----------------
   Left: FR01 MTO Frames mark, then "New windows. On The Mark, On The Money."
   Right: the look-01 card. Blue brick, white double hung, Mo (S03 Look Back) on the sill, swoosh behind.
   The card tilts toward the pointer (home.js). Loops are transform / opacity only. */
body.home .home-hero { position: relative; overflow: hidden; overflow: clip; padding: 18px 0 40px; background: #FFFFFF; }
.home .hh-in { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "text" "cta" "stage" "lede" "note"; }
.home .hh-text, .home .hh-lede, .home .hh-cta, .home .hh-note { position: relative; z-index: 4; }
.home .hh-text { grid-area: text; }
.home .hh-lede { grid-area: lede; }
.home .home-hero .hh-cta { grid-area: cta; margin-top: 22px; }
.home .hh-note { grid-area: note; }
.home .hh-eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-family: var(--head); font-weight: 800; font-size: .76rem; letter-spacing: .2em; text-transform: uppercase; color: var(--royal); }
.home .hh-eyebrow::before { content: ""; width: 26px; height: 3px; border-radius: 3px; background: var(--royal); flex: none; }
.home .hh-logo { display: block; width: 100%; max-width: 480px; height: auto; aspect-ratio: 539.58 / 280.61; margin: 0 0 22px; overflow: visible; }
.home .hh-title { margin: 0; font-family: var(--head); font-weight: 800; color: var(--navy); font-size: clamp(2.35rem, 10.6vw, 4.5rem); line-height: 1.02; letter-spacing: -0.03em; }
.home .hh-title .ln { display: block; white-space: nowrap; }
.home .hh-mark b { color: var(--royal); font-weight: 800; }
.home .hh-lede { font-size: 1.1rem; line-height: 1.55; color: var(--muted); margin: 0 0 4px; max-width: 30em; }
.home .home-hero .hero-cta { display: grid; gap: 10px; }
.home .home-hero .hero-cta .btn { width: 100%; justify-content: center; white-space: nowrap; }
.home .hh-note { display: flex; gap: 10px; align-items: flex-start; margin: 14px 0 0; font-size: .92rem; line-height: 1.5; color: var(--muted); max-width: 32em; }
.home .hh-note svg { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--royal); }

/* stage, swoosh and card */
.home .hc-stage { grid-area: stage; position: relative; display: flex; justify-content: center; align-items: center; margin: 30px auto 26px; width: 100%; perspective: 1200px; }
.home .hc-sweep {
  position: absolute; z-index: 1; left: -60vw; right: -60vw; bottom: 18%; height: 19%;
  background: linear-gradient(90deg, #A7D3F5 0, #2A62C4 50%, #1D4FA3 100%); transform: rotate(-8deg); border-radius: 999px;
}
.home .hc-sweep::after { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 7px; background: #A7D3F5; border-radius: 999px; }
.home .hc-tilt {
  position: relative; z-index: 2; width: min(80vw, 320px); aspect-ratio: 480 / 560; flex: none;
  container-type: size; will-change: transform; -webkit-tap-highlight-color: transparent; touch-action: pan-y;
}
.home .hc-tilt::before { content: ""; position: absolute; inset: 2.5% 3% 2% 3%; border-radius: 6%; box-shadow: 0 30px 56px rgba(15, 42, 92, .38), 0 8px 18px rgba(15, 42, 92, .18); }
.home .hc-art { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; display: block; }
.home .hc-3d { position: absolute; inset: 0; perspective: 170cqw; perspective-origin: 50% 42%; pointer-events: none; }
.home .hc-sash {
  position: absolute; left: 27.083%; top: 19.643%; width: 45.833%; height: 31.071%; min-height: 44px;
  margin: 0; padding: 0; border: 0; background: none; cursor: pointer; display: block; pointer-events: auto;
  transform-origin: 50% 100%; will-change: transform; -webkit-tap-highlight-color: transparent;
  transition: transform 520ms cubic-bezier(.4, 0, .2, 1);
}
.home .hc-sash svg { width: 100%; height: 100%; overflow: visible; display: block; pointer-events: none; }
.home .hc-sash.open { transform: rotateX(-30deg); transition: transform 760ms cubic-bezier(.34, 1.56, .64, 1); }
@media (hover: hover) { .home .hc-sash:hover { transform: rotateX(-30deg); transition: transform 760ms cubic-bezier(.34, 1.56, .64, 1); } }
.home .hc-sash:focus-visible { outline: 3px solid #FFFFFF; outline-offset: 4px; border-radius: 4px; box-shadow: 0 0 0 6px var(--royal); }

.home .hc-puff, .home .hc-edge, .home .hc-wl, .home .hc-sheen { transform-box: fill-box; transform-origin: center; }
.home .hc-edge, .home .hc-wl { transform-origin: 0 0; }
.home .hc-sheen { transform: translateX(40%) skewX(-18deg); opacity: .35; }
.home .hc-old, .home .hc-puff, .home .hc-edge { display: none; }

@media (prefers-reduced-motion: no-preference) {
  .home .hc-old, .home .hc-puff, .home .hc-edge { display: inline; }
  /* first 1.5 s: the old worn window wipes to new white vinyl */
  .home .hc-new, .home .hc-sill { animation: hcwipe 1300ms cubic-bezier(.65, 0, .35, 1) 200ms both; }
  .home .hc-sash { animation: hcsashwipe 1300ms cubic-bezier(.65, 0, .35, 1) 200ms both; }
  .home .hc-edge { opacity: 0; animation: hcedge 1300ms cubic-bezier(.65, 0, .35, 1) 200ms both; }
  .home .hc-old { animation: hcfade 300ms linear 1150ms both; }
  .home .hc-old .hc-wl path { animation: hcdraft 1.5s cubic-bezier(.45, .05, .55, .95) both; animation-delay: calc(var(--o, 0s) * 0.2); }
  .home .hc-puff { opacity: 0; transform: scale(0); animation: hcpuff 900ms ease-out both; animation-delay: var(--o, .6s); }
  /* sheen sweeps the glass every 6 s */
  .home .hc-sheen { opacity: .75; transform: translateX(-130%) skewX(-18deg); animation: hcsheen 6s cubic-bezier(.4, 0, .2, 1) 1600ms infinite; }
  .home .hc-sash .hc-sheen { animation-delay: 1900ms; }
  /* Mo shows up on the sill after the wipe, then a slow shine passes over him every few seconds */
  .home .hc-mo-in { animation: hcfadein 700ms ease-out 1500ms both; }
  .home .hc-mo .mo-shine { animation: moshine 5.5s cubic-bezier(.4, 0, .2, 1) 2400ms infinite; }
  .home .hc-tilt.idle { animation: hcsway 11s ease-in-out infinite; }
  .home .hc-tilt.drag { transition: none; }
}
@keyframes hcwipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes hcsashwipe { from { clip-path: polygon(-7% -40%, -6.4% -40%, -6.4% 140%, -7% 140%); } to { clip-path: polygon(-7% -40%, 106.4% -40%, 106.4% 140%, -7% 140%); } }
@keyframes hcedge { 0% { transform: translateX(0); opacity: 0; } 6% { opacity: 1; } 94% { opacity: 1; } 100% { transform: translateX(276px); opacity: 0; } }
@keyframes hcfade { to { opacity: 0; } }
@keyframes hcdraft { 0% { stroke-dasharray: 26 100; stroke-dashoffset: 156; opacity: 0; } 14% { opacity: 1; } 70% { opacity: 1; } 100% { stroke-dasharray: 26 100; stroke-dashoffset: 22; opacity: 0; } }
@keyframes hcpuff { 0% { transform: scale(.2) translateY(0); opacity: 0; } 30% { transform: scale(1) translateY(-4px); opacity: .85; } 100% { transform: scale(1.9) translateY(-16px); opacity: 0; } }
@keyframes hcsheen { 0%, 70% { transform: translateX(-130%) skewX(-18deg); } 100% { transform: translateX(290%) skewX(-18deg); } }
@keyframes hcfadein { from { opacity: 0; } to { opacity: 1; } }
@keyframes moshine { 0% { transform: translateX(0); } 42%, 100% { transform: translateX(440px); } }
@keyframes hcsway { 0% { transform: rotateY(0) rotateX(0); } 25% { transform: rotateY(7deg) rotateX(2deg); } 50% { transform: rotateY(0) rotateX(-2deg); } 75% { transform: rotateY(-7deg) rotateX(2deg); } 100% { transform: rotateY(0) rotateX(0); } }
.home .mo-shine { transform: translateX(0); }
/* off screen or tab hidden: pause every loop */
.home .hc-stage.off * { animation-play-state: paused !important; }

@media (min-width: 560px) {
  .home .home-hero .hero-cta { display: flex; flex-wrap: wrap; gap: 12px; }
  .home .home-hero .hero-cta .btn { width: auto; }
}
@media (min-width: 640px) { .home .hc-tilt { width: min(48vw, 360px); } }
@media (min-width: 960px) {
  body.home .home-hero { padding: 44px 0 72px; }
  .home .hh-in { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); grid-template-rows: 1fr auto auto auto auto 1fr; grid-template-areas: ". stage" "text stage" "lede stage" "cta stage" "note stage" ". stage"; column-gap: 56px; }
  .home .hh-lede { margin: 18px 0 0; }
  .home .home-hero .hh-cta { margin-top: 24px; }
  .home .hc-stage { height: 560px; margin: 0; }
  .home .hc-tilt { width: auto; height: 100%; }
  .home .hc-sweep { left: 30%; right: -60vw; bottom: 20%; height: 17%; transform: rotate(-7deg); transform-origin: left center; }
  .home .hh-title { font-size: clamp(2.6rem, 4.3vw, 4.25rem); }
  .home .hh-lede { font-size: 1.18rem; }
}
@media (min-width: 1200px) { .home .hh-in { column-gap: 72px; } .home .hc-stage { height: 600px; } }

/* ---------------- 2. Proof columns ---------------- */
.home .h-proofs { padding: 40px 0 48px; }
.home .h-proof-grid { display: grid; gap: 24px; }
.home .h-proof { border-left: 4px solid var(--royal); padding: 2px 0 2px 18px; }
body.home .h-proof h2 { font-size: clamp(1.35rem, 5.6vw, 1.7rem); font-weight: 800; letter-spacing: -0.01em; margin: 0 0 8px; }
.home .h-proof p { margin: 0; color: var(--muted); line-height: 1.6; }
@media (min-width: 760px) { .home .h-proof-grid { grid-template-columns: repeat(3, 1fr); gap: 32px; } }

/* ---------------- 3. Styles: numbered jersey cards ---------------- */
.home .h-styles { background: var(--mist); padding: 64px 0; }
.home .h-more { margin: 26px 0 0; }

/* ---------------- 4. Look closer: the big window, four panes ---------------- */
.home .h-closer { padding: 64px 0; background: #FFFFFF; }
.home .pw { position: relative; }
.home .pw-stage {
  --cw: 265%; --ty: -7.6%; --ar: 604 / 650;
  position: relative; overflow: hidden; border-radius: 22px; aspect-ratio: var(--ar); background: var(--mist);
  box-shadow: inset 0 0 0 1px rgba(15, 42, 92, .06);
}
.home .pw-canvas { position: absolute; left: 50%; top: 0; width: var(--cw); aspect-ratio: 16 / 9; transform: translate(-50%, var(--ty)); }
.home .pw-art { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
@media (min-width: 640px) { .home .pw-stage { --cw: 170%; --ty: -4.44%; --ar: 941 / 860; } }
@media (min-width: 960px) { .home .pw-stage { --cw: 100%; --ty: -4.44%; --ar: 1600 / 860; } }

.home .pw-pane {
  position: absolute; left: var(--l); top: var(--t); width: var(--w); height: var(--h); min-width: 44px; min-height: 44px;
  margin: 0; padding: 0; border: 0; border-radius: 4px; background: transparent; cursor: pointer;
  display: flex; align-items: center; justify-content: center; -webkit-tap-highlight-color: transparent;
  transition: background-color .25s ease, box-shadow .25s ease;
}
.home .pw-pane:hover, .home .pw-pane[aria-expanded="true"] { background: rgba(255, 255, 255, .22); box-shadow: inset 0 0 0 3px #FFFFFF, 0 0 0 4px rgba(29, 79, 163, .35); }
.home .pw-pane:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }
.home .pw-num {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: #FFFFFF; color: var(--navy); font-family: var(--head); font-weight: 800; font-size: 1.15rem; line-height: 1;
  box-shadow: 0 6px 16px -6px rgba(15, 42, 92, .55), 0 0 0 4px rgba(255, 255, 255, .35);
  transition: transform .25s cubic-bezier(.2, .9, .3, 1.2), background-color .2s ease, color .2s ease;
}
.home .pw-pane:hover .pw-num, .home .pw-pane[aria-expanded="true"] .pw-num { background: var(--royal); color: #FFFFFF; transform: scale(1.08); }
@media (min-width: 960px) { .home .pw-num { width: 48px; height: 48px; font-size: 1.25rem; } }
@media (prefers-reduced-motion: no-preference) {
  .js .home .pw:not(.used) .pw-num { animation: pwping 2.8s ease-in-out 1s infinite; }
  .home .pw-pane:nth-of-type(2) .pw-num { animation-delay: 1.25s; }
  .home .pw-pane:nth-of-type(3) .pw-num { animation-delay: 1.5s; }
  .home .pw-pane:nth-of-type(4) .pw-num { animation-delay: 1.75s; }
}
@keyframes pwping { 0%, 70%, 100% { box-shadow: 0 6px 16px -6px rgba(15, 42, 92, .55), 0 0 0 4px rgba(255, 255, 255, .35); } 35% { box-shadow: 0 6px 16px -6px rgba(15, 42, 92, .55), 0 0 0 12px rgba(255, 255, 255, 0); } }

/* light comes in when the section scrolls into view (no JS: lit from the start) */
.home .pw-beam, .home .pw-pool, .home .pw-sill { transition: opacity 2.2s cubic-bezier(.2, .7, .2, 1) .3s; }
.home .pw-glare { transition: transform 2.6s cubic-bezier(.2, .7, .2, 1) .2s; }
@media (prefers-reduced-motion: no-preference) {
  .js .home .pw-art:not(.is-lit) .pw-beam, .js .home .pw-art:not(.is-lit) .pw-pool, .js .home .pw-art:not(.is-lit) .pw-sill { opacity: 0; }
  .js .home .pw-art:not(.is-lit) .pw-glare { transform: translateX(-60px); }
}

/* facts: no JS = all four listed; JS = one at a time */
.home .pw-facts { margin-top: 16px; display: grid; gap: 12px; }
.home .pw-hint { display: none; }
.home .pw-fact { background: var(--ice); border: 1px solid var(--line); border-radius: 18px; padding: 18px 20px 20px; }
.home .pw-fact h3 { font-size: 1.3rem; margin: 6px 0 8px; }
.home .pw-fact p { margin: 0 0 12px; color: var(--muted); line-height: 1.55; }
.home .pw-fact p.pw-tag { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-family: var(--head); font-weight: 800; font-size: .76rem; letter-spacing: .18em; text-transform: uppercase; color: var(--royal); }
.home .pw-tag span { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--royal); color: #FFFFFF; letter-spacing: 0; font-size: .85rem; }
.home .pw-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-family: var(--head); font-weight: 800; color: var(--royal); text-decoration: none; border-bottom: 2px solid var(--sky); }
.home .pw-link:hover { color: var(--navy); border-bottom-color: var(--royal); }

.js .home .pw-facts { display: block; position: relative; }
.js .home .pw-fact { display: none; }
.js .home .pw-fact.on { display: block; }
.js .home .pw-hint {
  display: flex; align-items: center; gap: 12px; margin: 0; padding: 16px 18px; border-radius: 18px; background: var(--ice);
  border: 1px dashed rgba(29, 79, 163, .35); color: var(--navy); font-weight: 700; line-height: 1.4;
}
.js .home .pw.has-on .pw-hint { display: none; }
.home .pw-hint-dots { display: inline-flex; flex: none; }
.home .pw-hint-dots { gap: 4px; }
.home .pw-hint-dots span { display: grid; place-items: center; width: 24px; height: 24px; margin-left: 0; border-radius: 50%; background: #FFFFFF; border: 2px solid var(--royal); color: var(--royal); font-family: var(--head); font-weight: 800; font-size: .78rem; }
.home .pw-hint-dots span:first-child { margin-left: 0; }
@media (prefers-reduced-motion: no-preference) { .js .home .pw-fact.on { animation: pwin .32s cubic-bezier(.2, .8, .2, 1) both; } }
@keyframes pwin { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

@media (min-width: 960px) {
  .js .home .pw-facts { position: absolute; left: 3.2%; top: 50%; transform: translateY(-50%); width: min(30%, 330px); margin: 0; z-index: 5; }
  .js .home .pw-fact, .js .home .pw-hint { background: rgba(255, 255, 255, .92); box-shadow: 0 24px 48px -28px rgba(15, 42, 92, .55); }
  .js .home .pw-hint { flex-direction: column; align-items: flex-start; border-style: solid; border-color: var(--line); }
  .home .pw-facts:not(.js *) { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) { html:not(.js) .home .pw-facts { grid-template-columns: repeat(2, 1fr); } }

/* ---------------- 5. Built tight (dark) ---------------- */
body.home .h-frame { background: var(--navy); color: #FFFFFF; padding: 64px 0; position: relative; overflow: hidden; }
body.home .h-frame h2 { color: #FFFFFF; font-size: clamp(2.6rem, 11vw, 4.6rem); }
.home .h-frame-grid { display: grid; gap: 30px; align-items: center; }
.home .h-frame-lede { font-family: var(--head); font-weight: 700; font-size: clamp(1.15rem, 4.6vw, 1.45rem); line-height: 1.35; color: #FFFFFF; margin: 0 0 14px; max-width: 26em; }
.home .h-frame-copy > p:not(.h-eyebrow):not(.h-frame-lede) { color: #D5E3F3; margin: 0 0 20px; max-width: 30em; }
.home .h-frame-key { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 10px; }
.home .h-frame-key li { display: flex; align-items: center; gap: 12px; color: #FFFFFF; font-weight: 700; }
.home .h-frame-key span { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--sky); color: var(--navy); font-family: var(--head); font-weight: 800; font-size: .85rem; }
.home .h-frame-fig { margin: 0; position: relative; } /* the corner cutaway: see cutaway.css */
.home .h-frame-fig svg { width: 100%; height: auto; }
.home .h-frame-fig figcaption { margin-top: 8px; font-size: .85rem; color: #B9CCE4; }
@media (min-width: 960px) {
  body.home .h-frame { padding: 88px 0; }
  .home .h-frame-grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 56px; }
}

/* ---------------- 6. How it works ---------------- */
.home .h-how { padding: 64px 0 40px; }
.home .h-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; counter-reset: none; }
.home .h-steps li { position: relative; padding: 0 0 26px 62px; margin: 0; }
.home .h-steps li::after { content: ""; position: absolute; left: 21px; top: 46px; bottom: 4px; width: 2px; background: var(--sky); }
.home .h-steps li:last-child::after { display: none; }
.home .h-steps li::before { content: none; }
.home .h-step-n { position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--royal); color: #FFFFFF; font-family: var(--head); font-weight: 800; font-size: 1.05rem; }
body.home .h-steps h3 { font-size: 1.25rem; margin: 8px 0 6px; }
.home .h-steps p { margin: 0; color: var(--muted); line-height: 1.55; }
@media (min-width: 900px) {
  .home .h-steps { grid-template-columns: repeat(5, 1fr); gap: 22px; }
  .home .h-steps li { padding: 64px 0 0; }
  .home .h-steps li::after { left: 54px; right: -18px; top: 21px; bottom: auto; width: auto; height: 2px; }
}

/* ---------------- 7. Where we work ---------------- */
.home .h-area { padding: 24px 0 64px; }
.home .h-area-card { display: grid; gap: 24px; }
.home .h-area-copy, .home .h-towns { position: relative; }
.home .h-area-card { padding-top: 0; }
.home .h-area-card > * { min-width: 0; }
.home .h-area-copy { background: var(--ice); border-radius: 22px; padding: 26px 22px; }
.home .h-area-call { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 14px; font-family: var(--head); font-weight: 800; font-size: 1.1rem; color: var(--royal); text-decoration: none; }
.home .h-area-call svg { width: 20px; height: 20px; }
/* map */
.home .h-map { margin: 0; position: relative; }
.home .h-map-frame { position: relative; background: #FFFFFF; border: 1px solid var(--line); border-radius: 22px; padding: 6px; overflow: hidden; box-shadow: 0 1px 0 rgba(15, 42, 92, .05), 0 24px 48px -30px rgba(15, 42, 92, .45); }
.home .h-map-svg { display: block; width: 100%; height: auto; }
.home .h-map-svg text { font-family: var(--head); font-weight: 700; font-size: 16px; fill: var(--navy); paint-order: stroke; stroke: #FFFFFF; stroke-width: 4px; stroke-linejoin: round; transition: fill .2s ease; }
.home .h-map-svg .h-map-county { font-size: 12.5px; font-weight: 800; letter-spacing: .32em; fill: var(--slate); stroke: none; }
.home .h-map-n text { font-size: 9px; font-weight: 800; fill: var(--royal); stroke: none; }
.home .mpin { cursor: pointer; }
.home .mpin-head path { fill: var(--royal); stroke: #FFFFFF; stroke-width: 2.5px; }
.home .mpin-hq .mpin-head path { fill: var(--navy); }
.home .mpin-shadow { fill: rgba(15, 42, 92, .22); }
.home .mpin-head { transform-box: fill-box; transform-origin: 50% 100%; transition: transform .28s cubic-bezier(.2, .9, .3, 1.3); }
.home .mpin-ring { fill: none; stroke: var(--royal); stroke-width: 2.5px; opacity: 0; transform-box: fill-box; transform-origin: center; }
.home .mpin.on .mpin-head { transform: scale(1.25); }
.home .mpin.on .mpin-ring { opacity: .85; }
.home .mpin.on text { fill: var(--royal); }
@media (prefers-reduced-motion: no-preference) {
  .home .mpin.on .mpin-ring { animation: mpulse 1.3s ease-out infinite; }
  .home .mpin-hq:not(.on) .mpin-ring { animation: mpulse 2.8s ease-out 1s infinite; }
}
@keyframes mpulse { from { transform: scale(1); opacity: .85; } to { transform: scale(2.7); opacity: 0; } }
.home .h-map .otm-sig { right: 14px; bottom: 12px; }
.home .h-towns { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.home .h-town {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 16px; border-radius: 999px; cursor: pointer;
  border: 1.5px solid var(--line); background: #FFFFFF; color: var(--navy); font-family: var(--head); font-weight: 700; font-size: .95rem; line-height: 1;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.home .h-town::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--royal); transition: background-color .2s ease; }
.home .h-town:hover, .home .h-town.lit, .home .h-town[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #FFFFFF; }
.home .h-town:hover::before, .home .h-town.lit::before, .home .h-town[aria-pressed="true"]::before { background: var(--sky); }
.home .h-town:focus-visible { outline: 3px solid var(--royal); outline-offset: 2px; }
@media (max-width: 559px) {
  .home .h-map-svg text { font-size: 21px; stroke-width: 5px; }
  .home .h-map-svg .h-map-county { font-size: 15px; letter-spacing: .24em; }
  .home .h-map-frame { padding: 2px; border-radius: 18px; }
  .home .h-towns { gap: 6px; }
  .home .h-town { padding: 8px 12px; font-size: .88rem; gap: 6px; }
}
@media (min-width: 900px) {
  .home .h-area-card { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 40px; align-items: center; }
  .home .h-area-copy { padding: 36px 34px; }
}

/* ---------------- 9. Quote band ---------------- */
body.home .h-band { background: var(--royal); color: #FFFFFF; padding: 56px 0; position: relative; overflow: hidden; text-align: left; }
body.home .h-band::before { content: ""; position: absolute; left: -10%; right: -10%; top: 56%; height: 34%; background: rgba(255, 255, 255, .07); transform: rotate(-6deg); }
.home .h-band-in { position: relative; display: grid; gap: 22px; align-items: center; }
body.home .h-band h2 { color: #FFFFFF; margin: 0 0 8px; }
.home .h-band .lede { color: #E4EEFA; margin: 0; font-size: 1.12rem; max-width: 30em; }
.home .h-band-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; }
.home .h-band-cta .btn { min-width: 220px; justify-content: center; }
.home .h-band-call { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: #FFFFFF; font-family: var(--head); font-weight: 800; text-decoration: none; border-bottom: 2px solid rgba(167, 211, 245, .7); }
.home .h-band-call svg { width: 18px; height: 18px; }
@media (min-width: 900px) { .home .h-band-in { grid-template-columns: minmax(0, 1fr) auto; } body.home .h-band { padding: 72px 0; } }

/* ---------------- 10. On The Mark, On The Money ---------------- */
body.home .h-mark { padding: 72px 0 80px; background: linear-gradient(180deg, #FFFFFF 0%, var(--ice) 100%); text-align: center; }
.home .h-mark-in { position: relative; display: flex; flex-direction: column; align-items: center; padding-bottom: 34px; }
.home .h-mark-mo { width: clamp(132px, 30vw, 188px); height: auto; margin: 0 auto 26px; overflow: visible; }
body.home .h-mark-line { font-size: clamp(2.5rem, 13.2vw, 9rem); line-height: .95; letter-spacing: -0.05em; margin: 0; font-weight: 800; color: var(--navy); text-wrap: balance; }
.home .h-mark-line b { color: var(--royal); font-weight: 800; }
.home .h-mark-lede { max-width: 34em; margin: 26px auto 0; font-size: 1.12rem; line-height: 1.6; color: var(--muted); }
.home .h-mark-pin { display: inline-flex; align-items: center; gap: 10px; margin: 26px 0 0; padding: 10px 18px; border-radius: 999px; background: #FFFFFF; border: 1px solid var(--line); font-weight: 700; font-size: .95rem; color: var(--navy); }
.home .h-mark-pin svg { width: 18px; height: 18px; color: var(--royal); }
.home .h-mark .otm-sig { right: 16px; bottom: 0; background: transparent; padding: 0; color: var(--slate); }
.home .h-mark-bird { transform-box: fill-box; transform-origin: 60% 100%; }
@media (prefers-reduced-motion: no-preference) {
  .home .h-mark-bird { animation: hmbob 3.6s ease-in-out infinite; }
  .home .h-mark-sheen { animation: hmsheen 6s ease-in-out infinite; }
}
@keyframes hmbob { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-3deg) translateY(-2px); } }
@keyframes hmsheen { 0%, 100% { opacity: .35; } 50% { opacity: .85; } }

/* reduced motion: everything still */
@media (prefers-reduced-motion: reduce) {
  .home .h-mark-bird, .home .h-mark-sheen, .home .pw-num, .home .hf-glass { animation: none !important; }
  .home .hc-tilt { transform: none !important; }
  .home .pw-pane, .home .pw-num { transition: none; }
}

/* Mid-South home map (10/27/26) */
.h-map-se .m-out{fill:#F7F9FC;stroke:rgba(29,79,163,.3);stroke-width:1.1;stroke-linejoin:round}
.h-map-se .m-tn,.h-map-se .m-ms{fill:#E9F1FB;stroke:#1D4FA3;stroke-width:1.9;stroke-linejoin:round}
.h-map-se .m-ms{fill:#DFEBF9}
.h-map-se .m-line{fill:none;stroke:#A7D3F5;stroke-width:3.2;stroke-dasharray:12 5 3 5;stroke-linecap:butt}
.h-map-se .m-lbl{fill:#5B6B85;font:800 11px var(--head);letter-spacing:.3em;stroke:none}
.h-map-se .m-lbl-out{fill:#9AA7BA;font-size:9.5px;letter-spacing:.26em}
.h-map-se .m-river{fill:#1D4FA3;font:italic 500 13px var(--serif);opacity:.8;stroke:none}
.h-map-se .h-map-n{transform:translate(80px,130px)}

/* Home turf polish (10/27/26) */
.home .h-area-copy h2{font-size:clamp(1.85rem,4.4vw,2.7rem)}
.home .h-area-cta{margin-top:20px;gap:16px}
.home .h-area-link{font-family:var(--head);font-weight:800;color:var(--royal);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px}
.home .h-map-se text{font-size:13.5px;stroke-width:3.5px}
.home .h-map-se .m-lbl{font-size:11px}.home .h-map-se .m-lbl-out{font-size:9.5px}
.home .h-map-mo{opacity:.92}
@media (max-width:559px){.home .h-map-se text{font-size:15px;stroke-width:4px}}

/* Home turf = About map, navy (10/27/26) */
.home .h-map-nv-frame{background:var(--navy);border-color:var(--navy);background-image:radial-gradient(rgba(167,211,245,.14) 1px,transparent 1.2px);background-size:22px 22px}
.home .h-map-nv-frame .otm-sig{background:#fff}
.home .h-map-nv{overflow:visible}
.home .h-map-nv text{stroke:none;paint-order:normal;font-weight:600}
.home .h-map-nv .m-tn,.home .h-map-nv .m-ms{fill:rgba(167,211,245,.08);stroke:var(--sky);stroke-width:1.8;stroke-linejoin:round}
.home .h-map-nv .m-ms{fill:rgba(167,211,245,.14)}
.home .h-map-nv .m-out{fill:rgba(167,211,245,.025);stroke:rgba(167,211,245,.32);stroke-width:1.1;stroke-linejoin:round}
.home .h-map-nv .m-line{fill:none;stroke:#fff;stroke-width:3.2;stroke-dasharray:12 5 3 5;stroke-linecap:butt}
.home .h-map-nv .m-lbl{fill:rgba(255,255,255,.8);font:700 11px var(--head);letter-spacing:.3em}
.home .h-map-nv .m-lbl-out{fill:rgba(255,255,255,.38);font-size:10.5px;letter-spacing:.28em}
.home .h-map-nv .m-river{fill:var(--sky);font:italic 500 12px var(--serif);opacity:.9}
.home .h-map-nv .m-dot{fill:#fff;stroke:var(--navy);stroke-width:3}
.home .h-map-nv .m-dot-office{fill:var(--sky);stroke:#fff;stroke-width:2.5}
.home .h-map-nv .m-pulse{fill:none;stroke:#fff;stroke-width:2;opacity:0;transform-box:fill-box;transform-origin:center;animation:ab-pulse 2.8s ease-out 1.2s infinite}
.home .h-map-nv .m-city{fill:#fff;font:italic 600 18px var(--serif)}
.home .h-map-nv .m-city-sm{font-size:15px}
.home .h-map-nv .m-route{fill:none;stroke:rgba(167,211,245,.34);stroke-width:.9;stroke-linecap:round}
.home .h-map-nv .m-route-main{stroke:rgba(255,255,255,.8);stroke-width:1.6}
.home .h-map-nv .m-halo{fill:rgba(167,211,245,.16);r:6.5}
.home .h-map-nv .m-tdot{fill:var(--sky);stroke:var(--navy);stroke-width:2;r:3.2}
.home .h-map-nv .m-town text{fill:rgba(255,255,255,.92);font:600 10.5px var(--head);letter-spacing:.01em}
.home .h-map-nv .mpin{cursor:pointer}
.home .h-map-nv .mpin.on .m-tdot{fill:#fff;r:4.2}
.home .h-map-nv .mpin.on .m-halo{fill:rgba(167,211,245,.55);r:9}
.home .h-map-nv .mpin.on text{fill:var(--sky)}
.home .h-map-nv .mpin.on .m-dot{fill:var(--sky)}
@keyframes ab-pulse{0%{opacity:.85;transform:scale(1)}100%{opacity:0;transform:scale(3.4)}}
@media (max-width:559px){.home .h-map-nv .m-town text{font-size:13px}.home .h-map-nv .m-city{font-size:22px}.home .h-map-nv .m-lbl{font-size:13px}.home .h-map-nv .m-tdot{r:4}.home .h-map-nv .m-halo{r:8}}
@media (prefers-reduced-motion:reduce){.home .h-map-nv .m-pulse{animation:none}}