/* Planning experiences share the site's Light Forest, Ruby and Gold tokens. */
.planning-index{display:flex;flex-wrap:wrap;gap:12px 24px;margin:24px 0 0;padding:0;list-style:none}
.planning-index a{color:var(--color-forest-deep);text-underline-offset:5px}
.platform-intro .section-header{margin-bottom:40px}
.platform-tools{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.platform-card{position:relative;display:flex;flex-direction:column;align-items:flex-start;padding:clamp(24px,4vw,52px);background:var(--color-paper);border:1px solid var(--color-line-green);border-top:3px solid var(--color-gold);min-width:0}
.platform-card h3{margin:16px 0;font-size:clamp(1.8rem,3vw,2.7rem)}
.platform-card p{color:var(--color-ink-soft);max-width:46ch}
.platform-card .btn{margin-top:auto}
.platform-card .frame{width:100%;margin-bottom:28px;aspect-ratio:16/10;overflow:hidden}
.platform-card .frame img{width:100%;height:100%;object-fit:cover}
.platform-card small{display:block;margin-top:16px;font-size:.75rem;color:var(--color-ink-soft)}
.platform-card:hover{border-color:var(--color-ruby)}
.postcode-entry{margin-top:28px;max-width:570px}
.postcode-start{display:flex;flex-wrap:wrap;align-items:end;gap:12px}
.postcode-start .field{flex:1 1 150px}
.postcode-start label{font-size:.8rem;font-weight:600}
.postcode-start input{width:100%;min-height:50px;padding:12px 16px;background:var(--color-paper);color:var(--color-ink);border:1px solid var(--color-field-border);border-radius:var(--radius);font:inherit}
.postcode-start>input{flex:1 1 150px;width:auto;min-width:0}
.postcode-entry>label{display:block;margin-bottom:10px;font-size:.85rem;font-weight:600}
.postcode-start .btn{min-height:50px}
.postcode-entry .hint{display:block;margin-top:10px}
.calc-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(24px,4vw,56px)}
.calc-form,.calc-result{min-width:0}
.calc-result{position:static}
.calc-scenario{padding:16px 0;border-top:1px solid var(--color-line-green)}
.calc-scenario h4{font:500 1.35rem var(--font-display);margin:0 0 8px;color:var(--color-white)}
.calc-scenario p{font-size:.85rem;line-height:1.6;margin:0}
.planner-section{border:0;border-top:1px solid var(--color-line-green);margin:28px 0 0;padding:24px 0 0;min-width:0}
.planner-section legend{font:500 1.55rem var(--font-display);color:var(--color-forest-deep);padding:0 14px 0 0;max-width:100%}
.planner-section .field-grid{margin-top:12px}
.planner-presets{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 22px}
[data-calc-preset]{min-height:44px;border:1px solid var(--color-field-border);background:var(--color-paper);color:var(--color-forest-deep);padding:10px 15px;font:600 .8rem var(--font-body);cursor:pointer;border-radius:var(--radius)}
[data-calc-preset]:hover,[data-calc-preset][aria-pressed="true"]{border-color:var(--color-ruby);background:var(--color-ruby-soft);color:var(--color-ruby-deep)}
.calc-result p,.calc-result li{overflow-wrap:anywhere}
.calc-result dl{margin:20px 0}
.calc-result dt{font-weight:600;margin-top:14px}
.calc-result dd{margin:4px 0 0;color:var(--color-sage)}
.scenario-comparison,.planner-comparison,.calc-comparison{margin-top:40px;min-width:0}
.scenario-grid,.comparison-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.scenario-card,.comparison-card{padding:24px;background:var(--color-paper);border:1px solid var(--color-line-green);min-width:0}
.scenario-card h3,.comparison-card h3{font-size:1.5rem;margin-bottom:12px}
.scenario-card p,.comparison-card p{font-size:.9rem;color:var(--color-ink-soft)}
.studio-layout{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:clamp(24px,4vw,56px);align-items:start}
.studio-controls{min-width:0;background:var(--color-white);padding:clamp(20px,3.5vw,44px);border-top:3px solid var(--color-ruby);box-shadow:var(--shadow-soft)}
.studio-controls fieldset{border:0;padding:0;margin:24px 0;min-width:0}
.studio-controls legend{font:500 clamp(1.7rem,3vw,2.3rem)/1.15 var(--font-display);color:var(--color-forest-deep);padding:0;margin-bottom:20px;max-width:100%}
.studio-step-label{font:700 .72rem var(--font-body);letter-spacing:.14em;text-transform:uppercase;color:var(--color-ruby);margin-bottom:14px}
.studio-progress{width:100%;height:6px;border:0;appearance:none;background:var(--color-sage)}
.studio-progress::-webkit-progress-bar{background:var(--color-sage)}
.studio-progress::-webkit-progress-value{background:var(--color-ruby)}
.studio-progress::-moz-progress-bar{background:var(--color-ruby)}
.studio-option-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.studio-option{display:flex;flex-direction:column;align-items:flex-start;gap:9px;text-align:left;min-height:76px;padding:18px;border:1px solid var(--color-field-border);border-radius:var(--radius);background:var(--color-paper);color:var(--color-forest-deep);font:600 .92rem/1.4 var(--font-body);cursor:pointer;transition:background var(--dur-fast),border-color var(--dur-fast),transform var(--dur-fast)}
.studio-option small{font-weight:400;color:var(--color-ink-soft)}
.studio-option:hover{border-color:var(--color-ruby);transform:translateY(-2px)}
.studio-option[aria-pressed="true"]{border-color:var(--color-ruby);background:var(--color-ruby-soft);box-shadow:inset 0 0 0 1px var(--color-ruby);color:var(--color-ruby-deep)}
.studio-option:focus-visible,[data-calc-preset]:focus-visible{outline:3px solid var(--color-forest-deep);outline-offset:3px}
.studio-swatch{display:block;width:100%;height:38px;border:1px solid var(--color-line);background:var(--color-sage)}
/* Material colour samples describe selections, rather than UI brand colours. */
.studio-palette-warm-neutral,.studio-swatch-warm-neutral{--sample-0:#E9DFCE;--sample-1:#AE9278;--sample-2:#554C42}
.studio-palette-sage-cream,.studio-swatch-sage-cream{--sample-0:#F4EFE3;--sample-1:#A8B3A0;--sample-2:#304B3F}
.studio-palette-stone-charcoal,.studio-swatch-stone-charcoal{--sample-0:#DFDBD3;--sample-1:#96928C;--sample-2:#393D3C}
.studio-palette-coastal-sand,.studio-swatch-coastal-sand{--sample-0:#F1E9D9;--sample-1:#CAB99D;--sample-2:#708A8A}
.studio-swatch[class*="studio-swatch-"]{background:linear-gradient(90deg,var(--sample-0) 0 33.33%,var(--sample-1) 33.33% 66.66%,var(--sample-2) 66.66%)}
.studio-colour-0{background:var(--sample-0)}
.studio-colour-1{background:var(--sample-1)}
.studio-colour-2{background:var(--sample-2)}
.studio-preview{min-width:0;position:static;background:var(--color-paper);border:1px solid var(--color-line-green);padding:clamp(20px,3vw,34px)}
.studio-controls>.text-link{display:inline-flex;align-items:center;min-height:44px;margin-top:20px;padding:8px 0;background:transparent;border:0;border-bottom:1px solid var(--color-ruby);border-radius:0;color:var(--color-ruby-deep);font:600 .82rem var(--font-body);cursor:pointer}
.studio-preview figure{margin:0}
.studio-concept-image{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.studio-preview figcaption{font-size:.74rem;line-height:1.5;color:var(--color-ink-soft);margin:10px 0 24px}
.studio-preview h2,.studio-preview h3{font-size:1.8rem;margin:20px 0 14px}
.studio-palette{display:flex;min-height:76px;border:1px solid var(--color-line)}
.studio-palette>.studio-colour{flex:1;min-width:0;display:flex;align-items:end;padding:8px;overflow-wrap:anywhere}
.studio-colour>span{padding:3px 5px;background:var(--color-paper);color:var(--color-ink);font-size:.65rem;font-weight:600;line-height:1.4}
.studio-material-swatch{display:block;width:100%;height:44px;border:1px solid var(--color-line);background:var(--color-sage)}
.studio-material-chip .studio-material-swatch{width:40px;height:32px;margin-bottom:6px}
.material-none{background:var(--color-paper);border-style:dashed}
.material-timber,.material-timber-look,.material-engineered-timber,.material-fluted{background:repeating-linear-gradient(90deg,var(--color-gold-pale),var(--color-gold-pale) 7px,var(--color-gold-light) 8px,var(--color-gold-pale) 10px)}
.material-stone,.material-natural-stone,.material-quartz,.material-porcelain{background:repeating-linear-gradient(155deg,var(--color-paper),var(--color-paper) 24px,var(--color-line) 25px,var(--color-paper) 27px)}
.material-painted{background:var(--color-sage)}
.material-textured{background:repeating-linear-gradient(35deg,var(--color-paper),var(--color-paper) 2px,var(--color-line) 3px,var(--color-paper) 4px)}
.material-brass{background:linear-gradient(100deg,var(--color-gold-ink),var(--color-gold-pale),var(--color-gold))}
.material-chrome,.material-brushed-nickel{background:linear-gradient(100deg,var(--color-ink-soft),var(--color-white),var(--color-line))}
.material-matte-black{background:var(--color-ink)}
.studio-materials{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0}
.studio-material-chip{padding:8px 12px;background:var(--color-sage);color:var(--color-forest-deep);border:1px solid var(--color-line-green);font-size:.78rem;overflow-wrap:anywhere}
.studio-actions{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-top:28px}
.studio-actions .btn{min-height:48px}
.studio-summary{margin-top:28px;padding-top:24px;border-top:1px solid var(--color-line-green)}
.studio-summary-list{margin:0}
.studio-summary-row{display:grid;grid-template-columns:minmax(100px,.8fr) minmax(0,1.2fr);gap:16px;padding:12px 0;border-bottom:1px solid var(--color-line-green);font-size:.85rem;line-height:1.6}
.studio-summary-row dt{font-weight:600;color:var(--color-forest-deep)}
.studio-summary-row dd{margin:0;color:var(--color-ink-soft);overflow-wrap:anywhere}
.case-study{padding:clamp(24px,4vw,48px);border:1px solid var(--color-line-green);background:var(--color-paper);margin-top:28px}
.case-study-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(24px,4vw,48px);align-items:start}
.case-study-grid:has(>.case-study){grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.case-study-grid>.case-study{padding:20px;margin-top:24px;height:100%}
.case-study-grid>.case-study .frame{aspect-ratio:4/3;overflow:hidden;margin-bottom:22px}
.case-study-grid>.case-study img{height:100%;object-fit:cover}
.case-study-grid>.case-study h3{font-size:1.8rem}
.case-study-grid img{display:block;width:100%;height:auto}
.case-study-meta{font-size:.8rem;color:var(--color-ink-soft);line-height:1.8}
.case-study-meta dt{font-weight:600;color:var(--color-forest-deep)}
.case-study-meta dd{margin:0 0 12px}
.case-study-content{min-width:0}
.case-study-content h3{font-size:clamp(1.8rem,3vw,2.7rem)}
.planning-review{padding:20px;background:var(--color-sage);border:1px solid var(--color-line-green);margin-bottom:28px;min-width:0}
.planning-review h2{font-size:1.7rem;margin:0 0 8px}
.planning-review>p{font-size:.85rem;line-height:1.6;margin-bottom:14px;color:var(--color-ink-soft)}
.planning-review details{border-top:1px solid var(--color-line-green);border-bottom:1px solid var(--color-line-green);margin:12px 0}
.planning-review summary{min-height:44px;padding:12px 0;font-size:.85rem;font-weight:600;color:var(--color-forest-deep);cursor:pointer}
.planning-review dl{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:8px 16px;font-size:.8rem;line-height:1.5;margin:12px 0 18px}
.planning-review dt{font-weight:600;color:var(--color-forest-deep);min-width:0;overflow-wrap:anywhere}
.planning-review dd{margin:0;color:var(--color-ink-soft);min-width:0;overflow-wrap:anywhere}
.planning-review>a{display:inline-flex;align-items:center;min-height:44px;margin-right:18px;font-size:.8rem;font-weight:600;color:var(--color-ruby-deep);text-decoration:underline;text-underline-offset:4px}
.planning-review>.btn{min-height:44px;font-size:.75rem;padding:10px 14px;margin:6px 8px 0 0}
@media(max-width:390px){.planning-review{padding:16px}.planning-review dl{grid-template-columns:1fr;gap:3px}.planning-review dd{margin-bottom:10px}.planning-review>.btn{width:100%;margin-right:0}}
@media(max-width:1020px){.calc-grid,.studio-layout{grid-template-columns:1fr}.studio-preview{position:static}.scenario-grid,.comparison-grid{grid-template-columns:1fr}.studio-preview{max-width:100%}}
@media(min-width:871px) and (max-width:1500px){.nav{gap:14px}.nav a{font-size:.76rem;letter-spacing:0}.nav-inner{gap:18px}.nav-actions{gap:12px}.call-top{display:none}}
@media(max-width:700px){.platform-tools,.case-study-grid,.case-study-grid:has(>.case-study){grid-template-columns:1fr}.platform-card{padding:24px}.studio-option-grid{gap:9px}.studio-option{padding:14px;font-size:.85rem}.studio-actions .btn{flex:1 1 140px}.postcode-start .btn{flex:1 1 180px}.studio-summary-row{grid-template-columns:1fr;gap:3px}.planner-section legend{font-size:1.35rem}}
@media(max-width:375px){.studio-option-grid{grid-template-columns:1fr}.calc-form,.calc-result{padding:22px 18px}.studio-controls,.studio-preview{padding:20px 16px}}
@media(prefers-reduced-motion:reduce){.studio-option{transition:none}.studio-option:hover{transform:none}}
@media print{.studio-controls,.studio-actions,.postcode-entry,.planning-index{display:none!important}.studio-layout,.case-study-grid{display:block}.studio-preview{position:static;border:0;box-shadow:none;padding:0}.studio-concept-image{max-height:250px;object-fit:contain}.studio-summary-row{break-inside:avoid}.studio-palette,.studio-swatch{print-color-adjust:exact;-webkit-print-color-adjust:exact}.calc-grid{display:block}.calc-form{display:none}.calc-result{position:static;color:var(--color-ink);background:var(--color-white);border:1px solid var(--color-line)}.calc-result *{color:var(--color-ink)!important}}

/* Bathroom style selector: six photographed directions as a responsive card grid */
.style-step-intro{max-width:62ch;margin:14px 0 0;color:var(--color-ink-soft);line-height:1.7}
.style-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.8vw,24px);margin-top:26px}
.style-card{position:relative;display:block;width:100%;padding:0;aspect-ratio:4/5;overflow:hidden;border:0;border-radius:var(--radius);background:var(--color-forest-deep);color:var(--color-white);text-align:left;cursor:pointer;isolation:isolate;box-shadow:var(--shadow-soft);transition:transform .45s var(--ease-out),box-shadow .45s var(--ease-out)}
.style-card-media,.style-card-media img{position:absolute;inset:0;display:block;width:100%;height:100%}
.style-card-media img{object-fit:cover;transition:transform .9s var(--ease-out)}
.style-card::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(7,62,43,0) 50%,rgba(7,62,43,.52) 74%,rgba(7,62,43,.9) 100%)}
.style-card-body{position:absolute;z-index:2;left:0;right:0;bottom:0;display:grid;gap:6px;padding:clamp(16px,2vw,24px)}
.style-card-title{font:500 clamp(1.45rem,2vw,1.85rem)/1.1 var(--font-display);transition:color .3s}
.style-card-note{font:400 .84rem/1.5 var(--font-body);color:#F3EEDD}
.style-card-tag{position:absolute;z-index:2;top:12px;left:12px;padding:4px 8px;background:rgba(251,249,243,.94);color:var(--color-forest-deep);font:700 .62rem var(--font-body);letter-spacing:.12em;text-transform:uppercase}
.style-card-check{position:absolute;z-index:2;top:10px;right:10px;display:none;width:34px;height:34px;border-radius:50%;background:var(--color-gold);border:2px solid var(--color-white)}
.style-card-check::after{content:"";position:absolute;left:10px;top:5px;width:8px;height:14px;border:solid var(--color-forest-deep);border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.style-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift)}
.style-card:hover .style-card-media img{transform:scale(1.045)}
.style-card[aria-pressed="true"]{box-shadow:0 0 0 3px var(--color-ruby),0 0 0 6px var(--color-gold),var(--shadow-lift)}
.style-card[aria-pressed="true"] .style-card-title{color:var(--color-gold-pale)}
.style-card[aria-pressed="true"] .style-card-check{display:block;animation:style-check .38s var(--ease-out)}
.style-card:focus-visible{outline:3px solid var(--color-forest-deep);outline-offset:9px}
.style-selection-note{margin:22px 0 0;font-size:.9rem;line-height:1.6;color:var(--color-ink-soft)}
.style-selection-note strong{color:var(--color-ruby-deep)}
.studio-style-image{object-position:50% 55%;animation:style-fade .6s var(--ease-out)}
.studio-layout--styles{grid-template-columns:1fr}
.studio-layout--styles .studio-preview{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:clamp(20px,4vw,48px);align-items:start}
.studio-layout--styles .studio-style-image{aspect-ratio:4/5}
@keyframes style-check{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1)}}
@keyframes style-fade{from{opacity:0;transform:scale(1.02)}to{opacity:1;transform:none}}
@media(max-width:1020px){.style-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.studio-layout--styles .studio-preview{grid-template-columns:1fr}}
@media(max-width:600px){.style-grid{grid-template-columns:1fr}.style-card{aspect-ratio:1/1}.style-card:focus-visible{outline-offset:7px}}
@media(prefers-reduced-motion:reduce){.style-card,.style-card-media img,.style-card-title{transition:none}.style-card:hover,.style-card:hover .style-card-media img{transform:none}.style-card[aria-pressed="true"] .style-card-check,.studio-style-image{animation:none}}