/* Shared product-page rhythm. Keep each approved photograph's useful framing. */
body:is(.channel-page,.lettering-builder,.custom-page,.catalog-page){--product-hero-height:clamp(500px,42.1875vw,620px)}
body:is(.channel-page,.lettering-builder,.custom-page,.catalog-page)>header,
body:is(.channel-page,.lettering-builder,.custom-page,.catalog-page)>header.sbw-header{
  position:relative;inset:auto;margin:0;padding:22px 5%;min-height:88px;
  background:#fff;color:#142e3b;border-bottom:1px solid #ccd4d3;
}
body:is(.channel-page,.lettering-builder,.custom-page,.catalog-page)>header .sbw-browse-toggle{border-color:#91a1a9}
body:is(.channel-page,.lettering-builder,.custom-page,.catalog-page)>header .sbw-secondary-links{border-color:#cbd3d4}
body:is(.channel-page,.lettering-builder,.custom-page,.catalog-page)>header :focus-visible{outline-color:#a52f39}
.lettering-builder:has(.blueberry-hero) header .brand-symbol:after{background:#fff}
.lettering-builder:has(.blueberry-hero)>header,
.lettering-builder:has(.blueberry-hero)>header.sbw-header{position:relative;inset:auto;color:#142e3b;background:#fff;padding:22px 5%;margin:0;border-color:#ccd4d3}
body:is(.channel-page,.custom-page,.catalog-page)>.preview-note,
.lettering-builder>.builder-notice{position:relative;height:auto;min-height:28px;padding:6px 5%;line-height:1.4;font-size:11px}

@media(min-width:951px){
  body.channel-page .approved-channel .hero,
  .lettering-builder .dimensional-hero.blueberry-hero,
  .custom-page .belair-feature .belair-main,
  .catalog-page .catalog-intro.indoor-intro{
    height:var(--product-hero-height);min-height:0;max-height:none;aspect-ratio:auto;
  }
  body.channel-page .channel-design .hero-copy{padding:54px 0 54px 5%;width:43%}
  body.channel-page .channel-design .hero-copy h1{font-size:clamp(44px,4.25vw,62px);line-height:1.06}
  body.channel-page .channel-design .hero-copy>.eyebrow{display:none}
  body.channel-page .channel-design .hero-copy>p:not(.eyebrow){font-size:16px;line-height:1.6;margin:20px 0 24px}
  body.channel-page .channel-design .hero-photo>img{object-fit:cover;object-position:right center}
  body.channel-page .cabinet-design .glendale-hero .hero-copy{width:31%;box-sizing:content-box;padding:54px 5% 62px 0;margin-left:auto}
  body.channel-page .cabinet-design .glendale-hero h1{font-size:clamp(42px,3.7vw,58px);line-height:1.08}
  body.channel-page .cabinet-design .glendale-hero .hero-photo img{object-position:center 50%}
  body.channel-page .cabinet-design .glendale-hero .hero-copy>p{margin:22px 0 24px}

  .lettering-builder .blueberry-hero{padding:0;align-items:flex-end}
  .lettering-builder .blueberry-hero .dimensional-hero-image{inset:0;width:100%;height:100%;aspect-ratio:auto}
  .lettering-builder .blueberry-hero .dimensional-hero-image img{object-fit:cover;object-position:center 34%}
  .lettering-builder .blueberry-hero .dimensional-hero-copy{width:88%;padding:0 0 78px;gap:0 7%;grid-template-columns:1.1fr 1fr}
  .lettering-builder .blueberry-hero .dimensional-back{top:24px;left:6%;font-size:11px}
  .lettering-builder .blueberry-hero .eyebrow{display:none}
  .lettering-builder .blueberry-hero h1{font-size:clamp(42px,4.05vw,60px);line-height:1.08}
  .lettering-builder .blueberry-hero .dimensional-intro{font-size:16px;margin-bottom:18px;max-width:420px}
  .lettering-builder .blueberry-hero .dimensional-actions{gap:12px 20px;flex-wrap:wrap}
  .lettering-builder .blueberry-hero .dimensional-actions .button{font-size:14px;padding:14px 18px;min-height:46px}
  .lettering-builder .blueberry-hero .dimensional-hero-foot{bottom:19px;padding-top:12px;font-size:10px}

  .custom-page .belair-feature .belair-main{display:flex;flex-direction:row;align-items:center;padding:0 6%;background:#15323e}
  .custom-page .belair-feature .belair-main:before{display:block}
  .custom-page .belair-scene{position:absolute;inset:0;width:100%;height:100%;z-index:-1}
  .custom-page .belair-scene>img{width:100%;height:100%;max-width:100%;object-fit:cover;object-position:left 44%}
  .custom-page .belair-story{width:35%;max-width:500px;padding:32px 0;margin:0;align-self:center}
  .custom-page .belair-story h1{font-size:clamp(42px,3.85vw,58px);line-height:1.07;margin:0 0 22px;color:#fff}
  .custom-page .belair-story h1 em{color:#b8e0da}
  .custom-page .belair-intro{font-size:16px;line-height:1.6;margin-bottom:22px;max-width:36ch;color:#f0f4f3}
  .custom-page .belair-story-link{margin-top:18px;color:#f0f4f3}
  .custom-page .belair-scene figcaption{position:absolute;bottom:18px;left:5%;max-width:55%;padding:8px 12px;font-size:10px;background:#102c3bd9;color:#fff}
  .custom-page .belair-scene figcaption strong{color:#fff;font-size:12px}

  .catalog-page .catalog-intro.indoor-intro{padding:42px 6%;max-width:none;grid-template-columns:minmax(0,.9fr) minmax(0,1.25fr);gap:5%}
  .catalog-page .indoor-intro h1{font-size:clamp(42px,4.05vw,60px);line-height:1.08;margin-bottom:22px}
  .catalog-page .indoor-intro p{font-size:16px;line-height:1.6;margin-bottom:18px}
  .catalog-page .indoor-intro figure{min-width:0}
  .catalog-page .indoor-intro img{width:100%;height:auto;aspect-ratio:1672/941;object-fit:contain;object-position:center}
  .catalog-page .indoor-intro .actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:22px}
  .catalog-page .indoor-intro .actions .button{font-size:14px;padding:14px 18px;min-height:46px}
}

/* On smaller screens the full photograph precedes freely flowing copy. */
@media(max-width:950px){
  body.channel-page .approved-channel .hero,
  .lettering-builder .dimensional-hero.blueberry-hero,
  .custom-page .belair-feature .belair-main,
  .catalog-page .catalog-intro.indoor-intro{
    display:flex;flex-direction:column;align-items:stretch;height:auto;min-height:0;max-height:none;
    padding:0;aspect-ratio:auto;background:#f7f5ef;color:#142e3b;overflow:visible;
  }
  .lettering-builder:has(header.sbw-header) .blueberry-hero{padding-top:0}
  .lettering-builder .blueberry-hero:before,
  .lettering-builder .blueberry-hero:after,
  .custom-page .belair-feature .belair-main:before,
  .custom-page .belair-feature .belair-main:after,
  body.channel-page .approved-channel .hero-photo:after{display:none}
  body.channel-page .approved-channel .hero-photo,
  .lettering-builder .blueberry-hero .dimensional-hero-image,
  .custom-page .belair-scene,
  .catalog-page .indoor-intro>figure{
    position:relative;inset:auto;order:0;z-index:0;width:100%;height:auto;aspect-ratio:auto;margin:0;background:none;
  }
  body.channel-page .approved-channel .hero-photo>img,
  .lettering-builder .blueberry-hero .dimensional-hero-image img,
  .custom-page .belair-scene>img,
  .catalog-page .indoor-intro img{
    position:relative;inset:auto;display:block;width:100%;max-width:100%;height:auto;aspect-ratio:auto;object-fit:contain;object-position:center;
  }
  body.channel-page .approved-channel .hero-copy,
  .lettering-builder .blueberry-hero .dimensional-hero-copy,
  .custom-page .belair-story,
  .catalog-page .indoor-intro>div{
    position:relative;inset:auto;order:1;display:block;align-self:stretch;box-sizing:border-box;width:100%;max-width:none;margin:0;padding:30px 6% 38px;
  }
  body.channel-page .approved-channel .hero-copy h1,
  .lettering-builder .blueberry-hero h1,
  .custom-page .belair-story h1,
  .catalog-page .indoor-intro h1{font-size:clamp(36px,6.1vw,52px);line-height:1.1;letter-spacing:-.035em;color:#142e3b;margin:0 0 20px}
  body.channel-page .approved-channel .hero-copy h1 em,
  .lettering-builder .blueberry-hero h1 em,
  .custom-page .belair-story h1 em{color:#142e3b}
  body.channel-page .approved-channel .hero-copy>.eyebrow,
  .lettering-builder .blueberry-hero .eyebrow{display:none}
  body.channel-page .approved-channel .hero-copy>p:not(.eyebrow),
  .lettering-builder .blueberry-hero .dimensional-intro,
  .custom-page .belair-intro,
  .catalog-page .indoor-intro p{font-size:16px;line-height:1.6;max-width:55ch;color:#48616c;margin:0 0 22px}
  body.channel-page .approved-channel .hero-photo span,
  .custom-page .belair-scene figcaption,
  .catalog-page .indoor-intro figcaption{position:static;display:block;max-width:none;margin:0;padding:12px 6% 0;background:none;color:#48616c;text-align:left;font-size:10px;line-height:1.6}
  .custom-page .belair-scene figcaption strong{display:block;color:#142e3b}
  .custom-page .belair-story-link{color:#a52f39;margin-top:18px}
  .custom-page .belair-story h1 em br{display:none}
  .lettering-builder .blueberry-hero .dimensional-back{position:static;display:inline-block;margin:0 0 20px;color:#48616c;text-shadow:none}
  .lettering-builder .blueberry-hero .dimensional-hero-foot{position:relative;inset:auto;order:2;width:88%;margin:0 6% 24px;padding-top:14px;display:block;color:#48616c;border-color:#ccd4d3;font-size:10px}
  .lettering-builder .blueberry-hero .dimensional-hero-foot span{display:block}
  .lettering-builder .blueberry-hero .dimensional-call{color:#142e3b;border-color:#91a1a9}
  .catalog-page .indoor-intro .actions{display:flex;align-items:center;flex-wrap:wrap;gap:14px 22px}
}
@media(max-width:700px){
  body:is(.channel-page,.lettering-builder,.custom-page,.catalog-page)>header,
  body:is(.channel-page,.lettering-builder,.custom-page,.catalog-page)>header.sbw-header{inset:auto;padding:12px 5%;min-height:0}
  .lettering-builder:has(.blueberry-hero)>header,
  .lettering-builder:has(.blueberry-hero)>header.sbw-header{inset:auto;padding:12px 5%}
  body:is(.channel-page,.lettering-builder,.custom-page,.catalog-page)>header.sbw-header .sbw-site-navigation{left:5%;right:5%}
  .lettering-builder>.builder-notice,.channel-page>.preview-note,.custom-page>.preview-note,.catalog-page>.preview-note{font-size:10px;min-height:26px}
}

/* Full setting is available without adding a duplicate project image below. */
.belair-setting-view{align-self:flex-start;font:inherit;font-weight:600;color:inherit;background:none;border:0;border-bottom:1px solid currentColor;padding:4px 0;cursor:zoom-in}
.belair-setting-view:focus-visible{outline:2px solid currentColor;outline-offset:4px}
.custom-page .belair-feature .belair-main:before{pointer-events:none;z-index:1}
.custom-page .belair-scene{z-index:0}
.custom-page .belair-story{z-index:2}