@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:#0F1A17;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,#A9D6D0)!important;color:var(--mc-on-accent,#0F1A17)!important;border-color:var(--mc-accent,#A9D6D0)!important}
.btn.brass:hover,.btn.primary:hover,.stick a.brass:hover{background:var(--mc-accent-deep,#6FA9A2)!important;color:var(--mc-on-accent,#0F1A17)!important;border-color:var(--mc-accent-deep,#6FA9A2)!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:#0F1A17!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}
:is(.dark,.studio,footer,.xp-life) :is(.eyebrow,footer h4){color:var(--mc-accent,#A9D6D0)!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,#A9D6D0)}

/* 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(10,20,17,.10);border-bottom-color:rgba(15,26,23,.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,#A9D6D0);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(10,20,17,.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}}

/* 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(15,26,23,.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(15,26,23,.075) 1px,transparent 1px),linear-gradient(90deg,rgba(15,26,23,.075) 1px,transparent 1px),linear-gradient(rgba(15,26,23,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(15,26,23,.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(15,26,23,.045) 0 1px,transparent 1px 9px)!important}
/* Ticker: subtle horizontal pinstripe */
html body .ticker:not(.garnet){background-image:repeating-linear-gradient(0deg,rgba(15,26,23,.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(10,20,17,.6) 0%,rgba(10,20,17,.32) 42%,rgba(10,20,17,0) 72%),linear-gradient(180deg,rgba(10,20,17,.15) 0%,rgba(10,20,17,.3) 40%,rgba(10,20,17,.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(10,20,17,.25) 0%,rgba(10,20,17,.45) 35%,rgba(10,20,17,.92) 100%)!important}}

/* Tallahassee accent: soft aqua (#A9D6D0) with a deeper hover (#6FA9A2), used where Indianapolis uses seafoam */
:focus-visible{outline:3px solid var(--mc-accent-deep,#6FA9A2)!important;outline-offset:2px}
:is(.dark,.studio,footer,.hero,.xp-life,.menu) :focus-visible{outline-color:var(--mc-accent,#A9D6D0)!important}
.eyebrow::before{background:var(--mc-accent,#A9D6D0)!important}
:is(.limebg,.sagebg,.xp-mcl,.visit) .eyebrow::before{background:#0F1A17!important}
main :is(p,li,dd,td,blockquote) a:not(.btn):not(.card):hover{text-decoration:underline;text-decoration-color:var(--mc-accent-deep,#6FA9A2)}
::selection{background:var(--mc-accent,#A9D6D0);color:#0F1A17}

/* 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(10,20,17,.62) 0%,rgba(10,20,17,.28) 55%,rgba(10,20,17,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(10,20,17,.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(10,20,17,.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(15,26,23,.07);box-shadow:inset 0 0 0 1.5px rgba(15,26,23,.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,#A9D6D0)}
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,#A9D6D0)}
.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 minmax(0,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}
/* Until the page renders (it waits briefly for live prices), hold the footer below the fold and show a quiet loader */
main#app:empty{min-height:100vh;min-height:100svh;display:grid;place-items:center}
main#app:empty::before{content:"";width:34px;height:34px;border-radius:999px;border:3px solid var(--line);border-top-color:var(--forest);animation:mc-boot .9s linear infinite}
main#app:empty~footer,main#app:empty~.stick{visibility:hidden}
@keyframes mc-boot{to{transform:rotate(360deg)}}
/* 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(--forest)}
html body{padding-bottom:0}
html body>footer{padding-bottom:calc(32px + 62px + env(safe-area-inset-bottom,0px))}
}
/* Concierge 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%}
/* Menu bar fit: Tallahassee's bar carries seven links, so on desktop the "Now leasing" tag and phone number (both already in
   the top banner) and the Text us button (texting stays on the contact page) stay off the bar, with tighter link spacing and a smaller logo below
   1400px. Without this the Private tour button ran off the right edge of the screen at every desktop width */
@media (min-width:1101px){header.nav .navtag,header.nav .tel,header.nav .btn.txt{display:none!important}header.nav .items{gap:18px!important}}
@media (min-width:1101px) and (max-width:1599px){header.nav .items{gap:14px!important}}
@media (min-width:1101px) and (max-width:1400px){header.nav .lock img{height:64px!important}}
/* The Visit section's spinning seal was thin grey linework at 35-85% opacity on the aqua grain and could barely be read.
   Full strength on a cream disc with a dark outline, a little larger on phones */
html body .visit .seal{opacity:1;background:var(--cream);border:2px solid var(--forest);border-radius:999px;padding:6px;box-shadow:4px 4px 0 0 var(--forest);box-sizing:border-box}
@media (max-width:1100px){html body .visit .seal{width:104px;opacity:1}}
/* Buttons no longer jump on hover: the 2px lift slid a button out from under a cursor resting near its bottom or right edge,
   which un-hovered it, dropped it back under the cursor and repeated, so the button jittered. The hover shadow and colour stay */
html body .btn:hover,html body header.nav .btn.brass:hover{transform:none!important}
@media (max-width:700px){html body .visit .seal{position:relative;display:block;top:auto;right:auto;margin:0 auto 20px;width:96px}}
/* Long Google reviews: clamp to eight lines with a Read more toggle, so one long review doesn't stretch every card in the row */
html body .reviews .q blockquote p{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:8;line-clamp:8;overflow:hidden}
html body .reviews .q.open blockquote p{display:block;-webkit-line-clamp:unset;line-clamp:unset}
html body .reviews .q{align-self:start}
.rv-more{align-self:flex-start;margin:-6px 0 16px;padding:0;border:0;background:none;font:600 12px/1 var(--font-sans);letter-spacing:.14em;text-transform:uppercase;color:inherit;text-decoration:underline;text-underline-offset:4px;cursor:pointer}
/* Phone-only short copy (shown by the max-width:700px rules below) */
.xp-mcl .mx-s{display:none}
/* "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 every link 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(10,20,17,.25) 0%,rgba(10,20,17,0) 25%,rgba(10,20,17,.3) 55%,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 "See the courtyard" section: one short line under the heading, two buttons (tour and apply; the 3D tour is on the
   residences page and Call 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 .v3d,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: shorter copy (the full wording stays on tablet and desktop), tighter list and spacing */
html body .xp-mcl .mx-l{display:none}
html body .xp-mcl .mx-s{display:inline}
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}
/* Follow links line up with the Lease column: the Instagram icon no longer makes its row taller */
html body>footer .cols ul a{display:flex!important;align-items:center;gap:8px;min-height:30px;box-sizing:border-box}
html body>footer .cols ul a>span{flex:none}
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 photo */
html body main>.hero:first-child .badge-st{border-radius:50%;background:rgba(10,20,17,.62);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:0 6px 20px rgba(0,0,0,.35);padding:3px;filter:none}
}
/* Same badge backing at tablet widths, where the stamp also sits over the photo */
@media (min-width:701px) and (max-width:1100px){html body main>.hero:first-child .badge-st{border-radius:50%;background:rgba(10,20,17,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}}
/* Legibility over photos. The menu bar's logo and links sit straight on the hero photo, and the photo's bright patches
   (lit windows, sky, pale facades) washed out the white logo and text. A deeper wash behind the bar, a soft shadow
   on the logo and links, and stronger fades behind every caption that sits on a photo */
html body header.nav::before{inset:0 0 -64px;background:linear-gradient(180deg,rgba(10,20,17,.82) 0%,rgba(10,20,17,.55) 50%,rgba(10,20,17,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)}
html body header.nav.mc-over:not(.mc-past) .burger{background:rgba(10,20,17,.55);border-color:#F5F3EE}
html body header.nav.mc-over:not(.mc-past) .burger::after{text-shadow:none}
/* Hero: the photo is dimmed a little more where the copy sits, and every line of hero text carries a shadow */
html body .hero .bg::after{background:linear-gradient(90deg,rgba(10,20,17,.72) 0%,rgba(10,20,17,.45) 45%,rgba(10,20,17,.12) 78%),linear-gradient(180deg,rgba(10,20,17,.3) 0%,rgba(10,20,17,.32) 40%,rgba(10,20,17,.92) 100%)!important}
html body .hero .h-xl{text-shadow:0 2px 3px rgba(0,0,0,.55),0 4px 28px rgba(0,0,0,.5)}
html body .hero .eyebrow{background:rgba(10,20,17,.72);color:#fff}
html body .hero .stats b,html body .hero .stats span{text-shadow:0 1px 2px rgba(0,0,0,.75),0 2px 12px rgba(0,0,0,.45)}
html body .hero .stats span{color:#fff}
/* Hero badge: a dark disc behind the white stamp at every width, so its fine lettering reads over the lit building */
html body main>.hero:first-child .badge-st{border-radius:50%;background:rgba(10,20,17,.7);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:0 6px 20px rgba(0,0,0,.35);padding:4px;filter:none}
/* "Close to what you came for" cards: the fade starts higher and goes darker, and the copy is full white with a shadow */
html body .pillar::before{background:linear-gradient(180deg,rgba(10,20,17,.4) 0%,rgba(10,20,17,.08) 24%,rgba(10,20,17,.45) 46%,rgba(10,20,17,.88) 68%,rgba(10,20,17,.96) 100%)}
html body .pillar :is(h3,p,.go){color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.6),0 2px 14px rgba(0,0,0,.4)}
html body .pillar .tagl{background:rgba(10,20,17,.72);border-color:rgba(245,243,238,.5)}
/* Ground-floor cards (JETSET, Sushi Sake) and Instagram tiles: a deeper fade behind the label */
html body .rcard .rlab{padding-top:64px;background:linear-gradient(180deg,rgba(10,20,17,0) 0%,rgba(10,20,17,.7) 38%,rgba(10,20,17,.94) 100%)}
html body .rcard .rlab :is(b,span,.eyebrow){color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.6)}
html body .rcard .rlab>span:last-child{color:#fff;font-weight:400}
html body .igrid a span{background:linear-gradient(180deg,rgba(10,20,17,0),rgba(10,20,17,.94));text-shadow:0 1px 2px rgba(0,0,0,.6)}
@media (max-width:700px){
html body main>.hero:first-child .bg::after{background:linear-gradient(180deg,rgba(10,20,17,.5) 0%,rgba(10,20,17,.12) 22%,rgba(10,20,17,.2) 45%,rgba(10,20,17,.7) 70%,var(--forest) 100%)!important}
html body main>.hero:first-child .badge-st{padding:3px}
}
/* The section's dark eyebrow colour was winning inside the ground-floor cards, leaving "Opening 2026" dark on the photo */
html body .rcard .rlab .eyebrow{color:#fff!important}
html body .rcard .rlab .eyebrow::before{background:var(--mc-accent,#A9D6D0)!important}
/* Hero, lighter: the night photo is already dark, so the full-frame black wash is gone. The photo is brightened a touch,
   a soft teal tint (not black) sits only behind the copy column, and only the bottom edge fades into the stats row */
html body main>.hero:first-child .bg img{filter:brightness(1.22) saturate(1.1) contrast(1.04)}
html body main>.hero:first-child .bg::after{background:radial-gradient(ellipse 60% 64% at 20% 58%,rgba(16,48,52,.74) 0%,rgba(16,48,52,.46) 52%,rgba(16,48,52,0) 100%),linear-gradient(180deg,rgba(10,20,17,.32) 0%,rgba(10,20,17,0) 22%,rgba(16,48,52,0) 66%,rgba(16,48,52,.5) 100%)!important}
html body main>.hero:first-child .cta .btn:not(.brass):not(.primary){background:rgba(16,48,52,.55);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
html body main>.hero:first-child .h-xl{text-shadow:0 1px 2px rgba(0,0,0,.6),0 3px 22px rgba(8,30,32,.65)}
html body main>.hero:first-child .wrap .lead{text-shadow:0 1px 2px rgba(0,0,0,.75),0 2px 14px rgba(8,30,32,.7)}
/* No dark band under the hero photo on desktop or tablet: the hero itself is the deep teal of the scrim, not black */
@media (min-width:701px){html body main>.hero:first-child{background:#1F4448}}
/* Tablet: the copy spans most of the width, so the tint runs top to bottom behind it instead of sitting in one corner */
@media (min-width:701px) and (max-width:900px){
html body main>.hero:first-child .bg::after{background:linear-gradient(180deg,rgba(10,20,17,.4) 0%,rgba(10,20,17,.05) 20%,rgba(16,48,52,.3) 42%,rgba(16,48,52,.62) 70%,rgba(16,48,52,.55) 100%)!important}
}
@media (max-width:700px){
html body main>.hero:first-child .bg::after{background:linear-gradient(180deg,rgba(10,20,17,.4) 0%,rgba(10,20,17,0) 20%,rgba(10,20,17,0) 42%,rgba(16,48,52,.5) 62%,var(--forest) 100%)!important}
}
/* Residences and Amenities readability: a lighter paper grain and darker body copy, so leads, captions and lists read clearly */
html:is(:has(#fplist),:has(.amen-grid)){--ink-muted:#2B3639}
html:is(:has(#fplist),:has(.amen-grid)) body{background-image: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 .16 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
html:is(:has(#fplist),:has(.amen-grid)) :is(.limebg,.sagebg){background-image:radial-gradient(rgba(15,26,23,.07) 1.1px,transparent 1.6px)!important;background-size:16px 16px!important}
html:is(:has(#fplist),:has(.amen-grid)) main :is(.lead,.cap,p,li,td,figcaption){color:var(--ink-muted)}
html:is(:has(#fplist),:has(.amen-grid)) main :is(.pagehead,.sec-head) .lead{color:#1E2A2D;font-weight:500}
html:is(:has(#fplist),:has(.amen-grid)) main .cap{font-size:14px;line-height:21px;color:#2B3639}
html:is(:has(#fplist),:has(.amen-grid)) main :is(.dark,.studio,.hero) :is(.lead,.cap,p,li,td){color:inherit}
html:is(:has(#fplist),:has(.amen-grid)) main figcaption{font-size:14px;font-weight:500}
/* Amenities: the darker teal band behind "A new ground floor" (and other sage bands) keeps its copy near-black */
html:is(:has(#fplist),:has(.amen-grid)) main .sagebg :is(.lead,.cap,p:not(.eyebrow)){color:#14211F}
html:is(:has(#fplist),:has(.amen-grid)) main .sagebg .rcard :is(p,span){color:#fff}
html:is(:has(#fplist),:has(.amen-grid)) main .sagebg .btn.brass{background:var(--forest)!important;border-color:var(--forest)!important;color:var(--cream)!important}
html:is(:has(#fplist),:has(.amen-grid)) main .sagebg .btn.brass:hover{background:var(--moss)!important;border-color:var(--moss)!important}
/* Desktop and tablet hero, the phone approach: the top of the photo stays bright, and the copy sits lower over a
   deep teal fade that strengthens toward the bottom (plus a soft wash on the left behind the lines of text).
   The headline is a touch smaller so the whole block fits lower down without crowding the stats */
@media (min-width:701px){
html body main>.hero:first-child{min-height:max(640px,min(calc(100svh - 46px),980px))}
html body main>.hero:first-child .bg::after{background:linear-gradient(90deg,rgba(14,40,44,.55) 0%,rgba(14,40,44,.28) 45%,rgba(14,40,44,0) 70%),linear-gradient(180deg,rgba(10,20,17,.35) 0%,rgba(10,20,17,0) 16%,rgba(14,40,44,0) 30%,rgba(14,40,44,.5) 55%,rgba(12,34,37,.84) 80%,rgba(10,28,30,.9) 100%)!important}
html body main>.hero:first-child .wrap{padding-top:150px;padding-bottom:36px}
html body main>.hero:first-child .h-xl{font-size:clamp(52px,6.2vw,104px)}
html body main>.hero:first-child .wrap .lead{max-width:40em}
}
/* Desktop and tablet hero, matched to the phone: a neutral dark fade into forest instead of the teal tint, kept light so
   the photo stays bright through the top and middle. The push-in is gentler (the source photo softens when enlarged),
   and the hero type steps down a size */
@media (min-width:701px){
html body main>.hero:first-child{background:var(--forest)}
html body main>.hero:first-child .bg img{filter:brightness(1.12) saturate(1.06) contrast(1.03)}
html.xp-on body main>.hero:first-child .bg img{animation-name:xp-kb-sm}
html body main>.hero:first-child .bg::after{background:linear-gradient(90deg,rgba(10,20,17,.4) 0%,rgba(10,20,17,.16) 42%,rgba(10,20,17,0) 68%),linear-gradient(180deg,rgba(10,20,17,.38) 0%,rgba(10,20,17,0) 18%,rgba(10,20,17,0) 40%,rgba(10,20,17,.32) 62%,rgba(10,20,17,.7) 86%,var(--forest) 100%)!important}
html body main>.hero:first-child .cta .btn:not(.brass):not(.primary){background:rgba(10,20,17,.45)}
html body main>.hero:first-child .h-xl{font-size:clamp(44px,5.2vw,86px);text-shadow:0 1px 2px rgba(0,0,0,.6),0 3px 22px rgba(0,0,0,.55)}
html body main>.hero:first-child .wrap .lead{font-size:17px;line-height:27px;max-width:38em;text-shadow:0 1px 2px rgba(0,0,0,.75),0 2px 14px rgba(0,0,0,.6)}
html body main>.hero:first-child .eyebrow{font-size:11px;letter-spacing:.16em}
}
@media (min-width:701px) and (max-width:900px){
html body main>.hero:first-child .h-xl{font-size:clamp(40px,6vw,54px)}
html body main>.hero:first-child .wrap .lead{font-size:16px;line-height:25px}
}
/* Desktop and tablet hero: the copy block sits lower so the lit roof terrace (upper left of the photo) stays clear.
   Tighter gaps between the lines of copy and a shallower stats row, and the left wash only darkens the bottom corner
   behind the text instead of the full height of the photo */
@media (min-width:701px){
html body main>.hero:first-child .wrap{padding-bottom:18px}
html body main>.hero:first-child .eyebrow{margin-bottom:10px}
html body main>.hero:first-child .wrap .lead{margin-top:10px}
html body main>.hero:first-child .cta{margin-top:18px}
html body main>.hero:first-child .stats{margin-top:22px;padding-top:12px;row-gap:10px}
html body main>.hero:first-child .bg::after{background:radial-gradient(ellipse 70% 55% at 0% 100%,rgba(10,20,17,.42) 0%,rgba(10,20,17,.18) 55%,rgba(10,20,17,0) 100%),linear-gradient(180deg,rgba(10,20,17,.38) 0%,rgba(10,20,17,0) 18%,rgba(10,20,17,0) 50%,rgba(10,20,17,.3) 68%,rgba(10,20,17,.7) 88%,var(--forest) 100%)!important}
}
/* Tablet: the call / apply bar is fixed over the bottom of the screen, so the copy stops just above it */
@media (min-width:701px) and (max-width:900px){
html body main>.hero:first-child .wrap{padding-bottom:calc(76px + env(safe-area-inset-bottom,0px))}
html body main>.hero:first-child .stats{display:none}
}