/* /assets/home-fonts.css */
/* Official Google Fonts Latin subsets; licence notices are stored alongside them. */
@font-face {
  font-family:'Antonio'; font-style:normal; font-weight:400 600;
  font-display:swap; src:url("/assets/antonio-latin.woff2") format('woff2');
}
@font-face {
  font-family:'Chivo'; font-style:normal; font-weight:400 600;
  font-display:swap; src:url("/assets/chivo-latin.woff2") format('woff2');
}
@font-face {
  font-family:'Fragment Mono'; font-style:normal; font-weight:400;
  font-display:swap; src:url("/assets/fragment-mono-latin.woff2") format('woff2');
}

/* /design-tokens.css */
/* Cloudfusion shell tokens. Client artwork never inherits a colour treatment. */
:root {
  --cf-night: #080b12;
  --cf-ink: #edf3fa;
  --cf-surface: #111722;
  --cf-surface-raised: #101622;
  --cf-surface-deep: #0d121c;
  --cf-muted: #a8b6c9;
  --cf-label: #91a8c6;
  --cf-line: #29364a;
  --cf-blue: #019edb;
  --cf-light: var(--cf-service-build, #67ddff);
  --cf-violet: var(--cf-service-improve, #a7abff);
  --cf-frost: #e2ebf1;
  --cf-emphasis: #9fb4d2;
  --cf-display: 'Antonio', 'Arial Narrow', sans-serif;
  --cf-body: 'Chivo', sans-serif;
  --cf-mono: 'Fragment Mono', monospace;
  --cf-rail-home: 1800px;
  --cf-rail-story: 1740px;
  --cf-rail-reading: 1560px;
  --cf-rail-media: 2300px;
  --cf-gutter: clamp(20px, 4vw, 110px);
  --cf-section-space: clamp(56px, 5vw, 100px);
  --cf-radius-media: 8px;
  --cf-radius-panel: 12px;
  --cf-radius-story: 18px;
  --cf-radius-pill: 999px;
  --cf-ease: cubic-bezier(.22, 1, .36, 1);
}
/* Lenis moves the real document. Never combine it with CSS smooth scroll. */
html.lenis, html.lenis body {height: auto}
html.lenis {scroll-behavior: auto !important}
.lenis-stopped {overflow: hidden}
.lenis-smooth iframe {pointer-events: none}

/* The reversed official symbol already contains white + brand blue. */
.site-header .brand-symbol,.gallery-header .gallery-brand .brand-symbol {filter:none}

/* Shared accessible status text, including pages without the legacy base CSS. */
.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}

/* /cinematic-direction.css */
/* The same manufactured world, optical light and editorial motion on home + every case. */
.kinetic-mask{display:inline-block;overflow:clip;vertical-align:bottom;padding-bottom:.12em;margin-bottom:-.12em}
.kinetic-mask>span{display:inline-block;--word-progress:clamp(0,calc(var(--kinetic-progress,1)*1.65 - var(--kinetic-i)*.045),1);transform:translate3d(calc((1 - var(--word-progress))*-.16em),calc((1 - var(--word-progress))*110%),0) rotate(calc((1 - var(--word-progress))*3deg));opacity:var(--word-progress)}
body[data-page=home] .cf-hero-heading{translate:var(--hero-slide,0px) 0;opacity:calc(1 - var(--hero-depart,0)*.75)}
body[data-page=home] .cf-hero-art>.cinematic-portal{inset:-12% -17%;z-index:0;transform:perspective(1600px) rotateX(calc((1 - var(--cinema-enter,1))*8deg)) scale(calc(.96 + var(--cinema-enter,1)*.04));opacity:calc(.75 - var(--hero-depart,0)*.22)}
body[data-page=home] .chapter-bar:before{width:calc(58px + var(--seam-progress,1)*20%)}
body[data-page=home] .cf-story-card{background:radial-gradient(ellipse at 85% 15%,#15354c80,transparent 60%),linear-gradient(135deg,#151e2c,#090e18 70%);box-shadow:inset 0 1px 0 #a9c8ed45,inset 0 -2px 0 color-mix(in srgb, var(--cf-blue) 20.0%, transparent),0 35px 65px -30px #02050dcc}
/* The card is one reflective surface. No lighting rectangle around the model. */
body[data-page=home] .cf-story-art:before,body[data-page=home] .cf-story-art:after{content:none}
body[data-page=home] .cf-story-card-content{position:relative;z-index:1}
body[data-page=home] .cf-story-card:after{z-index:0;background:none;pointer-events:none}
body[data-page=home] .cf-card-light{position:absolute;inset:0;border-radius:inherit;overflow:hidden;z-index:0;pointer-events:none}
body[data-page=home] .cf-card-sheen{position:absolute;inset:-30% -55%;pointer-events:none;
 background:radial-gradient(ellipse at 65% 35%,#67ddff10,transparent 65%),linear-gradient(112deg,transparent 25%,#67ddff18 45%,#bfe9ff10 49%,#8276ff08 55%,transparent 75%);
 transform:translate3d(var(--optic-shift-x,0%),var(--optic-shift-y,0%),0);
 opacity:max(var(--optic-hover,0),var(--optic-scroll-light,0),var(--assembly-light,0));}
html:not([data-story-pointer=on]) body[data-page=home] .cf-card-sheen{display:none}
/* Separate pane layers preserve the authored SVG assembly transforms. */
body[data-page=home] .cf-story-art [data-story-parallax=dark]{transform:translate(calc(var(--story-pointer-art-x,0px)*.32),calc(var(--story-pointer-art-y,0px)*.32))}
body[data-page=home] .cf-story-art [data-story-parallax=light]{transform:translate(var(--story-pointer-art-x,0px),var(--story-pointer-art-y,0px))}
html:not([data-story-pointer=on]) .cf-story-card,
.cf-story-frame.is-story-focused .cf-story-card{--story-pointer-rx:0deg!important;--story-pointer-ry:0deg!important;--story-pointer-art-x:0px!important;--story-pointer-art-y:0px!important}
@media (prefers-reduced-motion:reduce),(hover:none),(pointer:coarse),(forced-colors:active){
 body[data-page=home] .cf-card-sheen{display:none}
 .cf-story-card{--story-pointer-rx:0deg!important;--story-pointer-ry:0deg!important;--story-pointer-art-x:0px!important;--story-pointer-art-y:0px!important}
}
body[data-page=home] .cf-story-art-label{background:#080e18db;color:#c7d9ee;border:1px solid #54728a40;border-bottom-color:color-mix(in srgb, var(--cf-blue) 50.2%, transparent);border-radius:2px;padding:5px 7px;font-size:clamp(8px,.65vw,11px)}
body[data-page=home] .brand{min-height:44px;display:inline-flex;align-items:center}
body[data-page=home] .site-header .talk-link{min-height:44px}

body[data-experience=cinematic]{--night:var(--cf-night);--case-gutter:max(var(--cf-gutter),var(--safe-left,0px),var(--safe-right,0px));--case-width:var(--cf-rail-reading);--case-media-width:var(--cf-rail-media);--case-space:var(--cf-section-space);background:var(--cf-night);color:var(--cf-ink);color-scheme:dark;font-family:var(--cf-body)}
html:has(body[data-experience=cinematic]){background:var(--cf-night);color-scheme:dark}
body[data-experience=cinematic] :is(h1,h2,h3,.cinema-title strong){font-family:var(--cf-body);font-weight:500}
body[data-experience=cinematic] em{font-family:inherit;font-style:normal;color:var(--cf-emphasis)}
body[data-experience=cinematic] :is(.eyebrow,.cinema-title>span,.cinema-note,.scene-caption,.reveal-index,.browser-bar){font-family:var(--cf-mono)}
body[data-experience=cinematic] .gallery-header{background:color-mix(in srgb, var(--cf-night) 90.98%, transparent);border-color:var(--cf-line)}
body[data-experience=cinematic] .gallery-brand{min-height:44px;align-items:center}
body[data-experience=cinematic] .case-cinema{padding-top:140px;position:relative;padding-bottom:40px;overflow:clip;margin-bottom:15px}
body[data-experience=cinematic] .cinema-stage{perspective:1800px;max-width:1500px;padding-top:25px;isolation:isolate}
body[data-experience=cinematic] .cinema-screen{width:min(88%,calc((100svh - 400px)*var(--cinema-ratio,1.77778)));margin:auto;position:relative;border-radius:var(--cf-radius-media);transform:rotateX(calc(var(--cinema-tilt,0)*1deg)) rotateY(calc(var(--cinema-tilt,0)*-.6deg)) scale(var(--cinema-scale,1))!important;transform-origin:center;box-shadow:0 45px 70px -20px #000b,0 0 0 1px color-mix(in srgb, var(--cf-light) 20.78%, transparent),0 0 70px color-mix(in srgb, var(--cf-blue) 4.71%, transparent);opacity:1!important}
body[data-experience=cinematic] .cinema-title{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;margin:24px 6% 0;gap:12px 20px;transform:translateX(calc(var(--cinema-x,0)*1px))!important;opacity:var(--cinema-opacity,1)!important}
body[data-experience=cinematic] .cinema-title>span{grid-column:1/-1}
body[data-experience=cinematic] .cinema-title strong{font-size:clamp(52px,7.2vw,110px);line-height:1.02;color:var(--cf-ink)}
body[data-experience=cinematic] .cinema-title a{align-self:center;font-size:11px}
body[data-experience=cinematic] .cinema-title>span,body[data-experience=cinematic] .cinema-note{color:#8fb4da}
body[data-experience=cinematic] .cinema-title a{color:var(--cf-light);min-height:44px;display:inline-flex;align-items:center}
body[data-experience=cinematic] .cinema-note{margin-left:6%;font-size:9px}
.cinematic-portal{position:absolute;inset:-14% -5% 10%;z-index:-1;pointer-events:none;transform:translateZ(calc((1 - var(--cinema-enter,1))*-180px)) rotateX(calc((1 - var(--cinema-enter,1))*10deg));opacity:.85}
.cinematic-portal svg{width:100%;height:100%;overflow:visible}
.cinematic-portal path{vector-effect:non-scaling-stroke;stroke-width:1}
.portal-back{stroke:#5b83a54d}
.cinematic-portal .portal-energy{vector-effect:none;stroke:var(--cf-blue);stroke-width:2;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--cinema-enter,1));filter:drop-shadow(0 0 4px var(--cf-light)) drop-shadow(0 0 14px var(--cf-blue))}
.portal-violet{stroke:var(--cf-violet);filter:drop-shadow(0 0 7px var(--cf-violet))}
body[data-experience=cinematic] .case-opening{padding-top:65px;min-height:0;padding-bottom:45px}
body[data-experience=cinematic] .opening-copy h1{font-size:clamp(44px,4.7vw,88px);line-height:1.05}
body[data-experience=cinematic] :is(.opening-bottom p,.section-heading>p,.flow-step p,.delivery-scope p){color:var(--cf-muted)}
body[data-experience=cinematic] .case-brief{background:radial-gradient(ellipse at 100% 0,color-mix(in srgb, var(--cf-blue) 6.27%, transparent),transparent 65%),#101722;color:var(--cf-ink);border:1px solid var(--cf-line)}
body[data-experience=cinematic] .case-delivery{background:linear-gradient(130deg,#141e2c,#0c111b);border-color:var(--cf-line)}
body[data-experience=cinematic] :is(.case-brief em,.brief-scope,.case-brief .eyebrow,.delivery-tech dt,.delivery-tech small,.flow-note,.flow-step small){color:var(--cf-label)}
body[data-experience=cinematic] :is(.case-brief,.case-delivery,.flow-runway):before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--cf-light),var(--cf-violet),transparent);transform:scaleX(var(--seam-progress,1));transform-origin:left;pointer-events:none}
body[data-experience=cinematic] .flow-runway{position:relative;border-color:var(--cf-line)}
body[data-experience=cinematic] .flow-step:before{box-shadow:0 0 0 5px var(--cf-night),0 0 18px color-mix(in srgb, var(--cf-blue) 25.1%, transparent)}
body[data-experience=cinematic] .cinematic-surface:after{content:'';position:absolute;inset:0;pointer-events:none;z-index:4;background:radial-gradient(ellipse at var(--optic-x,50%) var(--optic-y,50%),color-mix(in srgb, var(--cf-light) 12.55%, transparent),transparent 55%);opacity:var(--optic-hover,0);mix-blend-mode:screen}
body[data-experience=cinematic] .browser-bar{background:linear-gradient(#222d3b,#111923);color:#9bb2cf}
body[data-experience=cinematic] .case-next{background:#111925;color:var(--cf-ink);border-top:1px solid var(--cf-line)}
body[data-experience=cinematic] .case-next .eyebrow{color:var(--cf-label)}
body[data-experience=cinematic] .case-tools>button{background:#0e1522ec;color:var(--cf-muted);border-color:var(--cf-line)}
body[data-experience=cinematic] .screen-dialog{background:var(--cf-night);border-color:var(--cf-line)}

/* The same shell extends to proof captions, PWA devices and local enquiries. */
body[data-experience=cinematic] :is(.case-brief,.case-delivery){border-radius:var(--cf-radius-panel)}
body[data-experience=cinematic] :is(.gallery-header .back,.project-launch,.screen-dialog form button,.enquiry-actions button[type=submit]){background:var(--cf-ink);color:var(--cf-night);border-color:var(--cf-ink);border-radius:var(--cf-radius-pill)}
body[data-experience=cinematic] .project-launch:hover{background:var(--cf-light);border-color:var(--cf-light)}
body[data-experience=cinematic] :is(.eyebrow,.scene-caption,.flow-note,.flow-step small,.app-showcase-note,.app-showcase-phone figcaption span,.reveal-index){color:var(--cf-label)}
body[data-experience=cinematic] :is(.reveal-heading p,.proof-focus p,.app-showcase-copy p,.app-showcase-features p,.enquiry-context,.enquiry-help){color:var(--cf-muted)}
body[data-experience=cinematic] :is(.proof-focus strong,.app-showcase-features strong,.app-showcase-phone figcaption strong,.enquiry-context strong,.enquiry-form label){color:var(--cf-ink)}
body[data-experience=cinematic] :is(.delivery-tech,.brief-columns>div+div,.delivery-scope>div+div,.delivery-tech dl>div,.flow-step,.case-close,.enquiry-dialog,.enquiry-actions button){border-color:var(--cf-line)}
body[data-experience=cinematic] :is(.chapter-compass,.enquiry-dialog){background:var(--cf-surface);border-color:var(--cf-line)}
body[data-experience=cinematic] .case-tools .chapter-compass a{color:var(--cf-muted)}
body[data-experience=cinematic] .case-tools .chapter-compass a[aria-current]{color:var(--cf-light)}
body[data-experience=cinematic] :is(.enquiry-form textarea,.enquiry-form select,.enquiry-copy){background:var(--cf-night);border-color:var(--cf-line);color:var(--cf-ink)}
body[data-experience=cinematic] :is(.enquiry-close,.enquiry-form textarea::placeholder,.enquiry-form label span){color:var(--cf-label)}
body[data-experience=cinematic] .enquiry-status{color:var(--cf-light)}
body[data-experience=cinematic] .case-handoff{background:var(--cf-surface);color:var(--cf-ink);font-family:var(--cf-display);letter-spacing:-.012em;text-transform:uppercase}
body[data-experience=cinematic] .case-next-meter{background:var(--cf-line)}
body[data-experience=cinematic] :focus-visible{outline-color:var(--cf-light)}

@media(max-width:950px),(max-height:600px){
 body[data-experience=cinematic] .case-cinema{padding-top:130px;padding-bottom:20px}
 body[data-experience=cinematic] .cinema-stage{padding-top:12px}
 body[data-experience=cinematic] .cinema-screen{width:100%;transform:none!important}
 body[data-experience=cinematic] .cinema-title{margin:30px 0 0;grid-template-columns:1fr}
 body[data-experience=cinematic] .cinema-note{margin-left:0}
 .cinematic-portal{inset:-15% -15% 20%;opacity:.5}
 body[data-experience=cinematic] .case-opening{padding-top:30px;padding-bottom:0}
}
@media(max-width:600px){
 body[data-experience=cinematic] .cinema-title strong{font-size:clamp(42px,11vw,66px)}
 body[data-experience=cinematic] .cinema-title>span{font-size:8px;line-height:1.6}
 body[data-experience=cinematic] .case-opening h1{font-size:clamp(38px,10vw,58px)}
 body[data-page=home] .cf-story-art-label{font-size:8px;padding:3px 4px}
}
@media(max-height:600px) and (min-width:700px){
 body[data-experience=cinematic] .case-cinema{padding-top:125px}
 body[data-experience=cinematic] .cinema-stage{display:grid;grid-template-columns:minmax(0,1fr) minmax(200px,.6fr);gap:18px 5%;align-items:center;padding-top:0}
 body[data-experience=cinematic] .cinema-title{grid-column:2;grid-row:1;grid-template-columns:1fr;margin:0}
 body[data-experience=cinematic] .cinema-title strong{font-size:clamp(38px,4.5vw,72px)}
 body[data-experience=cinematic] .cinema-note{grid-column:2;margin:0}
 .cinematic-portal{inset:-10% -5% 0;opacity:.35}
}
html[data-cinematic-mode=off] .kinetic-mask>span{transform:none;opacity:1}
html[data-cinematic-mode=off] body[data-page=home] .cf-hero-heading{translate:none;opacity:1}
html[data-cinematic-mode=off] .cinematic-portal{transform:none}
html[data-cinematic-mode=off] .cinematic-surface:after{display:none}
html[data-cinematic-mode=off] body[data-page=home] .cf-story-card:after{display:block;background:none}
@media(prefers-reduced-motion:reduce){.kinetic-mask>span{transform:none!important;opacity:1!important}.cinematic-portal{transform:none!important}body[data-page=home] .cf-hero-heading{translate:none!important;opacity:1!important}}

/* Quiet fallbacks keep the artwork and copy fully visible. */
html:is([data-cinematic-mode=quiet],[data-cinematic-mode=off]) body[data-page=home] .cf-hero-art>.cinematic-portal{transform:none;opacity:.4}
html[data-visual-quality=balanced] body[data-page=home] .portal-energy{filter:none}
html[data-visual-quality=lite] body[data-page=home] .portal-energy{filter:none}