/* ══════════════════════════════════════════════════════════════════════════
   KANE BROOKS · WEB DESIGN SYSTEM (v2 · Claret on Bone)
   The single source of truth for kanebrooks.com. Re-built to carry the APPROVED
   print language of the Books, the side-pocket items, and the Corridor Report:
   light BONE ground, wine serif display, garnet HAIRLINES and keylines, mono
   letter-spaced labels, generous whitespace, editorial restraint. NO dark ink
   floods (the Corridor Report's own rule: "light Bone, garnet keyline, NO dark
   fill"). An editorial, print-quality site. Zero em-dashes in client copy.
   ══════════════════════════════════════════════════════════════════════════ */
:root{
  --bone:#EFE9E2; --paper:#f6f2ec;               /* bone ground + a slightly lifted card paper */
  --wine:#2b0715; --claret:#431026; --garnet:#8f0f45; --eclipse:#5A616C;
  --rule:rgba(43,7,21,.17); --rule-soft:rgba(43,7,21,.10); --garnet-soft:rgba(143,15,69,.30);
  --serif:'Iowan Old Style',Georgia,'Palatino Linotype','Book Antiqua',serif;
  --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Inter,Roboto,Helvetica,Arial,sans-serif;
  --mono:'SF Mono',Menlo,Consolas,'Liberation Mono',monospace;
  --wrap:1120px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans);color:var(--claret);background:var(--bone);-webkit-font-smoothing:antialiased;line-height:1.62}
a{color:inherit;text-decoration:none}
img,svg{display:block}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 32px}
.narrow{max-width:760px}

/* ── type utilities (from the print scaffold) ─────────────────────────────── */
.kicker{font-family:var(--mono);font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--garnet)}
.gr{height:1.5px;background:var(--garnet);width:52px;margin:20px 0}
.rule-hair{height:1px;background:var(--rule);width:100%}
.serif{font-family:var(--serif)}
.tabnums{font-variant-numeric:tabular-nums}
h1,h2,h3,h4{font-family:var(--serif);font-weight:400;color:var(--wine);letter-spacing:-.01em}
strong,b{font-weight:600;color:var(--wine)}
em{font-style:italic}
p{max-width:66ch}

/* ── header · light editorial masthead (bone, garnet hairline, NO wine flood) ── */
header{position:sticky;top:0;z-index:50;background:rgba(239,233,226,.93);backdrop-filter:saturate(1.1) blur(9px);
       border-bottom:1px solid var(--garnet-soft)}
.nav{display:flex;align-items:center;justify-content:space-between;height:74px}
.brand{display:flex;align-items:center;gap:12px}
.brand .wm{font-family:var(--serif);font-size:19px;letter-spacing:.24em;color:var(--wine)}
.menu{display:flex;align-items:center;gap:30px}
.menu a{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--eclipse);transition:color .2s}
.menu a:hover,.menu a[aria-current="page"]{color:var(--wine)}
.menu a[aria-current="page"]{border-bottom:1px solid var(--garnet);padding-bottom:3px}
.callbtn{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--wine);border:1px solid var(--garnet-soft);
         padding:9px 15px;border-radius:5px;transition:.2s}
.callbtn:hover{border-color:var(--garnet);background:rgba(143,15,69,.05)}
.navtoggle{display:none;background:none;border:0;color:var(--wine);font-size:26px;cursor:pointer}

/* ── buttons · restrained, hairline-first (no floods) ─────────────────────── */
.btn{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;padding:14px 26px;border-radius:6px;transition:.2s;display:inline-block}
.btn-solid{background:var(--garnet);color:#fff}
.btn-solid:hover{background:#a51652}
.btn-line{border:1px solid var(--garnet);color:var(--wine)}
.btn-line:hover{background:rgba(143,15,69,.06)}
.arrowlink{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--wine);
           border-bottom:1px solid var(--garnet);padding-bottom:4px;display:inline-block}

/* ── page hero · light, editorial (mirrors a report nameplate) ────────────── */
.phero{position:relative;background:var(--bone);overflow:hidden;padding:clamp(64px,8vw,104px) 0 clamp(52px,6vw,76px);
       border-bottom:1px solid var(--rule)}
.phero .wmk{position:absolute;right:2%;top:50%;transform:translateY(-50%);opacity:.05;pointer-events:none}
.phero .inner{position:relative;max-width:820px}
.phero h1{font-size:clamp(38px,6vw,72px);line-height:1.03;margin:18px 0 0}
.phero h1 em{font-style:italic;color:var(--garnet)}
.phero .lede{font-family:var(--serif);font-size:clamp(16px,2vw,21px);line-height:1.5;color:var(--claret);max-width:60ch;margin-top:22px}

/* ── section base ─────────────────────────────────────────────────────────── */
section{padding:clamp(60px,8vw,100px) 0}
.sec-head{max-width:720px;margin-bottom:clamp(34px,4vw,52px)}
.sec-head h2{font-size:clamp(28px,3.8vw,42px);line-height:1.14;margin:14px 0 14px}
.sec-head p{color:var(--eclipse);font-size:16.5px}
.band-top{border-top:1px solid var(--rule)}

/* ── cards · hairline (from the print .st / corridor data cards) ──────────── */
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.card{background:var(--paper);border:1px solid var(--rule);border-radius:10px;padding:32px 30px;position:relative;
      display:flex;flex-direction:column;transition:transform .22s,box-shadow .22s,border-color .22s}
.card:hover{transform:translateY(-3px);box-shadow:0 20px 44px rgba(43,7,21,.09);border-color:var(--garnet-soft)}
.card .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;color:var(--garnet);text-transform:uppercase}
.card h3{font-size:23px;margin:12px 0 10px;line-height:1.18}
.card p{color:var(--eclipse);font-size:15px;flex:1}
.card .go{margin-top:20px;align-self:flex-start}
.card .pill{position:absolute;top:20px;right:22px;font-family:var(--mono);font-size:9px;letter-spacing:.1em;
            color:var(--garnet);border:1px solid var(--garnet-soft);border-radius:20px;padding:4px 10px;text-transform:uppercase}

/* group label with trailing hairline (corridor colhd vibe) */
.groupname{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--garnet);
           margin:0 0 22px;padding-top:6px;display:flex;align-items:center;gap:16px}
.groupname:after{content:"";flex:1;height:1px;background:var(--rule)}
.groupname.mt{margin-top:clamp(44px,6vw,68px)}

/* ── stat / metric rows (corridor .mrow) ──────────────────────────────────── */
.metrics{max-width:840px}
.mrow{display:flex;gap:26px;padding:16px 0;border-bottom:1px solid var(--rule-soft);align-items:baseline}
.mrow:first-child{border-top:1.5px solid var(--garnet)}
.mrow .fig{font-family:var(--serif);font-size:34px;line-height:1;color:var(--wine);min-width:150px;font-variant-numeric:tabular-nums}
.mrow .m-body{flex:1}
.mrow .lb{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--eclipse);margin-bottom:6px}
.mrow .in{font-size:14px;line-height:1.5;color:var(--claret)}
.mrow .in b{color:var(--wine)}

/* ── convictions list (verbatim, from the Books' .conv) ───────────────────── */
.conv-list{max-width:840px}
.conv-item{padding:26px 0;border-bottom:1px solid var(--rule-soft)}
.conv-item:first-child{border-top:1.5px solid var(--garnet)}
.conv-item .n{font-family:var(--mono);font-size:11px;letter-spacing:.22em;color:var(--garnet);margin-bottom:9px}
.conv-item h3{font-size:23px;margin-bottom:11px;line-height:1.2}
.conv-item p{color:var(--eclipse);font-size:15.5px;line-height:1.66;max-width:72ch}

/* ── process phases (from the Milestone Sheet) ────────────────────────────── */
.phase-row{display:grid;grid-template-columns:auto 1fr;gap:22px;padding:22px 0;border-bottom:1px solid var(--rule-soft);align-items:baseline}
.phase-row:first-child{border-top:1.5px solid var(--garnet)}
.phase-row .pn{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--garnet);white-space:nowrap;padding-top:6px}
.phase-row h3{font-size:21px;margin-bottom:8px}
.phase-row p{color:var(--eclipse);font-size:14.5px;line-height:1.6;max-width:74ch}

/* ── pull-quote (print .pq: garnet left-border, italic serif, NO fill) ────── */
.pq{border-left:2px solid var(--garnet);padding:6px 0 6px 24px;font-family:var(--serif);font-style:italic;
    font-size:clamp(20px,2.6vw,28px);line-height:1.45;color:var(--wine);max-width:60ch}

/* ── stat chip row (county chips, hairline) ───────────────────────────────── */
.chips{display:flex;flex-wrap:wrap;gap:11px}
.chips span{font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--wine);
            border:1px solid var(--rule);border-radius:20px;padding:8px 16px}

/* ── form (light, hairline) ───────────────────────────────────────────────── */
.form label{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--eclipse);margin:0 0 7px}
.form input,.form textarea,.form select{width:100%;background:var(--paper);border:1px solid var(--rule);border-radius:8px;
  padding:13px 14px;color:var(--wine);font-family:var(--sans);font-size:15px;margin-bottom:18px}
.form input:focus,.form textarea:focus,.form select:focus{outline:none;border-color:var(--garnet)}
.form textarea{min-height:120px;resize:vertical}
.form button{background:var(--garnet);color:#fff;border:0;border-radius:8px;padding:15px 30px;font-family:var(--mono);
  font-size:12px;letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
.form button:hover{background:#a51652}
.contactline{display:flex;align-items:baseline;gap:16px;margin-bottom:16px;font-size:17px;color:var(--wine)}
.contactline .lbl{font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--garnet);width:64px;text-transform:uppercase;flex:none}

/* ── footer (KW compliant: DBA logo + ownership + Equal Housing) ──────────── */
footer{background:var(--bone);color:var(--eclipse);padding:clamp(48px,6vw,64px) 0 36px;border-top:2px solid var(--garnet)}
.foot-top{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:44px;padding-bottom:36px;border-bottom:1px solid var(--rule)}
.foot-brand .wm{font-family:var(--serif);font-size:21px;color:var(--wine);letter-spacing:.14em}
.foot-brand p{font-size:13.5px;margin-top:13px;max-width:40ch;color:var(--eclipse)}
.foot-col h4{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--garnet);margin-bottom:15px}
.foot-col a{display:block;font-size:14px;color:var(--eclipse);margin-bottom:10px}
.foot-col a:hover{color:var(--wine)}
.foot-legal{display:flex;flex-wrap:wrap;align-items:center;gap:26px;justify-content:space-between;padding-top:26px}
.foot-legal .complogos{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.foot-legal .complogos img{width:auto;display:block}
.foot-legal .complogos .fl-kw{height:60px}
.foot-legal .complogos .fl-realtor{height:56px}
.foot-legal .complogos .fl-mls{height:42px}
.foot-legal .complogos .fl-eho{height:60px}
.foot-legal .complogos .fl-div{width:1px;height:42px;background:var(--rule)}
.foot-legal .own{font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;color:var(--eclipse);max-width:40ch;line-height:1.6}
.copy{font-size:11.5px;color:var(--eclipse);opacity:.8;margin-top:22px;font-family:var(--mono);letter-spacing:.04em}

@media(max-width:900px){
  .menu{display:none}
  .navtoggle{display:block}
  .grid-2,.grid-3{grid-template-columns:1fr}
  .foot-top{grid-template-columns:1fr;gap:30px}
  .mrow{flex-direction:column;gap:8px}
  .mrow .fig{min-width:0}
}

/* ── Accessibility: honor the OS "reduce motion" setting (WCAG 2.3.3 / a real
   ADA consideration for real-estate sites). Neutralizes card/link hover motion
   and any transition, without changing layout. ── */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .card:hover,.arch-item:hover,.latest-card:hover,.tool-card:hover{transform:none !important}
}

/* ── Web3Forms success / error states (shared by all forms) ── */
.form-sent{border:1px solid var(--rule);border-radius:14px;padding:34px 30px;background:rgba(255,255,255,.35);text-align:center}
.form-sent .fs-mark{width:44px;height:44px;margin:0 auto 16px;border-radius:50%;background:var(--garnet);color:var(--bone);display:flex;align-items:center;justify-content:center;font-size:22px;line-height:1}
.form-sent p{font-family:var(--serif);font-size:18px;color:var(--wine);line-height:1.5;max-width:38ch;margin:0 auto}
.form-err{margin-top:12px;font-family:var(--mono);font-size:12.5px;letter-spacing:.02em;color:var(--garnet);line-height:1.55}