/* Multifamily lifestyle photography — local service preview */
.a360-lifestyle-page {
  --ml-ink: #071b2b;
  --ml-paper: #f8f6f1;
  --ml-sand: #e9e6de;
  --ml-gold: #aa8045;
  color: var(--ml-ink);
  background: var(--ml-paper);
}
.a360-lifestyle-page main { overflow: clip; }
.a360-lifestyle-page :is(h1,h2,h3,p,figure) { margin-top: 0; }
.a360-lifestyle-page em { font-weight: inherit; }
.ml-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: min(900px, 100svh);
  min-height: clamp(700px, 100svh, 1020px);
  isolation: isolate;
  color: white;
  background: #283846;
}
.ml-hero > picture,
.ml-hero > picture img { position: absolute; inset: 0; width: 100%; height: 100%; }
.ml-hero > picture { z-index: -2; overflow: hidden; }
.ml-hero > picture img { display: block; object-fit: cover; object-position: center 48%; transform: scale(var(--ml-hero-scale, 1.03)); will-change: transform; }
.ml-hero::after { position: absolute; inset: 0; z-index: -1; content: ""; background: linear-gradient(90deg, #061a2be8 0%, #061a2bab 43%, #061a2b20 100%), linear-gradient(0deg, #061a2b9c, transparent 42%); }
.ml-hero-inner { width: 100%; padding-top: 190px; padding-bottom: clamp(88px, 9vw, 142px); }
.ml-hero .a360-landing-kicker { color: #e8c991; }
.ml-hero-title { max-width: 1050px; margin: 20px 0 20px; font: 400 clamp(80px, 8.3vw, 138px)/.86 var(--a360-serif); letter-spacing: -.055em; text-wrap: balance; }
.ml-hero-title em { color: #f0d39f; }
.ml-hero-lede { max-width: 585px; margin-bottom: 29px; color: #fff; font: 500 clamp(18px, 1.55vw, 24px)/1.55 var(--a360-sans); }
.ml-hero .a360-btn-outline-dark { border-color: #ffffff8a; color: white; background: #061a2b30; }
.ml-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .98fr); gap: clamp(64px, 7vw, 140px); align-items: center; padding-block: clamp(110px, 10vw, 170px); }
.ml-intro-copy { max-width: 650px; }
.ml-intro h1,
.ml-work h2,
.ml-brief h2,
.ml-related h2,
.ml-faq h2,
.ml-close h2 { margin: 18px 0 25px; font: 400 clamp(61px, 5.9vw, 94px)/.96 var(--a360-serif); letter-spacing: -.052em; text-wrap: balance; }
.ml-intro h1 em,
.ml-work h2 em,
.ml-brief h2 em,
.ml-related h2 em,
.ml-faq h2 em,
.ml-close h2 em { color: var(--ml-gold); }
.ml-intro-copy > p:not(.a360-landing-kicker) { max-width: 620px; margin-bottom: 20px; color: #4d5e69; font: 400 clamp(17px, 1.18vw, 20px)/1.72 var(--a360-sans); }
.ml-intro-media { position: relative; margin: 0; aspect-ratio: .92; background: #ddd7cb; }
.ml-intro-media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 53% center; }
.ml-intro-media figcaption { position: absolute; right: 0; bottom: 0; padding: 16px 20px; color: white; background: #071b2be8; font: 800 10px/1.35 var(--a360-sans); letter-spacing: .11em; text-transform: uppercase; }
.ml-work { padding-block: 0 clamp(105px, 8vw, 140px); background: var(--ml-paper); }
.ml-work-head { display: flex; justify-content: space-between; align-items: end; gap: 40px; padding-block: 34px 38px; border-top: 1px solid #b9bdb9; }
.ml-work-head .a360-landing-kicker { margin-bottom: 11px; }
.ml-work-head h2 { margin-bottom: 0; font-size: clamp(62px, 5.5vw, 88px); }
.ml-work-head > p { max-width: 315px; margin: 0 0 7px; color: #58656b; font: 400 15px/1.65 var(--a360-sans); }
.ml-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(3, clamp(190px, 18vw, 275px)); gap: 10px; }
.ml-photo { display: block; min-width: 0; min-height: 0; overflow: hidden; color: inherit; text-decoration: none; cursor: zoom-in; }
.ml-photo-lead { grid-column: span 2; grid-row: span 2; }
.ml-photo:focus-visible { outline: 3px solid var(--ml-gold); outline-offset: 5px; }
.ml-photo-media { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; isolation: isolate; background: #c8c4b9; }
.ml-photo-media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .75s cubic-bezier(.2,.7,.15,1), filter .55s ease; }
.ml-photo--portrait .ml-photo-media img { object-position: center 36%; }
.ml-photo-expand { position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 68px; height: 68px; border: 1px solid #fff; border-radius: 50%; color: white; background: #061a2b80; opacity: 0; transform: translate(-50%,-46%) scale(.85); transition: opacity .3s ease, transform .3s ease; }
.ml-photo-expand svg { width: 25px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ml-photo-caption { display: none; }
@media (hover:hover) {
  .ml-photo:hover .ml-photo-media img { transform: scale(1.035); filter: brightness(.83); }
  .ml-photo:hover .ml-photo-expand { opacity: 1; transform: translate(-50%,-50%) scale(1); }
}
.ml-photo:focus-visible .ml-photo-expand { opacity: 1; transform: translate(-50%,-50%) scale(1); }
.ml-story { background: #071b2b; color: white; }
.ml-story-scene { min-height: 560px; }
.ml-story-scene::after { position: absolute; inset: 0; z-index: -1; content: ""; background: linear-gradient(0deg, #041524e3 0%, #04152473 42%, #0415240a 75%); }
.ml-story-copy { width: 100%; }
.ml-story-copy .a360-landing-kicker { color: #e9c58c; }
.ml-story-copy h2 { max-width: 920px; margin: 15px 0; font: 400 clamp(72px, 7.2vw, 120px)/.9 var(--a360-serif); letter-spacing: -.052em; text-wrap: balance; }
.ml-story-copy h2 em { color: #f0d39f; }
.ml-story-text > p:last-child { max-width: 540px; margin-bottom: 0; color: #ffffffde; font: 500 clamp(17px, 1.25vw, 20px)/1.55 var(--a360-sans); }
.ml-brief { display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); gap: clamp(65px, 8vw, 150px); padding-block: clamp(110px, 10vw, 170px); }
.ml-brief-copy { max-width: 500px; }
.ml-brief-copy > p:not(.a360-landing-kicker) { color: #52616a; font: 400 18px/1.7 var(--a360-sans); }
.ml-brief-steps { border-top: 1px solid #071b2b42; }
.ml-brief-step { display: grid; grid-template-columns: 54px 1fr; column-gap: 15px; padding: 30px 0 33px; border-bottom: 1px solid #071b2b42; }
.ml-brief-step > span { padding-top: 11px; color: var(--ml-gold); font: 800 11px/1 var(--a360-sans); letter-spacing: .1em; }
.ml-brief-step h3 { margin-bottom: 8px; font: 500 clamp(34px, 3vw, 46px)/1.04 var(--a360-serif); letter-spacing: -.035em; }
.ml-brief-step p { max-width: 560px; margin-bottom: 0; color: #52616a; font: 400 16px/1.7 var(--a360-sans); }
.ml-related { position: relative; isolation: isolate; display: flex; align-items: flex-end; min-height: clamp(620px, 58vw, 780px); margin-bottom: clamp(95px, 8vw, 140px); padding-block: clamp(70px, 8vw, 120px); overflow: hidden; color: white; background: #061a2b; }
.ml-related::before { position: absolute; inset: 0; z-index: 1; content: ""; background: linear-gradient(90deg, #041525ed 0%, #041525b8 40%, #0415251c 85%), linear-gradient(0deg, #041525bd, transparent 55%); pointer-events: none; }
.ml-related-media { position: absolute; inset: 0; z-index: 0; display: block; overflow: hidden; color: white; }
.ml-related-media img,.ml-related-media video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.ml-related-media video { z-index: 1; opacity: 0; transition: opacity .45s ease; }
.ml-related-media.is-playing video { opacity: 1; }
.ml-related-media:focus-visible { outline: 4px solid var(--ml-gold); outline-offset: -8px; }
.ml-related-video-label { position: absolute; z-index: 2; right: 32px; bottom: 30px; color: white; font: 800 11px/1.2 var(--a360-sans); letter-spacing: .12em; text-transform: uppercase; pointer-events: none; }
.ml-related-copy { position: relative; z-index: 2; max-width: 700px; pointer-events: none; }
.ml-related-copy .a360-landing-kicker { color: #e9c58c; }
.ml-related h2 { max-width: 700px; color: white; font-size: clamp(67px, 6.3vw, 105px); line-height: 1.02; }
.ml-related h2 em { color: #f0d39f; }
.ml-related-copy p:not(.a360-landing-kicker) { max-width: 600px; margin-bottom: 30px; color: #fff; font: 500 18px/1.7 var(--a360-sans); }
.ml-related-copy a { pointer-events: auto; }
.ml-related-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 24px; }
.ml-faq { padding-block: clamp(105px, 9vw, 150px); background: var(--ml-sand); }
.ml-faq-inner { display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: clamp(70px, 8vw, 150px); }
.ml-faq-head { max-width: 530px; }
.ml-faq-head p:not(.a360-landing-kicker) { color: #52616a; font: 400 17px/1.7 var(--a360-sans); }
.ml-faq .a360-landing-faq details > :not(summary) { max-width: none; }
.ml-close { position: relative; isolation: isolate; display: flex; align-items: center; min-height: 580px; color: white; background: #071b2b; }
.ml-close > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: center 55%; transform: scaleX(-1); }
.ml-close::after { position: absolute; inset: 0; z-index: -1; content: ""; background: linear-gradient(90deg, #041525ed, #0415259e 60%, #0415255c); }
.ml-close-inner { width: 100%; padding-block: 110px; }
.ml-close .a360-landing-kicker { color: #e9c58c; }
.ml-close h2 { max-width: 820px; margin-bottom: 21px; line-height: 1.1; }
.ml-close h2 em { color: #f0d39f; }
.ml-close p:not(.a360-landing-kicker) { max-width: 585px; margin-bottom: 31px; color: #ffffffdb; font: 500 18px/1.65 var(--a360-sans); }
.ml-viewer { position: fixed; inset: 0; box-sizing: border-box; width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: max(12px, env(safe-area-inset-top)) clamp(12px, 1.7vw, 32px) max(10px, env(safe-area-inset-bottom)); border: 0; color: white; background: #06131f; overflow: hidden; }
.ml-viewer::backdrop { background: #06131f; }
.ml-viewer[open] { display: grid; grid-template-rows: auto minmax(0,1fr) auto; }
.ml-viewer-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 42px; }
.ml-viewer-head span { color: #ecd29f; font: 800 11px/1 var(--a360-sans); letter-spacing: .13em; }
.ml-viewer button { display: grid; place-items: center; border: 1px solid #ffffff60; border-radius: 50%; color: white; background: #06131f88; cursor: pointer; transition: background .2s ease,border-color .2s ease; }
.ml-viewer button:is(:hover,:focus-visible) { border-color: #e9c58c; background: #aa8045; }
.ml-viewer-head button { width: 40px; height: 40px; font: 300 29px/1 var(--a360-sans); }
.ml-viewer-stage { display: grid; grid-template-columns: 46px minmax(0,1fr) 46px; gap: clamp(10px, 2vw, 28px); align-items: center; min-height: 0; }
.ml-viewer-stage img { display: block; width: 100%; height: 100%; max-height: calc(100dvh - 130px); object-fit: contain; }
.ml-viewer-stage button { width: 42px; height: 42px; font: 400 25px/1 var(--a360-sans); }
.ml-viewer-foot { min-height: 38px; display: flex; align-items: center; justify-content: center; text-align: center; }
.ml-viewer-foot p { margin: 0; font: 500 14px/1.3 var(--a360-sans); }
body.ml-viewer-open { overflow: hidden; }
@media (max-width: 1100px) {
  .ml-intro { gap: 48px; }
  .ml-intro h1,.ml-work h2,.ml-brief h2,.ml-related h2,.ml-faq h2 { font-size: clamp(58px, 6.8vw, 78px); }
}
@media (max-width: 760px) {
  .ml-hero { min-height: 780px; min-height: 100svh; }
  .ml-hero > picture img { object-position: 54% center; }
  .ml-hero::after { background: linear-gradient(0deg, #061a2bef 0%, #061a2b97 55%, #061a2b57 100%); }
  .ml-hero-inner { padding-top: 140px; padding-bottom: 75px; }
  .ml-hero-title { max-width: 650px; font-size: clamp(63px, 10.4vw, 87px); }
  .ml-hero-lede { font-size: 17px; }
  .ml-intro,.ml-brief,.ml-faq-inner { grid-template-columns: 1fr; }
  .ml-intro { gap: 42px; padding-block: 90px; }
  .ml-intro-media { aspect-ratio: 1.1; }
  .ml-work { padding-bottom: 92px; }
  .ml-work-head { display: block; }
  .ml-work-head > p { margin: 18px 0 0; }
  .ml-grid { grid-template-columns: repeat(2, minmax(0,1fr)); grid-template-rows: clamp(280px, 48vw, 370px); grid-auto-rows: clamp(150px, 25vw, 210px); gap: 8px; }
  .ml-photo-lead { grid-column: span 2; grid-row: span 1; }
  .ml-story-copy h2 { font-size: clamp(61px, 10vw, 85px); }
  .ml-brief { gap: 42px; padding-block: 90px; }
  .ml-related { min-height: 660px; margin-bottom: 90px; padding-block: 74px; }
  .ml-related::before { background: linear-gradient(0deg, #041525ee 0%, #041525a8 55%, #04152525 100%); }
  .ml-related-video-label { right: 22px; bottom: 20px; }
  .ml-faq { padding-block: 90px; }
  .ml-faq-inner { gap: 30px; }
  .ml-close { min-height: 540px; }
  .ml-close > img { object-position: left 55%; }
}
@media (max-width: 520px) {
  .ml-hero-title { font-size: clamp(55px, 13.8vw, 72px); }
  .ml-hero .a360-landing-actions { gap: 10px; }
  .ml-hero .a360-btn { font-size: 10px; padding-inline: 17px !important; }
  .ml-intro h1,.ml-work h2,.ml-brief h2,.ml-related h2,.ml-faq h2,.ml-close h2 { font-size: clamp(51px, 12.5vw, 65px); }
  .ml-intro-copy > p:not(.a360-landing-kicker),.ml-related-copy p:not(.a360-landing-kicker) { font-size: 16px; }
  .ml-intro-media { aspect-ratio: 1; }
  .ml-work-head { padding-bottom: 28px; }
  .ml-grid { grid-template-rows: 250px; grid-auto-rows: clamp(120px, 34vw, 170px); }
  .ml-story-copy h2 { font-size: clamp(55px, 14vw, 72px); }
  .ml-story-text > p:last-child { font-size: 16px; }
  .ml-brief-step { grid-template-columns: 38px 1fr; }
  .ml-brief-step h3 { font-size: 32px; }
  .ml-close-inner { padding-block: 85px; }
  .ml-related { min-height: 620px; padding-block: 66px; }
  .ml-related h2 { font-size: clamp(53px, 12.5vw, 68px); }
  .ml-related-copy p:not(.a360-landing-kicker) { max-width: 430px; font-size: 16px; }
  .ml-related-video-label { display: none; }
  .ml-viewer-stage { grid-template-columns: 34px minmax(0,1fr) 34px; gap: 3px; }
  .ml-viewer-stage button { width: 32px; height: 32px; font-size: 21px; }
}
@media (min-width: 2200px) {
  .a360-lifestyle-page .a360-shell { max-width: clamp(1600px, 72vw, 2160px); }
  .ml-hero { min-height: max(1180px, 100svh); }
  .ml-hero-title { font-size: clamp(160px, 5.4vw, 215px); max-width: 2000px; }
  .ml-hero-lede { font-size: 28px; max-width: 800px; }
  .ml-intro,.ml-brief,.ml-faq { padding-block: 180px; }
  .ml-related { min-height: 950px; }
  .ml-work { padding-bottom: 180px; }
  .ml-work-head > p { max-width: 670px; font-size: 21px; }
  .ml-grid { grid-template-rows: repeat(3, clamp(310px, 9vw, 380px)); gap: 16px; }
  .ml-intro-copy { max-width: 820px; }
  .ml-intro h1,.ml-work h2,.ml-brief h2,.ml-related h2,.ml-faq h2,.ml-close h2 { font-size: clamp(100px, 4vw, 135px); }
  .ml-intro-copy > p:not(.a360-landing-kicker),.ml-brief-copy > p:not(.a360-landing-kicker),.ml-related-copy p:not(.a360-landing-kicker) { font-size: clamp(21px, .8vw, 27px); }
  .ml-story-copy h2 { font-size: clamp(140px, 5vw, 180px); }
}
@media (prefers-reduced-motion: reduce) {
  .ml-hero > picture img,.ml-photo-media img,.ml-photo-expand,.ml-viewer button { transform: none !important; transition: none !important; }
  .ml-related-media video { display: none; }
}
