/* Rosenthal & Excell Commercial Real Estate Services, Inc.
   Valley Digital 2026. Palette is the firm's own signage, per Howard 2026-08-17:
   cream #FAF9F4, green-black ink #1B2A1C, forest #3F6B36 on the small labels. */

:root{
  /* Cream ground, black text, the firm's green as the single accent.
     Serif headline over a neutral grotesque: the structure CBRE, Tishman Speyer
     and Marcus & Millichap all use, and the one Coreland does not. */
  --paper:#F8F4E9;
  --paper-2:#F2EFE5;
  --paper-3:#E6E1D2;
  --card:#FDFCF8;
  --ink:#1A1A18;
  --ink-70:#4A4A46;
  --ink-45:#63635B;
  --line:#E3DFD2;
  --line-2:#CDC8B8;
  --ox:#32622A;
  --ox-dk:#254B1F;
  --ox-lt:#7FA277;
  --brass:#32622A;
  --brass-lt:#B7C7B2;
  --display:'Frank Ruhl Libre',Georgia,'Times New Roman',serif;
  --serif:'Frank Ruhl Libre',Georgia,'Times New Roman',serif;
  --sans:'Public Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --wrap:1200px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:17px;line-height:1.65;font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
iframe{display:block;width:100%;border:0}
a{color:inherit}
::selection{background:var(--ox);color:var(--paper)}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px}
.serif{font-family:var(--serif)}

/* ---------- type ---------- */
h1,h2,h3,h4{font-family:var(--serif);font-weight:700;letter-spacing:-.012em;line-height:1.2}
h1{font-family:var(--display);font-weight:500;font-size:clamp(32px,4.2vw,50px);line-height:1.04;letter-spacing:-.014em}
h2{font-size:clamp(25px,2.9vw,34px);letter-spacing:-.01em}
h3{font-size:20px;letter-spacing:-.01em}
p{color:var(--ink-70)}

.eyebrow{
  font-family:var(--sans);font-size:11px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--brass);
  display:flex;align-items:center;gap:12px;flex-wrap:nowrap;
}
.eyebrow::after{content:"";flex:1 1 44px;max-width:44px;height:1px;background:var(--line-2)}
.eyebrow.center{justify-content:center}
.eyebrow.center::before{content:"";flex:0 0 44px;height:1px;background:var(--line-2)}

.lede{font-size:20px;line-height:1.6;color:var(--ink-70);max-width:60ch}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--sans);font-size:15px;font-weight:600;letter-spacing:.01em;
  padding:16px 24px;border-radius:2px;text-decoration:none;border:1px solid transparent;
  transition:background .18s ease,color .18s ease,border-color .18s ease;
}
.btn-primary{background:var(--ox);color:#F8F4E9}
.btn-primary:hover{background:var(--ox-dk)}
.btn-outline{border-color:var(--line-2);color:var(--ink);background:transparent}
.btn-outline:hover{border-color:var(--ox);color:var(--ox)}
.btn-light{background:var(--paper);color:var(--ox)}
.btn-light:hover{background:var(--paper-3)}

/* ---------- header ---------- */
.topbar{background:var(--ink);color:#A6A69E;font-size:13px}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;gap:18px;min-height:40px;flex-wrap:wrap}
.topbar a{color:var(--paper);text-decoration:none;font-weight:600;display:inline-block;padding:4px 0}
.topbar a:hover{color:var(--brass-lt)}
.topbar .sep{color:#8B8B83;padding:0 10px}

header.site{position:sticky;top:0;z-index:50;background:rgba(248,244,233,.94);backdrop-filter:saturate(1.4) blur(8px);border-bottom:1px solid var(--line)}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;gap:26px;min-height:82px}
.brand{display:flex;align-items:center;gap:13px;text-decoration:none;flex-shrink:0}
.brand svg{flex:0 0 auto;display:block}
.brand-txt{font-family:var(--serif);font-weight:700;font-size:20px;letter-spacing:-.015em;line-height:1.05;color:var(--ink)}
.brand-txt span{display:block;font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.155em;text-transform:uppercase;color:var(--ink-45);margin-top:4px}

nav.main{display:flex;align-items:center;gap:30px}
nav.main a{
  font-size:15px;font-weight:500;text-decoration:none;color:var(--ink-70);
  padding:4px 0;border-bottom:2px solid transparent;transition:color .16s,border-color .16s;
}
nav.main a:hover{color:var(--ink)}
nav.main a.on{color:var(--ink);border-bottom-color:var(--brass)}

.nav-toggle{display:none;background:none;border:1px solid var(--ink-45);border-radius:2px;padding:12px 12px;min-width:46px;min-height:46px;cursor:pointer}
.nav-toggle span{display:block;width:19px;height:2px;background:var(--ink);margin:4px 0}

/* ---------- hero ---------- */
.hero{border-bottom:1px solid var(--line);background:var(--paper)}
.hero .wrap{display:grid;grid-template-columns:1.02fr .98fr;gap:60px;align-items:center;padding:64px 24px 88px}
.hero h1{margin:20px 0 0}
.hero .lede{margin-top:20px}
.hero-cta{display:flex;gap:14px;margin-top:32px;flex-wrap:wrap}
.hero-figure{position:relative}
.hero-media{position:relative;width:100%;aspect-ratio:3/2;overflow:hidden;background:var(--paper-3);border-radius:2px}
.hero-media img,.hero-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.hero-media .drift{animation:drift 34s ease-in-out infinite alternate;transform-origin:58% 62%}
@keyframes drift{from{transform:scale(1.02)}to{transform:scale(1.10)}}
.hero-figure figcaption{
  margin-top:12px;padding-top:12px;border-top:1px solid var(--line-2);
  font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.15em;
  text-transform:uppercase;color:var(--ink-45);
}

/* ---------- stat bar ---------- */
.stats{background:var(--paper-2);border-bottom:1px solid var(--line)}
.stats .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;padding:0 28px}
.stat{padding:40px 24px 32px;position:relative}
.stat + .stat::before{content:"";position:absolute;left:-1px;top:34px;bottom:34px;width:1px;background:var(--line-2)}
.stat .n{font-family:var(--display);font-size:clamp(32px,4.2vw,50px);font-weight:500;letter-spacing:-.02em;color:var(--ox);line-height:1}
.stat .n sup{font-size:.5em;font-weight:600;vertical-align:super;color:var(--brass);margin-left:2px}
.stat .k{font-size:13px;font-weight:500;color:var(--ink-45);margin-top:12px;letter-spacing:.02em}

/* ---------- generic section ---------- */
section.pad{padding:88px 0}
section.pad-sm{padding:64px 0}
.sec-head{max-width:64ch}
.sec-head h2{margin-top:16px}
.sec-head p{margin-top:16px;font-size:17px}
.center{text-align:center;margin-left:auto;margin-right:auto}

/* ---------- statement: an editorial pull-quote, not a colour slab ---------- */
.statement{background:var(--paper-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.statement .wrap{padding-top:88px;padding-bottom:88px}
.statement .rule{width:70px;height:3px;background:var(--ox);margin-bottom:24px}
.statement .eyebrow{color:var(--brass)}
.statement blockquote{margin:24px 0 0}
/* roman, not italic: Frank Ruhl Libre ships no true italic */
.statement q{
  font-family:var(--display);font-weight:400;font-style:normal;
  font-size:clamp(25px,2.9vw,34px);line-height:1.24;letter-spacing:-.012em;
  color:var(--ink);display:block;quotes:none;max-width:15.5em;text-wrap:balance;
}
.statement cite{
  display:block;margin-top:24px;font-family:var(--sans);font-style:normal;
  font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--brass);
}
.statement .after{
  margin-top:48px;padding-top:32px;border-top:1px solid var(--line-2);
  display:grid;grid-template-columns:1fr 1.35fr;gap:48px;align-items:start;
}
.statement .after h2{margin:0;max-width:13ch;text-wrap:balance}
.statement .after p{margin:0;font-size:17px;line-height:1.65;color:var(--ink-70)}

/* ---------- services ---------- */
.svc-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:48px;border-top:1px solid var(--line);border-left:1px solid var(--line)}
.svc{padding:40px 40px 40px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);position:relative;background:var(--card)}
.svc .idx{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.14em;color:var(--brass)}
.svc h3{margin:16px 0 6px;font-size:20px}
.svc .sub{font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--brass)}
.svc p{margin-top:16px;font-size:15px}
.svc ul{list-style:none;margin-top:16px;border-top:1px solid var(--line);padding-top:16px}
.svc li{font-size:15px;color:var(--ink-70);padding:4px 0 5px 19px;position:relative}
.svc li::before{content:"";position:absolute;left:0;top:14px;width:7px;height:1px;background:var(--brass)}

/* ---------- roster ---------- */
.roster{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:48px}
.roster{list-style:none}
.roster li,.roster div{background:var(--card);padding:24px 20px}
.roster li strong,.roster strong{display:block;font-family:var(--serif);font-size:17px;font-weight:700;letter-spacing:-.01em;line-height:1.3}
.roster li span,.roster span{display:block;font-size:11px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-45);margin-top:8px}

/* ---------- people ---------- */
.people{display:grid;grid-template-columns:1fr 1fr;gap:44px;margin-top:48px}
.person{display:grid;grid-template-columns:150px 1fr;gap:26px;align-items:start}
.person img{width:150px;height:190px;object-fit:cover;object-position:center top;border-radius:2px;filter:grayscale(1) contrast(1.04);background:var(--paper-3)}
.person h3{font-size:20px}
.person .role{font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--brass);margin-top:8px}
.person p{font-size:15px;margin-top:12px}

/* ---------- property cards ---------- */
.props{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin-top:48px}
.prop{border:1px solid var(--line);border-radius:2px;overflow:hidden;background:var(--card)}
.prop img{width:100%;aspect-ratio:16/9;object-fit:cover}
.prop .body{padding:24px 24px 32px}
.prop h3{font-size:20px}
.prop dl{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;margin-top:16px;font-size:15px;border-top:1px solid var(--line);padding-top:16px}
.prop dt{color:var(--ink-45)}
.prop dd{text-align:right;font-weight:600}

/* ---------- cta band ---------- */
.cta{background:var(--paper-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.cta .wrap{display:grid;grid-template-columns:1fr auto;gap:44px;align-items:center;padding:64px 24px}
.cta h2{max-width:20ch}
.cta p{margin-top:12px;max-width:56ch}

/* ---------- contact / form ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:64px;align-items:start}
.detail{border-top:1px solid var(--line);padding:20px 0;display:grid;grid-template-columns:130px 1fr;gap:20px}
.detail dt{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-45);padding-top:3px}
.detail dd{font-size:17px}
.detail dd a{color:var(--ox);font-weight:600;text-decoration:none;display:inline-block;padding:4px 0}
.detail dd a:hover{text-decoration:underline}

form.inquiry{background:var(--paper-2);border:1px solid var(--line);border-radius:2px;padding:32px}
.field{margin-bottom:20px}
.field label{display:block;font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-70);margin-bottom:8px}
.field input,.field select,.field textarea{
  width:100%;font-family:var(--sans);font-size:15px;color:var(--ink);
  background:var(--card);border:1px solid var(--line-2);border-radius:2px;padding:12px 12px;
}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--ox);box-shadow:0 0 0 3px rgba(50,98,42,.14)}
.field textarea{min-height:132px;resize:vertical}
.form-note{font-size:13px;color:var(--ink-45);margin-top:12px}
.form-ok{display:none;background:#EEF3EC;border:1px solid #BFD4BA;color:#22491C;padding:16px 16px;border-radius:2px;font-size:15px;margin-bottom:16px}

/* ---------- footer ---------- */
footer.site{background:var(--ink);color:#A6A69E;padding:64px 0 0;font-size:15px}
footer.site .cols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px;padding-bottom:48px}
footer.site h4{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--paper);margin-bottom:16px}
footer.site a{color:#A6A69E;text-decoration:none}
footer.site a:hover{color:var(--paper)}
footer.site ul{list-style:none}
footer.site li{padding:0}
footer.site li a{display:inline-block;padding:8px 0;min-height:24px}
footer.site li:not(:has(a)){padding:8px 0}
footer.site .fbrand{display:flex;align-items:center;gap:12px;margin-bottom:16px}
footer.site .fbrand .t{font-family:var(--serif);font-size:20px;font-weight:700;color:var(--paper);line-height:1.15}
footer.site .legal{border-top:1px solid #33332E;padding:20px 0 32px;display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:13px;color:#8B8B83}

/* ---------- page header (inner pages) ---------- */
.pagehead{background:var(--paper-2);border-bottom:1px solid var(--line);padding:64px 0}
.pagehead h1{margin-top:16px;font-size:clamp(32px,4.2vw,50px)}
.pagehead p{margin-top:16px;max-width:62ch;font-size:17px}

/* ---------- inner-page grids ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start}
.bio{display:grid;grid-template-columns:280px 1fr;gap:56px;align-items:start}
.bio + .bio{margin-top:0}
.svc-detail{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;align-items:start}

/* ---------- prose ---------- */
.prose p + p{margin-top:20px}
.prose h3{margin-top:32px;margin-bottom:12px}
.prose ul{margin-top:12px;padding-left:0;list-style:none}
.prose li{position:relative;padding:4px 0 6px 22px;color:var(--ink-70)}
.prose li::before{content:"";position:absolute;left:0;top:16px;width:9px;height:1px;background:var(--brass)}


/* ---------- skip link ---------- */
/* clip rather than park at -9999px: the offscreen trick widens the document,
   which made the fixed frame size to 393px inside a 390px viewport. */
.skip{
  position:absolute;top:0;left:0;z-index:200;
  width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;
  background:var(--ox);color:#F8F4E9;font-family:var(--sans);
  font-size:13px;font-weight:600;padding:12px 20px;text-decoration:none;border-radius:0 0 2px 0;
}
.skip:focus{width:auto;height:auto;overflow:visible;clip-path:none}

/* ---------- focus ---------- */
:focus-visible{outline:2px solid var(--ox);outline-offset:3px;border-radius:1px}
.statement :focus-visible,footer.site :focus-visible,.topbar :focus-visible{outline-color:#F8F4E9}

/* ---------- primary CTA ---------- */
.btn-primary{position:relative;padding-right:24px}
.btn .arrow{display:inline-block;width:14px;height:1px;background:currentColor;position:relative;transition:transform .28s cubic-bezier(.2,.7,.3,1)}
.btn .arrow::after{
  content:"";position:absolute;right:0;top:-3px;width:7px;height:7px;
  border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg);
}
.btn:hover .arrow{transform:translateX(5px)}

/* the phone reads as a number, not a second competing button */
.cta-phone{
  font-family:var(--display);font-size:26px;font-weight:500;letter-spacing:-.01em;
  color:var(--ox);text-decoration:none;display:inline-block;padding:4px 0;
  border-bottom:1px solid var(--line-2);transition:border-color .2s ease;
}
.cta-phone:hover{border-bottom-color:var(--ox)}
.cta-phone small{display:block;font-family:var(--sans);font-size:11px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-45);margin-bottom:4px;border:0}
.cta{border-top:2px solid var(--brass)}

/* ---------- hero media ---------- */
.hero-figure{position:relative;overflow:hidden;border-radius:2px}
.hero-media{position:relative;width:100%;aspect-ratio:16/10;overflow:hidden;background:var(--paper-3)}
.hero-media img,.hero-media video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
}
/* slow drift on the still until real footage lands; video overrides it */
.hero-media .drift{animation:drift 32s ease-in-out infinite alternate;transform-origin:58% 62%}
@keyframes drift{from{transform:scale(1.02)}to{transform:scale(1.11)}}

/* ---------- static office map ---------- */
.mapcard{display:block;border:1px solid var(--line);border-radius:2px;overflow:hidden;text-decoration:none;background:var(--card)}
.mapcard img{width:100%;height:auto;aspect-ratio:15/8;object-fit:cover;transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.mapcard:hover img{transform:scale(1.03)}
.mapcard .bar{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:12px 16px;font-size:13px;color:var(--ink-70);border-top:1px solid var(--line)}
.mapcard .bar strong{font-family:var(--sans);font-weight:600;color:var(--ox);font-size:11px;letter-spacing:.12em;text-transform:uppercase}

/* ---------- form error state ---------- */
.form-err{
  display:none;background:#F6E9E6;border:1px solid #D6A79C;color:#6B2416;
  padding:16px 16px;border-radius:2px;font-size:15px;margin-bottom:16px;
}
.form-err a{color:#6B2416;font-weight:600}

/* ---------- sticky rails: motion that fills the voids ---------- */
@media(min-width:861px){
  .statement .wrap > div:first-child,
  .svc-detail > div:first-child{position:sticky;top:118px}
}

/* ---------- scroll reveal ---------- */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)}
.reveal.in{opacity:1;transform:none}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
  .hero-media .drift{animation:none;transform:none}
  .reveal{opacity:1;transform:none}
  .mapcard:hover img{transform:none}
}


/* ---------- ledger table ---------- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.ledger{width:100%;border-collapse:collapse;margin-top:40px;font-size:15px}
.ledger th,.ledger td{text-align:left;padding:16px 20px;border-bottom:1px solid var(--line)}
.ledger thead th{
  font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--brass);border-bottom:1px solid var(--ink-45);padding-bottom:12px;
}
.ledger tbody th{font-family:var(--serif);font-size:20px;font-weight:700;letter-spacing:-.01em;color:var(--ink)}
.ledger tbody td{color:var(--ink-70)}
.ledger tbody tr:last-child th,.ledger tbody tr:last-child td{border-bottom:0}
.ledger-wrap{overflow-x:auto}

/* ---------- responsive ---------- */
@media(max-width:1000px){
  .stats .wrap{grid-template-columns:1fr 1fr}
  .stat + .stat::before{display:none}
  .stat{border-top:1px solid var(--line-2)}
  .roster{grid-template-columns:1fr 1fr}
  footer.site .cols{grid-template-columns:1fr 1fr}
}
@media(max-width:860px){
  body{font-size:17px}
  .hero .wrap{grid-template-columns:1fr;gap:38px;padding:48px 24px 48px}
  .statement .wrap{grid-template-columns:1fr;gap:32px}
  .svc-grid{grid-template-columns:1fr}
  .people{grid-template-columns:1fr;gap:34px}
  .props{grid-template-columns:1fr}
  .cta .wrap{grid-template-columns:1fr;gap:26px}
  .contact-grid{grid-template-columns:1fr;gap:40px}
  .ledger{font-size:15px}
  .ledger th,.ledger td{padding:12px 8px}
  .ledger tbody th{font-size:15px}
  .split,.bio,.svc-detail{grid-template-columns:1fr;gap:34px}
  .bio img{max-width:220px}
  nav.main{
    display:none;position:absolute;top:100%;left:0;right:0;background:var(--paper);
    border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;gap:0;padding:8px 24px 20px;
  }
  nav.main.open{display:flex}
  nav.main a{padding:12px 0;border-bottom:1px solid var(--line)}
  nav.main a.on{border-bottom-color:var(--brass)}
  .nav-toggle{display:block}
  /* the header CTA does not fit beside the wordmark on phones;
     the tap-to-call in the topbar and Contact in the menu cover it */
  header.site .wrap > .btn-primary{display:none}
  .hero-cta .btn{flex:1 1 auto}
  .topbar{font-size:11px}
  .topbar .wrap{min-height:0;padding-top:4px;padding-bottom:4px}
  .topbar .addr{display:none}
  .cta-phone{font-size:23px}
}
@media(max-width:560px){
  .roster{grid-template-columns:1fr}
  .person{grid-template-columns:110px 1fr;gap:18px}
  .person img{width:110px;height:140px}
  footer.site .cols{grid-template-columns:1fr}
  form.inquiry{padding:24px 20px}
}

/* ---------- print ----------
   A general counsel who prints Services or saves it to PDF should get a
   clean document, not a screenshot of a website. */
@media print{
  @page{margin:16mm 14mm}
  html,body{background:#fff !important;color:#000 !important;font-size:10.5pt;line-height:1.5}
  .topbar,header.site,.nav-toggle,nav.main,.cta,.skip,.mapcard,
  .hero-cta,form.inquiry,.form-ok,.form-err,footer.site .cols,
  .btn,.reveal{ }
  .topbar,.nav-toggle,nav.main,.skip,.hero-cta,.cta,
  form.inquiry,.btn{display:none !important}
  /* the masthead stays: on paper it reads as letterhead, which is the point */
  header.eo-head,header.site{position:static !important;background:none !important;
    border-bottom:1pt solid #999 !important;min-height:0 !important;padding:0 0 8pt !important}
  header.eo-head .wrap{min-height:0 !important;padding:0 !important}
  .eo-mark .t{font-size:15pt !important}
  .eo-mark svg{width:34px !important;height:32px !important}
  .reveal{opacity:1 !important;transform:none !important}
  main{padding-top:0}
  section.pad,section.pad-sm,.statement .wrap,.pagehead{padding-top:0 !important;padding-bottom:18pt !important}
  h1{font-size:24pt;line-height:1.12}
  h2{font-size:15pt}
  h3{font-size:12pt}
  .statement q{font-size:15pt;line-height:1.35}
  /* let long lists flow; keep individual entries whole */
  .stats .wrap,.svc-grid,.people,.props,.eo-facts{page-break-inside:avoid}
  .roster{page-break-inside:auto}
  .roster li,.pf-row,.eo-row,.eo-sub,.eo-types > div{page-break-inside:avoid}
  .pf-city{page-break-inside:avoid;break-inside:avoid}
  .eo-two,.eo-rail{display:block !important}
  .eo-two > div:first-child{margin-bottom:8pt}
  .eo-facts{grid-template-columns:repeat(4,1fr) !important}
  .eo-facts > div{border-left:1pt solid #bbb !important}
  .svc,.roster li,.prop,.person{page-break-inside:avoid;background:#fff !important}
  h1,h2,h3{page-break-after:avoid}
  img{max-width:100% !important;page-break-inside:avoid}
  .hero-media{aspect-ratio:auto;max-height:70mm}
  .hero-media .drift{animation:none !important;transform:none !important}
  a{color:#000 !important;text-decoration:none}
  /* print the destination of real links, but not of every nav item */
  .prose a[href^="http"]::after,.detail a[href^="http"]::after{content:" (" attr(href) ")";font-size:8.5pt;color:#444}
  footer.site{background:#fff !important;color:#000 !important;border-top:1px solid #999;padding:10pt 0 0}
  footer.site .legal{border:0;color:#000;padding:6pt 0 0}
  .ledger th,.ledger td{border-color:#999 !important}
  /* a printed page should say who and when */
  main::after{
    content:"Rosenthal & Excell Commercial Real Estate Services, Inc.  ·  1600 E. Florida Avenue, Suite 110, Hemet, CA 92544  ·  (951) 658-2559";
    display:block;margin-top:14pt;padding-top:8pt;border-top:1px solid #999;
    font-family:var(--sans);font-size:8.5pt;color:#333;
  }
}

/* =========================================================================
   EDITORIAL OFFSET — the homepage structure.
   Asymmetric: narrow text column, image bleeding off the right edge, a pull
   quote that breaks the grid, the roster as a typeset band. Deliberately NOT
   eyebrow → headline → subhead → two buttons → stat row → photo floated right.
   ========================================================================= */

.eo-head{border-bottom:1px solid var(--ink);background:var(--paper)}
.eo-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:26px;min-height:92px}
.eo-head .eo-nav{margin-left:auto}
.eo-head .btn-primary{flex-shrink:0}
.eo-mark{display:flex;align-items:center;gap:16px;text-decoration:none}
.eo-mark svg{flex:0 0 auto}
.eo-mark .t{
  font-family:var(--serif);font-size:20px;font-weight:700;letter-spacing:-.018em;
  line-height:1.02;color:var(--ink);
}
.eo-mark .t span{
  display:block;font-family:var(--sans);font-size:11px;font-weight:600;
  letter-spacing:.17em;text-transform:uppercase;color:var(--ink-45);margin-top:4px;
}
.eo-nav{display:flex;gap:26px;font-size:13px;color:var(--ink-70)}
.eo-nav a{text-decoration:none}
.eo-nav a:hover{color:var(--ink)}

/* hero: text column on the grid, image escaping the right edge */
.eo-hero{position:relative;overflow:hidden;padding:64px 0 0}
.eo-hero .wrap{position:relative}
.eo-hero-fig{position:absolute;left:52%;top:0;width:62vw;max-width:760px;margin:0}
.eo-hero-fig img{width:100%;height:400px;object-fit:cover;display:block}
.eo-hero-fig figcaption{
  font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-45);padding-top:12px;
}
.eo-hero-col{position:relative;width:min(470px,52%);padding-bottom:48px}
.eo-datum{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-45)}
.eo-hero h1{margin:20px 0 0;font-family:var(--display);font-weight:500;
  font-size:clamp(32px,4.2vw,50px);line-height:1.05;letter-spacing:-.028em}
.eo-hero p{margin:20px 0 0;font-size:17px;line-height:1.68;color:var(--ink-70);max-width:38ch}
.eo-inline{display:inline-block;margin-top:24px;font-family:var(--sans);font-size:13px;
  font-weight:600;letter-spacing:.05em;color:var(--ink);text-decoration:none;
  border-bottom:1px solid var(--line-2);padding-bottom:4px;transition:border-color .2s ease}
.eo-inline:hover{border-bottom-color:var(--ox)}


/* pull quote that breaks the grid */
.eo-quote{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:52px;align-items:start}
.eo-quote .lede-rule{border-top:3px solid var(--ox);padding-top:20px}
.eo-quote h2{margin:0;font-family:var(--display);font-weight:500;
  font-size:clamp(25px,2.9vw,34px);line-height:1.3;letter-spacing:-.02em}
.eo-quote p{margin:0;padding-top:20px;font-size:17px;line-height:1.72;color:var(--ink-70)}

/* roster as a typeset band, not eight boxes */
.eo-band{background:var(--paper-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.eo-roster{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px 34px;margin-top:20px}
.eo-roster div{font-family:var(--serif);font-size:17px;font-weight:400;letter-spacing:-.008em;color:var(--ink)}
.eo-roster div span{display:block;font-family:var(--sans);font-size:11px;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--ink-45);margin-top:4px}

/* services: asymmetric, a ruled list */
.eo-svc{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:52px;align-items:start}
.eo-svc h2{margin:16px 0 0;font-family:var(--display);font-weight:500;
  font-size:clamp(22px,2.4vw,26px);line-height:1.32;letter-spacing:-.02em;max-width:16ch}
.eo-row{display:flex;justify-content:space-between;align-items:baseline;gap:26px;
  padding:16px 0;border-bottom:1px solid var(--line)}
.eo-row:last-child{border-bottom:0}
.eo-row .n{font-family:var(--serif);font-size:20px;font-weight:400;letter-spacing:-.012em;color:var(--ink)}
.eo-row .d{font-family:var(--sans);font-size:13px;color:var(--ink-45);text-align:right;max-width:34ch}

/* principals */
.eo-people{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:52px;align-items:start}
.eo-pair{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.eo-person img{width:120px;height:150px;object-fit:cover;display:block;margin:0 0 16px;
  filter:grayscale(1) contrast(1.04);border:1px solid var(--line)}
.eo-person h3{margin:0;font-family:var(--serif);font-size:20px;font-weight:700;letter-spacing:-.01em}
.eo-person .role{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ox);margin-top:8px}
.eo-person p{margin:12px 0 0;font-size:15px;line-height:1.66;color:var(--ink-70)}

/* close */
.eo-close{border-top:1px solid var(--ink);display:flex;justify-content:space-between;
  align-items:flex-end;gap:40px;padding-top:32px}
.eo-close h2{margin:0;font-family:var(--display);font-weight:500;
  font-size:clamp(25px,2.9vw,34px);line-height:1.22;letter-spacing:-.024em;max-width:17ch}
.eo-close .tel{font-family:var(--display);font-size:clamp(22px,2.4vw,26px);font-weight:500;
  letter-spacing:-.016em;color:var(--ink);text-decoration:none;display:block}
.eo-close .tel:hover{color:var(--ox)}

@media(max-width:900px){
  .eo-hero{padding-top:32px}
  .eo-hero-fig{position:static;width:100%;max-width:none;margin-top:24px}
  .eo-hero-fig img{height:250px}
  .eo-hero-col{width:100%;padding-bottom:0}
  .eo-quote,.eo-svc,.eo-people{grid-template-columns:1fr;gap:24px}
  .eo-quote p{padding-top:0}
  .eo-roster{grid-template-columns:1fr 1fr}
  .eo-pair{grid-template-columns:1fr;gap:28px}
  .eo-person img{width:96px;height:120px}
  .eo-close{flex-direction:column;align-items:flex-start;gap:22px}
  .eo-nav{display:none}
  .eo-head .btn-primary{display:none}
  .eo-row{flex-direction:column;align-items:flex-start;gap:6px}
  .eo-row .d{text-align:left}
}
@media(max-width:560px){ .eo-roster{grid-template-columns:1fr} }

/* =========================================================================
   HARD SPLIT — the homepage. A 50/50 vertical split with the image locked
   edge to edge and no padding, inverted further down so a dark panel carries
   the properties. No topbar on this page: the split runs to the top edge.
   ========================================================================= */

.hs-hero{display:grid;grid-template-columns:1fr 1fr;min-height:620px}
.hs-left{padding:32px 48px 40px;display:flex;flex-direction:column;justify-content:space-between;gap:40px}
.hs-topline{display:flex;align-items:center;justify-content:space-between;gap:20px}
.hs-mark{display:flex;align-items:center;gap:11px;text-decoration:none}
.hs-mark .t{font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:.05em;color:var(--ink)}
.hs-nav{display:flex;gap:20px;font-size:13px;color:var(--ink-70)}
.hs-nav a{text-decoration:none}
.hs-nav a:hover{color:var(--ink)}

.hs-hero h1{margin:0;font-family:var(--display);font-weight:500;
  font-size:clamp(32px,4.2vw,50px);line-height:1.06;letter-spacing:-.028em;max-width:14ch}
.hs-hero .lede{margin:24px 0 0;font-size:17px;line-height:1.66;color:var(--ink-70);max-width:40ch}
.hs-link{display:inline-block;margin-top:24px;font-family:var(--sans);font-size:13px;
  font-weight:600;letter-spacing:.05em;color:var(--ink);text-decoration:none;
  border-bottom:1px solid var(--line-2);padding-bottom:4px;transition:border-color .2s ease}
.hs-link:hover{border-bottom-color:var(--ox)}
.hs-foot{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.17em;
  text-transform:uppercase;color:var(--ink-45)}
.hs-foot a{color:var(--ink-45);text-decoration:none}
.hs-foot a:hover{color:var(--ox)}

.hs-right{position:relative;overflow:hidden;background:var(--paper-3)}
.hs-right img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

/* every band shares the split's left edge — that alignment is the design */
.hs-pad{padding-left:46px;padding-right:46px}

/* the argument, full measure */
.hs-say{border-top:1px solid var(--ink);padding:64px 0 56px}
.hs-say p{margin:0;font-family:var(--display);font-weight:500;
  font-size:clamp(22px,2.4vw,26px);line-height:1.42;letter-spacing:-.018em;
  color:var(--ink);max-width:34ch}

/* roster as one typeset run, not eight boxes */
.hs-roster{padding-bottom:48px}
.hs-roster .lbl{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ox)}
.hs-roster p{margin:16px 0 0;font-family:var(--serif);font-size:20px;line-height:1.62;
  letter-spacing:-.008em;color:var(--ink);max-width:60ch}

/* inverted split: dark panel left, services right */
.hs-invert{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--ink)}
.hs-dark{background:var(--ink);color:var(--paper);padding:40px 48px 48px}
.hs-dark .lbl{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:#9DB596}
.hs-prop{margin-top:24px}
.hs-prop + .hs-prop{margin-top:24px;padding-top:24px;border-top:1px solid rgba(250,248,242,.2)}
.hs-prop .n{font-family:var(--serif);font-size:26px;font-weight:400;letter-spacing:-.014em;color:var(--paper)}
.hs-prop .m{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.15em;
  text-transform:uppercase;color:rgba(250,248,242,.6);margin-top:8px}
.hs-dark .note{margin:40px 0 0;font-size:15px;line-height:1.68;color:rgba(250,248,242,.8);max-width:34ch}

.hs-svc{padding:40px 48px 48px}
.hs-svc .lbl{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ox)}
.hs-list{margin-top:20px}
.hs-list div{padding:16px 0;border-bottom:1px solid var(--line);
  font-family:var(--serif);font-size:20px;letter-spacing:-.012em;color:var(--ink)}
.hs-list div:last-child{border-bottom:0}

.hs-close{border-top:1px solid var(--ink);display:flex;justify-content:space-between;
  align-items:flex-end;gap:40px;padding:40px 0 52px}
.hs-close h2{margin:0;font-family:var(--display);font-weight:500;
  font-size:clamp(25px,2.9vw,34px);line-height:1.22;letter-spacing:-.024em;max-width:17ch}
.hs-close .tel{font-family:var(--display);font-size:clamp(22px,2.4vw,26px);font-weight:500;
  letter-spacing:-.016em;color:var(--ink);text-decoration:none;display:block}
.hs-close .tel:hover{color:var(--ox)}

@media(max-width:900px){
  .hs-hero{grid-template-columns:1fr;min-height:0}
  .hs-left{padding:20px 24px 32px;gap:30px}
  .hs-right{height:260px}
  .hs-nav{display:none}
  .hs-invert{grid-template-columns:1fr}
  .hs-dark,.hs-svc{padding:32px 24px 40px}
  .hs-close{flex-direction:column;align-items:flex-start;gap:22px}
  .hs-pad{padding-left:24px;padding-right:24px}
}

/* ---------- inner-page opener, in the homepage's language ---------- */
.eo-open{padding:48px 0 0}
.eo-open .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:52px;align-items:end;
  padding-bottom:32px;border-bottom:1px solid var(--ink)}
.eo-open h1{margin:16px 0 0;font-family:var(--display);font-weight:500;
  font-size:clamp(32px,4.2vw,50px);line-height:1.06;letter-spacing:-.028em;max-width:15ch}
.eo-open .lede{margin:0;font-size:17px;line-height:1.68;color:var(--ink-70);max-width:46ch}

/* label column + prose, the offset rhythm reused inside pages */
.eo-two{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);gap:52px;align-items:start}
.eo-two h2{margin:16px 0 0;font-family:var(--display);font-weight:500;
  font-size:clamp(22px,2.4vw,26px);line-height:1.3;letter-spacing:-.02em;max-width:16ch}
/* a discipline head now opens a wide column, not a narrow label gutter:
   one step up the scale, and no 16ch cap forcing a break mid-phrase. */
.eo-disc h2{margin:14px 0 0;font-family:var(--display);font-weight:500;
  font-size:clamp(25px,2.9vw,34px);line-height:1.22;letter-spacing:-.02em;max-width:22ch}
.eo-two .prose p + p{margin-top:20px}

/* sticky discipline index — makes a long services page skimmable */
/* Services rail. The index shares one grid row with the whole discipline
   stack, so the row is tall and the sticky child actually has room to travel.
   Its old block was exactly as tall as the index itself: zero travel. */
.eo-rail{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);gap:52px}
.eo-rail-lede{padding-bottom:44px;border-bottom:1px solid var(--line)}
.eo-rail-lede-1{margin:0;font-family:var(--display);font-weight:500;
  font-size:clamp(22px,2.4vw,26px);line-height:1.4;letter-spacing:-.018em;max-width:30ch}
.eo-rail-lede-2{margin:20px 0 0;font-size:17px;line-height:1.68;color:var(--ink-70);max-width:52ch}
.eo-disc{padding:44px 0;border-bottom:1px solid var(--line)}
.eo-disc:last-child{border-bottom:0;padding-bottom:0}
.eo-disc-lede{margin:18px 0 0;font-size:17px;line-height:1.7;color:var(--ink-70);max-width:56ch}
.eo-subs{margin-top:26px}
.eo-index{position:sticky;top:104px}
.eo-index a{display:flex;justify-content:space-between;gap:12px;padding:12px 0;
  border-bottom:1px solid var(--line);font-size:15px;color:var(--ink-70);text-decoration:none}
.eo-index a:hover{color:var(--ink)}
.eo-index a .k{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.14em;color:var(--ox)}

/* ruled sub-sections instead of bordered cards */
.eo-sub{border-top:1px solid var(--line);padding:20px 0 2px}
.eo-sub h3{margin:0;font-family:var(--serif);font-size:17px;font-weight:700;letter-spacing:-.008em}
.eo-sub p{margin:8px 0 0;font-size:15px;line-height:1.66;color:var(--ink-70)}

/* principals: small portrait, offset text */
.eo-bio{display:grid;grid-template-columns:132px minmax(0,1fr);gap:30px;align-items:start}
.eo-bio img{width:132px;height:166px;object-fit:cover;object-position:center top;
  filter:grayscale(1) contrast(1.04);background:var(--paper-3);border-radius:2px}
.eo-bio h2{margin:0;font-family:var(--display);font-weight:500;font-size:26px;letter-spacing:-.02em}
.eo-bio .role{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.15em;
  text-transform:uppercase;color:var(--ox);margin-top:8px}

@media(max-width:900px){
  .eo-open .wrap{grid-template-columns:1fr;gap:20px;align-items:start}
  .eo-two,.eo-rail{grid-template-columns:1fr;gap:24px}
  .eo-index{position:static}
  .eo-rail-lede{padding-bottom:32px}
  .eo-disc{padding:32px 0}
  .eo-bio{grid-template-columns:104px minmax(0,1fr);gap:20px}
  .eo-bio img{width:104px;height:132px}
}

/* =========================================================================
   PAGE TRANSITIONS · TYPOGRAPHIC DETAIL · MOTION
   ========================================================================= */

/* ---------- cross-page transitions ---------- */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out .22s cubic-bezier(.4,0,1,1) both}
::view-transition-new(root){animation:vt-in .34s cubic-bezier(0,0,.2,1) both}
@keyframes vt-out{to{opacity:0}}
@keyframes vt-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* the chrome stays put while the body changes underneath it */
header.eo-head{view-transition-name:site-header}
.topbar{view-transition-name:site-topbar}
footer.site{view-transition-name:site-footer}

/* ---------- typographic detail ---------- */
body{
  font-kerning:normal;
  font-variant-ligatures:common-ligatures contextual;
  text-rendering:optimizeLegibility;
}
/* figures line up in columns and in running text */
.stat .n,.cta-phone,.eo-close .tel,.ledger td,.ledger th,.eo-roster span,
.hs-prop .m,.detail dd,.prop dd,.eo-row .d,.topbar{font-variant-numeric:tabular-nums}
/* headlines break on sense, body copy stops orphaning its last word */
h1,h2,h3,.eo-quote h2,.eo-open h1,.eo-two h2{text-wrap:balance}
p,.lede,.eo-hero p,.eo-two .prose p,.eo-sub p{text-wrap:pretty}
/* Letterspaced caps carry a trailing space the eye reads as a gap. Compensating with a
   negative margin only works on INLINE runs — on a block it widens the box past its
   container and overflows the viewport (it did, by 2px, on firm.html). */
.eo-index .k,.eo-person .role,.eo-bio .role{display:inline-block;margin-right:-.18em}
/* underlines sit off the baseline instead of cutting the descenders */
a{text-underline-offset:.18em;text-decoration-thickness:from-font}
/* the opening quote hangs into the margin rather than indenting the line */
.statement q{hanging-punctuation:first}

/* ---------- motion ---------- */
/* the hero image is uncovered rather than simply present */
.eo-hero-fig img,.hs-right img{
  clip-path:inset(0 0 0 0);
  animation:reveal 1.05s cubic-bezier(.16,.84,.28,1) both;
}
@keyframes reveal{from{clip-path:inset(0 0 100% 0);transform:scale(1.04)}to{clip-path:inset(0 0 0 0);transform:none}}

/* roster names arrive in sequence, not all at once */
.eo-roster.in div{animation:rise .5s cubic-bezier(.2,.7,.3,1) both}
.eo-roster.in div:nth-child(1){animation-delay:.02s}
.eo-roster.in div:nth-child(2){animation-delay:.06s}
.eo-roster.in div:nth-child(3){animation-delay:.10s}
.eo-roster.in div:nth-child(4){animation-delay:.14s}
.eo-roster.in div:nth-child(5){animation-delay:.18s}
.eo-roster.in div:nth-child(6){animation-delay:.22s}
.eo-roster.in div:nth-child(7){animation-delay:.26s}
.eo-roster.in div:nth-child(8){animation-delay:.30s}
@keyframes rise{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}

/* the underline wipes in from the left instead of appearing */
.eo-inline,.hs-link{
  border-bottom:0;position:relative;padding-bottom:8px;
  background-image:linear-gradient(var(--line-2),var(--line-2)),linear-gradient(var(--ox),var(--ox));
  background-size:100% 1px,0 1px;background-position:0 100%,0 100%;background-repeat:no-repeat;
  transition:background-size .34s cubic-bezier(.2,.7,.3,1);
}
.eo-inline:hover,.hs-link:hover{background-size:100% 1px,100% 1px}

/* ---------- scrollspy on the services index ---------- */
.eo-index a{position:relative;transition:color .2s ease,border-color .2s ease}
.eo-index a::before{
  content:"";position:absolute;left:-14px;top:50%;width:6px;height:1px;
  background:var(--ox);transform:scaleX(0);transform-origin:left center;
  transition:transform .28s cubic-bezier(.2,.7,.3,1);
}
.eo-index a.on{color:var(--ink);border-bottom-color:var(--ink-45)}
.eo-index a.on::before{transform:scaleX(1)}
.eo-index a.on .k{color:var(--ox)}

@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  .eo-hero-fig img,.hs-right img{animation:none;clip-path:none}
  .eo-roster.in div{animation:none}
  .eo-inline,.hs-link{transition:none}
  .eo-index a::before{transition:none}
}

/* ---------- regional portfolio, grouped by city ---------- */
.pf-city{margin-top:32px}
.pf-city:first-of-type{margin-top:20px}
.pf-city > .lbl{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.19em;
  text-transform:uppercase;color:var(--ox);padding-bottom:8px;border-bottom:1px solid var(--ink);display:block}
.pf-row{display:flex;justify-content:space-between;align-items:baseline;gap:26px;
  padding:16px 0;border-bottom:1px solid var(--line)}
.pf-row .n{font-family:var(--serif);font-size:20px;font-weight:400;letter-spacing:-.01em;color:var(--ink)}
.pf-row .d{font-family:var(--sans);font-size:13px;color:var(--ink-45);text-align:right;max-width:38ch}
@media(max-width:760px){
  .pf-row{flex-direction:column;align-items:flex-start;gap:5px}
  .pf-row .d{text-align:left}
}

/* ---------- scale, stated plainly, in the page's own language ---------- */
.eo-facts{border-top:1px solid var(--ink);border-bottom:1px solid var(--line);
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.eo-facts > div{padding:20px 24px 24px;border-left:1px solid var(--line)}
.eo-facts > div:first-child{border-left:0;padding-left:0}
.eo-facts .n{font-family:var(--display);font-weight:500;font-size:clamp(25px,2.9vw,34px);
  line-height:1;letter-spacing:-.026em;color:var(--ox);font-variant-numeric:tabular-nums}
.eo-facts .k{font-family:var(--sans);font-size:13px;color:var(--ink-45);margin-top:8px;line-height:1.4;max-width:18ch}
@media(max-width:820px){
  .eo-facts{grid-template-columns:1fr 1fr}
  .eo-facts > div:nth-child(3){border-left:0;padding-left:0}
  .eo-facts > div{border-top:1px solid var(--line)}
  .eo-facts > div:nth-child(-n+2){border-top:0}
}

/* ---------- asset types: the question a national owner asks first ---------- */
.eo-types{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;margin-top:24px;
  border-top:1px solid var(--ink)}
.eo-types div{padding:20px 24px 20px 0;border-bottom:1px solid var(--line)}
.eo-types div:nth-child(even){padding-left:26px;border-left:1px solid var(--line)}
.eo-types .n{font-family:var(--serif);font-size:20px;font-weight:400;letter-spacing:-.01em;color:var(--ink);display:block}
.eo-types .d{font-family:var(--sans);font-size:13px;line-height:1.6;color:var(--ink-45);display:block;margin-top:8px}
@media(max-width:760px){
  .eo-types{grid-template-columns:1fr}
  .eo-types div:nth-child(even){padding-left:0;border-left:0}
}

/* =========================================================================
   COLLAGE OPENING — his brief, 2026-08-19:
   "a corporate collage of photos ... our logo and name being more impactful ...
    a border across the top and down one side like a quarter inch and the logo
    floating in the corner"
   A quarter inch is print thinking; at 96dpi that is 24px. 22 reads better.
   ========================================================================= */

.frame-t,.frame-l{position:fixed;background:var(--ox);z-index:120;pointer-events:none}
.frame-t{top:0;left:0;width:100%;height:22px}
.frame-l{top:0;left:0;bottom:0;width:22px}
body.framed{padding-top:20px;padding-left:22px}

/* slim nav above the collage; the logo no longer lives here */
.top-nav{border-bottom:1px solid var(--ink);background:var(--paper)}
.top-nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:52px}
.top-nav .n{display:flex;gap:26px;font-size:13px;color:var(--ink-70)}
.top-nav .n a{text-decoration:none}
.top-nav .n a:hover{color:var(--ink)}
.top-nav .n a.on{color:var(--ink);position:relative}
.top-nav .n a.on::after{content:"";position:absolute;left:0;right:0;bottom:-17px;height:2px;background:var(--ox)}
.top-nav .tel{font-family:var(--sans);font-size:13px;font-weight:600;color:var(--ink);text-decoration:none}

/* the collage itself: eight tiles, one grid, no gaps — corporate, not scrapbook */
/* 4 columns x 3 rows, every photo in a slot that suits its shape:
   a tall lead down the left, the firm's own aerial wide across the top right,
   four squares beneath it. Six images, twelve cells, no gaps. */
/* Explicit height, not aspect-ratio: 1fr rows take a min-content floor from the
   images, so the aspect box was being blown past and the CTA fell under the
   fold. min-height:0 on the children removes that floor. */
.collage{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(3,1fr);
  gap:2px;background:var(--line);height:clamp(520px,calc(100vh - 210px),720px)}
.collage > *{min-height:0;min-width:0}
.collage img{width:100%;height:100%;object-fit:cover;display:block}
.collage .lead{grid-column:1 / span 2;grid-row:1 / span 3;margin:0}
.collage .wide{grid-column:3 / span 2;grid-row:1;margin:0}
.collage .lead img,.collage .wide img{height:100%}

/* The claim sits on the lead tile so the first screen says something.
   Howard twice: "doesn't look impressive... impactful image wise". A silent
   grid of photos was the problem; the scrim keeps the type legible whatever
   photo he sends this week. */
.collage .lead{position:relative;overflow:hidden}
.claim{position:absolute;inset:auto 0 0 0;z-index:2;padding:34px 34px 28px;
  background:linear-gradient(to top,rgba(14,20,12,.90) 0%,rgba(14,20,12,.74) 48%,rgba(14,20,12,0) 100%)}
.claim h1{margin:0;color:#F8F4E9;font-family:var(--display);font-weight:500;
  font-size:clamp(25px,2.9vw,34px);line-height:1.22;letter-spacing:-.02em;max-width:26ch;
  text-shadow:0 1px 18px rgba(0,0,0,.32)}
.claim .btn{margin-top:22px}
.claim .nb{white-space:nowrap}

/* the logo gets its own clear space beneath the images, in the corner of the frame */
.lockup{background:var(--paper);border-bottom:1px solid var(--line)}
.lockup .wrap{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;
  padding-top:24px;padding-bottom:20px;flex-wrap:wrap}
.lockup .mark{display:flex;align-items:center;gap:18px;text-decoration:none}
.lockup .mark svg{flex:0 0 auto}
.lockup .name{font-family:var(--serif);font-size:clamp(32px,4.2vw,50px);font-weight:700;
  letter-spacing:-.022em;line-height:1;color:var(--ink)}
.lockup .name span{display:block;font-family:var(--sans);font-size:11px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ink-45);margin-top:8px}
.lockup .est{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ox);padding-bottom:4px}

@media(max-width:900px){
  .frame-l{width:10px}
  .frame-t{height:10px}
  body.framed{padding-top:8px;padding-left:10px}
  /* fixed rows cropped the tall lead photo to a sliver on a phone. Let each
     band own its aspect instead, so the lead reads as a picture. */
  .collage{grid-template-columns:repeat(2,1fr);grid-template-rows:none;height:auto}
  .collage .lead{grid-column:1 / span 2;grid-row:auto;aspect-ratio:4/5}
  .collage .wide{grid-column:1 / span 2;grid-row:auto;aspect-ratio:16/7}
  .collage > img{aspect-ratio:1/1}
  .claim{padding:26px 22px 24px}
  /* the links were simply hidden here, which left a phone with no navigation
     at all. They collapse behind the hamburger instead. */
  .top-nav .wrap{flex-wrap:wrap}
  .nav-toggle{display:block;order:-1;border-color:var(--line-2)}
  .top-nav .n{display:none;order:3;flex-basis:100%;flex-direction:column;gap:0;
    border-top:1px solid var(--line);margin-top:2px;padding-bottom:6px}
  .top-nav .n.open{display:flex}
  .top-nav .n a{padding:15px 2px;border-bottom:1px solid var(--line);font-size:16px}
  .top-nav .n a:last-child{border-bottom:0}
  .top-nav .n a.on{color:var(--ox);font-weight:600}
  .lockup .wrap{align-items:flex-start;flex-direction:column;gap:14px}
  .lockup .mark{gap:13px}
}

/* A quiet plate: photograph and a caption, no claim over it. The loud beat is
   .eo-wide further down; two scrimmed statements in a row would compete. */
/* Contained, not full bleed. The source is a 760px crop of their aerial, so a
   full-width plate was a 2.1x upscale and went soft. Swap for their real
   photograph when it lands and this can go full bleed. */
.eo-plate{margin:0 auto 64px;max-width:var(--wrap);padding:0 28px}
.eo-plate img{width:100%;height:clamp(240px,30vw,360px);object-fit:cover;display:block;
  border:1px solid var(--line)}
.eo-plate figcaption{font-family:var(--sans);font-size:11px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-45);
  padding-top:12px;border-top:1px solid var(--line-2);margin-top:12px}
.eo-plate figcaption .wrap{display:block;max-width:none;padding:0}

/* A second image moment. Everything between the collage and the principals
   was type, which read as a wall on a phone. Full bleed, scrim, one claim. */
.eo-wide{position:relative;isolation:isolate}
.eo-wide img{width:100%;height:clamp(320px,42vw,460px);object-fit:cover;display:block}
.eo-wide-in{position:absolute;inset:0;display:flex;align-items:flex-end;
  background:linear-gradient(to top,rgba(14,20,12,.88) 0%,rgba(14,20,12,.60) 46%,rgba(14,20,12,.18) 100%)}
.eo-wide-in > .wrap{padding-top:0;padding-bottom:clamp(28px,4vw,44px);width:100%}
.eo-wide .eo-datum{color:#CBD8C4}
.eo-wide h2{margin:14px 0 0;color:#F8F4E9;font-family:var(--display);font-weight:500;
  font-size:clamp(25px,2.9vw,34px);line-height:1.24;letter-spacing:-.02em;max-width:24ch;
  text-shadow:0 1px 18px rgba(0,0,0,.34)}
.eo-wide .eo-inline{margin-top:18px;display:inline-block;color:#F8F4E9;border-bottom-color:rgba(248,244,233,.5)}
.eo-wide .eo-inline:hover{border-bottom-color:#F8F4E9}

/* One vertical rhythm: 64 on open sections, 48 inside tinted bands. */
.eo-band > .wrap{padding-top:48px;padding-bottom:48px}

/* =========================================================================
   OPENING REVEAL
   The green frame draws itself first, so the border reads as a deliberate
   device rather than a stripe that was always there. Then the identity, then
   the buildings in a diagonal sweep with alternating wipe directions.
   Fires once, after the images decode. Skipped under reduced motion.
   ========================================================================= */

.js-reveal .frame-t{transform:scaleX(0)}
.js-reveal .frame-l{transform:scaleY(0)}
.js-reveal .lockup .mark,
.js-reveal .lockup .est,
.js-reveal .collage img{opacity:0}

/* the frame draws: top sweeps right, side drops down */
.reveal-go .frame-t{transform-origin:left center;animation:drawX .44s cubic-bezier(.22,1,.36,1) both}
.reveal-go .frame-l{transform-origin:center top;animation:drawY .44s cubic-bezier(.22,1,.36,1) .08s both}

.reveal-go .lockup .mark{animation:riseIn .6s cubic-bezier(.22,1,.36,1) .22s both}
.reveal-go .lockup .est{animation:riseIn .6s cubic-bezier(.22,1,.36,1) .30s both}

/* each tile is uncovered from a different edge, on a diagonal stagger */
.reveal-go .collage .lead img{animation:wipeUp .82s cubic-bezier(.16,.88,.28,1) .34s both}
.reveal-go .collage .wide img{animation:wipeLeft .78s cubic-bezier(.16,.88,.28,1) .44s both}
.reveal-go .collage > img:nth-of-type(1){animation:wipeDown .72s cubic-bezier(.16,.88,.28,1) .52s both}
.reveal-go .collage > img:nth-of-type(2){animation:wipeRight .72s cubic-bezier(.16,.88,.28,1) .58s both}
.reveal-go .collage > img:nth-of-type(3){animation:wipeRight .72s cubic-bezier(.16,.88,.28,1) .64s both}
.reveal-go .collage > img:nth-of-type(4){animation:wipeDown .72s cubic-bezier(.16,.88,.28,1) .70s both}

@keyframes drawX{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes drawY{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes riseIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

@keyframes wipeUp{
  from{opacity:0;clip-path:inset(0 0 100% 0);transform:scale(1.08)}
  60%{opacity:1}
  to{opacity:1;clip-path:inset(0 0 0 0);transform:none}
}
@keyframes wipeDown{
  from{opacity:0;clip-path:inset(100% 0 0 0);transform:scale(1.08)}
  60%{opacity:1}
  to{opacity:1;clip-path:inset(0 0 0 0);transform:none}
}
@keyframes wipeLeft{
  from{opacity:0;clip-path:inset(0 100% 0 0);transform:scale(1.06)}
  60%{opacity:1}
  to{opacity:1;clip-path:inset(0 0 0 0);transform:none}
}
@keyframes wipeRight{
  from{opacity:0;clip-path:inset(0 0 0 100%);transform:scale(1.06)}
  60%{opacity:1}
  to{opacity:1;clip-path:inset(0 0 0 0);transform:none}
}

@media (prefers-reduced-motion:reduce){
  .js-reveal .frame-t,.js-reveal .frame-l{transform:none}
  .js-reveal .lockup .mark,.js-reveal .lockup .est,.js-reveal .collage img{opacity:1}
  .reveal-go .frame-t,.reveal-go .frame-l,
  .reveal-go .lockup .mark,.reveal-go .lockup .est,.reveal-go .collage img{animation:none}
}

/* ---------- phone: nothing a thumb must hit may be under 44px ---------- */
@media(max-width:900px){
  .top-nav .tel{padding:12px 0;display:inline-block}
  .eo-close .tel,.cta-phone{padding:8px 0 10px}
  .eo-inline,.hs-link{padding-top:10px;padding-bottom:12px}
  footer.site li a{padding:12px 0}
  .lockup .mark{padding:4px 0}
  .top-nav .wrap{min-height:56px}
}

/* ---------- the lockup, as Howard chose it 2026-08-24 -------------------
   He picked option A off /logo.html: "A is it thank you". The blue is carried
   straight across behind the lockup, above the photographs.

   The mark keeps a cream tile of its own. It is an indigo mountain against a
   cream sky, redrawn from his business card, so set straight onto the blue the
   mountain dissolves into the background and the sky floats as a white blob.
   This is the one place the card overrules "put it with the blue background".

   Wordmark is Tahoma per his 2026-08-24 instruction. It is a Windows face and
   absent on iOS, so Verdana carries the phone. Both run far wider than the
   serif they replace, hence the smaller ramp and the relaxed tracking. NOTE:
   the name on his business card is actually a serif, with the sans only on the
   descriptor. He has been asked and has not answered; Tahoma stands until he
   does. ---------------------------------------------------------------- */
.lockup{background:#43326E;border-bottom:none}
.lockup .wrap{padding-top:32px;padding-bottom:28px}
.lockup .name{
  font-family:Tahoma,Verdana,Geneva,'DejaVu Sans',sans-serif;font-weight:700;
  font-size:clamp(25px,3.4vw,40px);letter-spacing:-.008em;color:#F8F4E9;
}
.lockup .name span{
  font-family:Tahoma,Verdana,Geneva,'DejaVu Sans',sans-serif;
  letter-spacing:.15em;font-size:10.5px;color:rgba(248,244,233,.60);
}
.lockup .est{color:rgba(248,244,233,.74)}
.lockup .mark svg{
  background:var(--paper);
  box-shadow:0 0 0 7px var(--paper);
  margin:7px 7px 7px 0;
}
.top-nav{border-top:1px solid rgba(26,26,24,.10)}
footer.site .fbrand .t{
  font-family:Tahoma,Verdana,Geneva,'DejaVu Sans',sans-serif;
  font-weight:700;font-size:18px;letter-spacing:-.005em;
}
@media(max-width:640px){
  .lockup .name span{font-size:9px;letter-spacing:.085em}
  .lockup .mark svg{box-shadow:0 0 0 5px var(--paper);margin:5px 5px 5px 0}
}