@font-face{
    font-family:"Playfair Display";
    src:url(/fonts/playfair-400.woff2) format("woff2");
    font-weight:400;font-style:normal;font-display:swap;
  }
  @font-face{
    font-family:"Playfair Display";
    src:url(/fonts/playfair-600.woff2) format("woff2");
    font-weight:600;font-style:normal;font-display:swap;
  }
  @font-face{
    font-family:"Playfair Display";
    src:url(/fonts/playfair-700.woff2) format("woff2");
    font-weight:700;font-style:normal;font-display:swap;
  }
  @font-face{
    font-family:"Inter";
    src:url(/assets/home/vendor/inter-variable.woff2) format("woff2-variations");
    font-weight:100 900;font-style:normal;font-display:swap;
  }
  :root{
    /* Design tokens per site_overhaul_instructions.md, section 2.
       Navy/gold/cream/text/border are the spec's exact hex values.
       gold-deep, slate, bone-deep and navy-black are derived shades
       needed for contrast and depth that the 5-color spec doesn't
       itself enumerate -- see Wren's report for the contrast math. */
    --serif:"Playfair Display",Georgia,"Times New Roman",serif;
    --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    --navy:#0F2137;
    --navy-deep:#0A192F;
    --navy-black:#081522;
    --text:#1E293B;
    --bone:#FAFAF7;
    --bone-deep:#F1EFE7;
    --slate:#59637A;
    --brass:#7A5E33;
    --brass-light:#C5A059;
    --line:#E2E8F0;
    --line-soft:#EAEDF2;
    --line-dark:rgba(250,250,247,.14);
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    background:var(--bone);color:var(--text);
    font:400 17px/1.6 var(--sans);
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,.display{
    font-family:var(--serif);
    font-weight:700;line-height:1.1;letter-spacing:-.01em;
  }
  h3{font-weight:600}
  a{color:inherit}
  .wrap{max-width:1140px;margin:0 auto;padding:0 32px}
  .narrow{max-width:60ch}

  .wrap.narrow{max-width:1140px}

  .eyebrow{font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:var(--brass)}
  .eyebrow.on-dark{color:var(--brass-light)}
  .hair{width:44px;height:1px;background:var(--brass);margin:22px 0}
  .hair.on-dark{background:var(--brass-light)}

  .skip{position:absolute;left:-9999px;background:var(--navy-deep);color:var(--bone);padding:12px 18px;z-index:99;text-decoration:none}
  .skip:focus{left:14px;top:14px}

  .tel{
    display:inline-block;background:var(--navy);color:var(--bone);text-decoration:none;
    padding:17px 38px;font-size:14px;letter-spacing:.14em;text-transform:uppercase;
    border:1px solid var(--navy);transition:background-color .22s,border-color .22s,color .22s;
  }
  .tel:hover,.tel:focus{background:var(--navy-deep);border-color:var(--navy-deep);color:var(--bone)}
  .tel.gold{background:var(--brass-light);border-color:var(--brass-light);color:var(--navy-black)}
  .tel.gold:hover,.tel.gold:focus{background:#D8B779;border-color:#D8B779;color:var(--navy-black)}
  .tel.outline{background:transparent;border-color:var(--line-dark);color:var(--bone)}
  .tel.outline:hover,.tel.outline:focus{border-color:var(--bone);background:transparent;color:var(--bone)}
  .tel.sm{padding:11px 22px;font-size:12px}

  :focus-visible{outline:2px solid var(--brass);outline-offset:3px}
  .hero :focus-visible,.dark :focus-visible,.creds :focus-visible{outline-color:var(--brass-light)}

  header{position:sticky;top:0;z-index:30;background:rgba(250,250,247,.96);border-bottom:1px solid var(--line-soft)}

  .bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px;padding:16px 32px}
  .bar img{height:25px;width:auto;display:block}
  .bar nav{display:flex;align-items:center;gap:26px}

  .bar nav a{font-size:13px;color:var(--slate);text-decoration:none;letter-spacing:.02em;padding:6px 0}
  .bar nav a:hover,.bar nav a:focus{color:var(--navy-deep)}

  .bar nav a.tel{color:var(--bone)}
  .bar nav a.tel:hover,.bar nav a.tel:focus{color:var(--bone)}
  @media(max-width:820px){.bar nav a.hide-sm{display:none}}

  .jump{display:none}
  @media(max-width:820px){
    .jump{
      display:block;position:sticky;top:57px;z-index:29;
      background:rgba(250,250,247,.97);border-bottom:1px solid var(--line-soft);
    }
    .jump ul{
      display:flex;gap:8px;list-style:none;margin:0;
      padding:10px 16px;overflow-x:auto;scroll-snap-type:x proximity;
      -webkit-overflow-scrolling:touch;scrollbar-width:none;
    }

    .jump:after{
      content:"";position:absolute;inset:0;left:auto;width:36px;
      background:linear-gradient(to right, rgba(250,250,247,0), var(--bone) 65%);
      pointer-events:none;
    }
    .jump ul::-webkit-scrollbar{display:none}
    .jump li{flex:0 0 auto;scroll-snap-align:start}
    .jump a{
      display:block;padding:8px 14px;border:1px solid var(--line);
      border-radius:2px;font-size:12.5px;letter-spacing:.02em;
      color:var(--slate);text-decoration:none;white-space:nowrap;
    }
    .jump a:hover,.jump a:focus-visible{
      color:var(--bone);background:var(--navy-deep);border-color:var(--navy-deep);
      outline:none;
    }
  }

  section[id],div[id]{scroll-margin-top:112px}


  .hero{background:var(--navy-black);color:var(--bone);position:relative;overflow:hidden}
  .hero-inner{
    max-width:1140px;margin:0 auto;padding:0 32px;display:flex;align-items:center;

    min-height:max(min(74vh,660px),clamp(0px,calc(.68 * (100vw - 1076px)),86vh));
  }

  .hero-copy{position:relative;z-index:2;padding:88px 0;max-width:min(620px,52%)}
  .hero h1{font-size:clamp(34px,4.6vw,58px)}
  .hero .sub{font-size:clamp(17.5px,1.6vw,20px);color:#B9C0CF;max-width:44ch;margin-top:30px;line-height:1.7}
  .hero .acts{display:flex;flex-wrap:wrap;gap:14px;margin-top:44px}
  .portrait{position:absolute;right:0;bottom:0;z-index:1;width:min(44%,470px);line-height:0;pointer-events:none}
  .portrait img{display:block;width:100%;height:auto}
  .portrait:after{
    content:"";position:absolute;inset:0;
    background:
      linear-gradient(to right, var(--navy-black) 0%, rgba(8,21,34,.55) 34%, rgba(8,21,34,0) 72%),
      linear-gradient(to bottom, var(--navy-black) 0%, rgba(8,21,34,.35) 22%, rgba(8,21,34,0) 55%);
  }

  @media(min-width:1001px){
    .portrait{
      top:0;bottom:0;width:auto;height:auto;aspect-ratio:755/1024;max-width:44%;
      right:clamp(0px, calc(.22 * (100vw - 1001px)), 200px);
    }
    .portrait img{width:100%;height:100%;object-fit:cover;object-position:right top}
    .portrait:after{
      background:
        linear-gradient(to left, var(--navy-black) 0%, rgba(8,21,34,0) 16%),
        linear-gradient(to right, var(--navy-black) 0%, rgba(8,21,34,.55) 34%, rgba(8,21,34,0) 72%);
    }
  }

  @media(max-width:1000px){
    .portrait{width:min(50%,380px);opacity:.92}
    .hero-copy{max-width:none;padding:88px 0}
  }
  @media(max-width:700px){
    .hero-inner{min-height:0}
    .portrait{width:62%;opacity:.85}
    .hero-copy{padding:72px 0 76px}
  }

  .creds{background:var(--navy-deep);color:var(--bone);border-top:1px solid var(--line-dark)}

  .creds-grid{display:grid;grid-template-columns:repeat(3,1fr)}
  .creds-grid div{padding:34px 34px 34px 0;border-right:1px solid var(--line-dark)}
  .creds-grid div:last-child{border-right:0}
  @media(max-width:820px){.creds-grid{grid-template-columns:1fr}.creds-grid div{border-right:0;border-bottom:1px solid var(--line-dark);padding:24px 0}.creds-grid div:last-child{border-bottom:0}}
  .creds strong{display:block;font-family:var(--serif);font-weight:400;font-size:22px;margin-bottom:6px}
  .creds span{font-size:13px;color:#9AA4B8;letter-spacing:.02em}

  /* Authority badge row -- placed directly below the hero fold per
     site_overhaul_instructions.md section 2. Built static (not
     position:sticky) on purpose: the page already carries a sticky
     header and, on mobile, a sticky jump-nav and a sticky bottom
     action bar -- a third pinned layer would fight all three for
     the same strip of viewport. No badge artwork exists for any of
     these, so each is a line-art SVG mark plus text, not a logo. */
  .badges{background:var(--bone-deep);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:0}
  .badges .wrap{padding:30px 32px}
  .badgerow{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
  @media(max-width:900px){.badgerow{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:480px){.badgerow{grid-template-columns:1fr}}
  .badge{display:flex;align-items:center;gap:14px}
  .badge-icon{
    flex:0 0 auto;width:38px;height:38px;fill:none;stroke:var(--brass);
    stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;overflow:visible;
  }
  .badge-name{display:block;font-family:var(--serif);font-size:15.5px;color:var(--navy-deep);line-height:1.3}
  .badge-issuer{display:block;font-size:12px;color:var(--slate);margin-top:2px}

  .verify{background:var(--bone-deep);border-top:1px solid var(--line)}
  .verify .wrap{padding-top:52px;padding-bottom:52px}
  .verify .eyebrow{margin-bottom:10px}
  .verify h2{font-family:var(--serif);font-weight:400;font-size:clamp(24px,2.4vw,31px);margin-bottom:8px}
  .verify .sub{color:var(--slate);font-size:15px;max-width:62ch;margin-bottom:30px}

  .vgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line)}
  @media(max-width:900px){.vgrid{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:560px){.vgrid{grid-template-columns:1fr}}
  .vgrid a{
    display:block;background:var(--bone-deep);padding:22px 22px 22px 0;
    text-decoration:none;color:inherit;
  }
  @media(max-width:900px){.vgrid a{padding-right:22px}}
  .vgrid a:hover, .vgrid a:focus-visible{background:var(--bone);outline:none}
  .vgrid a:focus-visible{box-shadow:inset 0 0 0 2px var(--brass)}

  .vicon{
    display:block;width:34px;height:34px;margin-bottom:14px;
    fill:none;stroke:var(--brass);stroke-width:1.4;
    stroke-linecap:round;stroke-linejoin:round;
    overflow:visible;
  }
  .vgrid a:hover .vicon, .vgrid a:focus-visible .vicon{stroke:var(--navy-deep)}
  .vgrid .vname{
    display:block;font-family:var(--serif);font-size:19px;margin-bottom:5px;
    color:var(--navy-deep);
  }
  .vgrid .vissuer{display:block;font-size:12.5px;color:var(--slate);line-height:1.45}
  .vgrid .vgo{
    display:block;margin-top:12px;font-size:11px;letter-spacing:.16em;
    text-transform:uppercase;color:var(--brass);
  }
  .vgrid a:hover .vgo{text-decoration:underline}

  section{padding:118px 0}
  .band{background:var(--bone-deep)}
  .dark{background:var(--navy-black);color:var(--bone)}
  .dark p{color:#B9C0CF}
  h2{font-size:clamp(30px,4.6vw,50px);margin-top:16px}
  .lede{color:var(--slate);margin-top:24px;font-size:18.5px}
  .dark .lede{color:#B9C0CF}

  /* "Why Bill Stradley" -- 4 parallel qualities, not a sequence, so
     no 01/02/03 markers (those stayed on the real 3-step process
     elsewhere on the old page and have been retired with it). */
  .values{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:64px}
  @media(max-width:620px){.values{grid-template-columns:1fr}}
  .value{background:var(--bone);padding:36px 32px}
  .value h3{font-size:19px;margin-bottom:10px}
  .value p{color:var(--slate);font-size:15.5px}

  .areas{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:64px}
  .areas .area.feature{grid-column:1/-1}
  @media(max-width:900px){.areas{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:620px){.areas{grid-template-columns:1fr}}
  .area{background:var(--bone);padding:36px 32px}
  .band .area{background:var(--bone-deep)}
  .area h3{font-size:19px;margin-bottom:10px}
  .area p{font-size:15px;color:var(--slate)}
  .area.feature{background:var(--navy-black);color:var(--bone)}
  .area.feature p{color:#B9C0CF}
  .area.feature .eyebrow{color:var(--brass-light);display:block;margin-bottom:14px}

  .quotes{columns:2;column-gap:56px;margin-top:64px}
  @media(max-width:800px){.quotes{columns:1}}
  blockquote{
    break-inside:avoid;margin-bottom:38px;padding-left:26px;border-left:1px solid var(--brass);
    font-family:var(--serif);font-size:20px;line-height:1.55;color:var(--navy-deep);
  }
  .attrib{display:block;margin-top:12px;font-family:var(--serif);font-size:11px;
          color:var(--slate);letter-spacing:.24em;text-transform:uppercase}

  .faq{margin-top:64px;max-width:72ch}
  details{border-bottom:1px solid var(--line);padding:26px 0}
  summary{cursor:pointer;font-family:var(--serif);font-size:22px;list-style:none;display:flex;gap:16px}
  summary::-webkit-details-marker{display:none}
  summary:before{content:"+";color:var(--brass);font-family:var(--serif);font-size:19px}
  details[open] summary:before{content:"\2013"}
  details p{margin-top:16px;color:var(--slate);padding-left:35px}

  .contact{display:grid;grid-template-columns:1.1fr .9fr;gap:72px;margin-top:56px}
  @media(max-width:820px){.contact{grid-template-columns:1fr;gap:44px}}
  .addr{font-style:normal;line-height:2;color:#B9C0CF;font-size:16px}
  .addr a{color:var(--bone)}
  .big-tel{font-family:var(--serif);font-size:clamp(34px,5.4vw,52px);text-decoration:none;display:inline-block;margin-bottom:22px;letter-spacing:-.02em}

  /* Placeholder for the "1545 Heights Blvd historic office" photo the
     spec asks for -- no real photograph exists yet, so this stays a
     labeled box rather than a fabricated or stock image. Swap for a
     real <picture> once Bill supplies one; see Wren's asset list. */
  .office-photo{
    margin-top:24px;border:1px dashed var(--line-dark);border-radius:2px;
    padding:18px 20px;display:flex;align-items:center;gap:14px;
    color:#8B94A8;font-size:12.5px;line-height:1.4;
  }
  .office-photo svg{
    flex:0 0 auto;width:28px;height:28px;fill:none;stroke:#6E7891;
    stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;
  }

  footer{background:var(--navy-black);color:#8B94A8;border-top:1px solid var(--line-dark);padding:34px 0;font-size:13px}
  .foot{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between}
  .foot a{color:#B9C0CF}
  @media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

.foot-legal {
  padding-top: 20px; margin-top: 20px;
  border-top: 1px solid var(--line-dark);
}
.foot-legal p {
  font-size: 13px; line-height: 1.6; color: #9AA4B8;
  max-width: 78ch; margin-bottom: 10px;
}
.foot-legal p:last-child { margin-bottom: 0; }

/* Mobile sticky action bar -- Call Now + Menu, tap targets 48px+.
   Mirrors the .jump pills as the primary mobile action rather than
   replacing them: .jump moves between sections already on the page,
   this bar is for the two things someone on a phone actually needs
   without scrolling back up -- call, or see the rest of the site. */
.mobile-bar{display:none}
@media(max-width:820px){
  body{padding-bottom:64px}
  .mobile-bar{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40;
    background:var(--navy-deep);border-top:1px solid var(--line-dark);
  }
  .mobile-bar a,.mobile-bar button{
    flex:1;display:flex;align-items:center;justify-content:center;gap:8px;
    min-height:56px;border:0;background:none;color:var(--bone);
    font:600 14px/1 var(--sans);letter-spacing:.03em;cursor:pointer;
  }
  .mobile-bar a{background:var(--brass-light);color:var(--navy-black)}
  .mobile-bar .divider{width:1px;background:var(--line-dark);flex:0 0 auto}
  .mobile-bar svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
}

.menu-drawer{
  display:none;position:fixed;inset:0;z-index:50;background:rgba(8,21,34,.6);
}
.menu-drawer.open{display:block}
.menu-drawer-panel{
  position:absolute;right:0;top:0;bottom:0;width:min(320px,84vw);
  background:var(--bone);padding:28px 24px;overflow-y:auto;
  box-shadow:-8px 0 30px rgba(8,21,34,.25);
}
.menu-drawer-close{
  display:flex;align-items:center;justify-content:center;
  width:48px;height:48px;margin-left:auto;background:none;border:0;
  color:var(--navy-deep);font-size:26px;line-height:1;cursor:pointer;
}
.menu-drawer nav{display:flex;flex-direction:column;margin-top:12px}
.menu-drawer nav a{
  display:flex;align-items:center;min-height:52px;
  font:500 17px/1.2 var(--sans);color:var(--text);text-decoration:none;
  border-bottom:1px solid var(--line);
}
.menu-drawer nav a.tel{
  margin-top:20px;border-bottom:0;justify-content:center;
  background:var(--navy);color:var(--bone);min-height:52px;
  padding:0 12px;font-size:15px;letter-spacing:.04em;text-transform:none;
}
@media(prefers-reduced-motion:no-preference){.menu-drawer-panel{transition:transform .2s ease}}