/* Supreme Site Services theme. Brand variables first. Fonts are self hosted (variable files). Weight ranges match the Google Fonts request the mockups were approved with (Cinzel 600 to 900, Montserrat 400 to 800), so a lighter request snaps to the same weight it did there. */
@font-face { font-family: Cinzel; font-style: normal; font-weight: 600 900; font-display: swap; src: url("/assets/fonts/cinzel-var.woff2") format("woff2"); }
@font-face { font-family: Montserrat; font-style: normal; font-weight: 400 800; font-display: swap; src: url("/assets/fonts/montserrat-var.woff2") format("woff2"); }
  :root {
    --gold: #F0B848;
    --gold-hi: #FBE5B3;
    --black: #111111;
    --ink: #1A1A1A;
    --text: #2B2B2B;
    --muted: #5E5E5E;
    --line: #E6DFD3;
    --cream: #F7F3EC;
    --white: #FFFFFF;
    --wrap: 1200px;
  }
  * { box-sizing: border-box; }
  html { background: var(--white); }
  body { margin: 0; font-family: Montserrat, Arial, sans-serif; color: var(--text); font-size: 17px; line-height: 1.65; background: var(--white); -webkit-font-smoothing: antialiased; }
  img { display: block; max-width: 100%; height: auto; }
  picture { display: contents; }
  a { color: inherit; text-decoration: none; }
  .wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 32px; }
  h1, h2, h3 { font-family: Cinzel, Georgia, serif; font-weight: 700; margin: 0; letter-spacing: 0.01em; }
  .eyebrow { font-size: 13px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin: 0 0 12px; }
  .eyebrow.dark { color: #8A6516; }
  .sec-head { text-align: center; max-width: 760px; margin: 0 auto 48px; }
  .sec-head h2 { font-size: 40px; line-height: 1.15; color: var(--black); }
  .sec-head p { margin: 14px 0 0; color: var(--muted); font-size: 18px; }
  .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-family: Montserrat, Arial, sans-serif; font-weight: 700; font-size: 15px; letter-spacing: 0.06em; text-transform: uppercase; padding: 16px 28px; border-radius: 4px; border: 2px solid transparent; white-space: nowrap; }
  .btn-gold { background: var(--gold); color: var(--black); border-color: var(--gold); }
  .btn-ghost { background: transparent; color: var(--white); border-color: rgba(255,255,255,0.75); }
  .btn-dark { background: var(--black); color: var(--white); border-color: var(--black); }
  .btn-line { background: transparent; color: var(--black); border-color: var(--black); }
  .btn-line-gold { background: transparent; color: var(--gold); border-color: var(--gold); }
  .btn svg { width: 18px; height: 18px; }
  section, header.site, footer.site { position: relative; }


  /* 1. Header */
  header.site { background: var(--black); border-bottom: 1px solid rgba(240,184,72,0.35); }
  .head { display: flex; align-items: center; justify-content: space-between; height: 112px; gap: 28px; }
  .logo img { width: 92px; height: 92px; }
  nav.main { display: flex; gap: 30px; align-items: center; }
  nav.main a { color: #F2EDE4; font-weight: 600; font-size: 15px; letter-spacing: 0.02em; display: inline-flex; align-items: center; gap: 6px; }
  nav.main a.active { color: var(--gold); }
  nav.main svg { width: 14px; height: 14px; }
  .head-cta { display: flex; align-items: center; gap: 22px; }
  .head-phone { text-align: right; line-height: 1.2; color: var(--white); }
  .head-phone small { display: block; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); font-weight: 700; }
  .head-phone b { font-size: 22px; font-weight: 800; letter-spacing: 0.02em; }
  .head .btn { padding: 14px 22px; }
  .menu-btn, .call-btn { display: none; }

  /* 2. Hero */
  .hero { color: var(--white); background: #1c2430 var(--hero-desktop, url("/assets/hero-white-vinyl-pool-fence-midlands-sc.jpg")) center 58% / cover no-repeat; }
  .hero { background-image: var(--hero-desktop-set, image-set(url("/assets/hero-white-vinyl-pool-fence-midlands-sc.webp") type("image/webp"), url("/assets/hero-white-vinyl-pool-fence-midlands-sc.jpg") type("image/jpeg"))); }
  .hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8,8,8,0.86) 0%, rgba(8,8,8,0.66) 36%, rgba(8,8,8,0.12) 62%, rgba(8,8,8,0.22) 100%), linear-gradient(0deg, rgba(8,8,8,0.45) 0%, rgba(8,8,8,0) 26%); }
  .hero .wrap { position: relative; display: grid; grid-template-columns: 1fr 400px; gap: 56px; align-items: center; padding-top: 72px; padding-bottom: 80px; }
  .hero h1 { font-size: 62px; line-height: 1.06; margin: 0 0 22px; color: var(--white); text-shadow: 0 2px 18px rgba(0,0,0,0.35); }
  .hero .lede { font-size: 20px; line-height: 1.6; color: rgba(255,255,255,0.94); margin: 0 0 26px; max-width: 600px; text-shadow: 0 1px 14px rgba(0,0,0,0.55); }
  .rating { display: flex; align-items: center; gap: 12px; margin: 0 0 30px; font-weight: 600; font-size: 16px; }
  .stars { display: inline-flex; gap: 3px; color: var(--gold); }
  .stars svg { width: 20px; height: 20px; fill: currentColor; }
  .rating .sep { width: 1px; height: 18px; background: rgba(255,255,255,0.35); }
  .hero-btns { display: flex; gap: 14px; flex-wrap: wrap; }
  .fin-line { margin: 24px 0 0; font-size: 15px; color: rgba(255,255,255,0.88); display: flex; align-items: center; gap: 10px; }
  .fin-line svg { width: 20px; height: 20px; color: var(--gold); flex: none; }
  .fin-line a { color: var(--gold); font-weight: 700; border-bottom: 1px solid rgba(240,184,72,0.6); }

  .form-card { background: var(--white); color: var(--text); border-radius: 6px; border-top: 5px solid var(--gold); box-shadow: 0 24px 60px rgba(0,0,0,0.45); padding: 30px 30px 26px; }
  .form-card h2 { font-size: 26px; color: var(--black); }
  .form-card p.sub { margin: 6px 0 18px; font-size: 14.5px; color: var(--muted); line-height: 1.5; }
  .field { display: block; width: 100%; border: 1px solid #D9D2C5; border-radius: 4px; padding: 12px 14px; font: 500 15px Montserrat, Arial, sans-serif; color: #8B8B8B; background: #FCFBF8; margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center; }
  .field.msg { height: 66px; align-items: flex-start; }
  .field svg { width: 14px; height: 14px; color: #777; }
  .two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .form-card .btn { width: 100%; margin-top: 6px; padding: 17px 20px; font-size: 16px; }
  .form-card .fine { text-align: center; margin: 14px 0 0; font-size: 14px; color: var(--muted); }
  .form-card .fine b { color: var(--black); }

  /* 3. Trust bar */
  .trust { background: var(--black); color: var(--white); border-top: 1px solid rgba(240,184,72,0.5); }
  .trust .wrap { display: grid; grid-template-columns: repeat(4, 1fr) 132px; }
  .trust-item { display: flex; align-items: center; gap: 13px; padding: 26px 16px; }
  .trust-item + .trust-item { border-left: 1px solid rgba(255,255,255,0.12); }
  .ticon { flex: none; width: 54px; height: 54px; border-radius: 50%; border: 2px solid var(--gold); display: flex; align-items: center; justify-content: center; color: var(--gold); }
  .ticon svg { width: 26px; height: 26px; }
  .trust-item b { display: block; font-family: Montserrat, Arial, sans-serif; font-weight: 800; font-size: 14.5px; text-transform: uppercase; letter-spacing: 0.05em; line-height: 1.3; color: var(--white); margin-bottom: 3px; }
  .trust-item span { font-size: 14px; color: rgba(255,255,255,0.72); line-height: 1.4; }
  .badge-item { justify-content: center; padding: 18px 10px; }
  .badge-item img { height: 88px; width: auto; }
  .lender { display: flex; align-items: center; gap: 14px; margin: 0 0 26px; }
  .lender span { font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
  .lender img { height: 30px; width: auto; }

  /* 4. Fence types */
  .types { padding: 96px 0; background: var(--white); }
  .grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
  .card { background: var(--white); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; display: flex; flex-direction: column; }
  .card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
  .card .body { padding: 20px 20px 22px; display: flex; flex-direction: column; flex: 1; }
  .card h3 { font-size: 19px; color: var(--black); margin-bottom: 8px; }
  .card p { margin: 0 0 16px; font-size: 15px; line-height: 1.55; color: var(--muted); flex: 1; }
  .card .more { font-weight: 700; font-size: 14px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--black); display: inline-flex; align-items: center; gap: 8px; }
  .card .more svg { width: 16px; height: 16px; color: var(--gold); }
  .card.cta { background: var(--black); border-color: var(--black); color: var(--white); justify-content: center; padding: 34px 26px; text-align: left; }
  .card.cta h3 { color: var(--white); font-size: 24px; line-height: 1.2; margin-bottom: 12px; }
  .card.cta p { color: rgba(255,255,255,0.8); flex: none; margin-bottom: 22px; }
  .card.cta .rule { width: 56px; height: 3px; background: var(--gold); margin-bottom: 20px; }

  /* 5. Before and after */
  .ba { padding: 96px 0; background: var(--cream); }
  .grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
  .ba .grid3 > .pair:only-child { grid-column: 2; }  /* one before and after pair sits in the middle, not pinned left */
  .pair { background: var(--white); border-radius: 6px; overflow: hidden; border: 1px solid var(--line); }
  .pair .shots { display: grid; grid-template-columns: 1fr; gap: 3px; background: var(--black); }
  .shot { position: relative; }
  .shot img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
  .chip { position: absolute; left: 10px; top: 10px; font: 800 11px/1 Montserrat, Arial, sans-serif; letter-spacing: 0.16em; padding: 7px 9px; border-radius: 3px; background: rgba(17,17,17,0.85); color: var(--white); }
  .chip.after { background: var(--gold); color: var(--black); }
  .pair p { margin: 0; padding: 16px 20px 18px; font-weight: 600; font-size: 15.5px; color: var(--black); line-height: 1.45; }
  .center-btn { text-align: center; margin-top: 44px; }

  /* 6. Reviews */
  .reviews { padding: 96px 0; background: var(--white); }
  .big-rating { display: inline-flex; align-items: center; gap: 14px; margin-top: 16px; font-weight: 700; color: var(--black); }
  .big-rating .stars svg { width: 24px; height: 24px; }
  .rev { background: var(--white); border: 1px solid var(--line); border-top: 4px solid var(--gold); border-radius: 6px; padding: 30px 28px 26px; display: flex; flex-direction: column; }
  .rev .stars svg { width: 18px; height: 18px; }
  .rev blockquote { margin: 16px 0 22px; font-size: 16.5px; line-height: 1.7; color: var(--text); flex: 1; }
  .rev .who { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--line); padding-top: 16px; }
  .rev .who b { color: var(--black); font-size: 16px; }
  .rev .who span, .rev .who a { font-size: 13px; color: var(--muted); letter-spacing: 0.04em; }
  .rev .who a { text-decoration: underline; text-underline-offset: 3px; }
  .rev .who a:hover { color: var(--black); }

  /* 7. Owner note */
  .owner { padding: 100px 0; background: var(--black); color: var(--white); }
  .owner .wrap { display: grid; grid-template-columns: 460px 1fr; gap: 72px; align-items: center; }
  .owner-photo { position: relative; }
  .owner-photo::before { content: ""; position: absolute; inset: 22px -22px -22px 22px; border: 2px solid var(--gold); border-radius: 4px; }
  .owner-photo img { position: relative; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 4px; }
  .owner h2 { font-size: 42px; line-height: 1.12; margin-bottom: 22px; }
  .owner p { color: rgba(255,255,255,0.86); font-size: 18px; line-height: 1.75; margin: 0 0 18px; }
  .promises { list-style: none; padding: 0; margin: 26px 0 30px; display: grid; gap: 14px; }
  .promises li { display: flex; align-items: center; gap: 14px; font-weight: 600; font-size: 18px; color: var(--white); }
  .promises svg { flex: none; width: 26px; height: 26px; color: var(--gold); }
  .sig { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
  .sig .name { font-family: Cinzel, Georgia, serif; font-size: 24px; color: var(--gold); line-height: 1.2; }
  .sig .name small { display: block; font-family: Montserrat, Arial, sans-serif; font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.7); margin-top: 4px; }

  /* 8. Financing */
  .finance { padding: 88px 0; background: linear-gradient(135deg, #F7F3EC 0%, #EFE6D5 100%); }
  .finance .wrap { display: grid; grid-template-columns: 1.05fr 1fr; gap: 64px; align-items: center; }
  .finance h2 { font-size: 42px; color: var(--black); line-height: 1.12; margin-bottom: 18px; }
  .finance p { font-size: 18px; margin: 0 0 26px; color: var(--text); }
  .fin-list { list-style: none; margin: 0; padding: 0; background: var(--white); border: 1px solid var(--line); border-radius: 6px; }
  .fin-list li { display: flex; align-items: center; gap: 18px; padding: 24px 28px; font-weight: 600; font-size: 17px; color: var(--black); }
  .fin-list li + li { border-top: 1px solid var(--line); }
  .fin-list .ticon { width: 48px; height: 48px; background: var(--black); border-color: var(--black); }
  .fin-list .ticon svg { width: 22px; height: 22px; }
  .fin-note { font-size: 13px !important; color: var(--muted) !important; margin: 18px 0 0 !important; line-height: 1.5; }
  .fin-actions { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
  .fin-actions span { font-size: 15px; color: var(--muted); }
  .fin-actions span b { color: var(--black); }

  /* 9. How it works */
  .steps { padding: 96px 0; background: var(--white); }
  .step { position: relative; padding: 30px 26px 10px; border-top: 3px solid var(--black); }
  .step .num { font-family: Cinzel, Georgia, serif; font-size: 54px; line-height: 1; color: var(--gold); font-weight: 700; }
  .step h3 { font-size: 22px; color: var(--black); margin: 14px 0 10px; }
  .step p { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.6; }

  /* 10. Service area */
  .svc-area { padding: 96px 0; background: var(--cream); }
  .svc-area .wrap { display: grid; grid-template-columns: 1fr 1.15fr; gap: 60px; align-items: center; }
  .svc-area h2 { font-size: 40px; color: var(--black); line-height: 1.15; margin-bottom: 16px; }
  .svc-area p { margin: 0 0 24px; font-size: 18px; }
  .towns { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; }
  .towns a { display: inline-flex; align-items: center; gap: 8px; background: var(--white); border: 1px solid var(--line); border-radius: 40px; padding: 10px 18px; font-weight: 600; font-size: 15px; color: var(--black); }
  .towns svg { width: 15px; height: 15px; color: var(--gold); }
  .svc-area .ask { font-size: 15.5px; color: var(--muted); margin: 0; }
  .svc-area .ask b { color: var(--black); }
  .map { border-radius: 6px; overflow: hidden; border: 1px solid var(--line); box-shadow: 0 18px 40px rgba(0,0,0,0.08); background: #dfe9dc; }
  .map img { width: 100%; height: 360px; object-fit: cover; object-position: 45% 50%; }

  /* 11. FAQ */
  .faq { padding: 96px 0; background: var(--white); }
  .faq-list { max-width: 880px; margin: 0 auto; border-top: 1px solid var(--line); }
  .qa { border-bottom: 1px solid var(--line); padding: 22px 6px; }
  .qa .q { display: flex; justify-content: space-between; align-items: center; gap: 20px; font-weight: 700; font-size: 18px; color: var(--black); }
  .qa .q svg { width: 22px; height: 22px; color: var(--gold); flex: none; }
  .qa .a { margin: 12px 0 2px; color: var(--muted); font-size: 16.5px; line-height: 1.7; max-width: 800px; }

  /* 12. Final call to action */
  .final { padding: 92px 0; color: var(--white); text-align: center; background: #151515 var(--final-img, none) var(--final-pos, center) / cover no-repeat; }
  .final::before { content: ""; position: absolute; inset: 0; background: rgba(10,10,10,0.84); }
  .final .wrap { position: relative; }
  .final h2 { font-size: 46px; line-height: 1.12; margin-bottom: 16px; }
  .final p { margin: 0 auto 32px; max-width: 640px; font-size: 19px; color: rgba(255,255,255,0.88); }
  .final .btns { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }
  .slogan { font-family: Cinzel, Georgia, serif; color: var(--gold); font-size: 22px; letter-spacing: 0.04em; margin-top: 38px; }

  /* 13. Footer */
  footer.site { background: #0A0A0A; color: rgba(255,255,255,0.75); padding: 72px 0 0; font-size: 15px; }
  .foot { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 52px; }
  .foot h4 { font-family: Cinzel, Georgia, serif; color: var(--white); font-size: 17px; margin: 0 0 16px; letter-spacing: 0.04em; }
  .foot ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }
  .foot .brand img { width: 108px; height: 108px; margin-bottom: 16px; }
  .foot .brand .slogan { font-size: 17px; margin: 0 0 12px; }
  .foot .brand p { margin: 0; line-height: 1.7; }
  .foot .brand b { color: var(--white); }
  .foot-bottom { border-top: 1px solid rgba(255,255,255,0.1); padding: 22px 0 26px; }
  .foot-bottom .wrap { display: flex; justify-content: space-between; align-items: center; gap: 20px; font-size: 13.5px; }
  .social { display: flex; gap: 10px; }
  .social span { width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(240,184,72,0.6); display: flex; align-items: center; justify-content: center; color: var(--gold); font: 700 13px Montserrat, Arial, sans-serif; }

  .sticky-bar { display: none; }

  /* Phone layout */
  @media (max-width: 760px) {
    body { font-size: 16px; }
    .wrap { padding: 0 18px; }
    .head { height: 76px; }
    .logo img { width: 60px; height: 60px; }
    nav.main, .head-cta { display: none; }
    .head-mobile { display: flex; gap: 10px; align-items: center; }
    .call-btn, .menu-btn { display: flex; width: 46px; height: 46px; border-radius: 4px; align-items: center; justify-content: center; }
    .call-btn { background: var(--gold); color: var(--black); }
    .menu-btn { border: 1px solid rgba(255,255,255,0.4); color: var(--white); }
    .call-btn svg, .menu-btn svg { width: 22px; height: 22px; }
    .hero { background-position: 62% 50%; }
    .hero::before { background: linear-gradient(180deg, rgba(8,8,8,0.72) 0%, rgba(8,8,8,0.86) 60%, rgba(8,8,8,0.95) 100%); }
    .hero .wrap { grid-template-columns: 1fr; gap: 34px; padding-top: 38px; padding-bottom: 40px; }
    .eyebrow { font-size: 11.5px; letter-spacing: 0.16em; }
    .hero h1 { font-size: 38px; margin-bottom: 16px; }
    .hero .lede { font-size: 16.5px; margin-bottom: 18px; }
    .rating { font-size: 14px; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
    .rating .sep { display: none; }
    .hero-btns { flex-direction: column; }
    .hero-btns .btn { width: 100%; }
    .fin-line { font-size: 14px; align-items: flex-start; }
    .form-card { padding: 24px 20px 22px; }
    .trust .wrap { grid-template-columns: 1fr 1fr; padding: 0; }
    .trust-item { flex-direction: column; text-align: center; gap: 10px; padding: 24px 12px; }
    .trust-item + .trust-item { border-left: none; }
    .trust-item:nth-child(even) { border-left: 1px solid rgba(255,255,255,0.12); }
    .trust-item:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,0.12); }
    .badge-item { grid-column: 1 / -1; border-left: none; }
    .badge-item img { height: 76px; }
    .lender { margin-bottom: 20px; }
    .trust-item b { font-size: 12.5px; }
    .trust-item span { font-size: 12.5px; }
    .types, .ba, .reviews, .steps, .svc-area, .faq { padding: 64px 0; }
    .sec-head { margin-bottom: 32px; }
    .sec-head h2 { font-size: 30px; }
    .sec-head p { font-size: 16px; }
    .grid4 { grid-template-columns: 1fr 1fr; gap: 12px; }
    .card .body { padding: 14px 12px 16px; }
    .card h3 { font-size: 15px; }
    .card p { display: none; }
    .card .more { font-size: 11.5px; }
    .card.cta { padding: 20px 14px; }
    .card.cta h3 { font-size: 17px; }
    .card.cta p { display: block; font-size: 13px; margin-bottom: 14px; }
    .card.cta .btn { padding: 12px 10px; font-size: 12px; }
    .grid3 { grid-template-columns: 1fr; gap: 18px; }
    .owner { padding: 64px 0; }
    .owner .wrap { grid-template-columns: 1fr; gap: 46px; }
    .owner-photo { margin: 0 22px 0 0; }
    .owner h2 { font-size: 32px; }
    .owner p, .promises li { font-size: 16px; }
    .finance { padding: 64px 0; }
    .finance .wrap, .svc-area .wrap { grid-template-columns: 1fr; gap: 32px; }
    .finance h2, .svc-area h2 { font-size: 32px; }
    .map img { height: 220px; }
    .steps .grid4 { grid-template-columns: 1fr; gap: 0; }
    .step { display: grid; grid-template-columns: 64px 1fr; column-gap: 10px; padding: 20px 0 18px; border-top-width: 2px; }
    .step .num { grid-row: 1 / span 2; font-size: 40px; }
    .step h3 { margin: 2px 0 6px; font-size: 19px; }
    .qa .q { font-size: 16.5px; }
    .final h2 { font-size: 32px; }
    .final .btns .btn { width: 100%; }
    .foot { grid-template-columns: 1fr 1fr; }
    .foot .brand { grid-column: 1 / -1; }
    .foot-bottom .wrap { flex-direction: column; align-items: flex-start; }
    footer.site { padding-bottom: 76px; }
    .sticky-bar { display: grid; grid-template-columns: 1fr 1fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; box-shadow: 0 -6px 18px rgba(0,0,0,0.25); }
    .sticky-bar a { display: flex; align-items: center; justify-content: center; gap: 8px; height: 62px; font: 800 15px Montserrat, Arial, sans-serif; letter-spacing: 0.05em; text-transform: uppercase; }
    .sticky-bar .s-call { background: var(--black); color: var(--white); }
    .sticky-bar .s-est { background: var(--gold); color: var(--black); }
    .sticky-bar svg { width: 20px; height: 20px; }
  }
  @media (min-width: 761px) { .head-mobile { display: none; } }

  /* ===== v2 additions (2026-09-18) ===== */
  /* Brand gold #F0B848 is for dark backgrounds, fills and borders. On white or cream it measures 1.8 to 1,
     so small text and thin icons there are black or deep gold instead. */
  :root { --gold-deep: #8A6516; }
  /* ---- owner answers, 2026-09-21: the awards row, the customer video ---- */
  @media (min-width: 761px) { .trust .wrap { grid-template-columns: repeat(4, 1fr); } }
  .trust .awards { border-top: 1px solid rgba(255,255,255,0.12); }
  .trust .awards .wrap { display: flex; align-items: center; justify-content: center; gap: 28px; padding-top: 18px; padding-bottom: 20px; }
  .aw-badges { display: flex; gap: 14px; flex: none; }
  .aw-badges img { height: 92px; width: auto; }
  .aw-text b { display: block; font: 800 14.5px/1.3 Montserrat, Arial, sans-serif; text-transform: uppercase; letter-spacing: 0.08em; color: var(--gold); margin-bottom: 5px; }
  .aw-text span { display: block; font-size: 15px; line-height: 1.55; color: rgba(255,255,255,0.88); }
  .aw-text span em { font-style: normal; font-weight: 700; color: var(--white); }
  .rev-top { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 1180px; margin: 0 auto 28px; align-items: stretch; }
  .rev-top .rev-feature { max-width: none; margin: 0; display: flex; flex-direction: column; justify-content: center; }
  .vid { position: relative; display: block; border-radius: 6px; overflow: hidden; background: var(--black); min-height: 300px; }
  .vid img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .vid::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(8,8,8,0.78) 0%, rgba(8,8,8,0) 45%); }
  .vid .play { position: absolute; z-index: 2; left: 50%; top: 46%; width: 84px; height: 84px; margin: -42px 0 0 -42px; border-radius: 50%; background: var(--gold); color: var(--black); display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 26px rgba(0,0,0,0.5); }
  .vid .play svg { width: 40px; height: 40px; margin-left: 5px; }
  .vid-cap { position: absolute; z-index: 2; left: 22px; right: 22px; bottom: 18px; color: var(--white); font: 700 19px/1.3 Cinzel, Georgia, serif; }
  .vid-cap i { font: 600 13px/1 Montserrat, Arial, sans-serif; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255,255,255,0.78); margin-left: 10px; }
  /* ---- kept from the outside critique, 2026-09-19 ---- */
  .skip { position: absolute; left: -9999px; top: 0; z-index: 300; background: var(--white); color: var(--black); padding: 12px 16px; font-weight: 700; }
  .skip:focus { left: 8px; top: 8px; }
  header.site { position: sticky; top: 0; z-index: 120; }
  a.num { color: inherit; white-space: nowrap; }
  .hero .wrap { padding-top: 52px; padding-bottom: 60px; }
  .hero-photo { display: none; }
  .fl { display: block; margin: 0 0 9px; font: 600 12.5px/1.25 Montserrat, Arial, sans-serif; color: var(--black); }
  .fl i { font-style: normal; font-weight: 500; color: #5E5E5E; }
  .fl .field { margin: 5px 0 0; min-height: 42px; padding: 10px 12px; color: #5E5E5E; }
  .fl .field.msg { height: 58px; }
  .two .fl { margin-bottom: 9px; }
  .owner-photo img { aspect-ratio: 4 / 5; }
  .cmp:focus-within { outline: 3px solid var(--black); outline-offset: 3px; }
  .center-btn { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }
  .step p a { color: var(--black); font-weight: 700; border-bottom: 1px solid currentColor; }
  .pull { max-width: 860px; margin: 56px auto 0; padding: 30px 34px 28px; background: var(--cream); border-left: 5px solid var(--gold); border-radius: 4px; }
  .pull blockquote { margin: 14px 0 14px; font-size: 19px; line-height: 1.65; color: var(--black); font-weight: 500; }
  .pull figcaption { font-size: 14px; color: var(--muted); }
  .pull figcaption b { color: var(--black); margin-right: 10px; font-size: 15px; }
  .final::before { background: linear-gradient(180deg, rgba(10,10,10,0.74) 0%, rgba(10,10,10,0.60) 45%, rgba(10,10,10,0.80) 100%); }
  details.qa summary h3 { display: inline; font: inherit; color: inherit; margin: 0; letter-spacing: 0; text-transform: none; }
  .foot h3, .foot .foot-h { font-family: Cinzel, Georgia, serif; font-weight: 700; color: var(--white); font-size: 17px; margin: 0 0 16px; letter-spacing: 0.04em; }
  .fin-note a, .disc a { text-decoration: underline; }
  .disc { display: block; margin-top: 12px; font-size: 13px; line-height: 1.55; color: var(--muted); }
  a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible { outline: 3px solid var(--black); outline-offset: 3px; box-shadow: 0 0 0 6px var(--gold); border-radius: 3px; }
  header.site a:focus-visible, .hero a:focus-visible, .trust a:focus-visible, .owner a:focus-visible, .final a:focus-visible, footer.site a:focus-visible { outline-color: var(--gold); box-shadow: none; }
  .star-chip { display: inline-flex; align-self: flex-start; gap: 3px; background: var(--black); color: var(--gold); padding: 6px 10px; border-radius: 40px; line-height: 0; }
  .star-chip svg { width: 15px; height: 15px; fill: currentColor; }
  .card .more svg, .towns svg { color: var(--black); }
  .step .num { color: var(--black); position: relative; display: inline-block; padding-bottom: 8px; }
  .step .num::after { content: ""; position: absolute; left: 0; bottom: 0; width: 44px; height: 4px; background: var(--gold); }
  a.tel, a.sms { border-bottom: 1px solid currentColor; font-weight: 700; }

  /* form card */
  .form-proof { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-size: 13.5px; color: var(--muted); }
  .form-proof b { color: var(--black); }
  .form-card .next { display: flex; gap: 9px; align-items: flex-start; margin: 14px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--text); }
  .form-card .next svg { width: 18px; height: 18px; flex: none; color: var(--black); margin-top: 1px; }
  .form-card .fine a { color: var(--black); }

  /* reviews, each beside the customer's own fence */
  .reviews { background: var(--cream); }
  .reviews .big-rating { flex-wrap: wrap; justify-content: center; }
  .rev { padding: 0; overflow: hidden; border-top: none; }
  .rev .rev-photo { position: relative; }
  .rev .rev-photo img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
  .rev .rev-photo span { position: absolute; left: 12px; bottom: 12px; background: rgba(17,17,17,0.86); color: var(--white); font: 700 11.5px/1 Montserrat, Arial, sans-serif; letter-spacing: 0.1em; text-transform: uppercase; padding: 7px 9px; border-radius: 3px; }
  .rev .rev-body { padding: 24px 26px 24px; display: flex; flex-direction: column; flex: 1; border-top: 4px solid var(--gold); }
  .rev blockquote { margin: 14px 0 20px; }
  .rev-stats { display: grid; grid-template-columns: repeat(3, 1fr); max-width: 860px; margin: 0 auto 44px; background: var(--white); border: 1px solid var(--line); border-radius: 6px; }
  .rev-stats div { padding: 20px 14px; text-align: center; }
  .rev-stats div + div { border-left: 1px solid var(--line); }
  .rev-stats b { display: block; font-family: Cinzel, Georgia, serif; font-size: 34px; line-height: 1.1; color: var(--black); }
  .rev-stats span { font-size: 14px; color: var(--muted); }

  .rev-feature { max-width: 980px; margin: 0 auto 28px; background: var(--black); color: var(--white); border-left: 6px solid var(--gold); border-radius: 6px; padding: 34px 40px 30px; }
  .rev-feature blockquote { margin: 16px 0 18px; font-size: 21px; line-height: 1.6; color: var(--white); }
  .rev-feature .who { display: flex; gap: 14px; align-items: baseline; }
  .rev-feature .who b { color: var(--gold); font-family: Cinzel, Georgia, serif; font-size: 19px; }
  .rev-feature .who span { font-size: 13px; letter-spacing: 0.06em; color: rgba(255,255,255,0.7); }
  .rev-feature .star-chip { background: rgba(255,255,255,0.1); }
  .rev-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
  .rev.h blockquote { font-size: 16px; line-height: 1.68; }
  .promises li { align-items: flex-start; }
  .promises li div { display: grid; gap: 5px; }
  .promises .proof { font-weight: 400; font-size: 15px; line-height: 1.55; color: rgba(255,255,255,0.72); font-style: italic; }
  .promises .proof i { font-style: normal; color: var(--gold); font-weight: 600; white-space: nowrap; margin-left: 6px; }

  /* drag to compare */
  .cmp { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--black); --pos: 50%; touch-action: pan-y; }
  .cmp img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .cmp .cmp-before { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
  .cmp .chip.after { left: auto; right: 10px; }
  .cmp-line { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 3px; margin-left: -1.5px; background: var(--gold); pointer-events: none; }
  .cmp-line::after { content: ""; position: absolute; top: 50%; left: 50%; width: 42px; height: 42px; margin: -21px 0 0 -21px; border-radius: 50%; background: var(--gold); box-shadow: 0 4px 14px rgba(0,0,0,0.45); }
  .cmp-line::before { content: "\2039 \203A"; position: absolute; z-index: 2; top: 50%; left: 50%; width: 42px; margin: -14px 0 0 -21px; text-align: center; font: 800 22px/28px Arial, sans-serif; color: var(--black); letter-spacing: 3px; }
  .cmp input[type=range] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }

  /* recent work strip */
  .recent { padding: 96px 0; background: var(--white); }
  .recent-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
  .recent-grid a { position: relative; display: block; overflow: hidden; border-radius: 4px; }
  .recent-grid img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 0.4s; }
  .recent-grid a:hover img { transform: scale(1.04); }
  .recent-grid span { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 12px 10px; background: linear-gradient(0deg, rgba(8,8,8,0.82), rgba(8,8,8,0)); color: var(--white); font: 700 12px/1.3 Montserrat, Arial, sans-serif; letter-spacing: 0.08em; text-transform: uppercase; }

  /* FAQ, every answer lives in the page */
  details.qa { padding: 0; }
  details.qa summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 6px; font-weight: 700; font-size: 18px; color: var(--black); }
  details.qa summary::-webkit-details-marker { display: none; }
  details.qa summary .tog { position: relative; flex: none; width: 22px; height: 22px; }
  details.qa summary .tog::before, details.qa summary .tog::after { content: ""; position: absolute; left: 2px; right: 2px; top: 10px; height: 2.5px; background: var(--black); }
  details.qa summary .tog::after { transform: rotate(90deg); transition: transform 0.2s; }
  details.qa[open] summary .tog::after { transform: rotate(0deg); }
  details.qa .a { margin: 0 6px 22px; }

  .foot ul a:hover, .foot-bottom a:hover { color: var(--gold); }
  .social a { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(240,184,72,0.6); display: flex; align-items: center; justify-content: center; color: var(--gold); font: 700 14px Montserrat, Arial, sans-serif; }

  @media (max-width: 760px) {
    .trust .awards .wrap { flex-direction: column; gap: 12px; text-align: center; padding: 18px 16px 20px; }
    .aw-badges img { height: 80px; }
    .aw-text span { font-size: 14px; }
    .rev-top { grid-template-columns: 1fr; gap: 16px; margin-bottom: 18px; }
    .vid { min-height: 0; aspect-ratio: 16 / 9; }
    .vid .play { width: 68px; height: 68px; margin: -34px 0 0 -34px; }
    .vid-cap { font-size: 16px; left: 16px; right: 16px; bottom: 14px; }
    /* the hero photo gets its own clear band on a phone, so the first screen shows a fence instead of dark trees */
    .hero { background: #0B0B0B; }
    .hero::before { display: none; }
    .hero-photo { display: block; height: 214px; background-size: cover; background-position: center 42%; border-bottom: 3px solid var(--gold); }
    .hero .wrap { padding-top: 26px; padding-bottom: 40px; }
    /* fence cards: one per row, photo beside the words, so the selling line is not hidden on a phone */
    .types .grid4 { grid-template-columns: 1fr; gap: 12px; }
    .types .card { flex-direction: row; align-items: stretch; }
    .types .card img { width: 124px; min-height: 124px; height: auto; aspect-ratio: auto; flex: none; }
    .types .card .body { padding: 12px 14px 12px; }
    .types .card h3 { font-size: 16px; margin-bottom: 4px; }
    .types .card p { display: block; font-size: 13.5px; line-height: 1.45; margin: 0 0 8px; }
    .types .card .more { font-size: 12.5px; min-height: 24px; }
    .types .card.cta { flex-direction: column; padding: 22px 18px; }
    .types .card.cta p { font-size: 14px; }
    .types .card.cta .btn { padding: 14px 12px; font-size: 13px; }
    .recent { padding: 64px 0; }
    .recent-grid { grid-template-columns: 1fr 1fr; gap: 12px 10px; }
    .recent-grid span { position: static; display: block; background: none; color: var(--black); padding: 7px 2px 0; font-size: 10.5px; }
    .rev-stats { grid-template-columns: 1fr; max-width: 420px; }
    .rev-stats div { display: flex; align-items: baseline; justify-content: center; gap: 10px; padding: 12px 10px; }
    .rev-stats div + div { border-left: 0; border-top: 1px solid var(--line); }
    .rev-stats b { font-size: 26px; display: inline; }
    .rev-stats span { font-size: 14px; }
    .step .num { align-self: start; }
    .pull { margin-top: 36px; padding: 22px 20px 20px; }
    .pull blockquote { font-size: 16.5px; }
    .center-btn .btn { width: 100%; }
    .rev .rev-body { padding: 20px 20px 22px; }
    .rev-feature { padding: 26px 22px 24px; margin-bottom: 18px; }
    .rev-feature blockquote { font-size: 17px; }
    .rev-grid { grid-template-columns: 1fr; gap: 16px; }
    .promises .proof { font-size: 15px; font-style: normal; }
    details.qa summary { font-size: 16.5px; padding: 18px 2px; }
    .sticky-bar { grid-template-columns: 1fr 1fr 1.25fr; }
    .sticky-bar .s-text { background: #2A2A2A; color: var(--white); border-left: 1px solid rgba(255,255,255,0.14); }
  }

  /* ===== Financing page additions (2026-09-19) ===== */
  .disc-link { font-size: 13px; color: var(--muted); text-decoration: underline; margin-left: 4px; white-space: nowrap; }

  /* 2. Page hero: a shorter dark band, a real photo (not a CSS background, so it can carry real alt text),
     a dark tint on top, content centered. */
  .fin-hero { position: relative; overflow: hidden; min-height: 460px; display: flex; align-items: center; color: var(--white); background: #1c2430; }
  .fin-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 45%; z-index: 0; }
  .fin-hero-tint { position: absolute; inset: 0; background: rgba(8,8,8,0.74); z-index: 1; }
  .fin-hero-in { position: relative; z-index: 2; max-width: 720px; margin: 0 auto; text-align: center; padding: 74px 32px 56px; }
  .fin-hero h1 { font-size: 50px; line-height: 1.14; margin: 0 0 20px; color: var(--white); text-shadow: 0 2px 18px rgba(0,0,0,0.35); }
  .fin-hero .lede { font-size: 19px; line-height: 1.62; color: rgba(255,255,255,0.94); margin: 0 0 30px; text-shadow: 0 1px 14px rgba(0,0,0,0.55); }
  .fin-star { color: var(--gold); font-weight: 800; text-decoration: underline; margin-left: 2px; }
  .fin-hero .hero-btns { justify-content: center; }
  .fin-hero-fine { margin: 18px 0 0; font-size: 14.5px; color: rgba(255,255,255,0.85); }
  .fin-hero-fine .tel, .fin-hero-fine .sms { color: var(--gold); }
  .fin-lockup { display: inline-flex; align-items: center; gap: 10px; background: var(--white); border-radius: 40px; padding: 8px 16px 8px 14px; margin-top: 26px; }
  .fin-lockup span { font-size: 12.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
  .fin-lockup img { height: 30px; width: auto; display: block; }

  /* 3. How our financing option works: three cards, icons black on light backgrounds (a solid black chip
     behind a gold glyph, the same treatment the homepage already uses for .fin-list, never gold directly on
     white or cream). */
  .fin-how { padding: 88px 0; background: var(--white); }
  .fin-how-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .fin-how-card { background: var(--white); border: 1px solid var(--line); border-radius: 6px; padding: 30px 26px 28px; text-align: center; }
  .fin-how-card .ticon { background: var(--black); border-color: var(--black); margin: 0 auto 18px; }
  .fin-how-card h3 { font-size: 19px; color: var(--black); margin: 0 0 10px; }
  .fin-how-card p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--muted); }

  /* 4. The numbers: black band (gold is fine here), then a cream strip with the full disclosure once. */
  .fin-numbers-band { background: var(--black); padding: 52px 0 56px; }
  .fin-numbers-in { max-width: 640px; }
  .fin-numbers-list { margin: 0; }
  .fin-numbers-list li { align-items: center; }
  .fin-disclosure-band { background: var(--cream); padding: 24px 0 32px; }

  /* 5. Payment calculator: white panel, thin border, a muted fallback note sits behind the iframe so the
     panel never reads empty if the embed does not paint (headless render, or a slow connection); on the
     real site the loaded calculator covers it completely. */
  .fin-calc { padding: 88px 0; background: var(--cream); }
  .fin-calc-panel { position: relative; min-height: 700px; background: var(--white); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
  .fin-calc-panel iframe { position: relative; z-index: 2; display: block; border: 0; background: var(--white); }
  .fin-calc-fallback { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; text-align: center; padding: 40px; color: var(--muted); font-size: 15px; }

  /* 8. Reviews strip: a short band, no photos, just the star chip and two quotes. */
  .fin-reviews { padding: 84px 0; background: var(--cream); }
  .fin-reviews-head { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 0 0 40px; font-size: 15.5px; color: var(--black); font-weight: 600; }
  .fin-reviews-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 980px; margin: 0 auto; }
  .fin-review { background: var(--white); border: 1px solid var(--line); border-top: 4px solid var(--gold); border-radius: 6px; padding: 28px 26px 24px; }
  .fin-review blockquote { margin: 0 0 18px; font-size: 16.5px; line-height: 1.7; color: var(--text); }
  .fin-review .who { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--line); padding-top: 14px; }
  .fin-review .who b { color: var(--black); font-size: 15.5px; }
  .fin-review .who span, .fin-review .who a { font-size: 12.5px; color: var(--muted); }
  .fin-review .who a { text-decoration: underline; text-underline-offset: 3px; }

  nav.main a.active { border-bottom: 2px solid var(--gold); padding-bottom: 4px; }

  @media (max-width: 760px) {
    .fin-hero { min-height: 0; }
    .fin-hero-in { padding: 52px 20px 40px; }
    .fin-hero h1 { font-size: 32px; }
    .fin-hero .lede { font-size: 16px; }
    .fin-hero .hero-btns { flex-direction: column; }
    .fin-hero .hero-btns .btn { width: 100%; }
    .fin-how { padding: 60px 0; }
    .fin-how-grid { grid-template-columns: 1fr; gap: 16px; }
    .fin-numbers-band { padding: 40px 0 44px; }
    .fin-calc { padding: 60px 0; }
    .fin-reviews { padding: 56px 0; }
    .fin-reviews-grid { grid-template-columns: 1fr; gap: 16px; }
  }

/* ===== Engine additions: real form controls, honeypot, phone menu, plain pages ===== */
input.field, select.field, textarea.field { font: 500 15px Montserrat, Arial, sans-serif; color: var(--text); width: 100%; }
.fl input.field { display: block; min-height: 42px; }
.fl textarea.field { display: block; resize: vertical; min-height: 58px; font-family: inherit; }
.field:focus-within, input.field:focus, textarea.field:focus { outline: 3px solid var(--black); outline-offset: 1px; }
.field.sel { position: relative; padding: 0; }
.field.sel select { appearance: none; -webkit-appearance: none; border: 0; background: transparent; font: inherit; color: inherit; width: 100%; min-height: 40px; padding: 10px 36px 10px 12px; outline: none; cursor: pointer; }
.field.sel svg { position: absolute; right: 12px; top: 50%; margin-top: -7px; pointer-events: none; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
[data-form-status] { margin: 4px 0 10px; padding: 10px 12px; border-radius: 4px; background: #FBE9E7; color: #8A1C12; font-size: 14px; line-height: 1.45; }
[data-form-status][hidden] { display: none; }
.form-card .btn { cursor: pointer; font-family: Montserrat, Arial, sans-serif; }
button.btn { line-height: 1.65; }
.form-card .btn[disabled] { opacity: 0.7; cursor: wait; }
.menu-btn { background: transparent; font: inherit; cursor: pointer; padding: 0; }
@media (max-width: 760px) {
  body.nav-open nav.main { display: flex; flex-direction: column; align-items: stretch; gap: 0; position: absolute; left: 0; right: 0; top: 76px; z-index: 90; background: var(--black); border-bottom: 3px solid var(--gold); padding: 6px 18px 14px; }
  body.nav-open nav.main a { padding: 14px 2px; border-bottom: 1px solid rgba(255,255,255,0.12); font-size: 17px; }
  body.nav-open nav.main a.active { border-bottom-color: rgba(255,255,255,0.12); padding-bottom: 14px; }
  header.site { position: relative; }
}
.page-head { background: var(--black); color: var(--white); padding: 72px 0 60px; }
.page-head h1 { font-size: 46px; line-height: 1.12; color: var(--white); margin: 0 0 16px; }
.page-head .lede { font-size: 19px; color: rgba(255,255,255,0.9); max-width: 720px; margin: 0 0 22px; }
.page-head .byline { color: rgba(255,255,255,0.75); margin: 0; }
.page-body { padding: 64px 0; }
.prose { max-width: 800px; }
.prose h2 { font-size: 30px; margin: 40px 0 14px; color: var(--black); }
.prose h3 { font-size: 22px; margin: 28px 0 10px; color: var(--black); }
.prose a { color: #8A6516; text-decoration: underline; }
@media (max-width: 760px) { .page-head { padding: 48px 0 40px; } .page-head h1 { font-size: 32px; } .page-body { padding: 44px 0; } }

/* Fence service pages: what we build (options), captioned photo grid, four column feature cards, text only reviews. */
.opts { padding: 88px 0; background: var(--cream); }
.opts-text { max-width: 820px; margin: -14px auto 38px; text-align: center; }
.opts-text p { margin: 0 0 14px; font-size: 17.5px; line-height: 1.7; color: var(--text); }
.opts-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.opt { background: var(--white); border: 1px solid var(--line); border-top: 4px solid var(--gold); border-radius: 6px; padding: 24px 24px 22px; }
.opt h3 { font-size: 18px; color: var(--black); margin: 0 0 8px; }
.opt p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--muted); }
.recent-grid figure { position: relative; display: block; overflow: hidden; border-radius: 4px; margin: 0; }
.recent.photos .recent-grid { gap: 12px; }
#why.fin-how { background: var(--cream); }
.fin-how-grid.cols-4 { grid-template-columns: repeat(4, 1fr); gap: 20px; }
.fin-how-grid.cols-4 .fin-how-card { padding: 28px 22px 26px; }
.rev.no-photo .rev-body { border-top: 4px solid var(--gold); }
@media (max-width: 960px) {
  .fin-how-grid.cols-4 { grid-template-columns: 1fr 1fr; }
  .opts-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .opts { padding: 60px 0; }
  .opts-text p { font-size: 16.5px; }
  .opts-grid { grid-template-columns: 1fr; gap: 14px; }
  .recent.photos .recent-grid { gap: 12px 10px; }
  .recent-grid figure span { position: static; display: block; background: none; color: var(--black); padding: 7px 2px 0; font-size: 10.5px; }
  .fin-how-grid.cols-4 { grid-template-columns: 1fr; }
}

/* >>> Inner pages (Oct 2026): a three step row fills the width instead of leaving a blank fourth column. */
@media (min-width: 961px) {
  .steps .grid4:has(> .step:nth-child(3):last-child) { grid-template-columns: repeat(3, 1fr); }
}
/* <<< Inner pages */

/* >>> Final audit (2026-10-15) */
/* Tablet header (761 to 1100px, an iPad on its side): keep the nav on one line and the phone number whole. */
@media (min-width: 761px) and (max-width: 1100px) {
  .head { gap: 16px; height: 96px; }
  .logo img { width: 72px; height: 72px; }
  nav.main { gap: 16px; }
  nav.main a { font-size: 14px; white-space: nowrap; }
  .head-cta { gap: 14px; }
  .head-phone small { display: none; }
  .head-phone b { font-size: 18px; white-space: nowrap; }
  .head .btn { padding: 12px 14px; font-size: 13px; white-space: nowrap; }
}
/* A phone link inside a numbered step is body text, not the step number. */
.step a.num { font: inherit; color: inherit; display: inline; padding: 0; position: static; }
.step a.num::after { display: none; }
/* A page with one review shows it centered instead of leaving the right half of the row empty. */
.rev-grid > .rev:only-child { grid-column: 1 / -1; width: 100%; max-width: 640px; margin: 0 auto; }
/* A text-only review next to a photo review keeps its own height instead of stretching around blank space. */
.rev-grid:has(.rev-photo) .rev.no-photo { align-self: start; }
/* <<< Final audit */

/* >>> Saturday layout fixes (2026-10-24: render-01, 02, 03, 06, 07) */
/* render-01: the payment calculator frame fits its own content. The embed stacks in one column below about 750 px
   of panel width (about 930 px of content at phone width, about 790 at 700 px) and sits in two columns above that
   (about 510 px of content), so the panel no longer forces 700 px and the frame is tall enough not to clip. */
.fin-calc-panel { min-height: 0; }
.fin-calc-panel iframe { width: 100%; height: 980px; }
@media (min-width: 561px) { .fin-calc-panel iframe { height: 860px; } }
@media (min-width: 801px) { .fin-calc-panel iframe { height: 540px; } }

/* render-03: a photo row that does not fill four columns (one to three photos, or five or six) is centered with
   even tiles instead of ending left aligned. --cols is how many tiles share a row. */
.recent-grid:not(:has(> :nth-child(4))), .recent-grid:has(> :nth-child(5)):not(:has(> :nth-child(7))) { display: flex; flex-wrap: wrap; justify-content: center; --cols: 3; }
.recent-grid:not(:has(> :nth-child(4))) > *, .recent-grid:has(> :nth-child(5)):not(:has(> :nth-child(7))) > * { flex: 0 0 calc((100% - (var(--cols) - 1) * var(--gap, 10px)) / var(--cols)); min-width: 0; }
.recent.photos .recent-grid { --gap: 12px; }
.recent-grid:not(:has(> :nth-child(3))) { --cols: 2; max-width: 760px; margin-left: auto; margin-right: auto; }
.recent-grid:not(:has(> :nth-child(2))) { --cols: 1; max-width: 420px; margin-left: auto; margin-right: auto; }
@media (max-width: 760px) {
  .recent-grid:not(:has(> :nth-child(4))), .recent-grid:has(> :nth-child(5)):not(:has(> :nth-child(7))) { --cols: 2; }
  .recent.photos .recent-grid { --gap: 10px; }
  .recent-grid:not(:has(> :nth-child(3))) { max-width: none; }
  .recent-grid:not(:has(> :nth-child(2))) { --cols: 1; max-width: 320px; }
}

/* render-06: the footer legal line keeps each separator with its link. On phones the copyright takes its own line
   and the links sit together under it, so a pipe is never left at the end of a line. */
.foot-legal .foot-item { white-space: nowrap; }
@media (max-width: 760px) {
  .foot-legal .foot-copy { display: block; margin-bottom: 4px; }
  .foot-legal .foot-copy + .foot-item .foot-sep { display: none; }
}

/* render-07 and render-02: on the reviews page the intro and the review wall share the cream background, so the
   two sections' padding stacked into one wide blank band. The band is trimmed where the two meet. */
#intro.opts { padding-bottom: 36px; }
#intro.opts .opts-text { margin-bottom: 0; }
#intro.opts + .reviews { padding-top: 56px; }
/* render-02: the review wall flows in two balanced columns, so a short text card never leaves a blank hole beside a tall photo card. */
#intro.opts + .reviews .rev-grid { display: block; column-count: 2; column-gap: 24px; }
#intro.opts + .reviews .rev-grid > .rev { break-inside: avoid; margin: 0 0 24px; width: 100%; }
@media (max-width: 760px) {
  #intro.opts + .reviews .rev-grid { column-count: 1; }
  #intro.opts + .reviews .rev-grid > .rev { margin-bottom: 16px; }
  #intro.opts { padding-bottom: 16px; }
  #intro.opts + .reviews { padding-top: 32px; }
}
/* <<< Saturday layout fixes */

/* >>> Ad landing layout (kw-18): header with only the logo, phone and one button; footer without link columns */
.cta-band { padding: 36px 0; background: var(--white); }
.cta-band .center-btn { margin: 0; }
.cta-band + .fin-numbers, .trust + .cta-band { background: var(--cream); }
header.site-lp .head { justify-content: space-between; }
header.site-lp .logo { display: block; }
footer.site-lp .foot { grid-template-columns: 1fr; padding-bottom: 36px; }
footer.site-lp { padding-top: 56px; }
@media (max-width: 760px) {
  header.site-lp .head-mobile .btn { padding: 12px 14px; font-size: 12.5px; letter-spacing: 0.04em; }
  .cta-band { padding: 28px 0; }
  footer.site-lp { padding-top: 40px; }
}
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
header.site-lp .head-cta, header.site-lp .head-mobile { flex-direction: row-reverse; }
header.site-lp .head-cta .head-phone small { white-space: nowrap; }
@media (max-width: 760px) {
  .sticky-bar.sticky-lp { grid-template-columns: 1.5fr 1fr; }
  .sticky-lp a { font-size: 11.5px; letter-spacing: 0.02em; padding: 0 6px; white-space: nowrap; }
  .sticky-lp .s-call { order: -1; }
  .sticky-lp svg { display: none; }
}
/* <<< Ad landing layout */