/* =========================================================
   The Property Physician — thepropertyphysician.com
   Minimal, high-whitespace layout in Oscar's brand colors.
   Fraunces stays on headlines. Inter everywhere else.
   ========================================================= */

:root{
  --navy:#1C2B4A;
  --teal:#3E8E8C;
  --copper:#C08A5A;
  --cream:#F6F3EE;
  --charcoal:#2B2B2B;

  --paper:#FFFFFF;        /* primary surface */
  --paper-2:#FAF8F5;      /* warm off-white band */
  --ink:#1A1A1A;          /* body text */
  --ink-2:#6B6762;        /* secondary text */
  --hair:rgba(28,43,74,.10);
  --hair-dark:rgba(255,255,255,.14);

  --max:1120px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* language toggle */
html[data-lang="en"] .lang-es{display:none}
html[data-lang="es"] .lang-en{display:none}

.wrap{max-width:var(--max);margin:0 auto;padding:0 32px}
.narrow{max-width:760px}
.center{text-align:center}

/* ---------- type scale ---------- */
h1,h2,h3,.serif{
  font-family:Fraunces,Georgia,serif;
  font-weight:600;
  line-height:1.08;
  letter-spacing:-.022em;
  color:var(--navy);
  margin:0;
}
h1{font-size:clamp(40px,6.2vw,76px)}
h2{font-size:clamp(31px,4.1vw,50px);line-height:1.1}
h3{font-size:21px;line-height:1.3;letter-spacing:-.012em}

p{margin:0 0 20px}
a{color:var(--teal)}

.eyebrow{
  font-size:12px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--copper);margin:0 0 16px;
}
.lede{
  font-size:clamp(19px,2.1vw,23px);line-height:1.55;color:var(--ink-2);
  margin:22px 0 0;font-weight:400;
}
.sub{font-size:16.5px;color:var(--ink-2)}

/* text link with chevron */
.tlink{
  display:inline-flex;align-items:center;gap:5px;
  font-size:16.5px;font-weight:500;color:var(--teal);text-decoration:none;
}
.tlink::after{content:"\203A";font-size:19px;line-height:1;transition:transform .25s var(--ease)}
.tlink:hover::after{transform:translateX(3px)}

/* ---------- section rhythm ---------- */
section{padding:120px 0}
section.tight{padding:88px 0}
.band{background:var(--paper-2)}

/* ---------- header ---------- */
header{
  position:sticky;top:0;z-index:60;
  background:rgba(255,255,255,.72);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--hair);
}
.bar{display:flex;align-items:center;gap:26px;height:52px}
.brand{
  font-family:Fraunces,Georgia,serif;font-size:16px;font-weight:600;
  color:var(--navy);text-decoration:none;letter-spacing:-.01em;margin-right:auto;
  white-space:nowrap;
}
.brand span{color:var(--copper)}
nav a{
  font-size:13px;font-weight:450;color:var(--ink);text-decoration:none;
  margin-left:24px;letter-spacing:.005em;opacity:.82;transition:opacity .2s;
}
nav a:hover{opacity:1}
nav a[aria-current="page"]{opacity:1;color:var(--navy);font-weight:500}
.langbtns{display:flex;gap:2px;margin-left:26px}
.langbtns button{
  font:inherit;font-size:11.5px;font-weight:600;letter-spacing:.06em;
  background:none;border:0;color:var(--ink-2);padding:5px 8px;border-radius:5px;cursor:pointer;
}
.langbtns button[aria-pressed="true"]{background:var(--navy);color:#fff}

/* ---------- mobile menu button ----------
   Hidden above 760px. The word "Menu"/"Menú" is in the HTML for screen
   readers in both languages; the three bars are drawn here. */
.menubtn{
  display:none;align-items:center;justify-content:center;
  width:40px;height:40px;margin-right:-9px;
  background:none;border:0;padding:0;cursor:pointer;
}
.vh{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.bars{
  position:relative;display:block;width:19px;height:2px;border-radius:2px;
  background:var(--navy);transition:background .18s var(--ease);
}
.bars::before,.bars::after{
  content:"";position:absolute;left:0;width:19px;height:2px;border-radius:2px;
  background:var(--navy);transition:transform .26s var(--ease);
}
.bars::before{top:-6px}
.bars::after{top:6px}
header.open .bars{background:transparent}
header.open .bars::before{transform:translateY(6px) rotate(45deg)}
header.open .bars::after{transform:translateY(-6px) rotate(-45deg)}

/* ---------- buttons ---------- */
.ctas{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.center .ctas{justify-content:center}
.btn{
  display:inline-block;text-decoration:none;font-size:15.5px;font-weight:500;
  padding:13px 26px;border-radius:980px;transition:all .22s var(--ease);
  border:1px solid transparent;white-space:nowrap;
}
.btn-primary{background:var(--navy);color:#fff}
.btn-primary:hover{background:#2b3e63;transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--navy);border-color:var(--hair)}
.btn-ghost:hover{border-color:var(--navy)}
.on-dark .btn-primary{background:#fff;color:var(--navy)}
.on-dark .btn-primary:hover{background:var(--cream)}
.on-dark .btn-ghost{color:#fff;border-color:var(--hair-dark)}
.on-dark .btn-ghost:hover{border-color:#fff}

/* ---------- hero ---------- */
.hero{padding:96px 0 0;text-align:center}
.hero .kicker{
  font-size:12.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--copper);margin:0 0 22px;
}
.hero h1{max-width:16ch;margin:0 auto}
.hero .lede{max-width:56ch;margin:28px auto 0}
.hero .ctas{margin-top:38px}
.phrase{
  font-family:Fraunces,Georgia,serif;font-size:clamp(19px,2.2vw,24px);
  color:var(--navy);margin:46px auto 0;max-width:30ch;line-height:1.35;
}
.phrase cite{display:block;font-family:Inter,sans-serif;font-size:13px;font-style:normal;
  font-weight:500;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-2);margin-top:14px}

/* full-bleed image band */
.bleed{margin-top:76px;height:clamp(280px,46vw,520px);overflow:hidden;position:relative}
.bleed img{width:100%;height:100%;object-fit:cover;display:block}
.bleed::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(28,43,74,.22),rgba(28,43,74,0) 42%);
}

/* portrait */
.portrait{
  width:168px;height:168px;border-radius:50%;object-fit:cover;display:block;margin:0 auto 34px;
  box-shadow:0 18px 50px rgba(28,43,74,.16);
}

/* ---------- stats ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;text-align:center}
.stats b{
  display:block;font-family:Fraunces,Georgia,serif;font-weight:600;
  font-size:clamp(34px,4.4vw,52px);color:var(--navy);letter-spacing:-.025em;line-height:1;
}
.stats span{display:block;font-size:14px;color:var(--ink-2);margin-top:12px;line-height:1.45}

/* ---------- statement ---------- */
.statement{
  font-family:Fraunces,Georgia,serif;font-weight:600;
  font-size:clamp(26px,3.5vw,42px);line-height:1.22;letter-spacing:-.02em;
  color:var(--navy);max-width:20ch;margin:0 auto 40px;text-align:center;
}
.prose p{font-size:17.5px;line-height:1.72;color:#3A3A3A}
.prose h3{margin:44px 0 12px}

/* ---------- cards ---------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:56px}
.card{
  background:var(--cream);border-radius:20px;padding:34px 30px;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.card:hover{transform:translateY(-4px);box-shadow:0 20px 44px rgba(28,43,74,.10)}
.card h3{margin-bottom:12px}
.card p{font-size:15.5px;line-height:1.62;color:#4A4642;margin:0}

/* ---------- the dark section ---------- */
.dark{background:var(--navy);color:#fff;padding:128px 0}
.dark h2,.dark .statement{color:#fff}
.dark .eyebrow{color:var(--copper)}
.dark p{color:rgba(255,255,255,.72)}

.spec{width:100%;border-collapse:collapse;margin-top:54px;text-align:left}
.spec caption{
  caption-side:bottom;text-align:left;font-size:12.5px;line-height:1.6;
  color:rgba(255,255,255,.5);padding-top:24px;
}
.spec th{
  font-size:11.5px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;
  color:rgba(255,255,255,.5);padding:0 14px 14px 0;border-bottom:1px solid var(--hair-dark);
}
.spec td{
  padding:22px 14px 22px 0;border-bottom:1px solid var(--hair-dark);
  font-size:15.5px;vertical-align:top;color:rgba(255,255,255,.80);
}
.spec td:first-child{
  font-family:Fraunces,Georgia,serif;font-size:19px;font-weight:600;color:#fff;
  letter-spacing:-.01em;white-space:nowrap;
}
.spec td.num{white-space:nowrap;color:#fff;font-variant-numeric:tabular-nums}
.spec td em{display:block;font-style:normal;font-size:12.5px;color:rgba(255,255,255,.45);margin-top:5px}
.spec tr:last-child td{border-bottom:0}

/* ---------- quotes ---------- */
.quotes{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:56px}
.quote{background:var(--paper-2);border-radius:20px;padding:36px 34px}
.quote p{
  font-family:Fraunces,Georgia,serif;font-size:18.5px;line-height:1.5;
  color:var(--navy);margin:0 0 18px;letter-spacing:-.008em;
}
.quote footer{font-size:13.5px;font-weight:500;color:var(--ink-2)}
.quote footer b{color:var(--teal);font-weight:600}

/* ---------- client photo gallery ----------
   Deliberately plain: one ratio for every frame, wide gutters, no drop
   shadows, no borders, no badges, no overlaid text. The only motion is a
   slow 1.03 push inside a clipped frame. Restraint is what keeps a wall of
   phone photos from reading as a collage.                                */
.gallery{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:52px 28px;margin-top:64px;
}
.shot{margin:0}
.shot .frame{
  border-radius:18px;overflow:hidden;background:var(--paper-2);
  aspect-ratio:4/5;
}
.shot img{
  display:block;width:100%;height:100%;object-fit:cover;
  transform:scale(1.001);transition:transform 1.1s var(--ease);
}
.shot:hover img{transform:scale(1.035)}
.shot figcaption{
  margin-top:17px;font-size:13.5px;line-height:1.55;color:var(--ink-2);
  letter-spacing:.004em;
}
.shot figcaption b{display:block;font-weight:600;color:var(--navy);margin-bottom:2px}

/* a single photo running the full measure, used once as a breath */
.gallery.two{grid-template-columns:repeat(2,1fr);gap:56px 32px}

/* ---------- accordion ---------- */
.faq{margin-top:48px;border-top:1px solid var(--hair)}
.faq details{border-bottom:1px solid var(--hair)}
.faq summary{
  list-style:none;cursor:pointer;padding:26px 44px 26px 0;position:relative;
  font-size:18px;font-weight:500;color:var(--navy);line-height:1.4;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:6px;top:50%;width:13px;height:13px;
  margin-top:-7px;
  background:
    linear-gradient(var(--teal),var(--teal)) center/13px 1.6px no-repeat,
    linear-gradient(var(--teal),var(--teal)) center/1.6px 13px no-repeat;
  transition:transform .3s var(--ease);
}
.faq details[open] summary::after{transform:rotate(135deg)}
.faq .answer{padding:0 56px 30px 0}
.faq .answer p{font-size:16.5px;line-height:1.7;color:#4A4642;margin:0 0 14px}
.faq .answer p:last-child{margin:0}

/* ---------- contact detail grid ---------- */
.detail{
  display:grid;grid-template-columns:repeat(3,1fr);gap:34px 28px;margin-top:64px;
  padding-top:44px;border-top:1px solid var(--hair);text-align:left;
}
.detail b{
  display:block;font-size:11.5px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;
  color:var(--copper);margin-bottom:9px;
}
.detail div{font-size:15px;line-height:1.65;color:#4A4642}
.detail a{color:var(--navy);text-decoration:none;border-bottom:1px solid var(--hair)}
.detail a:hover{border-bottom-color:var(--navy)}

/* ---------- footer ---------- */
footer.site{background:var(--paper-2);padding:52px 0 64px;border-top:1px solid var(--hair)}
footer.site p{font-size:12.5px;line-height:1.75;color:var(--ink-2);margin:0 0 14px}
footer.site a{color:var(--ink-2);text-decoration:none;border-bottom:1px solid var(--hair)}
footer.site a:hover{color:var(--navy);border-bottom-color:var(--navy)}
footer.site strong{color:var(--navy)}
footer.site .legal{margin-top:26px;padding-top:22px;border-top:1px solid var(--hair)}
footer.site .legal p{font-size:11.5px;color:#8A857F}

/* ---------- motion ----------
   Content is visible by default. The reveal only switches on when
   JavaScript adds .js-motion, so a crawler, an AI assistant, or a
   browser with JS off always sees the whole page.                */
.js-motion .reveal{opacity:0;transform:translateY(26px)}
.js-motion .reveal.in{opacity:1;transform:none;transition:opacity .75s var(--ease),transform .75s var(--ease)}
@media (prefers-reduced-motion:reduce){
  .js-motion .reveal{opacity:1;transform:none}
  html{scroll-behavior:auto}
}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .cards{grid-template-columns:1fr 1fr}
  .detail{grid-template-columns:1fr 1fr}
  .gallery{grid-template-columns:repeat(2,1fr);gap:44px 24px}
}
@media (max-width:760px){
  .wrap{padding:0 22px}
  section{padding:76px 0}
  .dark{padding:84px 0}
  .hero{padding:60px 0 0}
  .cards,.quotes,.detail{grid-template-columns:1fr}
  .gallery,.gallery.two{grid-template-columns:1fr;gap:40px}
  .stats{grid-template-columns:1fr 1fr;gap:34px 20px}
  /* three things share a 52px bar on a phone now, so tighten it and let the
     brand be the one that gives way rather than overflowing. */
  .bar{gap:14px}
  .brand{font-size:15px;min-width:0;overflow:hidden;text-overflow:ellipsis}
  .langbtns{margin-left:0;flex:none}
  .menubtn{flex:none}
  /* the nav becomes a tap-to-open panel under the bar. It stays in the HTML
     either way, so a crawler and a JS-off browser still see all eight links. */
  .menubtn{display:flex}
  nav{
    display:none;position:absolute;left:0;right:0;top:100%;
    background:rgba(255,255,255,.97);
    backdrop-filter:saturate(180%) blur(20px);
    -webkit-backdrop-filter:saturate(180%) blur(20px);
    border-bottom:1px solid var(--hair);
    box-shadow:0 18px 40px rgba(28,43,74,.08);
    padding:4px 22px 16px;
    max-height:calc(100vh - 53px);overflow-y:auto;
  }
  header.open nav{display:block}
  nav > span{display:block}
  nav a{
    display:block;margin:0;padding:15px 2px;font-size:17px;font-weight:450;
    opacity:1;border-bottom:1px solid var(--hair);
  }
  nav a:last-child{border-bottom:0}
  nav a[aria-current="page"]{color:var(--navy);font-weight:600}
  .spec td:first-child{white-space:normal}
  .spec th:nth-child(4),.spec td:nth-child(4){display:none}
  .faq summary{font-size:16.5px}
}
@media (max-width:430px){
  /* small phones: drop the tail so the bar reads cleanly as "Oscar Morales"
     rather than truncating mid-word. The full brand is in the title, the
     hero, and the footer. */
  .brand span{display:none}
}

/* =========================================================
   INNER PAGES
   The home page sets the vocabulary above. Everything below
   carries it onto the blog, the sold-homes page and the
   search page, so no page on the site looks like a visitor
   wandered into a different website.
   ========================================================= */

/* ---------- legacy button aliases ----------
   The inner pages were written against .btn-solid / .btn-outline.
   Rather than touch every file, the old names inherit the new shapes. */
.btn-solid{background:var(--navy);color:#fff}
.btn-solid:hover{background:#2b3e63;transform:translateY(-1px)}
.btn-outline{background:transparent;color:var(--navy);border-color:var(--hair)}
.btn-outline:hover{border-color:var(--navy)}
.on-dark .btn-solid{background:#fff;color:var(--navy)}
.on-dark .btn-outline{color:#fff;border-color:var(--hair-dark)}

/* ---------- breadcrumbs ---------- */
.crumbs{
  font-size:12.5px;color:var(--ink-2);padding:26px 0 0;letter-spacing:.01em;
}
.crumbs a{color:var(--ink-2);text-decoration:none;border-bottom:1px solid var(--hair)}
.crumbs a:hover{color:var(--navy);border-bottom-color:var(--navy)}

/* ---------- page header ----------
   The inner-page answer to the home page hero: same air, smaller voice. */
.pagehead{padding:64px 0 0;text-align:center}
.pagehead .kicker{
  font-size:12.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--copper);margin:0 0 22px;
}
.pagehead h1{font-size:clamp(34px,5vw,60px);max-width:19ch;margin:0 auto}
.pagehead p{
  font-size:clamp(18px,1.9vw,21px);line-height:1.58;color:var(--ink-2);
  max-width:60ch;margin:26px auto 0;
}
.pagehead .meta{
  font-size:13px;color:var(--ink-2);margin-top:30px;letter-spacing:.01em;
}
.pagehead .meta a{color:var(--teal);text-decoration:none}
.pagehead .meta a:hover{text-decoration:underline}

/* ---------- long-form article ---------- */
article.post{max-width:none;margin:0;padding:78px 0 0}
article.post .lede{
  font-size:clamp(19px,2vw,22px);line-height:1.6;color:var(--ink-2);
  margin:0 0 42px;
}
article.post h2{
  font-size:clamp(26px,3.1vw,36px);margin:72px 0 18px;letter-spacing:-.018em;
}
article.post h3{margin:48px 0 12px}
article.post p{font-size:17.5px;line-height:1.75;color:#3A3A3A;margin:0 0 22px}
article.post ul,article.post ol{margin:0 0 24px;padding-left:22px}
article.post li{font-size:17.5px;line-height:1.75;color:#3A3A3A;margin-bottom:10px}

/* a sentence lifted out of the flow */
.pull{
  font-family:Fraunces,Georgia,serif;font-size:clamp(21px,2.5vw,27px);
  line-height:1.38;letter-spacing:-.015em;color:var(--navy);
  margin:52px 0;padding-left:28px;border-left:2px solid var(--copper);
}
.pull b{display:block;font-size:13px;font-family:Inter,sans-serif;font-weight:500;
  letter-spacing:.07em;text-transform:uppercase;color:var(--ink-2);margin-top:16px}

/* the aside that carries a caveat */
.note{
  background:var(--cream);border-radius:18px;padding:30px 32px;margin:48px 0;
}
.note p{font-size:16px;line-height:1.68;margin:0 0 12px;color:#4A4642}
.note p:last-child{margin:0}
.note b{
  display:block;font-size:11.5px;font-weight:600;letter-spacing:.11em;
  text-transform:uppercase;color:var(--copper);margin-bottom:11px;
}

/* where a number came from */
.sourced{
  font-size:12.5px;line-height:1.65;color:#8A857F;margin:44px 0 0;
  padding-top:22px;border-top:1px solid var(--hair);
}
.sourced a{color:#8A857F}

/* ---------- the IDX search slot on /listings/ ----------
   A frame for the MLS search embed, so the vendor's widget lands
   inside this site's design instead of floating next to it. The
   frame is deliberately plain: an IDX widget brings its own buttons,
   inputs and cards, and anything decorative here would fight them.
   min-height keeps the page from collapsing while the embed loads
   (most IDX scripts are async and paint late), and the negative
   side margins let the search run wider than body copy on desktop
   while sitting flush to the screen edge on a phone, which is how
   a results grid wants to behave. */
.idxslot{
  background:var(--paper-2);border:1px solid var(--hair);border-radius:24px;
  padding:34px;margin:14px 0 0;min-height:320px;
}
/* The interim message that sits in the slot until the feed is
   connected. Delete this block along with .idxnote's markup when the
   embed code goes in — nothing else references it. */
.idxnote{
  max-width:52ch;margin:0 auto;text-align:center;
  font-size:15.5px;line-height:1.7;color:var(--ink-2);
  padding:46px 0;
}
.idxnote strong{color:var(--navy)}
.idxnote a{color:var(--teal)}
@media (max-width:760px){
  .idxslot{
    padding:20px 16px;border-radius:16px;
    margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
    border-left:0;border-right:0;
  }
  .idxnote{padding:28px 4px}
}

/* ---------- end-of-page call to action ---------- */
.endcta{
  background:var(--paper-2);border-radius:24px;padding:58px 48px;
  margin:86px 0 110px;text-align:center;
}
.endcta h3{font-size:clamp(24px,3vw,34px);margin:0 0 16px;letter-spacing:-.018em}
.endcta p{font-size:17px;line-height:1.65;color:var(--ink-2);max-width:52ch;margin:0 auto 30px}
.endcta .ctas{justify-content:center}

/* ---------- blog index ---------- */
.postlist{list-style:none;margin:72px 0 0;padding:0;border-top:1px solid var(--hair)}
.postlist li{padding:42px 0;border-bottom:1px solid var(--hair)}
.postlist .tag{
  font-size:11.5px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;
  color:var(--copper);display:block;margin-bottom:13px;
}
.postlist h2{font-size:clamp(23px,2.6vw,31px);line-height:1.22;margin:0 0 14px}
.postlist h2 a{color:var(--navy);text-decoration:none}
.postlist h2 a:hover{color:var(--teal)}
.postlist p{font-size:16.5px;line-height:1.68;color:var(--ink-2);margin:0 0 16px;max-width:66ch}
.postlist .when{font-size:12.5px;color:#8A857F;letter-spacing:.01em}
.readon{
  display:inline-flex;align-items:center;gap:5px;
  font-size:15.5px;font-weight:500;color:var(--teal);text-decoration:none;
}
.readon::after{content:"\203A";font-size:19px;line-height:1;transition:transform .25s var(--ease)}
.readon:hover::after{transform:translateX(3px)}

/* ---------- sold-homes case studies ---------- */
.proof{padding:72px 0 0}
.proof ul{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(4,1fr);gap:28px;text-align:center;
}
.proof b{
  display:block;font-family:Fraunces,Georgia,serif;font-weight:600;
  font-size:clamp(32px,4.2vw,48px);color:var(--navy);letter-spacing:-.025em;line-height:1;
}
.proof span{display:block;font-size:14px;color:var(--ink-2);margin-top:12px;line-height:1.45}

.case{
  padding:54px 0;border-bottom:1px solid var(--hair);
}
.case:last-of-type{border-bottom:0}
.case .casehead .tag{
  font-size:11.5px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;
  color:var(--copper);display:block;margin-bottom:13px;
}
.case .casehead h3{font-size:clamp(22px,2.5vw,30px);line-height:1.24;margin:0 0 22px}
.case .casebody p{font-size:17px;line-height:1.72;color:#3A3A3A;margin:0 0 20px}
.case dl{
  display:grid;grid-template-columns:repeat(3,1fr);gap:26px;
  margin:32px 0;padding:30px 0;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);
}
.case dt{
  font-size:11.5px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;
  color:var(--copper);margin-bottom:8px;
}
.case dd{
  margin:0;font-family:Fraunces,Georgia,serif;font-size:21px;font-weight:600;
  color:var(--navy);letter-spacing:-.012em;line-height:1.3;
}
.case blockquote{
  margin:30px 0 0;padding:28px 30px;background:var(--paper-2);border-radius:18px;
}
.case blockquote p{
  font-family:Fraunces,Georgia,serif;font-size:18px;line-height:1.5;
  color:var(--navy);margin:0 0 14px;letter-spacing:-.008em;
}
.case blockquote footer{font-size:13.5px;font-weight:500;color:var(--ink-2)}
.case blockquote footer b{color:var(--teal);font-weight:600}

/* listing photography grid (distinct from the client-photo .gallery) */
.photogrid .shots{
  display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:56px;
}
.photogrid figure{margin:0;border-radius:18px;overflow:hidden;background:var(--paper-2);aspect-ratio:3/2}
.photogrid img{
  display:block;width:100%;height:100%;object-fit:cover;
  transform:scale(1.001);transition:transform 1.1s var(--ease);
}
.photogrid figure:hover img{transform:scale(1.04)}
.photogrid .shots figure:first-child{grid-column:span 2;aspect-ratio:3/2}
.photoslot{
  background:var(--cream);border-radius:18px;padding:28px 30px;margin-top:34px;
}
.photoslot b{
  display:block;font-size:11.5px;font-weight:600;letter-spacing:.11em;
  text-transform:uppercase;color:var(--copper);margin-bottom:10px;
}

/* ---------- light data table (inner pages) ----------
   The dark .spec table lives on the home page. This is its daylight twin. */
.areas{width:100%;border-collapse:collapse;margin-top:48px;text-align:left}
.areas caption{
  caption-side:bottom;text-align:left;font-size:12.5px;line-height:1.6;
  color:#8A857F;padding-top:22px;
}
.areas th{
  font-size:11.5px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-2);padding:0 14px 14px 0;border-bottom:1px solid var(--hair);
}
.areas td{
  padding:22px 14px 22px 0;border-bottom:1px solid var(--hair);
  font-size:15.5px;vertical-align:top;color:#4A4642;
}
.areas td:first-child{
  font-family:Fraunces,Georgia,serif;font-size:19px;font-weight:600;color:var(--navy);
  letter-spacing:-.01em;
}
.areas .num{white-space:nowrap;color:var(--navy);font-variant-numeric:tabular-nums}
/* The area name is also a link to the same HAR search as its Go cell.
   On desktop it is deliberately invisible as a link: the Go column is the
   affordance there and that column's look is already settled. Below 760px
   the Go column is display:none, so this becomes the only way through and
   the responsive block styles it to look tappable. Both links share one
   href, so there is nothing to keep in sync. */
.areas td:first-child a{color:inherit;text-decoration:none}
.areas td.go a{
  font-size:14.5px;font-weight:500;color:var(--teal);text-decoration:none;white-space:nowrap;
}
.areas td.go a:hover{text-decoration:underline}
.areas tr:last-child td{border-bottom:0}

/* ---------- search shortcuts ---------- */
.quicksearch{
  display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:44px;
}
.quicksearch a{
  display:block;background:var(--cream);border-radius:16px;padding:22px 24px;
  text-decoration:none;transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.quicksearch a:hover{transform:translateY(-3px);box-shadow:0 16px 36px rgba(28,43,74,.09)}
.quicksearch b{
  display:block;font-family:Fraunces,Georgia,serif;font-size:18px;font-weight:600;
  color:var(--navy);letter-spacing:-.012em;margin-bottom:6px;
}
.quicksearch span{display:block;font-size:14px;line-height:1.5;color:var(--ink-2)}

/* ---------- bare accordion (no .faq wrapper) ---------- */
details{border-bottom:1px solid var(--hair)}
summary{
  list-style:none;cursor:pointer;padding:24px 44px 24px 0;position:relative;
  font-size:17.5px;font-weight:500;color:var(--navy);line-height:1.4;
}
summary::-webkit-details-marker{display:none}
summary::after{
  content:"";position:absolute;right:6px;top:50%;width:13px;height:13px;margin-top:-7px;
  background:
    linear-gradient(var(--teal),var(--teal)) center/13px 1.6px no-repeat,
    linear-gradient(var(--teal),var(--teal)) center/1.6px 13px no-repeat;
  transition:transform .3s var(--ease);
}
details[open] summary::after{transform:rotate(135deg)}
.answer{padding:0 56px 28px 0}
.answer p{font-size:16.5px;line-height:1.7;color:#4A4642;margin:0 0 14px}
.answer p:last-child{margin:0}

/* ---------- inner-page responsive ---------- */
@media (max-width:980px){
  .proof ul{grid-template-columns:repeat(2,1fr);gap:34px 20px}
  .quicksearch{grid-template-columns:repeat(2,1fr)}
  .photogrid .shots{grid-template-columns:repeat(2,1fr)}
  .photogrid .shots figure:first-child{grid-column:span 2}
}
@media (max-width:760px){
  .pagehead{padding:44px 0 0}
  article.post{padding:54px 0 0}
  .endcta{padding:42px 26px;margin:60px 0 76px}
  .case dl{grid-template-columns:1fr;gap:20px;margin:26px 0;padding:24px 0}
  .quicksearch{grid-template-columns:1fr}
  .photogrid .shots{grid-template-columns:1fr}
  .photogrid .shots figure:first-child{grid-column:auto}
  .pull{margin:38px 0;padding-left:20px}
  .areas td:first-child{font-size:17px}
  /* Four columns do not fit a phone, so the Go column comes off here. That
     left the HAR searches with no door on mobile at all, which is the bug
     Oscar found on 2026-10-08. The area name carries the link instead.
     Oscar's call: the mobile design does not change, so the name stays
     plain navy Fraunces with no underline and no chevron (the base rule
     .areas td:first-child a handles that at every width). The only thing
     happening below is the tap target: the anchor becomes a full-width
     block and takes 14px of the cell's own 22px padding onto itself, so a
     thumb gets ~52px of height and the whole column width instead of just
     the glyphs. 8 + 14 == 22 on each side, so row height is unchanged to
     the pixel. Scoped to .golinks (the search page) so the identical
     table in the TMC blog post, whose first column has no link, keeps its
     padding and stays aligned with its siblings. */
  .areas th:nth-child(4),.areas td:nth-child(4){display:none}
  .golinks td:first-child{padding-top:8px;padding-bottom:8px;padding-right:0}
  .golinks td:first-child a{display:block;padding:14px 0}
}

/* ---------- inquiry form ----------
   Plain HTML on purpose: no iframe, so the Follow Up Boss pixel
   can read the submission and create the lead itself. */
.formcard{
  max-width:580px;margin:0 auto;text-align:left;
  background:var(--paper);border:1px solid var(--hair);border-radius:22px;
  padding:38px 36px;box-shadow:0 18px 50px rgba(28,43,74,.06);
}
.formcard .formintro{
  font-size:15.5px;line-height:1.6;color:var(--ink-2);
  margin:0 0 28px;padding-bottom:26px;border-bottom:1px solid var(--hair);
}
.field{margin-bottom:20px}
.field > label{
  display:block;font-size:11.5px;font-weight:600;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-2);margin-bottom:9px;
}
.field .opt{text-transform:none;letter-spacing:0;font-weight:400;font-size:12.5px}
.field input,.field select,.field textarea{
  width:100%;font-family:inherit;font-size:16.5px;line-height:1.5;color:var(--ink);
  background:var(--paper);border:1px solid var(--hair);border-radius:13px;
  padding:14px 16px;transition:border-color .22s var(--ease),box-shadow .22s var(--ease);
}
.field textarea{min-height:118px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(62,142,140,.15);
}
.field select{cursor:pointer;height:51px}
.fieldrow{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.formcard button.btn{
  cursor:pointer;font-family:inherit;width:100%;margin-top:10px;
  font-size:16px;padding:15px 26px;
}
.formnote{font-size:13px;line-height:1.55;color:var(--ink-2);margin:18px 0 0;text-align:center}
.formnote a{color:var(--navy)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- after the form is sent ----------
   Both panels are in the HTML on every form page and both start hidden.
   site.js reveals exactly one of them in place, so the browser never
   navigates away and nobody ever lands on a Netlify error page. With
   JavaScript off the form posts normally and these never appear. */
.formok,.formbad{display:none;text-align:center;padding:14px 4px 6px}
.formok.show,.formbad.show{display:block}
.formok .tick{
  display:block;width:52px;height:52px;margin:0 auto 20px;border-radius:50%;
  background:rgba(62,142,140,.12);color:var(--teal);
  font-size:26px;line-height:52px;font-weight:600;
}
.formbad .tick{
  display:block;width:52px;height:52px;margin:0 auto 20px;border-radius:50%;
  background:rgba(192,138,90,.14);color:var(--copper);
  font-size:26px;line-height:52px;font-weight:600;
}
.formok h3,.formbad h3{
  font-family:'Fraunces',Georgia,serif;font-weight:600;
  font-size:clamp(22px,3vw,27px);line-height:1.2;letter-spacing:-.01em;
  color:var(--navy);margin:0 0 12px;
}
.formok p,.formbad p{
  font-size:16px;line-height:1.65;color:var(--ink-2);
  margin:0 auto;max-width:430px;
}
.formok p + p,.formbad p + p{margin-top:14px}
.formok p a,.formbad p a{color:var(--navy);font-weight:500}

@media(max-width:620px){
  .formcard{padding:30px 22px;border-radius:18px}
  .fieldrow{grid-template-columns:1fr;gap:0}
}

/* ---------- thank-you page ---------- */
.thanks{padding:120px 0 130px;text-align:center}
.thanks .mark{
  width:62px;height:62px;border-radius:50%;background:var(--teal);
  display:flex;align-items:center;justify-content:center;margin:0 auto 32px;
  color:#fff;font-size:28px;line-height:1;
}
.thanks h1{max-width:20ch;margin:0 auto}
.thanks .lede{max-width:50ch;margin:26px auto 0}

/* ---------- report-type picker (/sell/) ---------- */
.plabel{
  display:block;font-size:11.5px;font-weight:600;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-2);margin-bottom:9px;
}
.pick{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pick label{
  display:block;position:relative;cursor:pointer;
  background:var(--paper);border:1px solid var(--hair);border-radius:13px;
  padding:16px 18px 16px 44px;
  transition:border-color .22s var(--ease),box-shadow .22s var(--ease);
}
.pick label:hover{border-color:rgba(28,43,74,.26)}
.pick input[type="radio"]{
  position:absolute;left:17px;top:19px;width:16px;height:16px;margin:0;
  accent-color:var(--teal);cursor:pointer;
}
.pick label b{
  display:block;font-weight:600;font-size:15.5px;line-height:1.35;
  color:var(--ink);margin:0 0 5px;letter-spacing:-.005em;
}
.pick label > span{font-size:13.5px;line-height:1.55;color:var(--ink-2)}
.pick label b span{font:inherit;color:inherit;letter-spacing:inherit}
.pick label:has(input:checked){
  border-color:var(--teal);box-shadow:0 0 0 3px rgba(62,142,140,.12);
}
@media (max-width:640px){
  .pick{grid-template-columns:1fr}
}