/* Self-hosted fonts (latin subset), Source Serif 4 + Inter, bundled by BTS Brands.
   2026-08-19 (round 2, item 20): the display face moved OFF Fraunces. Sejla flagged its
   funky letterforms (the "f" in particular). Source Serif 4 is a sober, professional
   text/display serif with conventional letterforms - it keeps the serif/sans pairing the
   approved design is built on while removing the quirk. Variable file covers 400-700. */
@font-face{font-family:'Source Serif 4';font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/sourceserif4-var.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/inter-400.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/inter-500.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/inter-600.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/inter-700.woff2) format('woff2')}

/* CrossMarc Capital - draft site styles · BTS Brands 2026-07-30 (rev 2)
   Revised against the 7/28 markups + 7/30 Ardent popup request.
   Changes this round: high-end serif/sans pairing; de-boxed / more dynamic layout with
   wider type hierarchy; em dashes scrubbed from all copy; Investors page added;
   portfolio rebuilt to a click-to-open detail popup (Ardent "Investment Spotlight" pattern);
   contact + company + strategy + team reworked per notes. */

:root{
  --navy:#14306B;
  --navy-deep:#0E2350;
  --ink:#141519;
  --steel:#3D6AA6;
  --steel-soft:#6f8fbf;
  --gray-panel:#EDEDEF;
  --warm:#F7F6F2;
  --warm-2:#F1EFE8;
  --mid:#54565c;
  --line:#e4e3dd;
  --hair:#dcdbd4;
  --white:#ffffff;
  --maxw:1180px;
  --shadow:0 26px 60px -30px rgba(14,35,80,.45);
  --shadow-soft:0 14px 40px -24px rgba(14,35,80,.35);
  --font-display:"Source Serif 4",Georgia,"Times New Roman",serif;
  --font-body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;font-family:var(--font-body);color:var(--ink);
  background:var(--white);line-height:1.68;-webkit-font-smoothing:antialiased;
  font-size:17px;
}
h1,h2,h3,h4{font-family:var(--font-display);margin:0 0 .5em;line-height:1.06;letter-spacing:-.015em}
h1{font-weight:600;font-size:clamp(2.35rem,4.8vw,3.85rem)}
h2{font-weight:600;font-size:clamp(2rem,4.2vw,3.2rem)}
h3{font-weight:600;font-size:1.35rem}
p{margin:0 0 1.1rem}
a{color:var(--navy);text-decoration:none}
img{max-width:100%;display:block}
.container{max-width:var(--maxw);margin:0 auto;padding:0 28px}
.container.narrow{max-width:960px}
.eyebrow{font-family:var(--font-body);text-transform:uppercase;letter-spacing:.22em;
  font-size:.72rem;font-weight:600;color:var(--steel);margin-bottom:1.1rem}
.muted{color:var(--mid)}
.center{text-align:center}
.lead{font-size:1.28rem;line-height:1.6;color:var(--mid);font-weight:400}

/* ---------- Header: modern slim top bar + branded "Menu" panel ----------
   CrossMarc's own take, sitting BETWEEN a traditional horizontal nav and a stark
   full-screen hamburger: the primary sections stay visible for clarity, and a labeled
   "Menu" affordance (a branded corner-bracket square, not a hamburger) opens a content-rich
   branded panel that drops from the bar (nav + featured deal + investor CTA + contact). */
header.site{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);
  backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;gap:26px;min-height:72px;flex-wrap:wrap;row-gap:0}
.brand{display:flex;align-items:center;gap:13px;flex:none}
.brand .mark{width:38px;height:38px;flex:none}
.brand .wm{font-family:var(--font-body);line-height:1;letter-spacing:.02em}
.brand .wm b{display:block;font-weight:700;font-size:1.04rem;color:var(--navy);text-transform:uppercase;letter-spacing:.04em}
.brand .wm span{display:block;font-weight:500;font-size:.72rem;letter-spacing:.34em;color:var(--ink);text-transform:uppercase;margin-top:2px}
.btn{display:inline-block;font-family:var(--font-body);font-weight:600;
  letter-spacing:.02em;font-size:.9rem;padding:13px 26px;border-radius:3px;transition:.2s;cursor:pointer}
.btn.primary{background:var(--navy);color:#fff}
.btn.primary:hover{background:var(--navy-deep)}
.btn.ghost{border:1px solid var(--navy);color:var(--navy);padding:12px 25px;background:transparent}
.btn.ghost:hover{background:var(--navy);color:#fff}
.btn.light{border:1px solid rgba(255,255,255,.65);color:#fff;background:transparent}
.btn.light:hover{background:#fff;color:var(--navy)}

/* Visible primary nav (clarity). Fully functional with NO JS - the fallback at every width. */
.quicklinks{display:flex;align-items:center;gap:30px;margin-left:auto}
.quicklinks a{position:relative;font-family:var(--font-body);font-weight:600;font-size:.75rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink);padding:6px 0;white-space:nowrap;
  transition:color .2s ease}
.quicklinks a::after{content:"";position:absolute;left:0;right:100%;bottom:-1px;height:2px;
  background:var(--navy);transition:right .28s cubic-bezier(.2,.7,.2,1)}
.quicklinks a:hover,.quicklinks a.active{color:var(--navy)}
.quicklinks a:hover::after,.quicklinks a.active::after{right:0}
.nav-actions{display:flex;align-items:center;gap:16px;flex:none}
.nav-actions .btn.contact{background:var(--navy);color:#fff;font-size:.72rem;padding:10px 20px;
  letter-spacing:.12em;text-transform:uppercase;font-weight:600;border-radius:0}
.nav-actions .btn.contact:hover{background:var(--navy-deep)}

/* "Menu" affordance: corner-bracket square framing a 2x2 grid (the site's edge language,
   deliberately NOT a hamburger). JS-gated so it never appears as an inert control. */
.menu-toggle{display:none;align-items:center;gap:11px;background:none;border:0;cursor:pointer;
  padding:6px 2px;font-family:var(--font-body)}
.js .menu-toggle{display:inline-flex}
.menu-toggle .mt-label{font-size:.72rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ink)}
.menu-toggle .mt-box{position:relative;width:30px;height:30px;flex:none}
.menu-toggle .mt-box::before,.menu-toggle .mt-box::after{content:"";position:absolute;width:9px;height:9px;
  transition:top .25s ease,left .25s ease,right .25s ease,bottom .25s ease}
.menu-toggle .mt-box::before{top:0;left:0;border-top:2px solid var(--navy);border-left:2px solid var(--navy)}
.menu-toggle .mt-box::after{bottom:0;right:0;border-bottom:2px solid var(--navy);border-right:2px solid var(--navy)}
.menu-toggle:hover .mt-box::before{top:-2px;left:-2px}
.menu-toggle:hover .mt-box::after{bottom:-2px;right:-2px}
.menu-toggle .mt-grid{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:14px;height:14px;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:3px}
.menu-toggle .mt-grid span{background:var(--navy);border-radius:1px;transition:background .25s ease}
.menu-toggle:hover .mt-grid span{background:var(--steel)}
.menu-toggle:focus-visible{outline:2px solid var(--steel);outline-offset:3px}

/* ---------- Branded "Menu" panel (drops from the bar; content-rich, NOT a bare list) ----------
   Enhancement layer only: with NO JS it stays hidden and the visible top-bar nav is the
   fully-working fallback (so the labeled Menu is never an inert trap). */
.nav-panel{display:none}
.js .nav-panel{display:block;position:fixed;inset:0;z-index:200;visibility:hidden;pointer-events:none}
.js .nav-panel::before{content:"";position:absolute;inset:0;background:rgba(6,14,34,.5);
  opacity:0;transition:opacity .45s ease}
.js .nav-panel.open{visibility:visible;pointer-events:auto}
.js .nav-panel.open::before{opacity:1}
.js .np-sheet{position:absolute;top:0;left:0;right:0;max-height:100vh;overflow-y:auto;overflow-x:hidden;
  background:radial-gradient(120% 150% at 88% -12%,#17376f 0%,var(--navy-deep) 48%,#07162f 100%);
  box-shadow:0 44px 80px -34px rgba(6,14,34,.8);
  transform:translateY(-101%);transition:transform .52s cubic-bezier(.22,.75,.24,1)}
.js .nav-panel.open .np-sheet{transform:translateY(0)}
.js .np-inner{position:relative;max-width:var(--maxw);margin:0 auto;padding:0 28px 48px}
.js .np-top{display:flex;align-items:center;justify-content:space-between;height:72px;position:relative;z-index:2}
.js .np-top .logo-white{height:31px;width:auto;display:block}
.js .nav-close{position:relative;width:46px;height:46px;background:none;border:0;cursor:pointer;flex:none}
.js .nav-close span{position:absolute;top:50%;left:50%;width:26px;height:2px;background:#fff;transition:background .25s ease}
.js .nav-close span:nth-child(1){transform:translate(-50%,-50%) rotate(45deg)}
.js .nav-close span:nth-child(2){transform:translate(-50%,-50%) rotate(-45deg)}
.js .nav-close::before{content:"";position:absolute;top:3px;right:3px;width:12px;height:12px;
  border-top:2px solid rgba(255,255,255,.55);border-right:2px solid rgba(255,255,255,.55);
  transition:top .25s ease,right .25s ease,border-color .25s ease}
.js .nav-close:hover::before{top:-2px;right:-2px;border-color:#fff}
.js .nav-close:hover span{background:#dbe6fb}
.js .nav-close:focus-visible{outline:2px solid var(--steel-soft);outline-offset:3px}
/* three content zones: Navigate | Featured Investment | Become an Investor */
.js .np-main{display:grid;grid-template-columns:1.1fr 1.25fr 1fr;gap:46px;padding:18px 0 6px;
  position:relative;z-index:2;align-items:start}
.js .np-eyebrow{display:block;font-family:var(--font-body);text-transform:uppercase;letter-spacing:.22em;
  font-size:.66rem;font-weight:600;color:var(--steel-soft);margin-bottom:16px}
.js .np-nav,.js .np-feature,.js .np-aside{opacity:0;transform:translateY(16px);
  transition:opacity .55s ease,transform .55s cubic-bezier(.2,.7,.2,1)}
.js .nav-panel.open .np-nav,.js .nav-panel.open .np-feature,.js .nav-panel.open .np-aside{opacity:1;transform:none}
.js .nav-panel.open .np-nav{transition-delay:.10s}
.js .nav-panel.open .np-feature{transition-delay:.18s}
.js .nav-panel.open .np-aside{transition-delay:.26s}
/* Navigate column */
.js .np-links{list-style:none;margin:0;padding:0}
.js .np-links a{position:relative;display:inline-block;font-family:var(--font-display);font-weight:600;
  line-height:1.16;letter-spacing:-.015em;color:#a9bcde;font-size:clamp(1.65rem,2.5vw,2.25rem);padding:2px 0;
  transition:color .22s ease}
.js .np-links a::after{content:"";position:absolute;left:0;bottom:2px;height:2px;width:0;
  background:var(--steel);transition:width .3s cubic-bezier(.2,.7,.2,1)}
.js .np-links a:hover,.js .np-links a:focus-visible{color:#fff}
.js .np-links a:hover::after,.js .np-links a:focus-visible::after{width:100%}
.js .np-links a[aria-current="page"]{color:#fff}
.js .np-links a[aria-current="page"]::after{width:100%;background:var(--steel-soft)}
.js .np-links a:focus-visible{outline:2px solid var(--steel-soft);outline-offset:5px}
/* Featured Investment teaser (the "substance" a bare hamburger menu doesn't have) */
.js .np-feature{display:block;text-decoration:none;color:#fff}
.js .np-feature-media{position:relative;display:block;overflow:hidden;border-radius:3px;aspect-ratio:16/10;
  box-shadow:var(--shadow-soft)}
.js .np-feature-media img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.js .np-feature:hover .np-feature-media img,.js .np-feature:focus-visible .np-feature-media img{transform:scale(1.05)}
.js .np-feature-media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(9,18,42,.04) 40%,rgba(9,18,42,.78) 100%)}
.js .np-feature-media::before{content:"";position:absolute;top:14px;left:14px;z-index:3;width:16px;height:16px;
  border-top:2px solid rgba(255,255,255,.8);border-left:2px solid rgba(255,255,255,.8);
  opacity:0;transform:translate(5px,5px);transition:.3s ease}
.js .np-feature:hover .np-feature-media::before,.js .np-feature:focus-visible .np-feature-media::before{opacity:1;transform:none}
.js .np-feature-cap{position:absolute;left:0;bottom:0;z-index:2;padding:18px 20px;display:flex;flex-direction:column;gap:5px}
.js .npf-name{font-family:var(--font-display);font-weight:600;font-size:1.5rem;line-height:1.02;color:#fff}
.js .npf-loc{font-family:var(--font-body);font-weight:600;font-size:.64rem;text-transform:uppercase;
  letter-spacing:.14em;color:#c9d6ee}
.js .np-feature-cta{display:inline-block;margin-top:14px;font-family:var(--font-body);font-weight:600;
  font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--steel-soft);transition:color .2s ease}
.js .np-feature:hover .np-feature-cta,.js .np-feature:focus-visible .np-feature-cta{color:#fff}
.js .np-feature:focus-visible{outline:2px solid var(--steel-soft);outline-offset:5px}
/* Become an Investor + contact */
.js .np-cta-h{font-family:var(--font-display);font-weight:600;color:#fff;font-size:1.55rem;margin:0 0 .55rem}
.js .np-aside p{font-size:.92rem;line-height:1.62;color:#a9bbdd;margin:0 0 1.2rem}
.js .np-cta-btn{display:inline-block;border:1px solid rgba(255,255,255,.55);color:#fff;background:transparent;
  padding:12px 24px;border-radius:0;font-family:var(--font-body);font-weight:600;font-size:.76rem;
  letter-spacing:.13em;text-transform:uppercase;transition:background .2s ease,color .2s ease}
.js .np-cta-btn:hover{background:#fff;color:var(--navy)}
.js .np-cta-btn:hover::before{border-color:var(--steel)}
.js .np-cta-btn:focus-visible{outline:2px solid var(--steel-soft);outline-offset:3px}
.js .np-contact{margin-top:26px;border-top:1px solid rgba(255,255,255,.16);padding-top:18px}
.js .np-c-line{display:block;font-size:.85rem;letter-spacing:.01em;color:#9fb2d8;padding:4px 0}
.js a.np-c-line:hover{color:#fff}
/* CM monogram watermark */
.js .np-watermark{position:absolute;right:-26px;top:6px;width:min(28vw,286px);height:auto;
  color:#fff;opacity:.05;pointer-events:none;z-index:0}

@media(max-width:960px){
  .js .quicklinks{display:none}   /* WITH js, collapse the visible nav; the Menu panel is the nav */
}
@media(max-width:820px){
  .js .np-main{grid-template-columns:1fr;gap:30px;padding:12px 0 6px}
  .js .np-links a{font-size:clamp(1.55rem,7vw,2.05rem)}
  .js .np-feature-media{aspect-ratio:16/9}
  .js .np-watermark{display:none}
}

/* ---------- Hero ---------- */
.hero{position:relative;background:linear-gradient(120deg,var(--navy-deep),var(--navy) 62%,#1c3f86);
  color:#fff;overflow:hidden}
.hero .container{position:relative;z-index:2;padding-top:104px;padding-bottom:108px}
.hero h1{color:#fff;max-width:17ch;font-weight:500}
.hero p.lead{font-size:1.2rem;max-width:56ch;color:#e2e8f4;margin-top:6px}
.hero .cta{margin-top:36px;display:flex;gap:16px;flex-wrap:wrap}
.hero .ghostmark{position:absolute;right:-90px;top:50%;transform:translateY(-50%);
  width:min(560px,52vw);opacity:.09;z-index:1}
/* Photographic full-bleed hero (ref: SKB - real property photo leads the hero) */
.hero.hero-photo{background:var(--navy-deep)}
.hero.hero-photo .hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero.hero-photo .hero-bg img{width:100%;height:100%;object-fit:cover;object-position:center 42%;display:block}
.hero.hero-photo .hero-bg::after{content:"";position:absolute;inset:0;
  background:
    linear-gradient(93deg,rgba(9,18,42,.95) 0%,rgba(12,28,66,.86) 38%,rgba(12,28,66,.52) 72%,rgba(12,28,66,.34) 100%),
    linear-gradient(0deg,rgba(9,18,42,.66) 0%,rgba(9,18,42,0) 30%)}
.hero.hero-photo .container{padding-top:94px;padding-bottom:104px}
/* Hero property caption (ref: SKB - names the hero asset, bottom aligned) */
.hero-cap{position:absolute;left:0;right:0;bottom:24px;z-index:3}
.hero-cap .container{padding-top:0;padding-bottom:0;display:flex;justify-content:flex-end}
.hero-cap .cap-inner{display:flex;align-items:center;gap:13px;color:#e4ebf8;
  font-family:var(--font-body);font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.11em}
.hero-cap .cap-inner .sep{width:1px;height:11px;background:rgba(255,255,255,.34);display:inline-block}
.hero-cap .cap-inner .loc{color:#9fb4dd}
/* Two-tone accent keyword in a headline (ref: Magnolia Hill - accent word inside the head) */
.hl-accent{color:var(--steel)}
.page-hero{background:linear-gradient(120deg,var(--navy-deep),var(--navy));color:#fff;
  padding:72px 0 60px;position:relative;overflow:hidden}
.page-hero h1{color:#fff;font-weight:500;max-width:18ch}
.page-hero p{color:#dde5f4;max-width:60ch;margin:0;font-size:1.22rem;line-height:1.6}
.page-hero .ghostmark{position:absolute;right:-70px;bottom:-80px;width:360px;opacity:.08}

/* ---------- Stat bar ---------- */
.stats{background:var(--ink);color:#fff}
.stats .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.stats .cell{padding:40px 22px;text-align:center;border-right:1px solid rgba(255,255,255,.1)}
.stats .cell:last-child{border-right:0}
.stats .n{font-family:var(--font-display);font-weight:500;font-size:2.5rem;color:#fff;letter-spacing:-.02em;line-height:1}
.stats .l{font-size:.76rem;text-transform:uppercase;letter-spacing:.14em;color:#9fb0cc;margin-top:12px}

/* ---------- Sections ---------- */
section{padding:96px 0}
section.tight{padding:64px 0}
.panel{background:var(--warm)}
.panel-2{background:var(--navy-deep);color:#fff}
.section-head{max-width:64ch;margin-bottom:54px}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center}
.section-head p{font-size:1.18rem;color:var(--mid)}
.rule{width:54px;height:3px;background:var(--navy);margin:0 0 26px}
.center .rule,.section-head.center .rule{margin-left:auto;margin-right:auto}

/* ---------- Feature rows (de-boxed - replaces the old bordered card grid) ---------- */
.features{display:grid;grid-template-columns:repeat(3,1fr);gap:2px 48px}
.feature{padding:30px 0;border-top:1px solid var(--hair)}
.feature .fnum{font-family:var(--font-display);font-size:1.05rem;color:var(--steel);font-weight:500;
  font-feature-settings:"tnum";display:block;margin-bottom:12px}
.feature h3{color:var(--navy);font-size:1.28rem;font-weight:600;margin-bottom:.5rem}
.feature p{font-size:1rem;color:var(--mid);margin:0}
.features.two{grid-template-columns:repeat(2,1fr);gap:2px 64px}

/* ---------- Stat features (the 3 boxes that replace "at a glance" + old platform grid) ---------- */
.statfeat{display:grid;grid-template-columns:repeat(3,1fr);gap:44px}
.statfeat .sf{border-top:3px solid var(--navy);padding-top:22px}
.statfeat .sf .v{font-family:var(--font-display);font-weight:500;font-size:3rem;color:var(--navy);line-height:1;letter-spacing:-.02em}
.statfeat .sf .k{font-size:.8rem;text-transform:uppercase;letter-spacing:.14em;color:var(--steel);margin:14px 0 8px;font-weight:600}
.statfeat .sf p{font-size:1rem;color:var(--mid);margin:0}

/* ---------- Split / prose ---------- */
.split{display:grid;grid-template-columns:1.15fr .85fr;gap:64px;align-items:start}
.split.reverse{grid-template-columns:.85fr 1.15fr}
.prose p{font-size:1.14rem;color:var(--ink);line-height:1.72}
.prose p.muted{color:var(--mid)}
.pull{border-left:3px solid var(--navy);padding:4px 0 4px 26px;font-family:var(--font-display);
  font-weight:500;font-size:1.6rem;color:var(--navy);margin:32px 0;line-height:1.32;font-style:italic}
.checklist{list-style:none;padding:0;margin:0}
.checklist li{padding:16px 0 16px 34px;position:relative;border-bottom:1px solid var(--hair);color:var(--mid);font-size:1.06rem}
.checklist li:before{content:"";position:absolute;left:0;top:24px;width:14px;height:2px;background:var(--navy)}
.checklist li strong{color:var(--ink);font-weight:600}

/* ---------- Big editorial list (why choose us) ---------- */
.biglist{display:grid;grid-template-columns:1fr 1fr;gap:0 72px}
.biglist .item{display:grid;grid-template-columns:auto 1fr;gap:22px;padding:34px 0;border-top:1px solid var(--hair)}
.biglist .item .idx{font-family:var(--font-display);font-size:1.6rem;color:var(--steel-soft);font-weight:500;line-height:1}
.biglist .item h3{color:var(--navy);font-size:1.3rem;margin-bottom:.35rem}
.biglist .item p{margin:0;color:var(--mid);font-size:1.02rem}

/* ---------- Parameters strip (target profile) ---------- */
.params{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.params .p{padding:34px 26px;border-left:1px solid rgba(255,255,255,.16)}
.params .p:first-child{border-left:0}
.params .p .v{font-family:var(--font-display);font-weight:500;font-size:2.2rem;color:#fff;line-height:1}
.params .p .k{font-size:.74rem;text-transform:uppercase;letter-spacing:.14em;color:#9fb0cc;margin-top:12px}

/* ---------- Portfolio: property list + click-to-open detail (Ardent pattern) ---------- */
.subhead{font-family:var(--font-body);text-transform:uppercase;letter-spacing:.18em;font-size:.82rem;
  font-weight:600;color:var(--steel);margin:0 0 26px;display:flex;align-items:center;gap:16px}
.subhead::after{content:"";flex:1;height:1px;background:var(--hair)}
.plist{display:grid;grid-template-columns:1fr;gap:0;border-top:1px solid var(--hair)}
.prow{display:grid;grid-template-columns:150px 1.5fr 1fr auto;gap:28px;align-items:center;
  padding:26px 8px;border-bottom:1px solid var(--hair);cursor:pointer;transition:.18s;text-align:left;
  background:none;border-left:0;border-right:0;border-top:0;width:100%;font-family:inherit;color:inherit}
.prow:hover{background:var(--warm);padding-left:18px;padding-right:18px}
.prow .thumb{width:150px;height:96px;border-radius:4px;overflow:hidden;position:relative;
  background:linear-gradient(135deg,rgba(20,48,107,.10),rgba(61,106,166,.16));
  border:1px dashed var(--steel-soft);display:flex;align-items:center;justify-content:center}
.prow .thumb span{font-size:.54rem;text-transform:uppercase;letter-spacing:.08em;color:var(--steel);
  text-align:center;padding:6px;font-weight:600;line-height:1.4}
.prow .pname{display:block;font-family:var(--font-display);font-size:1.5rem;color:var(--navy);font-weight:600;line-height:1.1;margin-bottom:5px}
.prow .ploc{display:block;font-size:.82rem;color:var(--mid);text-transform:uppercase;letter-spacing:.06em}
.prow .pmeta{font-size:.95rem;color:var(--mid)}
.prow .pmeta b{color:var(--ink);font-weight:600}
.prow .popen{font-family:var(--font-body);font-size:.78rem;font-weight:600;text-transform:uppercase;
  letter-spacing:.1em;color:var(--steel);white-space:nowrap;display:flex;align-items:center;gap:8px}
.prow .popen::after{content:"+";font-size:1.2rem;line-height:1;transition:transform .2s}
.prow:hover .popen{color:var(--navy)}
.prow:hover .popen::after{transform:rotate(90deg)}

/* Modal (property detail popup) */
.modal-overlay{position:fixed;inset:0;background:rgba(11,20,45,.62);backdrop-filter:blur(3px);
  z-index:200;display:none;align-items:flex-start;justify-content:center;padding:40px 20px;overflow-y:auto}
.modal-overlay.open{display:flex}
.modal{background:#fff;max-width:820px;width:100%;border-radius:8px;overflow:hidden;box-shadow:var(--shadow);
  position:relative;animation:pop .22s ease}
@keyframes pop{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.modal .m-photo{position:relative;min-height:220px;
  background:linear-gradient(135deg,rgba(20,48,107,.10),rgba(61,106,166,.18));
  border-bottom:1px dashed var(--steel-soft);display:flex;align-items:flex-end}
.modal .m-photo .ph-tag{margin:16px;background:rgba(14,35,80,.86);color:#fff;font-size:.62rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.08em;padding:8px 13px;border-radius:3px}
.modal .m-body{padding:40px}
.modal .m-eyebrow{text-transform:uppercase;letter-spacing:.16em;font-size:.72rem;font-weight:600;color:var(--steel);margin-bottom:10px}
.modal h3{font-size:2rem;color:var(--navy);margin-bottom:6px}
.modal .m-loc{font-size:.9rem;color:var(--mid);text-transform:uppercase;letter-spacing:.06em;margin-bottom:22px}
.modal .m-body>p{font-size:1.06rem;color:var(--ink);line-height:1.7}
.modal .m-facts{display:grid;grid-template-columns:repeat(2,1fr);gap:0;margin:26px 0 4px;border-top:1px solid var(--hair)}
.modal .m-facts .mf{padding:16px 0;border-bottom:1px solid var(--hair)}
.modal .m-facts .mf b{display:block;font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;color:var(--steel);font-weight:600;margin-bottom:4px}
.modal .m-facts .mf span{font-size:1rem;color:var(--ink)}
.modal .m-tag{display:inline-block;margin-top:22px;background:var(--warm-2);color:var(--navy);
  font-size:.74rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;padding:8px 15px;border-radius:3px}
.modal .m-close{position:absolute;top:16px;right:16px;width:40px;height:40px;border-radius:50%;
  background:rgba(255,255,255,.9);border:1px solid var(--line);cursor:pointer;font-size:1.3rem;line-height:1;
  color:var(--navy);display:flex;align-items:center;justify-content:center;z-index:2}
.modal .m-close:hover{background:var(--navy);color:#fff}

/* ---------- Team ---------- */
.leaders{display:grid;grid-template-columns:repeat(2,1fr);gap:28px 40px}
.leader{display:grid;grid-template-columns:132px 1fr;gap:26px;align-items:start;
  padding:34px 0;border-top:1px solid var(--hair)}
.bio-photo{width:132px;height:158px;border-radius:5px;flex:none;
  background:linear-gradient(135deg,rgba(20,48,107,.08),rgba(61,106,166,.15));
  border:1px dashed var(--steel-soft);display:flex;align-items:center;justify-content:center;
  color:var(--steel);text-align:center;font-family:var(--font-body);font-weight:600;
  text-transform:uppercase;letter-spacing:.05em;font-size:.56rem;line-height:1.4;padding:8px}
.leader h3{color:var(--navy);font-size:1.4rem;margin-bottom:2px}
.leader .role{font-family:var(--font-body);letter-spacing:.04em;
  font-size:.82rem;color:var(--steel);font-weight:600;margin-bottom:14px;text-transform:uppercase}
.leader p{font-size:.98rem;color:var(--mid);margin:0}
.reveal-wrap{margin-top:16px}
.btn.reveal{background:transparent;color:var(--navy);border:1px solid var(--line);
  font-size:.76rem;padding:9px 16px;font-weight:600}
.btn.reveal:hover{background:var(--navy);color:#fff;border-color:var(--navy)}
.reveal-out{display:none;margin-top:14px;font-size:.92rem}
.reveal-out.open{display:block}
.reveal-out a{color:var(--navy);font-weight:600;border-bottom:1px solid var(--line)}
.reveal-out .r-line{padding:3px 0}

/* ---------- CTA band ---------- */
.cta-band{background:var(--navy);color:#fff;text-align:center;padding:88px 0}
.cta-band h2{color:#fff;font-weight:500}
.cta-band p{color:#d3dcee;max-width:52ch;margin:0 auto 30px;font-size:1.2rem}

/* ---------- Contact ---------- */
.contact-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:start}
.pcard{border-left:3px solid var(--navy);padding:6px 0 6px 24px;margin-bottom:18px}
.pcard b{color:var(--navy);font-size:1.15rem;font-family:var(--font-display);font-weight:600;display:block}
.pcard .r{font-family:var(--font-body);text-transform:uppercase;letter-spacing:.12em;font-size:.72rem;color:var(--steel);font-weight:600;margin-bottom:6px}
form.inq label{display:block;font-size:.76rem;text-transform:uppercase;letter-spacing:.08em;
  font-weight:600;color:var(--ink);margin:18px 0 7px}
form.inq input,form.inq textarea,form.inq select{width:100%;padding:13px 15px;border:1px solid var(--line);
  border-radius:4px;font-family:inherit;font-size:1rem;background:#fff;color:var(--ink)}
form.inq input:focus,form.inq textarea:focus,form.inq select:focus{outline:none;border-color:var(--steel)}
form.inq textarea{min-height:130px;resize:vertical}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}
.microline{font-size:.8rem;color:var(--mid);margin-top:22px}

/* ---------- Investors ---------- */
.inv-note{background:var(--warm);border-left:3px solid var(--navy);padding:22px 26px;border-radius:0 4px 4px 0;margin-top:8px}
.inv-note .r{text-transform:uppercase;letter-spacing:.12em;font-size:.72rem;color:var(--steel);font-weight:600;margin-bottom:6px}
.inv-note b{font-family:var(--font-display);font-size:1.2rem;color:var(--navy);font-weight:600}

/* ---------- Map (Florida focus) ---------- */
.map-wrap{position:relative;background:linear-gradient(160deg,#0E2350,#14306B 72%,#1c3f86);
  border-radius:8px;overflow:hidden;padding:30px;color:#fff}
.map-wrap .map-badge{position:absolute;top:16px;right:16px;background:rgba(255,255,255,.13);
  font-family:var(--font-body);font-weight:600;text-transform:uppercase;letter-spacing:.1em;
  font-size:.6rem;padding:6px 12px;border-radius:20px}
.map-wrap h3{color:#fff;font-size:1.3rem;margin-bottom:4px}
.map-wrap .sub{color:#9fb4dd;font-size:.86rem;margin:0 0 12px}
.map-wrap svg{width:100%;height:auto;display:block}
.map-wrap .legend{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:8px 16px}
.map-wrap .legend li{font-size:.8rem;color:#dbe3f3;display:flex;align-items:center;gap:9px}
.map-wrap .legend .dot{width:10px;height:3px;border-radius:2px;background:#7fd4ff;flex:none}
.map-wrap .legend .pin{width:9px;height:9px;border-radius:50%;background:#fff;flex:none}

/* ---------- Photo placeholder ---------- */
.photo-ph{position:relative;border-radius:8px;overflow:hidden;
  background:
    linear-gradient(135deg,rgba(20,48,107,.06),rgba(61,106,166,.11)),
    repeating-linear-gradient(45deg,rgba(20,48,107,.05) 0 2px,transparent 2px 22px);
  border:1px dashed var(--steel-soft);display:flex;align-items:flex-end;min-height:260px}
.photo-ph .skyline{position:absolute;inset:auto 0 0 0;height:58%;opacity:.18;color:var(--navy)}
.photo-ph .ph-tag{position:relative;z-index:2;margin:16px;padding:9px 15px;background:rgba(14,35,80,.86);
  color:#fff;font-family:var(--font-body);font-weight:600;text-transform:uppercase;letter-spacing:.08em;
  font-size:.64rem;border-radius:3px}
.photo-ph.tall{min-height:380px}
.photo-ph.band{min-height:340px}

/* ---------- Real placed imagery ---------- */
.photo-real{position:relative;border-radius:8px;overflow:hidden;height:clamp(300px,42vw,460px)}
.photo-real img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.brand img.logo{height:36px;width:auto;display:block}
.brand img.logo-white{height:31px;width:auto;display:block}
.bio-photo.filled{border:none;background:none;padding:0;overflow:hidden}
.bio-photo img{width:100%;height:100%;object-fit:cover;display:block}
.prow .thumb.filled{border:none}
.prow .thumb img{width:100%;height:100%;object-fit:cover;display:block}
.modal .m-photo.filled{border:none;height:280px}
.modal .m-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

/* ---------- Footer ---------- */
footer.site{background:var(--ink);color:#c1c6d2;padding:66px 0 32px}
footer.site .top{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:40px;margin-bottom:40px}
footer.site h4{color:#fff;text-transform:uppercase;letter-spacing:.1em;font-size:.78rem;font-family:var(--font-body);font-weight:600}
footer.site a{color:#c1c6d2;font-size:.92rem;display:block;padding:4px 0;cursor:pointer}
footer.site a:hover{color:#fff}
footer.site p{font-size:.92rem;line-height:1.6}
/* Footer tagline. The services sentence carries an inline link, and the generic
   footer.site a rule above is display:block - without this override the link would
   break onto its own line and split the sentence in half. */
footer.site .f-tag{max-width:46ch}
footer.site .f-tag a{display:inline;padding:0;font-size:inherit;color:#e7eaf1;
  border-bottom:1px solid rgba(255,255,255,.32);overflow-wrap:anywhere}
footer.site .f-tag a:hover{color:#fff;border-bottom-color:#fff}
/* The footer stays three columns at every width. "crossmarcservices.com" is one
   unbreakable token, so without these two the first column's min-content width
   pushes the whole grid past the viewport and the page scrolls sideways on a phone. */
footer.site .top > *{min-width:0}
/* On a phone the three footer columns leave the first one too narrow for the
   services sentence - the domain broke mid-word ("crossmarcservices.c / om").
   One column below 760px gives it a full-width measure and it sets on one line. */
@media(max-width:760px){
  footer.site .top{grid-template-columns:1fr;gap:34px}
  footer.site .f-tag{max-width:none}
}
footer.site .fine{border-top:1px solid rgba(255,255,255,.12);padding-top:22px;font-size:.78rem;color:#868da0;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}
.draft-flag{background:#b7791f;color:#fff;font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;
  text-align:center;padding:8px;font-weight:600}

/* (Legacy dropdown nav removed 2026-08-14 — replaced by the full-screen overlay menu.) */

/* ---------- Single-file review shell ---------- */
.btn.cta-arrow::after{content:"→";margin-left:10px;display:inline-block;transition:transform .2s}
.btn.cta-arrow:hover::after{transform:translateX(4px)}

/* ---------- Responsive ---------- */
@media(max-width:900px){
  body{font-size:16px}
  .stats .grid{grid-template-columns:repeat(2,1fr)}
  .stats .cell:nth-child(2){border-right:0}
  .features,.features.two,.statfeat,.split,.split.reverse,.contact-grid,.biglist{grid-template-columns:1fr;gap:0}
  .split,.split.reverse{gap:40px}
  .statfeat{gap:36px}
  .feature{border-top:1px solid var(--hair)}
  .params{grid-template-columns:repeat(2,1fr)}
  .params .p:nth-child(3){border-left:0}
  .prow{grid-template-columns:88px 1fr;gap:16px;row-gap:8px}
  .hero.hero-photo .container{padding-top:88px;padding-bottom:96px}
  .hero.hero-photo .hero-bg::after{background:
    linear-gradient(90deg,rgba(9,18,42,.94),rgba(12,28,66,.78)),
    linear-gradient(0deg,rgba(9,18,42,.7),rgba(9,18,42,0) 42%)}
  .hero-cap{display:none}
  .prow .thumb{width:88px;height:66px}
  .prow .pmeta,.prow .popen{grid-column:2}
  .leaders{grid-template-columns:1fr}
  .leader{grid-template-columns:104px 1fr;gap:18px}
  .modal .m-body{padding:28px}
  .modal .m-facts{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr}
  .hero .ghostmark{opacity:.06}
}

/* =====================================================================
   STEP-UP PASS (2026-08-13) - edge + polish adapted to the CrossMarc navy/serif palette.
   Refs studied (adapted, not cloned): Ardent "Investment Spotlight" photo-tile
   gallery; Magnolia Hill offset corner-bracket buttons + two-tone heads; SKB
   full-bleed photography + type scale contrast. Prior pass held back on edge;
   this brings the bracket language + photo gallery the client asked for.
   ===================================================================== */

/* ---- Offset corner-bracket buttons (Magnolia move, brought back) ---- */
.btn.light,nav.links a.btn.contact,.btn.bracket{position:relative;overflow:visible}
.btn.light{border-radius:0}
.btn.light::before,nav.links a.btn.contact::before,.btn.bracket::before{
  content:"";position:absolute;top:-6px;right:-6px;width:15px;height:15px;
  border-top:2px solid currentColor;border-right:2px solid currentColor;
  opacity:.85;transition:top .25s ease,right .25s ease,opacity .25s ease;pointer-events:none}
.btn.light:hover::before,nav.links a.btn.contact:hover::before,.btn.bracket:hover::before{
  top:-9px;right:-9px;opacity:1}
/* light buttons: white bracket even on hover (button fills white, bracket sits outside) */
.btn.light:hover{color:var(--navy)}
.btn.light:hover::before{border-color:#fff}

/* ---- Section subtitle upgrade (portfolio buckets) ---- */
.subhead{font-size:.86rem;letter-spacing:.2em;color:var(--navy)}
.subhead::before{content:"";width:14px;height:14px;flex:none;
  border-left:2px solid var(--steel);border-bottom:2px solid var(--steel);align-self:flex-end;margin-bottom:2px}

/* ---- Portfolio photo-tile gallery (Ardent Investment Spotlight pattern) ---- */
.pgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.pgrid + .subhead{margin-top:64px}
.pgrid.featured{grid-template-columns:1fr}
.ptile{position:relative;display:block;width:100%;padding:0;border:0;cursor:pointer;overflow:hidden;
  text-align:left;background:var(--navy-deep);font-family:inherit;color:#fff;
  aspect-ratio:16/10;border-radius:2px;box-shadow:var(--shadow-soft);-webkit-tap-highlight-color:transparent}
.pgrid.featured .ptile{aspect-ratio:24/9}
.ptile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.ptile::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(9,18,42,.12) 0%,rgba(9,18,42,.18) 42%,rgba(9,18,42,.84) 100%)}
.ptile:hover img,.ptile:focus-visible img{transform:scale(1.06)}
.ptile:focus-visible{outline:3px solid var(--steel);outline-offset:3px}
/* top-left corner bracket appears on hover (edge, cohesive with buttons) */
.ptile::before{content:"";position:absolute;top:16px;left:16px;z-index:3;width:18px;height:18px;
  border-top:2px solid rgba(255,255,255,.75);border-left:2px solid rgba(255,255,255,.75);
  opacity:0;transform:translate(5px,5px);transition:.3s ease;pointer-events:none}
.ptile:hover::before,.ptile:focus-visible::before{opacity:1;transform:none}
.ptile-cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:26px 28px;
  display:flex;flex-direction:column;gap:7px}
.ptile .pname{font-family:var(--font-display);font-weight:600;line-height:1.03;letter-spacing:-.01em;
  color:#fff;font-size:clamp(1.5rem,2.3vw,2.05rem)}
.ptile .ploc{font-family:var(--font-body);font-weight:600;font-size:.7rem;text-transform:uppercase;
  letter-spacing:.15em;color:#c9d6ee}
.ptile-plus{position:absolute;top:15px;right:15px;z-index:3;width:38px;height:38px;
  display:flex;align-items:center;justify-content:center;background:rgba(20,48,107,.88);color:#fff;
  font-size:1.35rem;line-height:0;padding-bottom:3px;transition:.25s ease}
.ptile:hover .ptile-plus{background:var(--steel);transform:translateY(-1px)}
.pgrid.featured .ptile .pname{font-size:clamp(1.7rem,3vw,2.6rem)}
/* no-photo tile - graceful branded placeholder for an asset awaiting photography */
.ptile.noimg{background:linear-gradient(135deg,var(--navy-deep) 0%,var(--navy) 58%,#1c3f86 100%)}
.ptile.noimg::after{background:linear-gradient(180deg,rgba(9,18,42,0) 45%,rgba(9,18,42,.5) 100%)}
.ptile .ptile-ghost{position:absolute;top:46%;left:50%;transform:translate(-50%,-50%);z-index:1;
  width:118px;height:118px;opacity:.16;color:#fff}
.ptile .ptile-note{position:absolute;top:15px;left:15px;z-index:3;font-family:var(--font-body);
  font-size:.58rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:#c9d6ee;
  background:rgba(255,255,255,.1);padding:6px 11px;border-radius:2px}

/* ---- Modal photo placeholder (asset awaiting photography) tuned to match ---- */
.modal .m-photo{min-height:200px}

@media(max-width:760px){
  .pgrid,.pgrid.featured{grid-template-columns:1fr;gap:16px}
  .ptile,.pgrid.featured .ptile{aspect-ratio:16/10}
  .ptile-cap{padding:22px 22px}
}

/* =====================================================================
   DYNAMIC / MOTION PASS (2026-08-14) - scroll reveals, count-up, hero
   Ken-Burns, text-grid hover life. PROGRESSIVE ENHANCEMENT: the hidden
   reveal state is scoped under .js (set inline in <head>), so if JS never
   runs, every section is fully visible. Scroll-reveal uses the class
   .reveal-fx (NOT .reveal, which already names the contact-reveal button).
   ===================================================================== */

/* ---- Scroll reveal: hidden only when JS is active ---- */
.js .reveal-fx{opacity:0;transform:translateY(14px);
  transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.js .reveal-fx.is-in{opacity:1;transform:none}

/* Interactive cards double as reveal targets - one combined transition so
   the reveal slide AND the hover lift/shadow both animate cleanly. */
.js .feature.reveal-fx,.js .biglist .item.reveal-fx,.js .statfeat .sf.reveal-fx,
.feature,.biglist .item,.statfeat .sf{
  transition:opacity .6s ease,transform .32s cubic-bezier(.2,.7,.2,1),
    box-shadow .28s ease,border-color .28s ease}
.js .checklist li.reveal-fx{transition:opacity .6s ease,transform .5s cubic-bezier(.2,.7,.2,1),
  background .25s ease,padding-left .25s ease,color .22s ease}

/* ---- Hero Ken-Burns (homepage photo hero only) ---- */
@keyframes cm-kenburns{from{transform:scale(1.002)}to{transform:scale(1.07)}}
.hero.hero-photo .hero-bg img{transform-origin:50% 42%;will-change:transform;
  animation:cm-kenburns 24s ease-in-out infinite alternate}

/* ---- Text-grid life: hover on feature cards, editorial list, stat features ---- */
.feature .fnum,.biglist .item .idx{transition:color .22s ease}
.feature:hover{transform:translateY(-3px);border-top-color:var(--navy);
  box-shadow:0 20px 44px -30px rgba(14,35,80,.5)}
.feature:hover .fnum{color:var(--navy)}
.statfeat .sf:hover{transform:translateY(-3px);border-top-color:var(--steel);
  box-shadow:0 20px 44px -30px rgba(14,35,80,.5)}
.biglist .item:hover{transform:translateY(-3px);border-top-color:var(--navy);
  box-shadow:0 20px 44px -30px rgba(14,35,80,.5)}
.biglist .item:hover .idx{color:var(--steel)}
/* Once revealed, .reveal-fx.is-in pins transform:none (0,3,0); the hover lift
   needs higher specificity to win. Base rules above still cover the no-JS case. */
.js .feature.reveal-fx:hover{transform:translateY(-3px)}
.js .statfeat .sf.reveal-fx:hover{transform:translateY(-3px)}
.js .biglist .item.reveal-fx:hover{transform:translateY(-3px)}

/* Lifecycle / checklist rows: accent bar grows, row tints and eases right */
.checklist li:before{transition:width .25s ease,background .22s ease}
.checklist li:hover{background:var(--warm);padding-left:44px;color:var(--ink)}
.checklist li:hover:before{width:22px;background:var(--steel)}

/* =====================================================================
   ROUND-2 CLIENT REVISIONS (2026-08-19) — Sejla Misic list of 22.
   Item numbers below refer to CrossMarc-Sejla-revisions-round2-20260817.md
   ===================================================================== */

/* ---- (20) Display face is now Source Serif 4. It runs optically lighter than
   Fraunces at the same numeric weight, so the places that were set to 500 get
   nudged to 600 to hold the same presence. ---- */
.hero h1,.page-hero h1,.cta-band h2,.stats .n,.statfeat .sf .v,.params .p .v,.pull{font-weight:600}
h1,h2{letter-spacing:-.02em}

/* ---- (2) Home hero: shift the photo right so the Publix sign clears the
   headline column, and pull the scrim's dark falloff back to the text zone so
   the storefront actually reads. The bg BOX is widened past the right edge
   (the <img> itself owns the Ken-Burns transform, so it must not be offset). ---- */
.hero.hero-photo .hero-bg{right:-30%}
.hero.hero-photo .hero-bg img{object-position:55% 46%}
.hero.hero-photo .hero-bg::after{
  background:
    linear-gradient(93deg,rgba(9,18,42,.95) 0%,rgba(11,25,60,.9) 22%,rgba(12,28,66,.62) 42%,rgba(12,28,66,.2) 62%,rgba(12,28,66,.1) 100%),
    linear-gradient(0deg,rgba(9,18,42,.62) 0%,rgba(9,18,42,0) 32%)}

/* ---- (3) LP-deck graphics replace the section numbers. Mirrors the layout
   Sejla emailed as the example: line-art icon, uppercase navy title, two
   columns divided by hairlines. ---- */
.features.lp{grid-template-columns:repeat(2,1fr);gap:0 64px}
/* icon | (title over copy) - the icon spans both rows, so the three children must be
   placed explicitly; auto-placement would drop the paragraph under the icon. */
.features.lp .feature{display:grid;grid-template-columns:auto 1fr;gap:2px 24px;
  padding:32px 0;align-items:start}
.features.lp .feature .ficon{grid-column:1;grid-row:1/span 2}
.features.lp .feature h3{grid-column:2;grid-row:1;align-self:center}
.features.lp .feature p{grid-column:2;grid-row:2}
.ficon{width:52px;height:52px;flex:none;color:var(--steel);
  transition:color .22s ease,transform .32s cubic-bezier(.2,.7,.2,1)}
.ficon svg{width:100%;height:100%;display:block;stroke:currentColor;fill:none;
  stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.features.lp .feature:hover .ficon{color:var(--navy);transform:translateY(-2px)}
.features.lp .feature h3{font-family:var(--font-body);font-size:.86rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.11em;color:var(--navy);line-height:1.35;margin-bottom:.6rem}
.features.lp .feature p{font-size:1rem;line-height:1.62}
@media(max-width:900px){
  .features.lp{grid-template-columns:1fr}
  .features.lp .feature{gap:20px}
  .ficon{width:44px;height:44px}
}

/* ---- (7)(9)(16) Blended photo + title page heroes. Previously the inner pages
   ran a flat gradient hero and then a SEPARATE photo band underneath, which is
   the "choppy" split Sejla called out. These now work like the home hero: the
   photograph sits behind the title under a scrim. Also lifts every inner page
   toward the home page's density. ---- */
.page-hero.hero-photo{background:var(--navy-deep);padding:0}
.page-hero.hero-photo .hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.page-hero.hero-photo .hero-bg img{width:100%;height:100%;object-fit:cover;
  object-position:center 46%;display:block}
.page-hero.hero-photo .hero-bg::after{content:"";position:absolute;inset:0;
  background:
    linear-gradient(93deg,rgba(9,18,42,.94) 0%,rgba(11,25,60,.86) 30%,rgba(12,28,66,.55) 62%,rgba(12,28,66,.3) 100%),
    linear-gradient(0deg,rgba(9,18,42,.6) 0%,rgba(9,18,42,0) 34%)}
.page-hero.hero-photo .container{position:relative;z-index:2;padding-top:104px;padding-bottom:100px}
.page-hero.hero-photo h1{max-width:24ch}
.page-hero.hero-photo .ghostmark{z-index:1}
.page-hero.hero-photo p{color:#e2e8f4}
/* names the asset in the hero, same idiom as the home hero caption */
.page-hero.hero-photo .hero-cap{bottom:20px}
@media(max-width:900px){
  .page-hero.hero-photo .container{padding-top:78px;padding-bottom:76px}
  .page-hero.hero-photo .hero-bg::after{background:
    linear-gradient(90deg,rgba(9,18,42,.94),rgba(12,28,66,.8)),
    linear-gradient(0deg,rgba(9,18,42,.7),rgba(9,18,42,0) 44%)}
}

/* ---- (16) Density: inner pages carried more air than the home page. Tighten the
   vertical rhythm and give the editorial list real presence. ---- */
section{padding:84px 0}
section.tight{padding:56px 0}
.section-head{margin-bottom:46px}
.biglist .item{padding:30px 0}
.cta-band{padding:78px 0}

/* ---- (8)(11) Numbering removed site-wide. On Company the 01-06 slots are
   replaced by the matching LP-deck icons, so the two-column cell layout stays. ---- */
.biglist .item{grid-template-columns:auto 1fr;gap:24px}
.biglist .item h3{color:var(--navy);font-size:1.22rem;margin-bottom:.4rem;
  font-family:var(--font-body);font-weight:700;text-transform:uppercase;
  letter-spacing:.1em;line-height:1.36}
.biglist .item{border-top:1px solid var(--hair);position:relative}
.biglist .item::before{content:"";position:absolute;top:-1px;left:0;width:0;height:1px;
  background:var(--navy);transition:width .35s cubic-bezier(.2,.7,.2,1)}
.biglist .item:hover::before{width:100%}

/* ---- (1) The real CrossMarc CM mark now carries the background lockup on the
   navy CTA band (and the nav panel watermark + favicon). Recovered from the
   client's own LP deck, so it is the real mark, not the placeholder. ---- */
.cta-band{position:relative;overflow:hidden}
.cta-band .container{position:relative;z-index:1}
.cta-mark{position:absolute;right:-46px;top:50%;transform:translateY(-50%);
  width:min(400px,34vw);color:#fff;opacity:.07;z-index:0;pointer-events:none}
.cta-mark svg{width:100%;height:auto;display:block}
@media(max-width:900px){.cta-mark{opacity:.05;right:-70px}}

/* ---- (17) The Menu panel opens on HOVER, not click ("users won't know to
   click"). JS adds .hover-ready once pointer:fine is confirmed; the click
   handler stays wired so keyboard and touch keep working. ---- */
.menu-toggle{position:relative}
.nav-hover-zone{position:absolute;inset:-14px -18px -22px -18px;content:"";display:block}

/* ---- (12)(13)(14)(15) Florida map rebuilt: true-projection coastline, major
   identifying cities, real highway shields as the legend. ---- */
.map-wrap{padding:28px 26px 24px}
.map-wrap svg.fl-map{width:100%;height:auto;display:block;margin:4px 0 2px}
.fl-land{fill:rgba(255,255,255,.12);stroke:rgba(159,180,221,.7);stroke-width:1.6;stroke-linejoin:round}
.fl-lake{fill:rgba(120,158,220,.32);stroke:rgba(180,200,235,.55);stroke-width:1}
.fl-route{fill:none;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round;opacity:.95}
.fl-city{fill:#fff}
.fl-city-t{fill:#eef3fc;font-family:'Inter',sans-serif;font-size:14.5px;font-weight:500}
.fl-cap-t{fill:#ffffff;font-family:'Inter',sans-serif;font-size:14.5px;font-weight:700}
.fl-pin-t{fill:#ffd27f;font-family:'Inter',sans-serif;font-size:13.5px;font-weight:600}
.fl-shield-n{font-family:'Inter',sans-serif;font-weight:700;text-anchor:middle;fill:#fff}
.fl-shield-us{font-family:'Inter',sans-serif;font-weight:700;text-anchor:middle;fill:#111}
/* legend built from actual highway signs rather than colour chips */
.map-wrap .legend.shields{grid-template-columns:1fr 1fr;gap:11px 16px;margin-top:18px}
.map-wrap .legend.shields li{align-items:center;gap:11px;font-size:.78rem;color:#dbe3f3}
.map-wrap .legend.shields svg{width:26px;height:26px;flex:none;display:block}
.map-wrap .legend .holding{width:11px;height:11px;flex:none;border-radius:50%;
  background:#ffd27f;border:1.5px solid var(--navy-deep);box-shadow:0 0 0 1.5px rgba(255,210,127,.45)}
@media(max-width:900px){
  .map-wrap .legend.shields{grid-template-columns:1fr}
}

/* ---- Reduced motion additions for the round-2 pieces ---- */
@media (prefers-reduced-motion: reduce){
  .features.lp .feature:hover .ficon{transform:none}
  .biglist .item:hover::before{width:0}
}

/* ---- Reduced motion: no transforms/animation, show final state ---- */
@media (prefers-reduced-motion: reduce){
  .js .reveal-fx,.js .reveal-fx.is-in{opacity:1;transform:none;transition:none}
  .hero.hero-photo .hero-bg img{animation:none}
  .feature,.statfeat .sf,.biglist .item,.checklist li,.ptile img,.dropdown{transition:none}
  .feature:hover,.statfeat .sf:hover,.biglist .item:hover{transform:none;box-shadow:none}
  .js .feature.reveal-fx:hover,.js .statfeat .sf.reveal-fx:hover,.js .biglist .item.reveal-fx:hover{transform:none}
  .checklist li:hover{padding-left:34px}
  .ptile:hover img,.ptile:focus-visible img{transform:none}
  /* Overlay menu: no fade/slide, just show; keep color feedback on hover/focus */
  .js .np-sheet{transition:none}
  .js .np-nav,.js .np-feature,.js .np-aside{opacity:1;transform:none;transition:none}
  .js .nav-panel.open .np-nav,.js .nav-panel.open .np-feature,.js .nav-panel.open .np-aside{transition-delay:0s}
  .js .np-feature-media img{transition:none}
}

/* enquiry form: honeypot + status line (added 2026-08-24 with the capture-first endpoint) */
.hp-wrap{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hp-wrap input,.hp-wrap label{width:1px;height:1px;padding:0;border:0;font-size:1px}
.form-status{margin-top:14px;line-height:1.55}
.form-status.ok{color:#1d7a37}
.form-status.err{color:#b3261e}

/* 2026-08-25 Sejla round 3 */
footer.site .f-block{margin:0 0 18px}
footer.site .f-block:last-child{margin-bottom:0}
footer.site .f-block a{padding:2px 0}
.m-leasing{margin:18px 0 0}
.m-leasing a{display:inline-block;font-size:.86rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--navy);text-decoration:none;border-bottom:1px solid rgba(20,48,107,.35);padding-bottom:2px}
.m-leasing a:hover,.m-leasing a:focus-visible{border-bottom-color:var(--navy)}
.acq-cta{margin:22px 0 0}
.btn.small{padding:11px 20px;font-size:.72rem}
.topic-note{margin:0 0 18px;padding:10px 14px;background:var(--warm-2);border-left:3px solid var(--steel);font-size:.9rem}

/* ---- Florida map rebuild 2026-08-25 (Sejla: "a little messy and not clear") ----
   Legibility over features. Real 68-point coastline in the existing verified
   equirectangular projection (cos30 corrected) so every city and pin keeps its
   true position. Interstates were 5 saturated colours at 3.2px/0.95 opacity —
   that was the noise; they are now one muted tone reading as context. Property
   pins become the only bright thing on the map, and each one is a link. */
.split.map-split{grid-template-columns:.78fr 1.22fr;gap:48px}
.map-wrap svg.fl-map{width:100%;height:auto;display:block;margin:6px 0 4px;overflow:visible}
.fl-land{fill:rgba(255,255,255,.10);stroke:rgba(159,180,221,.55);stroke-width:1.1;stroke-linejoin:round;stroke-linecap:round}
.fl-lake{fill:rgba(14,35,80,.55);stroke:rgba(159,180,221,.35);stroke-width:.9}
.fl-route{fill:none;stroke:rgba(159,180,221,.34);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.fl-city{fill:rgba(238,243,252,.62)}
.fl-city-t{fill:rgba(238,243,252,.66);font-family:'Inter',sans-serif;font-size:12.5px;font-weight:500;letter-spacing:.01em}
.fl-cap-t{fill:rgba(238,243,252,.78);font-family:'Inter',sans-serif;font-size:12.5px;font-weight:600}

/* property pins — the only saturated element on the map */
.fl-pin{cursor:pointer}
.fl-pin-halo{fill:rgba(255,210,127,.16);opacity:0;transition:opacity .2s ease}
.fl-pin-dot{fill:#ffd27f;stroke:#0E2350;stroke-width:1.6;transition:r .18s ease}
.fl-pin-n{fill:#0E2350;font-family:'Inter',sans-serif;font-size:8.4px;font-weight:700;pointer-events:none}
.fl-pin:hover .fl-pin-halo,.fl-pin:focus-visible .fl-pin-halo{opacity:1}
.fl-pin:hover .fl-pin-dot,.fl-pin:focus-visible .fl-pin-dot{r:8}
.fl-pin:focus{outline:none}
.fl-pin:focus-visible .fl-pin-dot{stroke:#fff;stroke-width:2.2}

/* numbered holdings list — clickable, and the label fallback on small screens */
.fl-holdings{list-style:none;margin:18px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:8px 16px;counter-reset:none}
.fl-holdings a{display:flex;align-items:center;gap:10px;text-decoration:none;color:#dbe3f3;padding:3px 0}
.fl-holdings .n{flex:none;width:20px;height:20px;border-radius:50%;background:#ffd27f;color:#0E2350;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center}
.fl-holdings .t{min-width:0;display:flex;flex-direction:column;line-height:1.25}
.fl-holdings b{font-size:.82rem;font-weight:600;color:#eef3fc;overflow-wrap:anywhere}
.fl-holdings em{font-style:normal;font-size:.72rem;color:#9fb4dd}
.fl-holdings a:hover b,.fl-holdings a:focus-visible b{color:#fff}
.fl-holdings a:hover .n,.fl-holdings a:focus-visible .n{background:#fff}

@media (max-width:900px){ .split.map-split{grid-template-columns:1fr;gap:34px} }
@media (max-width:640px){
  /* labels collide at phone widths — the numbered list below carries the names */
  .fl-city-t,.fl-cap-t{font-size:15px}
  /* Touch targets: at phone widths the map scales to ~0.54, so a 13-unit halo
     rendered only ~14px across - under the 24px minimum and effectively
     untappable. These bring the hit area to ~28px and the dot to ~10px. */
  .fl-pin-halo{r:30}
  .fl-pin-dot{r:9;stroke-width:2}
  .fl-pin-n{font-size:10px}
  .fl-pin:hover .fl-pin-dot,.fl-pin:focus-visible .fl-pin-dot{r:11}
  .fl-holdings{grid-template-columns:1fr;gap:10px}
  /* badge collided with the heading at 360 - let it flow above instead */
  .map-wrap{position:relative}
  .map-wrap .map-badge{position:static;top:auto;right:auto;display:inline-block;margin:0 0 10px}
  .map-wrap h3{margin-top:0}
  .map-wrap{padding:22px 14px 20px}
}
@media (prefers-reduced-motion:reduce){ .fl-pin-halo,.fl-pin-dot{transition:none} }