/* ============================================================
   Silicato Development — design system
   Canvas-and-card system: crimson canvas, cream inset cards.
   One family (Instrument Sans), weight 400 display, scale-driven.
   ============================================================ */

:root{
  --crimson:#A51E36;
  --crimson-deep:#7C1628;
  --cream:#F7F2EB;
  --white:#FFFFFF;
  --silver:#BDBEC1;

  --inset:10px;               /* card distance from viewport edge */
  --r-card:10px;
  --r-pill:999px;

  --px:clamp(24px, 5vw, 96px);           /* horizontal gutter inside cards/sections */
  --sect:clamp(64px, 9vw, 130px);        /* vertical section padding */

  --fs-display:clamp(44px, 7.2vw, 92px);
  --fs-statement:clamp(28px, 3.7vw, 54px);
  --fs-h2:clamp(30px, 3.3vw, 46px);
  --fs-h3:25px;
  --fs-body:18px;
  --fs-small:15px;
  --fs-eyebrow:12px;

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

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Instrument Sans',-apple-system,BlinkMacSystemFont,sans-serif;
  font-weight:400;
  font-size:var(--fs-body);
  line-height:1.5;
  background:var(--crimson);
  color:var(--white);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}

/* ---------- type ---------- */
.display{font-size:var(--fs-display);line-height:1.0;letter-spacing:-.01em;font-weight:400}
.statement{font-size:var(--fs-statement);line-height:1.15;font-weight:400}
h2{font-size:var(--fs-h2);line-height:1.1;font-weight:400}
h3{font-size:var(--fs-h3);line-height:1.2;font-weight:400}
.eyebrow{
  font-size:var(--fs-eyebrow);letter-spacing:.14em;text-transform:uppercase;
  font-weight:500;
}
.small{font-size:var(--fs-small)}

/* ---------- canvas / card frame ---------- */
.card{
  background:var(--cream);
  color:var(--crimson);
  border-radius:var(--r-card);
  margin:0 var(--inset);
}
.card + .card{margin-top:var(--inset)}
.canvas-sect{
  padding-top:var(--sect);
  padding-bottom:var(--sect);
  padding-left:calc(var(--inset) + var(--px));
  padding-right:calc(var(--inset) + var(--px));
}
.card-sect{
  padding-top:var(--sect);
  padding-bottom:var(--sect);
  padding-left:var(--px);
  padding-right:var(--px);
}
.hairline{border:0;border-top:1px solid rgba(247,242,235,.28);margin:0 calc(var(--inset) + var(--px))}

/* ---------- buttons: pill pair ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border-radius:var(--r-pill);
  padding:12px 26px;
  font-size:var(--fs-small);font-weight:500;
  border:1px solid transparent;
  min-height:44px;
  cursor:pointer;
  transition:background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.btn:active{transform:scale(.97)}
/* on cream */
.btn-fill{background:var(--crimson);color:var(--cream);border-color:var(--crimson)}
.btn-fill:hover{background:var(--crimson-deep);border-color:var(--crimson-deep);transform:translateY(-2px)}
.btn-line{background:transparent;color:var(--crimson);border-color:var(--crimson)}
.btn-line:hover{background:var(--crimson);color:var(--cream);transform:translateY(-2px)}
/* on canvas */
.on-canvas .btn-fill,.btn-fill.inv{background:var(--cream);color:var(--crimson);border-color:var(--cream)}
.on-canvas .btn-fill:hover,.btn-fill.inv:hover{background:var(--white);border-color:var(--white);transform:translateY(-2px)}
.on-canvas .btn-line,.btn-line.inv{color:var(--white);border-color:rgba(255,255,255,.75);background:transparent}
.on-canvas .btn-line:hover,.btn-line.inv:hover{background:var(--white);color:var(--crimson);border-color:var(--white);transform:translateY(-2px)}
.btn-row{display:flex;gap:12px;flex-wrap:wrap}

/* ---------- header (on canvas, above first card) ---------- */
.site-header{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:22px calc(var(--inset) + clamp(16px,2.5vw,40px));
}
.site-header .logo img{width:104px;height:auto}
.site-header nav{display:flex;gap:clamp(16px,2.6vw,36px);align-items:center}
.site-header nav a{
  color:var(--white);font-size:16px;padding:10px 2px;position:relative;
  transition:opacity .25s var(--ease), transform .25s var(--ease);
}
.site-header nav a:hover{opacity:.75;transform:translateY(-1px)}
.header-phone{color:var(--white);font-size:15px;display:flex;align-items:center;gap:8px;padding:10px 0;transition:opacity .25s var(--ease),transform .25s var(--ease)}
.header-phone:hover{opacity:.75;transform:translateY(-1px)}

/* sticky bar */
.sticky-nav{
  position:fixed;top:0;left:0;right:0;z-index:90;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  background:var(--white);color:var(--crimson);
  padding:10px calc(var(--inset) + clamp(16px,2.5vw,40px));
  border-radius:0 0 var(--r-card) var(--r-card);
  transform:translateY(-110%);
  transition:transform .4s var(--ease);
  box-shadow:0 8px 30px rgba(124,22,40,.18);
}
.sticky-nav.show{transform:translateY(0)}
.sticky-nav .logo img{width:74px;height:auto}
.sticky-nav nav{display:flex;gap:clamp(14px,2.2vw,30px);align-items:center}
.sticky-nav nav a{color:var(--crimson);font-size:15px;padding:10px 2px;transition:opacity .25s var(--ease),transform .25s var(--ease)}
.sticky-nav nav a:hover{opacity:.7;transform:translateY(-1px)}
.sticky-nav .header-phone{color:var(--crimson)}

/* mobile menu */
.menu-btn{display:none;background:none;border:0;cursor:pointer;padding:10px;min-width:44px;min-height:44px}
.menu-btn svg{stroke:currentColor}
.site-header .menu-btn{color:var(--white)}
.sticky-nav .menu-btn{color:var(--crimson)}
.mobile-menu{
  position:fixed;inset:0;z-index:200;background:var(--crimson);color:var(--white);
  display:flex;flex-direction:column;justify-content:center;gap:8px;
  padding:0 calc(var(--inset) + var(--px));
  opacity:0;pointer-events:none;
  transition:opacity .35s var(--ease);
}
.mobile-menu.open{opacity:1;pointer-events:auto}
.mobile-menu a{font-size:clamp(34px,9vw,52px);line-height:1.25;padding:8px 0;display:inline-block;transition:opacity .25s var(--ease),transform .25s var(--ease)}
.mobile-menu a:hover{opacity:.75;transform:translateX(6px)}
.mobile-menu .mm-contact{margin-top:28px;font-size:16px;opacity:.85}
.mm-close{position:absolute;top:18px;right:calc(var(--inset) + 18px);background:none;border:0;color:var(--white);cursor:pointer;padding:12px;min-width:44px;min-height:44px}
.mm-close svg{stroke:currentColor}

/* ---------- property card ---------- */
.prop-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,30px)}
.prop-grid.two{grid-template-columns:repeat(2,1fr)}
.prop-card{display:block}
.prop-media{
  position:relative;border-radius:var(--r-card);overflow:hidden;aspect-ratio:4/3;
}
.prop-media img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .6s var(--ease), filter .6s var(--ease);
}
.prop-card:hover .prop-media img{transform:scale(1.045);filter:saturate(1.06)}
.prop-badge{
  position:absolute;top:14px;right:14px;
  background:var(--white);color:var(--crimson);
  font-size:13px;font-weight:500;
  border-radius:var(--r-pill);padding:6px 14px;
}
.prop-head{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin-top:16px}
.prop-name{font-size:var(--fs-h3);line-height:1.2}
.prop-loc{display:flex;align-items:center;gap:6px;font-size:var(--fs-small);white-space:nowrap}
.prop-specs{display:flex;gap:20px;margin-top:10px;font-size:var(--fs-small);flex-wrap:wrap}
.prop-specs span{display:inline-flex;align-items:center;gap:7px}
.icon{width:18px;height:18px;stroke:currentColor;stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* ---------- statement section anatomy (on canvas) ---------- */
.stmt{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.1fr);gap:clamp(24px,4vw,64px)}
.stmt .eyebrow{padding-top:6px}
.stmt-body{display:grid;grid-template-columns:minmax(180px,240px) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:end;margin-top:clamp(36px,6vw,90px)}
.stmt-photo{border-radius:var(--r-card);overflow:hidden;aspect-ratio:1/1.05}
.stmt-photo img{width:100%;height:100%;object-fit:cover}
.stmt-copy{max-width:52ch}
.stmt-copy p+p{margin-top:14px}
.stmt-copy .btn-row{margin-top:26px}

/* ---------- process columns ---------- */
.process{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3.5vw,48px)}
.process .num{font-size:14px;display:block;margin-bottom:14px}
.process h3{font-size:clamp(24px,2.3vw,32px);margin-bottom:14px}

/* ---------- quote ---------- */
.quote{max-width:24ch;margin:0 auto;text-align:center;font-size:clamp(32px,4.6vw,64px);line-height:1.12}
.quote-attr{text-align:center;margin-top:26px;font-size:var(--fs-small);letter-spacing:.14em;text-transform:uppercase}

/* ---------- photo band ---------- */
.photo-band{border-radius:var(--r-card);overflow:hidden;margin:0 var(--inset)}
.photo-band img{width:100%;height:clamp(320px,60vh,620px);object-fit:cover}
.card .photo-band{margin:0}

/* ---------- footer ---------- */
.footer{padding:var(--sect) calc(var(--inset) + var(--px)) 40px}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.4fr;gap:clamp(24px,4vw,56px)}
.footer .logo img{width:120px}
.footer h4{font-size:var(--fs-eyebrow);letter-spacing:.14em;text-transform:uppercase;font-weight:500;margin-bottom:18px;opacity:.8}
.footer li{margin-bottom:10px}
.footer a{transition:opacity .25s var(--ease),transform .25s var(--ease);display:inline-block}
.footer a:hover{opacity:.7;transform:translateX(3px)}
.footer .small{opacity:.85}
.legal{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:clamp(48px,7vw,90px);padding-top:24px;border-top:1px solid rgba(247,242,235,.28);font-size:14px;opacity:.85}

/* ---------- corridor map (signature move) ---------- */
.map-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(28px,4vw,64px);align-items:center}
.corridor-map{width:100%;height:auto;overflow:visible}
.corridor-map .state,.corridor-map .peninsula,.corridor-map .hwy{fill:none;stroke:var(--crimson);stroke-linecap:round;stroke-linejoin:round}
.corridor-map .state{stroke-width:2.5;fill:rgba(165,30,54,.045)}
.corridor-map .peninsula{stroke-width:1.5;stroke-dasharray:3 7;opacity:.5}
.corridor-map .hwy{stroke-width:2.5;stroke-dasharray:1000;stroke-dashoffset:1000}
.map-in .corridor-map .hwy{animation:draw 2.4s var(--ease) forwards}
.corridor-map .hwy.h2{animation-delay:.35s}
@keyframes draw{to{stroke-dashoffset:0}}
.map-pin circle{fill:var(--crimson)}
.map-pin .ring{fill:none;stroke:var(--crimson);stroke-width:1.5;opacity:0}
.map-pin{opacity:0;transform:translateY(6px);transition:opacity .5s var(--ease),transform .5s var(--ease);cursor:pointer}
.map-in .map-pin{opacity:1;transform:none}
.map-pin:hover .ring{opacity:.6}
.map-pin text{font-family:'Instrument Sans',sans-serif;font-size:13px;fill:var(--crimson)}
.map-tip{
  position:absolute;pointer-events:none;background:var(--crimson);color:var(--cream);
  font-size:14px;border-radius:8px;padding:8px 14px;opacity:0;transform:translateY(4px);
  transition:opacity .25s var(--ease),transform .25s var(--ease);white-space:nowrap;z-index:5;
}
.map-tip.show{opacity:1;transform:none}
.map-figure{position:relative}

/* ---------- reveal on scroll ---------- */
.rv{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  .corridor-map .hwy{stroke-dashoffset:0;animation:none}
}

/* ---------- listing page filters ---------- */
.listing-head .display{max-width:18ch}
.search-line{
  display:flex;align-items:center;gap:14px;border-bottom:1px solid var(--crimson);
  padding:14px 2px;margin-top:clamp(28px,4vw,48px);opacity:.9;
}
.search-line input{
  border:0;background:none;outline:none;flex:1;
  font:inherit;font-size:clamp(18px,2vw,24px);color:var(--crimson);
}
.search-line input::placeholder{color:var(--crimson);opacity:.45}

/* ---------- hero ---------- */
.hero-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:clamp(28px,4vw,72px);align-items:center}
.hero-copy .display{max-width:12ch}
.hero-copy .lede{margin-top:clamp(24px,3vw,40px);max-width:38ch}
.hero-copy .btn-row{margin-top:28px}
.hero-rail{display:grid;gap:14px;justify-self:end;width:min(100%,300px)}
.hero-rail a{border-radius:var(--r-card);overflow:hidden;display:block;aspect-ratio:16/10;position:relative}
.hero-rail img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease),filter .5s var(--ease)}
.hero-rail a:hover img{transform:scale(1.05);filter:brightness(1.05)}
.hero-rail .rail-label{position:absolute;left:10px;bottom:10px;background:var(--white);color:var(--crimson);font-size:12px;font-weight:500;border-radius:var(--r-pill);padding:4px 11px;white-space:nowrap}
.scroll-cue{margin-top:clamp(28px,4vw,54px);display:inline-flex;animation:bob 2.2s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}

/* ---------- team ---------- */
.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,30px)}
.team-card .prop-media{aspect-ratio:4/4.6}
.team-card .prop-media img{object-position:top center}
.team-card h3{margin-top:14px}
.team-card .small{opacity:.85;margin-top:2px}

/* about bios */
.bio{display:grid;grid-template-columns:minmax(220px,340px) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:start}
.bio + .bio{margin-top:clamp(48px,7vw,96px)}
.bio .prop-media{aspect-ratio:4/4.8}
.bio h2{margin-bottom:6px}
.bio .role{font-size:var(--fs-small);letter-spacing:.12em;text-transform:uppercase;opacity:.8;margin-bottom:20px}
.bio p+p{margin-top:14px}
.bio .credit{margin-top:14px;font-size:13px;opacity:.6}

/* contact block */
.contact-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(28px,4.5vw,72px);align-items:start}
.contact-list{display:grid;gap:22px}
.contact-list .item{display:flex;gap:14px;align-items:flex-start}
.contact-list .icon{margin-top:4px;width:20px;height:20px}
.contact-list a:hover{opacity:.7}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 980px){
  .hero-grid{grid-template-columns:1fr}
  .hero-rail{grid-template-columns:repeat(3,1fr);width:100%;justify-self:stretch}
  .stmt{grid-template-columns:1fr;gap:18px}
  .prop-grid,.prop-grid.two{grid-template-columns:repeat(2,1fr)}
  .process{grid-template-columns:1fr;gap:36px}
  .footer-grid{grid-template-columns:1fr 1fr}
  .map-wrap{grid-template-columns:1fr}
  .team-grid{grid-template-columns:repeat(2,1fr)}
  .bio{grid-template-columns:1fr}
  .bio .prop-media{max-width:340px}
  .contact-grid{grid-template-columns:1fr}
}
@media (max-width: 640px){
  .site-header nav,.sticky-nav nav,.site-header .header-phone,.sticky-nav .header-phone{display:none}
  .menu-btn{display:inline-flex;align-items:center;justify-content:center}
  .prop-grid,.prop-grid.two{grid-template-columns:1fr}
  .hero-rail{grid-template-columns:repeat(3,1fr);gap:8px}
  .hero-rail a{aspect-ratio:1/1}
  .hero-rail .rail-label{font-size:10px;padding:3px 8px;left:6px;bottom:6px;letter-spacing:0}
  .stmt-body{grid-template-columns:1fr;align-items:start}
  .stmt-photo{max-width:220px}
  .team-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .prop-head{flex-direction:column;gap:4px}
  .prop-loc{white-space:normal}
}

/* ---------- floating proposal button (injected by site.js) ---------- */
.float-proposal{
  position:fixed;right:clamp(16px,2.5vw,28px);bottom:clamp(16px,2.5vw,28px);z-index:120;
  display:inline-flex;align-items:center;gap:9px;
  min-height:48px;padding:13px 22px;border-radius:var(--r-pill);
  background:var(--crimson-deep);color:var(--cream);
  border:1px solid rgba(247,242,235,.5);
  font-size:15px;font-weight:500;
  box-shadow:0 10px 30px -8px rgba(42,8,16,.55);
  transition:background .25s var(--ease),transform .25s var(--ease),box-shadow .25s var(--ease);
}
.float-proposal:hover{background:var(--crimson);transform:translateY(-2px);box-shadow:0 16px 36px -10px rgba(42,8,16,.65)}
.float-proposal:active{transform:scale(.97)}
.float-proposal svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
@media (max-width:640px){
  .float-proposal{padding:12px 18px;font-size:14px}
}