/* LUMIÈRE 1.4 features: shared-element morph, light lab, stacked projects,
   3D tilt, film grain, opening "lights on" and quick contact. */

/* ---------- shared element: the card photo flies into the detail page ---------- */
::view-transition-group(*){animation-duration:.6s;animation-timing-function:cubic-bezier(.22,1,.36,1)}
::view-transition-old(*):only-child,::view-transition-new(*):only-child{animation-duration:.3s}
::view-transition-image-pair(*){isolation:isolate}

/* ---------- film grain (static noise, moved in steps so it costs almost nothing) ---------- */
.grain{position:relative}
.grain::after,.lslider::after,.cta::after{content:"";position:absolute;inset:-50%;z-index:7;pointer-events:none;opacity:.07;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1.4 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation:lm-grain 1s steps(6) infinite}
.no-grain .grain::after,.no-grain .lslider::after,.no-grain .cta::after{display:none}
@keyframes lm-grain{0%{transform:translate(0,0)}20%{transform:translate(-4%,3%)}40%{transform:translate(3%,-5%)}60%{transform:translate(-2%,4%)}80%{transform:translate(5%,1%)}100%{transform:translate(0,0)}}

/* ---------- light lab ---------- */
.lab{background:var(--surface);border-block:1px solid var(--line)}
.lab-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,64px);align-items:center}
@media (max-width:900px){.lab-grid{grid-template-columns:1fr}}
.lab-copy .sec-head{display:block}
.lab-copy .sec-head h2{margin:10px 0 14px}
.lab-scenes{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.lab-scene{cursor:pointer;padding:9px 14px}
.lab-scene[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.lab-ctrl{display:grid;gap:8px;margin-bottom:18px}
.lab-ctrl label{display:flex;justify-content:space-between;align-items:baseline;font-size:var(--t-label);font-weight:700;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--mut)}
.lab-ctrl label b{font-size:var(--t-body);color:var(--fg);letter-spacing:0;text-transform:none}
.lab-ctrl input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:6px;border:0;padding:0;border-radius:3px;background:linear-gradient(90deg,#ff9a3c,#ffc27a 28%,#fff1de 58%,#dfe9ff);cursor:pointer}
#lab-b{background:linear-gradient(90deg,#1a1a1a,rgb(var(--lab-rgb,255,190,120)))}
.lab-ctrl input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:var(--bg);border:2px solid var(--accent);box-shadow:0 2px 10px rgba(0,0,0,.3)}
.lab-ctrl input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--bg);border:2px solid var(--accent)}
.lab-scale{display:flex;justify-content:space-between;font-size:var(--t-label);color:var(--mut)}
.lab-hint{color:var(--mut);font-size:var(--t-small)}
.lab-stage{position:relative;margin:0;overflow:hidden;aspect-ratio:16/9;max-width:100%;background:#000;border:1px solid var(--line)}
.lab-stage picture,.lab-stage img{display:block;width:100%;height:100%}
.lab-img{object-fit:cover;filter:brightness(var(--lab-br,.8)) saturate(var(--lab-sat,1)) contrast(1.04);transition:filter .5s cubic-bezier(.22,1,.36,1)}
.lab-tint,.lab-glow{position:absolute;inset:0;pointer-events:none;transition:background .5s cubic-bezier(.22,1,.36,1),opacity .5s}
.lab-tint{background:rgb(var(--lab-tint,255,200,140));mix-blend-mode:soft-light;opacity:var(--lab-tint-o,.6)}
.lab-glow{background:radial-gradient(circle at var(--ox) var(--oy),rgba(var(--lab-rgb,255,190,120),var(--lab-glow,.5)),transparent 46%);mix-blend-mode:screen}
.lab-read{position:absolute;left:14px;bottom:12px;z-index:8;display:flex;gap:10px}
.lab-read span{font-size:var(--t-label);font-weight:700;letter-spacing:.08em;color:#fff;background:rgba(0,0,0,.45);backdrop-filter:blur(6px);padding:6px 9px}

/* ---------- stacked projects ---------- */
.pstack{display:grid;gap:clamp(18px,3vh,32px);padding-bottom:4vh}
.pstack-card{--sp:0;position:sticky;top:calc(88px + var(--i) * 18px);display:block;height:min(72vh,640px);min-height:380px;overflow:hidden;text-decoration:none;color:#fff;
  border:1px solid var(--line);transform-origin:50% 0;transform:scale(calc(1 - var(--sp) * .07));filter:brightness(calc(1 - var(--sp) * .5));will-change:transform}
.head-hide .pstack-card{top:calc(24px + var(--i) * 18px)}
.pstack-card .scene{position:absolute;inset:0;aspect-ratio:auto;height:100%;border:0}
.pstack-card .scene img{transition:transform 1.2s cubic-bezier(.22,1,.36,1)}
.pstack-card:hover .scene img{transform:scale(1.04)}
.pstack-card .scene .cap{display:none}
.pstack-shade{position:absolute;inset:0;background:linear-gradient(0deg,rgba(5,7,9,.85),rgba(5,7,9,.15) 55%,rgba(5,7,9,0));z-index:2}
.pstack-copy{position:absolute;left:0;right:0;bottom:0;z-index:3;display:grid;gap:8px;padding:clamp(20px,3vw,40px)}
.pstack-copy .eyebrow{color:#d8c2a0}
.pstack-title{font-size:var(--t-h1);line-height:1.1;letter-spacing:-.02em}
.pstack-meta{font-size:var(--t-small);color:rgba(255,255,255,.75)}
.pstack-more{justify-self:start;margin-top:8px;font-size:var(--t-label);font-weight:700;letter-spacing:var(--ls-label);text-transform:uppercase;border-bottom:1px solid currentColor;padding-bottom:4px}
@media (max-width:760px){.pstack-card{height:62vh;top:calc(72px + var(--i) * 12px)}}

/* ---------- 3D tilt on product cards ---------- */
.fx-tilt .pcard .stage{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .7s cubic-bezier(.22,1,.36,1),border-color .3s}
.fx-tilt .pcard .stage.tilting{transition:transform .12s linear,border-color .3s}
.fx-tilt .pcard .stage::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;transition:opacity .4s;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.18) var(--gl,50%),transparent 70%)}
.fx-tilt .pcard:hover .stage::before{opacity:1}

/* ---------- opening: lights on ---------- */
.intro{display:none}
.intro-on .intro{position:fixed;inset:0;z-index:500;display:grid;place-items:center;align-content:center;gap:18px;background:#0f1011;color:#f3f2f0;
  animation:intro-out .8s cubic-bezier(.65,0,.35,1) 1.15s forwards}
.intro-dot{width:14px;height:14px;border-radius:50%;background:#d8c2a0;box-shadow:0 0 0 0 rgba(232,196,140,.6);animation:intro-dot 1.1s cubic-bezier(.22,1,.36,1) both}
.intro-name{font-size:.9rem;letter-spacing:.6em;padding-left:.6em;text-transform:uppercase;opacity:0;animation:intro-name .8s cubic-bezier(.22,1,.36,1) .35s forwards}
@keyframes intro-dot{0%{transform:scale(.2);opacity:0;box-shadow:0 0 0 0 rgba(232,196,140,0)}50%{opacity:1}100%{transform:scale(1);box-shadow:0 0 60px 30px rgba(232,196,140,.35)}}
@keyframes intro-name{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes intro-out{to{clip-path:circle(0% at 50% 50%);visibility:hidden}}
.intro-on .intro{clip-path:circle(150% at 50% 50%)}
@media (prefers-reduced-motion:reduce){.intro{display:none!important}}

/* ---------- quick contact ---------- */
.qc{position:fixed;left:calc(16px + env(safe-area-inset-left,0px));bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:80;display:grid;gap:10px}
.qc-btn{position:relative;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--accent);color:var(--on-accent);text-decoration:none;
  box-shadow:0 8px 24px -8px rgba(0,0,0,.45);transition:transform .4s cubic-bezier(.22,1,.36,1)}
.qc-btn:hover{transform:scale(1.08)}
.qc-btn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.qc-zalo{background:#0068ff;color:#fff}.qc-fb{background:#1877f2;color:#fff}.qc-mail{background:var(--surface-2);color:var(--fg)}
.qc-phone::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--accent);animation:qc-ring 2.2s ease-out infinite}
@keyframes qc-ring{0%{transform:scale(1);opacity:.8}100%{transform:scale(1.7);opacity:0}}
.qc-btn span{position:absolute;left:58px;white-space:nowrap;font-size:var(--t-small);background:var(--fg);color:var(--bg);padding:7px 11px;opacity:0;transform:translateX(-6px);pointer-events:none;transition:.3s}
.qc-btn:hover span,.qc-btn:focus-visible span{opacity:1;transform:none}
@media (max-width:600px){.qc{gap:8px}.qc-btn{width:44px;height:44px}}
@media (prefers-reduced-motion:reduce){.qc-phone::after{animation:none}}

/* =====================================================================
   1.5: technology visuals and a new scroll set
   ===================================================================== */
.tech .viz{height:auto;min-height:80px}
.tech .chips{gap:6px}

/* colour rendering meter */
.cri-meter{position:relative;width:100%;padding-top:26px}
.cri-meter .spectrum{height:10px}
.cri-mark{position:absolute;top:0;bottom:16px;width:0;border-left:2px solid var(--fg)}
.cri-mark b{position:absolute;top:0;right:6px;white-space:nowrap;font-size:var(--t-label);font-weight:700;letter-spacing:.06em;color:var(--fg);line-height:1}
.cri-scale{display:flex;justify-content:space-between;margin-top:6px;font-size:var(--t-label);color:var(--mut)}

/* spotlight lens */
.lens{width:auto;height:80px;max-width:100%;overflow:visible}
.lens-house{fill:#14181b;stroke:color-mix(in srgb,var(--fg) 25%,transparent);stroke-width:1}
.lens-bevel{fill:#06080a;stroke:#2c3237;stroke-width:2}
.lens-rings circle{fill:none;stroke:rgba(255,255,255,.22);stroke-width:.8}
.lens-led{fill:#fff4e0;filter:drop-shadow(0 0 6px rgb(var(--glow)))}
.lens-spec{fill:none;stroke:rgba(255,255,255,.55);stroke-width:1.6;stroke-linecap:round}
.lens-cut{fill:#14181b;stroke:color-mix(in srgb,var(--fg) 25%,transparent);stroke-width:1}
.lens-cav{fill:#06080a}
.lens-chip{fill:#fff4e0;filter:drop-shadow(0 0 4px rgb(var(--glow)))}
.lens-tir{fill:rgba(var(--glow),.28);stroke:rgba(255,255,255,.35);stroke-width:.8}
.lens-cutoff{stroke:var(--mut);stroke-width:1;stroke-dasharray:3 3;fill:none}
.lens text{font:700 7px var(--f-body);letter-spacing:.06em;fill:var(--mut)}
.lens-rings{transform-origin:40px 40px;transition:transform 1.2s cubic-bezier(.22,1,.36,1)}
.tech>div:hover .lens-rings{transform:rotate(90deg) scale(1.04)}
.tech>div:hover .lens-led{filter:drop-shadow(0 0 10px rgb(var(--glow))) drop-shadow(0 0 20px rgba(var(--glow),.7))}

/* slider settles into a rounded frame */
.fx-hs .lslider{--hs:0;clip-path:inset(0 calc(var(--hs) * var(--gut)) calc(var(--hs) * 6vh) round calc(var(--hs) * 28px));will-change:clip-path}
.fx-hs .lslider .ls-ui{translate:0 calc(var(--hs) * -6vh)}
.fx-hs .lslider .ls-track{scale:calc(1 - var(--hs) * .05);opacity:calc(1 - var(--hs) * .35)}
.fx-hs .lslider .ls-copy{translate:0 calc(var(--hs) * -60px)}

/* projects: the room takes on a soft champagne glow while they pass (text keeps its colours) */
.pzone{--dim:0;--dim-bg:#ece3d4;--dim-glow:226,186,128;position:relative;
  background:radial-gradient(ellipse 70% 45% at 50% 0,rgba(var(--dim-glow),calc(var(--dim) * .22)),transparent 70%),color-mix(in srgb,var(--dim-bg) calc(var(--dim) * 100%),transparent)}
:root[data-theme="dark"] .pzone{--dim-bg:#1f1b17}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .pzone{--dim-bg:#1f1b17}}

/* process: a line of light switches each step on */
.fx-steps li{position:relative;border-top-color:var(--line)}
.fx-steps li::after{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;background:linear-gradient(90deg,var(--accent),rgb(var(--glow)));
  transform-origin:0 50%;transform:scaleX(var(--f,0));box-shadow:0 0 12px rgba(var(--glow),calc(var(--f,0) * .8))}
.fx-steps li::before{transition:color .5s,text-shadow .5s;color:var(--mut)}
.fx-steps li.lit::before{color:var(--accent);text-shadow:0 0 14px rgba(var(--glow),.7)}
.fx-steps li h3{transition:color .5s}
.fx-steps li:not(.lit) h3{color:color-mix(in srgb,var(--fg) 55%,transparent)}

/* card grids lean into fast scrolling */
/* skew now set inline on visible grids */

/* large photos open like a window */
.fx-ex{--ex:1;clip-path:inset(calc((1 - var(--ex)) * 9%) calc((1 - var(--ex)) * 12%) round calc((1 - var(--ex)) * 36px))}
.fx-ex img{scale:calc(1 + (1 - var(--ex)) * .16)}

@media (prefers-reduced-motion:reduce){
  .fx-hs .lslider,.fx-ex{clip-path:none}
  .fx-skew .grid,.fx-skew .tech{transform:none}
}

/* =====================================================================
   1.6: photography across home, about and news
   ===================================================================== */
/* news cards */
.ncard{border-top:0;padding-top:0}
.ncard-media{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--surface-2);margin-bottom:6px}
.ncard-media picture,.ncard-media img{display:block;width:100%;height:100%}
.ncard-media img{object-fit:cover;transition:transform 1.1s cubic-bezier(.22,1,.36,1),filter .6s}
.ncard:hover .ncard-media img{transform:scale(1.05);filter:brightness(1.06)}
.feature .stage.has-photo picture{position:absolute;inset:0}

/* page hero and article hero */
.page-hero,.post-hero{margin:0 0 clamp(28px,4vw,56px);overflow:hidden;background:var(--surface-2)}
.page-hero{aspect-ratio:21/9}
.page-hero picture,.page-hero img,.post-hero picture,.post-hero img{display:block;width:100%;height:100%;object-fit:cover}
.post-hero{aspect-ratio:16/9}
@media (max-width:700px){.page-hero{aspect-ratio:4/3}}

/* home: story */
.story-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:center}
@media (max-width:900px){.story-grid{grid-template-columns:1fr}}
.story-media{position:relative;padding:0 clamp(40px,7vw,96px) clamp(40px,6vw,80px) 0}
.story-media figure{margin:0;overflow:hidden;background:var(--surface-2)}
.story-media img{display:block;width:100%;height:100%;object-fit:cover}
.story-big{aspect-ratio:4/5}
.story-small{position:absolute;right:0;bottom:0;width:44%;aspect-ratio:4/5;border:8px solid var(--bg);box-shadow:0 30px 60px -30px rgba(40,30,20,.45)}
.story-copy .sec-head{display:block;margin-bottom:20px}
.story-copy .sec-head h2{margin-top:10px;max-width:16ch}
.story-copy h2 em{font-style:italic;color:var(--accent)}
.story-text{color:var(--mut);font-size:var(--t-lead);max-width:52ch;margin-bottom:28px}
.story-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin:0 0 32px;border-top:1px solid var(--line)}
.story-facts>div{padding:18px 12px 0 0}
.story-facts dt{font-size:var(--t-h2);line-height:1.1;color:var(--fg)}
.story-facts dd{margin:6px 0 0;font-size:var(--t-small);color:var(--mut)}
@media (max-width:520px){.story-facts{grid-template-columns:1fr 1fr}}

/* call to action on a photograph */
.cta.has-bg{isolation:isolate;color:#f4f3f1;--fg:#f4f3f1;--mut:rgba(245,239,229,.75);--line:rgba(245,239,229,.35);--accent:#d8c2a0;--on-accent:#1c1a17;padding-block:clamp(90px,13vw,170px)}
.cta.has-bg .cta-bg,.cta.has-bg picture{position:absolute;inset:0;width:100%;height:100%;z-index:-2}
.cta.has-bg .cta-bg{object-fit:cover}
.cta.has-bg::before{inset:0;height:auto;z-index:-1;background:linear-gradient(90deg,rgba(15,12,9,.82),rgba(15,12,9,.45) 60%,rgba(15,12,9,.25))}
.cta.has-bg .btn.ghost{color:#f4f3f1;border-color:rgba(245,239,229,.45)}

/* about: gallery */
.gal-grid{display:grid;grid-template-columns:1.05fr 1fr 1fr;grid-template-rows:auto auto;gap:clamp(14px,2vw,24px)}
.gal-item{margin:0;display:grid;gap:12px;align-content:start}
.gal-img{overflow:hidden;background:var(--surface-2)}
.gal-img picture,.gal-img img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.22,1,.36,1)}
.gal-item:hover .gal-img img{transform:scale(1.04)}
.gal-0{grid-row:1/3}.gal-0 .gal-img{aspect-ratio:auto;height:100%;min-height:420px}
.gal-1{grid-column:2/4}.gal-1 .gal-img{aspect-ratio:2/1}
.gal-2 .gal-img,.gal-3 .gal-img{aspect-ratio:4/3}
.gal-item figcaption{display:grid;gap:2px}
.gal-item figcaption b{font-weight:400;font-size:var(--t-h4)}
.gal-item figcaption span{font-size:var(--t-small);color:var(--mut)}
.about-gal h2 em{font-style:italic;color:var(--accent)}
.gal-0{display:grid;grid-template-rows:1fr auto}
@media (max-width:820px){.gal-grid{grid-template-columns:1fr 1fr}.gal-0{grid-row:auto;grid-column:1/3}.gal-0 .gal-img{min-height:0;aspect-ratio:4/3}.gal-1{grid-column:1/3}}
@media (max-width:520px){.gal-grid{grid-template-columns:1fr}.gal-0,.gal-1{grid-column:auto}}

/* technology row: four visuals share one height and one baseline, so titles line up */
.tech .viz{height:92px;min-height:0;display:flex;align-items:flex-end;margin-bottom:6px}
.tech .viz>*{width:100%}
.tech .viz .chips{align-content:flex-end}
.tech .viz .lens{width:auto;height:84px}
.cct-meter{padding-top:0}
.cct-meter .cct-bar{height:10px}
.cct-meter .cct-bar::after{content:none}
.tech .cri-scale{margin-top:8px}
.tech{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1100px){.tech{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px}}
@media (max-width:600px){.tech{grid-template-columns:1fr}}

/* home: component brands strip */
.brands{padding-top:clamp(48px,7vw,88px);padding-bottom:clamp(8px,2vw,16px)}
.brands-head{display:flex;justify-content:center;text-align:center}
.brands-head .eyebrow{color:var(--mut)}
.brands-mq{border:0;background:transparent;padding-block:clamp(22px,3vw,34px);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.brands-mq .mq-row{align-items:center}
.brand{position:relative;flex:none;display:flex;align-items:center;justify-content:center;height:64px;padding:0 clamp(30px,4vw,60px)}
.brand+.brand::before{content:"";position:absolute;left:0;top:50%;width:1px;height:26px;margin-top:-13px;background:var(--line)}
.brand img{display:block;height:34px;width:auto;max-width:190px;object-fit:contain;filter:grayscale(1) contrast(1.05);opacity:.58;transition:filter .5s,opacity .5s,transform .5s cubic-bezier(.22,1,.36,1)}
.brand-tall img{height:54px}
.brand-name{font-size:1.05rem;line-height:1;font-weight:700;letter-spacing:.22em;padding-left:.22em;transform:none;text-transform:uppercase;color:var(--fg);opacity:.5;transition:opacity .5s,color .5s;white-space:nowrap}
.brand:hover img{filter:none;opacity:1;transform:scale(1.04)}
.brand:hover .brand-name{opacity:1;color:var(--accent)}
:root[data-theme="dark"] .brand img{filter:grayscale(1) brightness(2.2) contrast(.9);opacity:.55}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .brand img{filter:grayscale(1) brightness(2.2) contrast(.9);opacity:.55}}
:root[data-theme="dark"] .brand:hover img{filter:none;opacity:1}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .brand:hover img{filter:none;opacity:1}}
@media (max-width:600px){.brand{height:52px;padding:0 26px}.brand img{height:26px}.brand-tall img{height:42px}.brand-name{font-size:1.05rem}}

/* technology row v2: every visual sits in the same framed tile, centred */
.tech .viz{height:118px;min-height:0;padding:18px 20px;margin-bottom:12px;display:flex;align-items:center;justify-content:center;background:var(--bg);border:1px solid var(--line)}
.tech .viz>*{width:100%}
.tech .viz .chips{justify-content:center;align-content:center;gap:6px}
.tech .viz .chip{padding:6px 9px}
.tech .viz .lens{width:auto;height:78px}
.tech .viz .cri-meter{padding-top:22px}
.tech .viz .cct-meter{padding-top:22px}
.tech .cri-scale{margin-top:7px}

/* tool cards: links share one baseline at the foot of each card */
.tool{display:flex;flex-direction:column;gap:14px}
.tool p{flex:1 1 auto}
.tool .link-arrow{align-self:flex-start;margin-top:10px}
.tools{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:860px){.tools{grid-template-columns:1fr}}

/* product photos: counter, arrows, thumbnails */
#pimg{transition:opacity .28s ease}
#pimg.is-swapping{opacity:0}
.pgal-nav{position:absolute;right:14px;bottom:14px;z-index:4;display:flex;align-items:center;gap:4px;padding:4px;background:rgba(18,15,12,.5);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.14)}
.pgal-btn{width:34px;height:34px;display:grid;place-items:center;border:0;background:none;color:#f4f3f1;cursor:pointer;transition:background .25s}
.pgal-btn:hover{background:rgba(255,255,255,.12)}
.pgal-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.pgal-count{min-width:44px;text-align:center;font-size:12px;letter-spacing:.06em;color:#f4f3f1}
.pthumbs{list-style:none;margin:0;padding:2px;display:flex;gap:8px;overflow-x:auto;scrollbar-width:thin}
.pthumb{display:block;width:72px;height:72px;padding:0;border:1px solid var(--line);background:var(--surface-2);cursor:pointer;opacity:.55;transition:opacity .3s,border-color .3s;overflow:hidden}
.pthumb img{display:block;width:100%;height:100%;object-fit:cover}
.pthumb:hover{opacity:.85}
.pthumb[aria-current="true"]{opacity:1;border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
@media (min-width:901px){.pdp-media.has-thumbs .stage{height:min(calc(100svh - 250px),calc((100vw - 2*var(--gut)) * .5 * 1.05));max-height:calc(100svh - 250px)}}

/* specification table: compact rows */
.spec-table{font-size:var(--t-small)}
.spec-table th,.spec-table td{padding:8px 12px 8px 0;line-height:1.45;vertical-align:baseline}
.spec-table th{width:34%;font-size:11px!important;letter-spacing:.1em;font-weight:700;color:var(--mut)}
.spec-table td{font-family:var(--f-body);font-size:var(--t-small);color:var(--fg)}
.spec-table tr:nth-child(even) th,.spec-table tr:nth-child(even) td{background:color-mix(in srgb,var(--surface-2) 35%,transparent)}
.spec-table th{padding-left:10px}

/* =====================================================================
   Forms and contact: one control height, one rhythm
   ===================================================================== */
.form{gap:18px}
.row2{gap:18px;align-items:end}
.field{gap:8px}
.field label{line-height:1.2;margin:0}
.form input:not([type=checkbox]):not([type=radio]):not([type=range]),.form select,.news-form input,.searchform input{height:48px;padding:0 14px;font-size:15px;line-height:1.2;border-radius:0}
.form select,.sim-f select{-webkit-appearance:none;appearance:none;padding-right:40px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a7f74' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:16px}
.form textarea{min-height:140px;padding:12px 14px;font-size:15px;line-height:1.55;resize:vertical}
.form .btns{margin-top:2px}
.form .btn{height:48px;padding-block:0}
.contact-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(20px,3vw,40px);align-items:stretch}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr}}
.contact-card{background:var(--surface);border:1px solid var(--line);padding:clamp(22px,3vw,36px);min-width:0}
.contact-info{display:flex;flex-direction:column;gap:22px}
.contact-info .pdp-h{font-size:var(--t-h4);margin:0 0 6px}
.contact-info p{color:var(--mut)}
.contact-info .facts{margin:0}
.contact-info .facts dd{font-size:var(--t-lead)}

/* contact facts: stacked so long emails never collide */
.contact-info .facts{grid-template-columns:1fr}
.contact-info .facts>div{padding:12px 0}
.contact-info .facts dd{font-size:var(--t-body);word-break:break-word}

/* eyebrow line takes no room until it draws, so every eyebrow starts on the same edge */
.fx-head .eyebrow,.fx-head .is-style-lm-eyebrow{gap:0}
.fx-head .eyebrow::before,.fx-head .is-style-lm-eyebrow::before{width:0;margin-right:0;transform:none;transition:width .4s ease,margin-right .4s ease}
.fx-head.is-in .eyebrow::before,.fx-head.is-in .is-style-lm-eyebrow::before{width:28px;margin-right:12px;transform:none;transition:width 1s var(--ease-out) .15s,margin-right 1s var(--ease-out) .15s}

/* articles: one centred reading column; the photo keeps the full width */
article>.page-head,article>.prose,article>.entry.prose,article>.sources{max-width:760px;margin-inline:auto}
article>.page-head h1{max-width:none!important}
.single-post .wrap>article>header.page-head{max-width:760px;margin-inline:auto}

/* newsletter: field and button share one height */
.news-form .btn{height:48px;padding-block:0}
.news-form{align-items:stretch}

/* =====================================================================
   Tools v2: illustrated cards
   ===================================================================== */
.tools2{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,28px)}
@media (max-width:980px){.tools2{grid-template-columns:1fr;max-width:620px}}
.tool2{position:relative;display:flex;flex-direction:column;background:var(--bg);border:1px solid var(--line);text-decoration:none;color:inherit;overflow:hidden;
  transition:transform .7s cubic-bezier(.22,1,.36,1),box-shadow .7s cubic-bezier(.22,1,.36,1),border-color .4s}
.tool2:hover{transform:translateY(-6px);box-shadow:0 30px 60px -34px rgba(60,40,20,.45);border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}
.tool2-vis{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--surface-2);border-bottom:1px solid var(--line)}
.tool2-body{display:flex;flex-direction:column;gap:10px;padding:clamp(20px,2.4vw,30px);flex:1}
.tool2-n{font-size:var(--t-label);letter-spacing:.14em;color:var(--accent);font-weight:700}
.tool2 h3{font-size:var(--t-h3);transition:color .3s}
.tool2:hover h3{color:var(--accent)}
.tool2 p{color:var(--mut);font-size:var(--t-small);flex:1}
.tool2 .link-arrow{align-self:flex-start;margin-top:6px}
.tool2:hover .link-arrow{background-size:0 1px;background-position:100% 100%}

/* schedule mock: rows slide in one by one, the total glows */
.tv-sched{position:absolute;inset:18px;display:flex;flex-direction:column;gap:6px;padding:14px;background:var(--surface);border:1px solid var(--line);box-shadow:0 18px 40px -26px rgba(60,40,20,.5);font-size:11px}
.tv-sched-h{display:flex;justify-content:space-between;align-items:center;padding-bottom:8px;border-bottom:1px solid var(--line);font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:12px;color:var(--mut)}
.tv-sched-h i{width:28px;height:6px;border-radius:3px;background:var(--line)}
.tv-row{display:grid;grid-template-columns:28px 1fr auto auto;align-items:center;gap:10px;padding:3px 0;border-bottom:1px solid color-mix(in srgb,var(--line) 60%,transparent);
  opacity:.35;transform:translateX(-8px);transition:opacity .5s cubic-bezier(.22,1,.36,1) calc(var(--k) * 90ms),transform .6s cubic-bezier(.22,1,.36,1) calc(var(--k) * 90ms),background .3s}
.tv-row img{width:28px;height:28px;object-fit:cover;display:block}
.tv-name{display:flex;flex-direction:column;line-height:1.25;color:var(--mut)}
.tv-name b{color:var(--fg);font-weight:600;font-size:12px}
.tv-q{color:var(--mut)}.tv-w{font-weight:600;min-width:46px;text-align:right}
.tv-total{margin-top:auto;display:flex;justify-content:space-between;align-items:baseline;padding-top:8px;border-top:1px solid var(--line);color:var(--mut)}
.tv-total b{font-size:16px;font-weight:600;color:var(--accent);transition:text-shadow .6s}
.tool2.is-in .tv-row,.tool2:hover .tv-row{opacity:1;transform:none}
.tool2:hover .tv-row:nth-child(3){background:color-mix(in srgb,var(--accent) 10%,transparent)}
.tool2:hover .tv-total b{text-shadow:0 0 18px rgba(var(--glow),.8)}

/* 3D mock: the render slowly drifts, the lux pin pulses */
.tv-sim{position:absolute;inset:0;background:#0f1011}
.tv-sim picture,.tv-sim img{display:block;width:100%;height:100%;object-fit:cover}
.tv-sim img{transform:scale(1.04);transition:transform 1.6s cubic-bezier(.22,1,.36,1)}
.tool2:hover .tv-sim img{transform:scale(1.12) translateY(-2%)}
.tv-pin{position:absolute;display:flex;align-items:center;gap:8px;transform:translate(-6px,-50%)}
.tv-pin i{width:10px;height:10px;border-radius:50%;background:#ddcbb0;box-shadow:0 0 0 0 rgba(232,211,174,.7);animation:tv-ping 2.2s ease-out infinite}
.tv-pin b{font-size:11px;font-weight:400;color:#f3ece0;background:rgba(16,13,10,.62);border:1px solid rgba(227,203,164,.35);padding:3px 8px;backdrop-filter:blur(4px)}
@keyframes tv-ping{0%{box-shadow:0 0 0 0 rgba(232,211,174,.7)}100%{box-shadow:0 0 0 14px rgba(232,211,174,0)}}
.tv-chip{position:absolute;left:12px;top:12px;font-size:10.5px;letter-spacing:.04em;color:rgba(243,236,224,.85);background:rgba(16,13,10,.55);padding:4px 9px;border:1px solid rgba(255,255,255,.12)}

/* catalogue mock: three books fan out */
.tv-cat{position:absolute;inset:0;display:grid;place-items:center;background:radial-gradient(ellipse 70% 60% at 50% 60%,rgba(var(--glow),.22),transparent 70%),var(--surface-2)}
.tv-book{position:absolute;width:34%;aspect-ratio:3/4;overflow:hidden;background:#222;box-shadow:0 24px 40px -22px rgba(30,20,10,.65);
  transform:translateX(calc((var(--k) - 1) * 26%)) rotate(calc((var(--k) - 1) * 7deg));transform-origin:50% 120%;transition:transform .9s cubic-bezier(.22,1,.36,1);z-index:calc(3 - var(--k))}
.tv-book:nth-child(2){z-index:3}
.tv-book picture,.tv-book img{display:block;width:100%;height:100%;object-fit:cover}
.tv-book-t{position:absolute;left:0;right:0;bottom:0;padding:22px 10px 10px;background:linear-gradient(0deg,rgba(10,8,6,.82),transparent);color:#f4f3f1;font-size:12px;letter-spacing:.06em;display:flex;flex-direction:column}
.tv-book-t small{font-size:8.5px;letter-spacing:.2em;opacity:.75}
.tool2:hover .tv-book{transform:translateX(calc((var(--k) - 1) * 40%)) rotate(calc((var(--k) - 1) * 12deg)) translateY(-4%)}

/* =====================================================================
   Steps v2: scroll story
   ===================================================================== */
.steps-story{padding-bottom:0}
.ss-track{position:relative}
.ss-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,80px);align-items:center}
.ss-copy{position:relative;display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,3vw,44px);align-items:start}
.ss-rail{list-style:none;margin:0;padding:0;position:relative;display:flex;flex-direction:column;gap:18px}
.ss-dot{display:flex;align-items:center;gap:12px;padding:0;border:0;background:none;cursor:pointer;color:var(--mut);text-align:left;font:inherit}
.ss-dot-n{position:relative;z-index:1;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:var(--bg);font-size:11px;font-weight:700;letter-spacing:.04em;transition:all .6s cubic-bezier(.22,1,.36,1)}
.ss-dot-t{font-size:var(--t-small);white-space:nowrap;transition:color .4s}
.ss-rail-line{position:absolute;left:16.5px;top:17px;bottom:17px;width:1px;background:var(--line);z-index:0}
.ss-rail-line span{position:absolute;left:-1px;top:0;width:3px;height:calc(var(--p,0) * 100%);background:linear-gradient(180deg,var(--accent),rgb(var(--glow)));box-shadow:0 0 12px rgba(var(--glow),.8);border-radius:2px}
.ss-dot.is-done .ss-dot-n{border-color:var(--accent);color:var(--accent)}
.ss-dot.is-active .ss-dot-n{background:var(--accent);border-color:var(--accent);color:var(--on-accent);box-shadow:0 0 0 6px color-mix(in srgb,var(--accent) 18%,transparent),0 0 24px rgba(var(--glow),.7);transform:scale(1.08)}
.ss-dot.is-active .ss-dot-t{color:var(--fg)}
.ss-texts{position:relative;display:grid}
.ss-text{display:grid;gap:12px;align-content:start}
.ss-num{font-size:clamp(4rem,9vw,8rem);line-height:.85;font-weight:300;color:transparent;-webkit-text-stroke:1px color-mix(in srgb,var(--accent) 70%,transparent);letter-spacing:-.04em}
.ss-kicker{font-size:var(--t-label);letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--accent)}
.ss-text h3{font-size:var(--t-h2)}
.ss-text p:last-child{color:var(--mut);max-width:40ch}
.ss-media{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--surface-2)}
.ss-img{margin:0;position:absolute;inset:0}
.ss-img picture,.ss-img img{display:block;width:100%;height:100%;object-fit:cover}
.ss-count{position:absolute;right:16px;top:14px;z-index:20;color:#f4f3f1;font-size:12px;letter-spacing:.08em;text-shadow:0 1px 8px rgba(0,0,0,.5)}
.ss-count b{font-size:22px;font-weight:400}
.ss-bar{position:absolute;left:0;right:0;bottom:0;height:3px;z-index:20;background:rgba(255,255,255,.18)}
.ss-bar span{display:block;height:100%;width:calc(var(--p,0) * 100%);background:linear-gradient(90deg,var(--accent),rgb(var(--glow)))}

/* without the story engine: a plain sequence */
.steps-story:not(.ss-on) .ss-track{padding-bottom:clamp(48px,7vw,96px)}
.steps-story:not(.ss-on) .ss-grid{grid-template-columns:1fr}
.steps-story:not(.ss-on) .ss-rail,.steps-story:not(.ss-on) .ss-media,.steps-story:not(.ss-on) .ss-num{display:none}
.steps-story:not(.ss-on) .ss-copy{grid-template-columns:1fr}
.steps-story:not(.ss-on) .ss-texts{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:28px}

/* the story engine: pinned frame, one step per scroll stride */
.ss-on .ss-track{height:calc(var(--n) * 70vh + 100vh)}
.ss-on .ss-sticky{position:sticky;top:0;height:100vh;height:100svh;display:flex;align-items:center;padding-top:40px}
.ss-on .ss-texts{min-height:clamp(260px,34vh,360px)}
.ss-on .ss-text{grid-area:1/1;opacity:0;transform:translate3d(0,40px,0);filter:blur(8px);pointer-events:none;
  transition:opacity .55s ease,transform .8s cubic-bezier(.22,1,.36,1),filter .6s ease}
.ss-on .ss-text.is-past{transform:translate3d(0,-40px,0)}
.ss-on .ss-text.is-active{opacity:1;transform:none;filter:none;pointer-events:auto;transition-delay:.12s}
.ss-on .ss-text .ss-num{transition:letter-spacing 1.2s cubic-bezier(.22,1,.36,1)}
.ss-on .ss-text:not(.is-active) .ss-num{letter-spacing:.2em}
/* photos switch on from a lamp point, the previous one dims behind */
.ss-on .ss-img{clip-path:circle(0% at var(--o));transition:clip-path 1.2s cubic-bezier(.7,0,.2,1),filter 1s ease}
.ss-on .ss-img img{transform:scale(1.16);transition:transform 2.2s cubic-bezier(.22,1,.36,1)}
.ss-on .ss-img.is-active,.ss-on .ss-img.is-past{clip-path:circle(150% at var(--o))}
.ss-on .ss-img.is-active img{transform:scale(1.02)}
.ss-on .ss-img.is-past{filter:brightness(.35) saturate(.6)}
.ss-on .ss-img::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(circle at var(--o),rgba(255,226,180,.85),rgba(255,200,140,.25) 18%,transparent 45%);mix-blend-mode:screen}
.ss-on .ss-img.is-active::after{animation:ss-flash 1.3s ease-out}
@keyframes ss-flash{0%{opacity:0}25%{opacity:1}100%{opacity:0}}

@media (max-width:900px){
  .ss-on .ss-track{height:calc(var(--n) * 80vh + 100vh)}
  .ss-on .ss-sticky{align-items:flex-start;padding-top:76px}
  .ss-grid{grid-template-columns:1fr;gap:18px}
  .ss-media{order:-1;aspect-ratio:16/10}
  .ss-copy{grid-template-columns:1fr}
  .ss-rail{flex-direction:row;gap:8px}
  .ss-dot-t,.ss-rail-line{display:none}
  .ss-dot-n{width:30px;height:30px}
  .ss-num{font-size:3.2rem}
  .ss-on .ss-texts{min-height:220px}
}
@media (prefers-reduced-motion:reduce){.ss-on .ss-img,.ss-on .ss-text{transition:none}.ss-on .ss-img::after{animation:none}}

/* steps story v2: heading lives inside the pinned frame, everything fits one screen */
.steps-story{padding-top:0}
.ss-head .sec-head{margin-bottom:clamp(18px,3vh,36px)}
.ss-on .ss-sticky{flex-direction:column;justify-content:center;align-items:stretch;padding-top:clamp(70px,9vh,96px);padding-bottom:clamp(16px,3vh,32px)}
.ss-on .ss-sticky>.wrap{width:100%}
.ss-media{aspect-ratio:4/3;max-height:calc(100svh - 260px);width:100%;justify-self:end;background:#0f1011}
.ss-on .ss-grid{align-items:center}
.ss-img img{object-fit:cover}
.steps-story:not(.ss-on){padding-top:clamp(56px,8vw,104px)}
@media (max-width:900px){
  .ss-on .ss-sticky{justify-content:flex-start;padding-top:72px}
  .ss-head .sec-head{margin-bottom:12px}
  .ss-head .sec-head h2{font-size:var(--t-h3)}
  .ss-media{max-height:38svh}
}

/* =====================================================================
   About page
   ===================================================================== */
.ab-hero{padding-top:clamp(20px,3vw,40px)}
.ab-hero-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,5vw,80px);align-items:end;padding-bottom:clamp(28px,4vw,48px)}
.ab-hero-copy h1{font-size:var(--t-display);line-height:1.08;margin:14px 0 20px}
.ab-hero-copy h1 em{font-style:italic;color:var(--accent)}
.ab-lead{font-size:var(--t-lead);color:var(--mut);max-width:54ch}
.ab-stats{display:grid;grid-template-columns:1fr 1fr;margin:0;border-top:1px solid var(--line);border-left:1px solid var(--line)}
.ab-stat{padding:18px 20px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;flex-direction:column-reverse;gap:6px}
.ab-stat dt{font-size:var(--t-small);color:var(--mut)}
.ab-stat dd{margin:0;display:flex;align-items:baseline;gap:6px}
.ab-stat b{font-size:clamp(2rem,1.4rem + 2vw,3rem);line-height:1;font-weight:300;letter-spacing:-.02em}
.ab-stat dd span{font-size:var(--t-small);color:var(--accent);font-weight:700}
.ab-hero-img{position:relative;margin:0;aspect-ratio:21/9;overflow:hidden;background:var(--surface-2)}
.ab-hero-img picture,.ab-hero-img img{display:block;width:100%;height:100%;object-fit:cover}
.ab-hero-img figcaption{position:absolute;left:16px;bottom:16px;display:flex;gap:6px}
.ab-hero-img figcaption span{font-size:11px;letter-spacing:.08em;color:#f4f3f1;background:rgba(16,13,10,.55);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.18);padding:5px 10px}
@media (max-width:900px){.ab-hero-grid{grid-template-columns:1fr;align-items:start}.ab-hero-img{aspect-ratio:4/3}}

.ab-story-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,80px);align-items:start}
.ab-story-grid .sec-head{display:block;margin:0}
.ab-story-grid .sec-head h2{margin-top:12px;max-width:14ch}
.ab-story-text{display:grid;gap:18px;color:var(--mut);font-size:var(--t-body)}
.ab-story-text .ab-first{font-size:var(--t-h4);line-height:1.5;color:var(--fg)}
@media (max-width:900px){.ab-story-grid{grid-template-columns:1fr}}

/* four layers */
.ab-layers-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,4vw,56px);align-items:center}
@media (max-width:900px){.ab-layers-grid{grid-template-columns:1fr}}
.ab-diagram{background:#14110e;border:1px solid var(--line);padding:clamp(8px,1.4vw,16px)}
.ab-diagram svg{display:block;width:100%;height:auto}
.ab-diagram .ly{transition:opacity .7s cubic-bezier(.22,1,.36,1)}
.ab-diagram .ab-tags text{opacity:0;transition:opacity .5s}
.ab-layers[data-solo=""] .ab-tags text{opacity:.85}
.ab-layers:not([data-solo=""]) .ly{opacity:.08}
.ab-layers[data-solo="ambient"] .ly-ambient,.ab-layers[data-solo="task"] .ly-task,.ab-layers[data-solo="accent"] .ly-accent,.ab-layers[data-solo="deco"] .ly-deco{opacity:1}
.ab-layers[data-solo="ambient"] .t-ambient,.ab-layers[data-solo="task"] .t-task,.ab-layers[data-solo="accent"] .t-accent,.ab-layers[data-solo="deco"] .t-deco{opacity:1}
.ab-layer-list{list-style:none;margin:0;padding:0;display:grid;gap:0;border-top:1px solid var(--line)}
.ab-layer{display:grid;grid-template-columns:auto 1fr;gap:16px;width:100%;padding:16px 4px;border:0;border-bottom:1px solid var(--line);background:none;text-align:left;font:inherit;color:var(--mut);cursor:pointer;transition:background .4s,color .4s}
.ab-layer-n{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;border:1px solid var(--line);font-size:11px;font-weight:700;color:var(--fg);transition:all .5s cubic-bezier(.22,1,.36,1)}
.ab-layer-t{display:flex;flex-direction:column;gap:4px;font-size:var(--t-small)}
.ab-layer-t b{font-weight:400;font-size:var(--t-h4);color:var(--fg)}
.ab-layer:hover,.ab-layer[aria-pressed="true"]{background:color-mix(in srgb,var(--accent) 7%,transparent);color:var(--fg)}
.ab-layer[aria-pressed="true"] .ab-layer-n{background:var(--accent);border-color:var(--accent);color:var(--on-accent);box-shadow:0 0 0 5px color-mix(in srgb,var(--accent) 18%,transparent),0 0 20px rgba(var(--glow),.6)}

/* standards with meters */
.ab-std-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
@media (max-width:900px){.ab-std-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.ab-std-grid{grid-template-columns:1fr}}
.ab-std-card{background:var(--bg);padding:clamp(20px,2.4vw,30px);display:flex;flex-direction:column;gap:14px}
.ab-std-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.ab-std-k{font-size:var(--t-label);font-weight:700;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--mut)}
.ab-std-v{font-size:var(--t-h3);font-weight:400;color:var(--fg)}
.ab-meter{position:relative;height:4px;background:var(--surface-2);overflow:hidden}
.ab-meter span{position:absolute;inset:0 auto 0 0;width:calc(var(--v) * 1%);background:linear-gradient(90deg,var(--accent),rgb(var(--glow)));transform-origin:0 50%;transform:scaleX(0);transition:transform 1.4s cubic-bezier(.22,1,.36,1) .15s}
.ab-std-card.is-in .ab-meter span,.ab-std-card:not(.fx-rv) .ab-meter span{transform:scaleX(1)}
.ab-std-card p{font-size:var(--t-small);color:var(--mut)}

/* timeline */
.ab-tl-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:24px;position:relative}
.ab-tl-list::before{content:"";position:absolute;left:0;right:0;top:22px;height:1px;background:var(--line)}
.ab-tl-list li{position:relative;display:flex;flex-direction:column;gap:8px;padding-top:0}
.ab-tl-y{position:relative;align-self:flex-start;font-size:var(--t-h4);color:var(--accent);background:var(--surface);padding-right:12px;line-height:44px}
.ab-tl-y::after{content:"";position:absolute;left:0;top:-4px;width:9px;height:9px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px var(--surface),0 0 14px rgba(var(--glow),.8);display:none}
.ab-tl-list b{font-weight:400;font-size:var(--t-h4)}
.ab-tl-list p{font-size:var(--t-small);color:var(--mut)}
@media (max-width:900px){.ab-tl-list{grid-template-columns:1fr;gap:20px;padding-left:22px}.ab-tl-list::before{left:4px;right:auto;top:6px;bottom:6px;width:1px;height:auto}.ab-tl-y{line-height:1.2;padding:0;background:none}.ab-tl-y::after{display:block;left:-22px;top:6px}}

/* services */
.ab-svc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,28px)}
@media (max-width:900px){.ab-svc-grid{grid-template-columns:1fr}}
.ab-svc-card{background:var(--bg);border:1px solid var(--line);padding:clamp(22px,2.6vw,34px);display:flex;flex-direction:column;gap:12px;transition:transform .6s cubic-bezier(.22,1,.36,1),box-shadow .6s}
.ab-svc-card:hover{transform:translateY(-4px);box-shadow:0 24px 50px -30px rgba(60,40,20,.4)}
.ab-svc-i{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent)}
.ab-svc-i svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.ab-svc-card h3{font-size:var(--t-h3)}
.ab-svc-card p{color:var(--mut);font-size:var(--t-small)}

/* grain v2: static tile, no blend animation; it looked the same but repainted the whole slider every frame */
.grain::after,.lslider::after,.cta::after{inset:0;animation:none;background-size:160px 160px;mix-blend-mode:normal;opacity:.05;contain:strict}

/* smoothness pass: only opacity and transform change while scrolling */
.brands-mq{-webkit-mask-image:none;mask-image:none;position:relative}
.brands-mq::before,.brands-mq::after{content:"";position:absolute;top:0;bottom:0;width:9%;z-index:2;pointer-events:none}
.brands-mq::before{left:0;background:linear-gradient(90deg,var(--bg),transparent)}
.brands-mq::after{right:0;background:linear-gradient(270deg,var(--bg),transparent)}
.brands-mq .mq-row{will-change:transform;transform:translate3d(0,0,0)}
.pstack-card{filter:none!important;will-change:transform}
.pstack-card::after{content:"";position:absolute;inset:0;z-index:4;background:#000;opacity:calc(var(--sp) * .5);pointer-events:none}
.lslider.is-off .ls-slide .ls-img,.lslider.is-off .ls-dot-bar i,.lslider.is-off *{animation-play-state:paused!important}
.qc-phone::after{will-change:transform,opacity}

/* content carried over from Flatsome pages and posts */
.fs-row,.fs-row_inner,.fs-col_grid{display:flex;flex-wrap:wrap;gap:clamp(16px,2.4vw,32px);margin:0 0 1.2em}
.fs-col,.fs-col_inner{flex:1 1 260px;min-width:0}
.fs-image{margin:0 0 1em}.fs-image img,.fs-bg{display:block;width:100%;height:auto}
.fs-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px;margin:0 0 1.2em}
.fs-gallery img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}

/* legible on phones: no text under 12px in the schedule preview */
.tv-row .tv-name,.tv-row .tv-q,.tv-row .tv-w{font-size:12px}
.tv-total span,.tv-pin b,.tv-chip,.ss-dot-n{font-size:12px}