/* MUVE brand-book styles: colours (book page 11), type (page 12), icons (page 14) and the website screen (page 21).
   Light pages, blue buttons, gold sparingly. Used by every page except the archived "Home (original design)". */

@font-face{font-family:"Archivo";font-style:normal;font-display:swap;font-weight:100 900;font-stretch:62% 125%;src:url("../fonts/archivo-variable.woff2") format("woff2-variations"),url("../fonts/archivo-variable.woff2") format("woff2")}

:root{
  --blue:#2B429D;--gold:#CF9434;--paper:#F4F1EA;--white:#FFFFFF;--stone:#E6E1D5;--rule:#CBC4B4;--steel:#545A6B;--ink:#14192B;
  --on-ink:#B9BDC8;--on-ink-quiet:#9CA1B0;--on-blue:#DCE0F0;
  --max:1440px;--pad:clamp(20px,4.45vw,64px);--edge:max(var(--pad),calc((100vw - var(--max)) / 2 + var(--pad)));--header:96px;
  --font:"Archivo",Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--header) + 16px)}
body{margin:0;background:var(--white);color:var(--ink);font-family:var(--font);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3,p,ul,ol,dl,dd,blockquote{margin:0}
h1,h2,h3{font-weight:600}
ul,ol{padding:0;list-style:none}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link:focus{clip:auto;width:auto;height:auto;margin:0;left:16px;top:16px;z-index:1000;padding:12px 16px;background:var(--white);color:var(--ink);outline:2px solid var(--blue)}
.wrap{width:min(100%,var(--max));margin-inline:auto;padding-inline:var(--pad)}

/* Type: Archivo SemiExpanded SemiBold headlines, Archivo Regular text */
.hero-title,.section-title,.steps h3,.services-title,.band-quote,.facts dd,.name-list li,.footer-motto,.numbered h3,.link-cards strong,.service-row h3,.directory-item h3,.story h3,.entry-content h2,.entry-content h3{font-stretch:112.5%;font-weight:600}
.hero-title{max-width:640px;font-size:clamp(34px,4.3vw,62px);line-height:1.1;letter-spacing:-.022em;text-wrap:pretty}
.section-title{font-size:clamp(28px,3vw,44px);line-height:1.14;letter-spacing:-.02em;text-wrap:balance}
.lead{font-size:clamp(17px,1.4vw,20px);line-height:1.5;color:var(--steel)}
.body-large{font-size:clamp(18px,1.6vw,22px);line-height:1.5;max-width:34em;text-wrap:pretty}

/* Buttons and links: MUVE Blue */
.button{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 26px;border:1.5px solid var(--blue);background:var(--blue);color:var(--white);font-size:16px;font-weight:600;line-height:1.2;text-decoration:none;white-space:nowrap;cursor:pointer;transition:background-color .2s ease,border-color .2s ease,color .2s ease}
.button:hover{background:var(--ink);border-color:var(--ink)}
.button--line{background:transparent;border-color:var(--ink);color:var(--ink)}
.button--line:hover{background:var(--ink);color:var(--white)}
.button--light{background:transparent;border-color:var(--white);color:var(--white)}
.button--light:hover{background:var(--white);border-color:var(--white);color:var(--blue)}
.text-link{display:inline-flex;align-items:center;gap:10px;color:var(--blue);font-weight:600;text-decoration:none}
.text-link:hover{text-decoration:underline;text-underline-offset:5px}
.arrow{flex:none;width:20px;height:20px;transition:transform .2s ease}
.text-link:hover .arrow{transform:translateX(3px)}

/* Header: full-colour logo on white, gold only for the current page */
.site-header{position:sticky;top:0;z-index:100;background:var(--white);border-bottom:1px solid var(--stone)}
.admin-bar .site-header{top:32px}
.header-inner{display:flex;align-items:center;gap:40px;height:var(--header)}
.brand{flex:none;display:block}
.brand img{width:168px;height:auto}
.primary-nav{margin-left:auto}
.primary-nav ul{display:flex;gap:40px}
.primary-nav ul a{position:relative;display:block;padding:8px 0;color:var(--ink);font-size:16px;font-weight:500;text-decoration:none;transition:color .2s ease}
.primary-nav ul a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .25s ease}
.primary-nav ul a:hover{color:var(--blue)}
.primary-nav .current-menu-item>a::after{transform:scaleX(1)}
.nav-quote{display:none}
.header-actions{display:flex;align-items:center;gap:16px}
.menu-toggle{display:none;width:44px;height:44px;margin-right:-10px;padding:0;border:0;background:none;cursor:pointer}
.menu-toggle span{display:block;width:24px;height:2px;margin:5px auto;background:var(--ink);transition:transform .25s ease,opacity .2s ease}
.menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Hero: paper ground, untinted photo, no text on the photo */
.hero{display:grid;grid-template-columns:52.2fr 47.8fr;min-height:clamp(520px,calc(100svh - var(--header) - 240px),760px);background:var(--paper)}
.hero-copy{display:flex;flex-direction:column;justify-content:center;padding:64px clamp(32px,4vw,64px) 72px var(--edge)}
.hero-lead{margin-top:36px;max-width:32em;color:var(--steel);font-size:clamp(17px,1.4vw,20px);line-height:1.5}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:48px}
.hero-photo{position:relative;display:block;min-height:320px;overflow:hidden;background:var(--stone)}
.hero-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:46% center}

/* Page headers on inner pages: the same hero, shorter; text-only when there is no photo */
.hero--page{min-height:clamp(440px,56vh,600px)}
.hero--page .hero-title{max-width:17em;font-size:clamp(32px,3.6vw,52px)}
.hero--page .hero-lead{margin-top:28px}
.hero--page .hero-actions{margin-top:40px}
.hero--text{display:block;min-height:0}
.hero--text .hero-copy{padding:clamp(56px,7vw,104px) var(--edge) clamp(56px,6vw,88px)}
.crumbs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px;color:var(--steel);font-size:15px}
.crumbs a{color:var(--steel);text-decoration:none}
.crumbs a:hover{color:var(--blue);text-decoration:underline;text-underline-offset:4px}
.crumbs [aria-current]{color:var(--ink)}
.kicker{display:block;margin-bottom:12px;color:var(--steel);font-size:16px;font-weight:500}

/* Products: six plates, captions under each */
.products{padding:28px 0 64px;background:var(--white)}
.product-strip{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:24px}
.product{display:block;color:var(--ink);text-decoration:none}
.product-photo{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;background:var(--stone)}
.product-photo img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.product:hover .product-photo img{transform:scale(1.03)}
.product-name{display:block;margin-top:14px;font-size:17px;font-weight:600;line-height:22px;transition:color .2s ease}
.product:hover .product-name{color:var(--blue)}
.product .arrow{display:none}

/* Sections */
.section{padding:clamp(72px,8vw,128px) 0}
.section--paper{background:var(--paper)}
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(40px,6vw,96px);align-items:start}
.split-body .text-link{margin-top:28px}
.split .lead{margin-top:24px;max-width:28em}
.split .button{margin-top:36px}
.section-head{margin-bottom:clamp(40px,5vw,72px)}
.split.section-head{align-items:end}

/* Numbered columns: hairline on top, number in MUVE Blue */
.numbered{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 24px;counter-reset:num}
.numbered--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.numbered li{counter-increment:num;padding-top:20px;border-top:1px solid var(--ink)}
.numbered li::before{content:counter(num,decimal-leading-zero);display:block;margin-bottom:28px;color:var(--blue);font-size:16px;font-weight:600}
.numbered h3{font-size:22px;line-height:1.3}
.numbered p{margin-top:10px;color:var(--steel)}

.link-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:40px 24px}
.link-cards a{display:flex;flex-direction:column;gap:8px;height:100%;padding-top:20px;border-top:1px solid var(--ink);color:var(--ink);text-decoration:none}
.link-cards strong{font-size:20px;line-height:1.3;transition:color .2s ease}
.link-cards span{color:var(--steel)}
.link-cards .arrow{margin-top:auto;padding-top:16px;width:36px;height:36px;color:var(--blue)}
.link-cards a:hover strong{color:var(--blue)}
.link-cards a:hover .arrow{transform:translateX(3px)}

/* Facts: a hairline spec row */
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:clamp(56px,6vw,88px);border-top:1px solid var(--ink)}
.facts div{padding:20px 24px 4px}
.facts div:first-child{padding-left:0}
.facts div+div{border-left:1px solid var(--rule)}
.facts dt{color:var(--steel);font-size:14px;font-weight:500}
.facts dd{margin-top:6px;font-size:20px;line-height:1.25}
.facts--2{grid-template-columns:repeat(2,minmax(0,1fr))}

/* Delivery steps and services */
.steps{counter-reset:step;border-top:1px solid var(--ink)}
.steps li{counter-increment:step;position:relative;padding:24px 0 24px 64px;border-bottom:1px solid var(--rule)}
.steps li::before{content:counter(step,decimal-leading-zero);position:absolute;left:0;top:24px;color:var(--blue);font-size:16px;font-weight:600;line-height:30px}
.steps h3{font-size:22px;line-height:30px}
.steps p{margin-top:6px;color:var(--steel)}
.services{margin-top:clamp(64px,7vw,104px)}
.services-title{font-size:22px;line-height:1.3}
.service-list{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:24px;margin-top:24px}
.service-list a{display:flex;flex-direction:column;gap:20px;padding-top:24px;border-top:1px solid var(--rule);color:var(--ink);font-size:18px;font-weight:600;line-height:1.3;text-decoration:none;transition:color .2s ease}
.service-list a:hover{color:var(--blue)}
.service-icon{width:40px;height:40px;color:var(--blue)}
.service-rows{margin-top:clamp(56px,6vw,88px);border-top:1px solid var(--ink)}
.service-row{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,4fr) minmax(0,5fr);gap:clamp(24px,4vw,64px);padding:40px 0;border-bottom:1px solid var(--rule)}
.service-row-label{display:flex;flex-direction:column;gap:16px;font-size:16px;font-weight:600}
.service-row h3{font-size:clamp(24px,2.2vw,30px);line-height:1.2;letter-spacing:-.015em}
.checks{display:grid;gap:10px;margin-top:20px}
.checks li{display:flex;align-items:flex-start;gap:12px;font-weight:500}
.check{flex:none;width:20px;height:20px;margin-top:2px;color:var(--blue)}

/* Industry directory: sticky index, gold marks the current environment */
.directory{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(40px,6vw,96px);align-items:start}
.directory-nav{position:sticky;top:calc(var(--header) + 32px)}
.admin-bar .directory-nav{top:calc(var(--header) + 64px)}
.directory-nav ol{border-top:1px solid var(--ink)}
.directory-tab{display:flex;gap:16px;padding:12px 0 12px 16px;border-bottom:1px solid var(--rule);border-left:2px solid transparent;color:var(--steel);font-weight:500;text-decoration:none;transition:color .2s ease,border-color .2s ease}
.directory-tab span{min-width:24px;color:var(--blue);font-weight:600}
.directory-tab:hover{color:var(--ink)}
.directory-tab.is-active{border-left-color:var(--gold);color:var(--ink);font-weight:600}
.directory-list{border-top:1px solid var(--ink)}
.directory-item{padding:32px 0 40px;border-bottom:1px solid var(--rule)}
.directory-number{display:block;margin-bottom:12px;color:var(--blue);font-weight:600}
.directory-mark{display:flex;align-items:center;gap:16px;margin-bottom:16px}
.directory-mark .directory-number{margin:0}
.directory-icon{width:44px;height:44px;color:var(--blue)}
.directory-item h3{font-size:clamp(26px,2.6vw,36px);line-height:1.15;letter-spacing:-.02em}
.directory-challenge{margin-top:16px;font-size:20px;font-weight:500;line-height:1.45}
.directory-copy{max-width:40em;margin-top:12px;color:var(--steel)}
.directory-meta{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:16px 32px;margin-top:28px}
.directory-meta p{font-weight:600}
.directory-meta p span{display:block;color:var(--steel);font-size:14px;font-weight:500}

/* Band: MUVE Blue panel beside an untinted photo */
.band{display:grid;grid-template-columns:1fr 1fr;min-height:clamp(480px,44vw,640px)}
.band-photo{position:relative;min-height:320px;overflow:hidden;background:var(--stone)}
.band-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.band-panel{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:clamp(48px,6vw,96px) var(--edge) clamp(48px,6vw,96px) clamp(32px,6vw,96px);background:var(--blue);color:var(--white)}
.band-panel::before{content:"";width:48px;height:3px;margin-bottom:32px;background:var(--gold)}
.band-quote p{max-width:15em;font-size:clamp(30px,3.2vw,46px);line-height:1.14;letter-spacing:-.02em;text-wrap:balance}
.band-panel>p{margin-top:24px;max-width:30em;color:var(--on-blue);font-size:18px}
.band-panel .button{margin-top:36px}

/* Names: a plain list (product applications) */
.name-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:24px;margin-top:clamp(48px,5vw,72px)}
.name-list li{padding:18px 0 40px;border-top:1px solid var(--rule);font-size:19px;line-height:1.3}
.section-head+.name-list{margin-top:0}

/* Industries: each environment with its MUVE icon, linked to its entry on the Industries page */
.industry-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:24px;margin-top:clamp(48px,5vw,72px)}
.industry-list a{display:flex;flex-direction:column;align-items:flex-start;gap:20px;height:100%;padding:24px 0 40px;border-top:1px solid var(--rule);color:var(--ink);font-size:19px;font-stretch:112.5%;font-weight:600;line-height:1.3;text-decoration:none;transition:color .2s ease}
.industry-list a:hover{color:var(--blue)}
.industry-icon{width:40px;height:40px;color:var(--blue)}

/* Product cards, product overview and the spec table */
.product-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:56px 24px}
.product-card{display:flex;flex-direction:column;height:100%;color:var(--ink);text-decoration:none}
.product-card .product-photo{margin-bottom:20px}
.product-card .kicker{margin-bottom:6px;font-size:15px}
.product-card h2{font-size:24px;font-stretch:112.5%;line-height:1.25;transition:color .2s ease}
.product-card p{margin-top:10px;color:var(--steel)}
.product-card .text-link{margin-top:auto;padding-top:20px}
.product-card:hover h2{color:var(--blue)}
.product-card:hover .product-photo img{transform:scale(1.03)}
.product-strip--5{grid-template-columns:repeat(5,minmax(0,1fr))}
.story{border-top:1px solid var(--ink)}
.story article{padding:24px 0 28px;border-bottom:1px solid var(--rule)}
.story h3{font-size:22px;line-height:1.3}
.story .entry-content{margin-top:10px}
.spec-table{width:100%;border-collapse:collapse;border-top:1px solid var(--ink)}
.spec-table th,.spec-table td{padding:16px 0;border-bottom:1px solid var(--rule);text-align:left;vertical-align:top}
.spec-table th{width:42%;padding-right:24px;color:var(--steel);font-weight:500}
.spec-table td{font-weight:600}

/* Page text */
.entry-content{max-width:46em}
.entry-content>*+*{margin-top:1em}
.entry-content h2{margin-top:56px;font-size:clamp(24px,2.4vw,32px);line-height:1.2;letter-spacing:-.015em}
.entry-content h3{margin-top:40px;font-size:22px;line-height:1.3}
.entry-content h2:first-child,.entry-content h3:first-child{margin-top:0}
.entry-content a{color:var(--blue);text-underline-offset:3px}
.entry-content ul,.entry-content ol{padding-left:1.25em}
.entry-content ul{list-style:square}
.entry-content ol{list-style:decimal}
.entry-content li+li{margin-top:.4em}
.entry-content li::marker{color:var(--blue)}
.plate{margin-bottom:32px;overflow:hidden}
.plate img{width:100%}

/* Contact and quotation form */
.form-layout{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,6vw,96px);align-items:start}
.form-layout .lead{margin-top:24px}
.contact-list{margin-top:40px;border-top:1px solid var(--ink)}
.contact-list div{display:grid;grid-template-columns:120px minmax(0,1fr);gap:16px;padding:16px 0;border-bottom:1px solid var(--rule)}
.contact-list dt{color:var(--steel);font-weight:500}
.contact-list dd{font-weight:600}
.contact-list a{text-decoration:none}
.contact-list a:hover{color:var(--blue);text-decoration:underline;text-underline-offset:4px}
.contact-whatsapp{margin-top:32px}
.quote-form{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.field{display:flex;flex-direction:column;gap:8px}
.field--full{grid-column:1/-1}
.field label{font-size:15px;font-weight:600}
.field input,.field select,.field textarea{width:100%;min-height:52px;padding:12px 14px;border:1px solid var(--rule);border-radius:0;background:var(--white);color:var(--ink);font:inherit;font-size:16px;transition:border-color .2s ease,box-shadow .2s ease}
.field select{appearance:none;padding-right:44px;background:var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232B429D' stroke-width='1.5' stroke-linecap='square'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center/20px}
.field textarea{min-height:160px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--blue);box-shadow:inset 0 0 0 1px var(--blue)}
.field ::placeholder{color:#8A8F9C}
.field .button{align-self:flex-start}
.form-status{margin-bottom:24px;padding:16px 18px;border-left:3px solid var(--blue);background:var(--paper)}
.honeypot{position:absolute;left:-9999px}

/* Intro film: the poster with a play button; the player's own controls take over once it plays */
.film-frame{position:relative;aspect-ratio:16/9;background:var(--blue)}
.film-video{display:block;width:100%;height:100%;background:var(--blue)}
.film-play{position:absolute;left:24px;bottom:24px;display:none;align-items:center;gap:12px;min-height:56px;padding:0 22px 0 18px;border:0;background:var(--white);color:var(--ink);font-size:17px;font-weight:600;cursor:pointer;transition:background-color .2s ease,color .2s ease}
.film-play span{margin-left:4px;color:var(--steel);font-weight:500;transition:color .2s ease}
.film-play-icon{width:22px;height:22px;color:var(--blue);transition:color .2s ease}
.film-play:hover{background:var(--ink);color:var(--white)}
.film-play:hover span{color:var(--on-ink)}
.film-play:hover .film-play-icon{color:var(--white)}
.film-play:focus-visible{outline-color:var(--white)}
.film.is-ready .film-play{display:inline-flex}
.film.is-playing .film-play{display:none}

/* Call to action */
.cta-inner{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:48px;align-items:center}
.cta .section-title{max-width:17em}
.cta-actions{display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.cta-contact{display:flex;flex-direction:column;gap:4px;font-size:16px}
.cta-contact a{text-decoration:none}
.cta-contact a:hover{color:var(--blue);text-decoration:underline;text-underline-offset:4px}

/* Footer: Ink ground, reversed logo, the letterhead's rule with its gold segment */
.site-footer{padding:clamp(64px,7vw,96px) 0 88px;background:var(--ink);color:var(--white)}
.footer-top{display:grid;grid-template-columns:1.4fr repeat(3,minmax(0,1fr));gap:48px}
.footer-logo{display:inline-block}
.footer-logo img{width:168px}
.footer-intro p{max-width:26em;margin-top:28px;color:var(--on-ink);font-size:16px}
.footer-col h2{margin-bottom:16px;color:var(--on-ink-quiet);font-size:14px;font-weight:500}
.footer-col li{margin:8px 0;font-size:16px;line-height:1.4;color:var(--on-ink)}
.footer-col a{color:var(--white);text-decoration:none}
.footer-col a:hover{text-decoration:underline;text-underline-offset:4px}
.footer-rule{position:relative;height:1px;margin-top:64px;background:rgba(255,255,255,.18)}
.footer-rule::before{content:"";position:absolute;left:0;top:-.5px;width:48px;height:2px;background:var(--gold)}
.footer-bottom{display:flex;flex-wrap:wrap;align-items:center;gap:12px 40px;padding-top:24px;color:var(--on-ink-quiet);font-size:14px}
.footer-motto{margin-right:auto;color:var(--white);font-size:14px;letter-spacing:.02em}
.xsofty-credit{display:flex;align-items:center;gap:10px}
.xsofty-logo{width:66px;height:auto;filter:brightness(0) invert(1);opacity:.75}

.back-to-top{position:fixed;right:20px;bottom:20px;z-index:90;display:grid;place-items:center;width:48px;height:48px;padding:0;border:1px solid var(--rule);background:var(--white);color:var(--blue);opacity:0;pointer-events:none;cursor:pointer;transform:translateY(8px);transition:opacity .2s ease,transform .3s ease,background-color .2s ease,color .2s ease}
.back-to-top:hover{border-color:var(--blue);background:var(--blue);color:var(--white)}
.back-to-top.is-visible{opacity:1;pointer-events:auto;transform:none}
.back-to-top-icon{width:22px;height:22px;transform:rotate(-90deg)}

@media (max-width:1180px){
  .header-inner{gap:28px}
  .primary-nav ul{gap:28px}
  .product-strip{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:36px}
}

@media (max-width:1080px){
  :root{--header:72px}
  .brand img{width:132px}
  .primary-nav{position:fixed;inset:var(--header) 0 0;z-index:99;display:none;flex-direction:column;margin:0;padding:16px var(--pad) 40px;overflow:auto;background:var(--white)}
  .admin-bar .primary-nav{top:calc(var(--header) + 32px)}
  .primary-nav.is-open{display:flex}
  .primary-nav ul{flex-direction:column;gap:0}
  .primary-nav li{border-bottom:1px solid var(--stone)}
  .primary-nav ul a{padding:18px 0;font-size:24px;font-stretch:112.5%;font-weight:600}
  .primary-nav ul a::after{right:auto;bottom:12px;width:32px}
  .nav-quote{display:inline-flex;align-self:stretch;margin-top:32px}
  .header-actions{margin-left:auto}
  .menu-toggle{display:block}
  .product-strip{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:36px}
  .split{grid-template-columns:1fr}
  .facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .facts div,.facts div:first-child{padding:20px 16px 20px 0;border-left:0}
  .facts div:nth-child(even){padding-left:16px;border-left:1px solid var(--rule)}
  .facts div:nth-child(n+3){border-top:1px solid var(--rule)}
  .service-list{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:36px}
  .name-list,.industry-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .numbered--4,.link-cards,.product-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .service-row{grid-template-columns:1fr;gap:16px}
  .service-row-label{flex-direction:row;align-items:center}
  .form-layout{grid-template-columns:1fr}
  .footer-top{grid-template-columns:1fr 1fr}
}

@media (max-width:782px){
  .admin-bar .site-header{top:46px}
  .admin-bar .primary-nav{top:calc(var(--header) + 46px)}
}

/* Phone: the brand book's mobile screen (photo first, one button, products as a list) */
@media (max-width:740px){
  body{font-size:16px}
  .brand img{width:108px}
  .header-quote{display:none}
  .hero{display:flex;flex-direction:column;min-height:0;background:var(--white)}
  .hero-photo{order:-1;min-height:0;aspect-ratio:5/4}
  .hero-photo img{object-position:center}
  .hero-copy{padding:28px var(--pad) 32px}
  .hero-title{font-size:31px;line-height:36px;letter-spacing:-.02em}
  .hero-lead{margin-top:20px;font-size:16px;line-height:24px}
  .hero-actions{flex-direction:column;align-items:stretch;margin-top:26px}
  .hero:not(.hero--page) .hero-actions .button--line{display:none}
  .hero--page{background:var(--paper)}
  .hero--page .hero-photo{aspect-ratio:16/10}
  .hero--text .hero-copy{padding:48px var(--pad) 40px}
  .products{padding:0 0 56px}
  .product-strip{display:block}
  .product-strip li{border-top:1px solid var(--rule)}
  .product-strip li:last-child{border-bottom:1px solid var(--rule)}
  .product{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0}
  .product-strip .product-photo{display:none}
  .numbered,.numbered--4,.link-cards,.product-cards{grid-template-columns:1fr}
  .directory{display:block}
  .directory-nav{display:none}
  .quote-form{grid-template-columns:1fr}
  .contact-list div{grid-template-columns:96px minmax(0,1fr)}
  .product-name{margin:0;font-size:16px;font-weight:500}
  .product .arrow{display:block;color:var(--blue)}
  .service-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .band{grid-template-columns:1fr}
  .band-photo{aspect-ratio:4/3;min-height:0}
  .band-panel{padding:48px var(--pad)}
  .name-list,.industry-list{grid-template-columns:1fr}
  .name-list li{padding:14px 0}
  .industry-list a{flex-direction:row;align-items:center;gap:16px;padding:14px 0;font-size:17px}
  .industry-icon{width:32px;height:32px}
  .directory-icon{width:36px;height:36px}
  .film-play{left:10px;bottom:10px;gap:8px;min-height:40px;padding:0 14px 0 10px;font-size:15px}
  .film-play-icon{width:18px;height:18px}
  .cta-inner{grid-template-columns:1fr;gap:32px}
  .cta-actions,.cta .button{align-self:stretch}
  .footer-top{grid-template-columns:1fr;gap:36px}
  .footer-bottom{flex-direction:column;align-items:flex-start}
}

/* Motion: things rise, like the arrow in the logo, a lift or an overhead door. Each block moves once, in .6s or less.
   html.muve-motion is set in the head only when motion is allowed; motion.js adds .is-visible as blocks enter. */
:root{--ease:cubic-bezier(.2,.7,.2,1);--ease-door:cubic-bezier(.7,0,.3,1)}
@keyframes muve-rise{from{opacity:0;transform:translateY(16px)}}
@keyframes muve-door{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0)}}
@keyframes muve-settle{from{transform:scale(1.06)}}
@keyframes muve-draw{from{background-size:0 1px}}
@keyframes muve-grow{from{transform:scaleX(0)}}

/* Arrival: the page header rises in sequence while its photo opens upward */
.muve-motion .hero-copy>*{animation:muve-rise .6s var(--ease) backwards}
.muve-motion .hero-copy>:nth-child(2){animation-delay:.07s}
.muve-motion .hero-copy>:nth-child(3){animation-delay:.14s}
.muve-motion .hero-copy>:nth-child(4){animation-delay:.21s}
.muve-motion .hero-copy>:nth-child(5){animation-delay:.28s}
.muve-motion .hero-photo{animation:muve-door .6s var(--ease-door) .1s backwards}
.muve-motion .hero-photo img{animation:muve-settle .6s var(--ease) .15s backwards}
.muve-motion .primary-nav .current-menu-item>a::after{animation:muve-grow .5s var(--ease) .3s backwards}

/* Scroll reveals (the selectors match motion.js) */
.muve-motion :is(.section-title,.body-large,.lead,.split-body>.text-link,.section-head>.text-link,.split .button,.services-title,.steps li,.facts>div,.service-list li,.numbered li,.link-cards li,.name-list li,.industry-list li,.product-strip li,.product-card>:not(.product-photo),.service-row>*,.directory-nav,.directory-item,.story article,.spec-table tr,.band-panel>*,.cta-actions,.contact-list>div,.contact-whatsapp,.quote-form,.entry-content:not(.story *)):not(.is-visible){opacity:0}
.muve-motion :is(.section-title,.body-large,.lead,.split-body>.text-link,.section-head>.text-link,.split .button,.services-title,.steps li,.facts>div,.service-list li,.numbered li,.link-cards li,.name-list li,.industry-list li,.product-strip li,.product-card>:not(.product-photo),.service-row>*,.directory-nav,.directory-item,.story article,.spec-table tr,.band-panel>*,.cta-actions,.contact-list>div,.contact-whatsapp,.quote-form,.entry-content:not(.story *)).is-visible{animation:muve-rise .6s var(--ease) var(--delay,0s) backwards}
/* Photos open from the bottom up, like an overhead door, then settle */
.muve-motion :is(.band-photo,.product-card>.product-photo,.plate,.film-frame):not(.is-visible){clip-path:inset(100% 0 0 0)}
.muve-motion :is(.band-photo,.product-card>.product-photo,.plate,.film-frame).is-visible{animation:muve-door .6s var(--ease-door) var(--delay,0s) backwards}
.muve-motion :is(.band-photo,.product-card>.product-photo,.plate,.film-frame).is-visible img{animation:muve-settle .6s var(--ease) var(--delay,0s) backwards}
/* Hairlines draw left to right */
.muve-motion :is(.steps,.facts,.service-rows,.directory-list,.story,.contact-list){border-top-color:transparent;background:linear-gradient(var(--ink),var(--ink)) 0 0/100% 1px no-repeat border-box}
.muve-motion :is(.steps,.facts,.service-rows,.directory-list,.story,.contact-list):not(.is-visible){background-size:0 1px}
.muve-motion :is(.steps,.facts,.service-rows,.directory-list,.story,.contact-list).is-visible{animation:muve-draw .6s var(--ease) var(--delay,0s) backwards}
.muve-motion .band-panel::before,.muve-motion .footer-rule{transform-origin:left}
.muve-motion .band-panel:not(.is-visible)::before,.muve-motion .footer-rule:not(.is-visible){transform:scaleX(0)}
.muve-motion .band-panel.is-visible::before,.muve-motion .footer-rule.is-visible{animation:muve-grow .6s var(--ease) var(--delay,0s) backwards}
/* Industry icons draw their lines in, ground line first (each path has pathLength="1") */
@keyframes muve-line{from{stroke-dashoffset:1;opacity:0}15%{opacity:1}to{stroke-dashoffset:0}}
.muve-motion :is(.industry-icon,.directory-icon) path{stroke-dasharray:1}
.muve-motion :is(.industry-list li,.directory-item):not(.is-visible) :is(.industry-icon,.directory-icon) path{stroke-dashoffset:1}
.muve-motion :is(.industry-list li,.directory-item).is-visible :is(.industry-icon,.directory-icon) path{animation:muve-line .9s var(--ease) calc(var(--delay,0s) + .2s) backwards}
.muve-motion .is-visible :is(.industry-icon,.directory-icon) path:nth-child(2){animation-delay:calc(var(--delay,0s) + .32s)}
.muve-motion .is-visible :is(.industry-icon,.directory-icon) path:nth-child(3){animation-delay:calc(var(--delay,0s) + .44s)}
.muve-motion .is-visible :is(.industry-icon,.directory-icon) path:nth-child(n+4){animation-delay:calc(var(--delay,0s) + .56s)}

/* Lift-style progress: a blue line fills as you read; the gold car marks the current industry (motion.js sets the values) */
.service-row-label{transition:color .3s ease}
.service-rows.has-current .service-row-label{color:var(--steel)}
.service-rows.has-current .service-row.is-current .service-row-label{color:var(--blue)}
.directory-nav ol.has-shaft{position:relative}
.directory-nav ol.has-shaft::before,.directory-nav ol.has-shaft::after{content:"";position:absolute;top:0;left:0;width:2px;pointer-events:none}
.directory-nav ol.has-shaft::before{height:100%;background:var(--blue);transform:scaleY(var(--progress,0));transform-origin:top}
.directory-nav ol.has-shaft::after{height:var(--car-h,0);background:var(--gold);transform:translateY(var(--car-y,0));transition:transform .35s var(--ease),height .35s var(--ease)}
.directory-nav ol.has-shaft .directory-tab.is-active{border-left-color:transparent}

/* Hover and press: the MUVE arrow slides into buttons; a blue bar rises under product photos */
.product-photo::after{content:"";position:absolute;inset:auto 0 0;height:4px;background:var(--blue);transform:scaleY(0);transform-origin:bottom;transition:transform .25s var(--ease)}
:is(.product,.product-card):is(:hover,:focus-visible) .product-photo::after{transform:none}
.button:active{transform:translateY(1px)}
@media (hover:hover){
  .button{position:relative;transition:background-color .2s ease,border-color .2s ease,color .2s ease,padding .25s var(--ease)}
  .button::after{content:"";position:absolute;top:50%;right:14px;width:16px;height:16px;margin-top:-8px;background:currentColor;-webkit-mask:url("../icons/muve/muve-icon-ui-arrow-right.svg") center/contain no-repeat;mask:url("../icons/muve/muve-icon-ui-arrow-right.svg") center/contain no-repeat;opacity:0;transform:translateX(-8px);transition:opacity .2s ease,transform .25s var(--ease)}
  .button:hover{padding-left:14px;padding-right:38px}
  .button:hover::after{opacity:1;transform:none}
}

/* Header tightens once the page moves (transforms only, so nothing below it shifts) */
@media (min-width:1081px){
  .site-header,.header-inner,.brand img{transition:transform .3s var(--ease),box-shadow .3s ease}
  .brand img{transform-origin:left center}
  .site-header.is-scrolled{transform:translateY(-24px);box-shadow:0 12px 32px -24px rgba(20,25,43,.5)}
  .site-header.is-scrolled .header-inner{transform:translateY(12px)}
  .site-header.is-scrolled .brand img{transform:scale(.82)}
  .service-rows.has-shaft{position:relative}
  .service-rows.has-shaft::before,.service-rows.has-shaft::after{content:"";position:absolute;top:0;bottom:0;left:calc(var(--pad) / -2);width:1px;background:var(--rule);pointer-events:none}
  .service-rows.has-shaft::after{left:calc(var(--pad) / -2 - 1px);width:3px;background:var(--blue);transform:scaleY(var(--progress,0));transform-origin:top}
}

/* Phone menu: links rise in turn as it opens */
@media (max-width:1080px){
  .muve-motion .primary-nav.is-open :is(li,.nav-quote){animation:muve-rise .4s var(--ease) backwards}
  .muve-motion .primary-nav.is-open li:nth-child(2){animation-delay:.04s}
  .muve-motion .primary-nav.is-open li:nth-child(3){animation-delay:.08s}
  .muve-motion .primary-nav.is-open li:nth-child(4){animation-delay:.12s}
  .muve-motion .primary-nav.is-open li:nth-child(5){animation-delay:.16s}
  .muve-motion .primary-nav.is-open li:nth-child(6){animation-delay:.2s}
  .muve-motion .primary-nav.is-open .nav-quote{animation-delay:.24s}
}

/* Page changes cross-fade where the browser supports it */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  ::view-transition-old(root),::view-transition-new(root){animation-duration:.3s}
}

@media print{
  .muve-motion *{opacity:1!important;clip-path:none!important;animation:none!important}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important}
}