/* ============================================================
   WorkBay park block styles
   One stylesheet for every park page block.
   Enqueued by wb-parks.php. Do NOT add @import here, Montserrat
   is loaded once via wp_enqueue_style with a preconnect hint.

   Brand constants: green #76bc43 · navy #3b4554 · gray #dedfdc
   Any light gray is #dedfdc. Never #f5f5f5, #f3f4f1, #eee.
   ============================================================ */

:root{
  --wb-green:#76bc43;
  --wb-green-dark:#5fa033;
  --wb-navy:#3b4554;
  --wb-navy-dark:#2c3540;
  --wb-gray:#dedfdc;
  --wb-white:#ffffff;
  --wb-font:'Montserrat',sans-serif;
}


/* ============================================================
   Hero / amenities bento
   ============================================================ */

.wb-amen{

  font-family:'Montserrat',sans-serif!important;
  color:var(--wb-navy)!important;
  padding:100px 24px;
  background:var(--wb-gray);
  width:100%;
  max-width:100%;
  overflow-x:hidden;
  box-sizing:border-box;
  -webkit-text-size-adjust:100%;
}
.wb-amen *{font-family:'Montserrat',sans-serif!important;box-sizing:border-box!important;-webkit-tap-highlight-color:transparent}
.wb-amen img{max-width:100%;display:block}
.wb-amen h2,.wb-amen h4,.wb-amen p{overflow-wrap:break-word;word-break:break-word}

.wb-amen-inner{max-width:1200px;margin:0 auto;width:100%}

.wb-amen-head{text-align:center;margin-bottom:48px;max-width:680px;margin-left:auto;margin-right:auto}
.wb-amen-eyebrow{display:inline-block;font-size:11px;font-weight:700!important;letter-spacing:0.18em;text-transform:uppercase;color:var(--wb-navy)!important;background:var(--wb-white);padding:8px 14px;border-radius:4px;margin-bottom:16px;line-height:1.3}
.wb-amen-head h2{margin:0 0 14px;font-size:clamp(27px,6.4vw,46px);font-weight:800!important;color:var(--wb-navy)!important;letter-spacing:-0.02em;line-height:1.12}
.wb-amen-head p{margin:0;font-size:clamp(14px,3.9vw,16px);line-height:1.6;color:#5a6470!important}

.wb-amen-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:200px;gap:14px}

.wb-amen-tile{position:relative;border-radius:18px;overflow:hidden;transition:transform .3s cubic-bezier(0.4,0,0.2,1),box-shadow .3s ease,border-color .3s ease}

.wb-amen-tile.icon{background:var(--wb-white);padding:24px 20px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:14px;border:1px solid rgba(59,69,84,0.06);box-shadow:0 2px 8px -2px rgba(59,69,84,0.06)}
.wb-amen-tile.icon .ico{width:48px;height:48px;background:rgba(118,188,67,0.16);border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .25s ease,transform .25s ease}
.wb-amen-tile.icon .ico svg{width:24px;height:24px;stroke:var(--wb-green);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:stroke .25s ease}
.wb-amen-tile.icon .txt{display:flex;flex-direction:column;gap:4px}
.wb-amen-tile.icon h4{margin:0;font-size:15px;font-weight:800!important;color:var(--wb-navy)!important;letter-spacing:-0.01em;line-height:1.2}
.wb-amen-tile.icon p{margin:0;font-size:13px;line-height:1.45;color:#5a6470!important}

.wb-amen-tile.photo{background:var(--wb-navy);color:var(--wb-white)!important;display:flex;align-items:flex-end}
.wb-amen-tile.photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .6s ease}
.wb-amen-tile.photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(59,69,84,0.10) 0%,rgba(59,69,84,0.45) 50%,rgba(59,69,84,0.94) 100%);z-index:1}
.wb-amen-tile.photo .content{position:relative;width:100%;padding:28px;z-index:2;color:var(--wb-white)!important}
.wb-amen-tile.photo .ico{width:48px;height:48px;background:rgba(118,188,67,0.28);border:1px solid rgba(118,188,67,0.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.wb-amen-tile.photo .ico svg{width:24px;height:24px;stroke:var(--wb-white);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.wb-amen-tile.photo h4{margin:0 0 6px;font-size:clamp(19px,5.2vw,22px);font-weight:800!important;color:var(--wb-white)!important;letter-spacing:-0.01em;line-height:1.18}
.wb-amen-tile.photo p{margin:0;font-size:clamp(13px,3.7vw,14px);line-height:1.5;color:#e4e7ea!important;max-width:340px}

.wb-amen-tile.big{grid-column:1 / 3;grid-row:1 / 3}
.wb-amen-tile.wide{grid-column:3 / 5;grid-row:3 / 4}

.wb-amen-note{display:flex;align-items:flex-start;justify-content:center;gap:8px;margin-top:24px;font-size:12px;line-height:1.5;color:#6b7480!important;font-weight:500!important;letter-spacing:0.02em;text-align:center}
.wb-amen-note::before{content:"*";color:var(--wb-green);font-weight:800!important;line-height:1.4}

/* Hover only on real pointer devices so taps do not leave stuck states */
@media (hover:hover) and (pointer:fine){
  .wb-amen-tile:hover{transform:translateY(-4px)}
  .wb-amen-tile.icon:hover{box-shadow:0 20px 40px -16px rgba(59,69,84,0.18);border-color:rgba(118,188,67,0.3)}
  .wb-amen-tile.icon:hover .ico{transform:scale(1.08);background:var(--wb-green)}
  .wb-amen-tile.icon:hover .ico svg{stroke:var(--wb-white)}
  .wb-amen-tile.photo:hover img{transform:scale(1.05)}
}

/* Tablet */
@media (max-width:900px){
  .wb-amen{padding:72px 20px}
  .wb-amen-head{margin-bottom:34px}
  .wb-amen-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:auto;gap:12px}
  .wb-amen-tile{min-height:180px}
  .wb-amen-tile.big{grid-column:1 / 3;grid-row:auto;min-height:300px}
  .wb-amen-tile.wide{grid-column:1 / 3;grid-row:auto;min-height:260px}
}

/* Phone */
@media (max-width:560px){
  .wb-amen{padding:56px 16px}
  .wb-amen-grid{grid-template-columns:1fr;gap:10px}
  .wb-amen-tile{min-height:0}
  .wb-amen-tile.big,.wb-amen-tile.wide{grid-column:1 / 2}
  .wb-amen-tile.big{min-height:290px}
  .wb-amen-tile.wide{min-height:250px}
  .wb-amen-tile{border-radius:14px}

  /* Icon tiles switch to a compact horizontal row so the stack stays scannable */
  .wb-amen-tile.icon{flex-direction:row;align-items:center;text-align:left;padding:16px 16px;gap:14px}
  .wb-amen-tile.icon .ico{width:44px;height:44px;border-radius:10px}
  .wb-amen-tile.icon .ico svg{width:22px;height:22px}
  .wb-amen-tile.icon h4{font-size:15px}
  .wb-amen-tile.icon p{font-size:13px}
  .wb-amen-tile.icon .txt{gap:3px}

  .wb-amen-tile.photo .content{padding:20px}
  .wb-amen-tile.photo .ico{width:42px;height:42px;margin-bottom:12px}
  .wb-amen-tile.photo .ico svg{width:21px;height:21px}
  .wb-amen-tile.photo p{max-width:100%}
  .wb-amen-note{margin-top:20px;font-size:11.5px}
}

/* Very narrow phones */
@media (max-width:360px){
  .wb-amen{padding:48px 14px}
  .wb-amen-tile.icon{padding:14px}
  .wb-amen-tile.photo .content{padding:18px}
}

@media (prefers-reduced-motion:reduce){
  .wb-amen-tile,.wb-amen-tile *{transition:none!important}
}


/* ============================================================
   Gallery swipe strip
   ============================================================ */

.wb-gal{

  font-family:'Montserrat',sans-serif!important;
  color:var(--wb-navy)!important;
  padding:100px 0 90px;
  background:var(--wb-white);
  width:100%;
  max-width:100%;
  box-sizing:border-box;
  -webkit-text-size-adjust:100%;
}
.wb-gal *{font-family:'Montserrat',sans-serif!important;box-sizing:border-box!important}
.wb-gal img{max-width:100%;display:block}
.wb-gal a{-webkit-tap-highlight-color:transparent}
.wb-gal h2,.wb-gal p,.wb-gal .wb-gal-cap{overflow-wrap:break-word}

.wb-gal-head{max-width:1280px;margin:0 auto 40px;padding:0 32px;display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap}
.wb-gal-head-text{max-width:560px}
.wb-gal-head h2{margin:0 0 12px;font-size:clamp(27px,6.4vw,46px);font-weight:800!important;color:var(--wb-navy)!important;letter-spacing:-0.02em;line-height:1.12}
.wb-gal-head h2 span{color:var(--wb-green)!important}
.wb-gal-head p{margin:0;font-size:clamp(14px,3.9vw,15px);color:#5a6470!important;line-height:1.6}

.wb-gal-meta{display:inline-flex;align-items:center;gap:10px;background:var(--wb-gray);border:1px solid rgba(59,69,84,0.08);padding:10px 16px;border-radius:999px;font-size:12px;font-weight:700!important;letter-spacing:0.08em;color:var(--wb-navy)!important;white-space:nowrap}
.wb-gal-meta svg{width:14px;height:14px;stroke:var(--wb-green);fill:none;stroke-width:2;flex-shrink:0}

.wb-gal-marquee-wrap{position:relative}
.wb-gal-marquee-wrap::before,
.wb-gal-marquee-wrap::after{content:"";position:absolute;top:0;bottom:0;width:60px;z-index:2;pointer-events:none}
.wb-gal-marquee-wrap::before{left:0;background:linear-gradient(90deg,var(--wb-white) 0%,rgba(255,255,255,0) 100%)}
.wb-gal-marquee-wrap::after{right:0;background:linear-gradient(-90deg,var(--wb-white) 0%,rgba(255,255,255,0) 100%)}

.wb-gal-marquee{
  display:flex;gap:16px;
  overflow-x:auto;overflow-y:hidden;
  padding:8px 32px 24px;
  scroll-snap-type:x proximity;
  scroll-padding-left:32px;
  overscroll-behavior-x:contain;
  scrollbar-width:thin;scrollbar-color:rgba(59,69,84,0.25) transparent;
  -webkit-overflow-scrolling:touch;
}
.wb-gal-marquee:focus-visible{outline:2px solid var(--wb-green);outline-offset:-2px;border-radius:8px}
.wb-gal-marquee::-webkit-scrollbar{height:6px}
.wb-gal-marquee::-webkit-scrollbar-track{background:transparent}
.wb-gal-marquee::-webkit-scrollbar-thumb{background:rgba(59,69,84,0.18);border-radius:3px}
.wb-gal-marquee::-webkit-scrollbar-thumb:hover{background:rgba(59,69,84,0.35)}

.wb-gal-card{position:relative;flex:0 0 auto;width:clamp(280px,32vw,420px);aspect-ratio:4 / 3;border-radius:14px;overflow:hidden;background:var(--wb-gray);scroll-snap-align:start;box-shadow:0 12px 28px -14px rgba(59,69,84,0.25);transition:transform .35s ease}
.wb-gal-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .5s ease}
@supports not (aspect-ratio:1/1){
  .wb-gal-card{height:0;padding-bottom:75%}
}

/* Scrim and caption are visible by default so touch users always see them */
.wb-gal-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(59,69,84,0) 45%,rgba(59,69,84,0.86) 100%);opacity:1;transition:opacity .3s ease;pointer-events:none;z-index:1}
.wb-gal-num{position:absolute;top:14px;left:16px;background:var(--wb-white);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--wb-navy)!important;padding:5px 10px;border-radius:6px;font-size:11px;font-weight:800!important;letter-spacing:0.08em;z-index:3}
.wb-gal-cap{position:absolute;bottom:0;left:0;right:0;padding:14px 18px;color:var(--wb-white)!important;font-size:14px;font-weight:700!important;letter-spacing:-0.01em;z-index:2;opacity:1;transform:none;transition:opacity .3s ease,transform .3s ease}

.wb-gal-hint{max-width:1280px;margin:0 auto;padding:8px 32px 0;display:flex;align-items:center;gap:8px;font-size:11px;font-weight:700!important;letter-spacing:0.14em;text-transform:uppercase;color:#6b7480!important}
.wb-gal-hint svg{width:14px;height:14px;stroke:var(--wb-green);fill:none;stroke-width:2;flex-shrink:0}

.wb-gal-actions{max-width:1280px;margin:36px auto 0;padding:0 32px;display:flex;gap:12px;flex-wrap:wrap}
.wb-gal .wb-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 24px;min-height:48px;font-weight:700!important;font-size:12px;letter-spacing:0.12em;text-transform:uppercase;border-radius:10px;text-decoration:none;transition:background .25s ease,color .25s ease,transform .25s ease;cursor:pointer;border:none}
.wb-gal .wb-btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;flex-shrink:0}
.wb-gal .wb-btn-primary{background:var(--wb-green)!important;color:var(--wb-white)!important;box-shadow:0 10px 24px -8px rgba(118,188,67,0.5)}
.wb-gal .wb-btn-primary:active{transform:translateY(1px)}
.wb-gal .wb-btn-outline{background:transparent!important;color:var(--wb-navy)!important;border:2px solid var(--wb-navy)!important;padding:12px 22px}
.wb-gal .wb-btn-outline:active{background:var(--wb-navy)!important;color:var(--wb-white)!important}

/* Hover behavior only on real pointers: caption hides then reveals, no stuck states on tap */
@media (hover:hover) and (pointer:fine){
  .wb-gal-card::after{opacity:0}
  .wb-gal-cap{opacity:0;transform:translateY(8px)}
  .wb-gal-card:hover{transform:translateY(-4px)}
  .wb-gal-card:hover img{transform:scale(1.05)}
  .wb-gal-card:hover::after{opacity:1}
  .wb-gal-card:hover .wb-gal-cap{opacity:1;transform:translateY(0)}
  .wb-gal .wb-btn-primary:hover{background:var(--wb-green-dark)!important;transform:translateY(-2px)}
  .wb-gal .wb-btn-outline:hover{background:var(--wb-navy)!important;color:var(--wb-white)!important}
}

/* Tablet */
@media (max-width:900px){
  .wb-gal{padding:64px 0 60px}
  .wb-gal-head{margin-bottom:28px;padding:0 20px}
  .wb-gal-marquee{padding:8px 20px 24px;scroll-padding-left:20px}
  .wb-gal-marquee-wrap::before,.wb-gal-marquee-wrap::after{width:30px}
  .wb-gal-hint,.wb-gal-actions{padding-left:20px;padding-right:20px}
}

/* Phone */
@media (max-width:600px){
  .wb-gal{padding:56px 0 52px}
  .wb-gal-head{padding:0 16px;margin-bottom:22px;align-items:flex-start;gap:14px}
  .wb-gal-head h2{margin-bottom:8px}
  .wb-gal-meta{font-size:11px;padding:8px 13px}
  .wb-gal-marquee{padding:6px 16px 20px;gap:12px;scroll-padding-left:16px}
  .wb-gal-marquee-wrap::before,.wb-gal-marquee-wrap::after{width:14px}
  .wb-gal-card{width:80vw;border-radius:12px}
  .wb-gal-cap{padding:12px 14px;font-size:13px}
  .wb-gal-num{top:11px;left:12px}
  .wb-gal-hint,.wb-gal-actions{padding-left:16px;padding-right:16px}
  .wb-gal-hint{font-size:10.5px;letter-spacing:0.1em}
  .wb-gal-actions{margin-top:26px;gap:10px}
  .wb-gal .wb-btn{width:100%}
  .wb-gal .wb-btn-outline{padding:12px 20px}
}

@media (max-width:360px){
  .wb-gal-card{width:84vw}
}

@media (prefers-reduced-motion:reduce){
  .wb-gal-card,.wb-gal-card img,.wb-gal-cap,.wb-gal .wb-btn{transition:none!important}
  .wb-gal-marquee{scroll-behavior:auto}
}


/* ============================================================
   Map + drive time stats
   ============================================================ */

.wb-map{

  font-family:'Montserrat',sans-serif!important;
  color:var(--wb-navy)!important;
  padding:80px 24px;
  background:var(--wb-white);
  width:100%;
  max-width:100%;
  overflow-x:hidden;
  box-sizing:border-box;
  -webkit-text-size-adjust:100%;
}
.wb-map *{font-family:'Montserrat',sans-serif!important;box-sizing:border-box!important}
.wb-map a{-webkit-tap-highlight-color:transparent;text-decoration:none}
.wb-map h2,.wb-map .wb-map-stat-name,.wb-map .wb-map-stat-sub{overflow-wrap:break-word}

.wb-map-inner{max-width:1320px;margin:0 auto;width:100%}

.wb-map-head{text-align:center;margin-bottom:32px}
.wb-map-head h2{margin:0;font-size:clamp(26px,6.2vw,40px);font-weight:800!important;color:var(--wb-navy)!important;letter-spacing:-0.02em;line-height:1.12}
.wb-map-head h2 span{color:var(--wb-green)!important}

.wb-map-frame{position:relative;width:100%;border-radius:16px;overflow:hidden;background:var(--wb-gray);box-shadow:0 20px 50px -20px rgba(59,69,84,0.25);aspect-ratio:21 / 9;border:1px solid rgba(59,69,84,0.08);margin-bottom:14px}
.wb-map-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
@supports not (aspect-ratio:1/1){
  .wb-map-frame{height:0;padding-bottom:42.85%}
}

.wb-map-pin{position:absolute;top:18px;left:18px;display:inline-flex;align-items:center;gap:8px;background:var(--wb-white);padding:10px 14px;border-radius:8px;font-size:12px;font-weight:700!important;letter-spacing:0.04em;color:var(--wb-navy)!important;z-index:3;box-shadow:0 8px 20px rgba(59,69,84,0.18);pointer-events:none;max-width:calc(100% - 36px)}
.wb-map-pin svg{width:14px;height:14px;stroke:var(--wb-green);fill:none;stroke-width:2;flex-shrink:0}

/* Tap shim: stops the Google embed from hijacking page scroll on touch */
.wb-map-shim{position:absolute;inset:0;z-index:2;display:none;align-items:flex-end;justify-content:center;padding-bottom:16px;background:transparent;cursor:pointer}
.wb-map-shim span{background:rgba(59,69,84,0.88);color:var(--wb-white);font-size:11px;font-weight:700!important;letter-spacing:0.1em;text-transform:uppercase;padding:9px 14px;border-radius:8px}
.wb-map-shim.is-off{display:none!important}

.wb-map-open{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--wb-green);color:var(--wb-white)!important;padding:14px 20px;border-radius:10px;font-size:12px;font-weight:800!important;letter-spacing:0.12em;text-transform:uppercase;box-shadow:0 14px 28px -8px rgba(118,188,67,0.55);transition:background .25s ease,transform .25s ease;position:absolute;bottom:18px;right:18px;z-index:3;min-height:48px}
.wb-map-open svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.5;flex-shrink:0}

.wb-map-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.wb-map-stat{position:relative;border-radius:14px;padding:28px 24px;border:1px solid rgba(59,69,84,0.06);transition:transform .3s ease,box-shadow .3s ease;overflow:hidden}
.wb-map-stat.s-gray{background:var(--wb-gray)}
.wb-map-stat.s-green{background:var(--wb-green);border-color:transparent}
.wb-map-stat.s-navy{background:var(--wb-navy);border-color:transparent}

.wb-map-stat-icon{width:42px;height:42px;border-radius:10px;display:flex;align-items:center;justify-content:center;margin-bottom:18px;flex-shrink:0;transition:background .25s ease}
.wb-map-stat-icon svg{width:22px;height:22px;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

.wb-map-stat.s-gray .wb-map-stat-icon{background:var(--wb-white);border:1px solid rgba(118,188,67,0.3)}
.wb-map-stat.s-gray .wb-map-stat-icon svg{stroke:var(--wb-green)}
.wb-map-stat.s-green .wb-map-stat-icon,
.wb-map-stat.s-navy .wb-map-stat-icon{background:rgba(255,255,255,0.18);border:1px solid rgba(255,255,255,0.4)}
.wb-map-stat.s-green .wb-map-stat-icon svg,
.wb-map-stat.s-navy .wb-map-stat-icon svg{stroke:var(--wb-white)}

.wb-map-stat-num{font-size:42px;font-weight:800!important;letter-spacing:-0.03em;line-height:1;margin-bottom:8px;font-variant-numeric:tabular-nums;white-space:nowrap}
.wb-map-stat-num .unit{font-size:0.4em;font-weight:700!important;letter-spacing:0;margin-left:4px;vertical-align:baseline}
.wb-map-stat.s-gray .wb-map-stat-num{color:var(--wb-navy)}
.wb-map-stat.s-gray .wb-map-stat-num .unit{color:var(--wb-green)}
.wb-map-stat.s-green .wb-map-stat-num,
.wb-map-stat.s-navy .wb-map-stat-num{color:var(--wb-white)}
.wb-map-stat.s-green .wb-map-stat-num .unit,
.wb-map-stat.s-navy .wb-map-stat-num .unit{color:rgba(255,255,255,0.88)}

.wb-map-stat-name{font-size:15px;font-weight:800!important;letter-spacing:-0.01em;margin-bottom:3px;line-height:1.25}
.wb-map-stat-sub{font-size:12px;font-weight:500!important;letter-spacing:0.02em;line-height:1.35}
.wb-map-stat.s-gray .wb-map-stat-name{color:var(--wb-navy)}
.wb-map-stat.s-gray .wb-map-stat-sub{color:#5a6470}
.wb-map-stat.s-green .wb-map-stat-name,
.wb-map-stat.s-navy .wb-map-stat-name{color:var(--wb-white)}
.wb-map-stat.s-green .wb-map-stat-sub,
.wb-map-stat.s-navy .wb-map-stat-sub{color:rgba(255,255,255,0.88)}

@media (hover:hover) and (pointer:fine){
  .wb-map-open:hover{background:var(--wb-green-dark)!important;transform:translateY(-2px)}
  .wb-map-stat:hover{transform:translateY(-4px);box-shadow:0 18px 36px -14px rgba(59,69,84,0.18)}
}

/* Tablet */
@media (max-width:1000px){
  .wb-map{padding:64px 20px}
  .wb-map-frame{aspect-ratio:16 / 10}
  @supports not (aspect-ratio:1/1){.wb-map-frame{padding-bottom:62.5%}}
  .wb-map-stats{grid-template-columns:repeat(2,1fr)}
  .wb-map-shim{display:flex}
}

/* Phone */
@media (max-width:600px){
  .wb-map{padding:56px 16px}
  .wb-map-head{margin-bottom:22px}
  .wb-map-frame{aspect-ratio:4 / 3;border-radius:12px;margin-bottom:12px;box-shadow:0 12px 30px -16px rgba(59,69,84,0.25)}
  @supports not (aspect-ratio:1/1){.wb-map-frame{padding-bottom:75%}}
  .wb-map-pin{top:12px;left:12px;padding:8px 11px;font-size:11px}

  /* Button moves below the map so it stops covering Google attribution */
  .wb-map-open{position:static;width:100%;margin-bottom:12px;padding:15px 18px;font-size:12px;box-shadow:0 10px 22px -10px rgba(118,188,67,0.5)}

  /* Stats become a single column list row: icon | number | label */
  .wb-map-stats{grid-template-columns:1fr;gap:10px}
  .wb-map-stat{display:flex;align-items:center;gap:14px;padding:16px 16px;border-radius:12px}
  .wb-map-stat-icon{width:40px;height:40px;margin-bottom:0;border-radius:9px}
  .wb-map-stat-icon svg{width:20px;height:20px}
  .wb-map-stat-num{font-size:26px;margin-bottom:0;flex-shrink:0;min-width:66px}
  .wb-map-stat-num .unit{font-size:0.46em}
  .wb-map-stat-body{min-width:0}
  .wb-map-stat-name{font-size:14px;margin-bottom:1px}
  .wb-map-stat-sub{font-size:11.5px}
}

@media (max-width:360px){
  .wb-map{padding:48px 14px}
  .wb-map-stat{gap:11px;padding:14px}
  .wb-map-stat-num{font-size:24px;min-width:60px}
}

@media (prefers-reduced-motion:reduce){
  .wb-map-stat,.wb-map-open{transition:none!important}
}


/* ============================================================
   Tenant stories strip
   ============================================================ */

.wb-stories{

  font-family:'Montserrat',sans-serif!important;
  color:var(--wb-navy)!important;
  padding:72px 24px;
  background:var(--wb-white);
  width:100%;
  max-width:100%;
  overflow-x:hidden;
  box-sizing:border-box;
  -webkit-text-size-adjust:100%;
}
.wb-stories *{font-family:'Montserrat',sans-serif!important;box-sizing:border-box!important}
.wb-stories img{max-width:100%;display:block}
.wb-stories a{-webkit-tap-highlight-color:transparent;text-decoration:none;color:inherit}
.wb-stories h2,.wb-stories .wb-story-name{overflow-wrap:break-word}

.wb-stories-inner{max-width:1320px;margin:0 auto;width:100%}

/* Header — centered above the strip */
.wb-stories-head{text-align:center;margin-bottom:32px;display:flex;flex-direction:column;align-items:center;gap:10px}
.wb-stories-head h2{margin:0;font-size:clamp(25px,5.8vw,36px);font-weight:800!important;color:var(--wb-navy)!important;letter-spacing:-0.02em;line-height:1.15}
.wb-stories-head h2 span{color:var(--wb-green)!important}
.wb-stories-cta{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:11px;font-weight:700!important;letter-spacing:0.14em;text-transform:uppercase;color:var(--wb-green-dark)!important;transition:gap .2s ease}
.wb-stories-cta svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2.5;flex-shrink:0}

/* Strip — 5 equal cards */
.wb-stories-strip{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}

.wb-story{position:relative;border-radius:12px;overflow:hidden;background:var(--wb-navy);display:block;aspect-ratio:1 / 1;transition:transform .3s ease,box-shadow .3s ease;box-shadow:0 4px 14px -6px rgba(59,69,84,0.15)}
.wb-story img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .5s ease}
@supports not (aspect-ratio:1/1){
  .wb-story{height:0;padding-bottom:100%}
}

/* Bottom gradient */
.wb-story::after{content:"";position:absolute;left:0;right:0;bottom:0;height:58%;background:linear-gradient(180deg,rgba(59,69,84,0) 0%,rgba(59,69,84,0.5) 45%,rgba(59,69,84,0.94) 100%);pointer-events:none;z-index:1}

/* Bottom: name + arrow */
.wb-story-foot{position:absolute;left:0;right:0;bottom:0;padding:14px 14px 16px;z-index:2;display:flex;justify-content:space-between;align-items:flex-end;gap:8px}
.wb-story-name{font-size:15px;font-weight:800!important;color:var(--wb-white)!important;letter-spacing:-0.01em;line-height:1.15;min-width:0;flex:1}
.wb-story-arrow{flex-shrink:0;width:28px;height:28px;background:rgba(255,255,255,0.22);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,0.35);border-radius:50%;display:flex;align-items:center;justify-content:center;transition:background .3s ease,border-color .3s ease,transform .3s ease}
.wb-story-arrow svg{width:12px;height:12px;stroke:var(--wb-white);fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s ease}

/* Swipe hint, mobile only */
.wb-stories-hint{display:none;align-items:center;gap:8px;margin-top:12px;font-size:10.5px;font-weight:700!important;letter-spacing:0.12em;text-transform:uppercase;color:#6b7480!important}
.wb-stories-hint svg{width:13px;height:13px;stroke:var(--wb-green);fill:none;stroke-width:2;flex-shrink:0}

@media (hover:hover) and (pointer:fine){
  .wb-stories-cta:hover{gap:12px;color:var(--wb-green)!important}
  .wb-story:hover{transform:translateY(-4px);box-shadow:0 14px 28px -10px rgba(59,69,84,0.25)}
  .wb-story:hover img{transform:scale(1.05)}
  .wb-story:hover .wb-story-arrow{background:var(--wb-green);border-color:var(--wb-green);transform:rotate(45deg) scale(1.1)}
  .wb-story:hover .wb-story-arrow svg{transform:rotate(-45deg)}
}

/* Tablet and phone: swipe strip instead of hiding cards.
   The old rules used display:none and dropped 3 of 5 tenants on mobile. */
@media (max-width:1000px){
  .wb-stories{padding:56px 20px}
  .wb-stories-head{margin-bottom:24px}
  .wb-stories-strip{
    display:flex;grid-template-columns:none;gap:12px;
    overflow-x:auto;overflow-y:hidden;
    margin:0 -20px;padding:4px 20px 16px;
    scroll-snap-type:x proximity;scroll-padding-left:20px;
    overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;
    scrollbar-width:thin;scrollbar-color:rgba(59,69,84,0.25) transparent;
  }
  .wb-stories-strip::-webkit-scrollbar{height:5px}
  .wb-stories-strip::-webkit-scrollbar-track{background:transparent}
  .wb-stories-strip::-webkit-scrollbar-thumb{background:rgba(59,69,84,0.18);border-radius:3px}
  .wb-stories-strip:focus-visible{outline:2px solid var(--wb-green);outline-offset:-2px;border-radius:8px}
  .wb-story{flex:0 0 auto;width:38vw;scroll-snap-align:start}
  .wb-stories-hint{display:flex}
}

@media (max-width:600px){
  .wb-stories{padding:52px 16px}
  .wb-stories-strip{margin:0 -16px;padding:4px 16px 14px;gap:10px;scroll-padding-left:16px}
  .wb-story{width:60vw}
  .wb-story-foot{padding:12px 12px 13px}
  .wb-story-name{font-size:14px}
  .wb-story-arrow{width:26px;height:26px}
}

@media (max-width:360px){
  .wb-stories{padding:46px 14px}
  .wb-stories-strip{margin:0 -14px;padding:4px 14px 14px;scroll-padding-left:14px}
  .wb-story{width:68vw}
}

@media (prefers-reduced-motion:reduce){
  .wb-story,.wb-story img,.wb-story-arrow,.wb-story-arrow svg,.wb-stories-cta{transition:none!important}
}


/* ============================================================
   Leasing process timeline
   ============================================================ */

.wb-proc{

  font-family:'Montserrat',sans-serif!important;
  color:var(--wb-navy)!important;
  padding:90px 24px;
  background:var(--wb-gray);
  width:100%;
  max-width:100%;
  overflow-x:hidden;
  box-sizing:border-box;
  -webkit-text-size-adjust:100%;
}
.wb-proc *{font-family:'Montserrat',sans-serif!important;box-sizing:border-box!important;-webkit-tap-highlight-color:transparent}
.wb-proc h2,.wb-proc h3,.wb-proc p{overflow-wrap:break-word}

.wb-proc-inner{max-width:1100px;margin:0 auto;width:100%}

/* Header */
.wb-proc-head{text-align:center;margin-bottom:72px;max-width:680px;margin-left:auto;margin-right:auto}
.wb-proc-eyebrow{display:inline-block;font-size:11px;font-weight:700!important;letter-spacing:0.18em;text-transform:uppercase;color:var(--wb-navy)!important;background:var(--wb-white);padding:8px 14px;border-radius:4px;margin-bottom:16px;line-height:1.3}
.wb-proc-head h2{margin:0;font-size:clamp(26px,6vw,40px);font-weight:800!important;color:var(--wb-navy)!important;letter-spacing:-0.02em;line-height:1.18}

/* Timeline track */
.wb-proc-track{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:24px}

/* Dashed line between markers (desktop) */
.wb-proc-track::before{content:"";position:absolute;top:39px;left:calc(16.66% + 48px);right:calc(16.66% + 48px);height:2px;background:repeating-linear-gradient(90deg,var(--wb-green) 0 10px,transparent 10px 18px);opacity:0.55;z-index:0}

/* Step */
.wb-proc-step{position:relative;text-align:center;z-index:1;padding:0 8px;transition:transform .3s ease}

/* Marker — white circle with green number */
.wb-proc-marker{position:relative;width:80px;height:80px;margin:0 auto 24px;background:var(--wb-white);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:34px;font-weight:800!important;color:var(--wb-green)!important;letter-spacing:-0.02em;line-height:1;z-index:2;box-shadow:0 0 0 8px var(--wb-gray),0 12px 28px -8px rgba(59,69,84,0.18);transition:background .3s ease,color .3s ease,box-shadow .3s ease}

/* Content */
.wb-proc-step h3{margin:0 0 10px;font-size:clamp(18px,4.9vw,20px);font-weight:800!important;color:var(--wb-navy)!important;letter-spacing:-0.01em;line-height:1.22}
.wb-proc-step p{margin:0;font-size:clamp(13.5px,3.8vw,14px);line-height:1.6;color:#5a6470!important;max-width:280px;margin-left:auto;margin-right:auto}

@media (hover:hover) and (pointer:fine){
  .wb-proc-step:hover{transform:translateY(-4px)}
  .wb-proc-step:hover .wb-proc-marker{background:var(--wb-green);color:var(--wb-white)!important;box-shadow:0 0 0 8px var(--wb-gray),0 16px 32px -6px rgba(118,188,67,0.45)}
}

/* Tablet and phone: vertical timeline */
@media (max-width:900px){
  .wb-proc{padding:64px 20px}
  .wb-proc-head{margin-bottom:44px}
  .wb-proc-track{grid-template-columns:1fr;gap:30px}

  /* Full height track line replaced by per step connectors so the
     line starts under circle 1 and stops under circle 3 */
  .wb-proc-track::before{display:none}
  .wb-proc-step::before{content:"";position:absolute;left:39px;top:80px;bottom:-30px;width:2px;background:repeating-linear-gradient(180deg,var(--wb-green) 0 10px,transparent 10px 18px);opacity:0.55;z-index:0}
  .wb-proc-step:last-child::before{display:none}

  .wb-proc-step{display:grid;grid-template-columns:80px 1fr;gap:22px;text-align:left;align-items:start;padding:0}
  .wb-proc-step:hover{transform:none}
  .wb-proc-marker{margin:0}
  .wb-proc-step p{margin-left:0;margin-right:0;max-width:none}
}

/* Phone */
@media (max-width:560px){
  .wb-proc{padding:56px 16px}
  .wb-proc-head{margin-bottom:34px}
  .wb-proc-track{gap:26px}
  .wb-proc-step{grid-template-columns:60px 1fr;gap:16px}
  .wb-proc-marker{width:60px;height:60px;font-size:26px;box-shadow:0 0 0 6px var(--wb-gray),0 10px 22px -10px rgba(59,69,84,0.18)}
  .wb-proc-step::before{left:29px;top:60px;bottom:-26px}
  .wb-proc-step h3{margin-bottom:6px}
}

@media (max-width:360px){
  .wb-proc{padding:48px 14px}
  .wb-proc-step{grid-template-columns:52px 1fr;gap:14px}
  .wb-proc-marker{width:52px;height:52px;font-size:23px;box-shadow:0 0 0 5px var(--wb-gray),0 10px 22px -10px rgba(59,69,84,0.18)}
  .wb-proc-step::before{left:25px;top:52px}
}

@media (prefers-reduced-motion:reduce){
  .wb-proc-step,.wb-proc-marker{transition:none!important}
}


/* ============================================================
   Who we serve grid
   ============================================================ */

.wb-wws{

  font-family:'Montserrat',sans-serif!important;
  color:var(--wb-navy)!important;
  padding:100px 24px;
  background:var(--wb-white);
  width:100%;
  max-width:100%;
  overflow-x:hidden;
  box-sizing:border-box;
  -webkit-text-size-adjust:100%;
}
.wb-wws *{font-family:'Montserrat',sans-serif!important;box-sizing:border-box!important}
.wb-wws img{max-width:100%;display:block}
.wb-wws a{-webkit-tap-highlight-color:transparent;text-decoration:none}
.wb-wws h2,.wb-wws h4,.wb-wws p{overflow-wrap:break-word}

.wb-wws-inner{max-width:1280px;margin:0 auto;width:100%}

/* Header */
.wb-wws-head{margin-bottom:48px}
.wb-wws-head-text{max-width:600px}
.wb-wws-head h2{margin:0 0 14px;font-size:clamp(27px,6.4vw,46px);font-weight:800!important;color:var(--wb-navy)!important;letter-spacing:-0.02em;line-height:1.12}
.wb-wws-head h2 span{color:var(--wb-green)!important}
.wb-wws-head p{margin:0;font-size:clamp(14px,3.9vw,16px);line-height:1.65;color:#5a6470!important}

/* Grid */
.wb-wws-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}

.wb-wws-card{position:relative;display:block;aspect-ratio:1 / 1.15;border-radius:14px;overflow:hidden;background:var(--wb-navy);transition:transform .3s ease,box-shadow .3s ease;cursor:pointer;border:1px solid rgba(59,69,84,0.06)}
.wb-wws-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .5s ease}
@supports not (aspect-ratio:1/1){
  .wb-wws-card{height:0;padding-bottom:115%}
}
.wb-wws-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(59,69,84,0) 32%,rgba(59,69,84,0.6) 62%,rgba(59,69,84,0.94) 100%);z-index:1;pointer-events:none}

.wb-wws-card-body{position:absolute;left:0;right:0;bottom:0;padding:20px 20px 22px;z-index:2;color:var(--wb-white)!important}
.wb-wws-card-icon{width:38px;height:38px;background:rgba(118,188,67,0.24);border:1px solid rgba(118,188,67,0.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:8px;display:flex;align-items:center;justify-content:center;margin-bottom:12px;transition:background .25s ease,border-color .25s ease}
.wb-wws-card-icon svg{width:18px;height:18px;stroke:var(--wb-white);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.wb-wws-card h4{margin:0 0 4px;font-size:16px;font-weight:800!important;color:var(--wb-white)!important;letter-spacing:-0.01em;line-height:1.2}
.wb-wws-card p{margin:0;font-size:12px;font-weight:500!important;color:#e4e7ea!important;line-height:1.4}

/* Arrow visible by default so touch users see the cards are links */
.wb-wws-card-arrow{position:absolute;top:16px;right:16px;width:32px;height:32px;background:var(--wb-white);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:50%;display:flex;align-items:center;justify-content:center;z-index:2;opacity:1;transform:none;transition:opacity .3s ease,transform .3s ease}
.wb-wws-card-arrow svg{width:16px;height:16px;stroke:var(--wb-navy);fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}

/* Footer */
.wb-wws-footer{margin-top:36px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;padding-top:28px;border-top:1px solid rgba(59,69,84,0.12)}
.wb-wws-footer-text{font-size:14px;color:#5a6470!important;font-weight:500!important;line-height:1.5}
.wb-wws-footer-text strong{color:var(--wb-navy)!important;font-weight:700!important}
.wb-wws-cta{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:12px;font-weight:700!important;letter-spacing:0.12em;text-transform:uppercase;color:var(--wb-green-dark)!important;transition:gap .2s ease}
.wb-wws-cta svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.5;flex-shrink:0}

@media (hover:hover) and (pointer:fine){
  .wb-wws-card:hover{transform:translateY(-4px);box-shadow:0 20px 40px -16px rgba(59,69,84,0.25)}
  .wb-wws-card:hover img{transform:scale(1.06)}
  .wb-wws-card-arrow{opacity:0;transform:scale(0.8)}
  .wb-wws-card:hover .wb-wws-card-arrow{opacity:1;transform:scale(1)}
  .wb-wws-card:hover .wb-wws-card-icon{background:var(--wb-green);border-color:var(--wb-green)}
  .wb-wws-cta:hover{gap:12px;color:var(--wb-green)!important}
}

@media (max-width:1000px){
  .wb-wws-grid{grid-template-columns:repeat(3,1fr)}
}

@media (max-width:760px){
  .wb-wws{padding:64px 20px}
  .wb-wws-head{margin-bottom:32px}
  .wb-wws-grid{grid-template-columns:repeat(2,1fr);gap:12px}
}

/* Phone: single column banner cards instead of tall portraits.
   Eight 1/1.15 cards stacked was roughly 3200px of scrolling. */
@media (max-width:560px){
  .wb-wws{padding:56px 16px}
  .wb-wws-head{margin-bottom:26px}
  .wb-wws-grid{grid-template-columns:1fr;gap:10px}
  .wb-wws-card{aspect-ratio:16 / 10;border-radius:12px}
  @supports not (aspect-ratio:1/1){.wb-wws-card{padding-bottom:62.5%}}
  .wb-wws-card::after{background:linear-gradient(180deg,rgba(59,69,84,0.05) 25%,rgba(59,69,84,0.62) 58%,rgba(59,69,84,0.94) 100%)}
  .wb-wws-card-body{padding:16px 16px 18px}
  .wb-wws-card-icon{width:34px;height:34px;margin-bottom:10px;border-radius:7px}
  .wb-wws-card-icon svg{width:17px;height:17px}
  .wb-wws-card h4{font-size:16px}
  .wb-wws-card p{font-size:11.5px}
  .wb-wws-card-arrow{top:12px;right:12px;width:30px;height:30px}
  .wb-wws-footer{margin-top:28px;padding-top:22px;gap:10px}
  .wb-wws-footer-text{font-size:13.5px}
}

@media (max-width:360px){
  .wb-wws{padding:48px 14px}
  .wb-wws-card{aspect-ratio:16 / 11}
  @supports not (aspect-ratio:1/1){.wb-wws-card{padding-bottom:68.75%}}
  .wb-wws-card-body{padding:14px}
}

@media (prefers-reduced-motion:reduce){
  .wb-wws-card,.wb-wws-card img,.wb-wws-card-arrow,.wb-wws-card-icon,.wb-wws-cta{transition:none!important}
}