/* ==========================================================================
   Sign Design GB  |  site.css
   Digital Design NE Ltd
   --------------------------------------------------------------------------
   1. Brand tokens (swap colours / fonts here)
   2. Base
   3. Components (tags, buttons, media placeholders, cards)
   4. Chrome (loader, transition, nav, menu)
   5. Home sections
   6. Inner page template
   7. Footer
   8. Responsive
   ========================================================================== */

/* 1. BRAND TOKENS ---------------------------------------------------------- */
:root{
  /* Sign Design GB brand tokens (content pack: brand/tokens.css) */
  --ink:#0B0B0D;          /* primary text, dark sections */
  --night:#08080A;        /* deepest background */
  --ink-2:#141416;        /* smoke: cards and panels on dark */
  --paper:#F6F4F1;        /* warm white, the page canvas */
  --white:#FFFFFF;        /* cards, tiles, forms */
  --mist:#ECE9E4;         /* warm band between paper sections */
  --stone:#C9C9C7;        /* original brand grey, unrevealed text */
  --line:rgba(11,11,13,.13);
  --muted:rgba(11,11,13,.58);
  --pink:#EC008C;         /* the brand spark: wordmark dot, headline stops */
  --accent:#EC008C;       /* per section: signage pink, fleet bronze, interiors sage */
  --accent-tint:#FBDDEE;
  --accent-soft:#FBDDEE;
  --on-accent:#FFFFFF;
  --clay:#C85A4A; --sun:#F0D878; --moss:#8A9A6B; --iris:#A89BD4; --sand:#D4B896;

  --font-display:"Outfit",-apple-system,"Segoe UI",sans-serif;
  --font-sans:"Figtree",-apple-system,"Segoe UI",sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,monospace;

  --gut:20px;
  --gap:12px;
  --radius:6px;
  --nav-h:76px;
  --ease:cubic-bezier(.19,1,.22,1);
  --ease-io:cubic-bezier(.77,0,.18,1);
  --w-display:700;
}

/* Brand fonts, self-hosted (SIL Open Font Licence, licences in assets/fonts) */
@font-face{font-family:"Outfit";src:url("../fonts/Outfit-Variable.ttf") format("truetype");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Figtree";src:url("../fonts/Figtree-Variable.ttf") format("truetype");font-weight:300 900;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("../fonts/IBMPlexMono-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("../fonts/IBMPlexMono-Medium.ttf") format("truetype");font-weight:500;font-style:normal;font-display:swap}

/* 2. BASE ------------------------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:auto}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-sans);font-size:16px;line-height:1.4;font-weight:500;font-optical-sizing:auto;font-feature-settings:"kern" 1;font-kerning:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;overflow-x:hidden}
img,video,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
h1,h2,h3,h4,p,figure,ul,ol{margin:0;padding:0}
ul,ol{list-style:none}
::selection{background:var(--accent);color:var(--on-accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:fixed;left:12px;top:-60px;z-index:999;background:var(--ink);color:#fff;padding:10px 14px;border-radius:var(--radius);font-family:var(--font-mono);font-size:12px}
.skip:focus{top:12px}

.wrap{padding-left:var(--gut);padding-right:var(--gut)}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap)}

.h1{font-size:clamp(42px,4.3vw,88px);line-height:1;letter-spacing:-.027em;font-weight:var(--w-display)}
.xl{font-size:clamp(30px,3.25vw,64px);line-height:1.03;letter-spacing:-.022em;font-weight:var(--w-display)}
.lg{font-size:clamp(24px,2vw,38px);line-height:1.06;letter-spacing:-.025em;font-weight:var(--w-display)}
.s{font-size:clamp(15px,1.02vw,19px);line-height:1.24;letter-spacing:-.012em;font-weight:600}
.mono{font-family:var(--font-mono);font-size:12px;line-height:1.35;letter-spacing:.02em;text-transform:uppercase;font-weight:400}

.sec{position:relative;z-index:2;padding:clamp(72px,9vw,150px) 0}
.sec--white{background:var(--paper)}
.sec--mist{background:var(--mist)}
.sec--ink{background:var(--ink);color:#fff}

/* 3. COMPONENTS ------------------------------------------------------------ */
/* Tags ("S.01" + section name) */
.eyebrows{display:inline-flex;flex-direction:column;gap:3px;align-items:flex-start}
.tag{display:inline-block;font-family:var(--font-mono);font-size:11px;line-height:1;letter-spacing:.03em;text-transform:uppercase;font-weight:500;padding:4px 6px 3px;border:1.2px solid currentColor;border-radius:4px;white-space:nowrap}
.tag--fill{background:var(--ink);border-color:var(--ink);color:#fff}
.sec--ink .tag--fill,.tag--invert{background:#fff;border-color:#fff;color:var(--ink)}

/* Section intro: tags sit inline before the large statement */
.intro{position:relative;max-width:min(1360px,76vw)}
.intro .eyebrows{position:absolute;left:0;top:.2em}
.intro .xl{text-indent:clamp(84px,8.2vw,160px)}

/* Split text reveal */
[data-reveal] .w,.slide .w{display:inline-block;white-space:nowrap;text-indent:0}
[data-reveal] .c{color:var(--stone);transition:color .45s ease}
[data-reveal] .c.on{color:var(--ink)}
.sec--ink [data-reveal] .c{color:rgba(255,255,255,.22)}
.sec--ink [data-reveal] .c.on{color:#fff}

/* Buttons */
.btn{--h:42px;display:inline-flex;align-items:center;gap:0;height:var(--h);padding:0 4px 0 18px;background:var(--ink);color:#fff;border-radius:7px;font-family:var(--font-mono);font-size:12.5px;letter-spacing:.04em;text-transform:uppercase;font-weight:500;white-space:nowrap;transition:background .3s}
.btn__label{position:relative;display:block;overflow:hidden;height:1.35em;line-height:1.35em;margin-right:22px}
.btn__label span{display:block;transition:transform .55s var(--ease)}
.btn__arrow{display:grid;place-items:center;width:34px;height:34px;background:#fff;color:var(--ink);border-radius:5px;transition:width .5s var(--ease)}
.btn__arrow svg{width:11px;height:11px}
.btn:hover .btn__label span{transform:translateY(-100%)}
.btn:hover .btn__arrow{width:44px}
.btn--light{background:#fff;color:var(--ink)}
.btn--light .btn__arrow{background:var(--ink);color:#fff}
.btn--accent .btn__arrow{background:var(--accent);color:var(--on-accent)}

/* Media placeholder: shows until a real image with the same path exists */
.media{position:relative;overflow:hidden;border-radius:var(--radius);background:
  radial-gradient(70% 55% at 72% 28%,color-mix(in srgb,var(--accent) 16%,transparent),transparent 70%),
  radial-gradient(50% 40% at 20% 85%,rgba(170,190,210,.10),transparent 70%),
  linear-gradient(160deg,#2A2C2F 0%,#151618 70%)}
.media::before{content:attr(data-label);position:absolute;left:12px;top:12px;right:12px;z-index:0;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.05em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.media::after{content:"";position:absolute;inset:0;z-index:0;background:
  linear-gradient(rgba(255,255,255,.35),rgba(255,255,255,.35)) left 12px bottom 12px/10px 1px no-repeat,
  linear-gradient(rgba(255,255,255,.35),rgba(255,255,255,.35)) left 12px bottom 12px/1px 10px no-repeat,
  linear-gradient(rgba(255,255,255,.35),rgba(255,255,255,.35)) right 12px bottom 12px/10px 1px no-repeat,
  linear-gradient(rgba(255,255,255,.35),rgba(255,255,255,.35)) right 12px bottom 12px/1px 10px no-repeat}
.media img,.media video{position:absolute;left:0;top:-8%;width:100%;height:116%;object-fit:cover;z-index:1;will-change:transform}
.media--static img{top:0;height:100%}

/* In-view fades */
[data-in]{opacity:0;transform:translateY(28px);transition:opacity 1s var(--ease),transform 1.2s var(--ease);transition-delay:calc(var(--i,0) * 70ms)}
[data-in].is-in{opacity:1;transform:none}

/* 4. CHROME ---------------------------------------------------------------- */
/* Loader: an illuminated sign powering on */
.loader{position:fixed;inset:0;z-index:200;background:var(--ink);display:grid;place-items:center;color:#fff;transition:opacity .9s ease .1s,visibility 0s linear 1s}
.loader__mark{display:flex;align-items:center;gap:10px}
.loader__icon{width:34px;height:34px;border-radius:7px;background:#fff;display:grid;place-items:center;color:var(--ink);opacity:0;transform:scale(.6);box-shadow:0 0 0 color-mix(in srgb,var(--accent) 0%,transparent)}
.loader__icon svg{width:20px;height:20px}
.loader__word{font-weight:600;font-size:22px;letter-spacing:-.02em;white-space:nowrap;clip-path:inset(0 100% 0 0);text-shadow:0 0 0 color-mix(in srgb,var(--accent) 0%,transparent)}
.is-loading .loader__icon{animation:ld-icon .6s var(--ease) .15s forwards,ld-flicker 1.1s steps(1) .7s forwards}
.is-loading .loader__word{animation:ld-word 1s var(--ease) .75s forwards,ld-glow 1.2s ease 1.2s forwards}
.loader.is-done{opacity:0;visibility:hidden}
html:not(.is-loading) .loader{display:none}
@keyframes ld-icon{to{opacity:1;transform:none}}
@keyframes ld-word{to{clip-path:inset(0 0 0 0)}}
@keyframes ld-flicker{0%{box-shadow:0 0 22px color-mix(in srgb,var(--accent) 80%,transparent)}8%{box-shadow:0 0 0 color-mix(in srgb,var(--accent) 0%,transparent)}14%{box-shadow:0 0 26px color-mix(in srgb,var(--accent) 90%,transparent)}20%{box-shadow:0 0 4px color-mix(in srgb,var(--accent) 20%,transparent)}30%,100%{box-shadow:0 0 30px color-mix(in srgb,var(--accent) 75%,transparent)}}
@keyframes ld-glow{0%{text-shadow:0 0 0 color-mix(in srgb,var(--accent) 0%,transparent)}100%{text-shadow:0 0 18px color-mix(in srgb,var(--accent) 55%,transparent)}}

/* Page transition: card swap */
.pagewrap{position:relative;background:var(--paper)}
html.t-any,html.t-any body{background:var(--ink)}
.pt{position:fixed;left:0;right:0;top:0;z-index:190;height:var(--pt-strip,56px);display:grid;place-items:center;pointer-events:none;opacity:0;transition:opacity .4s ease}
.t-any .pt{opacity:1}
.pt__label{display:block;color:#fff;font-size:clamp(18px,1.35vw,26px);font-weight:var(--w-display);letter-spacing:-.02em}
.pt__label.in{animation:pt-label .6s var(--ease) both}
@keyframes pt-label{from{opacity:0;transform:translateY(60%)}to{opacity:1;transform:none}}
.t-any .nav{opacity:0;pointer-events:none}
.t-card .pagewrap{--pt-s:.965;transform-origin:50% var(--pt-oy,50vh);transform:translate3d(0,calc(var(--pt-strip,56px) - 1.75vh),0) scale(var(--pt-s));clip-path:inset(var(--pt-top,0px) 0 var(--pt-bot,calc(100% - 100vh)) 0 round 14px);transition:transform .7s var(--ease-io),clip-path .7s var(--ease-io);will-change:transform;pointer-events:none}
.t-card.t-away .pagewrap{transform:translate3d(-104vw,calc(var(--pt-strip,56px) - 1.75vh),0) scale(var(--pt-s));transition:transform .6s var(--ease-io)}
.t-in .pagewrap{transform:translate3d(104vw,calc(var(--pt-strip,56px) - 1.75vh),0) scale(var(--pt-s));transition:none}
.t-in.t-go .pagewrap{transform:translate3d(0,calc(var(--pt-strip,56px) - 1.75vh),0) scale(var(--pt-s));transition:transform .75s var(--ease-io)}
.t-card.t-open .pagewrap{transform:none;clip-path:inset(var(--pt-top,0px) 0 var(--pt-bot,calc(100% - 100vh)) 0 round 0);transition:transform .75s var(--ease-io),clip-path .75s var(--ease-io)}

/* Nav */
.nav{position:fixed;left:0;right:0;top:0;z-index:120;height:var(--nav-h);display:flex;align-items:center;justify-content:space-between;padding:0 var(--gut);color:#fff;mix-blend-mode:difference;pointer-events:none}
.nav > *{pointer-events:auto}
.logo{display:inline-flex;align-items:center;gap:9px;height:36px;padding:0 12px 0 4px;border:2px solid currentColor;border-radius:7px;font-weight:600;font-size:17px;letter-spacing:-.02em;white-space:nowrap}
.logo__icon{width:26px;height:26px;border-radius:5px;background:currentColor;display:grid;place-items:center}
.logo__icon svg{width:14px;height:14px;color:#000}
.logo img{height:22px;width:auto}
.logo.has-img .logo__txt,.logo.has-img .logo__icon{display:none}
.menu-btn{display:flex;align-items:center;gap:12px}
.menu-btn__label{position:relative;overflow:hidden;height:1.3em;font-size:16px;font-weight:600;letter-spacing:-.01em;line-height:1.3em}
.menu-btn__label span{display:block;transition:transform .6s var(--ease)}
.menu-btn__icon{position:relative;width:48px;height:48px;border:2px solid currentColor;border-radius:50%}
.menu-btn__icon i{position:absolute;left:13px;right:13px;height:2px;background:currentColor;transition:transform .6s var(--ease),top .6s var(--ease)}
.menu-btn__icon i:nth-child(1){top:18px}
.menu-btn__icon i:nth-child(2){top:26px}
.menu-open .menu-btn__label span{transform:translateY(-100%)}
.menu-open .menu-btn__icon i:nth-child(1){top:22px;transform:rotate(45deg)}
.menu-open .menu-btn__icon i:nth-child(2){top:22px;transform:rotate(-45deg)}
.page-hidden .nav{opacity:0}
.nav{transition:opacity .8s ease,transform .8s var(--ease)}
.nav-hidden .nav{transform:translate3d(0,-120%,0)}
.menu-open .nav{transform:none}

/* Menu panel */
.menu{position:fixed;inset:0;z-index:110;background:var(--ink);color:#fff;display:flex;flex-direction:column;justify-content:flex-end;padding:calc(var(--nav-h) + 40px) var(--gut) var(--gut);clip-path:inset(0 0 100% 0);transition:clip-path .9s var(--ease-io);visibility:hidden}
.menu-open .menu{clip-path:inset(0 0 0 0);visibility:visible}
.menu:not(.is-closing){transition:clip-path .9s var(--ease-io),visibility 0s linear .9s}
.menu-open .menu{transition:clip-path .9s var(--ease-io),visibility 0s}
.menu__cols{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.menu__col li{overflow:hidden}
.menu__link{display:inline-flex;align-items:baseline;gap:12px;font-size:clamp(36px,4.4vw,84px);line-height:1.04;letter-spacing:-.027em;font-weight:var(--w-display);transform:translateY(105%);transition:transform .9s var(--ease),color .3s}
.menu__link .mono{color:rgba(255,255,255,.4);font-size:10px;transform:translateY(-1.6em)}
.menu__link:hover{color:var(--accent)}
.menu-open .menu__link{transform:none;transition-delay:calc(.25s + var(--i,0) * 50ms)}
.menu__meta{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;margin-top:clamp(40px,7vh,90px);padding-top:16px;border-top:1px solid rgba(255,255,255,.14);color:rgba(255,255,255,.6);opacity:0;transition:opacity .6s ease}
.menu-open .menu__meta{opacity:1;transition-delay:.55s}
.menu__meta a:hover{color:#fff}

/* 5. HOME SECTIONS --------------------------------------------------------- */
/* Stack: hero stays pinned while About slides over it */
.stack{position:relative}
.hero{position:sticky;top:0;height:100vh;height:100svh;min-height:560px;overflow:hidden;background:#07080A;color:#fff;z-index:1}
.hero__bg{position:absolute;inset:0}
.hero__wall{position:absolute;inset:0;background:
  radial-gradient(120% 80% at 50% 38%,#1C1D20 0%,#0C0D0F 55%,#060708 100%)}
.hero__spot{position:absolute;inset:0;background:radial-gradient(420px 320px at var(--mx,60%) var(--my,40%),color-mix(in srgb,var(--accent) 9%,transparent),transparent 70%);transition:opacity .6s}
.halo{position:absolute;left:0;right:0;top:19%;display:grid;place-items:center;font-weight:700;font-size:15.2vw;line-height:.8;letter-spacing:-.045em;white-space:nowrap;user-select:none;pointer-events:none;transform-origin:50% 30%}
.halo > span{grid-area:1/1;position:relative}
.halo__face{z-index:1}
.halo__glow{color:transparent;text-shadow:0 0 3px color-mix(in srgb,var(--accent) 55%,#fff),0 0 22px color-mix(in srgb,var(--accent) 60%,transparent),0 0 70px color-mix(in srgb,var(--accent) 35%,transparent),0 0 160px color-mix(in srgb,var(--accent) 22%,transparent);opacity:0;animation:halo-breathe 7s ease-in-out infinite paused}
.halo__face{color:#0B0C0D;-webkit-text-stroke:1px rgba(255,255,255,.035)}
.is-lit .halo__glow{animation:halo-on 1.4s steps(1) forwards,halo-breathe 7s ease-in-out 1.4s infinite}
@keyframes halo-on{0%{opacity:.9}6%{opacity:0}11%{opacity:.8}17%{opacity:.1}24%{opacity:1}30%{opacity:.35}38%,100%{opacity:1}}
@keyframes halo-breathe{0%,100%{opacity:1}50%{opacity:.82}}
.hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.2s ease}
.has-video .hero__video{opacity:1}
.hero__grain{position:absolute;inset:-50%;opacity:.09;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");animation:grain 1s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}
.hero__shade{position:absolute;inset:0;background:#000;opacity:0}
.hero__content{position:absolute;left:0;right:0;bottom:clamp(170px,26vh,260px);display:flex;justify-content:space-between;align-items:flex-end;gap:24px;will-change:transform}
.hero__title .ln{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
.hero__title .ln > span{display:block;transform:translateY(110%);transition:transform 1.3s var(--ease)}
.hero__meta{text-align:left;min-width:260px;color:rgba(255,255,255,.82)}
.hero__meta .ln{display:block;overflow:hidden}
.hero__meta .ln > span{display:block;transform:translateY(110%);transition:transform 1s var(--ease)}
.hero__cards{position:absolute;right:0;bottom:var(--gut);display:flex;gap:var(--gap)}
.hcard{position:relative;display:block;width:clamp(160px,12.4vw,240px);aspect-ratio:1.45/1;border-radius:var(--radius);overflow:hidden;opacity:0;transform:translateY(24px);transition:opacity 1s var(--ease),transform 1.2s var(--ease)}
.hcard .media{position:absolute;inset:0;border-radius:0}
.hcard .media img{top:0;height:100%;transition:transform 1.2s var(--ease)}
.hcard:hover .media img{transform:scale(1.06)}
.hcard__bar{position:absolute;left:6px;right:6px;bottom:6px;z-index:2;display:flex;align-items:center;justify-content:space-between;height:28px;padding:0 3px 0 9px;background:#fff;color:var(--ink);border-radius:4px;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase}
.hcard__bar b{display:grid;place-items:center;width:22px;height:22px;border-radius:2px;background:var(--ink);color:#fff;font-weight:400;transition:width .5s var(--ease)}
.hcard__bar b svg{width:7px;height:7px}
.hcard:hover .hcard__bar b{width:26px}
.hero-in .hero__title .ln > span,.hero-in .hero__meta .ln > span{transform:none}
.hero-in .hero__title .ln:nth-child(2) > span{transition-delay:.08s}
.hero-in .hero__meta .ln:nth-child(1) > span{transition-delay:.25s}
.hero-in .hero__meta .ln:nth-child(2) > span{transition-delay:.33s}
.hero-in .hcard{opacity:1;transform:none;transition-delay:calc(.45s + var(--i,0) * 90ms)}
.hero__scroll{position:absolute;left:var(--gut);bottom:var(--gut);color:rgba(255,255,255,.5);opacity:0;transition:opacity 1s ease .8s}
.hero-in .hero__scroll{opacity:1}

/* About */
.about{box-shadow:0 -1px 0 rgba(0,0,0,.02)}
.about__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);margin-top:clamp(80px,14vw,240px)}
.about__img{grid-column:1 / span 6;aspect-ratio:4/4.1}
.about__right{grid-column:8 / span 5;display:flex;flex-direction:column;justify-content:space-between;gap:56px}
.stats{display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(20px,1.8vw,34px)}
.stat{display:flex;gap:clamp(16px,1.6vw,30px);padding:clamp(16px,1.4vw,26px) 0 clamp(40px,4.6vw,88px);border-top:1px solid var(--line)}
.stat__icon{flex:0 0 auto;width:clamp(32px,2.4vw,46px);height:clamp(32px,2.4vw,46px);color:var(--ink)}
.stat__icon svg{width:100%;height:100%}
.stat__num{display:block;font-size:clamp(34px,3vw,60px);line-height:.95;letter-spacing:-.034em;font-weight:var(--w-display)}
.stat__label{display:block;margin-top:10px;color:var(--muted);font-size:clamp(11px,.78vw,14px)}
.text-cta{display:flex;flex-direction:column;align-items:flex-start;gap:36px;max-width:clamp(360px,24vw,470px);margin-left:auto}

/* Draw-on line icons */
.draw .d{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.6s var(--ease)}
.is-in .draw .d,.draw.is-in .d{stroke-dashoffset:0}

/* Products */
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);margin-top:clamp(80px,11vw,190px)}
.pcard{position:relative;display:flex;flex-direction:column;justify-content:space-between;aspect-ratio:1/1;padding:clamp(22px,2.2vw,42px);background:#fff;border-radius:var(--radius);overflow:hidden;transition:background 1.5s var(--ease),color .8s ease}
.pcard:hover,.pcard:focus-visible{transition-duration:.25s,.25s}
.pcard__icon{width:clamp(38px,2.8vw,54px);height:clamp(38px,2.8vw,54px)}
.pcard__icon svg{width:100%;height:100%}
.pcard__title{display:block;font-size:clamp(26px,2.3vw,44px);line-height:1.02;letter-spacing:-.027em;font-weight:var(--w-display)}
.pcard__body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .6s var(--ease)}
.pcard__body > div{overflow:hidden}
.pcard__body p{padding-top:clamp(14px,1.4vw,26px);max-width:40ch;font-size:clamp(14px,1.05vw,20px);line-height:1.24;font-weight:600;letter-spacing:-.012em;opacity:0;transform:translateY(10px);transition:opacity .4s ease,transform .6s var(--ease)}
.pcard__go{position:absolute;right:clamp(22px,2.2vw,42px);top:clamp(22px,2.2vw,42px);opacity:0;transform:translate(-6px,6px);transition:opacity .4s,transform .6s var(--ease)}
.pcard__go svg{width:18px;height:18px}
.pcard:hover,.pcard:focus-visible{background:var(--accent);color:var(--on-accent)}
.pcard:hover .pcard__body,.pcard:focus-visible .pcard__body{grid-template-rows:1fr}
.pcard:hover .pcard__body p,.pcard:focus-visible .pcard__body p{opacity:1;transform:none;transition-delay:.1s}
.pcard:hover .pcard__go,.pcard:focus-visible .pcard__go{opacity:1;transform:none}
.cards .media{aspect-ratio:1/1}
.row-end{display:flex;justify-content:flex-end;margin-top:28px}

/* Process dial (pinned) */
.process{position:relative;z-index:2;background:var(--paper);height:calc(100vh + var(--n) * 70vh)}
.process__pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:center;padding:0 var(--gut)}
.process__tags{position:absolute;left:var(--gut);top:calc(var(--nav-h) + 12px)}
.process__list{grid-column:1 / span 3;align-self:center}
.process__list .mono{color:var(--muted);margin-bottom:22px}
.process__list li{font-size:clamp(34px,3.4vw,66px);line-height:1.06;letter-spacing:-.030em;font-weight:var(--w-display);color:#DDE0DF;transition:color .5s ease}
.process__list li.on{color:var(--ink)}
.process__list button{text-align:left}
.process__stage{grid-column:4 / span 6;position:relative;justify-self:center;width:min(76vh,100%);aspect-ratio:1/1}
.ring{position:absolute;inset:0;width:100%;height:100%;will-change:transform}
.ring line{stroke:var(--ink);stroke-width:1.1}
.ring .major{stroke-width:1.6}
.art{position:absolute;inset:26%;display:grid;place-items:center}
.art svg{position:absolute;inset:0;width:100%;height:100%;opacity:0;transform:scale(.94) rotate(-4deg);transition:opacity .6s ease,transform 1s var(--ease);color:var(--ink)}
.art svg.on{opacity:1;transform:none}
.art svg .d{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.4s var(--ease) .1s}
.art svg.on .d{stroke-dashoffset:0}
.art svg .fill-accent{fill:var(--accent);opacity:0;transition:opacity .6s ease .6s}
.art svg.on .fill-accent{opacity:1}
.process__side{grid-column:10 / span 3;justify-self:end;align-self:center;text-align:right;max-width:340px}
.process__code{color:var(--muted);margin-bottom:14px}
.process__desc{font-size:clamp(15px,1.02vw,19px);line-height:1.24;font-weight:600;letter-spacing:-.012em;min-height:4.2em}
.process__bar{position:absolute;left:var(--gut);right:var(--gut);bottom:var(--gut);height:1px;background:var(--line)}
.process__bar i{position:absolute;left:0;top:0;bottom:0;background:var(--ink);width:calc(var(--p,0) * 100%)}

/* Compliance */
.comply__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);margin-top:clamp(80px,12vw,200px);align-items:end}
.comply__img{grid-column:1 / span 5;aspect-ratio:1/1.02}
.comply__text{grid-column:7 / span 4;display:flex;flex-direction:column;gap:24px;align-items:flex-start;padding-bottom:4px}
.iso{display:flex;flex-wrap:wrap;gap:8px}
.iso li{display:flex;flex-direction:column;gap:8px;padding:16px 18px;min-width:150px;border:1px solid var(--line);border-radius:var(--radius)}
.iso b{font-size:clamp(24px,1.8vw,34px);line-height:1;letter-spacing:-.030em;font-weight:var(--w-display)}
.iso span{color:var(--muted);font-size:11px}

/* Fleet */
.fleet__big{margin:clamp(100px,14vw,240px) auto 0;text-align:center;font-size:clamp(56px,7.6vw,150px);line-height:.92;letter-spacing:-.040em;font-weight:var(--w-display);color:color-mix(in srgb,var(--ink) calc(var(--p,0) * 100%),#D2D6D5)}
.fleet__sub{text-align:center;margin-top:22px;color:var(--muted)}
.fcards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px var(--gap);margin-top:clamp(60px,7vw,110px)}
.fcard{display:block}
.fcard__box{display:block;position:relative;aspect-ratio:.81/1;background:var(--ink-2);border-radius:var(--radius);overflow:hidden;color:#fff}
.fcard__art{display:block;position:absolute;inset:24% 12% 30%;transition:transform 1s var(--ease),opacity .6s}
.fcard__art svg{width:100%;height:100%;overflow:visible}
.fcard__desc{position:absolute;left:clamp(20px,2.2vw,42px);right:clamp(20px,2.2vw,42px);bottom:clamp(20px,2.2vw,42px);font-size:clamp(14px,1.05vw,20px);line-height:1.24;font-weight:600;letter-spacing:-.012em;color:rgba(255,255,255,.62);opacity:0;transform:translateY(14px);transition:opacity .45s ease,transform .7s var(--ease)}
.fcard__title{display:block;margin-top:clamp(12px,1.1vw,20px);font-size:clamp(18px,1.3vw,26px);font-weight:600;letter-spacing:-.025em}
.fcard:hover .fcard__art{transform:translateY(-18%) scale(.92)}
.fcard:hover .fcard__desc{opacity:1;transform:none}
.fcard .glow{opacity:.35;transition:opacity .6s}
.fcard:hover .glow{opacity:1}
.fleet__statement{display:flex;flex-direction:column;align-items:center;gap:40px;margin:clamp(110px,14vw,230px) auto 0;max-width:900px;text-align:center}
.fleet__statement .xl{text-indent:0}

/* Case studies */
.work{text-align:center}
.work__head{display:flex;flex-direction:column;align-items:center;gap:22px;margin-top:clamp(60px,10vw,160px)}
.work__head .mono{color:var(--muted)}
.toggle{position:relative;display:inline-flex;padding:3px;background:var(--ink);border-radius:6px}
.toggle button{position:relative;z-index:1;width:36px;height:30px;font-family:var(--font-mono);font-size:12px;color:#fff;transition:color .4s}
.toggle button[aria-selected="true"]{color:var(--ink)}
.toggle i{position:absolute;left:3px;top:3px;width:36px;height:30px;background:#fff;border-radius:4px;transition:transform .55s var(--ease)}
.work__slides{position:relative;max-width:1080px;margin:56px auto 0;min-height:clamp(260px,22vw,380px)}
.slide{position:absolute;inset:0 0 auto;visibility:hidden}
.slide.on{position:relative;visibility:visible}
.slide .xl{text-indent:0}
.slide .c{color:var(--stone);transition:color .5s ease}
.slide.on .c.on{color:var(--ink)}
.slide__meta{margin-top:26px;color:var(--muted)}
.figs{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:30px}
.figs li{padding:16px 20px;border:1px solid var(--line);border-radius:var(--radius);text-align:left;opacity:0;transform:translateY(10px);transition:opacity .5s ease,transform .7s var(--ease)}
.slide.on .figs li{opacity:1;transform:none;transition-delay:calc(.35s + var(--i,0) * 80ms)}
.figs b{display:block;font-size:clamp(24px,1.8vw,34px);line-height:1;letter-spacing:-.030em;font-weight:var(--w-display)}
.figs span{display:block;margin-top:8px;color:var(--muted);font-size:11px}
.projects{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap);margin-top:clamp(90px,10vw,170px);text-align:left}
.proj{display:flex;flex-direction:column;justify-content:space-between;aspect-ratio:1/.8;padding:clamp(20px,2vw,38px);background:var(--mist);border-radius:var(--radius);transition:background .4s ease}
.proj__icon svg{width:clamp(34px,2.6vw,50px);height:clamp(34px,2.6vw,50px)}
.proj__tag{display:block;color:var(--muted);margin-bottom:8px}
.proj__title{display:block;font-size:clamp(22px,1.9vw,36px);line-height:1.04;letter-spacing:-.03em;font-weight:var(--w-display)}
.proj:hover{background:var(--accent-soft)}

/* Client wheel (pinned) */
.clients{position:relative;z-index:2;background:var(--paper);height:calc(100vh + var(--n) * 38vh)}
.clients__intro{padding-top:clamp(72px,8vw,130px);border-top:1px solid var(--line);margin:0 var(--gut)}
.clients__pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;perspective:1100px}
.wheel{position:absolute;left:0;right:0;top:50%;height:0;transform-style:preserve-3d}
.wheel li{position:absolute;left:0;right:0;top:0;text-align:center;font-size:clamp(40px,4.6vw,90px);line-height:1;letter-spacing:-.030em;font-weight:var(--w-display);white-space:nowrap;color:var(--ink);backface-visibility:hidden;transform-origin:50% 50%;margin-top:-.5em;will-change:transform,opacity}
.rule{position:absolute;top:12vh;bottom:12vh;width:14px;background-image:repeating-linear-gradient(to bottom,var(--ink) 0 1px,transparent 1px 9px);background-size:6px 100%;background-repeat:no-repeat;opacity:.45}
.rule--l{left:var(--gut)}
.rule--r{right:var(--gut);background-position:right 0 top 0}
.rule i{position:absolute;left:0;width:14px;height:1.5px;background:var(--ink);top:calc(var(--p,0) * 100%)}
.rule--r i{left:auto;right:0}

/* Next page teaser */
.next{position:relative;z-index:2;height:clamp(460px,78vh,860px);overflow:hidden;background:#07080A;color:#fff}
.next .media{position:absolute;inset:0;border-radius:0}
.next .media img{top:-15%;height:130%}
.next .media::before{left:auto;right:var(--gut);top:calc(var(--gut) + 6px);text-align:right}
.next__shade{position:absolute;inset:0;z-index:1;background:linear-gradient(to bottom,rgba(0,0,0,.35),rgba(0,0,0,0) 40%,rgba(0,0,0,.45))}
.next__tags{position:absolute;z-index:2;left:var(--gut);top:var(--gut)}
.next__btn{position:absolute;z-index:2;left:50%;top:var(--gut);transform:translateX(-50%)}
.next__title{position:absolute;z-index:2;left:var(--gut);bottom:var(--gut);font-size:clamp(56px,9vw,170px);line-height:.85;letter-spacing:-.040em;font-weight:var(--w-display)}


/* Wider list variant for longer names */
.process--wide .process__list{grid-column:1 / span 4}
.process--wide .process__list li{white-space:nowrap}
.process--wide .process__stage{grid-column:5 / span 5}

/* SERVICES PAGE ------------------------------------------------------------ */
.statement{display:flex;justify-content:center;text-align:center;max-width:min(1100px,86vw);margin:clamp(110px,14vw,230px) auto 0}
.statement .xl{text-indent:0}

/* Projects map */
.projmap{padding-bottom:0;overflow:hidden}
.map{position:relative;margin-top:clamp(40px,5vw,90px);height:clamp(520px,96vh,1000px)}
.map__svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.map__areas path{fill:transparent;stroke:rgba(255,255,255,.17);stroke-width:1;vector-effect:non-scaling-stroke;stroke-linejoin:round;transition:fill .8s ease,stroke .8s ease}
.map__areas path.on{fill:color-mix(in srgb,var(--accent) 11%,transparent);stroke:var(--accent);stroke-width:1.4}
.pin{cursor:pointer}
.pin .pin__halo{fill:rgba(255,255,255,.13);transition:fill .4s}
.pin .pin__dot{fill:#fff;transition:fill .4s}
.pin .pin__pulse{fill:none;stroke:var(--accent);stroke-width:1.2;vector-effect:non-scaling-stroke;opacity:0}
.pin.on .pin__dot{fill:var(--accent)}
.pin.on .pin__halo{fill:color-mix(in srgb,var(--accent) 18%,transparent)}
.pin.on .pin__pulse{animation:pin-pulse 2.2s ease-out infinite}
.pin:hover .pin__halo{fill:rgba(255,255,255,.28)}
@keyframes pin-pulse{0%{opacity:.9;transform:scale(.6)}100%{opacity:0;transform:scale(2.4)}}
.pin__pulse{transform-box:fill-box;transform-origin:center}
.hq rect{fill:#fff}
.hq text{fill:rgba(255,255,255,.75);font-family:var(--font-mono);font-size:9px;letter-spacing:.06em;text-transform:uppercase}
.map__card{position:absolute;right:var(--gut);bottom:var(--gut);z-index:2;width:min(380px,calc(100% - 2 * var(--gut)));padding:clamp(18px,1.6vw,28px);background:rgba(24,25,27,.9);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.08);border-radius:8px;color:#fff}
.map__card > *{transition:opacity .35s ease,transform .6s var(--ease)}
.map__card.swap > *{opacity:0;transform:translateY(8px)}
.map__loc{color:rgba(255,255,255,.5)}
.map__title{margin-top:10px;font-size:clamp(22px,1.7vw,32px);line-height:1.04;letter-spacing:-.028em;font-weight:var(--w-display)}
.map__sector{margin-top:8px;color:var(--accent)}
.map__desc{margin-top:16px;font-size:clamp(14px,.98vw,17px);line-height:1.3;font-weight:600;letter-spacing:-.01em;color:rgba(255,255,255,.72)}
.map__desc:empty{display:none}
.map__more{display:inline-flex;align-items:center;gap:8px;margin-top:20px;color:#fff;border-bottom:1px solid rgba(255,255,255,.35);padding-bottom:3px}
.map__more:hover{color:var(--accent);border-color:var(--accent)}
.map__index{position:absolute;left:var(--gut);bottom:var(--gut);z-index:2;display:flex;flex-direction:column;gap:6px}
.map__index button{display:flex;gap:10px;color:rgba(255,255,255,.4);text-align:left;font:inherit;text-transform:inherit;letter-spacing:inherit;transition:color .3s}
.map__index button:hover,.map__index button.on{color:#fff}
.map__index button b{font-weight:400;color:var(--accent);opacity:0;transition:opacity .3s}
.map__index button.on b{opacity:1}

/* Process steps (pinned) */
.steps-intro{padding-bottom:clamp(40px,4vw,70px)}
.steps{position:relative;z-index:2;background:var(--paper);height:calc(100vh + var(--n,10) * 50vh)}
.steps__pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);padding:0 var(--gut)}
.steps__media{grid-column:1 / span 6;align-self:start;position:relative;margin-top:calc(var(--nav-h) - 6px);aspect-ratio:16/9;background:#0C0D0E;border-radius:8px;overflow:hidden;color:var(--accent)}
.step-art{position:absolute;inset:0;width:100%;height:100%;opacity:0;transform:scale(1.06);transition:opacity .7s ease,transform 1.4s var(--ease)}
.step-art.on{opacity:1;transform:none}
.step-room{opacity:.5}
.step-obj{filter:drop-shadow(0 0 6px color-mix(in srgb,var(--accent) 45%,transparent))}
.steps__listwrap{grid-column:8 / span 5;position:relative;height:100%;overflow:hidden;-webkit-mask-image:linear-gradient(to bottom,#000 78%,transparent);mask-image:linear-gradient(to bottom,#000 78%,transparent)}
.steps__list{position:absolute;left:0;right:0;top:calc(var(--nav-h) - 30px);will-change:transform}
.steps__list li{display:flex;flex-direction:column;justify-content:space-between;min-height:clamp(300px,46vh,460px);padding:24px 0 clamp(26px,3vh,40px);border-bottom:1px solid var(--line)}
.steps__list h3{display:flex;align-items:baseline;gap:14px;font-size:clamp(26px,2.3vw,44px);line-height:1.02;letter-spacing:-.03em;font-weight:var(--w-display);color:#D6DAD9;transition:color .5s ease}
.steps__list h3 .mono{font-size:11px;letter-spacing:.02em;color:inherit;transform:translateY(-.9em)}
.steps__list li.on h3{color:var(--ink)}
.steps__list p{max-width:38ch;margin-top:40px;font-size:clamp(15px,1.02vw,19px);line-height:1.24;font-weight:600;letter-spacing:-.012em}
.steps__list p .c{color:#D0D4D3;transition:color .35s ease}
.steps__list p .c.on{color:var(--ink)}
.wave{position:absolute;left:var(--gut);bottom:calc(var(--gut) + 18px);width:calc(50% - var(--gut) - var(--gap) / 2)}
.wave__bars{display:flex;align-items:flex-end;justify-content:space-between;height:34px}
.wave__bars i{display:block;width:1px;height:var(--h,4px);background:#C9CDCC;transition:height .25s ease}
.wave__bars i.on{background:var(--ink)}
.wave__pct{position:absolute;top:calc(100% + 6px);left:var(--x,0);transform:translateX(-50%);color:var(--muted)}

@media (max-width:1100px){
  .steps__media{grid-column:1 / span 6}
  .steps__listwrap{grid-column:7 / span 6}
}
@media (max-width:767px){
  .map{height:78vh}
  .map__index{display:none}
  .map__card{left:var(--gut);right:var(--gut);width:auto}
  .steps{height:calc(100vh + var(--n,10) * 42vh)}
  .steps__pin{display:flex;flex-direction:column;gap:14px}
  .steps__media{margin-top:calc(var(--nav-h) + 8px);width:100%;flex:0 0 auto}
  .steps__listwrap{flex:1 1 auto}
  .steps__list{top:0}
  .steps__list li{min-height:34vh;padding-top:8px}
  .steps__list p{margin-top:18px}
  .wave{display:none}
}


/* SIGNAGE PAGE ------------------------------------------------------------- */
.range__label{margin-top:clamp(110px,14vw,230px);text-align:center;color:var(--muted)}
.range__big{margin:18px auto 0;text-align:center;font-size:clamp(56px,7.6vw,150px);line-height:.92;letter-spacing:-.045em;font-weight:var(--w-display);color:color-mix(in srgb,var(--ink) calc(var(--p,0) * 100%),#D2D6D5)}
.sgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(26px,2.4vw,44px) var(--gap);margin-top:clamp(70px,8vw,130px)}
.scard{display:block;width:100%;text-align:left;cursor:pointer}
.scard__box{position:relative;display:block;aspect-ratio:1/1;background:var(--ink-2);border-radius:8px;overflow:hidden}
.scard__art{position:absolute;inset:16% 10%;display:block;transition:transform 1.1s var(--ease)}
.scard__art[data-in]{transform:scale(.9)}
.scard__art[data-in].is-in{transform:none}
.scard__art svg{width:100%;height:100%;overflow:visible}
.scard .glow{opacity:.55;transition:opacity .6s}
.scard:hover .glow,.scard:focus-visible .glow{opacity:1}
.scard:hover .scard__art{transform:scale(1.04)}
.scard__title{position:relative;display:block;overflow:hidden;height:1.25em;margin-top:clamp(10px,1vw,16px);font-size:clamp(17px,1.3vw,26px);line-height:1.25;font-weight:var(--w-display);letter-spacing:-.025em;color:var(--ink);transition:color .4s ease}
.scard__title span{display:block;transition:transform .6s var(--ease)}
.scard:hover .scard__title span{transform:translateY(-100%)}
.sgrid:hover .scard:not(:hover) .scard__title{color:#C4C8C7}
.cursor-tag{position:fixed;left:0;top:0;z-index:160;display:flex;align-items:center;gap:8px;height:24px;padding:0 4px 0 9px;background:#fff;color:var(--ink);border-radius:4px;font-size:10.5px;pointer-events:none;opacity:0;transform:translate3d(var(--cx,0),var(--cy,0),0) scale(.6);transition:opacity .25s ease,transform .08s linear}
.cursor-tag b{display:grid;place-items:center;width:16px;height:16px;border-radius:3px;background:var(--ink);color:#fff;font-weight:400}
.cursor-tag.on{opacity:1;transform:translate3d(var(--cx,0),var(--cy,0),0) scale(1)}
.spanel{position:fixed;z-index:150;background:var(--ink-2);color:#fff;border-radius:8px;overflow:hidden;transition:left .75s var(--ease-io),top .75s var(--ease-io),width .75s var(--ease-io),height .75s var(--ease-io),border-radius .75s}
.spanel[hidden]{display:none}
.spanel__inner{position:absolute;inset:0;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:center;padding:clamp(24px,3vw,56px)}
.spanel__text{grid-column:1 / span 4;display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.spanel__code{color:rgba(255,255,255,.45)}
.spanel__title{font-size:clamp(34px,3.6vw,72px);line-height:.98;letter-spacing:-.035em;font-weight:var(--w-display)}
.spanel__cat{color:var(--accent)}
.spanel__desc{max-width:38ch;margin-bottom:12px;font-size:clamp(15px,1.05vw,19px);line-height:1.26;font-weight:600;letter-spacing:-.012em;color:rgba(255,255,255,.66)}
.spanel__art{grid-column:6 / span 7;align-self:stretch;display:flex;align-items:center;justify-content:center}
.spanel__art svg{width:100%;max-height:78vh}
.spanel__art .glow{opacity:1}
.spanel__text,.spanel__art{opacity:0;transform:translateY(16px);transition:opacity .5s ease,transform .8s var(--ease)}
.spanel.show .spanel__text,.spanel.show .spanel__art{opacity:1;transform:none;transition-delay:.35s}
.spanel.show .spanel__art{transition-delay:.45s}
.spanel__close{position:absolute;right:clamp(14px,1.4vw,24px);top:clamp(14px,1.4vw,24px);display:flex;align-items:center;gap:10px;height:30px;padding:0 4px 0 11px;background:#fff;color:var(--ink);border-radius:5px;opacity:0;transition:opacity .4s ease}
.spanel__close b{display:grid;place-items:center;width:22px;height:22px;border-radius:3px;background:var(--ink);color:#fff;font-size:11px}
.spanel.show .spanel__close{opacity:1;transition-delay:.4s}
.spanel-open{overflow:hidden}
.spanel-open .nav{opacity:0;pointer-events:none}

.standards{padding-bottom:clamp(90px,10vw,170px)}
.stiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);margin-top:clamp(90px,11vw,190px)}
.stiles li{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;aspect-ratio:1.55/1;border:1px solid rgba(255,255,255,.1);border-radius:8px;transition:border-color .5s,background .5s}
.stiles li:hover{border-color:rgba(255,255,255,.28);background:rgba(255,255,255,.02)}
.stiles b{font-size:clamp(26px,2.4vw,46px);line-height:1;letter-spacing:-.035em;font-weight:var(--w-display)}
.stiles span{color:rgba(255,255,255,.42)}

.facility{position:relative;z-index:2;background:var(--ink);height:calc(100vh + (var(--n,3) - 1) * 90vh)}
.facility__pin{position:sticky;top:0;height:100vh;height:100svh;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:center;padding:0 var(--gut)}
.facility__card,.facility__media{height:min(84vh,860px);border-radius:8px}
.facility__card{grid-column:1 / span 4;position:relative;display:flex;flex-direction:column;background:#fff;color:var(--ink);padding:clamp(16px,1.4vw,24px)}
.facility__top{display:flex;justify-content:space-between;align-items:flex-start}
.facility__tabs{flex:0 0 auto}
.facility__items{position:relative;flex:1}
.fitem{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;align-items:center;text-align:center;padding:clamp(40px,8vh,110px) clamp(4px,1vw,20px) clamp(8px,2vh,24px);opacity:0;pointer-events:none;transition:opacity .5s ease}
.fitem h3{font-size:clamp(28px,2.5vw,48px);line-height:1.02;letter-spacing:-.032em;font-weight:var(--w-display);transform:translateY(24px);transition:transform .9s var(--ease)}
.fitem p{max-width:40ch;font-size:clamp(14px,.98vw,17px);line-height:1.28;font-weight:600;letter-spacing:-.01em;transform:translateY(16px);transition:transform .9s var(--ease)}
.fitem.on{opacity:1;pointer-events:auto}
.fitem.on h3,.fitem.on p{transform:none}
.facility__media{grid-column:5 / span 8;position:relative;overflow:hidden;background:#1A1B1D}
.fimg{position:absolute;inset:0;border-radius:0;will-change:clip-path}
.fimg img{transform:scale(1.08);transition:transform 1.4s var(--ease)}
.fimg.on img{transform:none}

@media (max-width:1100px){
  .sgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .facility__card{grid-column:1 / span 5}
  .facility__media{grid-column:6 / span 7}
  .spanel__text{grid-column:1 / span 5}
}
@media (max-width:767px){
  .sgrid{grid-template-columns:1fr 1fr;gap:22px var(--gap)}
  .scard__title{font-size:15px}
  .stiles{grid-template-columns:1fr 1fr}
  .stiles li{padding:10px;text-align:center}
  .stiles span{font-size:9.5px}
  .spanel__inner{display:flex;flex-direction:column;justify-content:flex-start;gap:18px;padding-top:64px;overflow:auto}
  .spanel__art{order:-1;width:100%;flex:0 0 auto}
  .spanel__art svg{max-height:34vh}
  .facility__pin{display:flex;flex-direction:column;justify-content:center;gap:10px;padding-top:calc(var(--nav-h) + 6px);padding-bottom:12px}
  .facility__card{order:2;width:100%;height:auto;flex:1 1 auto}
  .facility__media{order:1;width:100%;height:34vh;flex:0 0 auto}
  .fitem{padding-top:24px}
}


/* ACCREDITATIONS PAGE ------------------------------------------------------ */
.quote{text-align:center;padding:clamp(120px,15vw,260px) 0}
.quote__text{max-width:min(1100px,84vw);margin:0 auto;font-size:clamp(34px,3.6vw,72px);line-height:1.02;letter-spacing:-.03em;font-weight:var(--w-display)}
.quote__by{margin-top:clamp(40px,4vw,70px);font-size:clamp(22px,1.8vw,34px);letter-spacing:-.025em;font-weight:var(--w-display);color:#B9BDBC}
.quote__role{margin-top:8px;color:#B9BDBC}
.say{text-align:center;padding:clamp(130px,16vw,280px) 0}
.say .xl{max-width:min(980px,80vw);margin:0 auto}
.split__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:end;margin-top:clamp(90px,11vw,190px)}
.split__imgcol{grid-column:1 / span 6}
.split__text{grid-column:8 / span 3;padding-bottom:clamp(20px,6vw,120px)}
.split--rev .split__text{grid-column:2 / span 3;align-self:start;padding:0}
.split--rev .split__imgcol{grid-column:7 / span 6}
.grow{aspect-ratio:4/5;width:100%;transform-origin:0 100%;will-change:transform}
.split__img{aspect-ratio:4/5}
.zoom{position:relative;z-index:2;background:var(--paper);height:260vh}
.zoom__pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.zoom__media{position:absolute;inset:0;border-radius:0;clip-path:inset(var(--zy,32%) var(--zx,36%) var(--zy,32%) var(--zx,36%) round var(--zr,10px));will-change:clip-path}
.zoom__media img{top:0;height:100%;transform:scale(var(--zs,1.25));transform-origin:50% 50%}
.growth{padding-bottom:clamp(90px,10vw,170px)}
.swap{position:relative;height:260vh;margin-top:clamp(60px,6vw,110px)}
.swap__pin{position:sticky;top:0;height:100vh;height:100svh;display:grid;place-items:center}
.swap__frame{position:relative;width:min(44vw,720px);height:var(--fh,44vh);border-radius:8px;overflow:hidden;background:#1A1B1D;transition:height .2s linear}
.swap__img{position:absolute;inset:0;border-radius:0}
.swap__img img{transform:scale(1.08);transition:transform 1.4s var(--ease)}
.swap__img.on img{transform:none}
.growth__text{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);row-gap:26px;margin-top:clamp(40px,5vw,90px)}
.growth__text p{grid-column:5 / span 4;max-width:44ch}
.rows{margin-top:clamp(110px,13vw,220px);border-top:1px solid var(--line)}
.rows li{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:baseline;padding:clamp(34px,4vw,70px) 0;border-bottom:1px solid var(--line);transition:background .4s}
.rows .mono{grid-column:1 / span 1;color:var(--muted)}
.rows h3{grid-column:2 / span 4;font-size:clamp(22px,1.7vw,34px);line-height:1.05;letter-spacing:-.028em;font-weight:var(--w-display)}
.rows p{grid-column:7 / span 4;font-size:clamp(14px,.98vw,17px);line-height:1.28;font-weight:600;letter-spacing:-.01em}

@media (max-width:767px){
  .quote__text{font-size:30px}
  .split__grid{display:flex;flex-direction:column;gap:28px}
  .split--rev .split__grid{flex-direction:column-reverse}
  .split__text,.split--rev .split__text{padding:0}
  .swap{height:200vh}
  .swap__frame{width:84vw}
  .growth__text p{grid-column:1 / -1}
  .rows li{grid-template-columns:40px 1fr;row-gap:10px}
  .rows .mono{grid-column:1}
  .rows h3,.rows p{grid-column:2}
}


/* ABOUT PAGE --------------------------------------------------------------- */
.story{padding:clamp(80px,9vw,150px) 0 clamp(60px,7vw,120px)}
.story__labels{display:flex;justify-content:space-between;color:var(--muted)}
.story__title{margin-top:clamp(20px,3vw,50px);text-align:center;font-size:clamp(64px,10.5vw,210px);line-height:.86;letter-spacing:-.05em;font-weight:var(--w-display);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E"),
    linear-gradient(180deg,#2A2B2D 0%,#6E6A66 38%,#1A1B1C 62%,#8A8580 100%);
  background-size:220px 220px,100% 100%;background-position:0 var(--ty,0px),0 0;
  -webkit-background-clip:text;background-clip:text;color:transparent}
.timeline{position:relative;z-index:2;background:#07080A;height:calc(100vh + var(--n,2) * 100vh)}
.timeline__pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;color:#fff}
.timeline__bg{position:absolute;inset:0}
.tl-img{position:absolute;inset:0;border-radius:0;opacity:0;transition:opacity 1s ease}
.tl-img.on{opacity:1}
.tl-img img{transform:scale(1.08);transition:transform 3s var(--ease)}
.tl-img.on img{transform:none}
.timeline__shade{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.25),rgba(0,0,0,.1) 40%,rgba(0,0,0,.55))}
.odo{position:absolute;left:var(--gut);right:var(--gut);top:50%;transform:translateY(-50%);display:flex;justify-content:space-between;font-size:clamp(40px,4.4vw,86px);font-weight:var(--w-display);letter-spacing:-.03em;line-height:1}
.odo__slot{height:1em;overflow:hidden}
.odo__strip{display:flex;flex-direction:column;will-change:transform}
.odo__strip span{height:1em;display:block}
.timeline__caps{position:absolute;left:50%;bottom:clamp(40px,9vh,110px);width:min(460px,86vw);transform:translateX(-50%);text-align:center}
.timeline__caps li{position:absolute;left:0;right:0;bottom:0;opacity:0;transform:translateY(10px);transition:opacity .6s ease,transform .8s var(--ease)}
.timeline__caps li.on{opacity:1;transform:none}
.timeline__caps p{font-size:clamp(14px,.98vw,17px);line-height:1.3;font-weight:600;letter-spacing:-.01em}
.values{position:relative;z-index:2;background:var(--paper);height:calc(100vh + var(--n,5) * 45vh)}
.values__pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.values__tags{position:absolute;left:var(--gut);top:calc(var(--nav-h) + 12px)}
.values__label{position:absolute;left:0;right:0;top:26vh;text-align:center;color:var(--muted)}
.values__pin .rule{top:18vh;bottom:18vh}
.values__listwrap{position:absolute;left:calc(var(--gut) + 7vw);top:0;bottom:0;width:50%}
.values__list{position:absolute;left:0;top:50%;will-change:transform}
.values__list li{font-size:clamp(44px,5vw,96px);line-height:1.08;letter-spacing:-.04em;font-weight:var(--w-display);color:#DDE0DF;white-space:nowrap;transition:color .5s ease}
.values__list li.on{color:var(--ink)}
.values__desc{position:absolute;left:58%;top:50%;width:min(300px,28vw);transform:translateY(-50%);transition:opacity .35s ease}
.values__desc.swap{opacity:0}
.env__media{display:flex;justify-content:center;margin-top:clamp(90px,11vw,190px)}
.env__img{width:var(--ew,44%);aspect-ratio:16/10;will-change:width}
.env__text{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);margin-top:clamp(30px,3vw,50px)}
.env__text p:nth-child(1){grid-column:4 / span 3}
.env__text p:nth-child(2){grid-column:7 / span 3}
.env__cta{display:flex;justify-content:center;margin-top:clamp(80px,9vw,150px)}

@media (max-width:767px){
  .odo{font-size:44px}
  .values__listwrap{left:var(--gut);width:auto;right:var(--gut);top:-10vh}
  .values__list li{font-size:clamp(26px,8vw,40px)}
  .values__desc{left:var(--gut);right:var(--gut);width:auto;top:auto;bottom:14vh;transform:none}
  .env__img{width:100%!important}
  .env__text{display:flex;flex-direction:column;gap:18px}
}


/* CAREERS PAGE ------------------------------------------------------------- */
.positions__big{margin-top:clamp(60px,7vw,120px)}
.positions__lead{max-width:48ch;margin:clamp(30px,3vw,50px) auto 0;text-align:center}
.jobs{margin-top:clamp(80px,9vw,150px)}
.jobs li{align-items:baseline}
.jobs .mono{grid-column:1 / span 1}
.jobs h3{grid-column:2 / span 4}
.jobs p{grid-column:7 / span 4}
.jobs .jobs__apply{grid-column:12 / span 1;justify-self:end;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;border-bottom:1px solid currentColor;padding-bottom:2px}
.jobs__apply svg{width:11px;height:11px}
.jobs li:hover{background:rgba(15,16,17,.025)}
.clients--mist,.clients--mist .clients__pin{background:var(--mist)}
.clients--mist .clients__intro{border-top:0}
.ringdial{position:relative;z-index:2;background:var(--mist);height:calc(100vh + var(--n,4) * 60vh)}
.ringdial__pin{position:sticky;top:0;height:100vh;height:100svh;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 var(--gut);overflow:hidden}
.ringdial__tags{position:absolute;left:var(--gut);top:calc(var(--nav-h) + 12px)}
.ringdial__side{color:var(--muted);justify-self:center}
.ringdial__stage{position:relative;width:min(78vh,52vw);aspect-ratio:1/1}
.ringdial__ring{position:absolute;inset:0;width:100%;height:100%}
.ringdial__ring line{stroke:#C9CDCC;stroke-width:1.2;transition:stroke .35s ease}
.ringdial__ring line.on{stroke:var(--accent)}
.ringdial__center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.ringdial__num{position:relative;height:1em;overflow:hidden;font-size:clamp(64px,7.4vw,140px);line-height:1;letter-spacing:-.045em;font-weight:var(--w-display)}
.ringdial__num span{display:block;transition:transform .7s var(--ease),opacity .5s ease}
.ringdial__num span.out{position:absolute;left:0;right:0;top:0;transform:translateY(-100%);opacity:0}
.ringdial__num span.in{transform:translateY(100%);opacity:0}
.ringdial__label{margin-top:12px;font-size:clamp(17px,1.3vw,24px);letter-spacing:-.02em;font-weight:var(--w-display);transition:opacity .35s ease}
.ringdial__label.swap{opacity:0}
@media (max-width:767px){
  .jobs li{grid-template-columns:1fr;row-gap:10px}
  .jobs .mono,.jobs h3,.jobs p,.jobs .jobs__apply{grid-column:1;justify-self:start}
  .ringdial__pin{grid-template-columns:1fr;justify-items:center;align-content:center;gap:14px}
  .ringdial__side{display:none}
  .ringdial__stage{width:86vw}
  .ringdial__num{font-size:72px}
}

/* 6. INNER PAGE TEMPLATE --------------------------------------------------- */
.phero{position:relative;z-index:2;min-height:78vh;display:flex;flex-direction:column;justify-content:flex-end;gap:28px;padding:calc(var(--nav-h) + 80px) var(--gut) clamp(40px,5vw,72px);background:#07080A;color:#fff;overflow:hidden}
.phero .h1{max-width:18ch}
.phero .h1 .ln{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
.phero .h1 .ln > span{display:block;transform:translateY(110%);transition:transform 1.3s var(--ease)}
.hero-in .phero .h1 .ln > span{transform:none}
.phero__lead{max-width:600px;color:rgba(255,255,255,.7);font-size:clamp(16px,1.1vw,20px);line-height:1.3;font-weight:600;letter-spacing:-.012em}
.phero__foot{display:flex;justify-content:space-between;align-items:flex-end;gap:20px}
.phero{min-height:92vh;padding-top:calc(var(--nav-h) + 26vw)}
.phero .halo{top:calc(var(--nav-h) + 4vh);opacity:.95}
.phero > :not(.halo):not(.hero__grain){position:relative;z-index:1}
.building{padding:clamp(90px,10vw,160px) var(--gut);background:var(--paper);position:relative;z-index:2}
.building__box{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:20px;padding:22px;border:1px dashed var(--line);border-radius:var(--radius)}
.building__box p{color:var(--muted)}

/* 7. FOOTER ---------------------------------------------------------------- */
.footer{position:relative;z-index:2;background:var(--paper);padding:26px var(--gut) 20px}
.footer__top{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);row-gap:36px;min-height:clamp(240px,26vw,420px)}
.footer__brand{grid-column:1 / span 4;display:flex;flex-direction:column;gap:18px;color:var(--ink)}
.footer__brand .logo{align-self:flex-start}
.footer .logo__icon svg{color:#fff}
.socials{display:flex;gap:8px}
.socials a{display:grid;place-items:center;width:28px;height:28px;border-radius:4px;background:var(--ink);color:#fff;transition:background .3s,color .3s}
.socials a:hover{background:var(--accent);color:var(--ink)}
.socials svg{width:15px;height:15px}
.footer__col{grid-column:span 2;display:flex;flex-direction:column;align-items:flex-start;gap:6px;font-size:clamp(14px,.95vw,17px);letter-spacing:-.01em;color:rgba(15,16,17,.8)}
.footer__col:first-of-type{grid-column:5 / span 2}
.footer__col .tag{margin-bottom:8px;color:var(--ink)}
.footer__col a{transition:color .25s}
.footer__col a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.footer__col address{font-style:normal;margin-top:6px;color:var(--muted);font-size:12.5px;line-height:1.35}
.footer__bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;padding-top:18px;border-top:1px solid var(--line);font-size:14px;color:var(--muted)}

/* Toast (demo build only) */
.toast{position:fixed;left:50%;bottom:24px;z-index:210;transform:translate(-50%,20px);opacity:0;background:var(--ink);color:#fff;padding:10px 14px;border-radius:6px;font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;text-transform:uppercase;transition:opacity .4s,transform .6s var(--ease);pointer-events:none}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* 8. RESPONSIVE ------------------------------------------------------------ */
@media (max-width:1100px){
  .about__img{grid-column:1 / span 6}
  .about__right{grid-column:7 / span 6}
  .process__list{grid-column:1 / span 4}
  .process__stage{grid-column:5 / span 8;justify-self:end;width:min(62vh,100%)}
  .process__side{position:absolute;right:var(--gut);bottom:calc(var(--gut) + 18px);max-width:300px}
  .comply__img{grid-column:1 / span 6}
  .comply__text{grid-column:8 / span 5}
  .projects{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer__brand{grid-column:1 / -1}
  .footer__col,.footer__col:first-of-type{grid-column:span 3}
}
@media (max-width:767px){
  :root{--gut:16px;--gap:10px;--nav-h:64px}
  .intro{max-width:none}
  .intro .eyebrows{position:static;flex-direction:row;margin-bottom:14px}
  .intro .xl{text-indent:0;font-size:30px}
  .hero__content{flex-direction:column;align-items:flex-start;bottom:calc(var(--gut) + 150px)}
  .hero__meta{min-width:0}
  .hero__cards{left:var(--gut);right:var(--gut)}
  .hcard{width:auto;flex:1}
  .halo{top:24%;font-size:19vw;white-space:normal;text-align:center;line-height:.86}
  .about__grid,.comply__grid{display:flex;flex-direction:column;gap:40px}
  .about__img{aspect-ratio:4/4.4}
  .text-cta{margin-left:0}
  .cards{grid-template-columns:1fr 1fr}
  .pcard{aspect-ratio:auto;min-height:220px}
  .pcard .pcard__body{grid-template-rows:1fr}
  .pcard .pcard__body p{opacity:1;transform:none;font-size:12.5px}
  .process{height:calc(100vh + var(--n) * 55vh)}
  .process__pin{display:flex;flex-direction:column;justify-content:center;gap:18px;padding-top:calc(var(--nav-h) + 30px)}
  .process__stage{order:-1;width:min(46vh,82vw)}
  .process__list{align-self:stretch}
  .process__list .mono{margin-bottom:10px}
  .process__list li{font-size:30px}
  .process__side{position:static;text-align:left;align-self:stretch;max-width:none}
  .process__code{margin-bottom:6px}
  .fcards{grid-template-columns:1fr 1fr}
  .fcard__desc{opacity:1;transform:none;font-size:11.5px}
  .fcard__art{inset:10% 12% 38%}
  .projects{grid-template-columns:1fr 1fr}
  .proj{aspect-ratio:1/1}
  .wheel li{font-size:34px}
  .footer__col,.footer__col:first-of-type{grid-column:span 6}
  .menu__cols{grid-template-columns:1fr;gap:18px}
  .menu__link{font-size:36px}
  .phero__foot{flex-direction:column;align-items:flex-start}
  .phero{padding-top:calc(var(--nav-h) + 40vw)}
}
@media (max-width:480px){
  .cards,.fcards{grid-template-columns:1fr}
  .figs li{flex:1 1 40%}
}

/* Reduced motion: keep everything visible, drop the theatre */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important}
  [data-in]{opacity:1;transform:none}
  .halo__glow{opacity:1}
}

/* ==========================================================================
   9. SIGN DESIGN GB BRAND LAYER
   Typography, nav theming, the pink dot, discipline accents and the
   components added for the full site build.
   ========================================================================== */
body{font-family:var(--font-sans);font-weight:400;background:var(--paper);font-size:17px;line-height:1.55}
.sec--white{background:var(--paper)}
.sec--mist{background:var(--mist)}
.sec--tint{background:var(--accent-tint)}
.sec--ink{background:var(--ink)}

/* Discipline accents: one accent per section */
body[data-acc="fleet"]{--accent:#A8814E;--accent-tint:#F2E7D8;--accent-soft:#F2E7D8}
body[data-acc="interiors"]{--accent:#7E8C60;--accent-tint:#E3E8D9;--accent-soft:#E3E8D9}
body[data-acc="sectors"]{--accent:#7E6FB8;--accent-tint:#EAE6F5;--accent-soft:#EAE6F5}
body[data-acc="cases"]{--accent:#9C7B52;--accent-tint:#F2E7D8;--accent-soft:#F2E7D8}
[data-acc-local="signage"]{--accent:#EC008C;--accent-tint:#FBDDEE}
[data-acc-local="fleet"]{--accent:#A8814E;--accent-tint:#F2E7D8}
[data-acc-local="interiors"]{--accent:#7E8C60;--accent-tint:#E3E8D9}

/* Display typography (Outfit) */
.h1,.xl,.lg,.pcard__title,.proj__title,.fcard__title,.scard__title,.map__title,.spanel__title,.fitem h3,.rows h3,
.steps__list h3,.process__list li,.wheel li,.values__list li,.stat__num,.iso b,.figs b,.stiles b,.fleet__big,.range__big,
.story__title,.next__title,.pt__label,.menu__link,.quote__text,.quote__by,.ringdial__num,.ringdial__label,.odo,.halo,
.menu-btn__label,.btn,.hcard__bar,.faq__q,.dcard__title,.dcard__letter,.cta__title,.ticker__track,.phero .h1,.sp-hero__title,.related h3,.jobs h3,.statement .xl,.say .xl,.env .xl
{font-family:var(--font-display)}
.h1{font-weight:800;letter-spacing:-.045em;line-height:.95}
.xl{font-weight:700;letter-spacing:-.034em;line-height:1.04}
.range__big,.fleet__big,.story__title,.next__title,.halo,.odo,.ringdial__num{font-weight:800;letter-spacing:-.055em}
.pcard__title,.fcard__title,.scard__title,.fitem h3,.rows h3,.steps__list h3,.proj__title,.map__title,.spanel__title,.jobs h3{font-weight:600;letter-spacing:-.034em}
.process__list li,.wheel li,.values__list li,.menu__link{font-weight:700;letter-spacing:-.04em}
.s{font-family:var(--font-sans);font-weight:400;line-height:1.55;letter-spacing:0}
.pcard__body p,.fcard__desc,.map__desc,.spanel__desc,.fitem p,.rows p,.steps__list p,.process__desc,.values__desc,.phero__lead,.timeline__caps p{font-family:var(--font-sans);font-weight:400;letter-spacing:0;line-height:1.5}
.mono,.tag{font-family:var(--font-mono);letter-spacing:.18em;text-transform:uppercase}
.mono{font-size:10.5px;font-weight:400}
.tag{font-size:10px;padding:4px 7px 3px}
.btn{font-family:var(--font-display);font-size:14px;font-weight:600;letter-spacing:-.005em;text-transform:none;--h:44px;padding-left:20px}
.btn__label{height:1.3em;line-height:1.3em}
.hcard__bar{font-family:var(--font-display);font-size:12px;font-weight:600;letter-spacing:0;text-transform:none}
:focus-visible{outline-color:var(--pink)}
::selection{background:var(--pink);color:#fff}
.dot,.c.dot,[data-reveal] .c.dot{color:var(--pink)!important}
.sec--ink .c.dot{color:var(--pink)!important}

/* Nav: switches between ink and white depending on the section beneath */
.nav{mix-blend-mode:normal;color:var(--ink);transition:opacity .8s ease,transform .8s var(--ease),color .35s ease}
.nav--dark .nav,.menu-open .nav{color:#fff}
.logo{height:auto;padding:0;border:0;gap:0}
.logo img{height:30px;width:auto;display:block}
.logo .logo--w{display:none}
.nav--dark .nav .logo--b,.menu-open .nav .logo--b{display:none}
.nav--dark .nav .logo--w,.menu-open .nav .logo--w{display:block}
.footer .logo img{height:40px}
.menu-btn__label{font-weight:600}

/* Five-colour rule under heroes (clay, sun, moss, iris, pink) */
.rule5{display:flex;height:5px;position:relative;z-index:3}
.rule5 i{flex:1}
.rule5 i:nth-child(1){background:var(--clay)}.rule5 i:nth-child(2){background:var(--sun)}.rule5 i:nth-child(3){background:var(--moss)}
.rule5 i:nth-child(4){background:var(--iris)}.rule5 i:nth-child(5){background:var(--pink)}
.hero .rule5{position:absolute;left:0;right:0;bottom:0}

/* Ticker */
.ticker{position:relative;z-index:2;overflow:hidden;background:var(--ink);color:#fff;padding:clamp(18px,2.4vw,34px) 0}
.ticker__track{display:flex;gap:.6em;white-space:nowrap;font-weight:800;font-size:clamp(40px,6vw,110px);letter-spacing:-.05em;line-height:1;will-change:transform}
.ticker__track span{display:inline-flex;align-items:baseline;gap:.6em}
.ticker__track b{color:var(--pink);font-weight:800}

/* Discipline cards */
.dcards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);margin-top:clamp(70px,8vw,140px)}
.dcard{position:relative;display:flex;flex-direction:column;justify-content:space-between;min-height:clamp(420px,40vw,640px);padding:clamp(22px,2.2vw,40px);background:var(--white);border-radius:var(--radius);overflow:hidden;transition:background 1.2s var(--ease),color .6s}
.dcard:hover,.dcard:focus-visible{background:var(--accent);color:#fff;transition-duration:.3s}
.dcard__top{display:flex;justify-content:space-between;align-items:flex-start}
.dcard__count{color:var(--muted);transition:color .3s}
.dcard:hover .dcard__count{color:rgba(255,255,255,.75)}
.dcard__letter{position:absolute;right:-.06em;bottom:-.2em;font-size:clamp(220px,24vw,420px);line-height:1;font-weight:800;letter-spacing:-.06em;color:transparent;-webkit-text-stroke:1.5px var(--accent);opacity:.5;transition:opacity .6s,transform 1.2s var(--ease)}
.dcard:hover .dcard__letter{-webkit-text-stroke-color:#fff;opacity:.35;transform:translateY(-4%)}
.dcard__title{font-size:clamp(34px,3.4vw,64px);line-height:.95;font-weight:800;letter-spacing:-.05em}
.dcard__blurb{max-width:32ch;margin-top:14px;font-size:16px;line-height:1.5}
.dcard__go{display:inline-flex;align-items:center;gap:8px;margin-top:22px}
.dcard__go svg{width:14px;height:14px}
.dcard__bar{position:absolute;left:0;right:0;top:0;height:5px;background:var(--accent)}

/* Client wall: solid colour tiles, marks knocked out in white */
.cwall{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--gap);margin-top:clamp(70px,8vw,130px)}
.cwall li{position:relative;display:grid;place-items:center;aspect-ratio:1.5/1;border-radius:var(--radius);overflow:hidden;padding:12%}
.cwall li:nth-child(6n+1){background:var(--clay)}.cwall li:nth-child(6n+2){background:var(--ink)}.cwall li:nth-child(6n+3){background:var(--moss)}
.cwall li:nth-child(6n+4){background:var(--iris)}.cwall li:nth-child(6n+5){background:var(--pink)}.cwall li:nth-child(6n+6){background:#8C7A5E}
.cwall img{max-width:100%;max-height:100%;object-fit:contain;filter:brightness(0) invert(1);transition:transform .6s var(--ease)}
.cwall li:hover img{transform:scale(1.06)}
.cwall .cwall__name{color:#fff;font-family:var(--font-display);font-weight:700;font-size:clamp(15px,1.3vw,22px);letter-spacing:-.02em;text-align:center;line-height:1.1}

/* Accreditation tiles with badges */
.stiles img{height:clamp(48px,4.4vw,78px);width:auto;margin-bottom:6px;border-radius:4px;background:#fff;padding:5px}
.stiles--light li{border-color:var(--line);background:var(--white)}
.stiles--light span{color:var(--muted)}
.stiles p{max-width:30ch;margin-top:4px;text-align:center;font-size:14px;line-height:1.45;color:rgba(255,255,255,.62)}
.stiles--light p{color:var(--muted)}
.stiles--four{grid-template-columns:repeat(4,minmax(0,1fr))}
.stiles--four li{aspect-ratio:auto;padding:clamp(22px,2vw,34px) 16px;min-height:220px}

/* CTA band */
.cta{position:relative;z-index:2;background:var(--ink);color:#fff;padding:clamp(100px,12vw,200px) 0 clamp(90px,10vw,170px);text-align:center}
.cta__title{max-width:min(1100px,88vw);margin:0 auto;font-size:clamp(34px,4.4vw,80px);line-height:1.02;font-weight:800;letter-spacing:-.045em}
.cta__lead{max-width:56ch;margin:26px auto 0;color:rgba(255,255,255,.66)}
.cta__row{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:40px}
.cta .rule5{position:absolute;left:0;right:0;top:0}

/* Page hero for inner pages (service, capability, sector) */
.sp-hero{position:relative;z-index:2;background:var(--night);color:#fff;min-height:88vh;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:end;padding:calc(var(--nav-h) + 60px) var(--gut) clamp(40px,5vw,72px);overflow:hidden}
.sp-hero__text{grid-column:1 / span 7;display:flex;flex-direction:column;gap:22px;position:relative;z-index:2}
.sp-hero__title{font-size:clamp(40px,5.4vw,104px);line-height:.95;font-weight:800;letter-spacing:-.046em}
.sp-hero__title .ln{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
.sp-hero__title .ln > span{display:block;transform:translateY(110%);transition:transform 1.3s var(--ease)}
.hero-in .sp-hero__title .ln > span{transform:none}
.sp-hero__lead{max-width:56ch;color:rgba(255,255,255,.72);font-size:clamp(16px,1.2vw,20px);line-height:1.5}
.sp-hero__media{grid-column:9 / span 4;align-self:center;position:relative;aspect-ratio:4/5;border-radius:var(--radius);overflow:hidden;background:var(--ink-2);box-shadow:0 0 0 1px rgba(255,255,255,.06),0 30px 120px color-mix(in srgb,var(--accent) 22%,transparent)}
.sp-hero__media .media{position:absolute;inset:0;border-radius:0}
.sp-hero__media .art-wrap{position:absolute;inset:14%;display:grid;place-items:center}
.sp-hero__media .art-wrap svg{width:100%;height:100%;overflow:visible}
.sp-hero__media .glow{opacity:1}
.sp-hero .rule5{position:absolute;left:0;right:0;bottom:0}
.sp-hero__bg{position:absolute;inset:0;z-index:0;opacity:.35}
.sp-hero__bg img{width:100%;height:100%;object-fit:cover;filter:grayscale(.2)}
.sp-hero__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--night) 20%,transparent 80%),linear-gradient(0deg,var(--night),transparent 60%)}
.crumbs{display:flex;flex-wrap:wrap;gap:8px;align-items:center;color:rgba(255,255,255,.55)}
.crumbs a:hover{color:#fff}
.crumbs span[aria-hidden]{opacity:.5}
.sp-hero .tag--acc{background:var(--accent);border-color:var(--accent);color:#fff}
.sp-hero__stats{display:flex;flex-wrap:wrap;gap:8px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips li{padding:9px 13px 8px;border:1px solid var(--line);border-radius:999px;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;background:var(--white)}
.sec--ink .chips li,.sp-hero .chips li{background:transparent;border-color:rgba(255,255,255,.2);color:rgba(255,255,255,.8)}

/* Service detail body */
.detail{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);row-gap:40px;margin-top:clamp(80px,9vw,150px);align-items:start}
.detail__label{grid-column:1 / span 3}
.detail__label .mono{color:var(--muted)}
.detail__label h3{margin-top:10px;font-family:var(--font-display);font-size:clamp(24px,2vw,38px);line-height:1.02;font-weight:700;letter-spacing:-.035em}
.detail__body{grid-column:5 / span 5;font-size:clamp(17px,1.15vw,20px);line-height:1.6}
.detail__media{grid-column:1 / span 7;aspect-ratio:16/10}
.detail__aside{grid-column:9 / span 4;align-self:end}
.stagechips{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-top:clamp(60px,7vw,110px)}
.stagechips li{padding:16px 16px 18px;border-top:3px solid var(--accent);background:var(--white);border-radius:0 0 var(--radius) var(--radius)}
.stagechips b{display:block;margin-top:8px;font-family:var(--font-display);font-size:clamp(17px,1.25vw,22px);font-weight:600;letter-spacing:-.025em;line-height:1.1}
.stagechips .mono{color:var(--muted)}

/* Related cards */
.related{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);margin-top:clamp(60px,6vw,100px)}
.related a{position:relative;display:flex;flex-direction:column;justify-content:space-between;min-height:250px;padding:clamp(20px,1.8vw,30px);background:var(--white);border-radius:var(--radius);transition:background 1.2s var(--ease),color .5s}
.related a:hover{background:var(--accent);color:#fff;transition-duration:.3s}
.related h3{font-size:clamp(22px,1.7vw,32px);line-height:1.02;font-weight:700;letter-spacing:-.035em}
.related p{margin-top:12px;font-size:15px;line-height:1.5;opacity:.75}
.related .mono{opacity:.6}
.related svg{width:16px;height:16px}
.related__top{display:flex;justify-content:space-between;align-items:flex-start}
.related__img{position:relative;aspect-ratio:16/10;margin:-1px -1px 18px;border-radius:4px;overflow:hidden}
.related__img img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.related a:hover .related__img img{transform:scale(1.05)}

/* Services list (numbered, links) */
.svlist{margin-top:clamp(70px,8vw,130px);border-top:1px solid var(--line)}
.svlist a{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:baseline;padding:clamp(22px,2.4vw,38px) 0;border-bottom:1px solid var(--line);transition:background .4s,padding .6s var(--ease)}
.svlist .mono{grid-column:1 / span 1;color:var(--muted)}
.svlist h3{grid-column:2 / span 5;font-family:var(--font-display);font-size:clamp(22px,2vw,38px);line-height:1.02;font-weight:700;letter-spacing:-.035em;transition:color .3s}
.svlist p{grid-column:7 / span 5;font-size:15px;line-height:1.5;color:var(--muted)}
.svlist i{grid-column:12;justify-self:end;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;border:1px solid var(--line);transition:background .3s,border-color .3s,color .3s,transform .6s var(--ease)}
.svlist i svg{width:13px;height:13px}
.svlist a:hover{padding-left:14px;background:var(--white)}
.svlist a:hover h3{color:var(--accent)}
.svlist a:hover i{background:var(--accent);border-color:var(--accent);color:#fff;transform:rotate(-45deg)}

/* FAQ accordion */
.faq{margin-top:clamp(70px,8vw,130px);border-top:1px solid var(--line)}
.faq li{border-bottom:1px solid var(--line)}
.faq__q{display:grid;grid-template-columns:60px 1fr 44px;align-items:center;width:100%;padding:clamp(22px,2.2vw,34px) 0;text-align:left;font-size:clamp(20px,1.8vw,32px);line-height:1.1;font-weight:600;letter-spacing:-.03em}
.faq__q .mono{color:var(--muted);font-weight:400}
.faq__q i{position:relative;justify-self:end;width:38px;height:38px;border-radius:50%;border:1px solid var(--line);transition:background .3s,border-color .3s,transform .6s var(--ease)}
.faq__q i::before,.faq__q i::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.5px;background:currentColor;transform:translate(-50%,-50%)}
.faq__q i::after{transform:translate(-50%,-50%) rotate(90deg);transition:transform .5s var(--ease)}
.faq__q[aria-expanded="true"] i{background:var(--accent);border-color:var(--accent);color:#fff}
.faq__q[aria-expanded="true"] i::after{transform:translate(-50%,-50%) rotate(0)}
.faq__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .6s var(--ease)}
.faq__a > div{overflow:hidden}
.faq__a p{max-width:62ch;margin-left:60px;padding-bottom:clamp(22px,2.2vw,34px);color:var(--muted);font-size:17px;line-height:1.6}
.faq__q[aria-expanded="true"] + .faq__a{grid-template-rows:1fr}

/* Contact form */
.contact-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);row-gap:50px;margin-top:clamp(70px,8vw,130px);align-items:start}
.form{grid-column:1 / span 7;display:grid;grid-template-columns:1fr 1fr;gap:16px 14px}
.form .full{grid-column:1 / -1}
.form label{display:flex;flex-direction:column;gap:8px}
.form label > span{font-family:var(--font-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.form input,.form select,.form textarea{width:100%;padding:15px 16px;border:1px solid var(--line);border-radius:var(--radius);background:var(--white);font:inherit;font-size:16px;color:var(--ink);transition:border-color .3s,box-shadow .3s}
.form textarea{min-height:170px;resize:vertical}
.form input:focus,.form select:focus,.form textarea:focus{outline:0;border-color:var(--pink);box-shadow:0 0 0 3px color-mix(in srgb,var(--pink) 18%,transparent)}
.form .chips-in{display:flex;flex-wrap:wrap;gap:8px}
.form .chips-in label{flex-direction:row;align-items:center}
.form .chips-in input{position:absolute;opacity:0;width:1px;height:1px}
.form .chips-in span{padding:11px 16px;border:1px solid var(--line);border-radius:999px;background:var(--white);font-family:var(--font-display);font-size:15px;font-weight:600;letter-spacing:-.01em;text-transform:none;color:var(--ink);cursor:pointer;transition:background .3s,color .3s,border-color .3s}
.form .chips-in input:checked + span{background:var(--ink);border-color:var(--ink);color:#fff}
.form .chips-in input:focus-visible + span{outline:2px solid var(--pink);outline-offset:2px}
.form .hp{position:absolute;left:-9999px}
.form__note{font-size:14px;color:var(--muted)}
.form__status{grid-column:1 / -1;font-size:15px}
.contact-aside{grid-column:9 / span 4;display:flex;flex-direction:column;gap:34px}
.contact-aside h3{font-family:var(--font-display);font-size:22px;font-weight:700;letter-spacing:-.03em;margin-bottom:12px}
.steps-mini li{display:grid;grid-template-columns:34px 1fr;gap:6px;padding:12px 0;border-top:1px solid var(--line);font-size:16px}
.steps-mini .mono{color:var(--accent)}
.contact-aside a{border-bottom:1px solid var(--line)}
.contact-aside a:hover{border-color:var(--ink)}

/* Gallery with lightbox */
.gallery{columns:3 280px;column-gap:var(--gap);margin-top:clamp(60px,7vw,120px)}
.gallery button{display:block;width:100%;margin:0 0 var(--gap);padding:0;border-radius:var(--radius);overflow:hidden;break-inside:avoid;position:relative;cursor:zoom-in;background:var(--ink-2)}
.gallery img{width:100%;height:auto;display:block;transition:transform 1.2s var(--ease),opacity .6s}
.gallery button:hover img{transform:scale(1.04)}
.gallery figcaption{position:absolute;left:10px;bottom:10px;padding:6px 9px;background:rgba(11,11,13,.72);color:#fff;border-radius:4px;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;opacity:0;transform:translateY(6px);transition:opacity .35s,transform .5s var(--ease)}
.gallery button:hover figcaption{opacity:1;transform:none}
.lightbox{position:fixed;inset:0;z-index:170;background:rgba(8,8,10,.94);display:grid;grid-template-columns:70px 1fr 70px;align-items:center;opacity:0;visibility:hidden;transition:opacity .4s,visibility 0s linear .4s}
.lightbox.on{opacity:1;visibility:visible;transition:opacity .4s}
.lightbox figure{grid-column:2;display:flex;flex-direction:column;align-items:center;gap:14px;max-height:88vh}
.lightbox img{max-width:100%;max-height:80vh;border-radius:var(--radius);object-fit:contain}
.lightbox figcaption{color:rgba(255,255,255,.7)}
.lightbox button{color:#fff;display:grid;place-items:center;width:52px;height:52px;margin:auto;border-radius:50%;border:1px solid rgba(255,255,255,.25);transition:background .3s}
.lightbox button:hover{background:var(--pink);border-color:var(--pink)}
.lightbox .lb-close{position:absolute;right:18px;top:18px;width:44px;height:44px}
.lightbox svg{width:14px;height:14px}

/* Case study cards (index) */
.ccards{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);margin-top:clamp(70px,8vw,130px)}
.ccard{display:block}
.ccard__img{position:relative;aspect-ratio:4/3.2;border-radius:var(--radius);overflow:hidden}
.ccard__img img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.ccard:hover .ccard__img img{transform:scale(1.05)}
.ccard__meta{display:flex;justify-content:space-between;gap:12px;margin-top:18px;color:var(--muted)}
.ccard h3{margin-top:8px;font-family:var(--font-display);font-size:clamp(28px,2.8vw,54px);line-height:.98;font-weight:800;letter-spacing:-.045em}
.ccard p{margin-top:12px;max-width:48ch;color:var(--muted)}

/* Sector cards */
.secards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap);margin-top:clamp(60px,7vw,110px)}
.secard{display:flex;flex-direction:column;justify-content:space-between;min-height:300px;padding:clamp(18px,1.6vw,28px);background:var(--white);border-radius:var(--radius);transition:background 1.2s var(--ease),color .5s}
.secard:hover{background:var(--accent);color:#fff;transition-duration:.3s}
.secard h3{font-family:var(--font-display);font-size:clamp(22px,1.7vw,32px);line-height:1.02;font-weight:700;letter-spacing:-.035em}
.secard p{margin-top:10px;font-size:14.5px;line-height:1.5;opacity:.72}

/* Legal placeholder */
.legal-note{max-width:68ch;margin:0 auto;padding:clamp(60px,7vw,120px) var(--gut);font-size:17px}
.legal-note .tag{margin-bottom:18px}

/* Case study toggle with photos (home) */
.work--photos .slide{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);text-align:left;align-items:center}
.work--photos .slide__img{grid-column:1 / span 6;aspect-ratio:4/3;border-radius:var(--radius);overflow:hidden}
.work--photos .slide__img img{width:100%;height:100%;object-fit:cover}
.work--photos .slide__text{grid-column:8 / span 5}
.work--photos .slide .xl{font-size:clamp(28px,2.6vw,50px)}
.work--photos .figs{justify-content:flex-start}
.work--photos .work__slides{max-width:none;min-height:0}

@media (max-width:1100px){
  .cwall{grid-template-columns:repeat(4,minmax(0,1fr))}
  .secards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sp-hero__text{grid-column:1 / span 8}
  .sp-hero__media{grid-column:9 / span 4}
  .stiles--four{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:767px){
  body{font-size:16px}
  .dcards,.ccards,.related,.secards{grid-template-columns:1fr}
  .dcard{min-height:360px}
  .cwall{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sp-hero{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-end;gap:30px;min-height:auto;padding-top:calc(var(--nav-h) + 30px)}
  .sp-hero__media{order:-1;width:70%;align-self:flex-start;aspect-ratio:4/4}
  .detail{display:flex;flex-direction:column;gap:20px}
  .stagechips{grid-template-columns:1fr 1fr}
  .svlist a{grid-template-columns:36px 1fr 40px;row-gap:6px}
  .svlist .mono{grid-column:1}.svlist h3{grid-column:2}.svlist p{grid-column:2;grid-row:2}.svlist i{grid-column:3;grid-row:1}
  .faq__q{grid-template-columns:36px 1fr 40px}
  .faq__a p{margin-left:36px}
  .form,.contact-aside{grid-column:1 / -1}
  .form{grid-template-columns:1fr}
  .lightbox{grid-template-columns:44px 1fr 44px}
  .work--photos .slide{display:flex;flex-direction:column;gap:20px}
  .stiles--four{grid-template-columns:1fr}
}

/* ==========================================================================
   10. FULL SITE ADDITIONS
   ========================================================================== */
/* Illustration panels in place of photography */
.media--art{background:var(--ink-2);display:grid;place-items:center;color:#fff}
.media--art > svg{width:74%;height:auto;max-height:80%;overflow:visible}
.media--art .step-art{width:100%;max-height:none}
.art-wrap svg{color:#fff}
.sp-hero__media .media img{width:100%;height:100%;object-fit:cover}
.spanel__art.is-photo{padding:0;overflow:hidden;border-radius:var(--radius)}
.spanel__art.is-photo img{width:100%;height:100%;object-fit:cover}
.scard__box{position:relative}
.scard__photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s,transform 1.2s var(--ease)}
.scard:hover .scard__photo,.scard:focus-visible .scard__photo{opacity:1;transform:scale(1.04)}
.secard .pcard__icon svg,.pcard__icon svg{width:100%;height:100%}

/* Buttons */
.btn--accent{background:var(--pink);color:#fff;border-color:var(--pink)}
.btn--accent .btn__arrow{background:#fff;color:var(--pink)}
.btn--accent:hover{background:#fff;color:var(--ink);border-color:#fff}
button.btn{cursor:pointer;border:0}
button.btn:disabled{opacity:.5;pointer-events:none}

/* Footer */
.footer__strap{font-family:var(--font-display);font-weight:600;font-size:clamp(17px,1.2vw,21px);letter-spacing:-.02em;max-width:26ch;line-height:1.2}
.footer__tagline{height:18px;width:auto;opacity:.85;margin-top:6px}
.footer__cov{margin-top:6px;font-size:12.5px;color:var(--muted);line-height:1.35}
.footer__rule{margin:26px calc(var(--gut) * -1) 0}
.footer__bottom{border-top:0}
.footer__bottom a{border-bottom:1px solid var(--line)}
.footer__bottom a:hover{border-color:var(--ink)}

/* Loader: the white horizontal wordmark wipes on */
.loader__icon{display:none}
.loader__word img{height:clamp(30px,3.4vw,52px);width:auto;display:block}
.loader__word{text-shadow:none}

/* Chips as links */
.chips a{display:block;margin:-9px -13px -8px;padding:9px 13px 8px}
.chips li{transition:background .3s,color .3s,border-color .3s}
.chips li:has(a):hover{background:var(--accent);border-color:var(--accent);color:#fff}

/* Jobs */
.jobs .jobs__apply svg{width:12px;height:12px;margin-left:6px;vertical-align:-1px}

@media (max-width:767px){
  .footer__rule{margin-left:calc(var(--gut) * -1);margin-right:calc(var(--gut) * -1)}
  .footer__tagline{height:15px}
}
.secard .related__top > svg{width:16px;height:16px}
.secard .pcard__icon{display:block;color:var(--accent)}
.secard:hover .pcard__icon{color:#fff}

/* ==========================================================================
   11. COLOUR-BLOCK REDESIGN
   Colour is assigned per page from a shuffled palette (build.py), so every
   page gets its own mix. No section kickers, no numbering.
   ========================================================================== */
:root{--bronze:#A8814E;--sage:#7E8C60;--violet:#7E6FB8;--r:10px}
.cb-pink{--cb:#EC008C;--cf:#FFFFFF;--cp:#F0D878}
.cb-clay{--cb:#C85A4A;--cf:#FFFFFF;--cp:#F0D878}
.cb-sun{--cb:#F0D878;--cf:#0B0B0D;--cp:#EC008C}
.cb-moss{--cb:#8A9A6B;--cf:#0B0B0D;--cp:#F0D878}
.cb-iris{--cb:#A89BD4;--cf:#0B0B0D;--cp:#FFFFFF}
.cb-sand{--cb:#D4B896;--cf:#0B0B0D;--cp:#C85A4A}
.cb-bronze{--cb:#A8814E;--cf:#0B0B0D;--cp:#F0D878}
.cb-sage{--cb:#7E8C60;--cf:#0B0B0D;--cp:#F0D878}
.cb-violet{--cb:#7E6FB8;--cf:#FFFFFF;--cp:#F0D878}
.cb-ink{--cb:#0B0B0D;--cf:#FFFFFF;--cp:#EC008C}
.cb{background:var(--cb);color:var(--cf);--accent:var(--cp)}
.cb .btn{background:var(--cf);color:var(--cb)}
.cb .btn__arrow{background:var(--cb);color:var(--cf)}
.btn--ghost{background:transparent!important;color:inherit!important;box-shadow:inset 0 0 0 1.5px currentColor}
.cb .btn--ghost .btn__arrow{background:var(--cf);color:var(--cb)}
.btn--pink{background:var(--pink);color:#fff}
.btn--pink .btn__arrow{background:#fff;color:var(--pink)}
.btn{border-radius:8px}
.btn__arrow{border-radius:6px}
.row-start{display:flex;margin-top:clamp(36px,4vw,60px)}

/* Retired furniture: kickers, labels, numbering */
.media::before,.media::after{display:none}
.intro .xl{text-indent:0}
.intro{max-width:min(1180px,82vw)}
.eyebrows,.hero__meta,.crumbs{display:none}

/* Hero: halo size from the word length, glow colour per page */
.halo{font-size:calc(var(--hvw,15.2) * 1vw)}
.hero__title{max-width:min(1180px,72vw)}
.hero__scroll{width:1.5px;height:54px;background:rgba(255,255,255,.18);overflow:hidden;border-radius:2px}
.hero__scroll i{position:absolute;left:0;right:0;top:0;height:40%;background:var(--accent);animation:scroll-cue 2.2s var(--ease-io) infinite}
@keyframes scroll-cue{0%{transform:translateY(-100%)}60%,100%{transform:translateY(260%)}}
.hcard{border-radius:var(--r)}
.hcard .media--art{display:grid;place-items:center}
.hcard .media--art svg{width:74%;height:auto;max-height:70%}
.hcard__bar{font-size:13px;height:30px;border-radius:6px}

/* Ticker: smaller, a coloured dot before every word */
.ticker{padding:clamp(18px,1.8vw,28px) 0;background:var(--ink)}
.ticker__track{gap:clamp(34px,3.4vw,60px);font-size:clamp(24px,2.5vw,44px);font-weight:700;letter-spacing:-.035em}
.ticker__track span{display:inline-flex;align-items:center;gap:clamp(18px,1.6vw,28px)}
.ticker__track i{flex:0 0 auto;width:.28em;height:.28em;border-radius:50%}

/* Statement band */
.band{position:relative;z-index:2;padding:clamp(110px,14vw,240px) var(--gut);text-align:center;overflow:hidden}
.band__text{max-width:15ch;margin:0 auto;font-family:var(--font-display);font-weight:800;font-size:clamp(46px,6.8vw,136px);line-height:.94;letter-spacing:-.05em;color:color-mix(in srgb,var(--cf) calc(30% + var(--p,0) * 70%),var(--cb))}
.band__text--long{max-width:22ch;font-size:clamp(36px,4.4vw,86px);line-height:1}
.band__text--xlong{max-width:30ch;font-size:clamp(28px,3vw,56px);line-height:1.08;letter-spacing:-.035em}
.band__text--sm{max-width:20ch;font-size:clamp(36px,4.4vw,84px)}
.band__sub{max-width:48ch;margin:clamp(28px,3vw,48px) auto 0;font-size:clamp(17px,1.25vw,22px);line-height:1.45;opacity:.8}
.pills{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;max-width:1100px;margin:clamp(40px,4vw,70px) auto 0}
.pills a{display:block;padding:12px 18px;border-radius:999px;box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--cf) 45%,transparent);font-family:var(--font-display);font-weight:600;font-size:15px;transition:background .3s,color .3s}
.pills a:hover,.pills a[aria-current]{background:var(--cf);color:var(--cb)}

/* Colour tiles (links) */
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);margin-top:clamp(70px,8vw,130px)}
.tiles--four{grid-template-columns:repeat(4,minmax(0,1fr))}
.tile{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:clamp(330px,27vw,470px);padding:clamp(20px,1.8vw,30px);border-radius:var(--r);overflow:hidden;isolation:isolate;transition:transform .8s var(--ease)}
.tile:hover,.tile:focus-visible{transform:translateY(-6px)}
.tile__img{position:absolute;left:10px;right:10px;top:10px;height:52%;border-radius:6px;overflow:hidden;z-index:-1}
.tile__img img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.tile:hover .tile__img img{transform:scale(1.06)}
.tile__art{position:absolute;left:14%;right:14%;top:8%;height:48%;display:grid;place-items:center;z-index:-1;transition:transform 1s var(--ease)}
.tile__art svg{width:100%;height:100%;overflow:visible}
.tile:hover .tile__art{transform:translateY(-4%) scale(1.04)}
.tile__icon{position:absolute;left:clamp(20px,1.8vw,30px);top:clamp(20px,1.8vw,30px);width:clamp(40px,3vw,54px);height:clamp(40px,3vw,54px)}
.tile__icon svg{width:100%;height:100%}
.tile__go{position:absolute;right:14px;top:14px;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--cf);color:var(--cb);transform:scale(.6);opacity:0;transition:transform .6s var(--ease),opacity .35s}
.tile__go svg{width:14px;height:14px}
.tile:hover .tile__go,.tile:focus-visible .tile__go{transform:none;opacity:1}
.tile--img .tile__go{top:22px;right:22px}
.tile__title{display:block;font-family:var(--font-display);font-weight:700;font-size:clamp(22px,1.75vw,32px);line-height:1.04;letter-spacing:-.035em}
.tile__body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .6s var(--ease)}
.tile__body > span{overflow:hidden}
.tile__body > span > span{display:block;padding-top:12px;font-size:15px;line-height:1.45;opacity:0;transition:opacity .4s}
.tile:hover .tile__body,.tile:focus-visible .tile__body{grid-template-rows:1fr}
.tile:hover .tile__body > span > span,.tile:focus-visible .tile__body > span > span{opacity:.85;transition-delay:.1s}
@media (hover:none){.tile__body{grid-template-rows:1fr}.tile__body > span > span{opacity:.85}.tile__go{opacity:1;transform:none}}

/* Colour blocks (not links) */
.blocks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);margin-top:clamp(60px,7vw,120px)}
.blocks--four{grid-template-columns:repeat(4,minmax(0,1fr))}
.blocks--five{grid-template-columns:repeat(5,minmax(0,1fr))}
.block{display:flex;flex-direction:column;justify-content:space-between;gap:26px;min-height:clamp(210px,17vw,300px);padding:clamp(20px,1.8vw,30px);border-radius:var(--r)}
.block__title{font-family:var(--font-display);font-weight:700;font-size:clamp(21px,1.6vw,30px);line-height:1.06;letter-spacing:-.03em}
.block__body{font-size:15.5px;line-height:1.45;opacity:.86}
.blocks--five .block__title{font-size:clamp(19px,1.35vw,25px)}

/* Discipline cards */
.dcards{margin-top:clamp(70px,8vw,130px)}
.dcard{justify-content:flex-end;background:var(--cb);color:var(--cf);transition:transform .8s var(--ease)}
.dcard:hover,.dcard:focus-visible{background:var(--cb);color:var(--cf);transform:translateY(-8px)}
.dcard__letter{-webkit-text-stroke:1.5px currentColor;opacity:.28;right:.02em;bottom:auto;top:-.14em}
.dcard:hover .dcard__letter{-webkit-text-stroke-color:currentColor;opacity:.45}
.dcard__go{position:absolute;right:clamp(22px,2.2vw,40px);top:clamp(22px,2.2vw,40px);display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--cf);color:var(--cb);transition:transform .6s var(--ease)}
.dcard__go svg{width:16px;height:16px}
.dcard:hover .dcard__go{transform:rotate(45deg)}
.dcard__foot{position:relative;display:flex;flex-direction:column;gap:14px}
.dcard__title{display:block}
.dcard__blurb{display:block;max-width:34ch;font-size:16px;line-height:1.45;opacity:.85}
.dcard__count{display:inline-block;align-self:flex-start;padding:7px 12px;border-radius:999px;box-shadow:inset 0 0 0 1.5px currentColor;font-size:13px;font-weight:600;color:inherit}
.dcard__bar,.dcard__top{display:none}

/* Case study cards */
.ccard{display:flex;flex-direction:column;border-radius:var(--r);overflow:hidden}
.ccard__img{aspect-ratio:4/3;border-radius:var(--r) var(--r) 0 0}
.ccard__body{position:relative;display:flex;flex-direction:column;gap:12px;padding:clamp(22px,2vw,34px) clamp(22px,2vw,34px) clamp(26px,2.4vw,40px);flex:1}
.ccard__name{font-family:var(--font-display);font-weight:800;font-size:clamp(28px,2.6vw,50px);line-height:.98;letter-spacing:-.045em;padding-right:56px}
.ccard__sum{max-width:44ch;font-size:16px;line-height:1.45;opacity:.85}
.ccard__go{position:absolute;right:clamp(22px,2vw,34px);top:clamp(22px,2vw,34px);display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--cf);color:var(--cb);transition:transform .6s var(--ease)}
.ccard__go svg{width:15px;height:15px}
.ccard:hover .ccard__go{transform:rotate(45deg)}

/* Chips */
.chips li.cb{border:0}
.chips--big{margin-top:clamp(40px,4vw,70px)}
.chips--big li{padding:13px 18px 12px;font-family:var(--font-display);font-size:clamp(15px,1.05vw,18px);font-weight:600;letter-spacing:-.01em;text-transform:none}
.chips--stack{flex-direction:column;align-items:flex-start;gap:10px}
.chips--stack li{padding:14px 20px 13px;font-family:var(--font-display);font-size:clamp(16px,1.2vw,21px);font-weight:600;letter-spacing:-.015em;text-transform:none}

/* CTA */
.cta{padding:clamp(110px,12vw,210px) 0}
.cta .rule5{display:none}
.cta__title{color:inherit}
.cta__lead{color:inherit;opacity:.8}

/* Next page */
.next{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto 1fr;align-items:end;gap:20px var(--gap);height:auto;min-height:clamp(380px,60vh,640px);padding:var(--gut);overflow:hidden}
.next__top{grid-column:1 / -1;display:flex;justify-content:space-between;align-items:center}
.next__kick{font-family:var(--font-display);font-weight:600;font-size:clamp(16px,1.2vw,20px);opacity:.75}
.next__arrow{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--cf);color:var(--cb);transition:transform .7s var(--ease)}
.next__arrow svg{width:18px;height:18px}
.next:hover .next__arrow{transform:rotate(45deg) scale(1.08)}
.next__title{position:static;align-self:end;max-width:12ch;font-family:var(--font-display);font-weight:800;font-size:clamp(56px,8.4vw,164px);line-height:.88;letter-spacing:-.05em;transition:transform .9s var(--ease)}
.next:hover .next__title{transform:translateX(1.5vw)}
.next__img{position:relative;width:clamp(260px,30vw,560px);aspect-ratio:4/3;border-radius:var(--r);overflow:hidden;align-self:end}
.next__img img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.next:hover .next__img img{transform:scale(1.05)}
.next__img--art{display:grid;place-items:center;box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--cf) 30%,transparent)}
.next__img--art svg{width:70%;height:auto;max-height:78%;overflow:visible}

/* Pinned card: colour card, dots in place of numbers */
.facility__card{border-radius:var(--r)}
.facility__media{border-radius:var(--r)}
.facility__card.cb .fitem p{opacity:.88}
.toggle{background:transparent;padding:0;gap:8px;align-items:center}
.toggle i{display:none}
.toggle button{width:11px;height:11px;border-radius:50%;box-shadow:inset 0 0 0 1.5px currentColor;transition:background .3s,transform .5s var(--ease),width .5s var(--ease)}
.toggle button[aria-selected="true"]{width:30px;border-radius:6px;background:currentColor}
.media--art{display:grid;place-items:center}
.media--art > svg{width:62%;height:auto;max-height:66%;overflow:visible}
.media--art .art-wrap{position:absolute;inset:22%;display:grid;place-items:center}
.media--art .art-wrap svg{width:100%;height:100%}
.media--step{background:#0C0D0E;color:var(--accent)}
.media--step .step-art{opacity:1;transform:none}
.split .grow.media--art > svg{width:74%}

/* Capability dial */
.process{--cb:var(--paper)}
.process__list ul{display:flex;flex-direction:column}
.process__title{font-family:var(--font-display);font-weight:700;font-size:clamp(22px,1.7vw,32px);line-height:1.05;letter-spacing:-.03em;margin-bottom:14px}
.process__link{margin-top:24px}
.ring .major{stroke:var(--accent);stroke-width:2}
.process__bar i{background:var(--accent)}
.process__list li.on{color:var(--ink)}
.process__list li.on button{position:relative}
.process__list li.on button::after{content:"";position:absolute;left:calc(100% + 16px);top:50%;width:.26em;height:.26em;border-radius:50%;background:var(--accent);transform:translateY(-30%)}
.art svg{color:var(--ink)}

/* Services grid: coloured boxes */
.scard__box{border-radius:var(--r)}
.scard__box.cb .scard__art{color:var(--cf)}
.scard__photo{z-index:2}
.sgrid:hover .scard:not(:hover) .scard__title{color:#BFC3C2}
.spanel{border-radius:var(--r)}
.spanel.cb .spanel__desc{color:inherit;opacity:.85}
.spanel.cb .spanel__art{color:var(--cf)}
.spanel.cb .btn--light{background:var(--cf);color:var(--cb)}
.spanel.cb .btn--light .btn__arrow{background:var(--cb);color:var(--cf)}
.spanel__close{font-size:13px;font-weight:600}

/* FAQ without numbers */
.faq__q{grid-template-columns:1fr 44px;gap:20px}
.faq__a p{margin-left:0}
.faq__q:hover span{color:var(--ink)}
.faq__q[aria-expanded="true"] i{background:var(--pink);border-color:var(--pink)}

/* Accreditation tiles on ink: colour bar on top */
.stiles li{border:0;border-top:4px solid var(--bar,var(--pink));border-radius:0 0 var(--r) var(--r);background:#141416}
.stiles li:hover{background:#1B1B1E}
.stiles--four li{min-height:240px;padding:clamp(24px,2vw,34px) 18px}
.standards__lead{max-width:56ch;margin-top:clamp(24px,2.4vw,40px);color:rgba(255,255,255,.66);font-size:clamp(16px,1.15vw,20px);line-height:1.5}
.standards .row-start .btn{margin:0}

/* Case study toggle (home) */
.work__head{margin-top:clamp(50px,6vw,100px)}
.work .toggle{color:var(--ink)}
.slide__name{margin-bottom:18px;font-family:var(--font-display);font-weight:700;font-size:clamp(20px,1.5vw,26px);letter-spacing:-.025em;color:var(--accent)}
.work--photos .slide__img{border-radius:var(--r)}
.work--photos .chips{margin-top:24px}
.slide__btn{margin-top:30px}

/* Steps list without numbers */
.steps__list h3{display:block}
.steps__media{border-radius:var(--r)}

/* Client wall: randomised colour tiles */
.cwall li{border-radius:var(--r)}
.cwall li:nth-child(n){background:var(--cb)}
.cwall .cwall__name{color:var(--cf)}
.cwall li.cb-sun img,.cwall li.cb-sand img,.cwall li.cb-iris img,.cwall li.cb-moss img,.cwall li.cb-bronze img,.cwall li.cb-sage img{filter:brightness(0)}

/* Jobs */
.jobs{display:grid;gap:var(--gap);margin-top:clamp(60px,7vw,110px);border:0}
.job{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,1.3fr) auto;align-items:center;gap:clamp(16px,2vw,40px);padding:clamp(24px,2.4vw,40px);border-radius:var(--r)}
.job__type{padding:7px 12px;border-radius:999px;box-shadow:inset 0 0 0 1.5px currentColor;font-size:13px;font-weight:600;white-space:nowrap}
.job__title{font-family:var(--font-display);font-weight:700;font-size:clamp(24px,2vw,38px);letter-spacing:-.035em;line-height:1.02}
.job__body{font-size:16px;line-height:1.45;opacity:.85}
.positions__note{margin-top:28px;text-align:center;color:var(--muted);font-size:15px}
.positions__note a{border-bottom:1px solid var(--line)}

/* Contact */
.contact-aside{gap:var(--gap)}
.aside-block{padding:clamp(22px,2vw,30px);border-radius:var(--r)}
.aside-block h3{margin-bottom:14px}
.aside-block a{border-bottom:1px solid color-mix(in srgb,var(--cf) 35%,transparent)}
.aside-block p + p{margin-top:8px}
.aside-block address{font-style:normal;line-height:1.5}
.aside-block .steps-mini li{display:block;padding:10px 0;border-top:1px solid color-mix(in srgb,var(--cf) 22%,transparent)}
.form label > span,.form__set legend{font-family:var(--font-sans);font-size:14px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--ink)}
.form__set{border:0;padding:0;margin:0}
.form__set legend{margin-bottom:12px}
.form .chips-in input:checked + span{background:var(--pick,var(--ink));border-color:var(--pick,var(--ink));color:#fff}
.form input,.form select,.form textarea{border-radius:8px}
.form__note a{border-bottom:1px solid var(--line)}

/* Quote, story, values, ring */
.quote__lead{max-width:52ch;margin:clamp(30px,3vw,50px) auto 0;color:var(--muted);font-size:clamp(16px,1.15vw,20px);line-height:1.5}
.story__labels{display:none}
.values__list li{font-size:clamp(40px,4.2vw,82px)}
.values__list li.on{color:var(--accent)}
.values__listwrap{width:58%}
.values__desc{left:auto;right:calc(var(--gut) + 4vw);width:min(320px,24vw)}
.ringdial{background:var(--paper)}
.ringdial__pin{grid-template-columns:1fr}
.ringdial__stage{justify-self:center}
.ringdial__side,.ringdial__tags,.values__label,.values__tags{display:none}

/* Map card: title and text only */
.map__loc{display:none}
.map__sector{font-family:var(--font-sans);font-size:14px;font-weight:600;letter-spacing:0;text-transform:none}
.map__index{font-family:var(--font-display);font-size:15px;font-weight:600;letter-spacing:0;text-transform:none}

/* Footer */
.footer__h{margin-bottom:8px;font-family:var(--font-display);font-weight:700;font-size:15px;letter-spacing:-.01em;color:var(--ink)}

/* Legal */
.legal-note__flag{display:inline-block;padding:8px 14px;border-radius:999px;font-weight:600;font-size:14px}
.legal-note .xl{font-size:clamp(26px,2.4vw,42px);margin:22px 0 28px}
.legal-note__co{margin-top:28px;color:var(--muted);font-size:14px}
.legal-note a{border-bottom:1px solid var(--line)}

/* ---- Mega menu ---------------------------------------------------------- */
.mega{position:fixed;inset:0;z-index:110;color:#fff;visibility:hidden;pointer-events:none;transition:visibility 0s linear 1s}
.menu-open .mega{visibility:visible;pointer-events:auto;transition:visibility 0s}
.mega__bg{position:absolute;inset:0;display:grid;grid-template-columns:repeat(5,1fr)}
.mega__bg i{position:relative;background:var(--ink);transform:scaleY(0);transform-origin:50% 0;transition:transform .7s var(--ease-io);transition-delay:calc((4 - var(--k)) * 45ms)}
.mega__bg i::after{content:"";position:absolute;left:0;right:0;bottom:0;height:6px;transition:opacity .5s ease .5s;opacity:1}
.mega__bg i:nth-child(1){--k:0}.mega__bg i:nth-child(2){--k:1}.mega__bg i:nth-child(3){--k:2}.mega__bg i:nth-child(4){--k:3}.mega__bg i:nth-child(5){--k:4}
.mega__bg i:nth-child(1)::after{background:var(--clay)}.mega__bg i:nth-child(2)::after{background:var(--sun)}.mega__bg i:nth-child(3)::after{background:var(--moss)}.mega__bg i:nth-child(4)::after{background:var(--iris)}.mega__bg i:nth-child(5)::after{background:var(--pink)}
.menu-open .mega__bg i{transform:scaleY(1);transition-delay:calc(var(--k) * 55ms)}
.menu-open .mega__bg i::after{opacity:0;transition-delay:.75s}
.mega__inner{position:relative;height:100%;display:flex;flex-direction:column;padding:calc(var(--nav-h) + clamp(14px,3vh,40px)) var(--gut) var(--gut);opacity:0;transition:opacity .25s ease}
.menu-open .mega__inner{opacity:1;transition:opacity .3s ease .3s}
.mega__list{position:relative;display:flex;flex-wrap:wrap;gap:4px clamp(22px,2.8vw,52px);padding-bottom:clamp(14px,1.6vw,22px);border-bottom:1px solid rgba(255,255,255,.12)}
.mega__item{--k:0}
.mega__item:nth-child(2){--k:1}.mega__item:nth-child(3){--k:2}.mega__item:nth-child(4){--k:3}.mega__item:nth-child(5){--k:4}.mega__item:nth-child(6){--k:5}
.mega__tab{position:relative;display:inline-flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:700;font-size:clamp(28px,2.9vw,54px);line-height:1.1;letter-spacing:-.04em;color:rgba(255,255,255,.36);transition:color .4s ease}
.mega__tabtxt{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.mega__tabtxt > span{display:block;transform:translateY(110%);transition:transform .9s var(--ease)}
.menu-open .mega__tabtxt > span{transform:none;transition-delay:calc(.32s + var(--k) * 55ms)}
.mega__tab::after{content:"";position:absolute;left:0;right:0;bottom:calc(-1 * clamp(15px,1.6vw,23px));height:3px;border-radius:2px;background:var(--mc);transform:scaleX(0);transform-origin:0 50%;transition:transform .6s var(--ease)}
.mega__item.on .mega__tab,.mega__tab:hover{color:#fff}
.mega__item.on .mega__tab::after{transform:scaleX(1)}
.mega__chev{display:none}
.mega__panel{position:absolute;left:0;right:0;top:calc(100% + clamp(26px,4vh,56px));opacity:0;visibility:hidden;transform:translate3d(0,14px,0);transition:opacity .3s ease,transform .6s var(--ease),visibility 0s linear .3s}
.mega__item.on .mega__panel{opacity:1;visibility:visible;transform:none;transition:opacity .5s ease .08s,transform .9s var(--ease) .08s,visibility 0s}
.mega__panelin{display:grid;grid-template-columns:minmax(0,3.2fr) minmax(0,5fr) minmax(0,4.2fr);gap:clamp(24px,3.2vw,60px);align-items:start}
.mega__title{font-family:var(--font-display);font-weight:800;font-size:clamp(34px,3.2vw,60px);line-height:.96;letter-spacing:-.045em}
.mega__title::after{content:".";color:var(--pink)}
.mega__blurb{max-width:36ch;margin-top:18px;color:rgba(255,255,255,.66);font-size:clamp(15px,1.05vw,18px);line-height:1.5}
.mega__view{margin-top:26px}
.mega__links{column-gap:clamp(18px,2vw,34px)}
.mega__links--3{columns:3}.mega__links--2{columns:2}.mega__links--1{columns:1}
.mega__links li{break-inside:avoid;margin-bottom:clamp(8px,1.1vh,13px);opacity:0;transform:translateY(8px);transition:opacity .4s ease,transform .6s var(--ease)}
.mega__item.on .mega__links li{opacity:1;transform:none;transition-delay:calc(.12s + var(--k) * 16ms)}
.mega__links a{position:relative;display:inline-block;font-size:clamp(14px,.98vw,17px);line-height:1.3;color:rgba(255,255,255,.7);transition:color .25s,transform .4s var(--ease)}
.mega__links a::before{content:"";position:absolute;left:-14px;top:.55em;width:6px;height:6px;border-radius:50%;background:var(--mc);opacity:0;transform:scale(.4);transition:opacity .25s,transform .4s var(--ease)}
.mega__links a:hover{color:#fff;transform:translateX(12px)}
.mega__links a:hover::before{opacity:1;transform:none}
.mega__cards{display:grid;gap:10px}
.mega__cards--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.mega__cards--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.mcard{position:relative;display:block;aspect-ratio:3/4;max-height:calc(100vh - var(--nav-h) - 260px);border-radius:12px;overflow:hidden;opacity:0;transform:translateY(22px) scale(.96);transition:opacity .5s ease,transform .9s var(--ease)}
.mega__item.on .mcard{opacity:1;transform:none;transition-delay:calc(.18s + var(--k) * 90ms)}
.mcard__media{position:absolute;inset:0;overflow:hidden}
.mcard__media img,.mcard__media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.mcard__media img{animation:kenburns 16s ease-in-out infinite alternate}
.mcard__media video{opacity:0;transition:opacity .8s ease}
.mcard__media video.playing{opacity:1}
.mcard:hover .mcard__media img,.mcard:hover .mcard__media video{transform:scale(1.05)}
.mcard__media::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.55),rgba(0,0,0,0) 45%);pointer-events:none}
.mcard--art .mcard__media::after{display:none}
.mcard__art{position:absolute;inset:18% 12% 28%;display:grid;place-items:center;animation:floaty 6s ease-in-out infinite}
.mcard__art svg{width:100%;height:100%;overflow:visible}
.mcard__label{position:absolute;left:14px;right:14px;bottom:12px;z-index:2;font-family:var(--font-display);font-weight:600;font-size:clamp(15px,1.1vw,19px);letter-spacing:-.015em;color:#fff}
.mcard--art .mcard__label{color:var(--cf)}
.mcard--art .mcard__media + .mcard__label{color:inherit}
@keyframes kenburns{0%{transform:scale(1.02) translate3d(0,0,0)}100%{transform:scale(1.14) translate3d(-2%,-1.5%,0)}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-4%)}}
.mega__foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:18px 30px;margin-top:auto;padding-top:clamp(14px,2vh,22px);border-top:1px solid rgba(255,255,255,.12)}
.mega__more{display:flex;flex-wrap:wrap;gap:6px clamp(20px,2vw,34px)}
.mega__more li{opacity:0;transform:translateY(10px);transition:opacity .4s ease,transform .7s var(--ease)}
.menu-open .mega__more li{opacity:1;transform:none;transition-delay:calc(.55s + var(--k) * 50ms)}
.mega__more a{font-family:var(--font-display);font-weight:600;font-size:clamp(19px,1.5vw,27px);letter-spacing:-.025em;color:rgba(255,255,255,.72);transition:color .25s}
.mega__more a:hover{color:#fff}
.mega__meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;color:rgba(255,255,255,.6);font-size:14px}
.mega__meta a:hover{color:#fff}
.mega .socials a{background:rgba(255,255,255,.1)}
.mega .socials a:hover{background:#fff;color:var(--ink)}
.menu-open .nav{color:#fff}

@media (max-width:1100px){
  .tiles--four,.blocks--five{grid-template-columns:repeat(3,minmax(0,1fr))}
  .blocks--four{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mega__panelin{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr)}
  .mega__cards{grid-column:1 / -1;grid-template-columns:repeat(3,minmax(0,1fr))}
  .mcard{aspect-ratio:16/10}
  .job{grid-template-columns:1fr;align-items:start}
  .values__listwrap{width:auto;right:var(--gut)}
  .values__desc{top:auto;bottom:12vh;transform:none;left:var(--gut);right:auto;width:min(420px,80vw)}
}
@media (max-width:900px){
  .mega__inner{overflow-y:auto;overscroll-behavior:contain;padding-bottom:calc(var(--gut) + 10px)}
  .mega__list{flex-direction:column;flex-wrap:nowrap;gap:0;border:0;padding:0}
  .mega__item{border-bottom:1px solid rgba(255,255,255,.12)}
  .mega__tab{display:flex;justify-content:space-between;width:100%;padding:14px 0;font-size:34px}
  .mega__tab::after{display:none}
  .mega__chev{display:block;position:relative;width:34px;height:34px;border-radius:50%;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.3);transition:transform .6s var(--ease),background .3s}
  .mega__chev::before,.mega__chev::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.5px;background:#fff;transform:translate(-50%,-50%)}
  .mega__chev::after{transform:translate(-50%,-50%) rotate(90deg);transition:transform .5s var(--ease)}
  .mega__item.on .mega__chev{background:var(--mc);box-shadow:none}
  .mega__item.on .mega__chev::after{transform:translate(-50%,-50%) rotate(0)}
  .mega__panel{position:static;display:grid;grid-template-rows:0fr;visibility:visible;opacity:1;transform:none;transition:grid-template-rows .6s var(--ease)}
  .mega__item.on .mega__panel{grid-template-rows:1fr;transition:grid-template-rows .6s var(--ease)}
  .mega__panelin{display:flex;flex-direction:column;gap:20px;overflow:hidden}
  .mega__item.on .mega__panelin{padding-bottom:22px}
  .mega__title{display:none}
  .mega__blurb{margin-top:0}
  .mega__view{margin-top:16px}
  .mega__links--3,.mega__links--2{columns:2}
  .mega__links a::before{display:none}
  .mega__cards{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(var(--gut) * -1);padding:0 var(--gut)}
  .mcard{flex:0 0 62vw;aspect-ratio:4/3;scroll-snap-align:start;max-height:none}
  .mega__foot{margin-top:28px;flex-direction:column;align-items:flex-start}
}

@media (max-width:767px){
  .halo{font-size:min(19vw,calc(var(--hvw,15.2) * 1.12vw))}
  .hero__title{max-width:none}
  .tiles,.tiles--four,.blocks,.blocks--four,.blocks--five{grid-template-columns:1fr}
  .tiles--four{grid-template-columns:1fr 1fr}
  .tiles--four .tile{min-height:260px}
  .tiles--four .tile__title{font-size:19px}
  .tile{min-height:300px}
  .block{min-height:0}
  .band{padding:90px var(--gut)}
  .next{grid-template-columns:1fr;min-height:0}
  .next__img{width:100%;order:3}
  .next__title{font-size:clamp(48px,14vw,80px)}
  .ccard__name{font-size:30px}
  .values__list li{font-size:clamp(28px,8vw,40px)}
  .values__listwrap{top:-12vh}
  .values__desc{bottom:10vh;width:auto;right:var(--gut)}
  .dcard__letter{font-size:200px}
}
@media (prefers-reduced-motion:reduce){
  .mcard__media img,.mcard__art{animation:none}
}
.chips li.cb{background:var(--cb);color:var(--cf);font-family:var(--font-display);font-size:13.5px;font-weight:600;letter-spacing:-.005em;text-transform:none;padding:9px 14px 8px}
.process--wide .art{inset:22%}
.process[data-dial-kind="fleet"] .art,.process[data-dial-kind="interiors"] .art{inset:14%}
.mega__bg i{transition-duration:.6s}
.menu-open .mega__inner{transition:opacity .35s ease .5s}
.mega__panelin{grid-template-columns:minmax(0,3fr) minmax(0,4.6fr) minmax(0,5.4fr)}
.mega__cards--3 .mcard{aspect-ratio:3/5}
.mega__cards--2 .mcard{aspect-ratio:4/5}
.mega__links a{font-size:clamp(14px,1vw,17px)}
@media (max-width:1100px){.mega__panelin{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr)}.mega__cards--3 .mcard,.mega__cards--2 .mcard{aspect-ratio:16/10}}
@media (max-width:900px){.mega__cards--3 .mcard,.mega__cards--2 .mcard{aspect-ratio:4/3}}
.next__top{justify-content:flex-end}
.slide__sum{max-width:44ch;margin-top:20px;font-size:clamp(17px,1.25vw,21px);line-height:1.45;color:var(--muted)}
.work--photos .slide .xl{font-size:clamp(34px,3.4vw,66px);line-height:.98;letter-spacing:-.045em}
@media (max-width:767px){
  [data-grow]{transform:none!important}
  .halo{font-size:min(19vw,calc(var(--hvw,15.2) * 1.05vw))}
}
@media (max-width:767px){.range__big{font-size:clamp(40px,11.5vw,56px)}}

/* ==========================================================================
   12. SECTION SCHEMES, SIDE TICKER, LOGO TICKER, JOG WHEEL, FOOTER
   ========================================================================== */
/* Schemes: plain white, plain black, colour on white, colour on black,
   white on colour, black on colour, colour on colour (set in build.py) */
.sc{background:var(--bg);color:var(--fg);--muted:color-mix(in srgb,var(--fg) 64%,var(--bg));--line:color-mix(in srgb,var(--fg) 16%,transparent)}
.sc [data-reveal] .c{color:color-mix(in srgb,var(--fg) 20%,var(--bg))}
.sc [data-reveal] .c.on{color:var(--hl)}
.sc--pinkbg .dot,.sc--pinkbg .c.dot{color:var(--fg)!important}
.sc .btn,.sc .btn--light{background:var(--hl);color:var(--bg)}
.sc .btn__arrow,.sc .btn--light .btn__arrow{background:var(--bg);color:var(--hl)}
.sc .btn--ghost{color:var(--fg)!important}
.sc .btn--ghost .btn__arrow{background:var(--fg);color:var(--bg)}
.sc .cb .btn{background:var(--cf);color:var(--cb)}
.sc .cb .btn__arrow{background:var(--cb);color:var(--cf)}
.sc .range__big{color:color-mix(in srgb,var(--hl) calc(var(--p,0) * 100%),color-mix(in srgb,var(--fg) 18%,var(--bg)))}
.sc .scard__title{color:var(--fg)}
.sc .sgrid:hover .scard:not(:hover) .scard__title{color:color-mix(in srgb,var(--fg) 30%,var(--bg))}
.sc .faq__q:hover span{color:var(--hl)}
.sc .faq__a p{color:var(--muted)}
.sc .toggle{color:var(--fg)}
.sc .standards__lead{color:var(--muted)}
.sc .form label > span,.sc .form__set legend{color:var(--fg)}
.stiles li{color:#fff}
.stiles p{color:rgba(255,255,255,.62)!important}
.band.sc .band__text{color:color-mix(in srgb,var(--hl) calc(28% + var(--p,0) * 72%),var(--bg))}
.band.sc .band__sub{color:var(--fg);opacity:.8}
.cta.sc .cta__title{color:var(--hl)}
.cta.sc .cta__lead{color:var(--fg);opacity:.8}
.next.sc .next__title{color:var(--hl)}
.next.sc .next__arrow{background:var(--hl);color:var(--bg)}
.next.sc .next__img--art{color:var(--fg);box-shadow:inset 0 0 0 1.5px var(--line)}
.sc.process{background:var(--bg);--cb:var(--bg)}
.sc .process__list li{color:color-mix(in srgb,var(--fg) 16%,var(--bg))}
.sc .process__list li.on{color:var(--hl)}
.sc .ring line{stroke:var(--fg)}
.sc .ring .major{stroke:var(--accent)}
.sc .art svg{color:var(--fg)}
.sc .process__bar{background:var(--line)}
.sc.clients,.sc.clients .clients__pin{background:var(--bg)}
.sc .rule{background-image:repeating-linear-gradient(to bottom,var(--fg) 0 1px,transparent 1px 9px)}
.sc .rule i{background:var(--fg)}
.sc.story{background:var(--bg)}

/* The side ticker: always on, constant speed, the page makes room for it */
:root{--tk:clamp(38px,4.2vw,72px)}
body{padding-right:var(--tk)}
.vtick{position:fixed;top:0;right:0;bottom:0;width:var(--tk);z-index:185;background:var(--ink);color:#fff;overflow:hidden;pointer-events:none}
.vtick__track{--g:calc(var(--tk) * .7);position:absolute;top:0;left:50%;display:flex;align-items:center;gap:var(--g);padding-inline-end:var(--g);writing-mode:vertical-rl;white-space:nowrap;font-family:var(--font-display);font-weight:700;font-size:calc(var(--tk) * .5);line-height:1;letter-spacing:-.035em;transform:translate3d(-50%,0,0);animation:vtick 46s linear infinite;will-change:transform}
.vtick__track span{display:inline-flex;align-items:center;gap:calc(var(--tk) * .3)}
.vtick__track i{flex:0 0 auto;width:.3em;height:.3em;border-radius:50%}
@keyframes vtick{from{transform:translate3d(-50%,0,0)}to{transform:translate3d(-50%,-50%,0)}}
.nav{right:var(--tk)}
.mega,.lightbox{right:var(--tk)}
.mega__bg{right:0}
.t-any .vtick{opacity:1}

/* Client logos: full colour on white, constant speed, coloured dots between */
.logos{position:relative;z-index:2;overflow:hidden;background:#fff;padding:clamp(20px,2vw,30px) 0}
.logos__track{--g:clamp(30px,3vw,56px);display:flex;align-items:center;gap:var(--g);width:max-content;padding-right:var(--g);animation:logos 80s linear infinite;will-change:transform}
.logos:hover .logos__track{animation-play-state:paused}
.logos__item{flex:0 0 auto;display:flex;align-items:center}
.logos__item img{display:block;height:clamp(34px,3.1vw,54px);width:auto;max-width:none}
.logos__dot{flex:0 0 auto;width:12px;height:12px;border-radius:50%}
@keyframes logos{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

/* Jog wheel */
.jog{height:calc(100vh + var(--n,3) * 62vh)}
.jog .clients__pin{perspective:1400px}
.wheel--big li{font-size:clamp(64px,12vw,220px);font-weight:800;letter-spacing:-.06em;color:var(--wc);line-height:1}
.wheel--big a{display:inline-block;transition:transform .6s var(--ease)}
.wheel--big a:hover{transform:scale(1.04)}
.wheel--big a::after{content:".";color:var(--pink)}

/* Footer: sits underneath the page and is revealed as the last section scrolls away */
main{position:relative;z-index:2}
.footer{position:sticky;bottom:0;z-index:1;padding:0;overflow:hidden;background:var(--paper)}
.footer__media{position:absolute;inset:0;z-index:0;pointer-events:none}
.footer__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.22;filter:saturate(.85)}
.footer__media::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,var(--paper) 0%,color-mix(in srgb,var(--paper) 50%,transparent) 32%,color-mix(in srgb,var(--paper) 38%,transparent) 62%,var(--paper) 100%)}
.footer__inner{position:relative;z-index:1;display:flex;flex-direction:column;gap:clamp(34px,4vw,64px);padding:clamp(44px,5vw,84px) var(--gut) 18px}
.footer__hero{display:flex;justify-content:space-between;align-items:flex-end;gap:30px 40px}
.footer__tagline{display:block;width:min(64vw,900px,calc((100vh - 400px) * 3.33));height:auto}
.footer__cta{display:flex;flex-direction:column;align-items:flex-start;gap:20px;max-width:300px}
.footer__strap{font-family:var(--font-display);font-weight:700;font-size:clamp(20px,1.6vw,28px);line-height:1.1;letter-spacing:-.03em;max-width:none}
.footer__grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.7fr) minmax(0,1fr);gap:24px var(--gap);padding-top:clamp(22px,2vw,30px);border-top:1px solid var(--line)}
.footer__logo img{display:block;height:32px;width:auto}
.footer__brand address{margin-top:14px;max-width:30ch;font-style:normal;font-size:14px;line-height:1.45;color:var(--muted)}
.footer__nav{display:flex;flex-wrap:wrap;gap:14px clamp(30px,4vw,80px)}
.footer__nav ul{display:grid;grid-template-columns:repeat(2,auto);gap:8px 30px;align-content:start}
.footer__nav a,.footer__contact > a{font-family:var(--font-display);font-weight:600;font-size:17px;letter-spacing:-.015em;transition:color .25s}
.footer__nav a:hover,.footer__contact > a:hover{color:var(--pink)}
.footer__contact{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.footer__contact .socials{margin-top:8px}
.footer__bottom{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 24px;padding-top:16px;border-top:1px solid var(--line);font-size:13px;color:var(--muted)}
.footer__legal{display:flex;flex-wrap:wrap;gap:6px 18px}
.footer__legal a:hover{color:var(--ink)}
.footer__dd{display:inline-flex;align-items:center;gap:10px;color:var(--muted)}
.footer__dd img{display:block;height:18px;width:auto}
.footer__rule,.footer__top{display:none}
@media (max-width:1100px){
  .footer__grid{grid-template-columns:1fr 1fr}
  .footer__contact{align-items:flex-start}
}
@media (max-width:900px),(max-height:700px){
  .footer{position:relative}
}
@media (max-width:767px){
  :root{--tk:36px}
  .footer__hero{flex-direction:column;align-items:flex-start}
  .footer__tagline{width:100%}
  .footer__grid{grid-template-columns:1fr}
  .footer__nav ul{grid-template-columns:1fr 1fr}
  .logos__item img{height:32px}
  .wheel--big li{font-size:clamp(48px,15vw,80px)}
}
.footer__brand{grid-column:auto;display:block}
.next{grid-template-rows:1fr;padding-top:clamp(60px,8vw,120px)}
.next__title{display:inline-flex;align-items:flex-end;gap:.18em;max-width:none}
.next__arrow{flex:0 0 auto;width:clamp(44px,4vw,70px);height:clamp(44px,4vw,70px);margin-bottom:.12em}
.next__arrow svg{width:40%;height:40%}
.logos__cell{flex:0 0 auto;display:flex;align-items:center;gap:var(--g)}
@media (max-width:767px){.next__title{flex-wrap:wrap}}
.sc--dark .story__title{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .35 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E"),linear-gradient(180deg,#FFFFFF 0%,var(--hl) 45%,#D8D4CF 70%,#FFFFFF 100%);background-size:220px 220px,100% 100%;background-position:0 var(--ty,0px),0 0;-webkit-background-clip:text;background-clip:text}

/* ==========================================================================
   13. TWIN TICKERS, LOGO LENS, CASE VIDEOS, EXPANDING BLOCKS, NEXT, FOOTER
   ========================================================================== */
/* Both tickers are the same thickness; the page sits between them */
:root{--tk:clamp(38px,4.2vw,72px)}
body{padding-left:var(--tk);padding-right:var(--tk)}
.nav{left:var(--tk);right:var(--tk)}
.mega,.lightbox{left:var(--tk);right:var(--tk)}

/* Right ticker: every dot and word separated by exactly the same gap */
.vtick__track{gap:var(--g);padding:0;padding-bottom:var(--g);animation-name:tickup;animation-duration:var(--dur,46s)}
.vtick__track .vtick__word{display:block}
.tdot{flex:0 0 auto;display:block;width:calc(var(--tk) * .15);height:calc(var(--tk) * .15);border-radius:50%}
@keyframes tickup{from{transform:translate3d(-50%,0,0)}to{transform:translate3d(-50%,-50%,0)}}

/* Left ticker: client logos in white on black, same speed */
.ltick{position:fixed;top:0;left:0;bottom:0;width:var(--tk);z-index:185;background:var(--ink);overflow:hidden}
.ltick__track{--g:calc(var(--tk) * .7);--lh:calc(var(--tk) * .44);position:absolute;top:0;left:0;right:0;display:flex;flex-direction:column;align-items:center;gap:var(--g);padding-bottom:var(--g);animation:ltick var(--dur,60s) linear infinite;will-change:transform}
.ltick__track.is-paused{animation-play-state:paused}
@keyframes ltick{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,-50%,0)}}
.ltick__item{--len:min(calc(var(--lh) * var(--ar)), calc(var(--tk) * 2.6));position:relative;flex:0 0 auto;display:block;width:var(--tk);height:var(--len);cursor:pointer}
.ltick__item img{position:absolute;left:50%;top:50%;width:var(--len);height:calc(var(--len) / var(--ar));max-width:none;object-fit:contain;transform:translate(-50%,-50%) rotate(90deg);transition:opacity .2s}
.ltick__item--filter img{filter:brightness(0) invert(1)}
.ltick__item.is-lifted img{opacity:0}
.llens{position:fixed;z-index:186;background:var(--ink);overflow:hidden;pointer-events:auto;border-radius:0;
  transition:width .8s cubic-bezier(.34,1.42,.52,1),height .8s cubic-bezier(.34,1.42,.52,1),top .8s cubic-bezier(.34,1.42,.52,1),border-radius .6s var(--ease)}
.llens.on{border-radius:0 28px 28px 0}
.llens img{position:absolute;left:50%;top:50%;max-width:none;transform:translate(-50%,-50%) rotate(90deg) scale(1);transition:transform .8s cubic-bezier(.34,1.3,.52,1)}
.llens.on img{transform:translate(-50%,-50%) rotate(0deg) scale(2)}
.llens--filter img{filter:brightness(0) invert(1)}
.logos{display:none}

/* Home: disciplines intro, more air */
.disc-intro .range__big{margin-top:0}
.disc-intro__lead{max-width:40ch;margin:clamp(30px,3vw,52px) auto 0;text-align:center;font-size:clamp(18px,1.35vw,24px);line-height:1.5;color:var(--muted)}

/* Case study cards with looping video */
.ccards{gap:var(--gap)}
.ccards--three{grid-template-columns:repeat(3,minmax(0,1fr))}
.ccard__img{position:relative;aspect-ratio:4/3}
.ccard__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .8s ease,transform 1.4s var(--ease)}
.ccard__video.playing{opacity:1}
.ccard:hover .ccard__video{transform:scale(1.04)}
.ccard--cta{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:24px;padding:clamp(24px,2.2vw,38px);border-radius:var(--r);min-height:100%;transition:transform .8s var(--ease)}
.ccard--cta:hover{transform:translateY(-6px)}
.ccard--cta .ccard__name{font-size:clamp(34px,3.4vw,64px);padding-right:0}
.ccard--cta .ccard__sum{font-size:17px}
.ccard__more{display:flex;align-items:center;justify-content:space-between;font-family:var(--font-display);font-weight:600;font-size:18px}
.ccard__more .ccard__go{position:static}
.ccards--three .ccard__name{font-size:clamp(26px,2.1vw,40px)}

/* Expanding colour blocks: hover one and it widens, the others give way */
.blocks + .blocks{margin-top:var(--gap)}
.block{outline:0}
.block__title,.block__body{transition:font-size .7s var(--ease),opacity .5s}
@media (hover:hover) and (min-width:1200px){
  .blocks{display:flex;height:clamp(250px,20vw,330px)}
  .blocks--three{height:clamp(220px,17vw,290px)}
  .block{flex:1 1 0;min-width:0;min-height:0;overflow:hidden;transition:flex-grow .8s cubic-bezier(.34,1.25,.5,1),transform .8s var(--ease)}
  .blocks:hover .block,.blocks:focus-within .block{flex-grow:.72}
  .blocks .block:hover,.blocks .block:focus-visible{flex-grow:2.3}
  .blocks:hover .block .block__title{font-size:clamp(15px,1.05vw,19px)}
  .blocks:hover .block .block__body{font-size:13px;opacity:.7}
  .blocks .block:hover .block__title,.blocks .block:focus-visible .block__title{font-size:clamp(26px,2.3vw,44px)}
  .blocks .block:hover .block__body,.blocks .block:focus-visible .block__body{font-size:clamp(16px,1.2vw,20px);opacity:.95}
}

.scard__photo{display:none}
.scard:hover .scard__art{transform:none}
.media--anim > svg{width:58%;max-height:62%}

/* Next page: half height, the same on every page, title only */
.next{display:flex;align-items:center;height:clamp(200px,30vh,330px);min-height:0;padding:0 var(--gut)}
.next__title{display:block;max-width:none;font-size:clamp(46px,6.4vw,124px);line-height:.92;letter-spacing:-.05em;transition:transform .9s var(--ease)}
.next__title--long{font-size:clamp(34px,4vw,76px);line-height:.98;max-width:22ch}
.next:hover .next__title{transform:translateX(1.6vw)}

/* Footer: tagline the same height as the strap and button beside it */
.footer__hero{--fs:clamp(19px,1.45vw,26px);justify-content:space-between;align-items:flex-end}
.footer__strap{font-size:var(--fs);line-height:1.1;margin:0}
.footer__cta{gap:20px;max-width:none}
.footer__cta .btn{--h:44px}
.footer__tagline{width:auto;height:calc(2.2 * var(--fs) + 64px);max-width:100%}
.footer__dd span{display:none}

@media (max-width:1100px){
  .ccards--three{grid-template-columns:1fr 1fr}
  .ccards--three .ccard--cta{grid-column:1 / -1;min-height:260px}
}
@media (max-width:767px){
  :root{--tk:30px}
  .ccards--three{grid-template-columns:1fr}
  .footer__tagline{height:auto;width:min(100%,360px)}
  .next{height:200px}
}
.ltick__cell{display:flex;flex-direction:column;align-items:center;gap:var(--g);flex:0 0 auto}
.next__title{align-self:center}

/* ==========================================================================
   14. LOGO TICKER (downward, facing the other way), LENS SHOULDERS
   ========================================================================== */
.ltick__shift{position:absolute;inset:0;transition:transform .8s cubic-bezier(.34,1.3,.52,1)}
.ltick__track{animation-name:ltickdown}
@keyframes ltickdown{from{transform:translate3d(0,-50%,0)}to{transform:translate3d(0,0,0)}}
.ltick__item{transition:margin .8s cubic-bezier(.34,1.3,.52,1)}
.ltick__item img{transform:translate(-50%,-50%) rotate(-90deg)}
.llens{--R:26px;overflow:visible;border-radius:0}
.llens.on{border-radius:0 var(--R) var(--R) 0}
.llens::before,.llens::after{content:"";position:absolute;left:var(--tk);width:var(--R);height:var(--R);transform:scale(0);transition:transform .7s cubic-bezier(.34,1.3,.52,1)}
.llens::before{top:calc(var(--R) * -1);transform-origin:0 100%;background:radial-gradient(circle at 100% 0,transparent calc(var(--R) - .5px),var(--ink) var(--R))}
.llens::after{bottom:calc(var(--R) * -1);transform-origin:0 0;background:radial-gradient(circle at 100% 100%,transparent calc(var(--R) - .5px),var(--ink) var(--R))}
.llens.on::before,.llens.on::after{transform:scale(1)}
.llens img{transform:translate(-50%,-50%) rotate(-90deg) scale(var(--s0,.5))}
.llens.on img{transform:translate(-50%,-50%) rotate(0deg) scale(1)}
.llens--filter img,.ltick__item--filter img{filter:brightness(0) invert(1)}

/* About: the story cut out of a black overlay, the film fixed underneath */
.cutout{position:relative;z-index:2;isolation:isolate;background:#000;color:#fff}
.cutout__video{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;z-index:0}
.cutout__video video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cutout__mask{position:relative;z-index:1;margin-top:-100vh;margin-top:-100svh;background:#000;color:#fff;mix-blend-mode:multiply}
.cutout__title{height:100vh;height:100svh;display:grid;place-items:center;text-align:center;padding:0 var(--gut)}
.cutout__title h2{font-family:var(--font-display);font-weight:800;font-size:clamp(64px,11.5vw,230px);line-height:.86;letter-spacing:-.055em}
.cutout__count{height:240vh}
.cutout__pin{position:sticky;top:0;height:100vh;height:100svh;display:grid;place-items:center;overflow:hidden}
.cutout__year{font-family:var(--font-display);font-weight:800;font-size:clamp(120px,30vw,560px);line-height:.8;letter-spacing:-.06em;font-variant-numeric:tabular-nums}
.cutout__caps{position:absolute;inset:0;z-index:2;pointer-events:none}
.cutout__spacer{height:100vh;height:100svh}
.cutout__capsrun{height:240vh}
.cutout__cappin{position:sticky;top:0;height:100vh;height:100svh}
.cutout__cap{position:absolute;left:50%;bottom:clamp(30px,8vh,90px);width:min(520px,80%);transform:translate(-50%,12px);text-align:center;color:#fff;font-size:clamp(15px,1.1vw,19px);line-height:1.45;opacity:0;transition:opacity .6s ease,transform .8s var(--ease)}
.cutout__cap.on{opacity:1;transform:translate(-50%,0)}
.cutout .dot,.cutout__title .c.dot{color:#fff!important}

/* About: the outline ring, a new colour for every figure */
.ringdial--v2{--rbg:#0B0B0D;--rfg:#fff;background:var(--rbg);color:var(--rfg);transition:background-color .8s ease,color .8s ease}
.ringdial--v2 .ringdial__pin{background:transparent}
.ringdial--v2 .ringdial__ring line{stroke:color-mix(in srgb,var(--rfg) 22%,transparent);transition:stroke .35s ease}
.ringdial--v2 .ringdial__ring line.on{stroke:var(--rfg)}
.ringdial__items{position:absolute;inset:0}
.ringdial__item{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;opacity:0;transform:translateY(16%);transition:opacity .55s ease,transform .9s var(--ease)}
.ringdial__item.past{transform:translateY(-16%)}
.ringdial__item.on{opacity:1;transform:none}
.ringdial--v2 .ringdial__num{height:auto;overflow:visible;font-family:var(--font-display);font-weight:800;font-size:clamp(70px,9vw,170px);line-height:.9;letter-spacing:-.05em}
.ringdial--v2 .ringdial__label{margin:0;font-family:var(--font-display);font-weight:600;font-size:clamp(18px,1.5vw,28px);letter-spacing:-.02em}

/* ==========================================================================
   15. LOOPING LINE DRAWINGS, MEGA PREVIEW, PANEL BACKDROP
   ========================================================================== */
/* Every service drawing redraws itself on a loop while it is on screen */
.anim-loop svg [pathLength]{stroke-dasharray:1 1;animation:loopdraw 4.2s cubic-bezier(.65,0,.35,1) infinite}
.anim-loop svg [pathLength]:nth-child(3n+2),.anim-loop svg > :nth-child(3n+2) [pathLength]{animation-delay:.12s}
.anim-loop svg [pathLength]:nth-child(3n),.anim-loop svg > :nth-child(3n) [pathLength]{animation-delay:.24s}
@keyframes loopdraw{0%{stroke-dashoffset:1}36%{stroke-dashoffset:0}80%{stroke-dashoffset:0}100%{stroke-dashoffset:-1}}
.anim-loop .glow{animation:glowloop 4.2s steps(1) infinite}
@keyframes glowloop{0%,30%{opacity:0}33%{opacity:.9}36%{opacity:.1}40%{opacity:1}43%{opacity:.3}48%,82%{opacity:1}86%,100%{opacity:0}}
.anim-loop[data-disc="fleet"] > svg,.anim-loop[data-disc="fleet"] svg:only-child{animation:driveloop 4.2s cubic-bezier(.45,0,.25,1) infinite}
@keyframes driveloop{0%{transform:translateX(-22%);opacity:0}18%{opacity:1}34%{transform:none}80%{transform:none;opacity:1}100%{transform:translateX(22%);opacity:0}}
.anim-loop[data-disc="interiors"] > svg{animation:riseloop 4.2s cubic-bezier(.45,0,.25,1) infinite}
@keyframes riseloop{0%{transform:translateY(6%);opacity:.3}30%,82%{transform:none;opacity:1}100%{transform:translateY(-4%);opacity:.3}}
.anim-loop svg .fill-accent{animation:fillloop 4.2s ease infinite}
@keyframes fillloop{0%,30%{opacity:0}45%,82%{opacity:1}96%,100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.anim-loop svg [pathLength],.anim-loop > svg,.anim-loop .glow{animation:none!important;stroke-dasharray:none}}

/* Mega menu: no boxes round the titles, no view button, a looping preview stage */
.mega__tab:focus{outline:none}
.mega__tab:focus-visible{outline:2px solid #fff;outline-offset:6px;border-radius:4px}
.mega__view{display:none}
.mega__panelin{grid-template-columns:minmax(0,2.6fr) minmax(0,4.6fr) minmax(0,4.4fr)}
.mega__links a{display:inline-block}
.mega__links a.on{color:#fff}
.mega__links a.on::before{opacity:1;transform:none}
.mega__stage{position:relative;aspect-ratio:5/4;max-height:calc(100vh - var(--nav-h) - 240px);border-radius:14px;overflow:hidden;display:grid;place-items:center;transition:background-color .5s ease,color .5s ease}
.mega__art{position:absolute;inset:12% 14% 22%;display:grid;place-items:center}
.mega__art > svg{width:100%;height:100%;overflow:visible}
.mega__art[data-disc="icon"]{inset:22% 30% 30%}
.mega__art.is-photo{inset:0}
.mega__art.is-photo img{width:100%;height:100%;object-fit:cover;animation:kenburns 14s ease-in-out infinite alternate}
.mega__cap{position:absolute;left:20px;right:20px;bottom:18px;font-family:var(--font-display);font-weight:600;font-size:clamp(16px,1.2vw,21px);letter-spacing:-.015em;color:inherit}
.mega__art.is-photo + .mega__cap{color:#fff;text-shadow:0 1px 12px rgba(0,0,0,.5)}
.mega__item.on .mega__stage{animation:stagein .7s var(--ease) both}
@keyframes stagein{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}}
.mega__cards{display:none}
@media (max-width:1100px){.mega__panelin{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr)}.mega__stage{grid-column:1 / -1;aspect-ratio:16/7}}
@media (max-width:900px){.mega__stage{display:none}}

/* Service pop-up: equal space all round, the page fades to black behind it */
.spanel-bd{position:fixed;inset:0;z-index:188;background:#000;opacity:0;visibility:hidden;transition:opacity .5s ease,visibility 0s linear .5s}
.spanel-bd.on{opacity:.96;visibility:visible;transition:opacity .5s ease}
.spanel{z-index:189}
.spanel-open .nav > *{pointer-events:none}
.spanel__close{top:auto;bottom:clamp(16px,1.6vw,28px);right:clamp(16px,1.6vw,28px);height:40px;padding:0 6px 0 16px;font-size:15px}
.spanel__close b{width:28px;height:28px}
.spanel__art .glow{opacity:1}

/* ==========================================================================
   16. HERO FILM, ACCREDITATION BADGES, MENU, LENS EDGES, UNIFORM SPACING
   ========================================================================== */
/* Hero film sits behind the glowing letters */
.hero__video{opacity:0;transition:opacity 1.6s ease;filter:saturate(.9)}
.has-video .hero__video{opacity:.62}
.hero__veil{position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(7,8,10,.55) 0%,rgba(7,8,10,.2) 34%,rgba(7,8,10,.35) 62%,rgba(7,8,10,.86) 100%),
  radial-gradient(90% 70% at 50% 40%,transparent 30%,rgba(7,8,10,.5) 100%)}
.has-video .halo__face{color:rgba(11,12,13,.88)}

/* Home hero: ISO and CHAS marks, all the same size */
.hero__badges{display:flex;gap:10px;align-items:stretch}
.hbadge{display:grid;place-items:center;width:clamp(78px,6.6vw,112px);aspect-ratio:1/1;padding:12%;background:#fff;border-radius:12px;opacity:0;transform:translateY(24px);transition:opacity 1s var(--ease),transform 1.2s var(--ease)}
.hbadge img{width:100%;height:100%;object-fit:contain}
.hero-in .hbadge{opacity:1;transform:none;transition-delay:calc(.45s + var(--i,0) * 90ms)}
@media (max-width:767px){.hero__badges{left:var(--gut);right:var(--gut);justify-content:flex-start}.hbadge{width:calc((100% - 30px) / 4);max-width:84px}}

/* Menu: no repeated title in the panel */
.mega__title{display:none}
.mega__blurb{margin-top:0}

/* Logo lens keeps its rounded edge all the way back into the ticker */
.llens{border-radius:0 var(--R) var(--R) 0;transition:width .8s cubic-bezier(.34,1.42,.52,1),height .8s cubic-bezier(.34,1.42,.52,1),top .8s cubic-bezier(.34,1.42,.52,1),border-radius .6s var(--ease),opacity .35s ease}
.llens.closing{--R:18px;opacity:0;transition:width .8s cubic-bezier(.34,1.2,.52,1),height .8s cubic-bezier(.34,1.2,.52,1),top .8s cubic-bezier(.34,1.2,.52,1),border-radius .6s var(--ease),opacity .3s ease .5s}

/* One rhythm for every page: the same space above and below each section,
   and the same gap between a section's statement and its content */
:root{--sp:clamp(84px,8.5vw,150px);--sp-in:clamp(48px,4.6vw,84px)}
.sec,.band,.cta,.quote,.standards,.steps-intro{padding-top:var(--sp);padding-bottom:var(--sp)}
.steps-intro{padding-bottom:calc(var(--sp) * .4)}
.tiles,.blocks,.faq,.ccards,.dcards,.sgrid,.svlist,.stiles,.gallery,.cwall,.jobs,.contact-grid,.chips--big,.rows,.env__media,.work__head{margin-top:var(--sp-in)}
.blocks + .blocks{margin-top:var(--gap)}
.row-start,.env__cta{margin-top:var(--sp-in)}
.disc-intro__lead,.positions__lead,.standards__lead,.quote__lead{margin-top:calc(var(--sp-in) * .5)}
.range__big{margin-top:0}
.positions__big{margin-top:0}
.env__text{margin-top:calc(var(--sp-in) * .6)}
.band__sub{margin-top:calc(var(--sp-in) * .5)}
.cta__row{margin-top:calc(var(--sp-in) * .6)}
.legal-note{padding:0 var(--gut)}
.hbadge{display:flex;align-items:center;justify-content:center}
.hbadge img{width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain;display:block;flex:1 1 auto;min-width:0}

/* ==========================================================================
   17. NO HALO LETTERS, LOGO STATES, BADGE TILES, LENS CLIP
   ========================================================================== */
.halo{display:none}
.has-video .hero__video{opacity:.78}
.hero__veil{background:linear-gradient(180deg,rgba(7,8,10,.5) 0%,rgba(7,8,10,.12) 30%,rgba(7,8,10,.3) 60%,rgba(7,8,10,.88) 100%)}

/* Remote client logos: hidden until they have been turned white, or shown in
   full colour on a white pill if the image cannot be processed */
.ltick__item--remote img{opacity:0;transition:opacity .4s ease}
.ltick__item--remote.is-white img,.ltick__item--remote.is-pill img{opacity:1}
.ltick__item.is-lifted img{opacity:0!important}
.ltick__item.is-pill img{background:#fff;padding:4px 7px;border-radius:6px;box-sizing:border-box}
.llens--pill img{background:#fff;padding:12px 18px;border-radius:12px;box-sizing:border-box}

/* The lens clips its logo, so nothing ever shows outside the black */
.llens__in{position:absolute;inset:0;overflow:hidden;border-radius:inherit}
.llens img{transition:transform .7s cubic-bezier(.34,1.25,.52,1) .1s}
.llens.closing{transition:width .55s cubic-bezier(.5,0,.2,1) .32s,height .55s cubic-bezier(.5,0,.2,1) .32s,top .55s cubic-bezier(.5,0,.2,1) .32s,border-radius .4s ease .32s,opacity .25s ease .78s}
.llens.closing img{transition:transform .42s cubic-bezier(.45,0,.2,1) 0s}
.llens.closing::before,.llens.closing::after{transition:transform .35s ease .3s}

/* Home hero accreditation tiles: white marks on dark glass, all the same size */
.hbadge{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.2);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.hbadge img[data-whiten]{opacity:0;transition:opacity .4s ease}
.hbadge.is-white img,.hbadge.is-pill img{opacity:1}
.hbadge.is-pill{background:#fff}

/* ==========================================================================
   18. HORIZONTAL CLIENT TICKER, CONTACT SECTION
   The side tickers are gone: the page, nav and menu run edge to edge. The
   client logos run in one horizontal line above the footer, white on black,
   with a pink dot between each. Every page ends with a contact section whose
   blocks widen on hover.
   ========================================================================== */
.vtick,.ltick,.llens{display:none!important}

.htick{--lh:clamp(26px,2.3vw,38px);--g:clamp(40px,4vw,72px);position:relative;z-index:2;overflow:hidden;background:var(--ink);padding:clamp(26px,2.6vw,44px) 0}
.htick__track{display:flex;align-items:center;width:max-content;animation:htick var(--dur,70s) linear infinite;will-change:transform}
.htick:hover .htick__track{animation-play-state:paused}
@keyframes htick{to{transform:translate3d(-50%,0,0)}}
.htick__cell{display:flex;align-items:center;gap:var(--g);padding-right:var(--g)}
.htick__dot{flex:0 0 auto;width:9px;height:9px;border-radius:50%;background:var(--pink)}
.htick__item{display:block;flex:0 0 auto;height:var(--lh);width:min(calc(var(--lh) * var(--ar)),calc(var(--lh) * 5.2))}
.htick__item img{display:block;width:100%;height:100%;object-fit:contain;transition:transform .5s var(--ease)}
.htick__item:hover img{transform:scale(1.12)}
.htick__item.is-pill img{background:#fff;padding:4px 8px;border-radius:6px;box-sizing:border-box}
@media (prefers-reduced-motion:reduce){.htick__track{animation:none}}

.cta--contact{text-align:left}
.cta--contact .cta__title{margin:0;max-width:none}
.cta--contact .cta__lead{margin:18px 0 0;max-width:56ch}
.contact-blocks{margin-top:var(--sp-in)}
.contact-blocks .block{text-decoration:none;color:var(--cf)}
.contact-blocks .block__body{overflow-wrap:anywhere}
.block__socials{display:flex;gap:8px;margin-top:auto}
.block__socials a{display:grid;place-items:center;width:34px;height:34px;border-radius:6px;background:var(--cf);color:var(--cb);transition:transform .4s var(--ease)}
.block__socials a:hover{transform:translateY(-2px)}
.block__socials svg{width:15px;height:15px}
.contact-blocks .block > div,.contact-blocks .block{gap:14px}
@media (max-width:1100px){.contact-blocks{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.contact-blocks{grid-template-columns:1fr}}

/* Signage delivery stages: full paragraphs, so taller boxes. While one box is
   open the others show their title only, and the open one shows the paragraph
   at a comfortable size. */
.blocks--stages .block__body{font-size:15px;line-height:1.5}
@media (hover:hover) and (min-width:1200px){
  .blocks.blocks--stages{height:max(clamp(440px,32vw,520px),calc(1020px - 40vw))}
  .blocks--stages:hover .block .block__body{opacity:0}
  .blocks--stages .block:hover .block__body,.blocks--stages .block:focus-visible .block__body{opacity:.95;font-size:clamp(16px,1.2vw,19px);max-width:42ch}
  .blocks--stages .block__body{transition:opacity .4s ease .1s,font-size .7s var(--ease)}
}

/* The full stop at the end of every title is a round pink dot, drawn rather
   than typed, so it is a circle whatever the typeface */
.dot,.c.dot,[data-reveal] .c.dot,.sc .c.dot,.sec--ink .c.dot{display:inline-block;width:.2em;height:.2em;margin-left:.06em;margin-right:.02em;border-radius:50%;background:var(--pink)!important;color:transparent!important;overflow:hidden;vertical-align:baseline;line-height:0;font-size:inherit}

/* Balanced lines and no orphans: headings share their words evenly across
   lines, body copy avoids a lone last word (site.js binds the last two words
   as a fallback for browsers without text-wrap) */
h1,h2,h3,h4,.h1,.xl,.lg,.range__big,.fleet__big,.band__text,.cta__title,.next__title,.dcard__title,.ccard__name,.ccard h3,
.tile__title,.block__title,.spanel__title,.fitem h3,.stiles b,.faq__q span,.mega__title,.story__title,.process__title,
.map__title,.job__title,.secard h3,.footer__strap,.hero__title .ln > span,.quote__text,.detail__label h3,.svlist h3,.pt__label{text-wrap:balance}
p,li,dd,figcaption,blockquote,address,.block__body,.tile__body,.ccard__sum,.cta__lead,.mega__blurb,.process__desc,.spanel__desc{text-wrap:pretty}
/* Give text room so no line ends on a single word: the widening blocks start
   at 1200px, sector tiles go to two columns then one, statement bands scale */
@media (max-width:1199px){.blocks--five{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:900px){.tiles--four{grid-template-columns:repeat(2,minmax(0,1fr))}.blocks--five,.blocks--four{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.tiles--four,.blocks--five,.blocks--four{grid-template-columns:1fr}.band__text{font-size:9vw}}
@media (min-width:561px) and (max-width:900px){.tiles,.tiles--three{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.hero__title{font-size:min(42px,8.8vw)}}
@media (max-width:560px){.band__text--long{font-size:7vw}.band__text--xlong{font-size:6vw}.cta__title{font-size:min(42px,8.4vw)}}
@media (min-width:561px) and (max-width:900px){.blocks,.blocks--three{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Content margin: section backgrounds, photographs and full-bleed blocks run
   edge to edge; text, images and elements inside each section sit in from
   both sides by the width the vertical ticker bars used to take (--tk), plus
   the usual gutter. */
body{padding-left:0;padding-right:0}
.nav{left:0;right:0}
.mega,.lightbox{left:0;right:0}
:root{--gut:calc(20px + var(--tk))}
@media (max-width:767px){:root{--gut:calc(16px + var(--tk))}}
@media (max-width:560px){.hero__title{font-size:min(40px,7.8vw)}}
@media (max-width:560px){.cta__title{font-size:min(38px,7.6vw)}}

/* Home: the three disciplines as square film tiles. Each plays its own looped
   film; hover one and it widens while the other two narrow, like the colour
   blocks elsewhere. */
.dcard--film{color:#fff;background:#0B0B0D;overflow:hidden;isolation:isolate;min-height:0;aspect-ratio:1 / 1}
.dcard--film:hover,.dcard--film:focus-visible{background:#0B0B0D;color:#fff;transform:none}
.dcard__film{position:absolute;inset:0;z-index:-2}
.dcard__film img,.dcard__film video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.dcard__film video{opacity:0;transition:opacity .8s ease}
.dcard__film video.playing{opacity:1}
.dcard--film::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(7,8,10,.15) 0%,rgba(7,8,10,0) 40%,rgba(7,8,10,.72) 100%)}
.dcard--film .dcard__go{background:#fff;color:#0B0B0D}
.dcard--film .dcard__title{color:#fff}
@media (hover:hover) and (min-width:900px){
  .dcards{display:flex;gap:var(--gap);height:calc((100vw - 2 * var(--gut) - 2 * var(--gap)) / 3)}
  .dcard--film{flex:1 1 0;min-width:0;aspect-ratio:auto;height:100%;transition:flex-grow .8s cubic-bezier(.34,1.25,.5,1)}
  .dcards:hover .dcard--film,.dcards:focus-within .dcard--film{flex-grow:.72}
  .dcards .dcard--film:hover,.dcards .dcard--film:focus-visible{flex-grow:1.6}
  .dcard--film .dcard__title{transition:font-size .7s var(--ease)}
  .dcards .dcard--film:hover .dcard__title{font-size:clamp(40px,4.2vw,80px)}
}
@media (max-width:899px){.dcards{display:grid;grid-template-columns:1fr}.dcard--film{aspect-ratio:1 / 1}}
@media (min-width:600px) and (max-width:899px){.dcards{grid-template-columns:repeat(3,minmax(0,1fr))}.dcard--film .dcard__title{font-size:clamp(20px,3.6vw,30px)}.dcard--film .dcard__go{width:34px;height:34px}}

/* One vertical rhythm on every page:
   --sp      above and below the content of every section, and inside pinned scenes
   --sp-in   between a section's heading and its content, and between blocks
   --sp-in/2 between a heading and the short line that belongs to it */
.wrap > :first-child,.wrap > .sr-only:first-child + *{margin-top:0}
.cta--contact .cta__lead,.cta__lead,.positions__lead,.standards__lead,.disc-intro__lead,.quote__lead,.band__sub,.positions__note{margin-top:calc(var(--sp-in) * .5)}
.env__text{margin-top:var(--sp-in)}
.env__cta,.row-start{margin-top:var(--sp-in)}
.jobs{margin-top:var(--sp-in)}
.positions__lead + .jobs{margin-top:var(--sp-in)}
@media (min-width:768px){.facility__pin{padding-top:var(--sp);padding-bottom:var(--sp);align-items:stretch}.facility__card,.facility__media{height:auto}}
/* square to the pixel, whatever the scrollbar: size from the content box */
@media (hover:hover) and (min-width:900px){
  .wrap:has(> .dcards){container-type:inline-size}
  .dcards{height:calc((100cqw - 2 * var(--gap)) / 3)}
}
@media (hover:hover) and (min-width:900px){
  .dcards:hover .dcard--film .dcard__title{font-size:clamp(26px,2.4vw,44px)}
  .dcards .dcard--film:hover .dcard__title,.dcards .dcard--film:focus-visible .dcard__title{font-size:clamp(40px,4.2vw,80px)}
}

/* ==========================================================================
   19. BRAND GREYS (from the Sign Design case study documents)
   Stone #C1C1BE ground, near-black #1C1C1A, white, and the brand pink kept
   for the moments it should pop: the full stops, the active state, the
   occasional highlighted word. More white space, quieter colour.
   ========================================================================== */
:root{
  --ink:#1C1C1A; --night:#141413; --ink-2:#2E2E2C; --paper:#F2F2F0; --white:#FFFFFF;
  --mist:#E3E3E0; --stone:#C1C1BE; --stone-2:#A8A8A4; --grey:#8F8F8B; --graphite:#2E2E2C;
  --text:#1C1C1A; --muted:#5E5E5A; --line:rgba(28,28,26,.14);
  --clay:#2E2E2C; --sun:#C1C1BE; --moss:#8F8F8B; --iris:#E3E3E0; --sand:#A8A8A4;
  --accent:#EC008C; --accent-tint:#F2F2F0; --accent-soft:#F2F2F0;
  --sp:clamp(96px,10vw,176px); --sp-in:clamp(48px,4.8vw,88px);
}
body{background:var(--white);color:var(--text)}
body[data-acc]{--accent:#EC008C;--accent-tint:#F2F2F0;--accent-soft:#F2F2F0}
[data-acc-local]{--accent:#EC008C;--accent-tint:#F2F2F0}

/* colour blocks: greys only (names kept from the earlier palette) */
.cb-pink{--cb:#EC008C;--cf:#FFFFFF;--cp:#FFFFFF}
.cb-clay{--cb:#2E2E2C;--cf:#FFFFFF;--cp:#EC008C}
.cb-sun{--cb:#C1C1BE;--cf:#1C1C1A;--cp:#EC008C}
.cb-moss{--cb:#8F8F8B;--cf:#1C1C1A;--cp:#EC008C}
.cb-iris{--cb:#E3E3E0;--cf:#1C1C1A;--cp:#EC008C}
.cb-sand{--cb:#A8A8A4;--cf:#1C1C1A;--cp:#EC008C}
.cb-bronze{--cb:#4A4A47;--cf:#FFFFFF;--cp:#EC008C}
.cb-sage{--cb:#D3D3CF;--cf:#1C1C1A;--cp:#EC008C}
.cb-violet{--cb:#1C1C1A;--cf:#FFFFFF;--cp:#EC008C}
.cb-ink{--cb:#1C1C1A;--cf:#FFFFFF;--cp:#EC008C}

/* the rule under heroes: four greys and a single pink segment */
.rule5 i:nth-child(1){background:#1C1C1A}.rule5 i:nth-child(2){background:#4A4A47}.rule5 i:nth-child(3){background:#8F8F8B}
.rule5 i:nth-child(4){background:#C1C1BE}.rule5 i:nth-child(5){background:var(--pink)}
.rule5{height:4px}

/* fixed sections move off black onto the document stone and greys */
.facility{background:var(--stone)}
.steps{background:var(--paper)}
.values{background:var(--paper)}
.clients--mist{background:var(--paper)}
.sec--ink,.projmap{background:var(--graphite)}
.ringdial--v2{--rbg:#2E2E2C}
.mega__bg i,.mega,.menu,.loader,html.t-any,html.t-any body,.pt{background:#1C1C1A}
.htick{background:#1C1C1A}
.dcard--film,.dcard--film:hover,.dcard--film:focus-visible{background:#2E2E2C}
.dcard--film .dcard__go{color:#1C1C1A}

/* buttons: near-black with a pink arrow on light grounds, white on dark */
.btn{background:#1C1C1A;color:#fff}
.btn .btn__arrow{background:var(--pink);color:#fff}
.sc .btn,.sc .btn--light{background:var(--fg);color:var(--bg)}
.sc .btn__arrow,.sc .btn--light .btn__arrow{background:var(--pink);color:#fff}
.cb .btn{background:var(--cf);color:var(--cb)}
.cb .btn__arrow{background:var(--pink);color:#fff}
.btn--pink{background:var(--pink);color:#fff}

/* type colour: headings near-black, body text a softer grey for legibility */
.sc [data-reveal] .c{color:color-mix(in srgb,var(--fg) 22%,var(--bg))}
.sc [data-reveal] .c.on{color:var(--hl)}
p,.s,.block__body,.tile__body,.ccard__sum,.faq__a p,.fitem p{color:inherit}
.sc:not(.sc--dark) .wrap > p:not(.xl):not(.band__text):not(.cta__title),.sc .faq__a p{color:color-mix(in srgb,var(--fg) 78%,var(--bg))}
.cb p,.cb .block__body,.cb .tile__body,.cb .ccard__sum{color:var(--cf)}

/* accreditation tiles: graphite cards with a pink top bar only on the first */
.stiles li{background:#2E2E2C;border-top:3px solid #4A4A47}
.stiles li:first-child{border-top-color:var(--pink)}
.stiles li:hover{background:#1C1C1A}

/* the pink, used where it should pop */
.dot,.c.dot,[data-reveal] .c.dot{background:var(--pink)!important}
.faq__q[aria-expanded="true"] i,.ccar__dots button[aria-current="true"],.htick__dot{background:var(--pink)}
::selection{background:var(--pink);color:#fff}
:focus-visible{outline-color:var(--pink)}
.hero__scroll i{background:var(--pink)}
.mega__tab[aria-expanded="true"] .mega__tabtxt,.mega__links a.on{color:#fff}
/* pinned photo-and-text cards: a clean white card on the stone ground */
.facility__card{--cb:#FFFFFF;--cf:#1C1C1A;--cp:#EC008C;background:#fff;color:#1C1C1A}
.facility__card .toggle{background:#1C1C1A}

/* Client ticker: full-colour logos on white, no panels, each scaled to the
   same visual weight (--k from build.py), pink dots between */
.htick{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line);--lh:clamp(30px,2.6vw,44px);--g:clamp(44px,4.4vw,80px);padding:clamp(30px,3vw,52px) 0}
.htick__item{height:calc(var(--lh) * var(--k,1));width:calc(var(--lh) * var(--k,1) * var(--ar));max-width:none}
.htick__item img{filter:none!important;opacity:1!important;background:none!important;padding:0!important;object-fit:contain}
.htick__item:hover img{transform:scale(1.08)}

/* ==========================================================================
   20. TYPOGRAPHY
   One scale, three weights with a job each:
     700  headlines (hero, section titles, contact title)
     600  card and block titles, questions, labels, buttons
     500  long statements, so they read as sentences rather than shouting
     400  body copy
   No display line is set tighter than 1.04, and every masked line has room
   below the baseline, so the tails of g, j, p, q and y are never clipped.
   ========================================================================== */
:root{--lh-display:1.06;--track-display:-.028em}

/* masks that slide headline lines in: room for descenders */
.hero__title .ln,.phero .h1 .ln,.sp-hero__title .ln{padding-bottom:.24em;margin-bottom:-.24em;padding-top:.04em;margin-top:-.04em}
.hero__title .ln > span,.phero .h1 .ln > span,.sp-hero__title .ln > span{transform:translateY(130%)}
.hero-in .hero__title .ln > span,.hero-in .phero .h1 .ln > span,.hero-in .sp-hero__title .ln > span{transform:none}
.btn__label{height:1.5em;line-height:1.5em}
.menu-btn__label{height:1.5em;line-height:1.5em}
.scard__title{height:1.5em;line-height:1.5em}
.mega__tabtxt,.mega__tab{line-height:1.2;padding-bottom:.08em}

/* headlines: 700 */
.h1,.hero__title{font-weight:700;letter-spacing:-.03em;line-height:1.04}
.hero__title{font-size:clamp(44px,5vw,92px)}
.range__big{font-weight:700;letter-spacing:var(--track-display);line-height:var(--lh-display);font-size:clamp(40px,5.2vw,96px)}
.cta__title,.cta--contact .cta__title{font-weight:700;letter-spacing:var(--track-display);line-height:var(--lh-display);font-size:clamp(40px,4.4vw,80px)}
.story__title,.cutout__title h2{line-height:1}

/* long statements and intro paragraphs: 500, sentence-sized */
.xl,.intro .xl{font-weight:500;letter-spacing:-.018em;line-height:1.16;font-size:clamp(28px,2.7vw,50px)}
.band__text{font-weight:600;letter-spacing:-.026em;line-height:1.08;font-size:clamp(36px,4.6vw,84px);max-width:18ch}
.band__text--long{font-size:clamp(30px,3.4vw,62px);max-width:24ch;font-weight:500}
.band__text--xlong{font-size:clamp(26px,2.6vw,46px);max-width:32ch;font-weight:500}
.quote__text{font-weight:500;line-height:1.16}

/* card, block and list titles: 600 */
.tile__title,.block__title,.ccard__name,.ccard h3,.dcard__title,.fitem h3,.spanel__title,.map__title,.job__title,
.secard h3,.detail__label h3,.svlist h3,.stiles b,.process__title,.mega__title,.contact-aside h3,.stages5 h3{font-weight:600;letter-spacing:-.022em;line-height:1.1}
.dcard__title{font-size:clamp(34px,3.2vw,60px);font-weight:700;line-height:1.04}
.ccard__name{font-size:clamp(24px,2.1vw,38px)}
.tile__title{font-size:clamp(21px,1.6vw,28px)}
.block__title{font-size:clamp(20px,1.5vw,26px)}
.fitem h3{font-size:clamp(26px,2.2vw,40px)}
.spanel__title{font-size:clamp(32px,3.2vw,60px);font-weight:700}
.stiles b{font-size:clamp(22px,1.9vw,34px)}
.faq__q{font-weight:600;font-size:clamp(19px,1.5vw,26px);letter-spacing:-.018em;line-height:1.25}
.process__list li{font-weight:600;letter-spacing:-.025em;line-height:1.12}
.values__list li{font-weight:600;letter-spacing:-.025em;line-height:1.12}

/* body copy: 400, comfortable measure */
body{font-size:17px;line-height:1.6}
p,.block__body,.tile__body,.ccard__sum,.fitem p,.faq__a p,.process__desc,.spanel__desc,.map__desc,.values__desc{font-weight:400;line-height:1.6;letter-spacing:0}
.faq__a p,.fitem p,.spanel__desc,.process__desc{font-size:clamp(16px,1.1vw,18px);max-width:62ch}
.block__body,.tile__body,.ccard__sum{font-size:15.5px}
.cta__lead,.standards__lead,.positions__lead,.quote__lead,.band__sub{font-size:clamp(17px,1.2vw,20px);line-height:1.55;font-weight:400}

/* small labels and controls: 600 */
.btn{font-family:var(--font-sans);font-weight:600;font-size:15px;letter-spacing:0}
.hcard__bar,.chips li,.case3__disc,.way__k,.job__type{font-weight:600;letter-spacing:.01em}
.footer__strap{font-weight:600;letter-spacing:-.015em}
.footer__nav a,.mega__more a{font-weight:600}

@media (max-width:767px){
  .hero__title{font-size:min(40px,9vw)}
  .range__big{font-size:clamp(32px,8.6vw,48px)}
  .cta__title,.cta--contact .cta__title{font-size:min(40px,8.4vw)}
  .xl,.intro .xl{font-size:clamp(24px,6.4vw,32px)}
  .band__text{font-size:clamp(30px,8vw,44px)}
  .band__text--long{font-size:clamp(24px,6.4vw,32px)}
  .band__text--xlong{font-size:clamp(20px,5.4vw,26px)}
}
.hcard__bar{height:auto;min-height:28px;padding-top:5px;padding-bottom:5px;line-height:1.25;gap:8px}
/* capabilities dial on phones: everything fits in one screen */
@media (max-width:767px){
  .process__pin{gap:14px;padding-top:calc(var(--nav-h) + 12px);padding-bottom:16px;justify-content:center}
  .process__stage{width:min(30vh,62vw)}
  .process__list ul{display:flex;flex-wrap:wrap;gap:4px 14px}
  .process__list li{font-size:19px;line-height:1.3}
  .process__title{font-size:20px}
  .process__desc{font-size:15px;line-height:1.5}
  .process__bar{display:none}
}
@media (max-width:767px) and (max-height:760px){
  .process__stage{width:min(22vh,50vw)}
  .process__list li{font-size:17px}
  .process__desc{font-size:14px}
}
.job__title{font-size:clamp(22px,1.7vw,28px);grid-column:2 / span 5}
@media (max-width:560px){.cta__title,.cta--contact .cta__title{font-size:min(36px,7.4vw)}}
.contact-blocks .block__body{font-size:clamp(17px,1.35vw,22px);font-weight:500;letter-spacing:-.01em;line-height:1.35}
/* client ticker: no dots, one even gap between every logo */
.htick__dot{display:none!important}
.htick__cell{gap:0;padding-right:var(--g)}
.htick{--g:clamp(56px,5.6vw,104px)}
.htick{background:#ECEDEB;border:0}

/* ==========================================================================
   21. A SMALLER, CONTAINED PAGE
   Three times the side margin at desktop widths, so more of each section's
   background shows either side of the content, and a type scale reduced
   to suit the narrower measure. Backgrounds, photographs and full-bleed
   bands still run edge to edge.
   ========================================================================== */
:root{--gut1:calc(20px + var(--tk))}
/* triple the old margin, but never let the content column drop below 960px */
@media (min-width:900px){:root{--gut:max(calc(var(--gut1) * 2), min(calc(var(--gut1) * 3), calc((100vw - 960px) / 2)))}}
:root{--sp:clamp(80px,8vw,140px);--sp-in:clamp(40px,3.6vw,68px);--gap:10px}
body{font-size:16px}

/* headlines */
.hero__title{font-size:clamp(34px,3.4vw,64px)}
.range__big{font-size:clamp(30px,3.2vw,58px)}
.cta__title,.cta--contact .cta__title{font-size:clamp(30px,2.9vw,54px)}
.xl,.intro .xl{font-size:clamp(21px,1.75vw,32px)}
.band__text{font-size:clamp(28px,3vw,56px)}
.band__text--long{font-size:clamp(22px,2.2vw,40px)}
.band__text--xlong{font-size:clamp(19px,1.7vw,30px)}
.quote__text{font-size:clamp(22px,2vw,38px)}

/* titles */
.dcard__title{font-size:clamp(24px,2vw,38px)}
.ccard__name{font-size:clamp(19px,1.5vw,27px)}
.tile__title{font-size:clamp(17px,1.2vw,22px)}
.block__title{font-size:clamp(16px,1.1vw,20px)}
.fitem h3{font-size:clamp(20px,1.6vw,30px)}
.spanel__title{font-size:clamp(26px,2.4vw,44px)}
.stiles b{font-size:clamp(17px,1.35vw,24px)}
.faq__q{font-size:clamp(17px,1.2vw,21px)}
.scard__title{font-size:clamp(14px,1vw,18px)}
.job__title{font-size:clamp(19px,1.3vw,23px)}
.process__list li{font-size:clamp(24px,2.2vw,42px)}
.values__list li{font-size:clamp(30px,3.2vw,60px)}
.ringdial--v2 .ringdial__num{font-size:clamp(54px,6vw,112px)}
.cutout__title h2{font-size:clamp(48px,7.6vw,150px)}
.cutout__year{font-size:clamp(96px,20vw,380px)}
.wheel li{font-size:clamp(30px,3.2vw,60px)}

/* body copy and small text */
.faq__a p,.fitem p,.spanel__desc,.process__desc{font-size:clamp(15px,1vw,17px)}
.block__body,.tile__body,.ccard__sum{font-size:14.5px}
.cta__lead,.standards__lead,.positions__lead,.quote__lead,.band__sub{font-size:clamp(16px,1.05vw,18px)}
.contact-blocks .block__body{font-size:clamp(15px,1.1vw,18px)}
.btn{font-size:14px;--h:40px}

/* boxes scale with the narrower column */
.dcard{min-height:0}
.tile{min-height:clamp(240px,18vw,330px)}
.tiles--four .tile{min-height:clamp(200px,14vw,270px)}
.stiles--four li{min-height:clamp(170px,12vw,210px)}
.block{min-height:clamp(170px,12vw,230px);padding:clamp(18px,1.4vw,26px)}
.blocks{height:auto}
@media (hover:hover) and (min-width:1200px){
  .blocks{height:clamp(220px,15vw,280px)}
  .blocks.blocks--stages{height:clamp(400px,26vw,470px)}
}
.htick{--lh:clamp(26px,2vw,36px);--g:clamp(48px,4.4vw,84px)}
.footer__strap{font-size:clamp(17px,1.25vw,22px)}

@media (max-width:767px){
  .hero__title{font-size:min(34px,8.4vw)}
  .range__big{font-size:clamp(28px,7.6vw,40px)}
  .cta__title,.cta--contact .cta__title{font-size:min(32px,7.4vw)}
  .xl,.intro .xl{font-size:clamp(20px,5.4vw,26px)}
  .band__text{font-size:clamp(26px,7vw,36px)}
}
@media (hover:hover) and (min-width:1200px){
  .blocks.blocks--stages{height:clamp(480px,34vw,560px)}
  .blocks--stages .block__body{font-size:13.5px;line-height:1.5}
  .blocks--stages .block:hover .block__body,.blocks--stages .block:focus-visible .block__body{font-size:clamp(15px,1.05vw,17px)}
}
.blocks--five .block__title{font-size:clamp(15px,1vw,18px)}
.blocks--five .block__body{font-size:13.5px}
.job__title{font-size:clamp(17px,1.15vw,21px)}
.job__title{grid-column:auto}.job{grid-template-columns:auto minmax(0,1.1fr) minmax(0,1.3fr) auto}
.jobs .job > *{grid-column:auto}
/* five narrow boxes in a row: titles only at rest, the line appears as a box opens */
@media (hover:hover) and (min-width:1200px){
  .blocks--five:not(.blocks--stages) .block__body{opacity:0;transform:translateY(6px);transition:opacity .4s ease .1s,transform .6s var(--ease),font-size .7s var(--ease)}
  .blocks--five:not(.blocks--stages) .block:hover .block__body,.blocks--five:not(.blocks--stages) .block:focus-visible .block__body{opacity:.95;transform:none;font-size:clamp(14.5px,1vw,16px)}
}

/* ==========================================================================
   22. MENU, COMPACT
   One row of tabs at a modest size, a narrow intro, the links in three
   readable columns, a smaller preview. The panel never runs into the
   footer row of the menu.
   ========================================================================== */
@media (min-width:901px){
  .mega__inner{--mg:max(calc(var(--gut1) * 1.5), calc((100vw - 1240px) / 2));padding:calc(var(--nav-h) + 22px) var(--mg) 26px}
  .mega__list{flex-wrap:nowrap;gap:0 clamp(20px,2.2vw,40px);padding-bottom:16px}
  .mega__tab{font-size:clamp(20px,1.7vw,28px);font-weight:600;letter-spacing:-.02em;white-space:nowrap}
  .mega__tab::after{bottom:-17px;height:2px}
  .mega__panel{top:calc(100% + 30px);max-height:calc(100vh - var(--nav-h) - 230px);overflow:auto;overscroll-behavior:contain}
  .mega__panelin{grid-template-columns:minmax(0,2.2fr) minmax(0,6.2fr) minmax(0,3.2fr);gap:clamp(24px,2.6vw,48px)}
  .mega__blurb{margin-top:0;font-size:14.5px;line-height:1.55;max-width:30ch}
  .mega__links{columns:3;column-gap:clamp(20px,2vw,36px)}
  .mega__links--2{columns:2}.mega__links--1{columns:1}
  .mega__links li{margin-bottom:9px}
  .mega__links a{font-size:14px;line-height:1.35}
  .mega__links a:hover{transform:translateX(8px)}
  .mega__links a::before{left:-12px;top:.5em;width:5px;height:5px;background:var(--pink)}
  .mega__stage{aspect-ratio:4/3;max-height:calc(100vh - var(--nav-h) - 260px);border-radius:10px}
  .mega__cap{font-size:14px;left:16px;right:16px;bottom:14px}
  .mega__foot{padding-top:16px}
  .mega__more a{font-size:clamp(15px,1.1vw,18px);font-weight:600;letter-spacing:-.01em}
  .mega__meta{font-size:13.5px}
}
@media (min-width:901px) and (max-width:1100px){
  .mega__panelin{grid-template-columns:minmax(0,1fr) minmax(0,2.4fr)}
  .mega__stage{display:none}
}
/* menu content lines up with the logo and the page column */
@media (min-width:901px){
  .mega__inner{--mg:var(--gut)}
  .mega__panelin{grid-template-columns:minmax(0,7fr) minmax(0,3fr);grid-template-rows:auto 1fr;gap:14px clamp(24px,2.6vw,48px)}
  .mega__intro{grid-column:1;grid-row:1}
  .mega__links{grid-column:1;grid-row:2;margin-top:8px}
  .mega__stage{grid-column:2;grid-row:1 / span 2}
  .mega__blurb{max-width:60ch;color:rgba(255,255,255,.55)}
}
@media (min-width:901px) and (max-width:1100px){.mega__panelin{grid-template-columns:1fr}}

/* ==========================================================================
   23. COMPACT BLOCKS, FOUR-UP SERVICES, DIAL PROGRESS, GAPS
   ========================================================================== */
/* Signage delivery boxes: half the height. Titles at rest; the box that is
   hovered widens and shows its paragraph. */
@media (hover:hover) and (min-width:1200px){
  .blocks.blocks--stages{height:clamp(250px,18vw,300px)}
  .blocks--stages .block{justify-content:flex-start;gap:14px}
  .blocks--stages .block:hover,.blocks--stages .block:focus-visible{flex-grow:3.4}
  .blocks--stages .block__body{opacity:0;font-size:14px;line-height:1.5;transition:opacity .35s ease}
  .blocks--stages:hover .block .block__body{opacity:0}
  .blocks--stages .block:hover .block__body,.blocks--stages .block:focus-visible .block__body{opacity:.95;font-size:14px;max-width:none;transition-delay:.25s}
  .blocks--stages .block__title{font-size:clamp(16px,1.1vw,19px)}
}

/* Contact boxes: half the height */
.contact-blocks .block{min-height:clamp(118px,8.6vw,150px);padding:clamp(16px,1.2vw,22px);gap:10px}
@media (hover:hover) and (min-width:1200px){.blocks.contact-blocks{height:clamp(124px,9vw,150px)}}
.contact-blocks .block__title{font-size:clamp(15px,1.05vw,18px)}
.contact-blocks .block__socials a{width:30px;height:30px}

/* One box in every row is white with a pink outline (on contact, the last) */
.blocks > .block:last-child{--cb:#FFFFFF;--cf:#1C1C1A;background:#fff;color:#1C1C1A;box-shadow:inset 0 0 0 2px var(--pink)}
.blocks > .block:last-child .block__body{color:#1C1C1A}
.blocks > .block:last-child .block__socials a{background:#1C1C1A;color:#fff}

/* Sub-services: four to a row */
.sgrid,.sgrid--photo{grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(22px,2vw,36px) var(--gap)}
@media (max-width:1024px){.sgrid,.sgrid--photo{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:767px){.sgrid,.sgrid--photo{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Capabilities dial: the progress line sits under the list of items */
.process__list{position:relative}
.process__list .process__bar{position:relative;left:auto;right:auto;bottom:auto;display:block;width:100%;max-width:240px;height:2px;margin-top:22px;background:var(--line);border-radius:2px;overflow:hidden}
.process__list .process__bar i{background:var(--pink)}
@media (max-width:767px){.process__list .process__bar{display:none}}

/* No doubled gaps: a statement band straight before a pinned card scene */
.band:has(+ .facility){padding-bottom:calc(var(--sp) * .5)}
.band + .facility .facility__pin{padding-top:calc(var(--sp) * .5)}
.contact-blocks .block:last-child .block__body{display:none}
.contact-blocks .block__body{font-size:clamp(14px,.95vw,16.5px);line-height:1.4}
@media (hover:hover) and (min-width:1200px){.blocks.contact-blocks{height:clamp(132px,9.4vw,156px)}}
@media (hover:hover) and (min-width:1200px){
  .blocks--stages .block:hover .block__title,.blocks--stages .block:focus-visible .block__title{font-size:clamp(19px,1.4vw,24px)}
  .blocks--stages:hover .block .block__title{font-size:clamp(14px,1vw,17px)}
  .blocks:hover .block .block__title{font-size:clamp(14px,1vw,17px)}
  .blocks .block:hover .block__title,.blocks .block:focus-visible .block__title{font-size:clamp(18px,1.35vw,23px)}
}
/* contact boxes: a gentle widen on hover, never squeezing the address */
@media (hover:hover) and (min-width:1200px){
  .contact-blocks:hover .block,.contact-blocks:focus-within .block{flex-grow:.92}
  .contact-blocks .block:hover,.contact-blocks .block:focus-visible{flex-grow:1.3}
  .contact-blocks:hover .block .block__title{font-size:clamp(15px,1.05vw,18px)}
  .contact-blocks .block:hover .block__title{font-size:clamp(16px,1.15vw,20px)}
  .contact-blocks:hover .block .block__body{font-size:clamp(14px,.95vw,16.5px);opacity:.95}
}
.contact-blocks .block__body{overflow-wrap:normal;word-break:normal}

/* ==========================================================================
   24. NAV: its own inset, not the page column
   Logo hard to the left, a solid pink round menu button to the right, both
   close to the edges of the screen as in the mock-up.
   ========================================================================== */
:root{--nav-x:clamp(18px,2.6vw,48px)}
.nav{padding:0 var(--nav-x);left:0;right:0}
.nav .logo img{height:clamp(26px,2.1vw,34px)}
.menu-btn{gap:0}
.menu-btn__label{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.menu-btn__icon{width:clamp(40px,3vw,48px);height:clamp(40px,3vw,48px);border:0;background:var(--pink);color:#fff;transition:transform .5s var(--ease),background .3s}
.menu-btn__icon i{left:32%;right:32%;height:1.75px;background:#fff}
.menu-btn__icon i:nth-child(1){top:calc(50% - 4px)}
.menu-btn__icon i:nth-child(2){top:calc(50% + 2.5px)}
.menu-open .menu-btn__icon i:nth-child(1),.menu-open .menu-btn__icon i:nth-child(2){top:calc(50% - 1px)}
.menu-btn:hover .menu-btn__icon{transform:scale(1.06)}
.menu-btn:focus-visible{outline:none}
.menu-btn:focus-visible .menu-btn__icon{box-shadow:0 0 0 3px #fff,0 0 0 5px var(--pink)}
/* menu contents keep the page column; only the bar moves out */
@media (min-width:901px){.mega__inner{padding-top:calc(var(--nav-h) + 22px)}}
@media (max-width:560px){.hero__title{font-size:min(32px,7.4vw)}}

/* ==========================================================================
   25. HEADER ALWAYS ON SHOW, OUTLINED MENU BUTTON, S AND D. GLYPHS
   ========================================================================== */
/* the header never hides; logo and button each switch white/black to suit
   whatever is behind them (the black logo keeps its pink dot) */
.nav-hidden .nav{transform:none!important;opacity:1!important}
.nav{color:#1C1C1A}
.nav .logo--w{display:none}.nav .logo--b{display:block}
.nav-l-dark .nav .logo--w,.menu-open .nav .logo--w{display:block}
.nav-l-dark .nav .logo--b,.menu-open .nav .logo--b{display:none}
.nav .menu-btn{color:#1C1C1A;transition:color .35s ease}
.nav-r-dark .nav .menu-btn,.menu-open .nav .menu-btn{color:#fff}

/* menu button: "Menu" / "Close" beside a pink-outlined circle */
.menu-btn{gap:12px}
.menu-btn__label{position:relative!important;width:auto;height:1.5em;overflow:hidden;clip:auto;white-space:nowrap;font-family:var(--font-sans);font-size:15px;font-weight:600;line-height:1.5em;letter-spacing:0}
.menu-btn__label span{display:block;transition:transform .6s var(--ease)}
.menu-open .menu-btn__label span{transform:translateY(-100%)}
.menu-btn__icon{background:transparent;border:1.5px solid var(--pink);width:clamp(40px,2.9vw,46px);height:clamp(40px,2.9vw,46px);transition:background .3s ease,transform .5s var(--ease)}
.menu-btn__icon i{left:31%;right:31%;height:1.5px;background:currentColor}
.menu-btn:hover .menu-btn__icon{background:var(--pink);transform:none}
.menu-btn:hover .menu-btn__icon i{background:#fff}

/* glyph windows: in front of the section colour, behind the content */
.menu-btn__icon{color:inherit}

/* 26. Split header logo: the black wordmark is always there, the white one sits on top,
   clipped by site.js to the dark parts of whatever is behind it */
.nav .logo{position:relative}
.nav .logo .logo--b{display:block!important}
.nav .logo .logo--w{display:block!important;position:absolute;left:0;top:0;width:100%;height:100%;clip-path:inset(0 0 0 100%)}
.menu-open .nav .logo .logo--w{clip-path:none!important}
.menu-open .nav .logo .logo--b{visibility:hidden}
/* the Menu label and the button each take white or black from what is behind them */
.nav .menu-btn__icon{color:#1C1C1A;transition:color .35s ease}
.nav-i-dark .nav .menu-btn__icon,.menu-open .nav .menu-btn__icon{color:#fff}
/* 27. Hero: no boxes; the scroll cue sits centred at the foot of the hero, clear of the headline */
.hero__cards{display:none}
.hero .hero__scroll{left:50%;right:auto;bottom:clamp(30px,5vh,56px);margin-left:-1px;z-index:4;background:rgba(255,255,255,.3)}
/* 28. Black footer: the film still loops behind, under a black tint; type, logos and lines reversed to white */
.footer{--paper:#0E0E0D;--ink:#fff;--muted:rgba(255,255,255,.62);--line:rgba(255,255,255,.16);background:#0E0E0D;color:#fff}
.footer__video{opacity:.42;filter:grayscale(1) contrast(1.05)}
.footer__media::after{background:linear-gradient(to bottom,#0E0E0D 0%,rgba(14,14,13,.62) 32%,rgba(14,14,13,.55) 62%,#0E0E0D 100%)}
.footer__strap,.footer__nav a,.footer__contact > a,.footer__h{color:#fff}
.footer__nav a:hover,.footer__contact > a:hover{color:var(--pink)}
.footer__brand address,.footer__bottom,.footer__dd{color:rgba(255,255,255,.62)}
.footer__bottom a{border-bottom-color:rgba(255,255,255,.22)}
.footer__bottom a:hover,.footer__legal a:hover{color:#fff;border-color:#fff}
.footer .btn{background:#fff;color:#1C1C1A}
.footer .btn .btn__arrow{background:var(--pink);color:#fff}
.footer .socials a{background:#fff;color:#0E0E0D}
.footer .socials a:hover{background:var(--pink);color:#fff}
.footer :focus-visible{outline-color:#fff}
/* 29. Expanding blocks: title at the top, text at the foot of the box, on every row */
.blocks .block,.blocks--stages .block{justify-content:flex-start}
.blocks .block > .block__body{margin-top:auto}
/* menu: room to the left of the service links so the pink hover dot is never clipped */
@media (min-width:901px){
  .mega__panel{left:-20px;right:0;padding-left:20px}
}
/* 30. Film window section (ESG governance): the film stays still on screen while the
   section scrolls over it, darkened but in full colour, with white type */
.vsec{position:relative;overflow:hidden;isolation:isolate;--bg:#141413;--fg:#fff;--hl:#fff;background:#141413;color:#fff}
.vsec__media{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.vsec__media video{position:absolute;left:0;top:0;width:100vw;height:100vh;max-width:none;object-fit:cover;will-change:transform}
.vsec__media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,9,.55) 0%,rgba(10,10,9,.42) 45%,rgba(10,10,9,.58) 100%)}
.vsec > .wrap{position:relative;z-index:2}
.vsec .intro,.vsec .intro *,.vsec h2,.vsec .tag{color:#fff}
.vsec .intro h2,.vsec .s{text-shadow:0 1px 18px rgba(0,0,0,.35)}
@media (prefers-reduced-motion:reduce){.vsec__media video{height:100%;width:100%}}
/* 31. Accreditation boxes: the expanding-block look, turned on its side. Four columns;
   in each, the hovered box grows taller and the box above or below it gives way.
   Widths never change. The title shows at rest, the line appears on hover. */
.accred{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap);list-style:none;margin:var(--sp-in) 0 0;padding:0}
.accred__col{display:flex;flex-direction:column;gap:var(--gap);min-width:0}
.ablock{position:relative;display:flex;flex-direction:column;justify-content:flex-start;gap:14px;min-height:clamp(150px,11vw,190px);padding:clamp(18px,1.4vw,24px);border-radius:var(--r);outline:0;overflow:hidden}
.ablock--line{background:#fff;color:#1C1C1A;box-shadow:inset 0 0 0 2px var(--pink)}
.ablock__top{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.ablock__logo{display:block;height:clamp(40px,3.2vw,54px);width:auto;max-width:100%;border-radius:4px}
.ablock__logo--wide{height:clamp(28px,2.2vw,36px);border-radius:0}
.ablock__title{margin:0;font-family:var(--font-display);font-weight:600;font-size:clamp(16px,1.15vw,20px);line-height:1.15;letter-spacing:-.02em}
.ablock__body{margin:auto 0 0;max-width:32ch;font-size:14.5px;line-height:1.5;opacity:.92}
.ablock:focus-visible{box-shadow:0 0 0 3px #fff,0 0 0 5px var(--pink)}
.ablock--line:focus-visible{box-shadow:inset 0 0 0 2px var(--pink),0 0 0 3px #fff,0 0 0 5px var(--pink)}
@media (hover:hover) and (min-width:1200px){
  .accred--2 .accred__col{height:clamp(330px,24vw,400px)}
  .accred--1 .accred__col{height:clamp(220px,16vw,270px)}
  .ablock{flex:1 1 0;min-height:0;transition:flex-grow .8s cubic-bezier(.34,1.25,.5,1)}
  .accred--2 .accred__col:hover .ablock,.accred--2 .accred__col:focus-within .ablock{flex-grow:.62}
  .accred--2 .accred__col .ablock:hover,.accred--2 .accred__col .ablock:focus-visible{flex-grow:1.55}
  /* a single box has nothing to push against: it rests shorter and grows into the space below it */
  .accred--1 .ablock{flex:0 0 auto;height:62%;transition:height .8s cubic-bezier(.34,1.25,.5,1)}
  .accred--1 .ablock:hover,.accred--1 .ablock:focus-visible{height:100%}
  .ablock__body{opacity:0;transform:translateY(8px);transition:opacity .3s ease,transform .6s var(--ease)}
  .ablock:hover .ablock__body,.ablock:focus-visible .ablock__body{opacity:.92;transform:none;transition-delay:.22s}
  .ablock__title{transition:font-size .7s var(--ease)}
  .ablock:hover .ablock__title,.ablock:focus-visible .ablock__title{font-size:clamp(18px,1.35vw,23px)}
  .ablock__logo{transition:height .7s var(--ease)}
  .accred--2 .accred__col:hover .ablock:not(:hover) .ablock__logo{height:clamp(30px,2.3vw,38px)}
  .accred--2 .accred__col:hover .ablock:not(:hover) .ablock__logo--wide{height:clamp(22px,1.7vw,28px)}
}
/* tablets and phones: one box after another in reading order, line always shown */
@media not all and (hover:hover) and (min-width:1200px){
  .accred__col{display:contents}
  .ablock{order:var(--o)}
}
@media (max-width:1199px){.accred{grid-template-columns:repeat(2,minmax(0,1fr))}.accred__col{display:contents}.ablock{order:var(--o)}}
@media (max-width:560px){.accred{grid-template-columns:1fr}.ablock{min-height:0}.ablock__body{margin-top:8px}}
/* 32. Client ticker: every logo the same height, 50% larger than before, twice the gap */
.htick{--lh:clamp(39px,3vw,54px);--g:clamp(96px,8.8vw,168px);padding:clamp(34px,3.2vw,56px) 0}
.htick__item{height:var(--lh);width:calc(var(--lh) * var(--ar))}
@media (max-width:700px){.htick{--lh:34px;--g:64px}}
/* 33. Client ticker at the sizes set in Client_logos2.pdf: each logo's height is the
   standard height (--lh) times its own --k, one even gap (--tg) between every logo,
   all centred on one line, transparent artwork straight on the band */
.htick{--lh:clamp(32px,3vw,50px);--g:calc(var(--lh) * var(--tg,1.58));padding:clamp(30px,2.8vw,50px) 0}
.htick__item{height:calc(var(--lh) * var(--k,1));width:calc(var(--lh) * var(--k,1) * var(--ar));max-width:none}
@media (max-width:700px){.htick{--lh:26px}}
/* 34. Client ticker: logos 25% smaller; they fade out into the band at both sides */
.htick{--lh:clamp(24px,2.25vw,37.5px);padding:clamp(24px,2.2vw,40px) 0}
@media (max-width:700px){.htick{--lh:19.5px}}
.htick::before,.htick::after{content:"";position:absolute;top:0;bottom:0;z-index:2;width:clamp(60px,14vw,260px);pointer-events:none}
.htick::before{left:0;background:linear-gradient(to right,#ECEDEB 0%,rgba(236,237,235,.85) 30%,rgba(236,237,235,0) 100%)}
.htick::after{right:0;background:linear-gradient(to left,#ECEDEB 0%,rgba(236,237,235,.85) 30%,rgba(236,237,235,0) 100%)}
/* 35. Geometric background: one window per section onto a layer of slowly drifting
   light-grey shapes that stays still on the screen; above the section colour, below content */
.geo{position:absolute;inset:0;z-index:1;pointer-events:none;-webkit-clip-path:inset(0);clip-path:inset(0)}
.geo__view{position:fixed;left:0;top:0;width:100vw;height:100vh;display:block;pointer-events:none;will-change:transform;transform:translateZ(0)}
/* 36. One button outline everywhere: a 3px brand-pink ring (the menu button's, doubled).
   Drawn inside the shape so nothing moves. */
:root{--bw:3px}
.menu-btn__icon{border-width:var(--bw)!important}
.btn,.ccard__go,.dcard__go,.tile__go,.spanel__close,.lb-prev,.lb-next,.lb-close{box-shadow:inset 0 0 0 var(--bw) var(--pink)!important}
.btn{padding-right:7px}
.btn__arrow{height:calc(var(--h,42px) - 14px)}
.btn:focus-visible,.ccard__go:focus-visible,.dcard__go:focus-visible{box-shadow:inset 0 0 0 var(--bw) var(--pink),0 0 0 3px #fff,0 0 0 5px var(--pink)!important}
/* 37. Every button: white fill, 3px pink ring, black icon. Icons a touch heavier, with
   rounded ends and corners. */
.btn,.btn--pink,.btn--light,.btn--accent,.cb .btn,.sc .btn,.footer .btn{background:#fff!important;color:#1C1C1A!important}
.btn .btn__arrow,.btn--pink .btn__arrow,.btn--light .btn__arrow,.cb .btn__arrow,.sc .btn__arrow,.sc .btn--light .btn__arrow,.footer .btn .btn__arrow{background:transparent!important;color:#1C1C1A!important}
.btn__arrow svg{width:13px;height:13px}
.ccard__go,.dcard__go,.dcard--film .dcard__go,.tile__go,.lb-prev,.lb-next,.lb-close{background:#fff!important;color:#1C1C1A!important}
.ccard__go svg,.dcard__go svg,.tile__go svg{width:20px;height:20px}
.spanel__close{background:#fff!important;color:#1C1C1A!important}
.spanel__close b{background:transparent!important;color:#1C1C1A!important}
.spanel__close b svg{width:18px;height:18px}
.lb-prev svg,.lb-next svg,.lb-close svg{width:22px;height:22px}
/* the menu button too: white with black lines on any background */
.nav .menu-btn__icon,.nav-i-dark .nav .menu-btn__icon,.menu-open .nav .menu-btn__icon{background:#fff!important;color:#1C1C1A!important}
.menu-btn__icon i{height:2.5px!important;border-radius:2px;background:#1C1C1A!important}
.menu-btn__icon i:nth-child(1){top:calc(50% - 4px)}
.menu-btn__icon i:nth-child(2){top:calc(50% + 1.5px)}
.menu-open .menu-btn__icon i:nth-child(1),.menu-open .menu-btn__icon i:nth-child(2){top:calc(50% - 1.25px)}
.menu-btn:hover .menu-btn__icon{background:#fff!important;transform:scale(1.06)}
.menu-btn:hover .menu-btn__icon i{background:#1C1C1A!important}
/* 38. Client ticker: twice the gap between logos */
.htick{--g:calc(var(--lh) * var(--tg,1.58) * 2)}
/* 39. Standard for every row of expanding blocks: the title always shows; the description
   shows only in the block being hovered (or focused). Contact blocks keep their phone
   number and email on show. Touch screens and narrow screens show every description. */
@media (hover:hover) and (min-width:1200px){
  .blocks:not(.contact-blocks) .block .block__body{opacity:0!important;transform:translateY(8px);transition:opacity .3s ease,transform .6s var(--ease),font-size .7s var(--ease)}
  .blocks:not(.contact-blocks) .block:hover .block__body,.blocks:not(.contact-blocks) .block:focus-visible .block__body{opacity:.95!important;transform:none;transition-delay:.25s}
}
/* 40. Service boxes with a supplied photograph: the photo fills the box (and the pop-up) */
.scard__art--photo{inset:0}
.scard__art--photo img{display:block;width:100%;height:100%;object-fit:cover}
.spanel__art img{display:block;width:100%;max-height:min(70vh,640px);aspect-ratio:1/1;object-fit:cover;border-radius:var(--r)}
/* 41. Service boxes as cards: picture on top, a banner below carrying the service name
   and the round arrow button, like the case study cards */
.scard{display:flex;flex-direction:column;border-radius:var(--r);overflow:hidden;isolation:isolate}
.scard .scard__box{border-radius:0;aspect-ratio:4/3}
.scard__bar{position:relative;display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:clamp(78px,6.2vw,104px);padding:clamp(14px,1.2vw,20px) clamp(16px,1.3vw,22px)}
.scard__name{font-family:var(--font-display);font-weight:600;font-size:clamp(15px,1.1vw,19px);line-height:1.15;letter-spacing:-.02em;text-wrap:balance}
.scard__go{flex:0 0 auto;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#fff;color:#1C1C1A;box-shadow:inset 0 0 0 var(--bw) var(--pink);transition:transform .6s var(--ease)}
.scard__go svg{width:18px;height:18px}
.scard:hover .scard__go,.scard:focus-visible .scard__go{transform:rotate(45deg)}
/* 75% of the previous button ring */
:root{--bw:2.25px}
@media (max-width:600px){
  .scard{position:relative}
  .scard__go{position:absolute;top:8px;right:8px;width:32px;height:32px}
  .scard__go svg{width:15px;height:15px}
  .scard__bar{position:static;min-height:64px;padding:12px}
  .scard__name{font-size:13.5px}
}
/* 42. Service cards on hover: the banner rises to fill the whole card in its own colour,
   carrying the name to the top and setting it a little larger; the arrow stays bottom right */
@media (hover:hover) and (min-width:601px){
  .scard{position:relative;--bh:clamp(78px,6.2vw,104px);padding-bottom:var(--bh)}
  .scard__bar{position:absolute;left:0;right:0;bottom:0;height:var(--bh);min-height:0;align-items:flex-start;padding-top:clamp(18px,1.5vw,26px);padding-right:calc(40px + clamp(28px,2.4vw,40px));transition:height .65s var(--ease)}
  .scard__go{position:absolute;right:clamp(16px,1.3vw,22px);bottom:calc((var(--bh) - 40px) / 2)}
  .scard__name{transition:font-size .6s var(--ease)}
  .scard:hover .scard__bar,.scard:focus-visible .scard__bar{height:100%}
  .scard:hover .scard__name,.scard:focus-visible .scard__name{font-size:clamp(19px,1.45vw,25px)}
  .scard:hover .scard__art{transform:none}
}
/* close: one round white button with a pink ring and a black cross, top right, clear of the picture */
.spanel__close{top:clamp(14px,1.4vw,22px)!important;bottom:auto!important;right:clamp(14px,1.4vw,22px)!important;width:46px;height:46px!important;padding:0!important;gap:0;justify-content:center;border-radius:50%!important;box-shadow:inset 0 0 0 var(--bw) var(--pink)!important;outline:none}
.spanel__close > span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.spanel__close b{width:auto!important;height:auto!important;border:0!important;box-shadow:none!important}
.spanel__close b svg{width:20px;height:20px}
.spanel__art img{max-height:min(70vh,640px,calc(100vh - 230px))}
/* 43. No extra rings: the service card keeps no outline after its pop-up closes (keyboard
   focus is shown by the banner rising instead), the pop-up has no ring, and the close
   button has only its own single pink ring */
.scard:focus,.scard:focus-visible{outline:none!important;box-shadow:none!important}
.spanel{box-shadow:none!important}
.spanel__close:focus,.spanel__close:focus-visible{outline:none!important;box-shadow:inset 0 0 0 var(--bw) var(--pink)!important}
/* 44. Sub-service and capability pages: the overview text in columns under the lead */
.sp-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,3vw,56px);margin-top:var(--sp-in);max-width:1100px}
.sp-cols--three{grid-template-columns:repeat(3,minmax(0,1fr))}
.sp-cols__h{margin:0 0 10px;font-family:var(--font-display);font-weight:600;font-size:clamp(16px,1.15vw,19px);letter-spacing:-.02em}
.sp-cols p{margin:0;font-size:15.5px;line-height:1.65;color:color-mix(in srgb,currentColor 82%,transparent)}
@media (max-width:900px){.sp-cols,.sp-cols--three{grid-template-columns:1fr}}
#overview .chips{margin-top:clamp(18px,1.6vw,26px)}
.vsec .blocks{margin-top:var(--gap)}
.vsec .intro + .blocks{margin-top:var(--sp-in)}
/* ten photos as an even grid of 4:3 tiles (five across on desktop) */
.gallery--grid{columns:auto;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--gap)}
.gallery--grid button{margin:0;aspect-ratio:4/3;border-radius:var(--r)}
.gallery--grid img{height:100%;object-fit:cover}
@media (max-width:1100px){.gallery--grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:600px){.gallery--grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* 45. Photo viewer: no caption, the menu button hidden and its place taken by the close
   button; every viewer button one white circle with a single pink ring */
.lightbox figcaption{display:none}
.lightbox{z-index:400}
.lb-open .nav{z-index:410;opacity:1!important;transform:none!important;visibility:visible!important}
.lb-open .nav .menu-btn{visibility:hidden}
.lb-open .nav .logo .logo--w{clip-path:none!important}
.lb-open .nav .logo .logo--b{visibility:hidden}
.lightbox button{border:0!important;outline:none!important}
.lightbox button:hover{background:#fff!important}
.lightbox button:focus,.lightbox button:focus-visible{outline:none!important;box-shadow:inset 0 0 0 var(--bw) var(--pink)!important}
.lightbox .lb-close{position:fixed;right:auto;margin:0;width:46px;height:46px}
.lightbox .lb-close svg{width:20px;height:20px}
.gallery button:focus{outline:none}
/* sub-service galleries: three across, as on the case studies */
.gallery--grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
@media (max-width:600px){.gallery--grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
/* the discipline film tiles on sub-pages sit on a dark grey ground */
.disc-dark .range__big,.disc-dark .intro h2,.disc-dark .tag{color:#fff}
@media (hover:hover) and (min-width:1200px){.vsec .blocks{height:clamp(230px,16vw,280px)}}
.vsec .blocks--two .block__body,.vsec .blocks--three .block__body{max-width:62ch}
/* 46. Page name under the logo, once the hero has scrolled away (every page but home).
   Small, one or two lines as in the menu, white or black to suit the background. */
.nav__page{position:absolute;left:var(--nav-x);top:calc(var(--nav-h) / 2 + clamp(13px,1.05vw,17px) + 8px);max-width:clamp(150px,13vw,210px);font-family:var(--font-display);font-weight:600;font-size:13px;line-height:1.3;letter-spacing:-.01em;text-wrap:balance;color:#1C1C1A;opacity:0;transform:translateY(-4px);transition:opacity .4s ease,transform .5s var(--ease),color .35s ease;pointer-events:none}
.nav-page-on .nav__page{opacity:1;transform:none}
.nav-p-dark .nav .nav__page{color:#fff}
.menu-open .nav .nav__page,.spanel-open:not(.lb-open) .nav .nav__page{opacity:0}
/* over the photo viewer the page name stays, in white, so the photos are labelled */
.lb-open .nav .nav__page{opacity:1;transform:none;color:#fff}
@media (max-width:700px){.nav__page{font-size:12px;max-width:170px;top:calc(var(--nav-h) / 2 + 14px + 6px)}}
/* 47. Project map: HTML pins over the map, a card that opens beside the pin, smooth zoom */
.map{overflow:hidden}
.map__svg{will-change:contents}
.map__areas path{transition:fill .6s ease,stroke .6s ease}
.map__areas path.on{fill:rgba(255,255,255,.06);stroke:rgba(255,255,255,.55)}
.map__layer{position:absolute;inset:0;z-index:2;pointer-events:none}
.map__pin,.map__hq{position:absolute;left:0;top:0;will-change:transform}
.map__pin{width:44px;height:44px;margin:-22px 0 0 -22px;padding:0;border:0;border-radius:50%;background:none;pointer-events:auto;cursor:pointer}
.map__dot{position:absolute;left:15px;top:15px;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 0 0 5px rgba(255,255,255,.14);transition:background .35s ease,box-shadow .45s var(--ease),transform .45s var(--ease)}
.map__ring{position:absolute;left:15px;top:15px;width:14px;height:14px;border-radius:50%;border:1.5px solid rgba(255,255,255,.7);animation:map-ring 2.8s cubic-bezier(.2,.7,.3,1) infinite;pointer-events:none}
.map__pin:nth-child(3n) .map__ring{animation-delay:.9s}.map__pin:nth-child(3n+1) .map__ring{animation-delay:1.8s}
@keyframes map-ring{0%{transform:scale(1);opacity:.9}100%{transform:scale(3.6);opacity:0}}
.map__pin:hover .map__dot,.map__pin:focus-visible .map__dot{transform:scale(1.25);box-shadow:0 0 0 7px rgba(255,255,255,.2)}
.map__pin.on .map__dot{background:var(--pink);transform:scale(1.3);box-shadow:0 0 0 8px rgba(236,0,140,.22)}
.map__pin.on .map__ring{border-color:var(--pink)}
.map__pin:focus{outline:none}
.map__tag{position:absolute;left:38px;top:13px;white-space:nowrap;font-family:var(--font-display);font-size:12.5px;font-weight:600;color:#fff;opacity:0;transform:translateX(-4px);transition:opacity .3s ease,transform .4s var(--ease);pointer-events:none;text-shadow:0 1px 8px rgba(0,0,0,.5)}
.map__pin:hover .map__tag{opacity:1;transform:none}
.map-open .map__pin.on .map__tag,.map-open .map__pin:hover .map__tag{opacity:0}
.map__hq{display:flex;align-items:center;gap:8px;flex-direction:row-reverse;transform-origin:0 0}
.map__hq i{width:10px;height:10px;margin-left:-5px;margin-top:-5px;border-radius:2px;background:#fff;flex:0 0 auto}
.map__hq span{position:absolute;right:12px;top:-9px;white-space:nowrap;font-family:var(--font-display);font-size:12px;font-weight:600;letter-spacing:.02em;color:rgba(255,255,255,.75)}
/* the card */
.map__pop{position:absolute;left:0;top:0;z-index:4;width:min(380px,calc(100% - 40px));overflow:hidden;border-radius:var(--r);background:#1C1C1A;color:#fff;box-shadow:0 30px 60px -20px rgba(0,0,0,.6);opacity:0;visibility:hidden;pointer-events:none;
  transition:transform .55s var(--ease),opacity .35s ease,visibility 0s linear .35s;will-change:transform}
.map__pop.on{opacity:1;visibility:visible;pointer-events:auto;transition:transform .55s var(--ease),opacity .35s ease}
.map__pop > *{transition:opacity .18s ease}
.map__pop.swap > *{opacity:0}
.map__media{position:relative;aspect-ratio:16/10;background:#2E2E2C;overflow:hidden}
.map__media img,.map__media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.map__media video{opacity:0;transition:opacity .6s ease}
.map__media video.on{opacity:1}
.map__body{padding:clamp(18px,1.5vw,24px) clamp(18px,1.5vw,24px) clamp(20px,1.6vw,26px)}
.map__where{margin:0;font-family:var(--font-sans);font-size:12.5px;font-weight:600;letter-spacing:.01em;color:rgba(255,255,255,.55)}
.map__pop .map__title{margin:6px 0 0;font-size:clamp(21px,1.6vw,26px);line-height:1.08;color:#fff}
.map__pop .map__desc{margin:10px 0 0;font-size:14.5px;line-height:1.55;font-weight:400;color:rgba(255,255,255,.78)}
.map__btn{margin-top:18px}
.map__x{position:absolute;top:12px;right:12px;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#fff;color:#1C1C1A;box-shadow:inset 0 0 0 var(--bw) var(--pink);border:0;cursor:pointer}
.map__x svg{width:16px;height:16px}
.map__x:focus{outline:none}
/* the list of projects */
.map__index{z-index:3;padding:18px 20px;border-radius:var(--r);background:rgba(28,28,26,.72);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.map__index button{padding:4px 0;align-items:center}
.map__index button b{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--pink);opacity:0;transition:opacity .3s}
.map__index button.on b{opacity:1}
.map__card{display:none}
@media (max-width:759px){
  .map__pop{left:12px;right:12px;top:auto;bottom:12px;width:auto;transform:translateY(12px)!important}
  .map__pop.on{transform:none!important}
  .map__media{aspect-ratio:16/8}
  .map__index{display:flex;left:12px;right:12px;top:12px;bottom:auto;flex-direction:row;flex-wrap:wrap;gap:4px 16px;padding:10px 14px}
  .map-open .map__index{opacity:0;pointer-events:none}
}
/* the project list sits above the map as a row of names */
.projmap .map__index{position:static;display:flex;flex-direction:row;flex-wrap:wrap;gap:8px;margin:clamp(18px,1.6vw,26px) 0 0;padding:0;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;list-style:none}
.projmap .map__index button{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:999px;background:rgba(255,255,255,.07);color:rgba(255,255,255,.75);font-family:var(--font-display);font-size:14px;font-weight:600;transition:background .3s,color .3s}
.projmap .map__index button:hover{background:rgba(255,255,255,.14);color:#fff}
.projmap .map__index button.on{background:#fff;color:#1C1C1A}
.projmap .map__index button:focus{outline:none}
.projmap .map__index button:focus-visible{box-shadow:0 0 0 2px var(--pink)}
.map{margin-top:clamp(24px,2.4vw,40px)}
@media (max-width:759px){.projmap .map__index{position:static;opacity:1!important;pointer-events:auto!important}}
/* 48. Signage service detail: the capability panel under the five service boxes */
#detail .blocks--stages{margin-top:var(--sp-in)}
@media (hover:hover) and (min-width:1200px){
  #detail .blocks.blocks--stages{height:clamp(210px,15vw,250px)}
  #detail .capx .blocks.blocks--stages{height:clamp(200px,14vw,240px)}
  #detail .blocks--stages .block__body{font-size:13.5px;line-height:1.5}
  #detail .blocks--stages .block:hover .block__body,#detail .blocks--stages .block:focus-visible .block__body{font-size:14px}
  #detail .capx__blocks .block:hover,#detail .capx__blocks .block:focus-visible{flex-grow:2.6}
}
.capx{margin-top:clamp(56px,6vw,96px);padding-top:clamp(40px,4vw,64px);border-top:1px solid rgba(255,255,255,.18)}
.capx__head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.2fr);gap:clamp(18px,3vw,56px);align-items:start}
.capx__tag{margin:0;color:rgba(255,255,255,.7)!important;font-family:var(--font-display);font-size:14px;font-weight:600;letter-spacing:0;text-transform:none}
.capx__tag::before{content:"";display:inline-block;width:8px;height:8px;margin-right:10px;border-radius:50%;background:var(--pink);vertical-align:1px}
.capx__lead{margin:0;max-width:44ch;font-family:var(--font-display);font-size:clamp(19px,1.55vw,26px);font-weight:500;line-height:1.3;letter-spacing:-.015em;color:#fff;text-wrap:balance}
.capx__foot{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:var(--gap);margin-top:var(--gap)}
.capx__list,.capx__chips{border-radius:var(--r);background:rgba(20,20,19,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);padding:clamp(20px,1.8vw,30px)}
.capx__h{margin:0 0 14px;font-family:var(--font-display);font-size:clamp(16px,1.15vw,19px);font-weight:600;letter-spacing:-.02em;color:#fff}
.capx__list ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 28px;margin:0;padding:0;list-style:none}
.capx__list li{position:relative;padding-left:20px;font-size:14.5px;line-height:1.45;color:rgba(255,255,255,.85)}
.capx__list li::before{content:"";position:absolute;left:0;top:.5em;width:8px;height:8px;border-radius:50%;box-shadow:inset 0 0 0 2px var(--pink)}
.capx__chips{display:flex;flex-wrap:wrap;align-content:flex-start;gap:8px;margin:0;list-style:none}
.capx__chips li{padding:8px 14px;border-radius:999px;background:#fff;color:#1C1C1A;font-family:var(--font-display);font-size:13.5px;font-weight:600}
@media (max-width:900px){.capx__head,.capx__foot{grid-template-columns:1fr}.capx__list ul{grid-template-columns:1fr}}
/* sector pages: three service cards and an "all services" card */
.slinks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap);margin-top:var(--sp-in)}
.slink{text-decoration:none;color:inherit}
.slink--all{position:relative;display:flex;flex-direction:column;justify-content:space-between;min-height:100%;padding:clamp(20px,1.8vw,28px);border-radius:var(--r);background:#fff;color:#1C1C1A;box-shadow:inset 0 0 0 var(--bw) var(--pink)}
.slink__all{font-family:var(--font-display);font-size:clamp(22px,1.8vw,30px);font-weight:600;line-height:1.08;letter-spacing:-.025em;text-wrap:balance}
.slink--all .scard__go{align-self:flex-end;transition:transform .6s var(--ease)}
.slink--all:hover .scard__go{transform:rotate(45deg)}
@media (max-width:1100px){.slinks{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.slinks{grid-template-columns:1fr}}
.slink--all .scard__go{position:static!important;flex:0 0 auto}
.capx__tag{border:0!important;padding:0!important;background:none!important;height:auto!important}
/* 49. The other two disciplines on each landing page: half the height of the home tiles */
@media (min-width:900px){
  .dcards.dcards--half{height:calc((100cqw - 2 * var(--gap)) / 6)}
  .dcards--half .dcard--film .dcard__title{font-size:clamp(26px,2.4vw,42px)}
  .dcards.dcards--half .dcard--film:hover .dcard__title,.dcards.dcards--half .dcard--film:focus-visible .dcard__title{font-size:clamp(30px,2.9vw,52px)}
  .dcards--half .dcard--film:hover,.dcards--half .dcard--film:focus-visible{flex-grow:1.3}
}
@media (max-width:899px){.dcards--half{grid-template-columns:repeat(2,minmax(0,1fr))!important}.dcards--half .dcard--film{aspect-ratio:2 / 1}}
@media (max-width:560px){.dcards--half{grid-template-columns:1fr!important}}
/* 50. Tabs over the extra panels on a service page */
.ptabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:clamp(28px,3vw,44px)}
.ptabs button{padding:10px 18px;border:0;border-radius:999px;background:rgba(255,255,255,.1);color:rgba(255,255,255,.8);font-family:var(--font-display);font-size:14px;font-weight:600;cursor:pointer;transition:background .3s,color .3s}
.ptabs button:hover{background:rgba(255,255,255,.18);color:#fff}
.ptabs button.on{background:#fff;color:#1C1C1A;box-shadow:inset 0 0 0 var(--bw) var(--pink)}
.ptabs button:focus{outline:none}
.ptabs button:focus-visible{box-shadow:0 0 0 2px var(--pink)}
.ppanel{display:none}
.ppanel.on{display:block;animation:ppanel-in .5s var(--ease)}
@keyframes ppanel-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
#detail .capx .blocks--five.blocks--stages{height:clamp(210px,15vw,250px)}


/* ===== 51. Mega menu photo previews ======================================================
   Hovering a service in the menu shows that service's photograph (its box photo on the
   landing page). A soft shade at the foot keeps the white caption readable on busy photos. */
.mega__art.is-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.62) 0%,rgba(0,0,0,.18) 38%,rgba(0,0,0,0) 60%);pointer-events:none}

/* ===== 52. Sector films ===================================================================
   A sector with its own film (SECTOR_FILM in build.py) shows it full bleed in its box, under
   a dark shade so the white icon and title read; the poster shows until the film plays. The
   menu preview plays the same film. */
.tile.tile--film{background:#1C1C1A;color:#fff;--cb:#1C1C1A;--cf:#fff}
.tile__film{position:absolute;inset:0;z-index:-1;overflow:hidden;border-radius:inherit}
.tile__film img,.tile__film video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.tile__film video{opacity:0;transition:opacity .8s ease,transform 1.4s var(--ease)}
.tile__film video.playing{opacity:1}
.tile__film::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.7) 0%,rgba(0,0,0,.25) 55%,rgba(0,0,0,.35) 100%)}
.tile--film:hover .tile__film img,.tile--film:hover .tile__film video{transform:scale(1.05)}
.mega__art.is-photo video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ===== 53. About page ====================================================================
   A two-part lead for "What we do", the four numbered reasons (outline numerals drawn as SVG
   with the stroke painted under the fill, so overlapping parts of a glyph never show), and the
   closing statement over the contact blocks. */
.alead{margin:0;max-width:min(1180px,82vw);font-family:var(--font-display);font-size:clamp(28px,2.9vw,56px);line-height:1.06;letter-spacing:-.022em;font-weight:var(--w-display)}
.abody{margin:clamp(22px,2vw,34px) 0 0;max-width:62ch;font-size:clamp(16px,1.15vw,19px);line-height:1.55;opacity:.8}
#what-we-do .dcards{margin-top:var(--sp-in,clamp(40px,4vw,72px))}
.why__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap,10px)}
.why__item{--wbg:#F2F2F0;--wink:#1C1C1A;position:relative;display:flex;flex-direction:column;justify-content:space-between;min-height:clamp(220px,18vw,320px);padding:clamp(20px,1.8vw,30px);border-radius:var(--r,10px);background:var(--wbg);color:var(--wink);overflow:hidden;transition:background-color .5s ease,color .5s ease}
.why__num{display:block;width:clamp(110px,11vw,210px);height:auto;overflow:visible}
.why__num text{font-family:var(--font-display);font-weight:700;font-size:118px;letter-spacing:-5px;fill:var(--wbg);stroke:var(--wink);stroke-width:3.2px;paint-order:stroke fill;stroke-linejoin:round;transition:fill .5s ease,stroke .5s ease}
.why__title{font-family:var(--font-display);font-weight:700;font-size:clamp(19px,1.5vw,27px);line-height:1.08;letter-spacing:-.025em;text-wrap:balance}
.why__title::after{content:".";color:var(--pink)}
.why__item:hover{--wbg:#1C1C1A;--wink:#fff}
.why__item:hover .why__num text{stroke:var(--pink)}
@media (max-width:900px){.why__list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.why__list{grid-template-columns:1fr}.why__item{min-height:180px}}
.cta--about .cta__title{max-width:16ch;font-size:clamp(40px,5.2vw,100px);line-height:.98;letter-spacing:-.035em}
.cta--about .cta__title::after{content:none}

/* The Sign Design Story captions: heavier so they read clearly over the film */
.cutout__cap{font-family:var(--font-display);font-weight:600;font-size:clamp(16px,1.2vw,21px);line-height:1.4;letter-spacing:-.005em;text-shadow:0 1px 14px rgba(0,0,0,.55)}

/* ===== 54. ESG page ======================================================================
   The pillar pop-ups (a card with fuller detail opens a wider panel: title, summary and photo
   on the left, paragraphs and the focus list on the right), the certificate tiles, the
   project delivery list over the ESG film and the download area. */
.spanel__more{display:none}
.spanel--rich .spanel__inner{align-items:start;align-content:center;row-gap:clamp(18px,2vw,32px);overflow-y:auto;overscroll-behavior:contain}
.spanel--rich .spanel__text{grid-column:1 / span 5;grid-row:1}
.spanel--rich .spanel__desc{max-width:34ch;color:inherit;opacity:.78}
.spanel--rich .spanel__art{grid-column:1 / span 5;grid-row:2;align-self:start;height:clamp(180px,30vh,340px);border-radius:10px;overflow:hidden}
.spanel--rich .spanel__art img{width:100%;height:100%;object-fit:cover;display:block}
.spanel--rich .spanel__more{display:block;grid-column:7 / span 6;grid-row:1 / span 2;opacity:0;transform:translateY(16px);transition:opacity .5s ease,transform .8s var(--ease)}
.spanel--rich.show .spanel__more{opacity:1;transform:none;transition-delay:.5s}
.spanel__more p{margin:0 0 1em;max-width:62ch;font-size:clamp(14px,.98vw,17px);line-height:1.55}
.spanel__more .spanel__lt{margin:clamp(18px,1.8vw,28px) 0 12px;font-family:var(--font-display);font-weight:700;font-size:clamp(16px,1.15vw,20px);letter-spacing:-.01em}
.spanel__list{list-style:none;margin:0;padding:0;counter-reset:sp;display:grid;grid-template-columns:1fr 1fr;gap:8px 18px}
.spanel__list li{counter-increment:sp;position:relative;padding:10px 0 10px 34px;border-top:1px solid color-mix(in srgb,currentColor 22%,transparent);font-size:clamp(13px,.9vw,15.5px);line-height:1.35;font-weight:500}
.spanel__list li::before{content:counter(sp,decimal-leading-zero);position:absolute;left:0;top:11px;font-family:var(--font-display);font-weight:700;font-size:12px;color:var(--pink)}
@media (max-width:900px){
  .spanel--rich .spanel__text,.spanel--rich .spanel__art,.spanel--rich .spanel__more{grid-column:1 / -1;grid-row:auto}
  .spanel--rich .spanel__art{height:200px}
  .spanel__list{grid-template-columns:1fr}
}
.scard__txt{display:flex;flex-direction:column;min-width:0}
.scard__sum{display:block;max-height:0;opacity:0;overflow:hidden;font-size:clamp(14px,1vw,17px);line-height:1.45;font-weight:500;letter-spacing:-.005em;transition:max-height .6s var(--ease),opacity .4s ease,margin .6s var(--ease)}
@media (hover:hover) and (min-width:601px){
  .scard:hover .scard__sum,.scard:focus-visible .scard__sum{max-height:12em;opacity:.85;margin-top:clamp(12px,1.1vw,18px);transition-delay:.15s}
}
/* certificates: the real certificate as a paper tile, lifting on hover */
.certs{list-style:none;margin:var(--sp-in,clamp(40px,4vw,72px)) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap,10px)}
.cert{display:flex;flex-direction:column;height:100%;border-radius:var(--r,10px);background:#3A3A37;color:#fff;overflow:hidden;text-decoration:none;transition:background-color .5s ease}
.cert__doc{position:relative;display:block;padding:clamp(22px,2.4vw,40px) clamp(30px,3.6vw,64px) 0;height:clamp(260px,24vw,400px);overflow:hidden}
.cert__doc img{display:block;width:100%;height:auto;border-radius:3px 3px 0 0;box-shadow:0 18px 40px rgba(0,0,0,.45);transform:translateY(6%);transition:transform .9s var(--ease)}
.cert:hover .cert__doc img,.cert:focus-visible .cert__doc img{transform:translateY(0) rotate(-1.2deg)}
.cert__meta{display:flex;flex-direction:column;gap:4px;padding:clamp(20px,1.8vw,30px);border-top:1px solid rgba(255,255,255,.12)}
.cert__code{font-family:var(--font-display);font-weight:700;font-size:clamp(28px,2.6vw,46px);line-height:1;letter-spacing:-.03em}
.cert__label{font-size:clamp(15px,1.05vw,18px);opacity:.75}
.cert__dl{display:inline-flex;align-items:center;gap:10px;margin-top:clamp(12px,1.2vw,18px);font-family:var(--font-display);font-weight:600;font-size:14px}
.cert__dl i{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#fff;color:#1C1C1A;box-shadow:inset 0 0 0 var(--bw,2.25px) var(--pink)}
.cert__dl svg{width:16px;height:16px}
.cert:hover{background:#1C1C1A}
@media (max-width:900px){.certs{grid-template-columns:1fr}.cert__doc{height:clamp(240px,60vw,380px)}}
/* project delivery over the film */
.plead{margin:clamp(22px,2vw,34px) 0 0;max-width:62ch;font-size:clamp(16px,1.15vw,19px);line-height:1.55;color:#fff;opacity:.9}
.plt{margin:clamp(36px,3.4vw,60px) 0 clamp(14px,1.2vw,20px);font-family:var(--font-display);font-weight:700;font-size:clamp(18px,1.3vw,22px);color:#fff}
.plist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap,10px)}
.plist li{display:flex;flex-direction:column;justify-content:space-between;gap:28px;min-height:clamp(150px,11vw,190px);padding:clamp(18px,1.5vw,24px);border-radius:var(--r,10px);background:rgba(20,20,19,.42);border:1px solid rgba(255,255,255,.16);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);color:#fff;transition:background-color .5s ease,border-color .5s ease}
.plist li:hover{background:rgba(255,255,255,.92);color:#1C1C1A;border-color:transparent}
.plist__n{font-family:var(--font-display);font-weight:700;font-size:14px;color:var(--pink)}
.plist__t{font-family:var(--font-display);font-weight:600;font-size:clamp(16px,1.15vw,20px);line-height:1.2;letter-spacing:-.015em;text-wrap:balance}
@media (max-width:900px){.plist{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.plist{grid-template-columns:1fr}.plist li{min-height:0}}
/* download area */
.dls{list-style:none;margin:var(--sp-in,clamp(40px,4vw,72px)) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap,10px)}
.dl{display:flex;flex-direction:column;justify-content:space-between;gap:26px;height:100%;min-height:clamp(190px,14vw,240px);padding:clamp(18px,1.6vw,26px);border-radius:var(--r,10px);background:#E3E3E0;color:#1C1C1A;text-decoration:none;position:relative;transition:background-color .5s ease,color .5s ease}
.dl--cert{background:#D3D3CF}
.dl__icon{width:34px;color:#1C1C1A;transition:color .5s ease}
.dl__icon svg{display:block;width:100%;height:auto}
.dl__txt{display:flex;flex-direction:column;gap:6px;padding-right:46px}
.dl__kind{font-size:12.5px;letter-spacing:.02em;opacity:.7}
.dl__title{font-family:var(--font-display);font-weight:700;font-size:clamp(18px,1.35vw,24px);line-height:1.1;letter-spacing:-.02em;text-wrap:balance}
.dl__go{position:absolute;right:clamp(18px,1.6vw,26px);bottom:clamp(18px,1.6vw,26px);display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#fff;color:#1C1C1A;box-shadow:inset 0 0 0 var(--bw,2.25px) var(--pink);transition:transform .5s var(--ease)}
.dl__go svg{width:18px;height:18px}
.dl:hover,.dl:focus-visible{background:#1C1C1A;color:#fff}
.dl:hover .dl__icon,.dl:focus-visible .dl__icon{color:#fff}
.dl:hover .dl__go,.dl:focus-visible .dl__go{transform:translateY(3px)}
@media (max-width:1100px){.dls{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.dls{grid-template-columns:1fr}.dl{min-height:0}}
#pillars .sgrid{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:767px){#pillars .sgrid{grid-template-columns:1fr}}
.spanel [data-sp-link][hidden]{display:none}
#delivery .plead,#delivery .plt{color:#fff}
.dl__txt{padding-right:0}
.dl__go{top:clamp(18px,1.6vw,26px);bottom:auto}
/* ESG: the pillar cards and their pop-ups loop a film over the poster photo */
.scard__art--photo{overflow:hidden}
.scard__art--photo video,.spanel--rich .spanel__art video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .8s ease}
.scard__art--photo video.playing,.spanel--rich .spanel__art video.playing{opacity:1}
.spanel--rich .spanel__art{position:relative}
/* the delivery statement on its own, then the approach list over the film */
#delivery .plead{color:inherit;opacity:.8}
#approach .plt{margin-top:0;color:#fff;font-size:clamp(28px,2.9vw,56px);line-height:1.06;letter-spacing:-.022em;font-weight:var(--w-display)}
#approach .plist{margin-top:var(--sp-in,clamp(40px,4vw,72px))}

/* ===== 55. Pictures in the expanding boxes ===============================================
   A box with a picture (src/assets/img/blocks/<key>) shows it faded and greyscale at rest,
   behind the box colour; when the box is hovered (and widens) the picture comes up to full
   colour with a slow push-in, under a dark shade so the white text reads. */
.block.block--img{position:relative;isolation:isolate;overflow:hidden}
.block__img{position:absolute;inset:0;z-index:-1;pointer-events:none}
.block__img img{display:block;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(.95);opacity:.2;transform:scale(1.02);transition:opacity .7s ease,filter .9s ease,transform 2.4s var(--ease)}
.block__img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,14,13,.55) 0%,rgba(14,14,13,.08) 42%,rgba(14,14,13,.72) 100%);opacity:0;transition:opacity .7s ease}
.block--img .block__title,.block--img .block__body{position:relative;transition:color .5s ease}
.blocks .block.block--img:hover,.blocks .block.block--img:focus-visible{color:#fff}
.blocks .block.block--img:hover .block__title,.blocks .block.block--img:focus-visible .block__title,
.blocks .block.block--img:hover .block__body,.blocks .block.block--img:focus-visible .block__body{color:#fff}
.blocks .block.block--img:hover .block__img img,.blocks .block.block--img:focus-visible .block__img img{filter:none;opacity:1;transform:scale(1.1)}
.blocks .block.block--img:hover .block__img::after,.blocks .block.block--img:focus-visible .block__img::after{opacity:1}
@media (hover:none){.block__img img{opacity:.32}}
@media (prefers-reduced-motion:reduce){.block__img img{transition:opacity .4s ease,filter .4s ease;transform:none!important}}

/* 56. Footer: the strapline is gone, so the Contact us button sits on the right,
   in line with the phone, email and socials beneath it */
.footer__hero{align-items:flex-end}
.footer__cta{align-items:flex-end;align-self:flex-end}
@media (max-width:767px){.footer__cta{align-items:flex-start;align-self:flex-start}}

/* 57. Service pages open straight on the title and the gallery (no hero) */
.gallery-top{padding-top:calc(var(--nav-h) + clamp(28px,4vw,64px))}
.gallery-top__title{margin:0 0 clamp(16px,1.8vw,26px);text-wrap:balance}

/* 58. Pictures in the procurement boxes ("The right credentials..."), as section 55:
   faded and greyscale at rest, full colour under a shade with white text on hover */
.ablock.ablock--img{isolation:isolate}
.ablock--img .ablock__top,.ablock--img .ablock__body{position:relative;transition:color .5s ease}
.ablock.ablock--img:hover,.ablock.ablock--img:focus-visible{color:#fff}
.ablock.ablock--img:hover .block__img img,.ablock.ablock--img:focus-visible .block__img img{filter:none;opacity:1;transform:scale(1.1)}
.ablock.ablock--img:hover .block__img::after,.ablock.ablock--img:focus-visible .block__img::after{opacity:1}
.ablock.ablock--img:hover .ablock__title,.ablock.ablock--img:focus-visible .ablock__title,
.ablock.ablock--img:hover .ablock__body,.ablock.ablock--img:focus-visible .ablock__body{color:#fff}

/* 59. Menu preview photos always fill the preview box. The box is a grid, where a
   percentage height on the photo does not resolve, so a photo of a different shape
   from the box sat short (grey band above it) or overflowed. Pinned to all four
   edges instead, and cropped to fit. */
.mega__art.is-photo{display:block;overflow:hidden}
.mega__art.is-photo img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 35%}

/* 60. A link to each section's own page (Signage, Vehicles, Interiors...) under its blurb in
   the menu. On phones the section name opens its list, so this is the way to the page. */
.mega__go{display:inline-flex;align-items:center;gap:10px;margin-top:16px;color:#fff;font-family:var(--font-display);font-weight:600;font-size:clamp(15px,1.05vw,18px);letter-spacing:-.01em}
.mega__go i{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#fff;color:#1C1C1A;box-shadow:inset 0 0 0 2.25px var(--pink);transition:transform .35s var(--ease)}
.mega__go i svg{width:13px;height:13px}
.mega__go:hover i,.mega__go:focus-visible i{transform:rotate(45deg)}
@media (max-width:900px){.mega__go{margin:4px 0 14px;font-size:15.5px}}

/* 61. The menu's solid backing only while it is open: on closing, the strips fold away
   over the page rather than a dark layer lingering behind them */
html:not(.menu-open) .mega{background:transparent}