/* Comparison controls and three alternatives; the current layout stays available. */
.layout-photo,.layout-intro{display:none}.layout-picker[hidden]{display:none!important}.layout-picker{position:sticky;top:0;z-index:40;order:-1;background:#fffaf4;border-bottom:1px solid #d6c6bf;padding:12px max(5%,calc((100% - 1260px)/2));display:flex;justify-content:space-between;gap:18px;align-items:center;box-shadow:0 3px 15px #38201912}.comparing-layouts{display:flex;flex-direction:column}.layout-picker-title{display:flex;flex-direction:column;gap:3px;min-width:0}.layout-picker-title strong{font-size:14px;color:#692638}.layout-picker-title span{font-size:13px;color:#62545a}.layout-buttons{display:flex;gap:6px;flex-wrap:wrap}.layout-buttons button{font-size:14px;padding:9px 13px;border:1px solid #d2bdc3;background:transparent;white-space:nowrap}.layout-buttons button[aria-pressed=true]{background:#692638;color:white;border-color:#692638}.layout-buttons button:hover{border-color:#692638}
html[data-layout]:not([data-layout=current]) .layout-photo{display:block;position:relative;margin:0;overflow:hidden} .layout-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 12%}.layout-photo figcaption{position:absolute;bottom:28px;left:28px;color:white;font:2.3rem/.98 NimbusRoman,Georgia,serif;text-shadow:0 2px 16px #0009;z-index:1}.layout-photo:after{content:'';position:absolute;inset:45% 0 0;background:linear-gradient(transparent,#220e13ad)}.layout-photo figcaption em{font-style:italic}html[data-layout]:not([data-layout=current]) .layout-intro{display:block;margin:0;color:#692638;font:1.65rem/1.1 var(--head)}html[data-layout]:not([data-layout=current]) .review-viewport{min-height:180px}html[data-layout]:not([data-layout=current]) .review-panel blockquote{max-width:850px;margin:12px auto 18px;font-size:1.05rem;line-height:1.55}html[data-layout]:not([data-layout=current]) .about-card p,html[data-layout]:not([data-layout=current]) .service-grid p{font-size:1rem}
/* 01: Editorial — a two-column opening and generous serif headings. */
html[data-layout=editorial]{--head:NimbusRoman,Georgia,serif}html[data-layout=editorial] .hero.hero-logo-only{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr auto auto;column-gap:6%;row-gap:18px;padding:25px 0;min-height:390px}html[data-layout=editorial] .hero .main-logo{grid-column:1;grid-row:1;justify-self:center;align-self:end;width:225px;height:225px}html[data-layout=editorial] .hero .layout-photo{grid-column:2;grid-row:1/4;height:365px;width:100%;align-self:stretch}html[data-layout=editorial] .hero .layout-intro{grid-column:1;grid-row:2;text-align:center;font-size:2rem}html[data-layout=editorial] .hero .hero-actions{grid-column:1;grid-row:3;gap:16px}html[data-layout=editorial] .service-grid article{border-top:2px solid #83263c}html[data-layout=editorial] .section-title h2{font-size:3rem}html[data-layout=editorial] .reviews-section .review-panel{background:transparent;color:var(--text);border-block:1px solid #bc9e9e}html[data-layout=editorial] .reviews-section .review-source{color:var(--muted)}html[data-layout=editorial] .reviews-section .eyebrow,html[data-layout=editorial] .reviews-section .stars{color:var(--accent)}
/* 02: Studio — logo and reviews side by side, music immediately below. */
html[data-layout=studio]{--head:NimbusNarrow,'Arial Narrow',sans-serif}html[data-layout=studio] main{display:grid;grid-template-columns:1fr 1fr;column-gap:3%;width:min(1260px,90%);margin:auto}html[data-layout=studio] main>.wrap{width:100%}html[data-layout=studio] .hero.hero-logo-only{grid-column:1;grid-row:1;padding:25px 0;display:grid;grid-template-columns:1fr 1fr;gap:12px;align-content:center}html[data-layout=studio] .hero .main-logo{width:210px;height:210px;justify-self:center;grid-column:1;grid-row:1}html[data-layout=studio] .hero .layout-photo{grid-column:2;grid-row:1/3;height:280px;width:100%}html[data-layout=studio] .hero .layout-intro{grid-column:1;grid-row:2;text-align:center;font-size:1.9rem;text-transform:uppercase}html[data-layout=studio] .hero .hero-actions{grid-column:1/3;grid-row:3;justify-content:flex-start}html[data-layout=studio] .hero figcaption{font-family:NimbusNarrow,sans-serif;font-size:1.7rem;left:16px;bottom:20px}html[data-layout=studio] .reviews-section{grid-column:2;grid-row:1;align-self:center;padding:20px 0}html[data-layout=studio] .reviews-section .review-panel{padding:24px}html[data-layout=studio] .reviews-section .review-viewport{text-align:left}html[data-layout=studio] .credits{grid-column:1/3;grid-row:2}html[data-layout=studio] .credits-inner{width:96%}html[data-layout=studio] .music-section{grid-column:1/3;grid-row:3}html[data-layout=studio] .services-section{grid-column:1/3;grid-row:4;padding:25px}html[data-layout=studio] .services-section>.wrap{width:100%}html[data-layout=studio] .about-contact{grid-column:1/3;grid-row:5}html[data-layout=studio] h2{text-transform:uppercase;letter-spacing:-.02em}html[data-layout=studio] .section-title h2{font-size:3.2rem}html[data-layout=studio] .playlist{grid-template-columns:repeat(4,1fr)}html[data-layout=studio] .track-row{padding-block:20px}html[data-layout=studio] .service-grid h3{font-family:NimbusNarrow,sans-serif;font-size:1.7rem;text-transform:uppercase}
/* 03: Portrait — a panoramic photo with a burgundy logo panel. */
html[data-layout=portrait]{--head:Gothic,Arial,sans-serif}html[data-layout=portrait] .hero.hero-logo-only{display:grid;grid-template-columns:340px 1fr;grid-template-rows:260px auto auto;gap:0;padding:0;min-height:420px;background:#692638;margin-top:22px;margin-bottom:22px}html[data-layout=portrait] .hero .main-logo{grid-column:1;grid-row:1;width:240px;height:240px;justify-self:center;align-self:center;filter:none}html[data-layout=portrait] .hero .layout-intro{grid-column:1;grid-row:2;color:#fff9ef;font-size:1.25rem;text-align:center;padding:0 20px 20px}html[data-layout=portrait] .hero .hero-actions{grid-column:1;grid-row:3;align-self:start;flex-direction:column;gap:12px;padding:0 16px 28px}html[data-layout=portrait] .hero .primary{background:#f8f6f0;color:#692638}html[data-layout=portrait] .hero .underlink{color:white;border-color:#c9a8b1}html[data-layout=portrait] .hero .layout-photo{grid-column:2;grid-row:1/4;width:100%;height:100%;min-height:420px}html[data-layout=portrait] .layout-photo img{object-position:50% 12%}html[data-layout=portrait] .hero figcaption{font-family:Gothic,Arial,sans-serif;font-size:clamp(2rem,4vw,3.6rem);line-height:1.04}html[data-layout=portrait] .hero figcaption em{font-style:normal}html[data-layout=portrait] .section-title h2{font-size:2.5rem;letter-spacing:-.05em}html[data-layout=portrait] .service-grid{gap:12px}html[data-layout=portrait] .service-grid article{padding:18px;background:#f8f6f0d9;border-top:3px solid #83263c}html[data-layout=portrait] .reviews-section .review-panel{background:#eee3dd;color:#321c24;border-color:#83263c}html[data-layout=portrait] .reviews-section .review-source{color:#62545a}html[data-layout=portrait] .reviews-section .eyebrow,html[data-layout=portrait] .reviews-section .stars{color:#83263c}
@media(max-width:1000px){html[data-layout=studio] main{display:block}html[data-layout=studio] .hero.hero-logo-only{grid-template-columns:1fr 1fr}html[data-layout=studio] .hero .main-logo{width:220px;height:220px}html[data-layout=studio] .playlist{grid-template-columns:1fr 1fr}html[data-layout=studio] .reviews-section{padding:10px 0 0}html[data-layout=portrait] .hero.hero-logo-only{grid-template-columns:280px 1fr}.layout-picker{align-items:flex-start}.layout-picker-title span{max-width:170px}}
@media(max-width:650px){.layout-picker{padding:10px 5%;display:block}.layout-picker-title{flex-direction:row;justify-content:space-between;align-items:center;margin-bottom:8px}.layout-picker-title span{font-size:12px;max-width:none}.layout-buttons{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}.layout-buttons button{font-size:12px;padding:10px 3px}html[data-layout=editorial] .hero.hero-logo-only{grid-template-columns:1fr 1fr;gap:15px;padding-block:18px;min-height:0}html[data-layout=editorial] .hero .main-logo{width:160px;height:160px;max-width:100%}html[data-layout=editorial] .hero .layout-photo{height:250px;grid-row:1/3}html[data-layout=editorial] .hero .layout-intro{font-size:1.4rem}html[data-layout=editorial] .hero .hero-actions{grid-column:1/3;grid-row:3}.layout-photo figcaption{font-size:1.35rem;left:14px;bottom:18px}html[data-layout=studio] .hero .main-logo{width:170px;height:170px;max-width:100%}html[data-layout=studio] .hero .layout-photo{height:240px}html[data-layout=studio] .hero .layout-intro{font-size:1.6rem}html[data-layout=studio] .hero .hero-actions{justify-content:center}html[data-layout=studio] .hero figcaption{font-size:1.4rem}html[data-layout=portrait] .hero.hero-logo-only{grid-template-columns:1fr 1fr;grid-template-rows:200px auto auto;min-height:340px;margin-block:15px}html[data-layout=portrait] .hero .main-logo{width:170px;height:170px;max-width:100%}html[data-layout=portrait] .hero .layout-intro{font-size:1rem;padding:0 10px 16px}html[data-layout=portrait] .hero .layout-photo{min-height:340px}html[data-layout=portrait] .hero figcaption{font-size:1.5rem;left:12px}html[data-layout=portrait] .hero .hero-actions{padding:0 8px 20px;gap:10px}html[data-layout=portrait] .hero .hero-actions .primary{font-size:13px;padding:10px}html[data-layout=portrait] .hero .hero-actions .underlink{font-size:12px}html[data-layout]:not([data-layout=current]) .section-title h2{font-size:2.2rem}html[data-layout]:not([data-layout=current]) .review-viewport{min-height:200px}html[data-layout]:not([data-layout=current]) .review-panel blockquote{font-size:1rem}}

/* Keep the uploaded portraits in natural proportions and place the crop around the face. */
html[data-layout=editorial] .layout-photo img{object-position:50% 24%}html[data-layout=studio] .layout-photo img{object-position:50% 26%}html[data-layout=portrait] .layout-photo img{object-position:42% 8%}

/* Equal emphasis for the three core services in every layout. */
html[data-layout=current] .layout-intro{display:block;text-align:center;color:var(--accent);font:1.4rem/1.3 NimbusRoman,Georgia,serif;margin:0 0 8px}.site-header .brand small{white-space:normal;line-height:1.4;max-width:285px;letter-spacing:.1em}.layout-photo figcaption{font-size:1.9rem;line-height:1.1}html[data-layout=portrait] .hero figcaption{font-size:clamp(1.5rem,3vw,2.8rem)}@media(max-width:650px){.layout-photo figcaption,html[data-layout=studio] .hero figcaption,html[data-layout=portrait] .hero figcaption{font-size:1.05rem;line-height:1.2;left:12px;right:8px}.site-header .brand small{max-width:205px;font-size:10px}html[data-layout=editorial] .hero .layout-intro{font-size:1.2rem}html[data-layout=studio] .hero .layout-intro{font-size:1.35rem}}

/* Opening: the approved logo and client reviews share the first row. */
.opening-row{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:5%;align-items:center;padding-block:20px 26px}
.opening-row>.hero.wrap,.opening-row>.reviews-section.wrap{width:100%;margin:0;min-width:0}
.opening-row>.reviews-section{padding:0}
.opening-row .review-viewport{text-align:left;min-height:235px}
.opening-row .review-panel{width:100%}
html[data-layout=studio] .opening-row{grid-column:1/-1;grid-row:1;width:100%}
@media(max-width:700px){.opening-row{grid-template-columns:1fr;gap:12px;padding-block:6px 20px}.opening-row .review-viewport{min-height:200px}.opening-row .review-bottom{flex-wrap:wrap;gap:12px}.opening-row .hero-actions{margin:0}}