@charset "utf-8";
/* Promesa Investment Properties — public site.
   Five surfaces, one accent, no third colour. See README for what is load-bearing.

   navy    #162A4F  fields and type
   blue    #1DA1F2  underlines and rules ONLY — never body copy, never a fill
   charcoal#3A4555  body
   panel   #F5F6F8  panel bands
   muted   #687686 / #98A1AE  captions and fine print
*/

:root{
  --navy:#162A4F; --blue:#1DA1F2; --charcoal:#3A4555;
  --panel:#F5F6F8; --callout:#EAF4FD; --rule:#E2E6EC;
  /* #687686 is the field guide's secondary grey, but at 11px on the panel band it
     sits at 4.29:1 — under AA. Two steps darker clears 4.5 on both grounds. */
  --muted:#5F6C7C; --fine:#98A1AE; --white:#fff;
  --on-navy:#D5DEEA; --on-navy-eyebrow:#8EC8F4; --on-navy-rule:rgba(255,255,255,.16);
  /* Two faces, two jobs. Newsreader carries display headings — optically sized,
     soft-shouldered, the private-desk register the brief asks for. IBM Plex Sans
     stays the working face: labels, body, controls, and every figure, so the
     underwriting tables keep their tabular numerals. */
  --serif:"Newsreader",ui-serif,Georgia,"Times New Roman",serif;
  --sans:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  /* "Quiet rounding rather than sharp boxes." A few pixels. Not a consumer app. */
  --r:4px; --r-lg:6px;
  /* Diffuse rather than dark: the lift should read as air under the card, not
     as a drawn edge. */
  --shadow:0 1px 2px rgba(22,42,79,.04), 0 12px 32px -10px rgba(22,42,79,.13);
  --shadow-lift:0 2px 6px rgba(22,42,79,.05), 0 26px 60px -18px rgba(22,42,79,.20);
  --wrap:1140px; --gutter:28px;
}

*,*::before,*::after{box-sizing:border-box}
/* .card sets display:flex, which outranks the user-agent's [hidden]{display:none}
   on specificity. Without this, filtering hides nothing. */
[hidden]{display:none!important}
html{
  -webkit-text-size-adjust:100%;text-size-adjust:100%;
  /* hidden first: iOS 15 Safari does not know clip and would otherwise let a
     stray pixel of overflow scroll the whole page sideways. */
  scroll-behavior:smooth;overflow-x:hidden;overflow-x:clip;
  /* Anchor targets (the metrics definitions) shouldn't land flush to the top. */
  scroll-padding-top:24px;
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
body{
  margin:0;background:var(--white);color:var(--charcoal);
  font-family:var(--sans);
  font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-variant-numeric:tabular-nums;
  font-optical-sizing:auto;
}
/* iOS Safari: drop the 300ms tap delay and the grey flash on every control. */
a,button,input,select,textarea,summary,[role="button"]{
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
}
/* height:auto matters: the plates carry width/height attributes, and without it
   a scaled-down image keeps its 750px attribute height and letterboxes inside
   the gap. Card media overrides this with its own object-fit rule. */
img{max-width:100%;height:auto;display:block}
svg{max-width:100%;display:block}
a{color:var(--navy)}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:2px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:99;background:var(--white);color:var(--navy);
  padding:10px 14px;border-radius:var(--r);box-shadow:var(--shadow-lift)}

.wrap{max-width:var(--wrap);margin:0 auto;
  padding-left:max(var(--gutter),env(safe-area-inset-left));
  padding-right:max(var(--gutter),env(safe-area-inset-right))}
.measure{max-width:70ch}      /* field guide: measure capped at 70 characters */
.measure-tight{max-width:58ch}

/* ---------------------------------------------------------------- type --- */
/* Headlines are LIGHT weight. Labels are small, uppercase, widely spaced,
   MEDIUM weight — not heavy. Both are guide requirements, not taste. */
/* Display tier: serif. A serif needs far less negative tracking than Plex did —
   tightened the same way it closes its counters and loses the softness. */
h1,h2,h3{
  font-family:var(--serif);color:var(--navy);margin:0 0 .5em;
  font-weight:400;letter-spacing:-.012em;text-wrap:balance;
}
h1{font-size:clamp(34px,5.2vw,56px);line-height:1.12;letter-spacing:-.018em;font-weight:300}
h2{font-size:clamp(26px,3.4vw,38px);line-height:1.2;letter-spacing:-.014em;font-weight:300}
h3{font-size:21px;line-height:1.3;letter-spacing:-.006em}
/* Working tier: sans. h4 labels a component, so it belongs with the UI. */
h4{font-family:var(--sans);color:var(--navy);font-size:16px;line-height:1.35;
  font-weight:500;letter-spacing:-.01em;margin:0 0 .5em}
p{margin:0 0 1.1em;text-wrap:pretty}
p:last-child{margin-bottom:0}
strong{font-weight:600;color:var(--navy)}

.label{
  display:block;font-size:11px;font-weight:500;letter-spacing:.15em;
  text-transform:uppercase;color:var(--muted);margin:0 0 14px;
}
.label-on-navy{color:var(--on-navy-eyebrow)}
.lede{font-size:clamp(17px,1.6vw,19px);line-height:1.55;color:var(--muted);font-weight:300}
.fine{font-size:13px;line-height:1.55;color:var(--muted)}
.fine a{color:var(--muted)}
.underline{
  /* The one sanctioned use of sky blue on a headline. A rule under the phrase,
     never the phrase itself in blue. */
  background-image:linear-gradient(var(--blue),var(--blue));
  background-repeat:no-repeat;background-position:0 100%;
  /* Clear of the descenders. IBM Plex Sans drops about .21em below the
     baseline, so a rule any tighter than this is struck through the "p" and
     the "g" rather than sitting under the phrase. */
  background-size:100% 3px;padding-bottom:.28em;
  /* Without this, a phrase that wraps draws one rule across both fragments on
     iOS Safari instead of one under each line. */
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
}
.rule{height:2px;width:56px;background:var(--blue);border:0;margin:0 0 26px}

/* -------------------------------------------------------------- buttons --- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:48px;padding:12px 22px;border:1px solid transparent;border-radius:var(--r);
  font:inherit;font-size:15px;font-weight:500;letter-spacing:.005em;
  text-decoration:none;cursor:pointer;-webkit-appearance:none;appearance:none;
  transition:background-color .15s ease,color .15s ease,border-color .15s ease;
  -webkit-tap-highlight-color:transparent;
}
.btn-navy{background:var(--navy);color:var(--white)}
.btn-navy:hover{background:#0f1f3c}
.btn-white{background:var(--white);color:var(--navy)}
.btn-white:hover{background:#eef1f5}
.btn-outline{background:transparent;color:var(--navy);border-color:var(--rule)}
.btn-outline:hover{border-color:var(--navy)}
.btn-ghost-light{background:transparent;color:var(--white);border-color:rgba(255,255,255,.4)}
.btn-ghost-light:hover{border-color:var(--white);background:rgba(255,255,255,.08)}
.btn-wide{width:100%}
.textlink{color:var(--navy);text-decoration:none;font-weight:500;font-size:15px;
  border-bottom:1px solid var(--blue);padding-bottom:2px}
.textlink:hover{border-bottom-width:2px}
.textlink-light{color:var(--white);border-bottom-color:var(--blue)}

/* ------------------------------------------------------ utility + header --- */
/* Licence line is always visible. The guide forbids hiding it. */
.utility{background:var(--navy);color:var(--on-navy);font-size:12px;line-height:1.4}
.utility .wrap{display:flex;align-items:center;gap:8px 22px;flex-wrap:wrap;
  padding-top:calc(9px + env(safe-area-inset-top));padding-bottom:9px}
.utility .exp{color:var(--white);font-weight:600;letter-spacing:.06em;text-transform:uppercase;font-size:11px}
.utility .lic{letter-spacing:.01em}
.utility a{color:var(--white);text-decoration:none;border-bottom:1px solid rgba(255,255,255,.35)}
.utility .util-right{margin-left:auto}

/* Deliberately NOT sticky. The secondary lockup is 1.43:1 and the guide sets a
   180px minimum width with no scaling below it, so the lockup stands 126px tall.
   Pinning that to the viewport costs more screen than the nav is worth. */
.site-head{background:var(--white);border-bottom:1px solid var(--rule);
  position:relative;z-index:40}
.site-head .wrap{display:flex;align-items:center;gap:32px;padding-top:16px;padding-bottom:16px}
/* 180px is the guide's digital minimum for the lockup. height:auto only — the
   lockups differ in ratio and may not be distorted. */
.lockup{flex:0 0 auto;display:block;line-height:0}
.lockup img{width:180px;height:auto}
.site-nav{margin-left:auto;display:flex;align-items:center;gap:2px}
.site-nav a{
  display:inline-flex;align-items:center;min-height:44px;padding:6px 13px;
  color:var(--navy);text-decoration:none;font-size:15px;font-weight:400;
  border-bottom:3px solid transparent;
}
.site-nav a:hover{border-bottom-color:var(--rule)}
.site-nav a[aria-current]{border-bottom-color:var(--blue);font-weight:500}
.head-actions{display:flex;align-items:center;gap:14px;flex:0 0 auto}
.head-actions .btn{min-height:44px;padding:10px 18px;font-size:14px}
.nav-toggle{display:none}
/* Contact rides in the menu on a phone, where the "Write" link is hidden.
   Selector matches .site-nav a's specificity, or that rule's display wins and
   a seventh item appears in the desktop nav. */
.site-nav a.nav-phone-only{display:none}

/* ---------------------------------------------------------------- bands --- */
.band{padding:clamp(56px,7vw,88px) 0}
.band-tight{padding:clamp(40px,4.5vw,60px) 0}
.band-panel{background:var(--panel)}
.band-navy{background:var(--navy);color:var(--on-navy)}
.band-navy h1,.band-navy h2,.band-navy h3,.band-navy h4{color:var(--white)}
.band-navy .lede{color:var(--on-navy)}
.band-navy .fine{color:#9FB0C6}
.band-navy strong{color:var(--white)}
.band + .band-panel,.band-panel + .band{border-top:1px solid var(--rule)}
.band-head{margin-bottom:clamp(28px,3.5vw,44px)}
.band-head p{margin-bottom:0}

/* ----------------------------------------------------------------- hero --- */
.hero{background:var(--navy);color:var(--on-navy);padding:clamp(56px,7vw,96px) 0 clamp(48px,6vw,80px)}
/* Sized so "Income-producing real estate" holds one line at desktop — the guide
   specifies a two-line headline, and a phrase that wraps breaks its underline. */
.hero h1{color:var(--white);max-width:24ch;margin-bottom:22px;
  font-size:clamp(30px,3.5vw,46px);line-height:1.1}
.hero h1 .line{display:block}
/* The rule under line one is painted by padding on an INLINE span, and inline
   padding adds no layout space — it only paints lower. So the room for it has
   to come from the block below, or the rule lands on top of line two. */
.hero h1 .line + .line{margin-top:.3em}
.hero .lede{color:var(--on-navy);max-width:62ch}
.hero-grid{display:grid;grid-template-columns:1.28fr .72fr;gap:clamp(32px,5vw,64px);align-items:end}

/* The search sheet is white on navy, as specified — a sheet, not a pill bar. */
.sheet{background:var(--white);border-radius:var(--r-lg);padding:24px;box-shadow:var(--shadow-lift)}
.sheet .label{margin-bottom:16px;color:var(--muted)}
.field{margin-bottom:14px}
.field label{display:block;font-size:12px;font-weight:500;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted);margin-bottom:6px}
select,input,textarea{
  width:100%;font:inherit;font-size:16px;color:var(--charcoal);background:var(--white);
  border:1px solid var(--rule);border-radius:var(--r);padding:12px 13px;min-height:48px;
  -webkit-appearance:none;appearance:none;
}
select{
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23687686' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;padding-right:38px;
}
textarea{min-height:132px;resize:vertical;line-height:1.5}
/* The desk's inputs are numeric. Chrome's spinners crowd the value and are
   useless next to a keyboard; iOS shows none either way. */
input[type=number]{-moz-appearance:textfield;appearance:textfield}
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
/* iOS Safari and Chrome paint their own fill behind autofilled values. Keep ours. */
input:-webkit-autofill,select:-webkit-autofill,textarea:-webkit-autofill{
  -webkit-box-shadow:0 0 0 1000px var(--white) inset;-webkit-text-fill-color:var(--charcoal);
  caret-color:var(--charcoal);transition:background-color 9999s ease-out}
input:focus,select:focus,textarea:focus{border-color:var(--blue);outline:2px solid var(--blue);outline-offset:-1px}
::placeholder{color:var(--fine);opacity:1}

.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;margin-top:28px}

/* ----------------------------------------------------------- fact strip --- */
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,4vw,56px)}
/* Display, not data — these three sit alone rather than in a column, so they
   take the serif and read with the headings instead of against them. */
.fact .figure{display:block;font-family:var(--serif);font-size:clamp(32px,3.8vw,44px);
  font-weight:300;letter-spacing:-.018em;color:var(--navy);line-height:1.05;margin-bottom:12px}
.fact .what{font-size:15px;color:var(--charcoal);margin-bottom:8px}
.fact .src{font-size:12px;color:var(--muted);line-height:1.45}
.fact + .fact{border-left:1px solid var(--rule);padding-left:clamp(24px,4vw,56px)}

/* -------------------------------------------------------------- columns --- */
/* "Generous space, no hard dividing lines." No borders here on purpose. */
.cols-3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(28px,4vw,56px)}
.cols-2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,48px)}
/* A grid item's minimum width is its content's, and a five-column table inside
   a panel is wider than a phone. Without this the track grows to fit the table,
   every sibling in the track grows with it, and the page scrolls sideways —
   the detail pages measured 452px wide on a 375px viewport. The table's own
   .table-scroll can only take over once the item is allowed to be narrower. */
.cols-2>*,.cols-3>*,.desk>*,.hero-grid>*,.contact-grid>*,.card-feature>*,
.card-grid-3>*,.card-grid-4>*,.foot-grid>*,.facts>*,.panel{min-width:0}
/* Sequence markers, not accents. Sky blue is reserved for underlines and rules,
   and muted grey lets the serif headings carry the section anyway. */
.numbered .n{display:block;font-size:12px;font-weight:500;letter-spacing:.16em;
  color:var(--muted);margin-bottom:14px;font-variant-numeric:tabular-nums}
.band-navy .numbered .n{color:var(--on-navy-eyebrow)}
.numbered h3{margin-bottom:10px}

/* ---------------------------------------------------------------- cards --- */
.card{background:var(--white);border:1px solid var(--rule);border-radius:var(--r-lg);
  overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column}
a.card{text-decoration:none;color:inherit;
  transition:box-shadow .22s cubic-bezier(.2,.8,.2,1),transform .22s cubic-bezier(.2,.8,.2,1)}
/* iOS holds :hover after a tap, which leaves a card stuck in its lifted state.
   Only devices with a real pointer get the lift. */
@media (hover:hover) and (pointer:fine){
  a.card:hover{box-shadow:var(--shadow-lift);transform:translateY(-3px)}
}
.card-media{position:relative;background:var(--panel);border-bottom:1px solid var(--rule)}
.card-media img{width:100%;height:100%;object-fit:cover;aspect-ratio:8/5}
.card-body{padding:22px 24px 24px;display:flex;flex-direction:column;flex:1}
.card-body .label{margin-bottom:9px}
/* A card heading is h2 on a list page and h3 under a section; it looks the same either way. */
.card h2,.card h3{font-size:21px;line-height:1.3;letter-spacing:-.006em;font-weight:400;margin-bottom:8px}
.card .blurb{font-size:15px;color:var(--muted);margin-bottom:18px}
.card .foot{margin-top:auto}

.badge{
  position:absolute;top:12px;left:12px;background:var(--white);color:var(--navy);
  font-size:11px;font-weight:500;letter-spacing:.11em;text-transform:uppercase;
  padding:6px 10px;border-radius:var(--r);box-shadow:var(--shadow);
}
.badge-verdict{position:static;box-shadow:none;border:1px solid var(--rule)}
.badge-go{border-color:#B7D8C2;color:#1B7E4F}
.badge-conditional{border-color:#E8D7B0;color:#8A6A16}
.badge-no-go{border-color:#E8C4BC;color:#B4402F}

/* The quiet metric grid on a file card. Numbers, labels under them, no chrome. */
.metrics{display:grid;grid-template-columns:repeat(2,1fr);gap:16px 18px;
  border-top:1px solid var(--rule);padding-top:18px}
.metrics-4{grid-template-columns:repeat(4,1fr)}
.metric .v{display:block;font-size:19px;font-weight:400;color:var(--navy);
  letter-spacing:-.02em;line-height:1.2;margin-bottom:3px}
.metric .k{display:block;font-size:10.5px;font-weight:500;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);line-height:1.35}
.metrics .metric .k{min-height:2.7em}
.metric .k a{color:inherit;text-decoration:none;border-bottom:1px dotted var(--fine)}

/* Featured file: media beside body rather than above it. */
.card-feature{display:grid;grid-template-columns:1.05fr .95fr;margin-bottom:26px}
.card-feature .card-media{border-bottom:0;border-right:1px solid var(--rule)}
.card-feature .card-media img{height:100%;aspect-ratio:auto;min-height:340px}
.card-feature .card-body{padding:clamp(26px,3vw,40px)}
.card-feature h2,.card-feature h3{font-size:clamp(24px,2.6vw,30px);font-weight:300}
.card-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.card-grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}

/* Market card: caption UNDER the photo, never a dark overlay on it. */
.market-card .card-media img{aspect-ratio:3/2}
.market-card .card-body{padding:20px 22px 22px}
.market-card .stat{margin-top:14px;padding-top:14px;border-top:1px solid var(--rule)}

/* --------------------------------------------------------------- tables --- */
.table-scroll{
  overflow-x:auto;-webkit-overflow-scrolling:touch;min-width:0;max-width:100%;
  /* Edge fade: says "there is more" without a scrollbar. Two masks ride with the
     content (local), two shadows stay put (scroll); the fades match the ground
     behind the table via --scroll-bg. */
  --scroll-bg:var(--white);
  background:
    linear-gradient(90deg,var(--scroll-bg) 30%,rgba(255,255,255,0)),
    linear-gradient(90deg,rgba(255,255,255,0),var(--scroll-bg) 70%) 100% 0,
    linear-gradient(90deg,rgba(22,42,79,.10),rgba(22,42,79,0)),
    linear-gradient(270deg,rgba(22,42,79,.10),rgba(22,42,79,0)) 100% 0;
  background-repeat:no-repeat;background-size:40px 100%,40px 100%,14px 100%,14px 100%;
  background-attachment:local,local,scroll,scroll;
  /* Stop a sideways flick inside a table from dragging the page with it. */
  overscroll-behavior-x:contain;
}
table{width:100%;border-collapse:collapse;font-size:14.5px}
caption{text-align:left;font-size:11px;font-weight:500;letter-spacing:.15em;
  text-transform:uppercase;color:var(--muted);padding-bottom:14px}
th,td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--rule);vertical-align:baseline}
thead th{font-size:11px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);border-bottom:1px solid var(--navy)}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
tbody tr:last-child td{border-bottom:0}
tr.total td{border-top:1px solid var(--navy);border-bottom:0;font-weight:600;color:var(--navy)}
tr.sub td{color:var(--muted)}
tr.head-row td{font-weight:500;color:var(--navy);padding-top:22px}
tr.is-now td{background:var(--callout)}

.panel .table-scroll{--scroll-bg:var(--panel)}
/* Grid items are allowed below their content's width by the min-width:0 rule in
   the columns section above; that is what lets this container scroll instead of
   the page. */
/* Rent-roll cells never wrap ("1 bd / 1 ba" was breaking onto three lines); the
   table already scrolls. */
table.roll th,table.roll td{white-space:nowrap}

/* ------------------------------------------------------- stack + panels --- */
.panel{background:var(--panel);border-radius:var(--r-lg);padding:clamp(22px,3vw,32px)}
.panel-white{background:var(--white);border:1px solid var(--rule)}
.panel-callout{background:var(--callout);border-radius:var(--r-lg);padding:20px 24px}
.panel-callout p{font-size:15px;margin-bottom:.7em}
/* Three figures, one row. As a flex row they wrapped two-and-one inside a
   panel, which reads as a layout accident rather than a hierarchy. */
.headline-figure{display:grid;grid-template-columns:repeat(3,1fr);gap:20px 18px;align-items:start}
.headline-figure .big{font-size:clamp(26px,2.9vw,40px);font-weight:300;color:var(--navy);
  letter-spacing:-.035em;line-height:1;margin-bottom:8px;display:block}
.headline-figure .label{font-size:10.5px;letter-spacing:.08em;line-height:1.35}

.deflist{margin:0}
.deflist div{padding:14px 0;border-bottom:1px solid var(--rule);display:grid;
  grid-template-columns:minmax(120px,.42fr) 1fr;gap:6px 20px}
.deflist div:last-child{border-bottom:0}
.deflist dt{font-size:11px;font-weight:500;letter-spacing:.11em;text-transform:uppercase;color:var(--muted)}
.deflist dd{margin:0;color:var(--navy);font-size:15.5px}
.deflist dd a{color:var(--navy);text-decoration:none;border-bottom:1px solid var(--blue)}

.bullets{margin:0;padding-left:0;list-style:none}
.bullets li{position:relative;padding:0 0 12px 22px;font-size:15px}
.bullets li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:1px;background:var(--blue)}
.bullets li:last-child{padding-bottom:0}
.steps{counter-reset:s;margin:0;padding:0;list-style:none}
.steps li{counter-increment:s;padding:0 0 18px 40px;position:relative;font-size:15px}
.steps li::before{content:counter(s,decimal-leading-zero);position:absolute;left:0;top:.1em;
  font-size:12px;font-weight:500;letter-spacing:.12em;color:var(--muted)}

/* -------------------------------------------------------------- filters --- */
.filters{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-end;
  padding-bottom:26px;margin-bottom:30px;border-bottom:1px solid var(--rule)}
.filters .field{margin-bottom:0;min-width:190px}
.filters .count{margin-left:auto;font-size:13px;color:var(--muted);padding-bottom:14px}
.empty{padding:48px 0;text-align:center;color:var(--muted)}

/* ------------------------------------------------------------- insights --- */
/* A research list, not a blog grid. */
.research{border-top:1px solid var(--navy)}
.research li{list-style:none}
.research a{display:grid;grid-template-columns:minmax(150px,.24fr) 1fr auto;gap:8px 32px;
  padding:26px 0;border-bottom:1px solid var(--rule);text-decoration:none;color:inherit;
  align-items:baseline}
.research a:hover h2,.research a:hover h3{
  background-image:linear-gradient(var(--blue),var(--blue));
  background-repeat:no-repeat;background-position:0 100%;background-size:100% 2px;
  padding-bottom:.14em;
}
.research .meta{font-size:12px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.research .meta .cat{color:var(--navy);display:block;margin-bottom:5px}
.research h2,.research h3{font-size:21px;line-height:1.3;letter-spacing:-.006em;font-weight:400;margin-bottom:8px}
.research .dek{font-size:15px;color:var(--muted);max-width:62ch;margin:0}
.research .mins{font-size:12px;color:var(--muted);white-space:nowrap;letter-spacing:.05em}

.article{max-width:70ch}
.article h2{font-size:clamp(21px,2.2vw,25px);font-weight:400;margin:2.2em 0 .6em}
.article h2:first-child{margin-top:0}
.article p{font-size:17px;line-height:1.62}

/* ------------------------------------------------------------ underwrite --- */
.desk{display:grid;grid-template-columns:minmax(300px,.85fr) 1.15fr;gap:clamp(28px,4vw,48px);align-items:start}
.desk-inputs .field{margin-bottom:16px}
.desk-inputs .pair{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.desk-out .headline-figure{padding-bottom:24px;margin-bottom:4px;border-bottom:1px solid var(--rule)}
/* The desk sits straight under the page h1, so its panel titles are h2 —
   sized like the h3 they visually are. */
.desk-out h2{font-size:21px;line-height:1.3;letter-spacing:-.006em;font-weight:400}
.desk fieldset{border:0;padding:0;margin:0 0 26px}
.desk legend{padding:0;font-size:11px;font-weight:500;letter-spacing:.15em;
  text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.flag{border-left:2px solid var(--blue);padding:2px 0 2px 16px;margin:18px 0;font-size:14px;color:var(--muted)}
.noscript{border-left:2px solid var(--blue);padding:12px 0 12px 16px;margin-bottom:26px}

/* --------------------------------------------------------------- footer --- */
.site-foot{background:var(--navy);color:var(--on-navy);font-size:14px;
  padding:clamp(48px,6vw,72px) 0 calc(40px + env(safe-area-inset-bottom))}
.site-foot h2{font-family:var(--sans);line-height:1.4;text-wrap:initial;color:var(--white);font-size:11px;font-weight:500;letter-spacing:.15em;
  text-transform:uppercase;margin-bottom:16px}
.site-foot a{color:var(--on-navy);text-decoration:none}
.site-foot a:hover{color:var(--white);text-decoration:underline}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:clamp(28px,4vw,48px);
  padding-bottom:40px}
.site-foot .lockup img{width:200px}
.site-foot .boiler{margin-top:22px;color:var(--on-navy);max-width:44ch;font-size:13.5px}
.foot-list{list-style:none;margin:0;padding:0}
.foot-list li{margin-bottom:9px}
.foot-contact a{color:var(--white);font-weight:500}
.foot-rule{height:1px;background:var(--on-navy-rule);border:0;margin:0 0 26px}
.foot-legal p{font-size:12.5px;color:#9FB0C6;max-width:96ch;margin-bottom:9px;line-height:1.55}
.foot-legal .eho{color:var(--white)}

/* --------------------------------------------------- touch ergonomics --- */
/* Standalone action links are inline type on a mouse and a tap target on a
   phone. Gated on pointer:coarse so desktop rhythm is untouched. */
@media (pointer:coarse){
  .textlink{display:inline-flex;align-items:center;min-height:44px}
  .crumbs a{display:inline-block;padding:8px 0}
  .foot-list a{display:inline-block;padding:7px 0}
  .foot-list li{margin-bottom:2px}
  .metric .k a{display:inline-block;padding:4px 0}
}

/* --------------------------------------------------------------- crumbs --- */
.crumbs{font-size:13px;color:var(--muted);padding-top:24px}
.crumbs a{color:var(--muted);text-decoration:none;border-bottom:1px solid var(--rule)}
.crumbs span{padding:0 8px;color:var(--fine)}
/* Longhand on purpose: .page-head usually shares its element with .wrap, and the
   shorthand zeroed the horizontal gutters — every inner-page h1 sat flush to the
   phone's edge. */
.page-head{padding-top:clamp(36px,4.5vw,56px);padding-bottom:clamp(28px,3.5vw,40px)}
.page-head h1{max-width:20ch}
.caption{font-size:12.5px;color:var(--muted);margin-top:10px}

/* ------------------------------------------------------------ responsive --- */
@media (max-width:1000px){
  .hero-grid,.desk,.card-feature{grid-template-columns:1fr}
  .card-feature .card-media{border-right:0;border-bottom:1px solid var(--rule)}
  .card-feature .card-media img{min-height:0;aspect-ratio:8/5}
  .card-grid-4{grid-template-columns:repeat(2,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  :root{--gutter:20px}
  .site-head .wrap{gap:14px;padding-top:12px;padding-bottom:12px}
  /* Closed by the stylesheet, not by the script. site.js is deferred, so a
     menu hidden only by JS renders fully open on a phone until the script
     runs, then snaps shut. The script now toggles .is-open instead. */
  .site-nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--white);
    border-bottom:1px solid var(--rule);flex-direction:column;align-items:stretch;
    gap:0;padding:6px max(var(--gutter),env(safe-area-inset-right)) 14px
      max(var(--gutter),env(safe-area-inset-left));
    box-shadow:var(--shadow-lift)}
  .site-nav.is-open{display:flex}
  .site-nav a{min-height:50px;border-bottom:1px solid var(--rule);border-left:3px solid transparent;
    padding-left:0}
  .site-nav a[aria-current]{border-bottom-color:var(--rule);border-left-color:var(--blue);padding-left:12px}
  .nav-toggle{display:inline-flex;order:3}
  .head-actions{margin-left:auto;gap:8px}
  .head-actions .btn{padding:10px 14px}
  /* "On a phone, keep Call Ryan and a menu." The written-request link is one
     tap away inside the menu, and three controls do not fit beside the lockup. */
  .head-actions .textlink{display:none}
  .site-nav a.nav-phone-only{display:flex}
  /* The licence line stays. The phone number does not need to be in the utility
     bar as well as on the button an inch below it. */
  .utility .util-right{display:none}
  .utility .wrap{gap:4px 14px}
  .cols-3,.cols-2,.card-grid-3,.card-grid-4,.facts{grid-template-columns:1fr}
  .fact + .fact{border-left:0;padding-left:0;border-top:1px solid var(--rule);padding-top:24px}
  .research a{grid-template-columns:1fr;gap:6px}
  .research .mins{margin-top:4px}
  .deflist div{grid-template-columns:1fr}
  .metrics-4{grid-template-columns:repeat(2,1fr)}
  .headline-figure{grid-template-columns:repeat(3,1fr);gap:16px 12px}
  .filters .count{margin-left:0;width:100%;padding-bottom:0}
  .foot-grid{grid-template-columns:1fr;gap:32px}
}
@media (max-width:520px){
  /* Phone header budget at 375px: 32px gutters + 180px lockup (the brand minimum,
     never smaller) leaves ~150px for Call Ryan and a menu. Text buttons overflow
     that and clip the menu off the right edge, so the menu goes icon-only. The
     word stays in the DOM — font-size:0 hides it visually, screen readers still
     hear "Menu" / "Close". */
  :root{--gutter:16px}
  /* The licence line already says "Brokered by eXp Realty" in full; on a phone the
     chip beside it is a second copy costing a line of chrome. */
  .utility .exp{display:none}
  .site-head .wrap{gap:12px}
  .head-actions{gap:6px}
  .head-actions .btn-navy{padding:10px 12px}
  .head-actions .nav-toggle{font-size:0;width:44px;min-width:44px;padding:0;justify-content:center}
  .nav-toggle::before{content:"";display:block;width:20px;height:14px;
    background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='14' viewBox='0 0 20 14'%3E%3Cpath d='M0 1h20M0 7h20M0 13h20' stroke='%23162A4F' stroke-width='1.6'/%3E%3C/svg%3E") center/contain no-repeat}
  .nav-toggle[aria-expanded="true"]::before{width:16px;height:16px;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M1 1l14 14M15 1L1 15' stroke='%23162A4F' stroke-width='1.6'/%3E%3C/svg%3E")}
  .desk-inputs .pair{grid-template-columns:1fr}
}

/* ------------------------------------------------------------------ print --- */
@media print{
  .site-head,.nav-toggle,.hero-actions,.sheet,.filters{display:none!important}
  body{font-size:11pt;color:#000}
  .band,.band-navy,.hero{background:#fff!important;color:#000!important;padding:18pt 0}
  .band-navy h1,.band-navy h2,.band-navy h3,.hero h1{color:#000!important}
  .card{box-shadow:none;break-inside:avoid}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#555}
  .site-foot{background:#fff!important;color:#000!important;border-top:1pt solid #000}
  .foot-legal p,.site-foot a{color:#000!important}
}