@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@700;800&family=Instrument+Serif:ital@0;1&family=Jost:wght@500&family=Manrope:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');
:root{--font-display:"Big Shoulders Display",Impact,"Arial Narrow",sans-serif!important;--font-brand:"Big Shoulders Display",Impact,"Arial Narrow",sans-serif!important;--font-caps:"Big Shoulders Display",Impact,"Arial Narrow",sans-serif!important;--font-serif:"Instrument Serif",Georgia,serif!important;--font-sans:Manrope,"Manrope Fallback","Helvetica Neue",Arial,sans-serif!important;--font-mono:"IBM Plex Mono",Menlo,monospace!important}
body{font-family:var(--font-sans)}
h1,h2,.h1,.h2{font-family:var(--font-display)!important;font-weight:800!important;text-transform:uppercase;line-height:.92!important;letter-spacing:.005em!important}
h3,.h3{font-family:var(--font-display)!important;font-weight:700!important;text-transform:uppercase;line-height:.95;letter-spacing:.01em}
h1 i,h2 i,h3 i,h1 em,h2 em,h3 em,.h1 i,.h2 i{font-family:var(--font-serif)!important;font-style:italic;font-weight:400!important;text-transform:none;letter-spacing:-.01em;font-size:.9em}

.js .mc-rv{opacity:.3;transform:translateY(22px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}.js .mc-rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.js .mc-rv{opacity:1;transform:none;transition:none}}
.mc-cur{position:fixed;left:0;top:0;pointer-events:none;z-index:9999;background:#14202B;color:#F5F3EE;font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;padding:12px 16px;border-radius:999px;transform:translate(-50%,-50%) scale(0);transition:transform .25s ease}.mc-cur.on{transform:translate(-50%,-50%) scale(1)}
body>header:first-of-type,header.nav,header.site,.nav{transition:transform .4s ease}.mc-hide{transform:translateY(-100%)!important}
.mc-by{display:flex;align-items:center;justify-content:center;gap:12px;padding:22px 16px;font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;opacity:.85;text-decoration:none;color:inherit;border-top:1px solid rgba(128,128,128,.25)}
.mc-by b{display:inline-flex;flex-direction:column;gap:3px;font-family:"Big Shoulders Display",Impact,sans-serif;font-weight:800;font-size:22px;letter-spacing:.01em;line-height:.9;text-transform:uppercase;white-space:nowrap}.mc-by b em{font-family:Jost,Manrope,sans-serif;font-style:normal;font-weight:500;font-size:7px;letter-spacing:.42em;line-height:1;opacity:.85}
img{transition:transform .8s ease}a:hover>img{transform:scale(1.02)}

/* Mica Creek accents */
.btn.brass,.btn.primary,.stick a.brass{background:var(--mc-accent,#D9552B)!important;color:var(--mc-on-accent,#F5F3EE)!important;border-color:var(--mc-accent,#D9552B)!important}
.btn.brass:hover,.btn.primary:hover,.stick a.brass:hover{background:var(--mc-accent-deep,#C24A24)!important;color:var(--mc-on-accent,#F5F3EE)!important;border-color:var(--mc-accent-deep,#C24A24)!important}
:is(.eyebrow,.navtag,.chip,.quiz .qn,.people .p small,.conc div span,.card .spec,.card .price span,.filters .lbl,.filters .count,.poi-list li span,.events .d small,.events .t,.info .box b,.urgent .live,.stats div span,footer h4,.crumbs,.postmeta){font-family:"IBM Plex Mono",Menlo,monospace!important;font-size:11px!important;letter-spacing:.16em!important;color:#14202B!important}
:is(.dark,.studio,.hero,footer,.banner,.menu,.lightbox,.collage .note,.ticker.garnet) :is(.eyebrow,.navtag,.chip,.quiz .qn,.people .p small,.conc div span,.card .spec,.card .price span,.filters .lbl,.filters .count,.poi-list li span,.events .d small,.events .t,.info .box b,.urgent .live,.stats div span,footer h4,.crumbs,.postmeta){color:#F5F3EE!important}
footer,footer a{color:#F5F3EE}
main p a:not(.btn):hover,.prose a:hover,.faq .a a:hover{text-decoration:underline;text-decoration-color:var(--mc-accent,#D9552B)}

/* Upgraded top menu bar: larger logo, condenses on scroll, animated links, scroll progress */
header.nav{transition:transform .4s ease,background-color .3s ease,box-shadow .3s ease,border-color .3s ease!important}
header.nav .wrap{height:112px!important;transition:height .35s cubic-bezier(.2,.7,.2,1)}
header.nav .lock img{height:88px!important;transition:height .35s cubic-bezier(.2,.7,.2,1)}
header.nav.mc-scrolled{background:color-mix(in srgb,var(--cream) 88%,transparent)!important;-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);box-shadow:0 10px 30px rgba(14,23,32,.10);border-bottom-color:rgba(20,32,43,.18)!important}
header.nav.mc-scrolled .wrap{height:76px!important}
header.nav.mc-scrolled .lock img{height:56px!important}
header.nav .lock::after{display:none}
header.nav .items a{position:relative;border-bottom:0!important;padding:10px 2px!important;transition:color .2s}
header.nav .items a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:2px;border-radius:2px;background:var(--mc-accent,#D9552B);transform:scaleX(0);transform-origin:right;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
header.nav .items a:hover{color:var(--moss)}
header.nav .items a:hover::after,header.nav .items a[aria-current="page"]::after{transform:scaleX(1);transform-origin:left}
header.nav .items a[aria-current="page"]{font-weight:700}
header.nav .btn{transition:transform .2s,box-shadow .2s,background-color .2s}
header.nav .btn.brass:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(14,23,32,.18)}
header.nav .burger{transition:transform .2s}header.nav .burger:hover{transform:scale(1.05)}
.mc-prog{position:absolute;left:0;bottom:-2px;height:3px;width:100%;background:var(--sage);transform:scaleX(0);transform-origin:left;pointer-events:none}
@media (max-width:1400px){header.nav .lock img{height:76px!important}}
@media (max-width:1250px){header.nav .lock img{height:62px!important}header.nav.mc-scrolled .lock img{height:50px!important}}
@media (max-width:1100px){header.nav .wrap{height:88px!important}header.nav .lock img{height:62px!important}header.nav.mc-scrolled .wrap{height:68px!important}header.nav.mc-scrolled .lock img{height:46px!important}}
@media (max-width:900px) and (min-width:761px){header.nav .lock img{height:48px!important}header.nav.mc-scrolled .lock img{height:40px!important}}
@media (max-width:700px){header.nav .wrap{height:72px!important}header.nav .lock img{height:46px!important}header.nav.mc-scrolled .wrap{height:60px!important}header.nav.mc-scrolled .lock img{height:38px!important}}
@media (max-width:400px){header.nav .lock img{height:40px!important}header.nav.mc-scrolled .lock img{height:34px!important}}
@media (prefers-reduced-motion:reduce){header.nav,header.nav .wrap,header.nav .lock img,header.nav .items a::after{transition:none!important}}
/* Header row: centered on the page with even side margins; links sit centered between the logo and the buttons */
header.nav .wrap{max-width:1760px}
header.nav .items{margin-inline:auto}
@media (max-width:1800px){header.nav .navtag{display:none}}
@media (max-width:1600px){header.nav .tel{display:none}}
@media (min-width:1101px) and (max-width:1140px){header.nav .wrap{gap:14px}}

/* Background textures: tone-on-tone overlays, so they follow whatever the palette colors are */
:root{
--tx-grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
--tx-grain-lt:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
--tx-topo:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='480' fill='none' stroke='%23F5F3EE' stroke-opacity='.07' stroke-width='1.4'%3E%3Cpath d='M-20 60C60 20 120 90 200 60S340 0 420 40 500 80 500 80'/%3E%3Cpath d='M-20 100C70 60 130 130 210 100S350 40 430 80 500 120 500 120'/%3E%3Cpath d='M-20 140C80 100 140 170 220 140S360 80 440 120 500 160 500 160'/%3E%3Cpath d='M-20 300C40 260 110 320 170 290S280 230 330 270 420 330 500 300'/%3E%3Cpath d='M-20 340C50 300 120 360 180 330S290 270 340 310 430 370 500 340'/%3E%3Cpath d='M-20 380C60 340 130 400 190 370S300 310 350 350 440 410 500 380'/%3E%3Cpath d='M-20 420C70 380 140 440 200 410S310 350 360 390 450 450 500 420'/%3E%3Cellipse cx='120' cy='225' rx='60' ry='26'/%3E%3Cellipse cx='120' cy='225' rx='34' ry='13'/%3E%3Cellipse cx='370' cy='205' rx='70' ry='30'/%3E%3Cellipse cx='370' cy='205' rx='44' ry='18'/%3E%3Cellipse cx='370' cy='205' rx='18' ry='7'/%3E%3C/svg%3E");
}
/* Cream page: soft paper grain */
html body{background-image:var(--tx-grain);background-size:220px 220px;background-blend-mode:normal}
/* Dark bands + footer: topographic contour lines over a fine grain */
html body :is(.section.dark,.studio,footer){background-image:var(--tx-topo),var(--tx-grain-lt)!important;background-size:480px 480px,220px 220px!important;background-repeat:repeat!important}
html body :is(.banner,.ticker.garnet){background-image:var(--tx-grain-lt)!important;background-size:220px 220px!important}
/* Sky blue bands: halftone dot screen */
html body :is(.limebg,.sagebg){background-image:radial-gradient(rgba(20,32,43,.13) 1.1px,transparent 1.6px),var(--tx-grain)!important;background-size:16px 16px,220px 220px!important;background-position:0 0,0 0!important}
/* Soft blue bands: drafting / blueprint grid */
html body .tone{background-image:linear-gradient(rgba(20,32,43,.075) 1px,transparent 1px),linear-gradient(90deg,rgba(20,32,43,.075) 1px,transparent 1px),linear-gradient(rgba(20,32,43,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(20,32,43,.035) 1px,transparent 1px)!important;background-size:160px 160px,160px 160px,32px 32px,32px 32px!important;background-position:-1px -1px!important}
/* Alert strip: fine diagonal hatching */
html body .urgent{background-image:repeating-linear-gradient(135deg,rgba(20,32,43,.045) 0 1px,transparent 1px 9px)!important}
/* Ticker: subtle horizontal pinstripe */
html body .ticker:not(.garnet){background-image:repeating-linear-gradient(0deg,rgba(20,32,43,.06) 0 1px,transparent 1px 6px)!important}
@media print{html body,html body *{background-image:none!important}}
/* hero lead: deeper scrim behind the copy column + larger, stronger-shadowed text so it reads over the photo */
.hero .bg::after{background:linear-gradient(90deg,rgba(14,23,32,.6) 0%,rgba(14,23,32,.32) 42%,rgba(14,23,32,0) 72%),linear-gradient(180deg,rgba(14,23,32,.15) 0%,rgba(14,23,32,.3) 40%,rgba(14,23,32,.9) 100%)!important}
.hero .wrap .lead{color:#fff;font-size:20px;line-height:32px;font-weight:500;letter-spacing:.005em;max-width:34em;text-shadow:0 1px 2px rgba(0,0,0,.65),0 2px 18px rgba(0,0,0,.45)}
@media (max-width:900px){.hero .wrap .lead{font-size:17px;line-height:27px}.hero .bg::after{background:linear-gradient(180deg,rgba(14,23,32,.25) 0%,rgba(14,23,32,.45) 35%,rgba(14,23,32,.92) 100%)!important}}

/* Menu bar over a hero photo: transparent with light type at the top of the page, frosted cream once you scroll past the photo */
:root{--mc-navh:114px}
@media (max-width:1100px){:root{--mc-navh:90px}}
@media (max-width:700px){:root{--mc-navh:74px}}
/* :has() applies the pull-up on first paint, before the script adds .mc-overhero, so the hero doesn't load low and then snap up */
html:is(.mc-overhero,:has(header.nav)) main>.hero:first-child{margin-top:calc(-1 * var(--mc-navh))}
html:is(.mc-overhero,:has(header.nav)) main>.hero:first-child .sticker{top:calc(var(--mc-navh) + 20px)}
header.nav::before{content:"";position:absolute;inset:0 0 -40px;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(14,23,32,.62) 0%,rgba(14,23,32,.28) 55%,rgba(14,23,32,0) 100%);opacity:0;transition:opacity .4s ease}
header.nav .lock{position:relative}
header.nav .lock img{transition:height .35s cubic-bezier(.2,.7,.2,1),opacity .35s ease}
header.nav .lock .mc-logo-w{position:absolute;left:0;top:50%;translate:0 -50%;opacity:0;pointer-events:none}
header.nav.mc-over .items a,header.nav.mc-over .tel,header.nav.mc-over .navtag,header.nav.mc-over .btn,header.nav.mc-over .burger{transition:color .3s,background-color .3s,border-color .3s,transform .2s,box-shadow .2s}
html body header.nav.mc-over:not(.mc-past){background:transparent!important;border-bottom-color:transparent!important;box-shadow:none!important;-webkit-backdrop-filter:none;backdrop-filter:none}
header.nav.mc-over:not(.mc-past)::before{opacity:1}
header.nav.mc-over:not(.mc-past) .lock .mc-logo-w{opacity:1}
header.nav.mc-over:not(.mc-past) .lock #navlogo{opacity:0}
header.nav.mc-over:not(.mc-past) :is(.items a,.tel){color:var(--cream);text-shadow:0 1px 8px rgba(0,0,0,.35)}
header.nav.mc-over:not(.mc-past) .items a:hover{color:#fff}
header.nav.mc-over:not(.mc-past) .navtag{color:var(--cream)!important;border-color:rgba(245,243,238,.7)}
header.nav.mc-over:not(.mc-past) .btn.txt{color:var(--cream);border-color:rgba(245,243,238,.8);background:rgba(14,23,32,.15)}
header.nav.mc-over:not(.mc-past) .btn.txt:hover{background:var(--cream);color:var(--forest);box-shadow:none}
header.nav.mc-over:not(.mc-past) .btn.brass{background:var(--cream);color:var(--forest);border-color:var(--cream)}
header.nav.mc-over:not(.mc-past) .btn.brass:hover{background:#fff;border-color:#fff;color:var(--forest)}
html body header.nav.mc-over:not(.mc-past) .burger{background:rgba(14,23,32,.25);color:var(--cream);border-color:rgba(245,243,238,.8);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}

/* Sliding pill that follows the pointer across the links and rests on the current page */
header.nav .items.mc-has-ind{position:relative;isolation:isolate}
header.nav .items.mc-has-ind a::after{display:none}
header.nav .items.mc-has-ind a:hover{color:var(--forest)}
.mc-ind{position:absolute;left:0;top:50%;height:38px;margin-top:-19px;border-radius:999px;background:rgba(20,32,43,.07);box-shadow:inset 0 0 0 1.5px rgba(20,32,43,.14);z-index:-1;pointer-events:none;opacity:0;transition:transform .45s cubic-bezier(.2,.8,.2,1),width .45s cubic-bezier(.2,.8,.2,1),opacity .25s,background-color .3s,box-shadow .3s}
.mc-ind::after{content:"";position:absolute;left:50%;bottom:-7px;width:5px;height:5px;margin-left:-2.5px;border-radius:999px;background:var(--mc-accent,#D9552B)}
header.nav.mc-over:not(.mc-past) .mc-ind{background:rgba(245,243,238,.16);box-shadow:inset 0 0 0 1.5px rgba(245,243,238,.35);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
header.nav.mc-over:not(.mc-past) .items.mc-has-ind a:hover{color:#fff}

/* Mobile menu: circular reveal, staggered links, numbered rows, photo preview on tablets */
.menu:not([hidden]){animation:mc-menu-in .55s cubic-bezier(.2,.7,.2,1) both}
.menu.mc-closing{animation:mc-menu-out .34s cubic-bezier(.5,0,.75,0) both}
@keyframes mc-menu-in{from{clip-path:circle(0 at calc(100% - 56px) 44px)}to{clip-path:circle(150% at calc(100% - 56px) 44px)}}
@keyframes mc-menu-out{from{clip-path:circle(150% at calc(100% - 56px) 44px)}to{clip-path:circle(0 at calc(100% - 56px) 44px)}}
.menu:not([hidden]) nav a,.menu:not([hidden]) .foot,.menu:not([hidden]) .close{animation:mc-row-in .6s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(.14s + var(--i,0) * .035s)}
.menu:not([hidden]) .foot{animation-delay:.45s}.menu:not([hidden]) .close{animation-delay:.2s}
@keyframes mc-row-in{from{opacity:0;transform:translateY(22px)}}
.menu nav a{display:flex;align-items:baseline;gap:16px;transition:color .2s,padding-left .35s cubic-bezier(.2,.7,.2,1)}
.menu nav a .mc-n{font:500 11px/1 "IBM Plex Mono",monospace;letter-spacing:.12em;opacity:.5;min-width:22px;transform:translateY(-.4em)}
.menu nav a .mc-arr{margin-left:auto;font-size:.6em;opacity:0;transform:translateX(-12px);transition:opacity .25s,transform .35s cubic-bezier(.2,.7,.2,1)}
.menu nav a:hover,.menu nav a:focus-visible{padding-left:10px;color:var(--soft)}
.menu nav a:hover .mc-arr,.menu nav a:focus-visible .mc-arr{opacity:1;transform:none}
.menu nav a[aria-current="page"]{color:var(--soft)}
.menu nav a[aria-current="page"] .mc-n{opacity:1;color:var(--mc-accent,#D9552B)}
.menu>*{flex-shrink:0}
.menu .mc-mprev{display:none;margin:0;position:relative;border-radius:22px;overflow:hidden;background:rgba(245,243,238,.06);min-height:0}
.menu .mc-mprev img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.06);transition:opacity .5s ease,transform 1.2s cubic-bezier(.2,.7,.2,1)}
.menu .mc-mprev img.on{opacity:1;transform:none}
.menu .mc-mprev figcaption{position:absolute;left:16px;bottom:16px;font:500 11px/1 "IBM Plex Mono",monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--forest);background:var(--cream);padding:8px 12px;border-radius:999px}
.menu .mc-mprev figcaption:empty{display:none}
@media (min-width:761px){
  .menu:not([hidden]){display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);grid-template-rows:auto 1fr auto;column-gap:48px;padding:28px 40px}
  .menu .close{grid-column:1/-1;justify-self:end}
  .menu nav{grid-column:1;grid-row:2;align-self:start}
  .menu .mc-mprev{display:block;grid-column:2;grid-row:2;margin-top:20px;animation:mc-row-in .7s .3s cubic-bezier(.2,.7,.2,1) both}
  .menu .foot{grid-column:1/-1;grid-row:3}
}
@media (prefers-reduced-motion:reduce){
  .menu:not([hidden]),.menu.mc-closing,.menu:not([hidden]) nav a,.menu:not([hidden]) .foot,.menu:not([hidden]) .close,.menu .mc-mprev{animation:none!important}
  .mc-ind,header.nav::before,.menu nav a,.menu nav a .mc-arr,.menu .mc-mprev img{transition:none!important}
}
/* Keep the hero badge below the menu bar (the hero sits underneath the bar), clear of the MENU button */
html:is(.mc-overhero,:has(header.nav)) main>.hero:first-child .badge-st{top:136px}
@media (max-width:1100px){html:is(.mc-overhero,:has(header.nav)) main>.hero:first-child .badge-st{top:106px}}
@media (max-width:700px){html:is(.mc-overhero,:has(header.nav)) main>.hero:first-child .badge-st{top:88px}}
/* The banner always paints above the hero photo, so the photo can never slide over its bottom edge */
.banner{position:relative;z-index:41}
/* iOS Safari still lets the page pan sideways when only body clips; clip at the root too and stop sideways rubber-banding */
html{overflow-x:hidden;overscroll-behavior-x:none}
body{overscroll-behavior-x:none}
/* Grid children won't shrink below their content by default, so the tour picker's scrolling date strip
   was stretching the contact form (and the whole page) to about 1,000px wide on phones */
.contact>*,#tourform>*,.xp-book{min-width:0}
/* Floor-plan and photo viewer: the image row can't grow past the screen, so a tall plan is scaled to fit whole instead of overflowing */
.lightbox{grid-template-rows:minmax(0,1fr) auto;height:100vh;height:100dvh;overscroll-behavior:contain}
.lightbox img{width:auto;height:auto;max-width:100%;max-height:100%;min-height:0;align-self:center;justify-self:center;background:#fff}
/* Phones: the space behind the fixed Call / Apply bar was a cream strip under the dark footer, and rubber-banding
   past the bottom showed more cream. Pad the footer itself (bar height + home-indicator area) and make the page
   canvas match the footer and top banner, so swiping to the bottom stays one solid colour behind the bar */
@media (max-width:900px){
html{background:var(--rust-blue,var(--forest))}
html body{padding-bottom:0}
html body>footer{padding-bottom:calc(32px + 62px + env(safe-area-inset-bottom,0px))}
}
/* Ground-floor upgrade rows (front desk / coffee bar / rooftop): the grey 15px text was faint on the grain. Darker, larger, shorter lines */
html body .conc div span{color:var(--forest);font-weight:600}
html body .conc div p{color:var(--ink);font-size:17px;line-height:27px;font-weight:450;max-width:68ch}
/* Floor-plan cards: in the swipe row each card was 82% of the screen wide, so on tablets and narrow desktop windows
   the plan drawing grew taller than the screen. Cap the card width and the drawing's height so the whole card fits */
@media (max-width:900px){html body .fp-teaser .card{flex:0 0 min(82vw,380px)}}
html body .card .fig{max-height:min(60vh,440px)}
/* The page's form{display:grid} beat the hidden attribute, so the hidden copy of the tour form (kept only so Netlify
   Forms can detect its fields) showed as a screen of blank, unlabeled inputs at the bottom of the contact page */
form[hidden]{display:none!important}
/* Arial resized to Manrope's metrics, so text takes the same space before and after the web font arrives
   and paragraphs don't reflow (and shift the page) a moment after load */
@font-face{font-family:"Manrope Fallback";src:local("Arial"),local("ArialMT"),local("Liberation Sans"),local("Arimo");size-adjust:103.19%;ascent-override:103.31%;descent-override:29.07%;line-gap-override:0%}

/* "A Tuesday at Industry" swipe cards (phones): each card faded and slid up as it came into view, and while it moved
   iOS Safari stopped clipping the photo to the card's rounded corners, so the picture covered the top corners and border.
   Cards sitting off to the side of the swipe row also stayed faded until scrolled to. Show them still and clip the photo itself */
html.js .daycards figure.mc-rv{opacity:1;transform:none;transition:none}
html body .daycards figure{isolation:isolate;-webkit-mask-image:-webkit-radial-gradient(white,black)}
html body .daycards img{display:block;border-radius:16px 16px 0 0}
/* Phones: a lighter homepage and larger type. The homepage ran ~15 sections on a phone, so the extras (ticker, photo
   collage, team cards, quiz, map and Instagram block) are hidden below 700px; each still lives on its own page or
   in the menu. Desktop and tablet are unchanged. Small 10-12px uppercase labels step up to a readable 13px */
@media (max-width:700px){
html body #app:has(#quizbox)>.ticker,
html body #app:has(#quizbox)>section:has(.collage),
html body #app>#people,
html body #app>#quiz,
html body #app>section:has(.dmap),
html body #app>section.igsec,
html body .manifesto a[href="#quiz"]{display:none!important}
html body :is(.eyebrow,.chip,.quiz .qn,.people .p small,.conc div span,.card .spec,.card .price span,.filters .lbl,.filters .count,.poi-list li span,.events .d small,.events .t,.info .box b,.urgent .live,.stats div span,footer h4,.crumbs,.postmeta){font-size:13px!important;line-height:19px!important;letter-spacing:.1em!important}
html body :is(.q .who,.rating,.rv-badge,.visit .live,.builder .ql,.builder .result .rate small,label,th,.seg button,.filters select,.igrid a span,.ugc .v .lbl,.partners .pt small,footer .links a,.xp-life .tag,.xp-life .tags a,.xp-cmp th,.xp-days button small,.xp-days button em){font-size:13px!important;line-height:1.45!important;letter-spacing:.08em}
html body :is(.consent,.cookie p,.xp-life .xp-note,.mc-by,.mc-cur){font-size:13px!important;line-height:1.45!important;letter-spacing:normal!important}
html body .btn,html body .stick a{font-size:14px;letter-spacing:.1em}
html body .cap{font-size:14px;line-height:21px}
html body .lead,html body .hero .wrap .lead{font-size:18px;line-height:28px}
html body .section{padding-block:48px}
html body .sec-head .lead{margin-top:12px}
}
/* Phones, second pass. Top banner: phone, tour and apply on one line, nothing breaking mid-number */
@media (max-width:700px){
html body .banner .wrap{padding-block:8px;min-height:0}
html body .banner .r{width:100%;justify-content:space-between;gap:8px;font-size:12px!important;letter-spacing:.06em!important;line-height:16px}
html body .banner .r a{white-space:nowrap}
html body .banner a.go{padding:6px 12px}
/* Hero: the address label sits on two even lines instead of wrapping into three, and the caption under the headline is dropped */
html body .hero .eyebrow.hero-loc{display:block;width:fit-content;max-width:100%;padding:10px 14px;border-radius:14px;font-size:12px!important;line-height:18px!important;letter-spacing:.12em!important}
html body .hero .eyebrow.hero-loc::before,html body .hero .eyebrow.hero-loc .dt{display:none}
html body .hero .eyebrow.hero-loc .ln{display:block}
html body .hero .hero-cap{display:none}
html body .hero .cta{margin-top:24px}
/* Menu button: a slim pill matched to the logo height, icon and label side by side */
html body header.nav .burger{grid-auto-flow:column;gap:8px;height:42px;min-width:0;padding:0 14px;border-radius:999px}
html body header.nav .burger svg{width:18px;height:18px}
html body header.nav .burger::after{font-size:12px;margin-top:0}
/* Open menu: items sized so all ten links and the Call / Private tour buttons fit on one screen */
html body .menu{padding:16px var(--gutter) calc(16px + env(safe-area-inset-bottom,0px))}
html body .menu .close{height:42px;font-size:12px}
html body .menu nav{margin-top:8px}
html body .menu nav a{font-size:clamp(20px,3.5vh,27px);padding:7px 0;gap:14px}
html body .menu nav a .mc-n{font-size:11px;min-width:20px;transform:translateY(-.2em)}
html body .menu .foot{gap:10px}html body .menu .foot .btn{min-height:48px;flex:1 1 100%;white-space:nowrap}
}
@media (max-width:700px){html body #footlegal{display:block;font-size:14px;line-height:22px}}
/* Phones, third pass. Type steps back down a notch from the second pass so it reads comfortably without feeling oversized */
@media (max-width:700px){
html body :is(.eyebrow,.chip,.quiz .qn,.people .p small,.conc div span,.card .spec,.card .price span,.filters .lbl,.filters .count,.poi-list li span,.events .d small,.events .t,.info .box b,.urgent .live,.stats div span,footer h4,.crumbs,.postmeta){font-size:11.5px!important;line-height:17px!important;letter-spacing:.08em!important}
html body :is(.q .who,.rating,.rv-badge,.visit .live,.builder .ql,.builder .result .rate small,label,th,.seg button,.filters select,.igrid a span,.ugc .v .lbl,.partners .pt small,footer .links a,.xp-life .tag,.xp-life .tags a,.xp-cmp th,.xp-days button small,.xp-days button em){font-size:12px!important;letter-spacing:.06em}
html body :is(.consent,.cookie p,.xp-life .xp-note,.mc-by,.mc-cur){font-size:12.5px!important}
html body .btn,html body .stick a{font-size:12.5px;letter-spacing:.1em}
html body .btn{min-height:46px}
html body .cap{font-size:13px;line-height:19px}
html body .lead,html body .hero .wrap .lead{font-size:16px;line-height:25px}
html body .h-xl{font-size:clamp(36px,10.6vw,46px)}
html body .h-lg{font-size:clamp(27px,7.4vw,34px)}
html body #footlegal{font-size:13px;line-height:20px}
/* Hero: the photo fills the screen, with the dark fade kept to the bottom where the headline sits; the stats row moves out of the hero */
html body main>.hero:first-child .bg{height:min(132vw,74svh)}
html body main>.hero:first-child .bg img{object-position:58% 40%}
html body main>.hero:first-child .bg::after{background:linear-gradient(180deg,rgba(14,23,32,.25) 0%,rgba(14,23,32,0) 25%,rgba(14,23,32,.3) 55%,var(--rust-blue,var(--forest)) 100%)!important}
html body main>.hero:first-child .wrap{padding-top:min(92vw,50svh)}
html body main>.hero:first-child .stats{display:none}
html body main>.hero:first-child .wrap{padding-bottom:28px}
/* True monthly cost: each row of choices scrolls sideways on one line, the plan thumbnail and the long footnote are dropped, so the calculator is about half as tall */
html body #rates .sec-head .lead,html body #rates>.wrap>.cap,html body #builder #bfig{display:none}
html body #builder{grid-template-columns:minmax(0,1fr)}html body #builder>*{min-width:0}html body #builder .opts{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:-20px;padding:2px 20px 6px;scroll-padding-inline:20px}
html body #builder .opts::-webkit-scrollbar{display:none}
html body #builder .opts button{flex:none;white-space:nowrap}
html body #builder .opts{margin-bottom:12px}html body #builder .ql{margin-top:0}
html body #builder .controls,html body #builder .result{padding:18px 20px}
html body #builder .result li{padding-block:8px}
/* Floor-plan cards: the swipe row clipped the bottom of each card; give it room and keep cards in front of the heading text */
html body .fp-teaser{padding-block:6px 14px;overflow-y:hidden;align-items:stretch;position:relative;z-index:1}
html body .fp-teaser .card .fig{aspect-ratio:4/3;max-height:none}
}
/* Phones, fourth pass. Calculator choices: the sideways rows ran edge to edge, so pills butted into the card's border.
   Keep them inside the card's padding and fade the right edge as a cue that the row scrolls */
@media (max-width:700px){
html body #builder .opts{margin-inline:0;padding:2px 28px 6px 0;scroll-padding-inline:0;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent)}
/* Closing "Tour the twelfth floor" section: one short line under the heading, two buttons (Call already sits in the bottom bar), tighter spacing */
html body section.visit{padding-block:44px 40px}
html body section.visit .vx,html body section.visit .vcall,html body section.visit .seal{display:none!important}
html body section.visit .lead{margin-top:10px}
html body section.visit .cta{margin-top:18px!important;gap:10px!important}
/* Mica Creek Living: tighter list and spacing */
html body .xp-mcl .xp-mcl-mark{width:96px;height:48px;margin-bottom:14px}
html body .xp-mcl .cs{gap:20px}
html body .xp-mcl ul li{padding-block:10px;font-size:15px;line-height:22px}
}
/* Phones, fifth pass. Footer: the tagline and the Explore list (same links as the menu) are dropped, Lease and Follow
   sit side by side, and the spacing is tightened so the footer is about half as tall */
@media (max-width:700px){
html body>footer{padding-top:36px}
html body>footer .footmark{display:none}
html body>footer .cols{grid-template-columns:1fr 1fr!important;gap:22px 16px!important}
html body>footer .cols>div:first-child{grid-column:1/-1}
html body>footer .cols>div:nth-child(2){display:none}
html body>footer .lock.foot img{height:56px}
html body>footer .addr{margin:10px 0 0;font-size:14px;line-height:21px}
html body>footer .addr+.addr{display:none}
html body>footer h4{margin:0 0 8px}
html body>footer .cols ul li{margin:0}
html body>footer .cols ul a{display:block;padding:5px 0;font-size:14px;line-height:20px}
html body>footer .legal{margin-top:22px;padding-top:18px}
html body>footer .legal .links{gap:6px 16px}
html body>footer .legal .links a{font-size:11.5px!important}
html body>footer .legal svg{height:22px}
html body #footlegal{font-size:12px;line-height:18px}
/* Hero badge: a dark disc behind the white stamp so its lettering reads against the light building */
html body main>.hero:first-child .badge-st{border-radius:50%;background:rgba(14,23,32,.62);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:0 6px 20px rgba(0,0,0,.35);padding:3px;filter:none}
}
/* Mica Creek Living: phones get the short copy (lead and list), desktop and tablet keep the full copy */
.xp-mcl .mcl-m{display:none}
@media (max-width:700px){html body .xp-mcl .mcl-d{display:none}html body .xp-mcl .mcl-m{display:inline}html body .xp-mcl .lead{font-size:16px;line-height:24px}}
/* Footer (the address, links and legal block on every page): a deeper slate than the mid-blue bands above it.
   Phones also paint the page canvas this colour so overscrolling past the footer stays one solid colour */
html body>footer{background-color:#15212C!important}
@media (max-width:900px){html{background:#15212C!important}}
/* Menu-bar logo pops over the hero photo, as on Industry Tallahassee: the crisp SVG lockup, a deeper wash behind the
   bar, and a soft shadow on the logo and links so bright patches of the photo don't wash them out */
html body header.nav::before{inset:0 0 -64px;background:linear-gradient(180deg,rgba(14,23,32,.82) 0%,rgba(14,23,32,.55) 50%,rgba(14,23,32,0) 100%)}
html body header.nav.mc-over:not(.mc-past) .lock .mc-logo-w{filter:drop-shadow(0 1px 1px rgba(0,0,0,.7)) drop-shadow(0 2px 10px rgba(0,0,0,.45))}
html body header.nav.mc-over:not(.mc-past) :is(.items a,.tel){color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.8),0 2px 12px rgba(0,0,0,.5)}
/* Photo viewer: Close sits alone in the top corner, and Prev / caption / Next share one row, each button the same
   height with its label centred, so the three controls line up */
html body .lightbox{padding:68px 16px 16px}
html body .lightbox .bar{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:16px;padding-top:14px}
html body .lightbox #lbcap{text-align:center;line-height:18px;overflow-wrap:anywhere}
html body .lightbox button{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;height:44px;min-width:92px;padding:0 18px;line-height:1;font:500 11px/1 var(--font-sans);letter-spacing:.16em}
html body .lightbox .lbx{position:absolute;top:12px;right:16px}
@media (max-width:700px){html body .lightbox .bar{gap:10px}html body .lightbox button{min-width:76px;padding:0 12px}html body .lightbox #lbcap{font-size:10px!important;line-height:15px!important;letter-spacing:.1em}}
/* Availability site plan: the map no longer fades and slides in with the page (the moving iframe redrew and
   flickered), and its height is fixed instead of following the viewport, which changes as phone toolbars show and hide */
html.js .sightmap.rv,html.js .mc-rv:has(>.wrap>.sightmap){opacity:1!important;transform:none!important;transition:none!important}
html body .sightmap{height:820px;contain:layout paint}
@media (max-width:1100px){html body .sightmap{height:720px}}
@media (max-width:700px){html body .sightmap{height:640px}}
.sm-key{display:flex;flex-wrap:wrap;gap:8px 22px;margin:14px 0 0;padding:0;list-style:none;font:500 11px/16px var(--font-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-muted)}
.sm-key li{display:inline-flex;align-items:center;gap:8px}
.sm-key i{width:16px;height:16px;border-radius:3px;border:1px solid rgba(14,23,32,.35);background:#fff}
.sm-key i.on{background:#147EB8;border-color:#147EB8}
/* Phones: the bottom of the hero photo fades into the same dark ink as the desktop hero (not the slate-blue), and the
   hero behind the buttons under the photo is that ink too, so the fade runs straight into it. The fade starts higher and
   ramps up in small even steps so there's no band where it suddenly darkens */
@media (max-width:700px){
html body main>.hero:first-child{background-color:#0E1720!important}
html body main>.hero:first-child .bg::after{background:linear-gradient(180deg,rgba(14,23,32,.12) 0%,rgba(14,23,32,.12) 32%,rgba(14,23,32,.18) 46%,rgba(14,23,32,.28) 58%,rgba(14,23,32,.4) 69%,rgba(14,23,32,.53) 78%,rgba(14,23,32,.67) 86%,rgba(14,23,32,.81) 93%,#0E1720 100%)!important}
}
/* Footer logo: the bolder SVG lockup, a little larger, so INDUSTRY and the Cincinnati line read clearly */
html body>footer .lock.foot img{height:128px;width:auto}
@media (max-width:1100px){html body>footer .lock.foot img{height:112px}}
@media (max-width:700px){html body>footer .lock.foot img{height:84px}}
.sm-key[hidden]{display:none}
/* Rendering cards (new lobby / Saints Fit Co.): the status eyebrow sits on the dark photo fade, so keep it light and legible */
html body .rcard .rlab{background:linear-gradient(180deg,rgba(14,23,32,0) 0%,rgba(14,23,32,.55) 35%,rgba(14,23,32,.9) 100%)}
html body .rcard .rlab .eyebrow{color:#F5F3EE!important;font-weight:600;text-shadow:0 1px 3px rgba(0,0,0,.55)}
html body .rcard .rlab .eyebrow::before{background:#F5F3EE;border-color:#F5F3EE}
html body .rcard .rlab :is(b,span){text-shadow:0 1px 3px rgba(0,0,0,.45)}
/* Menu bar: the current page's link no longer turns bold, so the links keep the same widths and even spacing on every page
   (the sliding pill already marks where you are) */
html body header.nav .items a,html body header.nav .items a[aria-current="page"]{font-weight:500}
/* Drop-down menu: the same dot screen + grain as the sky blue bands, in a light tint for the dark background */
html body .menu{background-image:radial-gradient(rgba(245,243,238,.10) 1.1px,transparent 1.6px),var(--tx-grain-lt)!important;background-size:16px 16px,220px 220px!important;background-position:0 0,0 0!important}