.metal-hero{position:relative;isolation:isolate;display:grid;grid-template-columns:.9fr 1.1fr;background:#111519;color:#f6f2eb;min-height:720px;padding:80px max(40px,calc((100vw - 1360px)/2)) 100px;overflow:hidden}.metal-hero-copy{align-self:center;position:relative;z-index:2;pointer-events:none}.metal-hero-copy a{pointer-events:auto}.metal-hero .kicker{font-size:11px;letter-spacing:.16em;color:#d6a06b}.metal-hero h1{font-size:clamp(58px,5.6vw,92px);line-height:1.02;letter-spacing:-.055em;font-weight:400;margin:30px 0}.metal-hero h1 em{font-family:Georgia,serif;font-weight:400;color:#d6a06b}.metal-intro{font-size:17px;line-height:1.65;max-width:430px;color:#c4c7c9;margin:0 0 30px}.metal-hero .metal-cta{background:#e5b386;color:#15191b;border-color:#e5b386;min-height:56px;padding:16px 25px;gap:35px;font-size:15px;transition:background .2s,transform .2s}.metal-cta:hover{background:#f3cca7!important;transform:translateY(-2px)}.metal-reassurance{font-size:12px;color:#b2b9bd;margin-top:14px}.metal-stage-wrap{position:relative;min-width:0;min-height:500px;margin:-45px -20px -30px -55px}.metal-stage{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 50%,#30363b 0%,#171c21 47%,#111519 74%)}.metal-stage canvas{position:absolute;inset:0;width:100%;height:100%;cursor:grab;touch-action:pan-y}.metal-stage canvas:active{cursor:grabbing}.metal-fallback{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:.8}.metal-stage[data-renderer=ready] .metal-fallback{display:none}.metal-stage-top,.metal-stage-bottom{position:absolute;left:35px;right:25px;display:flex;justify-content:space-between;gap:20px;pointer-events:none}.metal-stage-top{top:12px;align-items:center;font:10px/1.5 monospace;letter-spacing:.12em;color:#9ca6ad}.metal-stage-top button{pointer-events:auto;color:#b9c1c7;background:transparent;border:1px solid #42494f;padding:10px 14px;font:11px monospace;cursor:pointer}.metal-stage-bottom{bottom:60px;align-items:end}.metal-stage-bottom p{font-size:14px;margin:8px 0;color:#ccd1d4}.metal-stage-bottom .kicker{font-size:10px;margin:0}.metal-drag{font:11px monospace;color:#a1aab0;padding-bottom:8px}.metal-finishes{position:absolute;bottom:5px;left:35px;display:flex;gap:8px}.metal-finishes button{display:flex;align-items:center;gap:8px;border:1px solid #40474d;background:transparent;color:#c6cacf;padding:10px 12px;font:11px monospace;cursor:pointer;min-height:44px}.metal-finishes button[aria-pressed=true]{border-color:#dbb187;color:#f7e2cd}.metal-finishes i{width:12px;height:12px;border-radius:50%;background:linear-gradient(135deg,#fff,#66727e);border:1px solid #8f959b}.metal-finishes [data-metal-finish=graphite] i{background:#34383c}.metal-finishes [data-metal-finish=bronze] i{background:#95714d}.metal-hero-foot{position:absolute;bottom:24px;left:max(40px,calc((100vw - 1360px)/2));right:max(40px,calc((100vw - 1360px)/2));border-top:1px solid #343c42;padding-top:20px;display:flex;justify-content:space-between;gap:20px;font:10px/1.6 monospace;letter-spacing:.08em;color:#98a2a9}.metal-hero-foot a{color:#e5ded7;font-size:12px;letter-spacing:0}.metal-work{padding-top:85px;padding-bottom:65px}.metal-section-title{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:45px}.metal-section-title h2,.metal-start h2{font-size:clamp(44px,5vw,72px);line-height:1.04;font-weight:400;letter-spacing:-.045em;margin:18px 0 0}.metal-section-title>p{font-size:16px;line-height:1.6;margin-bottom:6px}.metal-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.metal-card{display:block;text-decoration:none;min-width:0}.metal-card figure{margin:0;aspect-ratio:1;overflow:hidden;background:#252729}.metal-card img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.2,1)}.metal-card:hover img{transform:scale(1.035)}.metal-card>div{padding-top:24px}.metal-card span{font:10px monospace;letter-spacing:.12em;color:var(--muted)}.metal-card h3{display:flex;justify-content:space-between;align-items:start;font-size:clamp(21px,2vw,29px);font-weight:400;letter-spacing:-.035em;line-height:1.2;margin:12px 0}.metal-card b{font-size:24px;font-weight:400;padding-left:8px}.metal-card p{font-size:14px;color:var(--muted);margin:0}.metal-image-note{font-size:11px;color:var(--muted);margin:28px 0 0}.metal-start{border-top:1px solid var(--line);padding-top:60px;padding-bottom:65px}.metal-start ol{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;list-style:none;padding:0;margin:45px 0 0}.metal-start li{border-top:1px solid var(--line);padding-top:20px;font-size:16px}.metal-start li span{display:block;font:11px monospace;color:var(--muted);margin-bottom:20px}.help-quote .quote-enquiry{padding-top:65px;gap:70px}.quote-guidance h2{font-size:clamp(42px,4.5vw,64px);font-weight:400;line-height:1.05;margin:22px 0}.quote-guidance a{display:inline-block;font-size:14px;margin-top:22px}.quote-faq p{max-width:75ch}.help-quote :is(a,button,canvas,summary):focus-visible{outline:2px solid #bd8856;outline-offset:5px}.metal-hero :focus-visible{outline-color:#f3cca7!important}[hidden]{display:none!important}
@media(max-width:1050px){.metal-hero{padding:55px 30px 100px;grid-template-columns:1fr 1fr;min-height:650px}.metal-hero h1{font-size:60px}.metal-stage-wrap{margin-left:-65px}.metal-hero-foot{left:30px;right:30px}.metal-gallery{gap:16px}.metal-card h3{font-size:23px}.help-quote .quote-enquiry{gap:35px}}
@media(max-width:760px){.metal-hero{display:flex;flex-direction:column;padding:36px 22px 90px;min-height:0}.metal-hero h1{font-size:clamp(45px,9.9vw,68px);margin:22px 0}.metal-intro{font-size:15px;margin-bottom:22px;max-width:36ch}.metal-intro br{display:none}.metal-hero-copy{align-self:stretch}.metal-stage-wrap{min-height:380px;height:380px;margin:10px -22px 12px}.metal-stage-top{top:5px;left:22px;right:22px}.metal-stage-bottom{left:22px;right:22px;bottom:57px}.metal-finishes{left:22px;bottom:3px;gap:6px}.metal-finishes button{padding:9px 10px}.metal-hero-foot{left:22px;right:22px;bottom:20px}.metal-hero-foot>span{display:none}.metal-hero-foot a{font-size:12px}.metal-hero .metal-cta{min-height:52px}.metal-work{padding-top:45px;padding-bottom:40px}.metal-section-title{display:block;margin-bottom:28px}.metal-section-title h2,.metal-start h2{font-size:44px}.metal-section-title>p{font-size:14px;margin-top:22px}.metal-gallery{grid-template-columns:1fr;gap:32px}.metal-card figure{aspect-ratio:1.25}.metal-card>div{padding-top:16px}.metal-card h3{font-size:27px}.metal-image-note{line-height:1.6}.metal-start{padding-top:35px;padding-bottom:35px}.metal-start ol{grid-template-columns:1fr;gap:16px;margin-top:30px}.metal-start li{display:flex;gap:22px;font-size:15px;padding-top:16px}.metal-start li span{margin:4px 0 0}.help-quote .quote-enquiry{gap:28px;padding-top:35px}.quote-guidance h2{font-size:46px}}
@media(prefers-reduced-motion:reduce){.metal-card img,.metal-cta{transition:none!important}.metal-card:hover img,.metal-cta:hover{transform:none!important}}

.metal-stage canvas{height:calc(100% - 85px)}
/* STEP preview controls and expanded material stories */
.metal-stage-wrap{min-height:610px;margin-bottom:0}.metal-stage canvas{height:calc(100% - 195px)}.metal-stage-bottom{bottom:164px}.metal-finishes{bottom:112px;flex-wrap:wrap;right:20px}.metal-finishes [data-metal-finish=steel] i{background:linear-gradient(130deg,#727c83,#30383d)}.metal-finishes [data-metal-finish=bronze] i{background:linear-gradient(130deg,#b58d63,#61412d)}.metal-finishes button{font-size:10px;padding:9px}.step-tools{position:absolute;bottom:0;left:35px;right:25px;display:flex;flex-wrap:wrap;align-items:center;gap:9px;font-size:12px}.step-upload,.step-tools button,.step-make{padding:10px 13px;border:1px solid #78828a;background:transparent;color:#e8e2dc;cursor:pointer;text-decoration:none;min-height:42px;display:inline-flex;align-items:center;gap:14px}.step-make{background:#d6a06b;color:#171b1d;border-color:#d6a06b}.step-tools p{flex-basis:100%;font-size:10px;line-height:1.5;color:#aeb8bf;margin:0;min-height:30px}.step-tools:focus-within .step-upload{outline:1px solid #d6a06b}.metal-gallery{display:block}.metal-story{display:grid;grid-template-columns:.7fr 1.3fr;align-items:center;gap:8%;padding:90px 3%;border-top:1px solid var(--line)}.metal-story:nth-child(even){grid-template-columns:1.3fr .7fr}.metal-story:nth-child(even) .metal-story-copy{order:2}.metal-story-copy>span{font:11px monospace;letter-spacing:.15em;color:var(--muted)}.metal-story-copy h3{font-size:clamp(36px,4vw,60px);font-weight:400;letter-spacing:-.04em;line-height:1.05;margin:22px 0}.metal-story-copy p{font-size:16px;color:var(--muted);line-height:1.6}.metal-story-copy a{font-size:14px;margin-top:24px;text-decoration:underline;text-underline-offset:5px}.metal-fan{position:relative;aspect-ratio:1.25;isolation:isolate}.metal-details{display:grid;grid-template-columns:1fr 1fr;gap:24px;padding-bottom:90px}.metal-details>div{grid-column:1/-1;margin-bottom:20px}.metal-details h2{font-size:clamp(40px,5vw,70px);font-weight:400;letter-spacing:-.04em;line-height:1.05;margin:20px 0}.metal-details figure{margin:0}.metal-details img{display:block;width:100%;height:auto}.metal-details figcaption{font-size:14px;margin-top:16px;color:var(--muted)}
@media(max-width:1050px){.metal-finishes{gap:4px}.metal-finishes button{font-size:9px;padding:7px}.metal-stage-wrap{margin-left:-25px}.metal-story{gap:4%;padding:70px 1%}}
@media(max-width:760px){.metal-stage-wrap{height:530px;min-height:530px;margin:20px -22px 15px}.metal-stage canvas{height:calc(100% - 190px)}.step-tools{left:22px;right:22px}.metal-finishes{left:22px;right:10px;bottom:110px;gap:5px}.metal-finishes button{font-size:9px;padding:8px}.metal-stage-bottom{bottom:161px}.metal-drag{font-size:10px}.metal-story,.metal-story:nth-child(even){display:flex;flex-direction:column;gap:30px;padding:40px 0}.metal-story:nth-child(even) .metal-story-copy{order:0}.metal-story-copy{width:100%}.metal-story-copy h3{font-size:39px;max-width:12ch}.metal-fan{width:100%;aspect-ratio:1.1}.metal-details{grid-template-columns:1fr;padding-bottom:45px;gap:30px}.metal-details h2{font-size:44px}}
@media(prefers-reduced-motion:reduce){}
.metal-zoom{position:absolute;top:64px;right:25px;display:flex;align-items:center;gap:7px}.metal-zoom button{background:#151a1fcc;color:#eee;border:1px solid #596169;min-width:32px;min-height:32px;cursor:pointer}.metal-zoom input{width:75px;accent-color:#d6a06b}.metal-story{max-width:1120px;margin:auto;padding:45px 4%;gap:7%;grid-template-columns:.8fr 1.2fr}.metal-story:nth-child(even){grid-template-columns:1.2fr .8fr}.metal-story-copy h3{font-size:clamp(32px,3.3vw,46px)}.metal-fan{max-width:490px;width:100%;aspect-ratio:1.5;justify-self:center;--fan:0}.metal-details{max-width:1120px}.metal-details img{max-height:330px;object-fit:cover}.metal-details h2{font-size:clamp(38px,4vw,54px)}
@media(max-width:760px){.metal-story{padding:32px 0;gap:20px}.metal-fan{max-width:350px;aspect-ratio:1.3}.metal-story-copy h3{font-size:34px;max-width:16ch}.metal-zoom{top:53px;right:22px}.metal-details img{max-height:245px}}

/* Identical clockwise fans; each exposed image is an accessible capability button. */
.metal-story:nth-child(even){grid-template-columns:.8fr 1.2fr}.metal-story:nth-child(even) .metal-story-copy{order:0}
.metal-image-button{display:block;position:relative;border:0;padding:0;background:#24282b;cursor:pointer;width:100%;color:#fff;text-align:left;border-radius:3px}
.metal-image-button img{display:block;width:100%;height:100%;object-fit:cover;border-radius:3px}
.metal-image-button>span{position:absolute;bottom:12px;right:12px;padding:7px 10px;background:#111c;color:#fff;font:11px monospace;border:1px solid #ffffff60}
.metal-fan .metal-image-button{position:absolute;width:68%;height:77%;left:9%;top:9%;z-index:var(--layer);transform-origin:20% 90%;box-shadow:0 18px 35px #0004;transform:translate(calc((2 - var(--layer))*var(--fan)*9%),calc((2 - var(--layer))*var(--fan)*-3%)) rotate(calc((2 - var(--layer))*var(--fan)*10deg))}
.metal-fan .metal-image-button:focus-visible{z-index:4;outline:3px solid #bd8856;outline-offset:4px}
.metal-details .metal-image-button{overflow:hidden}.metal-details .metal-image-button img{height:330px}
.capability-dialog{padding:0;border:1px solid #555;max-width:900px;width:calc(100% - 36px);max-height:90vh;overflow:auto;background:#171c20;color:#f4eee5;box-shadow:0 30px 100px #0008}
.capability-dialog::backdrop{background:#05090dd9}.capability-dialog[open]{display:grid;grid-template-columns:1fr 1fr}.capability-dialog>img{width:100%;height:100%;min-height:450px;object-fit:cover}.capability-close{position:absolute;right:12px;top:12px;z-index:1;background:#151a1f;color:#fff;border:1px solid #879097;padding:12px;cursor:pointer}.capability-content{padding:65px 30px 30px}.capability-content h2{font-size:38px;line-height:1.05;font-weight:400;letter-spacing:-.035em;margin:16px 0 22px}.capability-content p,.capability-content li{font-size:14px;line-height:1.6}.capability-content ul{padding-left:18px}.capability-content li{margin:12px 0}.capability-content .kicker{color:#d6a06b;font-size:10px}.capability-content .capability-note{color:#aab2b8;font-size:11px;margin:24px 0}.capability-content .button{background:#dfae81;color:#171b1e;border-color:#dfae81;font-size:13px}
body:has(.capability-dialog[open]){overflow:hidden}.step-make{font-weight:600;box-shadow:0 0 0 2px #d6a06b33}.step-handoff{border-left:3px solid #bd8856;padding:16px;background:#bd885615;font-size:14px}
@media(max-width:760px){.capability-dialog[open]{grid-template-columns:1fr}.capability-dialog>img{min-height:0;height:220px}.capability-content{padding:25px}.capability-content h2{font-size:32px}.metal-details .metal-image-button img{height:245px}}

/* From a centred stack to a level, left-to-right spread, matching the reference. */
.metal-fan .metal-image-button{width:64%;left:16%;transform:translateX(calc(((2 - var(--layer))*26 - 22)*var(--fan)*1%));transform-origin:center}
.capability-dialog>img{height:100%;max-height:800px;position:sticky;top:0}.capability-dialog{align-items:start}.capability-dialog .capability-content{padding-top:60px}.capability-specs{margin:24px 0}.capability-specs>div{padding:13px 0;border-top:1px solid #ffffff25}.capability-specs dt{font-size:15px;font-weight:600}.capability-specs dd{margin:5px 0 0;font-size:13px;line-height:1.55;color:#c8cdd0}.capability-sources{font-size:12px;line-height:1.6;margin:20px 0}.capability-sources summary{cursor:pointer}.capability-sources a,.capability-full{color:inherit;text-underline-offset:3px}.capability-full{display:block;font-size:12px;margin:20px 0}.capability-directory-link{font-size:14px;margin:30px 0}.capabilities-page{max-width:1080px;padding-top:65px;padding-bottom:60px}.capabilities-page h1{font-size:clamp(42px,6vw,78px);font-weight:400;letter-spacing:-.045em;line-height:1.05}.capabilities-lead{font-size:20px;max-width:65ch;line-height:1.6}.capability-nav{display:flex;flex-wrap:wrap;gap:12px;margin:32px 0}.capability-nav a{padding:12px;border:1px solid var(--line);font-size:14px}.capabilities-page section{padding:45px 0;border-top:1px solid var(--line);scroll-margin-top:30px}.capabilities-page h2{font-size:clamp(30px,4vw,46px);font-weight:400;letter-spacing:-.035em}.capabilities-page .capability-specs{display:grid;grid-template-columns:1fr 1fr;gap:12px 35px}.capabilities-page .capability-specs>div{border-color:var(--line)}.capabilities-page .capability-specs dd{color:var(--muted);font-size:15px}.capabilities-page .capability-note{font-size:13px;line-height:1.6;color:var(--muted)}.capabilities-page section>p{max-width:75ch;line-height:1.6}.capabilities-page .button{margin-top:18px}
@media(max-width:760px){.capability-dialog>img{position:static;height:180px}.capability-dialog .capability-content{padding:25px}.capability-dialog .capability-close{position:sticky;top:8px;grid-column:1;justify-self:end;margin-bottom:-48px;margin-right:10px}.capabilities-page{padding-top:35px}.capabilities-page .capability-specs{grid-template-columns:1fr}.capabilities-lead{font-size:17px}}


/* User-driven horizontal spread: no rotation and no permanently-open motion override. */
.metal-fan .metal-image-button{--spread:var(--fan);transform:translateX(calc(((2 - var(--layer))*26 - 22)*var(--spread)*1%));transition:transform .3s ease-out}
.metal-fan:focus-within .metal-image-button{--spread:1}
@media(hover:hover){.metal-fan:hover .metal-image-button{--spread:1}}
@media(prefers-reduced-motion:reduce){.metal-fan .metal-image-button{transition:none}}

.metal-details figcaption h3{font-size:28px;font-weight:400;letter-spacing:-.025em;color:var(--ink);margin:20px 0 12px}.metal-details figcaption p{font-size:15px;line-height:1.65;max-width:46ch;margin:0 0 16px}.metal-details figcaption a{font-size:14px;text-decoration:underline;text-underline-offset:4px}
