/* An editorial composition using the unaltered, complete installation photograph. */
.belair-feature{--belair-navy:#102c3b;--belair-red:#c43840;background:var(--belair-navy);color:#fff;overflow:hidden;scroll-margin-top:80px}.belair-main{position:relative;isolation:isolate;display:grid;grid-template-columns:1fr 1fr;min-height:760px;padding:0 8%;overflow:hidden;background:#102c3b}.belair-atmosphere{position:absolute;inset:-40px;z-index:-3;background:url('assets/belair/installed-retouched.jpg') 72% 45%/cover no-repeat;filter:blur(24px);opacity:.36;transform:scale(1.05)}.belair-main:before{content:'';position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,#102c3b 0%,#102c3bef 25%,#102c3bba 43%,#102c3b20 70%,#102c3b80 100%),linear-gradient(0deg,#102c3b,transparent 20%,transparent 82%,#102c3b88)}.belair-main:after{content:'';position:absolute;left:8%;top:0;width:74px;height:5px;background:var(--belair-red)}.belair-story{position:relative;z-index:2;align-self:center;padding:66px 0 80px;max-width:470px}.belair-story .eyebrow{color:#bed5d9;font-size:10px;letter-spacing:.19em;line-height:1.7;margin:0 0 33px;display:flex;align-items:center;gap:11px}.belair-story .eyebrow span{display:block;height:7px;width:7px;background:#d74b52}.belair-story h2{color:#fff;font-size:clamp(48px,5.75vw,86px);line-height:.99;letter-spacing:-.055em;margin:0 0 32px;font-weight:500}.belair-story h2 em{font-style:normal;color:#abd5d9}.belair-intro{color:#e0e9ec;line-height:1.75;max-width:340px;font-size:16px;margin:0 0 27px}.belair-story .button{background:var(--belair-red);color:white;border-color:var(--belair-red);display:inline-flex;gap:25px;align-items:center;text-align:left}.belair-story .button:hover{background:#a82e36}.belair-story-link{font-size:12px;display:flex;align-items:center;gap:20px;width:max-content;max-width:100%;margin-top:25px;color:#ccdde1;text-decoration:none}.belair-story-link:hover{text-decoration:underline}.belair-vertical{position:absolute;right:24px;top:50%;writing-mode:vertical-rl;font-size:9px;letter-spacing:.23em;color:#bdd1d8;transform:translateY(-50%)}.belair-feature figure{margin:0;min-width:0}.belair-image-button{border:0;border-radius:0;padding:0;position:relative;display:block;width:100%;overflow:hidden;background:#183e50;cursor:zoom-in;color:#fff}.belair-image-button img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .45s}.belair-image-button:hover img{transform:scale(1.025)}.belair-image-button:focus-visible,.belair-lightbox-close:focus-visible,.belair-story-link:focus-visible{outline:3px solid #fff;outline-offset:4px}.belair-finished{position:relative;height:760px;width:100%;align-self:center;max-width:550px;justify-self:end}.belair-finished .belair-image-button{height:100%;background:transparent;overflow:visible}.belair-finished img{object-fit:contain;object-position:center;height:100%;width:100%;mask-image:linear-gradient(90deg,transparent,#000 10%,#000 92%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 92%,transparent)}.belair-finished .belair-image-button:hover img{transform:none}.belair-enlarge{position:absolute;right:12px;bottom:12px;border:1px solid #ffffff88;background:#102c3bc9;font-size:20px;line-height:1;width:32px;height:32px;display:grid;place-items:center}.belair-finished .belair-enlarge{right:20%;bottom:77px}.belair-finished figcaption{position:absolute;bottom:25px;left:4%;right:4%;display:flex;justify-content:space-between;gap:15px;padding:15px 0 0;border-top:1px solid #ffffff66;font-size:9px;letter-spacing:.075em;text-shadow:0 1px 4px #102c3b}.belair-finished figcaption span:last-child{color:#d2e1e4;letter-spacing:0}.belair-process{display:grid;grid-template-columns:230px 1fr;gap:50px;margin:0;padding:48px 8% 62px;background:#0b2331;scroll-margin-top:100px;border-top:1px solid #ffffff16}.belair-process-heading .eyebrow{font-size:9px;letter-spacing:.14em;color:#aac5cf;line-height:1.7;margin:0 0 20px}.belair-process-heading h3{font-size:32px;line-height:1.1;color:white;letter-spacing:-.04em;margin:0 0 19px;font-weight:500}.belair-process-heading h3 em{color:#a8d0d5;font-style:normal}.belair-process-heading>p:last-child{font-size:12px;line-height:1.7;color:#bdcfd7;margin:0;max-width:220px}.belair-stages{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.belair-stages .belair-image-button{height:225px}.belair-concept img{object-fit:contain;object-position:center;transform:scale(1.44)}.belair-concept:hover img{transform:scale(1.47)}.belair-shop img{object-position:50% 40%}.belair-structure img{object-position:65% 30%;filter:brightness(1.13)}.belair-stages figcaption{padding:15px 0 0;display:flex;gap:12px}.belair-step{color:#cc6267;font-size:10px;padding-top:3px}.belair-stages figcaption strong{display:block;color:white;font-size:14px;font-weight:500}.belair-stages figcaption div>span{display:block;color:#bdcfd7;font-size:10px;margin-top:6px;line-height:1.5}.belair-lightbox{width:min(94vw,1100px);max-width:none;max-height:94vh;padding:45px 20px 16px;background:#102b3a;color:white;border:1px solid #ffffff35;border-radius:0}.belair-lightbox::backdrop{background:#071720e8}.belair-lightbox img{display:block;max-width:100%;max-height:calc(88vh - 95px);width:auto;height:auto;object-fit:contain;margin:auto}.belair-lightbox p{text-align:center;font-size:12px;margin:15px 0 0;color:#d7e5e9}.belair-lightbox-close{position:absolute;right:12px;top:6px;border:0;background:none;color:white;font-size:30px;cursor:pointer;padding:0 8px}.belair-lock{overflow:hidden}
@media(min-width:1450px){.belair-main{padding-left:max(8%,calc((100% - 1400px)/2));padding-right:max(8%,calc((100% - 1400px)/2))}.belair-finished{justify-self:center}}
@media(max-width:1050px){.belair-main{padding:0 6%;min-height:680px}.belair-story h2{font-size:65px}.belair-finished{height:680px}.belair-intro{font-size:14px;max-width:290px}.belair-process{padding:40px 6% 50px;grid-template-columns:180px 1fr;gap:28px}.belair-stages{gap:14px}.belair-stages .belair-image-button{height:200px}.belair-process-heading h3{font-size:29px}.belair-vertical{right:13px}.belair-finished figcaption{flex-direction:column;gap:5px;font-size:8px}}
@media(max-width:700px){.belair-main{grid-template-columns:1fr;min-height:0;padding:0 6%}.belair-story{padding:44px 0 8px;max-width:100%;z-index:2}.belair-story .eyebrow{margin-bottom:23px}.belair-story h2{font-size:clamp(46px,11vw,64px);line-height:1.01;margin-bottom:21px}.belair-story h2 br:nth-child(2){display:none}.belair-story h2 em:before{content:' '}.belair-intro{max-width:430px;font-size:14px;margin-bottom:23px}.belair-story-link{margin-top:20px}.belair-finished{height:auto;aspect-ratio:1152/2048;max-height:660px;width:100%;max-width:370px;justify-self:center;margin-top:15px!important}.belair-finished .belair-image-button{height:100%;position:absolute;inset:0}.belair-finished img{object-fit:contain;mask-image:linear-gradient(90deg,transparent,#000 7%,#000 95%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 95%,transparent)}.belair-finished .belair-enlarge{right:10%;bottom:70px}.belair-finished figcaption{left:0;right:0;bottom:15px;font-size:8px;flex-direction:row;gap:10px;background:#102c3bbf;padding:10px 8px;line-height:1.6}.belair-main:before{background:linear-gradient(180deg,#102c3b 0%,#102c3bfa 37%,#102c3b22 60%,#102c3b99 100%)}.belair-atmosphere{background-position:65% bottom}.belair-vertical{display:none}.belair-process{padding:33px 6% 40px;grid-template-columns:1fr;gap:25px}.belair-process-heading h3{font-size:32px}.belair-process-heading h3 br{display:none}.belair-process-heading>p:last-child{max-width:330px}.belair-process-heading .eyebrow{margin-bottom:13px}.belair-stages{gap:11px}.belair-stages .belair-image-button{height:155px}.belair-stages figcaption{display:block;padding-top:11px}.belair-step{display:block;margin-bottom:6px}.belair-stages figcaption strong{font-size:12px;line-height:1.4}.belair-stages figcaption div>span{font-size:9px}.belair-concept img{transform:scale(1.44)}}
@media(prefers-reduced-motion:reduce){.belair-image-button img{transition:none}}
/* Fade the photograph itself, rather than its empty contain gutters. */
.belair-finished img{width:auto;max-width:100%;height:100%;margin:0 auto;mask-image:linear-gradient(90deg,transparent 0%,#000 14%,#000 85%,transparent 100%);-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 14%,#000 85%,transparent 100%)}

/* Custom page: one complete city scene, followed by the actual project sequence. */
.custom-page .preview-note{position:relative;background:#e8edeb;color:#334b57}
.custom-page>header.sbw-header,.custom-page>header{position:relative;top:auto;left:auto;right:auto;margin:0 5%;padding:23px 0;color:#142e3b;border-bottom:1px solid #ccd4d3}
.custom-page>header.sbw-header .sbw-browse-toggle{border-color:#91a1a9}
.custom-page>header.sbw-header .sbw-secondary-links{border-color:#cbd3d4}
.custom-page>header.sbw-header :focus-visible{outline-color:#a52f39}
.custom-page .belair-feature{background:#f7f6f0;scroll-margin-top:24px}
.custom-page .belair-feature .belair-main{display:flex;align-items:center;justify-content:flex-end;position:relative;isolation:isolate;height:52vw;min-height:640px;padding:0 6%;background:#15323e}
.custom-page .belair-feature .belair-main:before{z-index:0;background:linear-gradient(90deg,transparent 0%,transparent 49%,#102c3b55 57%,#102c3bc9 68%,#102c3be8 100%)}
.custom-page .belair-feature .belair-main:after{content:none}
.custom-page .belair-scene{position:absolute;inset:0;width:100%;height:100%;margin:0;z-index:-1}
.custom-page .belair-scene>img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 15%}
.custom-page .belair-scene figcaption{position:absolute;left:5%;bottom:24px;display:flex;flex-direction:column;gap:3px;color:#fff;font-size:11px;line-height:1.5;background:#102c3bd9;padding:10px 14px;text-shadow:none}
.custom-page .belair-scene figcaption strong{font-weight:600;font-size:13px}
.custom-page .belair-story{width:36%;max-width:530px;padding:58px 0 62px;margin:0;align-self:center;z-index:1}
.custom-page .belair-story h1{font-size:clamp(46px,4.4vw,76px);line-height:1.03;letter-spacing:-.035em;margin:0 0 26px;color:#fff;text-wrap:balance}
.custom-page .belair-story h1 em{color:#b8e0da;font-style:normal}
.custom-page .belair-intro{max-width:37ch;color:#f0f4f3;font-size:17px;line-height:1.65;margin:0 0 28px}
.custom-page .belair-story .button{gap:18px;max-width:100%;padding:16px 22px;min-height:48px;font-size:14px}
.custom-page .belair-story .button:after{content:none}
.custom-page .belair-story-link{font-size:14px;gap:12px;color:#f0f4f3;margin-top:24px;min-height:44px}
.custom-page .belair-story-link svg{flex-shrink:0}
.custom-page .belair-story-link:focus-visible{outline:3px solid #fff;outline-offset:5px}
.custom-page .belair-process{grid-template-columns:minmax(180px,230px) minmax(0,1fr);gap:44px;padding:68px 6% 72px;background:#f7f6f0;color:#142e3b;border-top:0;scroll-margin-top:24px}
.custom-page .belair-process-heading h2{font-size:clamp(30px,2.7vw,42px);line-height:1.12;letter-spacing:-.035em;color:#142e3b;margin:0 0 22px}
.custom-page .belair-process-heading>p:last-child{font-size:15px;line-height:1.7;color:#48616c;max-width:27ch;margin:0}
.custom-page .belair-stages{gap:22px}
.custom-page .belair-stages .belair-image-button{height:clamp(310px,29vw,440px);background:#e1e7e4}
.custom-page .belair-shop img{object-position:50% 45%}
.custom-page .belair-structure img{object-position:60% 36%;filter:none}
.custom-page .belair-installed img{object-fit:contain;object-position:center;transform:none}
.custom-page .belair-image-button:hover img{transform:none}
.custom-page .belair-image-button:hover .belair-enlarge{background:#a52f39;border-color:#a52f39}
.custom-page .belair-image-button:focus-visible{outline:3px solid #a52f39;outline-offset:5px}
.custom-page .belair-enlarge{right:10px;bottom:10px;width:40px;height:40px;background:#102c3be8;border:1px solid #ffffff66}
.custom-page .belair-stages figcaption{gap:10px;padding-top:16px}
.custom-page .belair-step{color:#a52f39;font-size:12px;font-variant-numeric:tabular-nums;padding-top:2px}
.custom-page .belair-stages figcaption strong{color:#142e3b;font-size:16px;line-height:1.35;font-weight:600}
.custom-page .belair-stages figcaption div>span{color:#48616c;font-size:12px;line-height:1.55;margin-top:6px}
@media(min-width:1800px){.custom-page .belair-feature .belair-main{padding-right:max(6%,calc((100% - 1680px)/2))}.custom-page .belair-story{width:34%}}
@media(max-width:1100px){
  .custom-page .belair-feature .belair-main{height:auto;min-height:0;padding:0;display:flex;flex-direction:column;align-items:stretch;background:#f7f6f0;color:#142e3b}
  .custom-page .belair-feature .belair-main:before{display:none}
  .custom-page .belair-scene{position:relative;inset:auto;order:0;height:auto;z-index:0}
  .custom-page .belair-scene>img{height:auto;object-fit:contain;object-position:center}
  .custom-page .belair-scene figcaption{position:static;padding:16px 6% 0;background:transparent;color:#48616c;font-size:11px;gap:3px}
  .custom-page .belair-scene figcaption strong{color:#142e3b}
  .custom-page .belair-story{order:1;align-self:stretch;width:88%;max-width:680px;margin:0 6%;padding:34px 0 48px}
  .custom-page .belair-story h1{font-size:clamp(42px,6vw,64px);color:#142e3b;max-width:660px;line-height:1.08}
  .custom-page .belair-story h1 em{color:#142e3b}
  .custom-page .belair-story h1 em br{display:none}
  .custom-page .belair-story h1 em br:after{content:' '}
  .custom-page .belair-intro{color:#48616c;max-width:55ch;font-size:16px;margin-bottom:24px}
  .custom-page .belair-story-link{color:#a52f39;margin-top:18px}
  .custom-page .belair-story-link:focus-visible{outline-color:#a52f39}
  .custom-page .belair-process{grid-template-columns:1fr;gap:30px;padding:44px 6% 52px;border-top:1px solid #ccd4d3}
  .custom-page .belair-process-heading h2 br{display:none}
  .custom-page .belair-process-heading>p:last-child{max-width:58ch}
  .custom-page .belair-stages .belair-image-button{height:clamp(280px,42vw,420px)}
}
@media(max-width:700px){
  .custom-page>header.sbw-header,.custom-page>header{top:auto;padding:12px 0}
  .custom-page .belair-story{padding-top:28px}
  .custom-page .belair-story h1{font-size:clamp(38px,8.8vw,54px);margin-bottom:22px}
  .custom-page .belair-story .button{font-size:14px}
  .custom-page .belair-stages{grid-template-columns:1fr;gap:32px}
  .custom-page .belair-stages .belair-image-button{height:auto;aspect-ratio:4/3}
  .custom-page .belair-stages .belair-shop img{height:100%;object-position:center 42%}
  .custom-page .belair-stages .belair-structure img{height:100%;object-position:center 36%}
  .custom-page .belair-stages .belair-installed{aspect-ratio:1152/2048;width:min(100%,370px);margin:0 auto}
  .custom-page .belair-stages .belair-installed img{height:100%}
  .custom-page .belair-stages figcaption{display:flex;padding-top:14px}
  .custom-page .belair-process-heading h2{font-size:34px}
}

/* Bel Air: concept, original planning drawings, actual fabrication. */
.custom-page .belair-process{display:block}
.custom-page .belair-process-heading{display:flex;align-items:flex-end;gap:48px;margin-bottom:32px}
.custom-page .belair-process-heading h2{margin:0;flex:0 1 340px}
.custom-page .belair-process-heading>p:last-child{max-width:48ch;padding-bottom:4px}
.custom-page .belair-stages{grid-template-columns:1fr 1.2fr 1fr;gap:24px}
.custom-page .belair-stages>.belair-drawing-stage{min-width:0}
.custom-page .belair-stages .belair-image-button,.custom-page .belair-drawing-panel{height:clamp(340px,31vw,440px)}
.custom-page .belair-concept img{object-fit:cover;object-position:center 34%;transform:none}
.custom-page .belair-drawing-panel{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:1px;background:#d7dfdc;border:1px solid #d7dfdc}
.custom-page .belair-drawing-panel .belair-image-button{height:100%;min-height:0;aspect-ratio:auto;background:#fff;padding:16px 12px 46px;color:#142e3b}
.custom-page .belair-drawing-panel .belair-letter-layout{grid-row:1 / 3}
.custom-page .belair-drawing-panel img{object-fit:contain;transform:none}
.custom-page .belair-drawing-panel .belair-enlarge{width:28px;height:28px;right:8px;bottom:8px}
.custom-page .belair-drawing-label{position:absolute;bottom:12px;left:12px;right:38px;text-align:left;font-family:inherit;font-size:11px;line-height:1.4;color:#334d58}
.custom-page .belair-planning-note{font-size:12px;line-height:1.6;color:#48616c;max-width:72ch;margin:28px 0 0}
.belair-lightbox-view{overflow:auto;max-height:calc(88dvh - 110px);outline-offset:3px}
.belair-lightbox.is-drawing{padding:48px 20px 20px;background:#f7f6f0;color:#142e3b}
.belair-lightbox.is-drawing .belair-lightbox-close{color:#142e3b;min-width:44px;min-height:40px}
.belair-lightbox.is-drawing .belair-lightbox-view{height:calc(88dvh - 190px);min-height:180px;background:white;border:1px solid #d7dfdc;overscroll-behavior:contain}
.belair-lightbox.is-drawing img{width:auto;height:100%;max-width:100%;max-height:100%;object-fit:contain}
.belair-lightbox.is-drawing.is-zoomed img{height:auto;width:1600px;max-width:none;max-height:none;margin:0}
.belair-lightbox.is-drawing p{color:#48616c;line-height:1.5}
.belair-drawing-controls:not([hidden]){display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:16px}
.belair-drawing-tabs{display:flex;flex-wrap:wrap;gap:8px}
.belair-drawing-controls button{font-family:inherit;font-size:12px;font-weight:500;line-height:1.4;min-height:44px;padding:10px 14px;background:transparent;border:1px solid #a5b2b6;color:#142e3b;cursor:pointer}
.belair-drawing-controls button:hover{background:#e3e9e5}
.belair-drawing-tabs button[aria-pressed=true]{background:#142e3b;color:white;border-color:#142e3b}
.belair-drawing-controls button:focus-visible,.belair-lightbox.is-drawing :focus-visible{outline:3px solid #a52f39;outline-offset:3px}
.belair-zoom{flex-shrink:0}
@media(max-width:1100px){.custom-page .belair-process-heading{align-items:flex-start}.custom-page .belair-process-heading h2{flex-basis:300px}.custom-page .belair-stages{gap:18px}}
@media(max-width:700px){
 .custom-page .belair-process-heading{display:block;margin-bottom:28px}
 .custom-page .belair-process-heading h2{margin-bottom:20px}
 .custom-page .belair-stages{grid-template-columns:1fr;gap:32px}
 .custom-page .belair-stages .belair-image-button{height:400px;aspect-ratio:auto}
 .custom-page .belair-concept img{object-fit:cover;object-position:center 34%}
 .custom-page .belair-drawing-panel{height:400px}
 .custom-page .belair-drawing-panel .belair-image-button{height:100%}
 .custom-page .belair-drawing-label{font-size:12px}
 .belair-lightbox.is-drawing{padding:46px 12px 16px}
 .belair-lightbox.is-drawing .belair-lightbox-view{height:calc(85dvh - 240px)}
 .belair-drawing-controls:not([hidden]){display:block;margin-top:12px}
 .belair-drawing-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
 .belair-drawing-controls button{padding:8px;font-size:11px;min-height:44px}
 .belair-zoom{margin-top:10px;width:100%}
}