/* JNK Managing Group design system. One file. Change a token, not a rule. */

:root{
  --hdr-h:76px;
  --ink:#0E1F35;          /* logo navy */
  --ink-deep:#081420;
  --gold:#C08A3E;         /* logo gold, darkened for AA on cream */
  --gold-bright:#E0B266;
  --cream:#F7F3EA;
  --paper:#FFFFFF;
  --body:#22303F;
  --muted:#57687C;
  --line:#DED6C6;
  --ok:#1F6B4A;
  --focus:#C08A3E;
  --wrap:1400px;
  --r:14px;
  --shadow:0 18px 48px -24px rgba(8,20,32,.45);
  /* Text serif with an optical-size axis, chosen for even letterforms at display sizes. */
  --serif:"Source Serif 4",Georgia,"Times New Roman",serif;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--body);
  font:400 17px/1.65 var(--sans);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--ink);text-underline-offset:3px}

/* Accessibility ---------------------------------------------------------- */
.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--ink);color:#fff;padding:14px 20px;border-radius:0 0 var(--r) 0;
  font-weight:600;text-decoration:none;
}
.skip:focus{left:0}
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:3px solid var(--focus);outline-offset:3px;border-radius:4px;
}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;
    scroll-behavior:auto!important}
}

/* Layout ----------------------------------------------------------------- */
.wrap{width:min(100% - 56px,var(--wrap));margin-inline:auto}
@media (max-width:640px){.wrap{width:min(100% - 32px,var(--wrap))}}
section{padding:clamp(56px,7vw,104px) 0}
.eyebrow{
  font:600 12px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold);margin:0 0 18px;
}
h1,h2,h3{font-family:var(--serif);color:var(--ink);font-weight:600;line-height:1.12;
  letter-spacing:-.015em;margin:0 0 18px}
h1{font-size:clamp(36px,4.8vw,66px)}
h2{font-size:clamp(28px,3.7vw,42px)}
h3{font-size:clamp(19px,2vw,22px);line-height:1.25}
.lede{font-size:clamp(17px,1.35vw,20px);color:var(--muted);max-width:74ch;margin:0 0 28px}
.center{text-align:center}
.center .lede{margin-inline:auto}

/* Buttons ---------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:52px;padding:14px 26px;border-radius:10px;border:2px solid transparent;
  font:600 16px/1 var(--sans);text-decoration:none;cursor:pointer;
  transition:transform .15s ease,background-color .15s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--gold);color:#20160A;border-color:var(--gold)}
.btn-primary:hover{background:#B07C33}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-ghost-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.35)}

/* Header ----------------------------------------------------------------- */
.hdr{background:var(--ink);position:sticky;top:0;z-index:100}
.hdr-in{display:flex;align-items:center;gap:22px;min-height:76px}
.hdr-logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:#fff;
  font:600 16.5px/1.1 var(--serif);letter-spacing:.01em;margin-right:auto}
.hdr-logo img{width:auto;height:34px}
/* The name must not wrap: a two-line logo block pushes the nav onto a second row at 1280. */
.hdr-name{display:flex;flex-direction:column;gap:2px;white-space:nowrap}
/* His tagline, set small under the company name rather than competing with it. */
.hdr-tag{font:400 11px/1 var(--sans);letter-spacing:.10em;text-transform:uppercase;
  color:var(--gold-bright);opacity:.92}
.nav{display:flex;gap:21px}
.nav a{color:#E7EDF4;text-decoration:none;font-size:15px;font-weight:500;white-space:nowrap}
.nav a:hover{color:var(--gold-bright);text-decoration:underline}
.hdr-call{display:inline-flex;align-items:center;gap:9px;color:#fff;text-decoration:none;
  font-weight:700;font-size:17px;min-height:48px;padding:8px 4px}
.hdr-call:hover{color:var(--gold-bright)}
/* Phone over email, right-aligned. The phone stays the loud one: it is the action that gets a
   seller an answer today. The email is the reassurance that there is a second way in. */
.hdr-contact{display:flex;flex-direction:column;align-items:flex-end;gap:0;margin-left:auto}
.hdr-contact .hdr-call{min-height:0;padding:2px 4px}
.hdr-email{display:inline-flex;align-items:center;gap:7px;color:#B9C7D6;text-decoration:none;
  font-size:13.5px;font-weight:500;padding:2px 4px}
.hdr-email:hover{color:var(--gold-bright)}
.hdr-email svg{opacity:.8}
.navtoggle{display:none}

@media (max-width:900px){
  .hdr-in{min-height:66px;gap:10px}
  .hdr-tag{display:none}
  .hdr-contact{gap:0}

  /* 44px minimum tap target, ordered after the call link so it sits at the right edge */
  .navtoggle{display:inline-flex;align-items:center;justify-content:center;order:3;
    flex:0 0 auto;width:46px;height:46px;min-width:46px;padding:0;background:transparent;
    border:1px solid rgba(255,255,255,.22);border-radius:10px;cursor:pointer;color:#fff}
  .navtoggle:hover{border-color:var(--gold)}
  .navtoggle:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
  .navtoggle-bars{display:block;width:20px;height:14px;position:relative}
  .navtoggle-bars span{position:absolute;left:0;width:100%;height:2px;background:#fff;
    border-radius:2px;transition:transform .18s ease,opacity .18s ease}
  .navtoggle-bars span:nth-child(1){top:0}
  .navtoggle-bars span:nth-child(2){top:6px}
  .navtoggle-bars span:nth-child(3){top:12px}
  .navtoggle[aria-expanded="true"] .navtoggle-bars span:nth-child(1){transform:translateY(6px) rotate(45deg)}
  .navtoggle[aria-expanded="true"] .navtoggle-bars span:nth-child(2){opacity:0}
  .navtoggle[aria-expanded="true"] .navtoggle-bars span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

  /* the panel. Links stay in the DOM either way, so crawlers always see them. */
  .nav{position:absolute;left:0;right:0;top:100%;flex-direction:column;gap:0;
    background:var(--ink-deep);border-top:1px solid rgba(255,255,255,.12);
    box-shadow:0 18px 40px rgba(0,0,0,.45);padding:6px 0;
    max-height:calc(100vh - 66px);overflow-y:auto}
  .nav[hidden]{display:none}
  .nav a{display:block;padding:15px 28px;font-size:16.5px;min-height:48px;
    border-bottom:1px solid rgba(255,255,255,.07)}
  .nav a:last-child{border-bottom:0}
  .nav a:hover{background:rgba(255,255,255,.05);text-decoration:none}
  .nav a:focus-visible{outline:3px solid var(--gold);outline-offset:-3px}
}
@media (max-width:900px) and (prefers-reduced-motion:reduce){
  .navtoggle-bars span{transition:none}
}
@media (max-width:620px){
  .hdr-logo{font-size:14px;line-height:1.2;white-space:nowrap;gap:8px}
  .hdr-logo img{height:26px}
  /* Three things cannot share a phone-width row. The header phone goes, because the sticky
     call bar below 760px already puts a permanent Call button on screen, so nothing is lost.
     That leaves the mark and the name, which is the pair worth keeping. */
  .hdr-contact{display:none}
}

/* Hero ------------------------------------------------------------------- */
.hero{background:var(--ink);color:#EAF0F7;padding:clamp(40px,4vw,64px) 0 clamp(56px,6vw,88px);
  position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;inset:auto -10% -40% 40%;height:70%;
  background:radial-gradient(closest-side,rgba(192,138,62,.18),transparent);pointer-events:none}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(430px,.75fr);gap:clamp(28px,4vw,60px);
  align-items:start;position:relative;z-index:1}
.hero h1{color:#fff}
.hero .lede{color:#C3D0DE;max-width:56ch;margin-bottom:32px}
.hero .offer{font-size:clamp(19px,1.75vw,25px);line-height:1.45;color:#D6E1EC;max-width:34ch}
/* Hero offer as scannable bullets. Jeff asked for the run-on offer sentence broken up so the
   three paths read as three choices rather than one paragraph. Checkmarks are drawn in CSS so
   there is no icon font and nothing to fail to load. */
.offer-list{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:11px;max-width:30ch}
.offer-list li{position:relative;padding-left:31px;color:#EAF1F8;line-height:1.4;
  font-size:clamp(18px,1.6vw,22px);font-weight:600}
.offer-list li::before{content:"";position:absolute;left:0;top:.42em;width:15px;height:9px;
  border-left:2.5px solid var(--gold-bright);border-bottom:2.5px solid var(--gold-bright);
  transform:rotate(-45deg)}
.offer-list li span{display:block;font-weight:400;font-size:14px;color:#A8BACB;letter-spacing:.01em}
@media (max-width:520px){.offer-list li{font-size:17px;padding-left:27px}}
.btn-call{font-size:19px;padding:16px 30px;min-height:60px}
@media (max-width:920px){.hero .offer{max-width:34ch}.offer-list{max-width:38ch}}
@media (max-width:520px){.btn-call{font-size:17px;padding:14px 20px}}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin:0}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin:26px 0 0;padding:0;list-style:none}
.chips li{display:inline-flex;align-items:center;gap:9px;padding:10px 16px;border-radius:999px;
  border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.04);
  font-size:14.5px;color:#C6D3E1}
.chips li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--gold);
  flex:0 0 auto}
@media (max-width:920px){.hero-grid{grid-template-columns:1fr;align-items:start}}

/* Trust strip ------------------------------------------------------------ */
.trust{background:var(--ink-deep);border-top:1px solid rgba(255,255,255,.09);padding:0}
.trust-in{display:grid;grid-template-columns:minmax(280px,1fr) minmax(0,2.1fr);
  gap:clamp(22px,3vw,44px);align-items:center;padding:26px 0}
.partner{display:flex;flex-direction:column;gap:14px}
.partner-mark{display:inline-flex;align-items:center;justify-content:center;
  background:#fff;border-radius:10px;padding:11px 16px;width:fit-content}
.partner-mark img{width:130px;height:auto;display:block}
.partner p{margin:0;font-size:14.5px;line-height:1.5;color:#BCCBDA;max-width:44ch}
.partner b{color:#fff;font-weight:600}
.signals{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(18px,2.2vw,32px);margin:0;padding:0}
.signals li{color:#B9C9DA;font-size:14px;line-height:1.45;
  padding-left:16px;border-left:2px solid var(--gold)}
.signals b{display:block;font:600 15.5px/1.3 var(--sans);color:#fff;margin-bottom:6px}
@media (max-width:1000px){
  .trust-in{grid-template-columns:1fr;gap:22px}
  .signals{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:700px){.signals{grid-template-columns:1fr;gap:16px}}

/* Cards ------------------------------------------------------------------ */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.grid-2{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:48px;align-items:start}
/* Equal columns for option cards. .grid-2 is the content+sidebar layout (1.1fr/.9fr) and
   makes two peer options look like a primary and a secondary, which is the opposite of the
   point: cash and retail are meant to carry the same weight. */
.grid-2.even{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px;align-items:stretch}
@media (max-width:900px){.grid-3,.grid-2,.grid-2.even{grid-template-columns:1fr}}
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  padding:30px 28px;display:flex;flex-direction:column}
.card .tag{font:600 11.5px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold);margin-bottom:14px}
.card p{margin:0 0 16px}
.card .fit{margin-top:auto;padding-top:18px;border-top:1px solid var(--line);
  font-size:15px;color:var(--muted)}
.card .fit b{color:var(--ink)}
.alt{background:var(--cream)}
.alt .card{background:var(--paper)}

/* Numbered steps --------------------------------------------------------- */
.steps{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(3,1fr);gap:26px;counter-reset:s}
.steps li{counter-increment:s;padding-top:14px;border-top:3px solid var(--gold)}
.steps li::before{content:"0" counter(s);display:block;font:600 13px/1 var(--sans);
  letter-spacing:.12em;color:var(--gold);margin-bottom:12px}
.steps h3{margin-bottom:8px}
.steps p{margin:0;color:var(--muted);font-size:16px}
@media (max-width:820px){.steps{grid-template-columns:1fr}}

/* Situations ------------------------------------------------------------- */
.sits{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(2,1fr);gap:14px 56px}
.sits li{padding-left:30px;position:relative;line-height:1.5}
.sits li::before{content:"";position:absolute;left:0;top:.55em;width:14px;height:2px;
  background:var(--gold)}
@media (max-width:760px){.sits{grid-template-columns:1fr}}

/* Form ------------------------------------------------------------------- */
.formcard{background:var(--cream);border-radius:var(--r);padding:clamp(20px,2.2vw,26px);
  box-shadow:var(--shadow);border:1px solid var(--line)}
.formcard h2{font-size:clamp(21px,2vw,25px);margin-bottom:6px}
.formcard .note{font-size:14.5px;color:var(--muted);margin:0 0 16px}
.field{margin-bottom:12px}
.field label{display:block;font:600 12px/1 var(--sans);letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink);margin-bottom:5px}
.field input,.field select,.field textarea{
  width:100%;min-height:46px;padding:10px 13px;border:1px solid #C9BFAC;border-radius:9px;
  background:var(--paper);font:400 16px/1.4 var(--sans);color:var(--body);
}
.field textarea{min-height:96px;resize:vertical}
.field .hint{font-size:13.5px;color:var(--muted);margin-top:6px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:520px){.row2{grid-template-columns:1fr}}
.consent{display:flex;gap:10px;align-items:flex-start;margin:14px 0 14px;
  font-size:13px;line-height:1.45;color:var(--muted)}
.consent input{width:24px;height:24px;min-height:0;flex:0 0 auto;margin-top:1px}
.formcard .btn{width:100%;min-height:50px}
.privacy-line{font-size:13px;color:var(--muted);margin:10px 0 0;text-align:center}
.hp{position:absolute;left:-9999px}

/* FAQ -------------------------------------------------------------------- */
.faq{max-width:1020px;margin-inline:auto}
.faq details{border-bottom:1px solid var(--line);padding:6px 0}
.faq summary{cursor:pointer;list-style:none;padding:20px 44px 20px 0;position:relative;
  font:600 18px/1.4 var(--sans);color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:8px;top:17px;font-size:26px;
  font-weight:400;color:var(--gold);line-height:1}
.faq details[open] summary::after{content:"\2212"}
.faq .a{padding:0 0 22px;color:var(--muted);max-width:70ch}
.faq .a p{margin:0 0 12px}

/* Bands ------------------------------------------------------------------ */
.band{background:var(--ink);color:#EAF0F7}
.band h2{color:#fff}
.band .lede{color:#C3D0DE}

/* Footer ----------------------------------------------------------------- */
.ftr{background:var(--ink-deep);color:#B9C9DA;font-size:15px;padding:64px 0 34px}
.ftr a{color:#DCE5EF}
.ftr-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:36px;
  padding-bottom:34px;border-bottom:1px solid rgba(255,255,255,.12)}
.ftr h3{color:#fff;font-family:var(--sans);font-size:13px;letter-spacing:.14em;
  text-transform:uppercase;margin:0 0 16px}
.ftr ul{list-style:none;margin:0;padding:0}
.ftr li{margin-bottom:6px}
.ftr li a{display:inline-block;padding:5px 0;min-height:24px}
.ftr .brokerage{display:flex;align-items:center;gap:14px;margin-top:20px;
  padding-top:20px;border-top:1px solid rgba(255,255,255,.12)}
.ftr .brokerage img{width:120px}
.ftr-legal{padding-top:26px;font-size:13.5px;line-height:1.65;color:#9DB1C6}
.ftr-legal p{margin:0 0 10px;max-width:90ch}
@media (max-width:800px){.ftr-grid{grid-template-columns:1fr;gap:30px}}

/* Sticky mobile call bar ------------------------------------------------- */
.callbar{display:none}
@media (max-width:760px){
  .callbar{
    display:grid;grid-template-columns:1fr 1fr;gap:10px;position:fixed;
    left:0;right:0;bottom:0;z-index:120;padding:10px 14px calc(10px + env(safe-area-inset-bottom));
    background:rgba(8,20,32,.97);border-top:1px solid rgba(255,255,255,.14);
  }
  .callbar .btn{min-height:52px;font-size:15.5px;padding:12px 14px}
  body{padding-bottom:86px}
}


/* ============ THE WORK: before/after pairs + rotating grid ============ */
.work-intro{max-width:70ch}
.ba-set{display:grid;gap:26px}
.ba{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.shot{margin:0;border-radius:var(--r);overflow:hidden;background:var(--paper);
  border:1px solid var(--line);position:relative}
.shot img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;background:#E8E2D6}
/* Phone photographs render portrait (EXIF orientation 6). Forcing them into the 4/3
   box cropped 44% off the height. build.py sets .ba-tall from the image itself. */
.ba-tall .shot img{aspect-ratio:3/4}
.shot figcaption{padding:12px 16px;font-size:14px;color:var(--muted);
  border-top:1px solid var(--line);background:var(--paper)}
.ba-tag{position:absolute;top:12px;left:12px;z-index:2;font:700 11px/1 var(--sans);
  letter-spacing:.14em;text-transform:uppercase;padding:7px 12px;border-radius:100px}
.ba-before .ba-tag{background:var(--ink);color:#fff}
.ba-after .ba-tag{background:var(--gold);color:#20160A}
.ba-label{font:600 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold);margin:0 0 12px}
@media (max-width:700px){.ba{grid-template-columns:1fr;gap:12px}}

.work-note{margin-top:26px;font-size:14.5px;color:var(--muted);max-width:74ch}


/* form status + sent state */
.formstatus{margin:14px 0 0;padding:12px 14px;border-radius:9px;font-size:14.5px;line-height:1.45}
.formstatus--ok{background:#E7F2EA;color:#14532D;border:1px solid #BBD9C6}
.formstatus--error{background:#FBEAEA;color:#7A1F1F;border:1px solid #E7C0C0}
.formcard.is-sent form{display:none}
.form-done h3{margin:0 0 10px;font-size:clamp(21px,2.2vw,26px)}
.form-done p{margin:0;color:var(--muted)}


/* legal pages */
.legal{padding-top:clamp(38px,4vw,60px)}
.legal .wrap{max-width:760px}
.crumb{font-size:14px;color:var(--muted);margin:0 0 18px;display:flex;gap:9px;flex-wrap:wrap}
.crumb a{color:var(--muted)}
.crumb span[aria-hidden]{opacity:.5}
.legal-date{font-size:14px;color:var(--muted);margin:-8px 0 26px}
.legal h2{font-size:clamp(20px,2.1vw,25px);margin:38px 0 12px}
.legal p{margin:0 0 15px}
.legal ul{margin:0 0 18px;padding-left:22px}
.legal li{margin-bottom:9px}
.legal .lede{margin-bottom:8px}


/* optional extras, collapsed so the form fits the fold */
.more{margin:0 0 12px;border-top:1px solid #DCD3C2;border-bottom:1px solid #DCD3C2}
.more summary{cursor:pointer;list-style:none;padding:11px 22px 11px 0;position:relative;
  font:600 13.5px/1.3 var(--sans);color:var(--ink)}
.more summary::-webkit-details-marker{display:none}
.more summary::after{content:"+";position:absolute;right:4px;top:8px;font-size:20px;
  color:var(--gold);line-height:1}
.more[open] summary::after{content:"\2212"}
.more-in{padding-bottom:4px}

/* ---- hero sized to 3/4 of the fold, trust strip fills the last quarter ---- */
/* The fold: hero and trust strip split the first screen 3:1. Done structurally with
   flex-basis 0 rather than calculated vh, because a calc has to guess the header height
   and drifts at other viewport sizes (it read 75/100 at 900px and 77/102 at 1080px).
   Both keep min-height:auto, so content grows the band rather than being clipped. */
/* Floor is 880px tall, not 700. The form needs ~600px including padding, plus a 76px
   header; below ~880 the 3:1 split cannot hold that without clipping the form, which is
   exactly what 1366x768 did. Under the floor the page falls back to normal flow. */
@media (min-width:921px) and (min-height:880px){
  .fold{min-height:calc(100vh - var(--hdr-h));display:flex;flex-direction:column}
  .hero{flex:3 0 0;display:flex;align-items:center;
    padding-top:clamp(14px,1.3vw,20px);padding-bottom:clamp(14px,1.3vw,20px)}
  .hero > .wrap{width:min(100% - 56px,var(--wrap))}
  .trust{flex:1 0 0;display:flex;align-items:center}
  .trust > .wrap{width:min(100% - 56px,var(--wrap))}
  .trust-in{padding:20px 0}
}


/* about page */
.about-top{padding-bottom:clamp(30px,3.4vw,48px)}
.about-top .wrap{max-width:900px}
.about-top h1{font-size:clamp(30px,3.6vw,46px);margin-bottom:18px}
.about-top .lede{max-width:66ch}
.about-top + .alt{border-top:1px solid var(--line)}


/* about: owner portrait, only rendered when the photo exists */
.about-head{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,.9fr);
  gap:clamp(26px,4vw,54px);align-items:start}
.about-head:not(:has(.portrait)){grid-template-columns:1fr;max-width:900px}
.portrait{margin:0;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);
  background:var(--cream)}
.portrait img{width:100%;height:auto;display:block;aspect-ratio:3/4;object-fit:cover;
  object-position:center top}
.portrait figcaption{padding:12px 16px;font-size:13.5px;color:var(--muted);
  border-top:1px solid var(--line);background:var(--paper)}
@media (max-width:820px){
  .about-head{grid-template-columns:1fr}
  .portrait{max-width:340px}
}


/* personal sign-off next to the promise it belongs to */
.signature{display:flex;align-items:center;gap:16px;margin:26px 0 24px;
  padding:16px 18px;background:var(--cream);border-radius:var(--r);
  border:1px solid var(--line)}
.signature img{width:64px;height:64px;border-radius:50%;object-fit:cover;
  object-position:center 18%;flex:0 0 auto}
.signature div{display:flex;flex-direction:column;gap:2px;min-width:0}
.signature b{font:600 16px/1.25 var(--sans);color:var(--ink)}
.signature span{font-size:13.5px;color:var(--muted);line-height:1.35}


/* comparison table. Wide content scrolls in its own container, never the page body. */
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);
  border-radius:var(--r);background:var(--paper)}
.tablewrap:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.cmp{border-collapse:collapse;width:100%;min-width:760px;font-size:14.5px}
.cmp th,.cmp td{padding:14px 16px;text-align:left;vertical-align:top;
  border-bottom:1px solid var(--line)}
.cmp thead th{background:var(--ink);color:#fff;font:600 15px/1.3 var(--sans);
  position:sticky;top:0;z-index:1}
.cmp thead th span{display:block;font-weight:400;font-size:12.5px;color:#A9BCD0;margin-top:3px}
.cmp tbody th{font:600 14px/1.35 var(--sans);color:var(--ink);background:var(--cream);
  width:190px;position:sticky;left:0}
.cmp tbody tr:last-child th,.cmp tbody tr:last-child td{border-bottom:0}
.cmp td{color:var(--body)}
.cmp td.good{color:#14532D;font-weight:500}
.cmp td.bad{color:#7A1F1F}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}


/* high-visibility help callout, and the legal footnote on sensitive pages */
.notice{border:2px solid var(--gold);border-radius:var(--r);padding:clamp(22px,2.6vw,32px);
  background:#FBF6EC}
.notice h2{font-size:clamp(20px,2.1vw,26px);margin:0 0 14px}
.notice p{margin:0 0 12px;font-size:16px;line-height:1.6}
.disclaimer{font-size:13.5px;line-height:1.6;color:var(--muted);max-width:80ch;
  margin:0 auto;padding:20px 22px;background:var(--cream);border-radius:var(--r);
  border:1px solid var(--line)}


/* Equal Housing Opportunity notice */
.eho{display:flex;gap:11px;align-items:flex-start;margin:16px 0 0;font-size:13px;
  line-height:1.5;color:#9FB2C6;max-width:52ch}
.eho svg{flex:0 0 auto;color:#DCE5EF;margin-top:1px}
.eho strong{color:#fff;font-weight:600}


/* FAQ page section jumps */
.faq-jump{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.faq-jump a{font:600 13.5px/1 var(--sans);padding:10px 15px;border-radius:100px;
  border:1px solid var(--line);color:var(--ink);text-decoration:none;background:var(--cream)}
.faq-jump a:hover{border-color:var(--gold);color:var(--gold)}
.faq-jump a:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
#offer-process .faq h2,#money .faq h2,#condition .faq h2,#situations .faq h2,#trust .faq h2{
  font-size:clamp(21px,2.2vw,27px);margin:0 0 22px}


/* contact cards */
.contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.contact-card{display:flex;flex-direction:column;gap:5px;padding:26px 24px;border-radius:var(--r);
  background:var(--paper);border:1px solid var(--line);text-decoration:none;color:inherit;
  transition:border-color .15s ease,transform .15s ease}
a.contact-card:hover{border-color:var(--gold);transform:translateY(-2px)}
a.contact-card:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.contact-label{font:600 12px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;
  color:var(--gold)}
.contact-value{font:600 clamp(19px,1.9vw,23px)/1.25 var(--sans);color:var(--ink);
  overflow-wrap:anywhere}
.contact-note{font-size:14px;color:var(--muted)}
.contact-card.is-static{background:var(--cream)}
@media (max-width:820px){.contact-grid{grid-template-columns:1fr}}


/* service area hub */
.counties{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.county{margin:0;padding:26px 28px;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r)}
.county h3{font-size:clamp(19px,1.9vw,23px);margin:0 0 10px}
.county p{margin:0 0 16px;font-size:15px;color:var(--body)}
.citylist{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0}
.citylist li{margin:0}
.citylist a,.citylist span{display:inline-block;font-size:14px;padding:6px 12px;
  border-radius:100px;border:1px solid var(--line);background:var(--cream);color:var(--muted)}
.citylist a{color:var(--ink);font-weight:500;text-decoration:none;border-color:#D8CFBD}
.citylist a:hover{border-color:var(--gold);color:var(--gold)}
.citylist a:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
@media (max-width:900px){.counties{grid-template-columns:1fr}}


/* review cards */
.review{margin:0;display:flex;flex-direction:column;gap:16px}
.review blockquote{margin:0}
.review blockquote p{margin:0;font-size:16.5px;line-height:1.6;color:var(--body)}
.review blockquote p::before{content:"\201C"}
.review blockquote p::after{content:"\201D"}
.review figcaption{margin-top:auto;padding-top:14px;border-top:1px solid var(--line)}
.review figcaption b{display:block;font:600 15px/1.3 var(--sans);color:var(--ink)}
.review figcaption span{font-size:13.5px;color:var(--muted)}

/* Condition strip -------------------------------------------------------- */
/* Four portraits, one per city. Equal columns so no house reads as the important one, and
   fixed aspect so a row of phone photos does not go ragged. */
.cond-head{max-width:none;margin:clamp(48px,6vw,76px) 0 clamp(22px,3vw,32px)}
.cond-head h2{margin:0 0 12px}
.cond-head .lede{max-width:64ch;margin:0}
.cond-set{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.6vw,22px)}
.cond{margin:0;display:flex;flex-direction:column}
.cond img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;display:block;
  border-radius:var(--r);background:var(--line)}
.cond figcaption{margin-top:12px;font-size:14.5px;line-height:1.45;color:var(--muted)}
.cond figcaption b{display:block;color:var(--ink);font-weight:600;font-size:15.5px;
  margin-bottom:3px}
@media (max-width:900px){.cond-set{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){
  .cond-set{grid-template-columns:1fr;gap:26px}
  /* Deliberately NOT re-cropping to 4/3 here. These frames are natively 3:4, and forcing a
     landscape box on them with object-fit:cover discards 44% of the height, which is the exact
     silent crop that had to be undone across nineteen photos. One shape, everywhere. */
}

/* Divider between the two headline options and the two fallbacks. Deliberately not an h2:
   one section gets one h2, and a second heading here read as a second section. */
.opt-more{margin:42px auto 24px;text-align:center;max-width:52ch;
  font:600 17px/1.5 var(--sans);color:var(--muted)}