/* glass-v2.css: glass and crystal system (MVP-261105-02, A-014, design direction v1.2 addendum sections 1-2).
   Loaded after chrome-v2.css and home-v2.css on every page. Animates transform and opacity only.
   Motion runs only under html.motion-ok (set in <head> when prefers-reduced-motion is not "reduce"). */
:root{
  --ink:#0B0F12;--ink-raised:#141A1F;--ink-high:#1C232A;--void:#06080A;
  --glass-teal:#2E7F8F;--glass-teal-deep:#174652;--glass-amber:#F0B43F;--glass-amber-deep:#B9741C;--glass-clear:#DDE8EE;
  --glass-tint:rgba(20,26,31,.80);--glass-tint-fallback:rgba(20,26,31,.92);
  --glass-sheen:linear-gradient(180deg,rgba(255,255,255,.07) 0%,rgba(255,255,255,.02) 38%,rgba(255,255,255,0) 60%);
  --glass-ghost:rgba(255,255,255,.04);--glass-blur:18px;--glass-saturate:140%;
  --edge:rgba(255,255,255,.14);--edge-hi:inset 0 1px 0 rgba(255,255,255,.22);--edge-lo:inset 0 -1px 0 rgba(0,0,0,.45);--edge-side:inset 1px 0 0 rgba(255,255,255,.06);
  --edge-focus:0 0 0 3px #F0B43F;
  --reflect-floor:linear-gradient(180deg,rgba(240,180,63,.16) 0%,rgba(240,180,63,0) 70%);
  --specular:linear-gradient(105deg,rgba(255,255,255,0) 35%,rgba(255,255,255,.18) 48%,rgba(255,255,255,0) 60%);
  --glow-amber:radial-gradient(60% 50% at 50% 100%,rgba(240,180,63,.22),rgba(240,180,63,0) 70%);
  --glow-teal:radial-gradient(55% 60% at 20% 30%,rgba(46,127,143,.24),rgba(46,127,143,0) 70%);
  --glow-cap:.28;
  --shadow-1:0 1px 2px rgba(0,0,0,.5),0 8px 24px rgba(0,0,0,.35);--shadow-2:0 2px 4px rgba(0,0,0,.5),0 18px 48px rgba(0,0,0,.45);
  --r-chip:999px;--r-btn:999px;--r-sm:12px;--r-card:22px;--r-media:20px;--r-stage:28px;
  --ease-glass:cubic-bezier(.22,.61,.36,1);--ease-sweep:cubic-bezier(.45,0,.2,1);--ease-loop:cubic-bezier(.37,0,.63,1);
}

/* ---------- components ---------- */
.glass{position:relative;background:var(--glass-sheen),var(--glass-tint);-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturate));backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturate));border:1px solid var(--edge);box-shadow:var(--edge-hi),var(--edge-lo),var(--edge-side),var(--shadow-1);border-radius:var(--r-card)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.glass{background:var(--glass-sheen),var(--glass-tint-fallback)}}
.glass--raised{box-shadow:var(--edge-hi),var(--edge-lo),var(--edge-side),var(--shadow-2)}
.glass--raised::before{content:"";position:absolute;left:12%;right:12%;top:-1px;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);pointer-events:none}
.glass-stage{position:relative;background:var(--glow-amber),var(--glow-teal),var(--void);border-radius:var(--r-stage);overflow:hidden;border:1px solid rgba(255,255,255,.08);box-shadow:var(--edge-hi),var(--shadow-1)}
.glass-ghost{background:var(--glass-ghost);border:1px solid var(--edge);border-radius:var(--r-card)}
.reflect{position:relative}
.reflect::after{content:"";position:absolute;left:10%;right:10%;bottom:0;height:24%;background:var(--reflect-floor);opacity:.35;pointer-events:none;-webkit-mask-image:linear-gradient(#000,transparent 70%);mask-image:linear-gradient(#000,transparent 70%)}
.home-v2 .btn-primary{box-shadow:var(--edge-hi)}
.home-v2 .btn-secondary{box-shadow:inset 0 0 0 1px var(--edge)}
.home-v2 .chip{background:var(--glass-sheen),var(--glass-tint);border-color:var(--line-ui);box-shadow:var(--edge-hi)}

/* glass icons */
.gi{display:inline-block;width:40px;height:40px;flex:none;overflow:visible;vertical-align:middle}
.gi-56{width:56px;height:56px}
.ico-h{display:flex;align-items:center;gap:12px}
.ico-h .gi{margin-top:-2px}

/* tabs in a glass capsule; active tab is a raised pill */
.home-v2 .tablist{background:var(--glass-sheen),var(--glass-tint);border:1px solid var(--edge);box-shadow:var(--edge-hi),var(--edge-lo);padding:4px;gap:4px;overflow:visible}
.home-v2 .tablist [role=tab]{border-left:0;border-radius:999px}
.home-v2 .tablist [role=tab][aria-selected=true]{background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.06)),var(--ink-high);color:var(--on-dark);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 -2px 0 var(--amber),var(--shadow-1)}

/* text-bearing panels on the homepage take the glass recipe */
.home-v2 .price-block,.home-v2 .addon,.home-v2 .own,.home-v2 .process-foot,.home-v2 .card-text{background:var(--glass-sheen),var(--glass-tint);border:1px solid var(--edge);box-shadow:var(--edge-hi),var(--edge-lo),var(--edge-side),var(--shadow-1);border-radius:var(--r-card)}
.home-v2 .card-text{padding:var(--s5)}
.home-v2 .process-foot{padding:var(--s5)}
.home-v2 .panel.is-active .price-block,.home-v2 .card-feature .card-text{box-shadow:var(--edge-hi),var(--edge-lo),var(--edge-side),var(--shadow-2)}

/* homepage process steps: glass icon with its step number */
.home-v2 .step-n{position:relative;display:block;width:40px;height:40px}
.home-v2 .step-n b{position:absolute;right:-8px;bottom:-6px;font-size:.875rem;line-height:1;font-weight:600;color:var(--on-dark);background:var(--ink);border:1px solid var(--edge);border-radius:999px;padding:2px 6px}
.home-v2 .steps li:not(:last-child)::before{left:19px;top:50px;background:linear-gradient(180deg,rgba(240,180,63,.5),rgba(46,127,143,.35))}
.home-v2 .final .gi-56{width:64px;height:64px}

/* ---------- hero (Layer 1 SVG crystal, Layer 2 deferred video) ---------- */
.hero-stage{position:relative;width:100%;max-width:540px;aspect-ratio:3/2;margin-inline:auto}
.hero-stage .crystal,.hero-stage .hero-video{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero-stage .hero-video{object-fit:cover;opacity:0;transition:opacity 400ms var(--ease-glass)}
.hero-stage.has-video .hero-video{opacity:1}
.motion-toggle{display:none;margin:12px 0 0 auto;min-height:44px;padding:0 18px;border-radius:999px;background:transparent;color:var(--on-dark-muted);border:1px solid var(--line-ui);font:500 .9375rem/1 var(--font);cursor:pointer}
.motion-ok .motion-toggle{display:flex}
.motion-toggle[aria-pressed=true]{color:var(--on-dark);border-color:var(--on-dark-muted)}
.hero-art{max-width:540px;margin-left:auto}
.cr-bands{opacity:.8}
.motion-ok .cr-sweep{animation:crSweep 6s var(--ease-sweep) infinite alternate}
.motion-ok .cr-bands{animation:crBreath 8s var(--ease-loop) infinite alternate}
@keyframes crSweep{from{transform:skewX(-18deg) translateX(-40px)}to{transform:skewX(-18deg) translateX(560px)}}
@keyframes crBreath{from{opacity:.6}to{opacity:.9}}
.motion-paused .cr-sweep,.motion-paused .cr-bands,.sample-playing .cr-sweep,.sample-playing .cr-bands,.hero-stage.off .cr-sweep,.hero-stage.off .cr-bands{animation-play-state:paused}

/* ---------- video slots (motion studies) ---------- */
.vframe{display:grid;gap:var(--s4);align-content:start}
.vslot{position:relative;width:100%;border-radius:var(--r-media);overflow:hidden;background:var(--glow-amber),var(--glow-teal),var(--void);border:1px solid rgba(255,255,255,.08);box-shadow:var(--edge-hi),var(--shadow-1)}
.vslot::before{content:"";position:absolute;left:8%;right:8%;top:0;height:1px;z-index:2;background:linear-gradient(90deg,transparent,rgba(255,255,255,.9),transparent);opacity:.35;transition:opacity 400ms var(--ease-glass);pointer-events:none}
.vslot.r-16x9{aspect-ratio:16/9}.vslot.r-9x16{aspect-ratio:9/16}.vslot.r-3x2{aspect-ratio:3/2}
.vslot .still,.vslot video,.vslot .device{position:absolute;inset:0;width:100%;height:100%}
.vslot .still{object-fit:contain;padding:6%}
.vslot video{object-fit:cover;background:transparent}
.vslot.fallback video{display:none}
.vframe.no-media .if-media,.vframe.no-media .vctl{display:none}
.vctl{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px}
.vbtn{display:none;align-items:center;gap:10px;min-height:44px;padding:0 18px 0 8px;border-radius:999px;background:var(--glass-sheen),var(--glass-tint);color:var(--on-dark);border:1px solid var(--line-ui);box-shadow:var(--edge-hi);font:500 .9375rem/1.2 var(--font);cursor:pointer;text-align:left}
.js .vbtn{display:inline-flex}
.vbtn .gi{width:32px;height:32px}
.vbtn[aria-pressed=true]{border-color:var(--amber-light)}
.vbtn:hover{border-color:var(--on-dark)}
.vdl{font-size:.875rem}
.lit .vslot::before{opacity:.9}
.reel{display:grid;gap:var(--s7)}
.reel .vframe{transition:opacity 400ms var(--ease-glass)}
.motion-ok .reel.spot .vframe:not(.lit){opacity:.7}

/* device concept drawing (homepage card 2): skeleton bars build once on entry */
.vslot .device{padding:4%}
.device .sk{transform-box:fill-box;transform-origin:left center}
.motion-ok .dev-slot:not(.go) .sk{transform:scaleX(0)}
.motion-ok .dev-slot.go .sk{animation:skIn 420ms var(--ease-glass) both;animation-delay:calc(var(--i) * 230ms)}
@keyframes skIn{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* trust visual (homepage) */
.trust-stage{aspect-ratio:4/5;width:min(100%,416px);margin-inline:auto}
.trust-stage svg{position:absolute;inset:0;width:100%;height:100%}

/* ---------- inner pages (shared) ---------- */
.page .page-head{padding-block:var(--s8) var(--s6)}
.page .page-head .lede{margin-top:var(--s4)}
.page .page-head h1{max-width:16em}
.page section.chapter{padding-block:var(--s7)}
.page .panel-pad{padding:var(--s5)}
.page .stack{display:grid;gap:var(--s4);justify-items:start}
.page .stack>p,.page .stack>ul{max-width:36em}
.page .note{color:var(--on-dark-muted);font-size:.875rem;margin-top:var(--s6)}
@media(min-width:640px){.page .panel-pad{padding:var(--s6)}}

/* what-i-do: service cards = glass stage strip + glass panel */
.svcs{display:grid;gap:var(--s7);margin-top:var(--s6)}
.svc{display:grid;gap:var(--s4)}
.svc-strip{display:flex;align-items:center;justify-content:center;min-height:120px;padding:var(--s5)}
.svc-strip .gi-56{width:96px;height:96px}
.svc-strip.has-art,.svc-strip.icon-only{aspect-ratio:16/9;min-height:0}
.svc-strip .strip-art,.svc-strip .device{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:5%}
.svc-strip.has-art .gi-56{position:absolute;left:14px;bottom:14px;width:56px;height:56px;z-index:1}
.svc-strip.icon-only{padding:0}
.svc-strip.icon-only .gi-56{width:auto;height:60%;aspect-ratio:1}
.svc h2{font-size:clamp(1.5rem,1rem + 1.2vw,2rem);line-height:1.15}
.page .stack>.price-block{justify-self:stretch;width:100%;max-width:36em}
.svc .eyebrow{font-size:.875rem;font-weight:500;color:var(--on-dark-muted)}
.svc h3{font-size:1.25rem}
@media(min-width:900px){.svc{grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:24px;align-items:start}.svc-strip,.svc-strip.has-art,.svc-strip.icon-only{aspect-ratio:4/3;min-height:0;position:sticky;top:96px}}
.gi-asm .L4{opacity:0}
.motion-ok .gi-asm:not(.go) .L1{transform:translate(-12px,6px);opacity:0}
.motion-ok .gi-asm:not(.go) .L2{transform:translate(12px,-6px);opacity:0}
.motion-ok .gi-asm:not(.go) .L3{transform:translate(0,-12px);opacity:0}
.motion-ok .gi-asm.go .L1,.motion-ok .gi-asm.go .L2,.motion-ok .gi-asm.go .L3{animation:asmIn 700ms var(--ease-glass) both}
.motion-ok .gi-asm.go .L1{--fx:-12px;--fy:6px}
.motion-ok .gi-asm.go .L2{--fx:12px;--fy:-6px;animation-delay:80ms}
.motion-ok .gi-asm.go .L3{--fx:0px;--fy:-12px;animation-delay:160ms}
.motion-ok .gi-asm.go .L4{animation:glint 500ms var(--ease-sweep) 860ms both}
@keyframes asmIn{from{transform:translate(var(--fx),var(--fy));opacity:0}to{transform:none;opacity:1}}
@keyframes glint{0%{transform:translateX(-10px);opacity:0}40%{opacity:.7}100%{transform:translateX(36px);opacity:0}}

/* how-it-works: the light path */
.lp{list-style:none;padding:0;margin:var(--s6) 0 0;display:grid;gap:0;max-width:44rem}
.lp li{position:relative;display:grid;grid-template-columns:56px minmax(0,1fr);gap:var(--s4);padding-bottom:var(--s6)}
.lp li:last-child{padding-bottom:0}
.lp .seg{position:absolute;left:27px;top:60px;bottom:4px;width:1.5px;background:linear-gradient(180deg,#F0B43F,#2E7F8F);transform-origin:top;border-radius:1px}
.lp li:last-child .seg{display:none}
.lp .step-ico{transition:opacity 300ms var(--ease-glass)}
.lp .glass{padding:var(--s4) var(--s5)}
.lp h2{font-size:1.375rem;line-height:1.2}
.lp p{margin-top:var(--s2);color:var(--on-dark-muted)}
.motion-ok .lp li:not(.go) .seg{transform:scaleY(0)}
.motion-ok .lp li:not(.go) .step-ico{opacity:.45}
.motion-ok .lp li .seg{transition:transform 600ms var(--ease-sweep)}
.qa{display:grid;gap:var(--s3);margin-top:var(--s6);max-width:48rem}
.qa details{padding:0 var(--s5);border-radius:var(--r-sm)}
.qa summary{min-height:52px;display:flex;align-items:center;gap:12px;cursor:pointer;font-weight:500}
.qa summary .gi{width:32px;height:32px}
.qa details p{padding-bottom:var(--s4);color:var(--on-dark-muted);max-width:40em}

/* work page */
.page .reel .vframe .label{display:grid;gap:var(--s3);justify-items:start;padding:var(--s5)}
@media(min-width:1024px){.page .reel .vframe{grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:24px;align-items:center}}
.logo-row{display:grid;gap:var(--s5)}
.logo-row .vslot{max-width:540px}
@media(min-width:900px){.logo-row{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:24px;align-items:center}}

/* about: glass pane over the approved photo; values and places */
.values,.places{display:grid;gap:var(--s4);margin-top:var(--s6)}
@media(min-width:768px){.values{grid-template-columns:repeat(3,minmax(0,1fr))}.places{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1100px){.places{grid-template-columns:repeat(4,minmax(0,1fr))}}
.values .glass,.places .glass{padding:var(--s5);display:grid;gap:var(--s3);align-content:start}
.values h2{font-size:1.375rem}
.places h3{font-size:1.25rem}
.route{display:block;width:100%;height:auto;margin-top:var(--s6)}
.letter{display:grid;gap:var(--s6);align-items:center}
@media(min-width:900px){.letter{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}}
.pane{position:relative;margin:0;border-radius:var(--r-stage);overflow:hidden;border:1px solid var(--edge);box-shadow:var(--edge-hi),var(--shadow-2);max-width:460px}
.pane img{display:block;width:100%;height:auto}
.pane::before{content:"";position:absolute;left:-10%;top:-10%;width:46%;height:40%;background:linear-gradient(135deg,rgba(255,255,255,.14),rgba(255,255,255,0) 70%);pointer-events:none}
.pane::after{content:"";position:absolute;inset:0;background:var(--specular);opacity:0;transform:translateX(-120%);pointer-events:none}
.motion-ok .pane.go::after{animation:paneSweep 1.4s var(--ease-sweep) both}
@keyframes paneSweep{0%{transform:translateX(-120%);opacity:1}100%{transform:translateX(120%);opacity:1}}
.btns2{display:flex;flex-wrap:wrap;gap:12px}
.paper{max-width:44rem;display:grid;gap:var(--s4)}
.paper .sign{font-weight:600}
.label{font-size:.875rem;font-weight:500;color:var(--on-dark-muted)}

/* contact: glass form shell; the edge light travels once round the focused field */
@property --a{syntax:"<angle>";initial-value:0deg;inherits:false}
@property --o{syntax:"<number>";initial-value:0;inherits:false}
.contact-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s6);margin-top:var(--s6)}
.contact-grid>*{box-sizing:border-box;min-width:0;max-width:100%}
.contact-grid a,.contact-grid .sent p,.facts span{overflow-wrap:anywhere}
@media(min-width:900px){.contact-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:start}}
.form{display:grid;gap:var(--s4)}
.form label{display:grid;gap:8px;font-weight:500}
.form input,.form textarea{width:100%;font:400 1.0625rem/1.4 var(--font);color:var(--on-dark);background:var(--ink-high);border:1px solid var(--line-ui);border-radius:var(--r-sm);padding:12px 14px;min-height:48px}
.form textarea{resize:vertical}
.form input:focus-visible,.form textarea:focus-visible,.form input:focus,.form textarea:focus{outline:3px solid var(--amber);outline-offset:2px}
.motion-ok .form input:focus,.motion-ok .form textarea:focus{background:linear-gradient(var(--ink-high),var(--ink-high)) padding-box,conic-gradient(from var(--a),rgba(255,212,122,0) 0deg,rgba(255,212,122,0) 290deg,rgba(255,212,122,var(--o)) 340deg,rgba(255,212,122,0) 360deg) border-box;border-color:transparent;animation:edgeRun 450ms var(--ease-sweep) 1 both}
@keyframes edgeRun{from{--a:0deg;--o:1}80%{--o:1}to{--a:360deg;--o:0}}
.form .note{margin-top:0}
.facts{list-style:none;margin:0;padding:var(--s5);display:grid;gap:var(--s4)}
.facts li{display:grid;grid-template-columns:40px minmax(0,1fr);gap:12px;align-items:center}
.sent{margin-top:var(--s4);padding:var(--s5);display:grid;gap:var(--s3);justify-items:start}
.sent button{min-height:44px;padding:0 18px;border-radius:999px;background:transparent;color:var(--amber-light);border:1.5px solid var(--amber-light);font:500 1rem/1 var(--font);cursor:pointer}
.prose{max-width:44rem;display:grid;gap:var(--s3)}
.prose h2{font-size:1.375rem;margin-top:var(--s5)}

/* reduced motion: everything static (motion-ok is never set, this is a second guard) */
@media(prefers-reduced-motion:reduce){
  .cr-sweep,.cr-bands,.sk,.gi-asm *,.pane::after,.form input,.form textarea{animation:none!important}
  .lp .seg,.lp .step-ico,.reel .vframe,.vslot::before,.hero-stage .hero-video{transition:none!important}
  .lp .seg{transform:none!important}.lp .step-ico{opacity:1!important}
}

/* A-015 to A-017: film posters as a still under the video (shown if the video cannot play) */
.vslot .still.poster{padding:0;object-fit:cover}

/* A-018 combination: showcase moments (showreel, Motion., One film. Every screen.), sound button, film labels */
.vsnd{padding:0 18px}.vsnd.on{border-color:var(--amber-light)}
.film-label{display:grid;gap:var(--s3);justify-items:start}
.film-label p{margin:0;font-size:.9375rem;line-height:1.5;color:var(--on-dark-muted)}
.film-label.centre{justify-items:center;text-align:center}
.film-label.centre .vctl{justify-content:center}
.home-v2 .show-h{font-size:clamp(2.25rem,1.5rem + 3vw,4rem);line-height:1.07;letter-spacing:-.02em;font-weight:600;margin:0 0 var(--s6);max-width:none;text-wrap:balance}
.home-v2 .show-h.centre,.home-v2 .showreel .show-h{text-align:center}
.home-v2 .showreel,.home-v2 .motion-moment,.home-v2 .screens{background:var(--void)}
.home-v2 .reel-film,.home-v2 .mm-film,.home-v2 .devs-frame{max-width:68rem;margin-inline:auto;gap:var(--s5)}
@media(max-width:767px){.home-v2 .sr-slot{aspect-ratio:9/16;width:min(100%,calc(78vh * 9 / 16));margin-inline:auto}}
.home-v2 .motion-moment .giant{margin:0;text-align:center;font-weight:600;letter-spacing:-.03em;line-height:1;font-size:clamp(2.5rem,1.6rem + 4.4vw,6rem);background:linear-gradient(180deg,#fff 0%,#DDE8EE 55%,rgba(221,232,238,.35) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.home-v2 .motion-moment .giant span{color:var(--glass-amber);-webkit-text-fill-color:var(--glass-amber)}
.home-v2 .motion-moment .show-sub{text-align:center;font-size:clamp(1.25rem,2.6vw,1.75rem);font-weight:600;margin:var(--s3) 0 var(--s6);max-width:none}
.devs{display:flex;align-items:flex-end;justify-content:center;gap:clamp(12px,3vw,40px)}
.dev-tab{flex:1 1 auto;max-width:52rem;padding:clamp(8px,1.4vw,16px);border-radius:clamp(16px,2vw,28px);background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.03));border:1px solid var(--edge);box-shadow:var(--edge-hi),var(--shadow-2)}
.dev-tab .vslot{border-radius:clamp(8px,1vw,14px)}
.dev-phn{flex:0 0 auto;width:clamp(84px,17vw,200px);aspect-ratio:9/16;padding:clamp(5px,.8vw,10px);border-radius:clamp(14px,2.4vw,30px);background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.03));border:1px solid var(--edge);box-shadow:var(--edge-hi),var(--shadow-2)}
.dev-phn video{width:100%;height:100%;object-fit:cover;border-radius:clamp(10px,1.8vw,22px);background:var(--void);display:block}
.svc-strip.svc-film{aspect-ratio:auto!important;display:grid;gap:var(--s3);align-content:start;padding:12px;position:static!important;background:var(--glass-ghost);border:1px solid var(--edge);border-radius:var(--r-card)}
.svc-strip.svc-film .film-label{padding:4px 6px 6px}