/* ═══════════════════════════════════════════════════════════════════════
   The property desk — /buying, /owners, the three island pages.

   Loads on top of portal.css and reuses its tokens, bands and type scale so
   the desk reads as part of the same site rather than as a bolted-on
   microsite. What is here is only the furniture the portal does not have.

   The one piece that is not decoration is .licstrip. South Carolina
   requires a licensee advertising real estate to identify the brokerage,
   and on a website that is satisfied by a link to the brokerage homepage.
   It sits directly under the nav on every page of this desk, above the
   fold, and it is styled to be read rather than to be skipped.
   ═══════════════════════════════════════════════════════════════════════ */

.deskpage .pbar.solid{
  position:sticky;top:0;background:#0B2430;color:#EAF2F6;
  border-bottom:1px solid rgba(255,255,255,.1);
}
.deskpage .pbar.solid .pbrand{color:#EAF2F6}
.deskpage .pbar.solid .pnav a{color:#CFE0E8;background:rgba(255,255,255,.08)}
.deskpage .pbar.solid .pnav a:hover{background:rgba(255,255,255,.18)}
.deskpage .pbar.solid .pnav a.on{background:var(--sea);color:#fff;border-color:transparent}

/* ── The identification South Carolina requires ────────────────────────── */

.licstrip{
  background:#F1EADA;border-bottom:1px solid var(--rule);
  padding:12px 0;font-size:13px;line-height:1.5;
}
.licstrip .wrap{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px}
.lic-b{color:var(--ink)}
.lic-b b{font-weight:800}
.lic-b a{color:var(--sea);font-weight:700;text-decoration:underline;
  text-underline-offset:3px}
.lic-o,.lic-t{color:var(--ink-3);font-size:12.5px}
.lic-t{color:var(--sea);font-weight:600}
.lic-n{
  color:var(--ink-3);font-size:12.5px;flex-basis:100%;
  padding-top:2px;border-top:1px dotted var(--rule);margin-top:2px;
}
@media (min-width:900px){
  .lic-n{flex-basis:auto;border-top:0;margin-left:auto;padding-top:0;text-align:right}
}

/* ── Desk hero ─────────────────────────────────────────────────────────── */

.hero-desk{padding-top:clamp(44px,5vw,76px);padding-bottom:clamp(36px,4vw,60px)}
.hero-desk h1{
  font-family:Fraunces,Georgia,serif;font-weight:900;
  font-size:clamp(36px,6.4vw,76px);line-height:1;letter-spacing:-.045em;
  margin:14px 0 24px;
}
.hero-desk h1 em{font-style:italic;color:var(--sea)}
.hero-desk .lede-big{
  font-size:clamp(17px,2vw,22px);line-height:1.5;color:var(--ink-2);
  max-width:46ch;margin:0 0 8px;
}
.hero-ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}

.btn{
  display:inline-block;padding:14px 26px;border-radius:8px;font-weight:700;
  font-family:inherit;font-size:15px;border:1px solid transparent;cursor:pointer;
  transition:transform .2s,box-shadow .2s,background .2s;
}
.btn:hover{transform:translateY(-2px)}
.btn.primary{background:var(--clay);color:#fff;
  box-shadow:0 10px 26px -14px rgba(194,86,47,.9)}
.btn.primary:hover{background:#A8431F}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--sand)}
.btn.big{padding:17px 34px;font-size:16px;margin-top:clamp(24px,3vw,36px)}

/* ── TLDR, sections, guide ─────────────────────────────────────────────── */

.tldr{
  font-size:clamp(15.5px,1.7vw,18px);line-height:1.62;color:var(--ink);
  max-width:66ch;margin:0 0 22px;padding:clamp(18px,2.2vw,26px) 0;
  border-top:2px solid var(--ink);border-bottom:1px solid var(--rule);
}
.tldr b{font-weight:800}

.gsec{
  font-family:Fraunces,Georgia,serif;font-weight:900;
  font-size:clamp(19px,2.1vw,25px);letter-spacing:-.025em;line-height:1.15;
  color:var(--ink);max-width:26ch;
  margin:clamp(34px,4vw,58px) 0 clamp(18px,2vw,26px);
  padding-top:clamp(20px,2.4vw,30px);border-top:1px solid var(--rule);
}
.guide{columns:2;column-gap:clamp(30px,5vw,68px);column-rule:1px solid var(--rule)}
.guide section{break-inside:avoid;margin-bottom:clamp(24px,3vw,38px)}
.guide h4{
  font-family:Fraunces,Georgia,serif;font-weight:800;
  font-size:clamp(16px,1.75vw,19px);letter-spacing:-.02em;line-height:1.2;
  margin:0 0 8px;color:var(--ink);
}
.guide p{color:var(--ink-2);font-size:14.5px;line-height:1.66;margin:0;
  overflow-wrap:anywhere}
.guide .src{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  font-size:11.5px;color:var(--ink-3);margin-top:10px;
}
.guide .tier{
  font-size:9.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  padding:3px 7px;border-radius:3px;
}
.t-gov {background:#DCE9EE;color:#0E2B38}
.t-brea{background:#E4EFE7;color:#1F5A3C}
.t-bank{background:#EAE3F1;color:#4A3566}
.t-firm{background:#F2EADA;color:#6A5320}

/* Where an entry admits an unresolved conflict. Louder than the citation,
   because "two government pages disagree and here is which" is worth more
   to a buyer than a footnote. */
.guide .caveat{
  margin-top:12px;padding:12px 14px;
  background:#FBF3E4;border-left:2px solid #C08A2E;border-radius:0 4px 4px 0;
  font-size:13.5px;line-height:1.6;color:#4A3A1C;
}
.guide .caveat b{
  display:block;font-size:10px;font-weight:800;letter-spacing:1.5px;
  text-transform:uppercase;color:#8A6415;margin-bottom:5px;
}

/* ── The ladder ────────────────────────────────────────────────────────── */

.rung{
  display:grid;grid-template-columns:clamp(56px,7vw,104px) minmax(0,1fr) clamp(220px,26vw,340px);
  gap:clamp(16px,3vw,40px);align-items:start;
  padding:clamp(22px,3vw,34px) 0;border-top:1px solid var(--rule);
}
.rung .no{
  font-family:Fraunces,Georgia,serif;font-weight:900;
  font-size:clamp(28px,4vw,52px);color:var(--rule);line-height:.9;
}
.rung h3{font-family:Fraunces,Georgia,serif;font-weight:800;
  font-size:clamp(18px,2vw,24px);letter-spacing:-.025em;margin-bottom:9px}
.rung p{color:var(--ink-2);font-size:14.5px;line-height:1.66;margin:0}
.rung .law{
  background:var(--sand-2);border-left:2px solid var(--sea);
  padding:15px 17px;border-radius:0 5px 5px 0;
  font-size:13.5px;line-height:1.6;color:var(--ink-2);
}
.rung .law b{display:block;font-size:10px;font-weight:800;letter-spacing:1.4px;
  text-transform:uppercase;color:var(--sea);margin-bottom:6px}
@media (max-width:820px){ .rung{grid-template-columns:1fr;gap:14px} }

/* ── Calculator ────────────────────────────────────────────────────────── */

.calc{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(28px,4vw,60px);align-items:start}
@media (max-width:860px){ .calc{grid-template-columns:minmax(0,1fr)} }
.calc label{font-size:10.5px;font-weight:800;letter-spacing:1.6px;
  text-transform:uppercase;color:var(--ink-3);display:block;margin-bottom:10px}
.calc-price{display:flex;align-items:baseline;gap:6px;
  border-bottom:2px solid var(--ink);padding-bottom:8px}
.calc-price span{font-family:Fraunces,serif;font-size:28px;color:var(--ink-3)}
.calc-price input{
  border:0;background:none;outline:none;width:100%;
  font-family:Fraunces,Georgia,serif;font-weight:900;
  font-size:clamp(30px,4.4vw,50px);letter-spacing:-.04em;color:var(--ink);
}
#c-range{width:100%;margin-top:18px;accent-color:var(--sea)}
.calc-opt{margin-top:30px}
.calc-opt.inline{margin-top:18px;padding-top:18px;border-top:1px solid var(--rule)}
.calc-opt .ol{font-size:10.5px;font-weight:800;letter-spacing:1.6px;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:12px}
.calc-opt .oh{font-size:13px;color:var(--ink-3);line-height:1.58;margin-top:14px;
  max-width:44ch}
.pick{display:flex;flex-wrap:wrap;gap:8px}
.pick button{
  padding:10px 16px;border-radius:999px;border:1px solid var(--rule);
  background:#fff;font:inherit;font-size:13.5px;font-weight:600;
  color:var(--ink-2);cursor:pointer;transition:all .18s;
}
.pick button:hover{border-color:var(--sea);color:var(--ink)}
.pick button[aria-pressed="true"]{background:var(--ink);color:var(--sand);
  border-color:var(--ink)}

.crow{display:flex;justify-content:space-between;align-items:baseline;gap:20px;
  padding:14px 0;border-bottom:1px solid var(--rule)}
.crow span{font-size:15px;color:var(--ink)}
.crow small{display:block;font-size:12.5px;color:var(--ink-3);line-height:1.55;
  margin-top:5px;max-width:52ch}
.crow b{font-family:Fraunces,serif;font-weight:800;font-size:19px;
  white-space:nowrap;font-variant-numeric:tabular-nums}
.crow.head{border-bottom:2px solid var(--ink);padding-top:0}
.crow.head span{font-size:10.5px;font-weight:800;letter-spacing:1.6px;
  text-transform:uppercase;color:var(--sea)}
.crow.head b{font-size:clamp(26px,3.4vw,38px)}
.crow.total{border-bottom:0;border-top:2px solid var(--ink);margin-top:8px}
.crow.total b{font-size:clamp(24px,3vw,34px)}
.crow.pct{border-bottom:0;padding-top:4px}
.crow.pct b{font-size:15px;color:var(--ink-3)}
/* When the honest answer is "we will not print a rate", the row has to look
   deliberate rather than broken. */
#c-rptrow.unpriced b{font-family:Archivo,sans-serif;font-size:13px;
  font-weight:700;color:#8A6415}
.rpt-note{font-size:12.5px;line-height:1.6;color:var(--ink-3);margin:2px 0 0;
  max-width:58ch}
.calc-fine{font-size:12px;line-height:1.6;color:var(--ink-3);margin-top:20px;
  padding-top:16px;border-top:1px solid var(--rule)}

/* ── Islands ───────────────────────────────────────────────────────────── */

.isle-grid{display:grid;gap:clamp(14px,1.8vw,22px);
  grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr))}
.isle-card{
  display:block;padding:clamp(20px,2.4vw,28px);background:#fff;
  border:1px solid var(--rule);border-radius:9px;
  transition:transform .24s,box-shadow .24s,border-color .24s;
}
.isle-card:hover{transform:translateY(-3px);border-color:var(--sea);
  box-shadow:0 16px 38px -22px rgba(11,36,48,.42)}
.isle-card h3{font-family:Fraunces,serif;font-weight:900;font-size:22px;
  letter-spacing:-.03em;margin-bottom:4px}
.isle-sub{font-size:12px;color:var(--ink-3);margin-bottom:12px}
.isle-card p{font-size:14px;line-height:1.6;color:var(--ink-2);margin:0 0 16px}
.isle-card .more{font-size:13px;font-weight:700;color:var(--sea)}

.isle-page-cols{display:grid;gap:clamp(22px,3vw,40px);
  grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));
  margin-top:clamp(26px,3vw,40px)}
.isle-page-cols p{font-size:15px;line-height:1.68;color:var(--ink-2);margin:8px 0 0}
.isle-page-cols .warnbox{padding:clamp(18px,2.2vw,24px);border-radius:5px;
  background:#FBF3E4;border-left:3px solid #C08A2E}
.isle-page-cols .warnbox p{color:#4A3A1C}

.askgrid{columns:2;column-gap:clamp(30px,5vw,68px);
  column-rule:1px solid var(--rule)}
.asked{break-inside:avoid;margin-bottom:clamp(24px,3vw,36px)}
.asked h3{font-family:Fraunces,serif;font-weight:800;
  font-size:clamp(16px,1.8vw,19.5px);letter-spacing:-.02em;line-height:1.2;
  margin:0 0 8px}
.asked p{font-size:14.5px;line-height:1.66;color:var(--ink-2);margin:0}

/* ── Owners ────────────────────────────────────────────────────────────── */

.sell-grid{columns:2;column-gap:clamp(30px,5vw,68px);
  column-rule:1px solid var(--rule)}
.sell-item{break-inside:avoid;margin-bottom:clamp(24px,3vw,36px)}
.sell-item h4{font-family:Fraunces,serif;font-weight:800;
  font-size:clamp(16px,1.75vw,19px);letter-spacing:-.02em;line-height:1.2;
  margin:0 0 8px}
.sell-item p{font-size:14.5px;line-height:1.66;color:var(--ink-2);margin:0}

.stopnote{margin-top:20px;padding:16px 18px;border-radius:5px;
  background:#FBF3E4;border-left:3px solid #C08A2E;max-width:60ch}
.stopnote.big{margin-top:clamp(30px,4vw,46px);padding:clamp(20px,2.4vw,28px)}
.stopnote b{display:block;font-family:Fraunces,serif;font-weight:800;
  font-size:17px;color:#5A4212;margin-bottom:8px;letter-spacing:-.015em}
.stopnote p{font-size:13.5px;line-height:1.62;color:#4A3A1C;margin:0}

.listgrid{display:grid;gap:clamp(16px,2vw,26px);
  grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr))}
.listcard{padding-top:20px;border-top:2px solid var(--ink)}
.listcard .n{font-family:Fraunces,serif;font-weight:900;font-size:13px;
  color:var(--sea);letter-spacing:.1em;margin-bottom:10px}
.listcard h4{font-family:Fraunces,serif;font-weight:800;font-size:18px;
  letter-spacing:-.02em;margin:0 0 8px}
.listcard p{font-size:14px;line-height:1.62;color:var(--ink-2);margin:0}
.why-free{margin:clamp(26px,3vw,40px) 0 0;font-size:14px;color:var(--ink-3);
  max-width:56ch;font-style:italic}

/* ── Ask block ─────────────────────────────────────────────────────────── */

.ask{display:grid;grid-template-columns:minmax(0,1fr) clamp(240px,30vw,380px);
  gap:clamp(26px,5vw,64px);align-items:center}
@media (max-width:820px){ .ask{grid-template-columns:minmax(0,1fr)} }
.ask h2,.ask h3{font-family:Fraunces,serif;font-weight:900;
  font-size:clamp(24px,3.4vw,40px);line-height:1.05;letter-spacing:-.035em;
  margin-bottom:14px}
.ask h3{font-size:clamp(20px,2.4vw,28px)}
.ask p{color:var(--ink-2);font-size:15.5px;line-height:1.66;max-width:54ch;margin:0}
.ask a{color:var(--sea);text-decoration:underline;text-underline-offset:3px}
.line{
  display:block;padding:clamp(18px,2.2vw,26px);border:1px solid var(--ink);
  border-radius:8px;font-family:Fraunces,serif;font-weight:800;
  font-size:clamp(15px,1.7vw,19px);letter-spacing:-.02em;color:var(--ink);
  text-decoration:none;transition:background .2s,color .2s,transform .2s;
  overflow-wrap:anywhere;
}
.line:hover{background:var(--ink);color:var(--sand);transform:translateY(-2px)}
.line small{display:block;font-family:Archivo,sans-serif;font-weight:600;
  font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:8px}
.line:hover small{color:#9FB8C4}

/* ── Disclosure ────────────────────────────────────────────────────────── */

.disc h2{font-family:Fraunces,serif;font-weight:900;
  font-size:clamp(22px,3vw,34px);letter-spacing:-.035em;
  margin-bottom:clamp(22px,3vw,34px)}
.disc-cols{display:grid;gap:clamp(20px,2.6vw,34px);
  grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr))}
.disc-cols h4{font-family:Fraunces,serif;font-weight:800;font-size:16.5px;
  letter-spacing:-.02em;margin:0 0 8px;color:var(--ink)}
.disc-cols p{font-size:13.5px;line-height:1.64;color:var(--ink-2);margin:0}
.disc-cols a{color:var(--sea);text-decoration:underline;text-underline-offset:3px}
.disc-fine{margin:clamp(24px,3vw,36px) 0 0;padding-top:18px;
  border-top:1px solid var(--rule);font-size:12.5px;line-height:1.62;
  color:var(--ink-3);max-width:80ch}

@media (max-width:820px){
  .guide,.askgrid,.sell-grid{columns:1}
  .gsec{max-width:none}
}