/* B.2 photography preview — authentic project photography */
body.concept-b .b-art--photo{padding:28px 28px 0;background:#173451;isolation:isolate}
body.concept-b .b-art__photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:48% 49%;z-index:0}
body.concept-b .b-art__photo-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(9,31,60,.57),rgba(9,31,60,.07) 29%,rgba(9,31,60,.10) 46%,rgba(9,31,60,.80) 100%);z-index:1}
body.concept-b .b-art--photo .b-art__top{z-index:3;font-size:11px;font-weight:700;text-shadow:0 1px 5px rgba(0,0,0,.35);letter-spacing:.09em}
body.concept-b .b-art__photo-caption{z-index:3;position:relative;margin-top:auto;margin-bottom:42px;display:flex;flex-direction:column;gap:10px}
body.concept-b .b-art__photo-caption strong{font-family:Manrope,Arial,sans-serif;font-size:clamp(28px,3vw,42px);letter-spacing:-.045em;line-height:1.12;color:#fff}
body.concept-b .b-art__photo-caption > span:last-child{font-size:13px;letter-spacing:.02em;color:#E1ECF9}
body.concept-b .photo-wave-accent{position:absolute;bottom:0;right:0;left:0;width:100%;height:75px;z-index:2;pointer-events:none;opacity:.7}
body.concept-b .b-photo-story{background:#F3F8FE;border-block:1px solid #D7E6F5;padding:clamp(60px,6vw,90px) 0}
body.concept-b .b-photo-story__heading{display:flex;align-items:end;justify-content:space-between;gap:32px;margin-bottom:34px}
body.concept-b .b-photo-story__heading .eyebrow{margin-bottom:13px}
body.concept-b .b-photo-story__heading h2{font-size:clamp(31px,3vw,47px);line-height:1.18;max-width:640px}
body.concept-b .b-photo-story__heading > p{max-width:320px;color:#526B88;font-size:15px;line-height:1.7;margin:0 0 5px}
body.concept-b .b-photo-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
body.concept-b .b-photo-tile{overflow:hidden;background:#fff;border-radius:17px;border:1px solid #D2E1F0;box-shadow:0 13px 24px rgba(25,47,82,.045);margin:0}
body.concept-b .b-photo-tile img{width:100%;height:280px;object-fit:cover;object-position:center 45%;display:block}
body.concept-b .b-photo-tile figcaption{padding:20px 22px 23px;display:flex;gap:13px;align-items:baseline;color:#192F52;font-weight:700;font-size:16px;line-height:1.3}
body.concept-b .b-photo-tile figcaption span{font-size:11px;color:#2F67AE}
body.concept-b .b-service-photo-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:38px}
body.concept-b .b-service-photo-row figure{margin:0;overflow:hidden;background:#fff;border:1px solid #C9DDF0;border-radius:14px}
body.concept-b .b-service-photo-row img{width:100%;height:225px;object-fit:cover;display:block}
body.concept-b .b-service-photo-row figcaption{font-size:14px;color:#2D476B;padding:15px 18px 18px}
body.concept-b .b-owner-field-photo{border-radius:18px;background:#FFF;overflow:hidden;margin:0;border:1px solid #C9DDF0;align-self:center;box-shadow:0 17px 40px rgba(25,47,82,.08)}
body.concept-b .b-owner-field-photo img{width:100%;height:440px;object-fit:cover;object-position:center 38%;display:block}
body.concept-b .b-owner-field-photo figcaption{display:flex;flex-direction:column;gap:6px;padding:20px 22px 22px;color:#192F52;font-size:15px;font-weight:700}
body.concept-b .b-owner-field-photo figcaption .eyebrow{margin:0;font-size:11px}
@media(max-width:760px){
 body.concept-b .b-art--photo{min-height:360px}
 body.concept-b .b-art__photo{object-position:center 49%}
 body.concept-b .b-photo-story__heading{display:block}
 body.concept-b .b-photo-story__heading > p{margin-top:16px}
 body.concept-b .b-photo-grid{grid-template-columns:1fr;gap:17px}
 body.concept-b .b-photo-tile img{height:265px}
 body.concept-b .b-service-photo-row{grid-template-columns:1fr}
 body.concept-b .b-service-photo-row img{height:265px}
 body.concept-b .b-owner-field-photo img{height:360px}
}

/* Owner-led photo selection for B.2 Jake & Tyler review */
body.concept-b .b-art--photo .b-art__photo{object-position:50% 44%}
body.concept-b .b-owner-field-photo img{object-position:55% 48%}
@media(max-width:760px){body.concept-b .b-art--photo .b-art__photo{object-position:50% 43%}}

/* ===== Prelaunch revision (Nov 2026) ===== */

/* Services intro: text + photo of Tyler on the job (fills the empty right side on desktop) */
body.concept-b .page-intro--photo{padding:76px 0 80px}
body.concept-b .intro-split{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(320px,.75fr);gap:clamp(40px,6vw,96px);align-items:center}
body.concept-b .intro-photo{margin:0;background:#fff;border:1px solid #C9DDF0;border-radius:18px;overflow:hidden;box-shadow:0 17px 40px rgba(25,47,82,.08)}
body.concept-b .intro-photo img{display:block;width:100%;height:440px;object-fit:cover;object-position:50% 44%}
body.concept-b .intro-photo figcaption{display:flex;flex-direction:column;gap:6px;padding:18px 22px 20px;color:#192F52;font-size:15px;font-weight:700;line-height:1.4}
body.concept-b .intro-photo figcaption .eyebrow{margin:0;font-size:11px}
body.concept-b .b-service-photo-row--two{grid-template-columns:repeat(2,minmax(0,1fr))}
body.concept-b .b-service-photo-row--two img{height:300px}

/* Swipe hint is phone-only */
body.concept-b .b-swipe-hint{display:none}

@media(max-width:1050px){
 body.concept-b .intro-split{grid-template-columns:minmax(0,1.1fr) minmax(280px,.9fr)}
 body.concept-b .intro-photo img{height:380px}
}

@media(max-width:760px){
 /* Slightly tighter section spacing on phones (shortens long pages without changing the look) */
 body.concept-b .section{padding:58px 0}

 /* Hero photo: full content width instead of an inset card; drop the wrapping top label on phones */
 body.concept-b .b-art--photo{margin:0;height:400px;min-height:0;padding:24px 24px 0}
 body.concept-b .b-art--photo .b-art__top{display:none}
 body.concept-b .b-art__photo-caption{margin-bottom:36px}

 /* Project photos: horizontal swipe row on phones (desktop keeps the 3-column grid) */
 body.concept-b .b-photo-story__heading{margin-bottom:18px}
 body.concept-b .b-swipe-hint{display:flex;align-items:center;gap:8px;margin:0 0 14px;font-size:13px;font-weight:600;color:#4B6483}
 body.concept-b .b-swipe-hint span{color:#2F67AE;font-size:17px;line-height:1}
 body.concept-b .b-photo-grid{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;
   --gutter:max(22px,4.4vw);margin-inline:calc(-1 * var(--gutter));padding:4px var(--gutter) 16px;scroll-padding-inline:var(--gutter);scrollbar-width:thin}
 body.concept-b .b-photo-tile{flex:0 0 80%;scroll-snap-align:start}
 body.concept-b .b-photo-tile img{height:230px}
 body.concept-b .b-photo-tile figcaption{padding:16px 18px 18px;font-size:15px}
 body.concept-b .b-photo-grid:focus-visible{outline:3px solid #2F67AE;outline-offset:-3px;border-radius:12px}

 /* Services intro stacks; photo shown after the text */
 body.concept-b .page-intro--photo{padding:60px 0 58px}
 body.concept-b .intro-split{grid-template-columns:1fr;gap:34px}
 body.concept-b .intro-photo img{height:320px}
 body.concept-b .intro-photo figcaption{font-size:14px;padding:15px 18px 17px}
 body.concept-b .b-service-photo-row--two{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
 body.concept-b .b-service-photo-row--two img{height:170px}
 body.concept-b .b-service-photo-row--two figcaption{font-size:13px;line-height:1.4;padding:11px 12px 13px}
}
@media(max-width:410px){body.concept-b .b-art--photo{height:380px}}

/* ===== Photo framing fix (Nov 3, 2026) =====
   The project photos are roughly square or slightly portrait. Wide, short boxes cut off the key subjects
   (shower head/tub, faucet, drain fittings), so these cards now use a square frame that shows nearly the whole photo. */
body.concept-b .b-photo-tile img,
body.concept-b .b-service-photo-row img{height:auto;aspect-ratio:1 / 1;object-fit:cover}
/* Per-photo focus points (apply wherever the photo appears) */
body.concept-b img[src$="shower-fixtures.webp"]{object-position:50% 55%}
body.concept-b img[src$="drain-repiping.webp"]{object-position:45% 35%}
body.concept-b img[src$="fixture-faucet.webp"]{object-position:40% 50%}
/* Services: two square photos side by side, kept to a sensible size on wide screens */
body.concept-b .b-service-photo-row--two{max-width:880px;margin-inline:auto}
@media(max-width:760px){
 body.concept-b .b-photo-tile img,
 body.concept-b .b-service-photo-row img,
 body.concept-b .b-service-photo-row--two img{height:auto;aspect-ratio:1 / 1}
}