/* Pinnacle LGS — v15 full-page mockup stylesheet
Design tokens match the staging theme (pinnacle-lgs 1.0.1).
BRAND RULE: the logo is always the full-colour original. Never white,
never inverted, never single-tone, on any background. */
:root{
--paper:#FFFFFF; --paper2:#F5F7FA; --card:#FFFFFF;
--ink:#0E1520; --ink2:#3C4759; --muted:#5D6A80;
--rule:#E2E8F0; --rule2:#ECF1F6;
--acc:#E8632B; --acc-d:#A8410F; --acc-l:#FBE9DF;
--graphite:#0E1520; --graphite2:#182231;
--sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
--mono:ui-monospace,"SF Mono","Cascadia Mono",Menlo,Consolas,monospace;
--wrap:1280px; --r:10px;
--grid-w:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Cpath d='M48 .5H0M.5 0v48' fill='none' stroke='%23fff' stroke-opacity='.06'/%3E%3C/svg%3E");
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:118px}
body{margin:0;font-family:var(--sans);color:var(--ink);background:var(--paper);line-height:1.6;-webkit-font-smoothing:antialiased}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px}
@media(max-width:600px){.wrap{padding:0 18px}}
h1,h2,h3,h4,h5{margin:0;letter-spacing:-.022em;line-height:1.14}
p{margin:0 0 14px}
a{color:inherit;text-decoration:none}
img{max-width:100%}
.mono{font-family:var(--mono)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
/* ranges — one place, everywhere: 0.6 – 2.5 mm */
.rg{display:inline!important;white-space:nowrap;font-variant-numeric:tabular-nums;
font-family:inherit;font-size:inherit;letter-spacing:inherit;text-transform:none;color:inherit;margin:0}
.rg .dash{display:inline!important;font-size:inherit;letter-spacing:normal;text-transform:none}
.rg .dash{padding:0 .38em;color:var(--acc-d);font-weight:600}
.dk .rg .dash,.on-dark .rg .dash{color:#FFB08A}
/* ---------------- buttons ---------------- */
.btn{display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:14.5px;
padding:13px 22px;border-radius:8px;border:1px solid transparent;cursor:pointer;transition:.18s;font-family:inherit}
.btn .ar{width:15px;height:10px;background:currentColor;
-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12'%3E%3Cpath d='M1 6h13M9.5 1.5 14.5 6l-5 4.5' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3C/svg%3E") no-repeat center/contain;
mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12'%3E%3Cpath d='M1 6h13M9.5 1.5 14.5 6l-5 4.5' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3C/svg%3E") no-repeat center/contain;
transition:transform .18s}
.btn:hover .ar{transform:translateX(3px)}
.btn-p{background:var(--acc);color:#fff}
.btn-p:hover{background:var(--acc-d)}
.btn-g{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.34);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.btn-g:hover{border-color:var(--acc);background:rgba(232,99,43,.32)}
.btn-o{background:#fff;color:var(--ink);border-color:var(--rule)}
.btn-o:hover{border-color:var(--ink)}
.btn[disabled]{opacity:.4;pointer-events:none}
/* ---------------- header ---------------- */
.hd{position:sticky;top:0;z-index:60;background:#fff}
.hd .logo img{display:block;height:30px;width:auto;filter:none!important} /* never recoloured */
.util{background:#0B1119;color:#8A97A9;font-size:12.5px;
padding:8px 0;transition:.25s}
.util .util-in{display:flex;gap:22px;align-items:center;max-width:var(--wrap);margin:0 auto;padding:0 28px}
.util .of{display:flex;gap:16px}
.util .of b{color:#D5DBE4;font-weight:500}
.util .rt{margin-left:auto;display:flex;gap:20px;align-items:center}
.util a:hover{color:#FFB08A}
.hmain{border-bottom:1px solid var(--rule);background:#fff;transition:.25s}
.hmain-in{display:flex;align-items:center;gap:30px;max-width:var(--wrap);margin:0 auto;padding:15px 28px;transition:.25s}
.hnav{display:flex;gap:2px;margin-left:4px}
.hnav>a,.hnav>button{color:var(--ink);background:none;border:0;font:inherit;font-size:14.5px;font-weight:600;
padding:10px 13px;border-radius:7px;cursor:pointer;display:flex;align-items:center;gap:6px;position:relative;white-space:nowrap}
.hnav>a::after,.hnav>button::after{content:"";position:absolute;left:13px;right:13px;bottom:4px;height:2px;
background:var(--acc);transform:scaleX(0);transition:.18s;transform-origin:left}
.hnav>a:hover::after,.hnav>a.on::after,.hnav>button:hover::after,.hnav>button[aria-expanded=true]::after{transform:scaleX(1)}
.hnav .cv{width:8px;height:8px;border-right:1.6px solid var(--muted);border-bottom:1.6px solid var(--muted);
transform:rotate(45deg) translate(-2px,-2px);transition:.18s}
.hnav>button[aria-expanded=true] .cv{transform:rotate(-135deg) translate(-3px,-3px)}
.hrt{margin-left:auto;display:flex;gap:11px;align-items:center}
.ghost{font-size:13.5px;font-weight:700;padding:11px 16px;border-radius:8px;border:1px solid var(--rule);color:var(--ink)}
.ghost:hover{border-color:var(--ink)}
.qbtn{font-size:13.5px;font-weight:700;padding:12px 18px;border-radius:8px;background:var(--acc);color:#fff;white-space:nowrap}
.ghost{white-space:nowrap}
.qbtn:hover{background:var(--acc-d)}
.burger{display:none;background:none;border:1px solid var(--rule);border-radius:8px;padding:9px 11px;cursor:pointer}
.burger svg{width:20px;height:20px;display:block;stroke:var(--ink);stroke-width:1.8;fill:none}
/* condensed on scroll */
.hd.small .util{padding:0;height:0;overflow:hidden;opacity:0}
.hd.small .hmain-in{padding-top:8px;padding-bottom:8px}
.hd.small .logo img{height:23px}
.hd .now{display:none;font-family:var(--mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.hd.small .now{display:block}
.prog{height:2px;background:var(--rule2)}
.prog i{display:block;height:100%;width:0;background:var(--acc);transition:width .1s linear}
/* mega menu */
.mega{display:none;position:absolute;left:0;right:0;top:100%;background:#fff;border-bottom:1px solid var(--rule);
box-shadow:0 30px 60px -30px rgba(14,21,32,.45);z-index:70;padding:26px 0}
.mega.on{display:block}
.mg-in{display:grid;grid-template-columns:1fr 268px;gap:30px;max-width:var(--wrap);margin:0 auto;padding:0 28px}
.mg-k{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 12px}
.mmg{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.mmg a{border:1px solid var(--rule);border-radius:10px;padding:12px 14px;transition:.15s;display:block}
.mmg a:hover{border-color:var(--acc);background:var(--acc-l)}
.mmg a b{display:block;font-size:15.5px}
.mmg a .rgv{display:block;font-family:var(--mono);font-size:12px;color:var(--acc-d);margin-top:4px;font-weight:600}
.mmg a .uses{display:block;font-size:12px;color:var(--muted);margin-top:5px;line-height:1.4}
.mega .side{background:var(--paper2);border-radius:12px;padding:18px 20px}
.mega .side h5{font-size:15px;margin-bottom:4px}
.mega .side p{font-size:13px;color:var(--muted);margin:0 0 12px}
.mega .side .lk{display:block;font-size:13.5px;font-weight:600;padding:9px 0;border-top:1px solid var(--rule)}
.mega .side .lk:hover{color:var(--acc-d)}
/* mobile nav */
.mnav{display:none;position:fixed;inset:0;background:#0B1119;z-index:80;padding:22px;overflow:auto}
.mnav.on{display:block}
.mnav a{display:block;color:#E4E9F0;font-size:18px;font-weight:600;padding:13px 0;border-bottom:1px solid rgba(255,255,255,.1)}
.mnav .sub{font-size:15px;color:#A9B4C4;display:flex;justify-content:space-between}
.mnav .sub span{font-family:var(--mono);font-size:12.5px;color:#FFB08A}
.mnav .h{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:#6C7A8D;margin:22px 0 6px}
.mnav .x{position:absolute;top:18px;right:18px;background:none;border:1px solid rgba(255,255,255,.25);color:#fff;
border-radius:8px;padding:8px 12px;cursor:pointer;font:inherit}
@media(max-width:1080px){
.hnav,.hrt .ghost,.util .of{display:none}
.burger{display:block}
.util .rt{margin-left:0}
}
@media(max-width:620px){
.util .rt a:nth-child(n+3){display:none}
.util .util-in{padding-left:18px;padding-right:18px;gap:14px}
.qbtn{padding:11px 14px;font-size:12.5px}
.hd .logo img{height:25px}
html{scroll-padding-top:96px}
}
@media(max-width:400px){
.util .rt a:nth-child(2){display:none}
}
/* ---------------- banner ---------------- */
.stage{position:relative;overflow:hidden;background:var(--graphite)}
.st-slide{position:relative;display:flex;align-items:center;min-height:min(74vh,620px)}
.stage.inner .st-slide{min-height:min(52vh,400px)}
.st-bg{position:absolute;inset:0;overflow:hidden}
.st-bg img{width:100%;height:100%;object-fit:cover;object-position:var(--fp,center 40%)}
.st-bg::after{content:"";position:absolute;inset:0;
background:linear-gradient(92deg,rgba(9,14,22,.93) 0%,rgba(9,14,22,.74) 38%,rgba(9,14,22,.30) 72%,rgba(9,14,22,.46) 100%)}
.st-grid{position:relative;z-index:2;max-width:var(--wrap);margin:0 auto;padding:56px 28px;width:100%}
.st-grid>div{max-width:720px}
.eyebrow{display:inline-block;font-size:13.5px;font-weight:600;letter-spacing:.01em;
color:#FFB08A;background:rgba(255,255,255,.10);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
padding:6px 13px;border-radius:100px;margin-bottom:16px}
.stage h1{color:#fff;font-size:clamp(28px,4vw,50px);text-shadow:0 2px 24px rgba(9,14,22,.4)}
.stage h1 em{color:#FF9A66;font-style:normal}
.stage .lede{color:#DBE0E9;margin-top:14px;font-size:17.5px;max-width:56ch}
.st-cta{display:flex;gap:12px;margin-top:26px;flex-wrap:wrap}
.crumbs{background:var(--paper2);border-bottom:1px solid var(--rule);font-family:var(--mono);font-size:12px;color:var(--muted)}
.crumbs .wrap{padding-top:11px;padding-bottom:11px}
.crumbs i{opacity:.45;margin:0 8px;font-style:normal}
/* ---------------- trust strip ---------------- */
.strip{background:var(--ink);color:#fff}
.strip-in{display:grid;grid-template-columns:repeat(4,1fr)}
.strip-in>div{padding:30px 26px;border-left:1px solid rgba(255,255,255,.13)}
.strip-in>div:first-child{border-left:0}
.strip b{display:block;font-size:32px;font-weight:800;letter-spacing:-.03em;line-height:1}
.strip b i{font-style:normal;font-size:19px;color:var(--acc)}
.strip-in>div>span{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
color:rgba(255,255,255,.6);margin-top:9px}
@media(max-width:760px){.strip-in{grid-template-columns:1fr 1fr}.strip-in>div:nth-child(3){border-left:0}
.strip-in>div{padding:22px 18px;border-top:1px solid rgba(255,255,255,.13)}.strip b{font-size:26px}}
/* ---------------- sections ---------------- */
.sec{padding:86px 0}
.sec.alt{background:var(--paper2)}
.sec.dk{background:var(--graphite);color:#fff}
.shd{max-width:76ch;margin-bottom:38px}
.shd .k{display:block;font-size:13.5px;font-weight:600;letter-spacing:.01em;color:var(--acc-d);margin-bottom:10px}
.sec.dk .shd .k{color:#FFB08A}
.shd h2{font-size:clamp(27px,3.4vw,40px)}
.shd p{color:var(--muted);margin-top:13px;font-size:17px}
.sec.dk .shd p{color:#B4BAC6}
@media(max-width:700px){.sec{padding:56px 0}}
/* ---------------- division cards ---------------- */
.divs{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:860px){.divs{grid-template-columns:1fr}}
.dv{border:1px solid var(--rule);border-radius:14px;background:#fff;overflow:hidden;
display:flex;flex-direction:column;transition:.2s;position:relative}
.dv::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--acc);
transform:scaleX(0);transform-origin:left;transition:transform .25s;z-index:3}
.dv:hover{border-color:var(--ink);transform:translateY(-3px);box-shadow:0 22px 40px -22px rgba(14,21,32,.35)}
.dv:hover::before{transform:scaleX(1)}
.dvimg{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--paper2)}
.dvimg img{width:100%;height:100%;object-fit:cover;transition:transform .45s}
.dv:hover .dvimg img{transform:scale(1.04)}
.dv .in{padding:22px 22px 24px;display:flex;flex-direction:column;flex:1}
.dv h3{font-size:24px;color:var(--ink)}
.dv p{color:var(--muted);font-size:14.5px;line-height:1.55;margin:10px 0 0;flex:1}
.dv .fx{display:flex;gap:20px;margin-top:18px;padding-top:16px;border-top:1px solid var(--rule2)}
.dv .fx>span{font-family:var(--mono);font-size:11px;color:var(--muted);letter-spacing:.04em}
.dv .fx>span b{display:block;color:var(--ink);font-size:15px;font-weight:800;letter-spacing:-.01em;
margin-bottom:3px;font-family:var(--sans)}
.dv .go{display:inline-flex;align-items:center;gap:9px;margin-top:18px;color:var(--acc-d);
font-weight:700;font-size:14px}
.dv .go i{width:26px;height:26px;border-radius:50%;border:1px solid var(--rule);display:grid;
place-items:center;font-style:normal;transition:.2s}
.dv:hover .go i{background:var(--acc);border-color:var(--acc);color:#fff}
/* wide band (concrete) */
.band{position:relative;border-radius:14px;overflow:hidden;margin-top:18px;min-height:180px;display:flex;align-items:center;isolation:isolate}
.band img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.band::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(9,14,22,.92),rgba(9,14,22,.55))}
.band .in{padding:28px 26px;display:flex;align-items:center;gap:24px;flex-wrap:wrap;width:100%}
.band h3{color:#fff;font-size:23px}
.band p{color:#C9CFDA;font-size:14px;margin:6px 0 0;max-width:52ch}
.band .go{margin-left:auto}
/* ---------------- machine index strip ---------------- */
.mindex{background:var(--graphite2);--mphoto:none;
background-image:linear-gradient(rgba(9,14,22,.92),rgba(9,14,22,.86))}
.mindex-in{display:grid;grid-template-columns:repeat(6,1fr)}
.mindex-in a{padding:24px 18px;border-left:1px solid rgba(255,255,255,.12);transition:.2s;display:block}
.mindex-in a:first-child{border-left:0}
.mindex-in a:hover{background:rgba(255,255,255,.05)}
.mindex-in a>b{display:block;color:#fff;font-size:19px;letter-spacing:-.02em;margin-bottom:12px}
.mfig{display:block;margin-top:9px}
.mfig .v{display:block;font-family:var(--mono);font-size:14px;font-weight:700;color:#FFB08A;letter-spacing:-.01em}
.mfig .l{display:block;font-family:var(--mono);font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;
color:rgba(255,255,255,.55);margin-top:3px;font-style:normal}
@media(max-width:1000px){.mindex-in{grid-template-columns:repeat(3,1fr)}
.mindex-in a:nth-child(4){border-left:0}.mindex-in a:nth-child(n+4){border-top:1px solid rgba(255,255,255,.12)}}
@media(max-width:560px){.mindex-in{grid-template-columns:repeat(2,1fr)}
.mindex-in a:nth-child(odd){border-left:0}.mindex-in a:nth-child(n+3){border-top:1px solid rgba(255,255,255,.12)}}
/* ---------------- spec boxes ---------------- */
.spec{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.spec .sb{border:1px solid var(--rule);border-radius:10px;background:#fff;padding:13px 12px 12px;position:relative;overflow:hidden}
.spec .sb::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--acc);opacity:.85}
.spec .lab{font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:6px}
.spec .val{font-size:16.5px;font-weight:800;letter-spacing:-.015em;display:block;line-height:1.2;
font-variant-numeric:tabular-nums;white-space:nowrap}
.spec .unit{font-size:11.5px;font-weight:600;color:var(--muted);margin-left:5px;white-space:nowrap}
@media(max-width:520px){.spec{grid-template-columns:1fr}
.spec .sb{display:flex;align-items:baseline;justify-content:space-between;gap:14px}.spec .lab{margin:0}}
/* ---------------- machine cards ---------------- */
.tabs{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:26px}
.tab{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;border:1px solid var(--rule);
background:#fff;border-radius:100px;padding:9px 16px;cursor:pointer}
.tab.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.mgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:980px){.mgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.mgrid{grid-template-columns:1fr}}
.mcard{border:1px solid var(--rule);border-radius:14px;background:#fff;overflow:hidden;display:flex;flex-direction:column;transition:.2s;position:relative}
.mcard::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--acc);transform:scaleX(0);transform-origin:left;transition:transform .25s;z-index:3}
.mcard:hover{border-color:var(--ink);transform:translateY(-3px);box-shadow:0 22px 40px -22px rgba(14,21,32,.35)}
.mcard:hover::before{transform:scaleX(1)}
.mimg{position:relative;aspect-ratio:2.15;overflow:hidden;
background:radial-gradient(70% 90% at 70% 15%,rgba(232,99,43,.15),transparent 62%),linear-gradient(165deg,#FDFEFF,#E5EBF3)}
.mimg .gnum{position:absolute;inset:0;display:flex;align-items:flex-start;justify-content:center;padding-top:6px;
font-weight:800;font-size:clamp(52px,6vw,88px);letter-spacing:-.03em;color:rgba(20,30,44,.06);line-height:1}
.mimg img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:14px 20px;
filter:drop-shadow(0 14px 24px rgba(14,21,32,.2));transition:transform .35s}
.mcard:hover .mimg img{transform:scale(1.04)}
.mno{display:none}
.mflag{position:absolute;top:12px;right:14px;z-index:2;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;
text-transform:uppercase;color:#fff;background:var(--acc);border-radius:100px;padding:5px 11px;font-weight:700}
.mcard h3{font-size:23px;padding:19px 20px 0}
.mcard .muse{padding:6px 20px 16px;font-size:13.5px;color:var(--muted);flex:1;margin:0;line-height:1.5}
.mcard .spec{padding:0 16px 16px}
.mcard .nophoto{position:absolute;inset:auto 0 10px 0;text-align:center;font-family:var(--mono);font-size:9.5px;
letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
/* comparison table */
.tscroll{overflow-x:auto}
table.cmp{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--rule);border-radius:12px;overflow:hidden;min-width:720px}
table.cmp th{background:var(--paper2);text-align:left;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;
text-transform:uppercase;color:var(--muted);padding:13px 15px;border-bottom:1px solid var(--rule);white-space:nowrap}
table.cmp td{padding:13px 15px;border-bottom:1px solid var(--rule2);font-size:14.5px;vertical-align:middle}
table.cmp tr:last-child td{border-bottom:0}
table.cmp tbody tr:hover{background:var(--acc-l)}
table.cmp td.m{font-weight:800;font-size:16px}
table.cmp td.n{font-family:var(--mono);font-variant-numeric:tabular-nums}
/* ---------------- application cards — same clarity as the machine cards ---------------- */
.apps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:980px){.apps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.apps{grid-template-columns:1fr}}
.acard{border:1px solid var(--rule);border-radius:14px;background:#fff;overflow:hidden;display:flex;
flex-direction:column;transition:.2s;position:relative}
.acard::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--acc);
transform:scaleX(0);transform-origin:left;transition:transform .25s;z-index:3}
.acard:hover{border-color:var(--ink);transform:translateY(-3px);box-shadow:0 22px 40px -22px rgba(14,21,32,.35)}
.acard:hover::before{transform:scaleX(1)}
.aimg{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--paper2)}
.aimg img{width:100%;height:100%;object-fit:cover;transition:transform .45s}
.acard:hover .aimg img{transform:scale(1.05)}
.ano{position:absolute;top:12px;left:14px;z-index:2;font-family:var(--mono);font-size:10.5px;color:#fff;
background:rgba(9,14,22,.62);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
border-radius:100px;padding:4px 10px;letter-spacing:.08em}
.acard h3{font-size:21px;padding:18px 20px 0;letter-spacing:-.02em}
.acard .ause{padding:8px 20px 18px;font-size:14.5px;color:var(--ink2);line-height:1.55;flex:1;margin:0}
.acard .spec{padding:0 16px 16px}
.acard .spec .val{font-size:16px}
.acard .amach{padding:0 20px 18px;display:flex;gap:6px;flex-wrap:wrap}
.acard .amach span{font-family:var(--mono);font-size:11px;border:1px solid var(--rule);border-radius:100px;
padding:5px 11px;color:var(--ink2);background:var(--paper2)}
/* application editorial rows (applications page) */
.erow{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;padding:52px 0;
border-top:1px solid var(--rule2)}
.erow:first-of-type{border-top:0}
.erow.rev .efig{order:-1}
.efig{position:relative;overflow:hidden;aspect-ratio:4/3;background:var(--paper2);border-radius:18px}
.efig img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.erow:hover .efig img{transform:scale(1.03)}
.erow .enum{display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
background:var(--acc-l);color:var(--acc-d);border-radius:999px;padding:5px 13px;margin-bottom:16px}
.erow h3{font-size:clamp(23px,2.5vw,32px);margin-bottom:14px}
.erow p{color:var(--ink2);max-width:46ch}
.elist{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:10px}
.elist li{padding-left:24px;position:relative;font-size:15px;color:var(--ink2)}
.elist li::before{content:"";position:absolute;left:0;top:8px;width:11px;height:6px;
border-left:2px solid var(--acc-d);border-bottom:2px solid var(--acc-d);transform:rotate(-45deg)}
.mtags{display:flex;gap:7px;flex-wrap:wrap;margin-top:20px}
.mtags a{font-family:var(--mono);font-size:11.5px;border:1px solid var(--rule);border-radius:999px;
padding:6px 12px;color:var(--ink2);transition:.15s;background:#fff}
.mtags a:hover{border-color:var(--ink);color:var(--ink)}
@media(max-width:860px){.erow{grid-template-columns:1fr;gap:26px;padding:34px 0}.erow.rev .efig{order:0}}
/* ---------------- quote band ---------------- */
.qband{background:var(--graphite);color:#fff;position:relative;overflow:hidden}
.qband::before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle at 18% 30%,rgba(232,99,43,.16),transparent 58%),var(--grid-w)}
.qband .wrap{position:relative;padding-top:66px;padding-bottom:66px;display:grid;grid-template-columns:1fr auto;gap:28px;align-items:center}
@media(max-width:820px){.qband .wrap{grid-template-columns:1fr}}
.qband h2{font-size:clamp(25px,3.2vw,36px)}
.qband p{color:#B4BAC6;margin:12px 0 0;max-width:56ch}
/* ---------------- footer (v14 structure, v15 tokens) ---------------- */
footer.ft{background:var(--graphite);color:#828A98;font-size:14px;padding:76px 0 34px;border-top:3px solid var(--acc)}
.ft-in{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr 1fr;gap:40px;padding-bottom:48px}
@media(max-width:1080px){.ft-in{grid-template-columns:1.4fr 1fr 1fr;gap:34px}}
@media(max-width:760px){.ft-in{grid-template-columns:1fr 1fr;gap:30px}}
@media(max-width:520px){.ft-in{grid-template-columns:1fr;gap:26px}}
.ft h6{color:#fff;font-size:13px;font-weight:600;letter-spacing:.01em;
margin-bottom:16px;font-weight:500}
.ft ul{list-style:none;margin:0;padding:0}
.ft li{margin-bottom:10px}
.ft a{transition:color .15s}
.ft a:hover{color:var(--acc)}
.ft .logo img{height:40px;margin-bottom:18px;filter:none!important} /* never white, never inverted */
.ft .fblurb{max-width:30ch;margin:0 0 18px}
.ft .fcontact{display:grid;gap:7px;font-family:var(--mono);font-size:12px;letter-spacing:.03em}
.ft .fcontact a{color:#B4BAC6}
.ft .fsoc{display:flex;gap:9px;margin-top:20px}
.ft .fsoc a{width:38px;height:38px;border:1px solid rgba(255,255,255,.16);border-radius:10px;display:grid;
place-items:center;transition:.18s}
.ft .fsoc a:hover{border-color:var(--acc);background:rgba(232,99,43,.16)}
.ft .fsoc svg{width:17px;height:17px;fill:currentColor}
.fbot{border-top:1px solid rgba(255,255,255,.08);padding-top:24px;display:flex;justify-content:space-between;
flex-wrap:wrap;gap:12px;font-family:var(--mono);font-size:11px;letter-spacing:.04em}
/* ---------------- form ---------------- */
.formwrap{background:#fff;border:1px solid var(--rule);border-radius:18px;overflow:hidden;box-shadow:0 30px 60px -40px rgba(14,21,32,.4)}
.fhead{background:linear-gradient(118deg,#0E1520,#1E2A3E);color:#fff;padding:32px 40px;position:relative}
.fhead::before{content:"";position:absolute;inset:0;background-image:var(--grid-w)}
.fhead h3{font-size:24px;position:relative}
.fhead p{color:#A9B4C4;margin:8px 0 0;font-size:14.5px;position:relative;max-width:60ch}
.steps{display:flex;position:relative;margin-top:22px;border-top:1px solid rgba(255,255,255,.14);padding-top:16px}
.steps div{flex:1;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
color:rgba(255,255,255,.42);position:relative;padding-top:12px}
.steps div::before{content:"";position:absolute;top:0;left:0;right:3px;height:3px;background:rgba(255,255,255,.14);border-radius:3px}
.steps div.on{color:#fff}
.steps div.on::before{background:var(--acc)}
.steps div.done{color:rgba(255,255,255,.72)}
.steps div.done::before{background:rgba(232,99,43,.55)}
.fbody{padding:38px 40px 16px}
@media(max-width:640px){.fbody,.fhead{padding-left:20px;padding-right:20px}
.fbody{padding-top:28px}}
.step{display:none}
.step.on{display:block;animation:fade .25s ease}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.qh{font-size:20px;margin-bottom:6px}
.qs{color:var(--muted);font-size:14.5px;margin-bottom:20px}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:820px){.tiles{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.tiles{grid-template-columns:1fr}}
.tile{border:1.5px solid var(--rule);border-radius:12px;padding:18px 18px 16px;cursor:pointer;background:#fff;transition:.15s;position:relative;display:block}
.tile:hover{border-color:var(--ink2)}
.tile.on{border-color:var(--acc);background:var(--acc-l)}
.tile .tk{display:block;font-weight:700;font-size:15px;margin-bottom:3px;padding-right:26px}
.tile .td{display:block;font-size:12.5px;color:var(--muted);line-height:1.45}
.tile .tick{position:absolute;top:14px;right:14px;width:20px;height:20px;border-radius:50%;border:1.5px solid var(--rule);display:grid;place-items:center}
.tile.on .tick{background:var(--acc);border-color:var(--acc)}
.tile.on .tick::after{content:"";width:9px;height:5px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg) translate(1px,-1px)}
.tile input,.chk input{position:absolute;opacity:0;pointer-events:none}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chk{border:1.5px solid var(--rule);border-radius:100px;padding:11px 18px;font-size:14px;cursor:pointer;background:#fff;transition:.15s;user-select:none;position:relative}
.chk:hover{border-color:var(--ink2)}
.chk.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.fld{margin-bottom:24px}
.fld>label,.blk>label{display:block;font-size:13.5px;font-weight:700;margin-bottom:9px;letter-spacing:.01em}
.hint{font-size:12.5px;color:var(--muted);margin:6px 0 0}
input[type=text],input[type=email],input[type=tel],select,textarea{
width:100%;padding:14px 16px;border:1.5px solid var(--rule);border-radius:9px;font-size:16px;
font-family:inherit;background:#fff;transition:.15s;line-height:1.45}
input[type=text],input[type=email],input[type=tel],select{height:52px}
textarea{min-height:180px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--acc);box-shadow:0 0 0 3px rgba(232,99,43,.14)}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:22px}
@media(max-width:560px){.f2{grid-template-columns:1fr}}
.blk{margin-bottom:30px}
.fnav{display:flex;justify-content:space-between;gap:14px;align-items:center;padding:26px 40px 32px;
border-top:1px solid var(--rule2);margin-top:18px;background:var(--paper2)}
@media(max-width:640px){.fnav{padding-left:20px;padding-right:20px;flex-wrap:wrap}
.fnav .btn{flex:1 1 auto;justify-content:center}.fnav .fine{order:3;flex:1 1 100%}}
.fnav .fine{font-size:12.5px;color:var(--muted);max-width:38ch;margin:0}
.rec{border:1.5px solid var(--acc);background:var(--acc-l);border-radius:12px;padding:16px 18px;margin-top:16px;display:none}
.rec.on{display:block}
.rec .rk{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--acc-d);display:block;margin-bottom:5px}
.rec b{font-size:19px}
.rec p{margin:5px 0 0;font-size:13.5px;color:#5A3421}
.talk{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px;padding-top:18px;border-top:1px dashed var(--rule);align-items:center}
.talk a{font-size:13.5px;border:1px solid var(--rule);border-radius:100px;padding:9px 15px;background:#fff;font-weight:600}
.talk a:hover{border-color:var(--ink)}
.sum{background:var(--paper2);border:1px solid var(--rule);border-radius:12px;padding:18px 20px;margin-bottom:20px}
.sum dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:8px 18px;font-size:14px}
.sum dt{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding-top:3px}
.sum dd{margin:0;font-weight:600}
.cond{display:none}.cond.on{display:block}
/* offices */
.offs-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:900px){.offs-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.offs-grid{grid-template-columns:1fr}}
.off{border:1px solid var(--rule);border-radius:12px;padding:20px;background:#fff}
.off .c{font-size:12.5px;font-weight:600;color:var(--acc-d);display:block;margin-bottom:8px}
.off h4{font-size:19px;margin-bottom:6px}
.off p{font-size:13.5px;color:var(--muted);margin:0}
/* review ribbon */
.ribbon{background:#0B1119;color:#9AA6B8;font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;padding:9px 0;text-align:center}
.ribbon a{color:#FFB08A}
.ribbon b{color:#fff;font-weight:600}
/* ---------------- applications page ---------------- */
/* sticky jump bar */
.subnav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);
-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--rule)}
.subnav{top:var(--hd-h,0px)}
.subnav .wrap{position:relative}
.subnav .wrap::after{content:"";position:absolute;right:0;top:0;bottom:0;width:56px;pointer-events:none;
background:linear-gradient(90deg,rgba(255,255,255,0),#fff 78%)}
.subnav-in{display:flex;gap:7px;overflow-x:auto;padding:11px 0;scrollbar-width:thin}
.subnav a{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
border:1px solid var(--rule);border-radius:999px;padding:9px 15px;white-space:nowrap;color:var(--muted);
transition:.15s;background:#fff}
.subnav a:hover{border-color:var(--ink);color:var(--ink)}
.subnav a.on{background:var(--ink);border-color:var(--ink);color:#fff}
.subnav a.cta{border-color:var(--acc);color:var(--acc-d);background:var(--acc-l);font-weight:700}
/* stat strip, light */
.astat{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--rule);border-radius:14px;
overflow:hidden;background:#fff}
.astat>div{padding:26px 24px;border-left:1px solid var(--rule)}
.astat>div:first-child{border-left:0}
.astat b{display:block;font-size:29px;font-weight:800;letter-spacing:-.03em;line-height:1}
.astat b i{font-style:normal;font-size:17px;color:var(--acc)}
.astat span{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
color:var(--muted);margin-top:9px}
@media(max-width:760px){.astat{grid-template-columns:1fr 1fr}
.astat>div:nth-child(3){border-left:0}.astat>div:nth-child(n+3){border-top:1px solid var(--rule)}}
/* application detail block */
.appsec{padding:64px 0;border-top:1px solid var(--rule2);scroll-margin-top:calc(var(--stick,128px) + 18px)}
.appsec:first-of-type{border-top:0}
.appsec-in{display:grid;grid-template-columns:1fr 1.05fr;gap:56px;align-items:center}
.appsec.rev .appsec-in>.appfig{order:-1}
@media(max-width:920px){.appsec-in{grid-template-columns:1fr;gap:28px}
.appsec.rev .appsec-in>.appfig{order:0}.appsec{padding:44px 0}}
.appfig{position:relative;border-radius:18px;overflow:hidden;aspect-ratio:4/3;background:var(--paper2)}
.appfig img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.appsec:hover .appfig img{transform:scale(1.03)}
.appfig .fcap{position:absolute;left:16px;bottom:16px;font-size:12px;font-weight:600;
text-transform:uppercase;color:#fff;background:rgba(9,14,22,.66);-webkit-backdrop-filter:blur(6px);
backdrop-filter:blur(6px);padding:7px 13px;border-radius:999px}
.appsec .anum{display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
background:var(--acc-l);color:var(--acc-d);border-radius:999px;padding:5px 13px;margin-bottom:15px}
.appsec h3{font-size:clamp(24px,2.6vw,33px);margin-bottom:13px}
.appsec .alede{color:var(--ink2);font-size:16.5px;max-width:48ch;margin:0 0 20px}
.appsec .aq{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
margin:0 0 10px}
.appsec .spec{max-width:520px;margin-bottom:20px}
.appsec .spec .val{font-size:16px}
.appsec .best{font-weight:800}
.arow2{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-bottom:22px}
@media(max-width:560px){.arow2{grid-template-columns:1fr;gap:16px}}
.asup{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.asup li{padding-left:23px;position:relative;font-size:14.5px;color:var(--ink2);line-height:1.5}
.asup li::before{content:"";position:absolute;left:0;top:8px;width:10px;height:6px;
border-left:2px solid var(--acc-d);border-bottom:2px solid var(--acc-d);transform:rotate(-45deg)}
.appsec .mtags{margin-top:4px}
/* application × machine matrix */
table.matrix{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--rule);
border-radius:12px;overflow:hidden;min-width:760px}
table.matrix th{background:var(--paper2);padding:13px 12px;border-bottom:1px solid var(--rule);
font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
text-align:center;white-space:nowrap}
table.matrix th:first-child{text-align:left;min-width:210px}
table.matrix td{padding:12px;border-bottom:1px solid var(--rule2);text-align:center;font-size:14px}
table.matrix tr:last-child td{border-bottom:0}
table.matrix tbody tr:hover{background:var(--acc-l)}
table.matrix td:first-child{text-align:left;font-weight:700}
table.matrix .yes{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--ink2)}
table.matrix .best{display:inline-block;font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;
text-transform:uppercase;background:var(--acc);color:#fff;border-radius:999px;padding:4px 9px;font-weight:700}
table.matrix .no{color:var(--rule);font-size:16px;line-height:1}
.mlegend{display:flex;gap:20px;flex-wrap:wrap;margin-top:16px;font-family:var(--mono);font-size:11px;color:var(--muted)}
.mlegend span{display:flex;align-items:center;gap:9px;line-height:1.4}
/* ---------------- host-site furniture ---------------- */
/* TranslatePress floats its language switcher at top-right, which collides with
the sticky header. Move it to the conventional bottom-right, on this page only. */
body.v15 .trp-floating-switcher{top:auto!important;bottom:22px!important;right:22px!important}
@media(max-width:600px){body.v15 .trp-floating-switcher{bottom:14px!important;right:14px!important}}
/* ---------------- host-site guard ----------------
Two things on the live site reshape our image frames, and both only show up
once the design runs inside WordPress rather than as a static file:
1. The theme ships a bare `img{align-self:flex-start;width:100%;height:auto}`.
SiteGround's optimiser combines stylesheets, so that rule lands after ours
and wins on equal specificity.
2. Imagify wraps every ![]()
in a to serve AVIF. Our `height:100%`
was then resolving against that unsized wrapper instead of the frame, so
fixed-ratio frames collapsed to the picture's own height — visible as the
grey band under the Steel Build card.
Fix for both: the wrapper is made to fill the frame absolutely, and the image
fills the wrapper. Specificity alone settles it — no !important. */
/* .st-bg is already position:absolute over the slide — leave it alone. */
.dvimg,.aimg,.efig,.appfig,.band,.mimg{position:relative}
body.v15 .dvimg picture,
body.v15 .aimg picture,
body.v15 .efig picture,
body.v15 .appfig picture,
body.v15 .st-bg picture,
body.v15 .band picture,
body.v15 .mimg picture{display:block;position:absolute;inset:0;width:100%;height:100%;z-index:inherit}
body.v15 .dvimg img,
body.v15 .aimg img,
body.v15 .efig img,
body.v15 .appfig img,
body.v15 .st-bg img,
body.v15 .band img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;align-self:auto;max-width:none}
body.v15 .mimg img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;align-self:auto;max-width:none}
body.v15 .band picture{z-index:-2}
body.v15 .hd .logo img,
body.v15 .ft .logo img{position:static;width:auto;align-self:auto}
body.v15 .hd .logo picture,
body.v15 .ft .logo picture{position:static;display:inline-block;width:auto;height:auto}
/* ---------------- on-page enquiry form ----------------
The markup is Contact Form 7's, not ours — the same form engine the rest of
the site already uses, so submissions land in the same inbox and the same
database table, and the machine questions inherit the existing conditional
rule. Everything below is styling over CF7's own output; no markup is
rewritten by JavaScript. Field proportions match the original contact form:
52px controls, 180px message box, generous gaps. */
.formsec{background:var(--paper2);border-top:1px solid var(--rule2)}
.fgrid{display:grid;grid-template-columns:1fr 1.2fr;gap:56px;align-items:start}
@media(max-width:960px){.fgrid{grid-template-columns:1fr;gap:34px}}
.fside h2{font-size:clamp(28px,3.2vw,40px);margin:14px 0 16px}
.fside .lede{color:var(--muted);font-size:16.5px;line-height:1.65;max-width:46ch}
.fsteps{list-style:none;margin:28px 0 0;padding:0;counter-reset:fs}
.fsteps li{counter-increment:fs;position:relative;padding:0 0 20px 46px}
.fsteps li::before{content:counter(fs);position:absolute;left:0;top:-2px;width:30px;height:30px;
border-radius:50%;background:var(--acc-l);color:var(--acc-d);font-family:var(--mono);font-size:12px;
display:flex;align-items:center;justify-content:center;font-weight:700}
.fsteps b{display:block;font-size:15px;margin-bottom:3px}
.fsteps span{display:block;font-size:14px;color:var(--muted);line-height:1.55}
.foffices{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:12px;padding-top:20px;border-top:1px solid var(--rule2)}
.foffices span{font-size:12.5px;color:var(--muted)}
.formcard{background:#fff;border:1px solid var(--rule);border-radius:18px;padding:34px;
box-shadow:0 30px 60px -42px rgba(14,21,32,.4)}
@media(max-width:600px){.formcard{padding:24px 20px}}
.cf-fld{margin-bottom:24px}
.cf-lab{display:block;font-size:13.5px;font-weight:700;margin-bottom:10px;letter-spacing:.01em;color:var(--ink)}
.cf-two{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}
@media(max-width:700px){.cf-two{grid-template-columns:1fr}}
/* CF7 wraps every control in an inline span — make it behave like a block */
.wpcf7-form-control-wrap{display:block}
/* checkbox and radio sets render as chips, matching the rest of the design */
.wpcf7 .cf-opts{display:flex;flex-wrap:wrap;gap:10px}
.wpcf7 .cf-opts .wpcf7-list-item{margin:0}
.wpcf7 .cf-opts label{display:flex;align-items:center;gap:9px;margin:0;cursor:pointer;
border:1px solid var(--rule);border-radius:999px;background:#fff;padding:10px 16px;
font-size:14.5px;line-height:1.2;transition:border-color .15s,background .15s,color .15s}
.wpcf7 .cf-opts label:hover{border-color:var(--ink)}
.wpcf7 .cf-opts input{width:16px;height:16px;margin:0;accent-color:var(--acc);flex:none}
.wpcf7 .cf-opts label:has(input:checked){border-color:var(--acc);background:var(--acc-l);
color:var(--acc-d);font-weight:600}
.wpcf7 .cf-opts .wpcf7-list-item-label{white-space:nowrap}
select.cf-sel{width:100%;height:52px;padding:0 42px 0 16px;font-size:16px;
border:1px solid var(--rule);border-radius:10px;background:#fff;color:var(--ink);
appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
background-position:calc(100% - 21px) 23px,calc(100% - 16px) 23px;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
select.cf-sel:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 3px var(--acc-l)}
.wpcf7 input.cf-in{width:100%}
.wpcf7 textarea.cf-ta{width:100%;min-height:180px}
.cf-send{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:4px}
.wpcf7 input.cf-btn{background:var(--acc);color:#fff;border:0;border-radius:10px;
padding:0 30px;height:54px;font-size:15.5px;font-weight:700;cursor:pointer;transition:.18s}
.wpcf7 input.cf-btn:hover{background:var(--acc-d);transform:translateY(-1px)}
.cf-fine{font-size:12.5px;color:var(--muted);max-width:30ch;line-height:1.5}
/* CF7's own messages, toned to the design rather than its default green box */
.wpcf7 form .wpcf7-response-output{margin:22px 0 0;padding:14px 16px;border-radius:10px;
border-width:1px;font-size:14.5px}
.wpcf7 .wpcf7-not-valid-tip{color:#B4232B;font-size:13px;margin-top:6px}
.wpcf7 .wpcf7-spinner{margin:0 0 0 4px}
/* the conditional machine block, once it opens */
.wpcf7 [data-id="group-505"],.wpcf7 .wpcf7cf-group{margin:0}
/* ---------------- Pinnacle MOD feature band ----------------
MOD is a division, not a product line item — on the old homepage it sat as
one card among three. Here it gets its own band so the proposition (whole
rooms finished indoors, craned into place) is readable at a glance. */
.modsec{background:var(--graphite);color:#fff;padding:0;overflow:hidden}
.modgrid{display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:center}
@media(max-width:900px){.modgrid{grid-template-columns:1fr}}
.modfig{position:relative;aspect-ratio:4/3;overflow:hidden;background:#0B1119;margin:0 -28px 0 -28px}
@media(max-width:900px){.modfig{aspect-ratio:16/10;margin:0 -28px}}
.modfig img{width:100%;height:100%;object-fit:cover}
.modtxt{padding:64px 0 64px 56px}
@media(max-width:900px){.modtxt{padding:38px 0 46px}}
.modtxt .k{display:inline-block;font-size:13.5px;font-weight:600;letter-spacing:.01em;
color:var(--acc);margin-bottom:14px}
.modtxt h2{font-size:clamp(28px,3.4vw,42px);color:#fff;margin-bottom:16px;line-height:1.12}
.modtxt .lede{color:rgba(255,255,255,.76);font-size:16.5px;line-height:1.7;max-width:52ch;margin-bottom:26px}
.modfx{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:30px;
padding:22px 0;border-top:1px solid rgba(255,255,255,.14);border-bottom:1px solid rgba(255,255,255,.14)}
@media(max-width:560px){.modfx{grid-template-columns:1fr;gap:14px}}
.modfx b{display:block;font-size:17px;color:#fff;margin-bottom:4px}
.modfx span{display:block;font-size:13px;color:rgba(255,255,255,.62);line-height:1.5}
.modtxt .lk.mods{color:#fff;margin-left:20px}
.modtxt .lk.mods:hover{color:var(--acc)}
/* Pinnacle Concrete strip without a photograph behind the text — the same
rule as the division cards: words never sit on an image. */
.band.plain{background:linear-gradient(120deg,#141C28,#1E2836);min-height:0}
.band.plain::after{content:"";position:absolute;inset:0;z-index:-1;
background:radial-gradient(80% 120% at 92% 10%,rgba(232,99,43,.18),transparent 55%)}
.band.plain .in{padding:30px 30px}
.band.plain h3{color:#fff}
.band.plain p{color:rgba(255,255,255,.72)}
/* the quote buttons scroll to the on-page form now */
html{scroll-behavior:smooth}
#enquire{scroll-margin-top:90px}
/* ---------------- media: one player, one playlist ----------------
Cinema pattern instead of a wall of tiles: a single large stage on the left,
all 18 films in a scrollable playlist on the right. One player on the page,
no duplicate grids, no "show more" step. The Vimeo player still only exists
after a click — the section costs nothing until someone watches. */
.mediasec{background:var(--graphite);color:#fff}
.mediasec .shd h2{color:#fff}
.mediasec .shd p{color:rgba(255,255,255,.72)}
.mediasec .shd .k{color:#FFB08A}
.mcine{display:grid;grid-template-columns:1.62fr 1fr;gap:26px;align-items:stretch}
@media(max-width:960px){.mcine{grid-template-columns:1fr}}
.mstage{position:relative;border-radius:16px;overflow:hidden;background:#0B1119;cursor:pointer;
aspect-ratio:16/9;border:1px solid rgba(255,255,255,.09)}
.mstage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.94;transition:transform .5s}
.mstage:hover img{transform:scale(1.02)}
.mstage iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:2}
.mstage::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(9,14,22,.82) 0%,transparent 42%);pointer-events:none}
.mstage.playing::after{display:none}
.mstage .vplay{position:absolute;left:50%;top:50%;width:74px;height:74px;margin:-37px 0 0 -37px;border-radius:50%;
background:rgba(10,15,23,.68);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);
border:1.5px solid rgba(255,255,255,.6);transition:.2s;z-index:1}
.mstage .vplay::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-38%,-50%);
border-style:solid;border-width:12px 0 12px 19px;border-color:transparent transparent transparent #fff}
.mstage:hover .vplay{background:var(--acc);border-color:var(--acc);transform:scale(1.06)}
.mstage.playing .vplay,.mstage.playing .mstage-cap{display:none}
.mstage-cap{position:absolute;left:22px;right:22px;bottom:18px;z-index:1;pointer-events:none}
.mstage-cap b{display:block;font-size:19px;font-weight:700;color:#fff;line-height:1.3}
.mstage-cap em{display:block;font-style:normal;font-size:13.5px;color:rgba(255,255,255,.72);margin-top:3px}
.mlist{display:flex;flex-direction:column;border:1px solid rgba(255,255,255,.09);border-radius:16px;
background:rgba(255,255,255,.03);overflow:hidden;min-height:0}
.mlist-h{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;
border-bottom:1px solid rgba(255,255,255,.09);font-size:13px;color:rgba(255,255,255,.65)}
.mlist-h b{color:#fff;font-size:13.5px}
.mlist-sc{overflow-y:auto;flex:1;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.25) transparent}
@media(min-width:961px){.mlist{max-height:0;min-height:100%}} /* match stage height via grid stretch */
@media(max-width:960px){.mlist-sc{max-height:340px}}
.mlist-sc::-webkit-scrollbar{width:5px}
.mlist-sc::-webkit-scrollbar-thumb{background:rgba(255,255,255,.22);border-radius:3px}
.mrow{display:flex;align-items:center;gap:13px;width:100%;text-align:left;background:none;
border:0;border-bottom:1px solid rgba(255,255,255,.06);padding:11px 14px;cursor:pointer;
color:inherit;font:inherit;transition:background .15s;position:relative}
.mrow:last-child{border-bottom:0}
.mrow:hover{background:rgba(255,255,255,.06)}
.mrow.on{background:rgba(232,99,43,.13)}
.mrow.on::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--acc)}
.mrow .mth{position:relative;flex:none;width:92px;aspect-ratio:16/9;border-radius:7px;overflow:hidden;background:#0B1119}
.mrow .mth img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mrow .mrt{font-size:13.5px;font-weight:600;color:#DFE6EF;line-height:1.35}
.mrow.on .mrt{color:#fff}
.mrow .mgo{margin-left:auto;flex:none;width:26px;height:26px;border-radius:50%;border:1.3px solid rgba(255,255,255,.35);position:relative;transition:.15s}
.mrow .mgo::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-35%,-50%);
border-style:solid;border-width:4.5px 0 4.5px 7px;border-color:transparent transparent transparent rgba(255,255,255,.75)}
.mrow:hover .mgo,.mrow.on .mgo{background:var(--acc);border-color:var(--acc)}
/* ---------------- news & events ---------------- */
.newssec{background:var(--paper)}
.news-shd{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap}
.ngrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:900px){.ngrid{grid-template-columns:1fr}}
.ncard{display:flex;flex-direction:column;border:1px solid var(--rule);border-radius:14px;overflow:hidden;
background:#fff;transition:.2s;position:relative}
.ncard::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--acc);
transform:scaleX(0);transform-origin:left;transition:transform .25s;z-index:3}
.ncard:hover{border-color:var(--ink);transform:translateY(-3px);box-shadow:0 22px 40px -22px rgba(14,21,32,.35)}
.ncard:hover::before{transform:scaleX(1)}
.nfig{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:var(--paper2)}
body.v15 .nfig picture{display:block;position:absolute;inset:0;width:100%;height:100%}
body.v15 .nfig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;align-self:auto;max-width:none;transition:transform .45s}
.ncard:hover .nfig img{transform:scale(1.04)}
.nbody{display:flex;flex-direction:column;gap:8px;padding:20px 22px 22px;flex:1}
.nbody time{font-size:12.5px;color:var(--muted)}
.nbody .nt{font-size:18px;font-weight:700;line-height:1.35;color:var(--ink)}
.nbody .lk{margin-top:auto;padding-top:10px;font-size:14px;font-weight:600;color:var(--acc-d)}
/* form fallback for installs without the CF7 form */
.cf-fallback p{font-size:15.5px;color:var(--muted);line-height:1.65}
.cf-fallback .cf-fine a{color:var(--acc-d);font-weight:600}
/* ---------------- contact strip — top of every page ----------------
Contact is the page's most important action, so it gets its own clear line
before anything else, not a corner of the utility bar. */
.cbar{background:var(--acc-l);border-bottom:1px solid #F3D4C3}
.cbar-in{max-width:var(--wrap);margin:0 auto;padding:9px 28px;display:flex;align-items:center;gap:22px;
font-size:13.5px;flex-wrap:wrap}
.cbar b{color:var(--acc-d);font-size:13px}
.cbar a{color:var(--ink);font-weight:600}
.cbar a:hover{color:var(--acc-d)}
.cbar .cbar-q{margin-left:auto;color:var(--acc-d)}
@media(max-width:600px){.cbar-in{gap:14px;padding:8px 18px}.cbar .cbar-q{margin-left:0}}
/* two-step enquiry */
#cf-step-b[hidden],#cf-all-done[hidden]{display:none}
.cf-sent-note{background:#EDF7EE;border:1px solid #CBE7CE;border-radius:10px;
padding:13px 16px;font-size:14.5px;margin:0 0 20px;line-height:1.55}