/* Background photo and live text share the hero, without baking type into the original. */
.hero.hero--immersive{position:relative;isolation:isolate;overflow:hidden;background:#111;color:#fff;padding:0}
.hero--immersive .hero-backdrop{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:58% 60%;max-width:none}
.hero--immersive::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(0,0,0,.76) 0%,rgba(0,0,0,.58) 40%,rgba(0,0,0,.18) 78%),linear-gradient(0deg,rgba(0,0,0,.48),transparent 42%)}
.hero-overlay-content{position:relative;display:flex;flex-direction:column;justify-content:space-between;min-height:clamp(660px,82svh,880px);padding-top:64px;padding-bottom:26px}
.hero-overlay-copy{max-width:660px;min-width:0;padding-bottom:42px}
.hero--immersive .eyebrow{color:#eee;margin-bottom:24px}
.hero--immersive h1{font-family:var(--sans);font-size:clamp(3rem,5.6vw,5.25rem);font-weight:400;font-synthesis:none;line-height:1.15;letter-spacing:-.015em;margin:0 0 28px;color:#fff}
.hero--immersive h1 span{display:block}
.hero--immersive .hero-title{font-family:var(--sans);font-size:clamp(1.375rem,2vw,1.75rem);font-weight:500;line-height:1.6;margin:0 0 12px;color:#fff}
.hero--immersive .hero-lead{font-size:1rem;line-height:1.9;color:#eee;margin-bottom:28px}
.hero--immersive .hero-customize{background:#fff;color:#151515;border:1px solid #fff;min-height:56px;min-width:240px;font-size:1rem;font-weight:500;padding:15px 26px;gap:48px}
.hero--immersive .hero-customize:hover{background:#ddd;border-color:#ddd}
.hero--immersive .hero-customize:focus-visible{outline-color:#fff}
.hero-preview-hint{font-size:.875rem;line-height:1.8;color:#eee;margin-top:12px}
.hero-overlay-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;padding-top:20px;border-top:1px solid rgba(255,255,255,.35);font-size:.875rem;line-height:1.8;color:#eee}
.hero-overlay-bottom a{display:inline-flex;gap:28px}

body.frame-preview-open{overflow:hidden}
.frame-customizer{border:0;margin:auto;padding:0;width:min(1200px,96vw);max-width:96vw;height:min(900px,94dvh);max-height:94dvh;background:#fff;color:#151515;overflow:hidden}
.frame-customizer[open]{display:flex;flex-direction:column}
.frame-customizer::backdrop{background:rgba(0,0,0,.78)}
.customizer-header{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px 32px;border-bottom:1px solid #d5d5d5;flex-shrink:0}
.customizer-header .eyebrow{margin-bottom:4px}
.customizer-header h2{font:500 1.5rem/1.5 var(--sans);letter-spacing:.025em}
.customizer-close{border:1px solid #bbb;background:#fff;padding:9px 16px;min-height:44px;font-size:.875rem;white-space:nowrap}
.customizer-layout{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(320px,1fr);min-height:0;flex:1}
.customizer-stage{display:flex;flex-direction:column;justify-content:center;align-items:center;min-width:0;min-height:0;background:#eee;padding:28px}
#frame-preview-canvas{display:block;width:100%;height:auto;max-height:calc(94dvh - 290px);min-height:0;object-fit:contain}
.preview-description{font-size:.875rem;line-height:1.8;margin-top:16px;text-align:center;overflow-wrap:anywhere}
.preview-disclaimer{font-size:.875rem;line-height:1.8;color:#656565;margin-top:10px;text-align:center;max-width:440px}
.customizer-controls{padding:28px 32px;overflow-y:auto;min-height:0;overscroll-behavior:contain}
.customizer-controls fieldset{min-width:0;margin:0 0 28px;padding:0;border:0}
.customizer-controls legend{font-size:1rem;font-weight:500;margin-bottom:14px;padding:0}
.preview-upload{display:block;position:relative;padding:16px;border:1px dashed #777;font-size:.875rem;line-height:1.7;text-align:center;cursor:pointer}
.preview-upload input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer}
.preview-upload:focus-within{outline:3px solid #777;outline-offset:3px}
.preview-help,.preview-source-label,.preview-status{font-size:.875rem;line-height:1.75;color:#656565;margin-top:10px}
.preview-status:empty{display:none}
.preview-status[data-error=true]{color:#151515;font-weight:500}
.preview-examples{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.preview-examples button,.preview-reset{font-size:.875rem;line-height:1.6;padding:8px 12px;min-height:44px;background:#fff;border:1px solid #ccc}
.preview-examples button[aria-pressed=true]{background:#151515;color:#fff;border-color:#151515}
.preview-options{display:flex;flex-wrap:wrap;gap:8px}
.preview-options label{position:relative;cursor:pointer}
.preview-options input{position:absolute;opacity:0;width:100%;height:100%;margin:0}
.preview-options label>span{display:flex;align-items:center;gap:9px;border:1px solid #ccc;min-height:44px;padding:9px 12px;font-size:.875rem;line-height:1.6}
.preview-options input:checked+span{border:2px solid #151515;padding:8px 11px;font-weight:500;background:#f1f1f1}
.preview-options input:focus-visible+span{outline:3px solid #777;outline-offset:3px}
.preview-swatch{width:18px;height:18px;border:1px solid #aaa;display:block;flex:none}
.swatch-black{background:#171717}.swatch-white{background:#fff}.swatch-graphite{background:#555}.swatch-light{background:#dedede}.swatch-dark{background:#333}
.preview-range-label{display:flex;justify-content:space-between;gap:16px;font-size:.875rem}
.preview-range-label output{font-variant-numeric:tabular-nums}
.customizer-controls input[type=range]{width:100%;height:40px;accent-color:#151515;margin:6px 0 0;cursor:pointer}
.preview-select-label{display:block;font-size:.875rem;margin:18px 0 8px}
.customizer-controls select{display:block;width:100%;min-height:44px;font:400 1rem/1.6 var(--sans);background:#fff;color:#151515;padding:8px 12px;border:1px solid #bbb;border-radius:0}
.preview-actions{display:flex;flex-direction:column;gap:10px}
.preview-reset{border-color:transparent;text-decoration:underline;text-underline-offset:4px}
@media(max-width:760px){
  .hero-overlay-content{min-height:660px;padding-top:48px;padding-bottom:24px}
  .hero--immersive .hero-backdrop{object-position:65% 55%}
  .hero--immersive::after{background:linear-gradient(90deg,rgba(0,0,0,.74),rgba(0,0,0,.38)),linear-gradient(0deg,rgba(0,0,0,.5),transparent)}
  .hero-overlay-copy{padding-bottom:36px}
  .hero--immersive h1{font-size:clamp(2rem,11.8vw,4.25rem);margin-bottom:24px}
  .hero--immersive .hero-title{font-size:1.375rem}
  .hero--immersive .hero-lead br{display:none}
  .hero-overlay-bottom{flex-direction:column;font-size:.875rem;gap:10px}
  .frame-customizer{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh}
  .customizer-header{padding:16px 5%;gap:12px}.customizer-header h2{font-size:1.25rem}
  .customizer-layout{display:block;overflow:auto;overscroll-behavior:contain}
  .customizer-stage{padding:20px 5%}.customizer-controls{padding:28px 5%;overflow:visible}
  #frame-preview-canvas{max-height:46dvh}
}

/* 3.9: material samples and independent outer-to-inner mat layers. */
.frame-customizer{width:min(1320px,96vw)}
.customizer-layout{grid-template-columns:minmax(0,1.35fr) minmax(360px,1fr)}
.customizer-stage{overflow-y:auto;justify-content:flex-start}
#frame-preview-canvas{flex-shrink:0;max-height:calc(94dvh - 290px)}
.preview-composition-title{font-size:1rem;font-weight:500;line-height:1.6;margin-top:14px;text-align:center}
.preview-composition,.preview-disclaimer-wrap{max-width:100%;width:100%;font-size:.875rem;line-height:1.75;text-align:center;margin-top:10px}
.preview-composition summary,.preview-disclaimer-wrap summary,.material-reference summary{cursor:pointer;min-height:28px;list-style-position:inside}
.preview-description{text-align:left;margin-top:8px;max-height:130px;overflow:auto;white-space:normal}
.preview-disclaimer{margin:8px auto 0;max-width:100%;text-align:left}
.preview-material-status{font-size:.875rem;line-height:1.7;margin-top:8px;text-align:center}
.preview-material-status:empty{display:none}
.material-swatches{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:16px}
.material-swatch{display:flex;flex-direction:column;align-items:stretch;min-width:0;padding:5px;border:1px solid #ccc;background:#fff;text-align:center;gap:6px}
.material-swatch img{width:100%;aspect-ratio:1.8;object-fit:cover;min-height:32px;background:#eee}
.material-swatch span{font-size:.875rem;line-height:1.45;overflow-wrap:anywhere}
.material-swatch[aria-pressed=true]{border:2px solid #151515;padding:4px;background:#f0f0f0}
.material-swatch[aria-pressed=true] span{font-weight:500}
.material-swatch.sample-unavailable{min-height:72px}
.material-selected{font-size:.875rem;line-height:1.75;margin:12px 0 8px;overflow-wrap:anywhere}
.material-reference{border-top:1px solid #ddd;padding-top:10px;font-size:.875rem;line-height:1.75}
.material-reference img{display:block;width:100%;max-height:220px;object-fit:contain;margin-top:10px;background:#f6f6f6}
.material-reference figcaption{font-size:.875rem;color:#656565;margin-top:8px;line-height:1.7}
.material-chart-link,.layer-sample-link{display:inline-block;font-size:.875rem;line-height:1.7;text-decoration:underline;text-underline-offset:4px;padding:8px 0}
.customizer-controls .layer-design{margin-bottom:18px}
.customizer-controls .mat-layer{padding:18px;margin-bottom:20px;border:1px solid #bfbfbf;background:#fafafa}
.mat-layer .layer-title{padding:0 8px;margin:0 0 4px;font-size:1rem;font-weight:500}
.mat-layer .preview-select-label{margin-top:4px}
.mat-layer .material-swatches{gap:7px}
.mat-layer .material-swatch{background:#fff}
.plain-color-row{display:grid;grid-template-columns:100px minmax(0,1fr);gap:18px;margin-top:16px;align-items:end}
.plain-color-row label{display:block;font-size:.875rem;line-height:1.6;margin-bottom:8px}
.layer-color{width:100%;height:48px;border:1px solid #aaa;padding:4px;background:#fff;cursor:pointer;border-radius:0}
.layer-hex{width:100%;height:48px;border:1px solid #aaa;padding:9px 12px;background:#fff;color:#151515;font:400 1rem/1.6 var(--sans);border-radius:0}
.layer-width-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:20px;font-size:.875rem;line-height:1.6}
.layer-number-wrap{display:flex;align-items:center;gap:5px}
.layer-number{width:76px;min-height:44px;border:1px solid #aaa;background:#fff;color:#151515;font:400 1rem/1.6 var(--sans);padding:6px 8px;border-radius:0}
.mat-layer input:focus-visible,.customizer-controls select:focus-visible{outline:3px solid #777;outline-offset:3px}
.mat-layer input[aria-invalid=true]{outline:2px dashed #555;outline-offset:2px}
.layer-error{font-size:.875rem;font-weight:500;line-height:1.7;margin-top:8px}
.layer-error:empty{display:none}
@media(max-width:760px){
  .customizer-layout{display:flex;flex-direction:column;overflow:hidden}
  .customizer-stage{flex:0 0 auto;max-height:42dvh;padding:12px 5%;overflow-y:auto}
  #frame-preview-canvas{max-height:24dvh}
  .preview-composition-title{margin-top:8px;font-size:.875rem}
  .preview-composition,.preview-disclaimer-wrap{margin-top:5px}
  .customizer-controls{flex:1;min-height:0;overflow-y:auto;padding:24px 5%}
  .customizer-controls .mat-layer{padding:12px}
  .material-swatches{gap:8px}
  .plain-color-row{grid-template-columns:88px minmax(0,1fr);gap:12px}
}

/* 4.0: physical sizing and portable customer plans. */
.art-size-fields{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:end;gap:12px;margin:16px 0}
.art-size-fields label{display:block;font-size:.875rem;margin-bottom:6px}
.art-size-fields>span{padding-bottom:10px}
.art-size-fields input,#frame-width{width:100%;min-height:46px;padding:8px 12px;border:1px solid #aaa;border-radius:0;background:#fff;color:#151515;font:400 1rem/1.6 var(--sans)}
.art-size-fields input:focus-visible,#frame-width:focus-visible{outline:3px solid #777;outline-offset:3px}
#frame-width:disabled{background:#eee;color:#444;opacity:1}
.image-fit-options{margin-top:18px}
.physical-size-summary{font-size:.875rem;line-height:1.75;text-align:center;margin-top:6px}
.preview-upload{margin-top:16px}
.plan-save{border-top:1px solid #bbb!important;padding-top:20px!important;margin-top:28px!important}
.plan-save-buttons{display:grid;grid-template-columns:1fr;gap:10px}
.plan-save-buttons .button{justify-content:center;text-align:center}
.plan-save-buttons button:disabled{opacity:.55;cursor:wait}
.plan-save .material-chart-link{display:block;overflow-wrap:anywhere}
.plan-save .material-chart-link[hidden]{display:none}
.layer-width-header{align-items:center}
.layer-number-wrap{flex-shrink:0}

/* 4.1: centimeter inputs and optional four-edge synchronization. */
.layer-spacing-header{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-top:20px;font-size:.875rem}
.layer-spacing-header p{margin:0;font-weight:500}
.layer-sync-label{display:flex;align-items:center;gap:8px;min-height:44px;cursor:pointer;white-space:nowrap}
.layer-sync{width:20px;height:20px;accent-color:#151515}
.layer-edge-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:14px}
.layer-edge-fields label{display:block;font-size:.875rem;line-height:1.6;margin-bottom:6px}
.layer-edge-number{display:block;width:100%;min-width:0;min-height:46px;border:1px solid #aaa;border-radius:0;background:#fff;color:#151515;padding:8px 12px;font:400 1rem/1.6 var(--sans)}
.frame-kind-options{flex-wrap:wrap}
.material-chart-link[hidden]{display:none}

/* 4.3: upload first, confirm a measured short edge, optional reversible free crop. */
#frame-preview-canvas[hidden],#frame-side-canvas[hidden],#preview-view-controls[hidden],.art-crop-editor[hidden],.preview-empty[hidden]{display:none}
.preview-empty{width:100%;padding:80px 24px;border:1px dashed #aaa;text-align:center;font-size:1rem;line-height:1.8}
#art-short-side{display:block;width:100%;min-height:48px;padding:8px 12px;border:1px solid #aaa;border-radius:0;background:#fff;color:#151515;font:400 1rem/1.6 var(--sans)}
#art-short-side:focus-visible{outline:3px solid #777;outline-offset:3px}
#art-short-side:disabled{background:#eee}
.art-size-result{font-size:1rem;font-weight:500;line-height:1.8;margin:14px 0}
#confirm-art-size{width:100%;justify-content:center}
#confirm-art-size:disabled,#open-art-crop:disabled{opacity:.5;cursor:not-allowed}
.example-picker{font-size:.875rem;line-height:1.8;margin-top:10px}
.example-picker summary{cursor:pointer;padding:8px 0}
.art-crop-editor{margin:16px 0;padding:12px;background:#f3f3f3;border:1px solid #bbb}
#art-crop-canvas{display:block;width:100%;height:auto;margin:12px 0;touch-action:none;cursor:crosshair}
.crop-number-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.crop-number-fields label{font-size:.875rem;line-height:1.6}
.crop-number-fields input{display:block;width:100%;min-width:0;min-height:44px;padding:8px;border:1px solid #aaa;border-radius:0;color:#151515;background:#fff;font:400 1rem/1.6 var(--sans)}
.crop-number-fields input:focus-visible{outline:3px solid #777;outline-offset:2px}
.crop-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.crop-actions .button{width:100%;justify-content:center}
.crop-actions button:disabled{opacity:.5;cursor:not-allowed}

/* 4.9: quiet studio photography and a centered, static introduction. */
.hero.hero--centered{display:flex;flex-direction:column;min-height:clamp(660px,82svh,880px)}
.hero.hero--centered::after{background:linear-gradient(180deg,rgba(0,0,0,.42),rgba(0,0,0,.56) 45%,rgba(0,0,0,.55))}
.hero--centered .hero-overlay-content{flex:1;min-height:0;padding-top:1.5rem;padding-bottom:1rem}
.hero--centered .hero-overlay-copy{display:flex;flex:1;flex-direction:column;align-items:center;justify-content:center;width:100%;max-width:none;text-align:center;padding:2rem 0}
.hero.hero--centered h1.hero-title{display:block;width:100%;font-family:var(--sans);font-size:clamp(1.5rem,2.4vw,2.25rem);font-weight:500;line-height:1.4;letter-spacing:.04em;margin:0 0 .75rem;overflow-wrap:anywhere}
.hero--centered .hero-lead{max-width:42rem}
.hero.hero--centered .hero-customize{justify-content:center;width:auto;max-width:100%;min-width:0;gap:1.25rem;text-align:center;padding:1rem 1.75rem}
.hero--centered .hero-customize span{flex-shrink:0}
.hero-customize-icon{display:block;flex:0 0 20px;width:20px;height:20px;color:inherit}
.hero--centered .hero-overlay-bottom{justify-content:center;align-items:center;gap:.5rem 2rem;text-align:center}
/* 5.0: view controls, local colour suggestion and original contact QR. */
#frame-side-canvas{display:block;width:100%;height:auto;max-height:calc(94dvh - 335px);min-height:0;object-fit:contain;flex-shrink:0}
.preview-view-controls{display:flex;justify-content:center;flex-wrap:wrap;gap:4px;margin-bottom:10px;flex-shrink:0}
.preview-view-controls button{border:1px solid #aaa;background:transparent;color:#333;padding:8px 14px;min-height:40px;font-size:.8125rem;line-height:1.4}
.preview-view-controls button[aria-pressed=true]{background:#171717;border-color:#171717;color:#fff}
.style-suggestion-panel{border-left:2px solid #222;padding:0 0 0 12px;margin:16px 0}
.style-suggestion-panel .preview-reset{padding-left:0;font-size:.8125rem}
.contact-card .contact-qr{display:flex;align-items:center;gap:18px;margin:20px 0 0;border-top:1px solid #666;padding-top:20px}
.contact-card .contact-qr img{display:block;width:152px;height:auto;max-width:50%;padding:14px;background:transparent;flex-shrink:0}
.contact-card .contact-qr figcaption{font-size:.8125rem;line-height:1.5;max-width:10em}
@media(max-width:760px){
  #frame-side-canvas{max-height:24dvh}
  .hero.hero--centered{min-height:660px}
  .hero--centered .hero-overlay-content{min-height:0;padding-top:1rem}
  .hero--centered .hero-overlay-copy{padding:1.5rem 0}
  .hero--centered .hero-overlay-bottom{row-gap:.5rem}
}