/* Hi Tech Automation Systems · preview. Blue and black, glossy. Mobile-first. Tokens → base → components. transform/opacity motion only. */
@font-face{font-family:"Display";src:url(/fonts/urbanist-400-800.woff2) format("woff2");font-weight:400 800;font-display:swap}
@font-face{font-family:"Body";src:url(/fonts/golostext-400-700.woff2) format("woff2");font-weight:400 700;font-display:swap}
@font-face{font-family:"Display FB";src:local("Helvetica Neue"),local("Arial");size-adjust:97%}
@font-face{font-family:"Body FB";src:local("Arial"),local("ArialMT");size-adjust:100%}

:root{
  --black:#050609;--ink:#090c14;--navy:#071B4A;--navy2:#040F2C;--royal:#0D2F7E;--blue:#1E8FFF;--cyan:#35C6FF;--chrome:#E8EDF4;--silver:#9AA6B8;
  --bg:var(--black);--fg:#F2F5F9;--fg2:#B9C2D0;--fg3:#7E8798;--line:rgba(180,200,235,.14);--hair:rgba(53,198,255,.55);
  --bf:var(--blue);--bt:#fff;
  --fd:"Display","Display FB",Arial,sans-serif;--fb:"Body","Body FB",Arial,sans-serif;
  --fast:200ms;--ui:240ms;--reveal:650ms;--stag:80ms;--scene:1100ms;--ease:cubic-bezier(.22,1,.36,1);--ease-io:cubic-bezier(.65,0,.35,1);
  --gut:clamp(18px,5vw,72px);--sec:clamp(64px,9vw,128px);--hdr:64px;
  --h1:clamp(2.5rem,1.6rem + 4.6vw,6.5rem);--h2:clamp(1.9rem,1.4rem + 2.4vw,3.9rem);--h3:clamp(1.3rem,1.1rem + .8vw,1.75rem);
  --glow:0 0 0 1px rgba(53,198,255,.18),0 10px 30px rgba(30,143,255,.28);
  color-scheme:dark;
}
@media (min-width:900px){:root{--hdr:76px}}
.navy{--bg:transparent;background:linear-gradient(180deg,var(--navy) 0%,var(--navy2) 100%)}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--black);scroll-padding-top:var(--hdr)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;font:400 17px/1.65 var(--fb);color:var(--fg);background:var(--black);-webkit-font-smoothing:antialiased;overflow-x:clip}
@media (min-width:900px){body{font-size:18px}}
img,picture,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}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,p,figure,dl,dd,fieldset{margin:0}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{width:100%;max-width:1360px;margin:0 auto;padding-inline:var(--gut);min-width:0}
section{background:var(--bg);color:var(--fg);padding-block:var(--sec);position:relative}
.skip{position:fixed;top:8px;left:8px;z-index:100;background:var(--blue);color:#fff;padding:10px 14px;font-weight:600;transform:translateY(-200%);transition:transform var(--fast)}
.skip:focus{transform:none;outline:2px solid #fff;outline-offset:2px}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:3px}

/* ---------- type ---------- */
.h1,.h2,.h3{font-family:var(--fd);font-weight:600;letter-spacing:-.022em;text-wrap:balance}
.h1{font-size:var(--h1);line-height:1.0}
.h2{font-size:var(--h2);line-height:1.06}
.h3{font-size:var(--h3);line-height:1.2;letter-spacing:-.01em}
.hw{container-type:inline-size;min-width:0}
.h1,.h2{--w:0.0001}
.h1{font-size:min(var(--h1),calc(100cqw / var(--w)))}
.h2{font-size:min(var(--h2),calc(100cqw / var(--w)))}
@media (max-width:699px){.h1{font-size:min(var(--h1),calc(100cqw / var(--wm,var(--w))))}}
@media (min-width:700px){.brm{display:none}}
.chrome,.h1 em,.h2 em{font-style:normal;background:linear-gradient(180deg,#ffffff 0%,#e9eef4 36%,#a5b1c2 50%,#e3e9f0 62%,#fafbfd 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.h1 em,.h2 em{background-image:linear-gradient(180deg,#b9f0ff 0%,#4fcbff 38%,#1282f5 56%,#6cc0ff 100%)}
.lead{font-size:clamp(1.0625rem,1rem + .35vw,1.2rem);line-height:1.6;max-width:56ch;color:var(--fg2)}
.lead--big{font-family:var(--fd);font-weight:500;font-size:clamp(1.4rem,1.15rem + 1.1vw,2.1rem);line-height:1.3;letter-spacing:-.015em;color:var(--fg);max-width:32ch}
.eyebrow{font-family:var(--fb);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--cyan);font-weight:600;margin:0 0 clamp(14px,2vw,24px)}
.note{font-size:14px;color:var(--fg3);max-width:60ch;margin-top:14px}
.ill{display:inline-block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--cyan);border:1px solid rgba(53,198,255,.4);padding:2px 7px;border-radius:3px;vertical-align:middle;line-height:1.4;margin-right:4px}
p + p{margin-top:1em}
figcaption{font-size:13px;color:var(--fg3);margin-top:10px;line-height:1.5}
.hw + .lead,.hw + p{margin-top:clamp(16px,2vw,24px)}

/* line reveals */
.ln{display:inline-block;overflow:hidden;vertical-align:bottom;padding:.12em .06em .14em 0;margin:-.12em -.06em -.14em 0}
.ln > span{display:inline-block;transition:transform var(--reveal) var(--ease),opacity var(--reveal) var(--ease);transition-delay:calc(var(--base,0ms) + var(--i,0) * var(--stag))}
html.js .h1 .ln > span,html.js [data-reveal] .ln > span{transform:translateY(.6em);opacity:0}
html.js .is-in .h1 .ln > span,html.js [data-reveal].in .ln > span{transform:none;opacity:1}
html.intro-on .hero{--base:800ms}
html.js [data-reveal]{opacity:0;transform:translateY(20px);transition:opacity var(--reveal) var(--ease),transform var(--reveal) var(--ease);transition-delay:calc(var(--i,0) * var(--stag))}
html.js p[data-reveal],html.js .btns[data-reveal],html.js ul[data-reveal],html.js dl[data-reveal],html.js .eyebrow[data-reveal]{transform:none}
html.js [data-reveal].in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html.js .h1 .ln > span,html.js [data-reveal] .ln > span,html.js .hero__lead,html.js .hero__btns,html.js .hero__logo,html.js [data-reveal]{opacity:1!important;transform:none!important;transition:none!important}
  html.js .hero__pic img{transform:none;transition:none}
  .hero__streak{animation:none!important}
}

/* ---------- glossy pieces ---------- */
.panel{background:linear-gradient(180deg,rgba(255,255,255,.065),rgba(255,255,255,.02));border:1px solid rgba(190,205,230,.14);border-radius:8px;box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.btns{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;margin-top:clamp(24px,3vw,36px)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:52px;padding:14px 22px;border:1px solid transparent;border-radius:6px;font-weight:600;font-size:15px;letter-spacing:.01em;line-height:1.2;text-align:center;max-width:100%;transition:background-color var(--ui) var(--ease),border-color var(--ui) var(--ease),color var(--ui) var(--ease),transform var(--fast) var(--ease),box-shadow var(--ui) var(--ease),filter var(--ui) var(--ease)}
.btn .arr{display:inline-block;transition:transform var(--ui) var(--ease)}
.btn:active{transform:scale(.985)}
.btn--fill{color:#fff;background:linear-gradient(180deg,#45c6ff 0%,#1f93ff 46%,#0f66e8 54%,#2288ff 100%);border-color:rgba(255,255,255,.2);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -1px 0 rgba(0,0,0,.28),0 10px 28px rgba(20,120,255,.32);text-shadow:0 1px 1px rgba(0,0,0,.28)}
.btn--line{border-color:rgba(190,205,230,.35);color:var(--fg);background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02));box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
.btn--text{padding:0;min-height:0;border:0;position:relative;color:var(--fg);border-radius:0}
.btn--text::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:1px;background:var(--cyan);transform:scaleX(.35);transform-origin:left;transition:transform var(--ui) var(--ease)}
@media (hover:hover) and (pointer:fine){
  .btn:hover .arr{transform:translateX(3px)}
  .btn--fill:hover{filter:brightness(1.08);box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -1px 0 rgba(0,0,0,.28),0 14px 36px rgba(20,120,255,.45)}
  .btn--line:hover{border-color:var(--cyan);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 0 0 1px rgba(53,198,255,.25)}
  .btn--text:hover::after{transform:scaleX(1)}
}
.btn__off{display:none}
.is-busy > .btn__on{display:none}.is-busy > .btn__off{display:inline}

/* ---------- pictures + logo ---------- */
.pic{position:relative;overflow:hidden;background:var(--ink);border-radius:6px}
.pic img{width:100%;height:100%;object-fit:cover;object-position:var(--fm,50% 50%)}
@media (min-width:900px){.pic img{object-position:var(--fx,50% 50%)}}
.pic--ph{aspect-ratio:3/2;background:linear-gradient(135deg,#0b1430,#101c45 55%,#0b1430)}
.logo img{width:100%;height:auto}

/* ---------- header ---------- */
.hdr{position:fixed;top:0;left:0;right:0;z-index:50;height:var(--hdr);color:var(--fg);transition:background-color var(--ui) var(--ease),opacity .6s var(--ease),transform .6s var(--ease)}
.hdr::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent,rgba(53,198,255,.5) 30%,rgba(232,237,244,.5) 50%,rgba(53,198,255,.5) 70%,transparent);opacity:0;transition:opacity var(--ui)}
.hdr.is-solid{background:rgba(5,6,9,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.hdr.is-solid::after{opacity:1}
.hdr__in{height:100%;max-width:1360px;margin:0 auto;padding-inline:var(--gut);display:flex;align-items:center;gap:28px}
.brand{display:inline-flex;align-items:center;gap:10px;min-width:0;position:relative}
.brand__mark{width:38px;flex:none;filter:drop-shadow(0 2px 6px rgba(53,198,255,.35))}
.brand__name{font-family:var(--fd);font-weight:700;font-size:14.5px;letter-spacing:-.01em;white-space:nowrap;line-height:1}
.brand__tag{font:600 9.5px/1 var(--fb);letter-spacing:.14em;text-transform:uppercase;color:var(--fg3);border:1px solid var(--line);padding:4px 6px 3px;border-radius:3px;white-space:nowrap}
@media (max-width:420px){.brand__tag{position:absolute;left:48px;top:calc(100% + 3px);padding:2px 5px 1px;font-size:9px}}
.nav{display:none;margin-left:auto}
.nav ul{display:flex;gap:30px}
.nav a{position:relative;font-size:14px;letter-spacing:.03em;font-weight:500;padding:8px 0;color:rgba(242,245,249,.86)}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;background:var(--cyan);transform:scaleX(0);transform-origin:left;transition:transform var(--ui) var(--ease)}
.nav a[aria-current="page"]::after,.nav a:hover::after,.nav a:focus-visible::after{transform:scaleX(1)}
.hdr__cta{display:none;min-height:42px;padding:0 18px;font-size:13px}
.burger{margin-left:auto;width:48px;height:48px;display:grid;place-items:center;position:relative;flex:none}
.burger span{display:block;width:24px;height:1.5px;background:currentColor;position:absolute;transition:transform var(--ui) var(--ease)}
.burger span:first-child{transform:translateY(-4px)}.burger span:last-child{transform:translateY(4px)}
.burger[aria-expanded="true"] span:first-child{transform:rotate(45deg)}.burger[aria-expanded="true"] span:last-child{transform:rotate(-45deg)}
@media (min-width:900px){.nav{display:block}.hdr__cta{display:inline-flex;margin-left:8px}.burger{display:none}}
@media (min-width:900px) and (max-width:1120px){.nav ul{gap:20px}.brand__name{font-size:13px}}
html.intro-on .hdr{opacity:0;transform:translateY(-8px);animation:iNav .5s var(--ease) 1.15s forwards}
@keyframes iNav{to{opacity:1;transform:none}}
.menu{position:fixed;inset:var(--hdr) 0 0;background:linear-gradient(180deg,#060a16,#040f2c);z-index:49;overflow:auto;padding:24px var(--gut) 40px;display:flex}
.menu[hidden]{display:none}
.menu__in{width:100%;max-width:600px;margin:auto 0;padding-bottom:env(safe-area-inset-bottom)}
.menu__links li{border-bottom:1px solid var(--line);opacity:0;transform:translateY(10px);transition:opacity .4s var(--ease),transform .4s var(--ease);transition-delay:calc(40ms + var(--i) * 50ms)}
.menu.is-open .menu__links li{opacity:1;transform:none}
.menu__links a{display:block;padding:16px 0;font-family:var(--fd);font-weight:600;font-size:clamp(1.75rem,7vw,2.5rem);line-height:1.1;letter-spacing:-.02em}
.menu__links a[aria-current="page"]{color:var(--cyan)}
.menu__cta{margin-top:28px;width:100%}
.menu__contact{margin-top:28px;display:grid;gap:8px;font-size:15px;color:var(--fg2)}
body.menu-open{overflow:hidden}
@media (min-width:900px){.menu{display:none!important}}

/* ---------- intro: the logo powers on (≤1.3 s, once per session, mobile first) ---------- */
.intro{display:none}
html.intro-on .intro{display:block;position:fixed;inset:0;z-index:60;pointer-events:none}
.intro__bg{position:absolute;inset:0;background:radial-gradient(70% 55% at 50% 42%,#0b2a6a 0%,#061a45 40%,#03070f 100%)}
.intro__in{position:absolute;inset:0;display:grid;place-items:center;align-content:center;gap:clamp(14px,3vw,26px);padding:0 var(--gut)}
.intro__glow{position:absolute;left:50%;top:44%;width:min(70vw,420px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(53,198,255,.55) 0%,rgba(30,143,255,.22) 35%,rgba(30,143,255,0) 70%);transform:translate(-50%,-50%) scale(.6);opacity:0;filter:blur(6px)}
.intro__mark{position:relative;width:min(50vw,250px);opacity:0;transform:translateY(10px) scale(.9)}
.intro__text{position:relative;width:min(78vw,460px);opacity:0;transform:translateY(10px)}
/* the light sweep: a moving highlight masked by the artwork itself */
.intro__mark::after,.intro__text::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.0) 40%,rgba(255,255,255,.85) 50%,rgba(53,198,255,.5) 56%,transparent 66%);background-size:260% 100%;background-position:120% 0;-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat;opacity:0;pointer-events:none}
.intro__mark::after{--m:url(/img/logo-mark-480.png)}
.intro__text::after{--m:url(/img/logo-text-900.png)}
.intro__hair{position:absolute;left:50%;bottom:-18px;width:min(70vw,420px);height:1px;transform:translateX(-50%) scaleX(0);background:linear-gradient(90deg,transparent,rgba(53,198,255,.9),rgba(232,237,244,.9),rgba(53,198,255,.9),transparent)}
html.intro-on .intro__mark{animation:iMark .55s var(--ease) forwards}
html.intro-on .intro__glow{animation:iGlow 1.1s var(--ease) .1s forwards}
html.intro-on .intro__text{animation:iText .45s var(--ease) .36s forwards}
html.intro-on .intro__mark::after{animation:iSweep .6s cubic-bezier(.4,0,.2,1) .5s forwards}
html.intro-on .intro__text::after{animation:iSweep .55s cubic-bezier(.4,0,.2,1) .66s forwards}
html.intro-on .intro__hair{animation:iHair .5s var(--ease) .62s forwards}
html.intro-on .intro__bg,html.intro-on .intro__in{animation:iFade .4s var(--ease) 1.05s forwards}
@keyframes iMark{to{opacity:1;transform:none}}
@keyframes iGlow{0%{opacity:0;transform:translate(-50%,-50%) scale(.6)}45%{opacity:1;transform:translate(-50%,-50%) scale(1)}70%{opacity:.7}100%{opacity:.9;transform:translate(-50%,-50%) scale(1.06)}}
@keyframes iSweep{0%{opacity:0;background-position:120% 0}15%{opacity:1}100%{opacity:0;background-position:-40% 0}}
@keyframes iHair{to{transform:translateX(-50%) scaleX(1)}}
@keyframes iText{to{opacity:1;transform:none}}
@keyframes iFade{to{opacity:0}}
/* reduce-motion phones still get the intro, as fades only (no movement, no sweep) */
html.intro-on.intro-calm .intro__mark{transform:none;animation:iFadeIn .5s ease forwards}
html.intro-on.intro-calm .intro__text{transform:none;animation:iFadeIn .5s ease .25s forwards}
html.intro-on.intro-calm .intro__glow{transform:translate(-50%,-50%);filter:blur(6px);animation:iFadeIn .6s ease .1s forwards}
html.intro-on.intro-calm .intro__mark::after,html.intro-on.intro-calm .intro__text::after,html.intro-on.intro-calm .intro__hair{animation:none;opacity:0}
html.intro-on.intro-calm .hdr{transform:none;animation:iFadeIn .4s ease 1.1s forwards}
@keyframes iFadeIn{to{opacity:1}}
html.intro-skip .intro,html.intro-done .intro{display:none}
.intro__skip{position:absolute;right:var(--gut);bottom:max(24px,env(safe-area-inset-bottom));pointer-events:auto;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--fg2);padding:12px 0;border-bottom:1px solid var(--line)}
html.intro-skip .intro{display:none}

/* ---------- hero (home): the logo, amplified ---------- */
.hero{position:relative;min-height:100svh;display:grid;align-items:center;padding:calc(var(--hdr) + 28px) 0 clamp(36px,6vw,72px);color:var(--fg);overflow:hidden;background:var(--black)}
.hero__bg{position:absolute;inset:0;background:radial-gradient(70% 55% at 50% 30%,#163f8c 0%,#0a2561 38%,#061a45 58%,#040c22 82%,#03060f 100%)}
.hero__streak{position:absolute;left:-20%;width:140%;height:28%;background:linear-gradient(90deg,transparent 0%,rgba(53,198,255,.12) 35%,rgba(255,255,255,.09) 50%,rgba(53,198,255,.1) 65%,transparent 100%);filter:blur(28px);transform:rotate(-16deg)}
.hero__streak--1{top:14%;animation:streak 16s ease-in-out infinite alternate}
.hero__streak--2{top:58%;height:18%;opacity:.6;transform:rotate(-16deg) translateX(-6%)}
@keyframes streak{from{transform:rotate(-16deg) translateX(-5%)}to{transform:rotate(-16deg) translateX(5%)}}
.hero__in{position:relative;z-index:1;display:grid;gap:clamp(20px,4vw,40px)}
.hero__logo{order:-1;width:min(84vw,520px);margin:0 auto;filter:drop-shadow(0 18px 40px rgba(30,143,255,.25))}
html.js .hero__logo{opacity:0;transform:scale(.96);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:var(--base,0ms)}
html.js .hero.is-in .hero__logo{opacity:1;transform:none}
.hero__eyebrow{max-width:none}
.hide-m{display:none}
@media (min-width:700px){.hide-m{display:inline}}
.hero__lead{max-width:48ch;margin-top:clamp(16px,2.2vw,24px);color:rgba(242,245,249,.86)}
.hero__btns .btn--line{color:var(--fg)}
html.js .hero__lead,html.js .hero__btns{opacity:0;transform:translateY(12px);transition:opacity .65s var(--ease),transform .65s var(--ease)}
html.js .hero.is-in .hero__lead{opacity:1;transform:none;transition-delay:calc(var(--base,0ms) + 260ms)}
html.js .hero.is-in .hero__btns{opacity:1;transform:none;transition-delay:calc(var(--base,0ms) + 340ms)}
@media (min-width:900px){
  .hero__in{grid-template-columns:1.05fr .95fr;align-items:center;gap:clamp(32px,5vw,80px)}
  .hero__logo{order:0;width:100%;max-width:680px;margin:0 0 0 auto}
  .hero__bg{background:radial-gradient(55% 70% at 74% 42%,#173f8f 0%,#0b2868 32%,#061a45 55%,#040c22 80%,#03060f 100%)}
  .hero{padding-bottom:clamp(48px,7vw,88px)}
}
/* photo heroes (inner pages) */
.hero--page{min-height:min(78svh,720px);align-items:end}
.hero__media{position:absolute;inset:-6% 0 -6%;will-change:transform}
.hero__pic,.hero__pic img{position:absolute;inset:0;width:100%;height:100%;border-radius:0}
html.js .hero__pic img{transform:scale(1.035);transition:transform 1.4s var(--ease)}
html.js .hero.is-in .hero__pic img{transform:none}
.hero__grad{position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,6,9,.35) 0%,rgba(5,6,9,0) 32%,rgba(5,6,9,.66) 78%,rgba(5,6,9,.85) 100%),linear-gradient(90deg,rgba(4,12,34,.6),rgba(5,6,9,0) 58%)}
.phead{padding-top:calc(var(--hdr) + clamp(48px,8vw,104px));padding-bottom:clamp(36px,5vw,64px);background:radial-gradient(60% 50% at 20% 0%,#0d2a6e 0%,#061a45 40%,var(--black) 100%)}

/* ---------- cinema band ---------- */
.band{min-height:min(72svh,640px);display:grid;align-items:end;overflow:hidden;padding-top:clamp(120px,22vw,220px)}
.band__media{position:absolute;inset:0}
.band__pic,.band__pic img{position:absolute;inset:0;width:100%;height:100%;border-radius:0}
.band__grad{position:absolute;inset:0;background:linear-gradient(180deg,var(--black) 0%,rgba(5,6,9,.1) 30%,rgba(5,6,9,.35) 60%,rgba(5,6,9,.9) 100%)}
.band__in{position:relative;z-index:1}

/* ---------- pillars ---------- */
.pillars{padding-top:clamp(40px,6vw,72px)}
.pillars__grid{display:grid;gap:16px}
.pillar{padding:clamp(22px,3vw,32px)}
.pillar__ic{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;margin-bottom:18px;background:radial-gradient(circle at 30% 25%,rgba(255,255,255,.18),rgba(255,255,255,0) 60%),linear-gradient(180deg,#1f93ff,#0d4fcc);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 8px 20px rgba(30,143,255,.35)}
.pillar__ic svg{width:24px;height:24px;fill:none;stroke:#fff;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.pillar p{margin-top:10px;color:var(--fg2);font-size:15.5px}
@media (min-width:700px){.pillars__grid{grid-template-columns:repeat(3,1fr);gap:20px}}

/* ---------- editorial ---------- */
.edit__in{display:grid;gap:clamp(28px,4vw,56px)}
.edit__fig{margin-top:24px;max-width:360px}
.edit__fig .pic{aspect-ratio:4/5}
@media (min-width:900px){.edit__in{grid-template-columns:1.05fr .95fr;align-items:start}.edit__side{padding-top:.6em}}

/* ---------- signature room ---------- */
.room__in{display:grid;gap:24px;margin-top:clamp(28px,4vw,48px)}
.room__fig{margin:0}
.room__box{position:relative;overflow:hidden;background:#06091a;aspect-ratio:1/1;border-radius:8px;box-shadow:0 0 0 1px rgba(190,205,230,.12),0 24px 60px rgba(0,0,0,.5)}
.stage{position:absolute;left:0;top:0;width:100%;height:100%}
.room__pic,.room__pic img{position:absolute;inset:0;width:100%;height:100%;border-radius:0}
.room__pic img{transition:filter var(--scene) var(--ease-io)}
.rm{position:absolute;inset:0;transition:opacity var(--scene) var(--ease-io)}
.rm-day{inset:auto;opacity:.3;background:linear-gradient(180deg,rgba(255,246,228,.55),rgba(255,236,205,.18) 70%,rgba(255,236,205,0));mix-blend-mode:screen}
.rm-dark{opacity:.1;background:linear-gradient(180deg,rgba(6,7,9,.9),rgba(6,7,9,.78) 60%,rgba(6,7,9,.92))}
.rm-cove{opacity:.85;background:linear-gradient(180deg,rgba(255,214,160,.45),rgba(255,214,160,.14) 18%,rgba(255,214,160,0) 42%);mix-blend-mode:screen}
.rm-lamp{opacity:.85;background:radial-gradient(45% 30% at 50% 6%,rgba(255,214,160,.5),rgba(255,200,140,.16) 55%,rgba(255,200,140,0) 100%);mix-blend-mode:screen}
.rm-off{inset:auto;opacity:.96;background:linear-gradient(160deg,#101217,#06070a 60%,#0b0d12);box-shadow:inset 0 0 0 1px rgba(255,255,255,.04)}
.rm-tv{inset:auto;opacity:0;background:radial-gradient(120% 90% at 50% 45%,rgba(236,240,250,.18),rgba(150,170,215,.08) 55%,rgba(60,80,130,0));box-shadow:0 0 0 1px rgba(243,239,230,.3),0 0 46px 12px rgba(220,228,250,.36),0 0 180px 70px rgba(150,170,215,.22)}
.rm-path{opacity:0;background:radial-gradient(60% 24% at 50% 100%,rgba(53,198,255,.38),rgba(53,198,255,0) 70%),radial-gradient(30% 14% at 12% 96%,rgba(53,198,255,.25),rgba(53,198,255,0) 70%)}
.rm-shade{position:absolute;overflow:hidden;left:0;top:0;width:0;height:0}
.rm-shade i{position:absolute;inset:0;background:repeating-linear-gradient(180deg,rgba(255,255,255,.04) 0 1px,transparent 1px 7px),linear-gradient(180deg,#2d2a26 0%,#211f1c 45%,#181716 100%);box-shadow:inset 0 -3px 0 rgba(53,198,255,.25),0 10px 24px rgba(0,0,0,.5);transform:scaleY(0);transform-origin:top;transition:transform calc(var(--scene) + 250ms) var(--ease-io)}
.rm-zone{position:absolute;width:12px;height:12px;margin:-6px 0 0 -6px;opacity:0;transition:opacity var(--scene) var(--ease-io)}
.rm-zone i{position:absolute;inset:0;border-radius:50%;background:var(--cyan);box-shadow:0 0 0 1px rgba(5,6,9,.5),0 0 10px rgba(53,198,255,.8)}
.rm-zone i::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:1px solid var(--cyan);opacity:.6;animation:zone 2.6s var(--ease) infinite}
.rm-zone b{position:absolute;left:18px;top:-3px;font:600 10.5px/1.6 var(--fb);letter-spacing:.14em;text-transform:uppercase;color:#fff;white-space:nowrap;text-shadow:0 1px 2px rgba(0,0,0,.6)}
.rm-zone.rm-zone--l b{left:auto;right:18px}
@keyframes zone{0%{transform:scale(.6);opacity:.7}100%{transform:scale(2.1);opacity:0}}
.room__fig.is-off .rm-zone i::after,html.tab-hidden .rm-zone i::after{animation-play-state:paused}
.room__fig[data-scene="morning"] .room__pic img{filter:brightness(1.1) saturate(.95)}
.room__fig[data-scene="morning"] .rm-day{opacity:1}.room__fig[data-scene="morning"] .rm-dark{opacity:0}.room__fig[data-scene="morning"] .rm-cove{opacity:.3}.room__fig[data-scene="morning"] .rm-lamp{opacity:.15}
.room__fig[data-scene="entertain"] .room__pic img{filter:brightness(1.02) saturate(1.06) sepia(.08)}
.room__fig[data-scene="entertain"] .rm-zone{opacity:1}
.room__fig[data-scene="cinema"] .room__pic img{filter:brightness(.62) saturate(.85)}
.room__fig[data-scene="cinema"] .rm-day{opacity:0}.room__fig[data-scene="cinema"] .rm-dark{opacity:.52}.room__fig[data-scene="cinema"] .rm-cove{opacity:.12}.room__fig[data-scene="cinema"] .rm-lamp{opacity:0}.room__fig[data-scene="cinema"] .rm-tv{opacity:1}.room__fig[data-scene="cinema"] .rm-off{opacity:0}.room__fig[data-scene="cinema"] .rm-shade i{transform:scaleY(1)}
.room__fig[data-scene="goodnight"] .room__pic img{filter:brightness(.42) saturate(.7)}
.room__fig[data-scene="goodnight"] .rm-day{opacity:0}.room__fig[data-scene="goodnight"] .rm-dark{opacity:.74}.room__fig[data-scene="goodnight"] .rm-cove{opacity:0}.room__fig[data-scene="goodnight"] .rm-lamp{opacity:.12}.room__fig[data-scene="goodnight"] .rm-path{opacity:1}.room__fig[data-scene="goodnight"] .rm-shade i{transform:scaleY(1)}
.room__cap{padding:12px 0 0;margin:0;font-size:13px;color:var(--fg3)}
.room__ctl{padding:clamp(18px,2.5vw,28px)}
.room__kicker{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--fg3);font-weight:600;margin-bottom:12px}
.seg{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.seg__b{min-height:52px;border:1px solid rgba(190,205,230,.18);border-radius:6px;font-size:13.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;color:var(--fg2);display:inline-flex;align-items:center;justify-content:center;gap:10px;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.01));transition:border-color var(--ui) var(--ease),color var(--ui) var(--ease),background-color var(--ui) var(--ease),box-shadow var(--ui) var(--ease)}
.seg__b::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.35;transition:opacity var(--ui),background-color var(--ui)}
.seg__b.is-on{border-color:rgba(255,255,255,.25);color:#fff;background:linear-gradient(180deg,#45c6ff 0%,#1f93ff 46%,#0f66e8 54%,#2288ff 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 8px 22px rgba(20,120,255,.35);text-shadow:0 1px 1px rgba(0,0,0,.28)}
.seg__b.is-on::before{background:#fff;opacity:1}
.room__status{margin-top:18px;display:flex;gap:10px;align-items:flex-start;color:var(--fg);font-size:16px;min-height:2.6em}
.room__dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--cyan);box-shadow:0 0 10px rgba(53,198,255,.9);margin-top:.5em}
.room__note{font-size:13px;color:var(--fg3);margin-top:12px;max-width:40ch}
@media (min-width:700px){.room__box{aspect-ratio:16/11}.seg{grid-template-columns:repeat(4,1fr)}}
@media (min-width:900px){.room__in{grid-template-columns:1.7fr 1fr;align-items:end;gap:clamp(28px,4vw,56px)}.seg{grid-template-columns:1fr 1fr}}
@media (prefers-reduced-motion:reduce){.room__pic img,.rm,.rm-shade i,.rm-zone{transition-duration:.2s}.rm-zone i::after{animation:none}}

/* ---------- services explorer ---------- */
.explore__in{margin-top:clamp(28px,4vw,48px)}
.explore__stage{display:none}
.explore__list{border-top:1px solid var(--line)}
.explore__item{border-bottom:1px solid var(--line)}
.explore__link{display:flex;align-items:center;gap:16px;padding:18px 0;font-family:var(--fd);font-weight:600;font-size:clamp(1.1rem,1rem + .6vw,1.45rem);letter-spacing:-.01em;line-height:1.2;min-height:56px}
.explore__n{font-size:11.5px;letter-spacing:.14em;color:var(--cyan);font-weight:600;min-width:2.2em;font-family:var(--fb)}
.explore__plus{margin-left:auto;position:relative;width:14px;height:14px;flex:none;opacity:.7;transition:transform var(--ui) var(--ease)}
.explore__plus::before,.explore__plus::after{content:"";position:absolute;left:0;top:6px;width:14px;height:1.5px;background:var(--cyan)}
.explore__plus::after{transform:rotate(90deg);transition:transform var(--ui) var(--ease)}
.explore__item.is-on .explore__plus::after{transform:rotate(0)}
.explore__more{display:grid;gap:14px;padding:0 0 22px 2.6em}
.explore__more .pic{aspect-ratio:3/2}
.explore__more p{color:var(--fg2);max-width:48ch}
.explore__item:not(.is-on) .explore__more{display:none}
.explore__desc{display:none}
@media (min-width:900px){
  .explore__in{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(40px,6vw,96px);align-items:start}
  .explore__stage{display:block;position:sticky;top:calc(var(--hdr) + 24px)}
  .explore__stage::before{content:"";display:block;aspect-ratio:4/3}
  .explore__img{position:absolute;left:0;top:0;width:100%;aspect-ratio:4/3;opacity:0;transition:opacity .5s var(--ease);overflow:hidden;background:var(--ink);border-radius:8px;box-shadow:0 0 0 1px rgba(190,205,230,.12),0 24px 60px rgba(0,0,0,.5)}
  .explore__img.is-on{opacity:1}
  .explore__img .pic,.explore__img img{width:100%;height:100%}
  .explore__desc{display:block;margin-top:18px;color:var(--fg2);max-width:52ch;min-height:3.2em}
  .explore__more{display:none!important}
  .explore__plus{opacity:.35}.explore__plus::after{transform:rotate(0)}.explore__plus::before{width:18px}
  .explore__item.is-on .explore__plus{opacity:1;transform:translateX(3px)}
  .explore__item.is-on .explore__name{color:#fff}
  .explore__link{padding:20px 0;font-size:clamp(1.4rem,1.1rem + 1vw,1.9rem)}
}

/* ---------- process band + page ---------- */
.proc{display:grid;gap:14px;margin-top:clamp(28px,4vw,48px)}
.proc__s{display:grid;grid-template-columns:auto 1fr;gap:4px 16px;align-items:baseline;padding:20px}
.proc__n{font-family:var(--fd);font-size:1.4rem;font-weight:700;color:var(--cyan);line-height:1}
.proc__t{font-weight:600;font-size:16px;font-family:var(--fd);letter-spacing:-.01em}
.proc__d{grid-column:2;color:var(--fg2);font-size:15px;max-width:40ch}
@media (min-width:700px){.proc{grid-template-columns:repeat(2,1fr);gap:16px}}
@media (min-width:1000px){.proc{grid-template-columns:repeat(4,1fr)}}
.steps .wrap{display:grid;gap:clamp(40px,6vw,80px)}
.pst{display:grid;gap:22px}
.pst__fig .pic{aspect-ratio:3/2}
.pst__text .proc__n{display:block;font-size:2rem;margin-bottom:8px}
.pst__text .h3{margin-bottom:12px}
.pst__text p{color:var(--fg2);max-width:56ch}
@media (min-width:900px){.pst{grid-template-columns:1fr 1fr;align-items:center;gap:clamp(32px,5vw,72px)}.pst--alt .pst__fig{order:2}}
.craft__grid{display:grid;gap:clamp(24px,4vw,48px)}
.craft__fig .pic{aspect-ratio:3/2}
.craft__sm .pic{aspect-ratio:4/5}
@media (min-width:900px){.craft__grid{grid-template-columns:1.2fr .8fr;align-items:center}}

/* ---------- products ---------- */
.prodband__in{display:grid;gap:clamp(24px,4vw,48px)}
.chips{display:flex;flex-wrap:wrap;gap:10px;align-content:start}
.chip{font-size:13.5px;font-weight:500;color:var(--fg);padding:10px 14px;border-radius:999px;background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03));border:1px solid rgba(190,205,230,.16);box-shadow:inset 0 1px 0 rgba(255,255,255,.1)}
@media (min-width:900px){.prodband__in{grid-template-columns:1.1fr .9fr;align-items:center}}
.platform__in{display:grid;gap:clamp(24px,4vw,48px)}
.platform__badge{display:grid;place-items:center;gap:8px;padding:clamp(32px,5vw,56px) 24px;text-align:center}
.platform__name{font-family:var(--fd);font-weight:800;font-size:clamp(2.4rem,2rem + 3vw,4.5rem);letter-spacing:-.03em;line-height:1}
.platform__sub{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--fg3);font-weight:600}
@media (min-width:900px){.platform__in{grid-template-columns:.8fr 1.2fr;align-items:center}}
.brands{margin-top:clamp(32px,5vw,56px)}
.brands__list{display:flex;flex-wrap:wrap;gap:14px;margin-top:16px}
.brand-chip{display:grid;gap:4px;padding:16px 22px;min-width:160px}
.brand-chip .chrome{font-family:var(--fd);font-weight:800;font-size:1.5rem;letter-spacing:-.02em}
.brand-chip small{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg3);font-weight:600}
.brand-chip img{max-height:40px;width:auto}

/* ---------- cards / concept environments ---------- */
.work__grid{display:grid;gap:clamp(24px,3vw,40px);margin-top:clamp(28px,4vw,48px)}
.card{display:block;color:inherit}
.card__media{display:block}
.card__media .pic{aspect-ratio:4/3;box-shadow:0 0 0 1px rgba(190,205,230,.1)}
.card__media img{transition:transform 1s var(--ease)}
.card__body{display:grid;gap:6px;padding-top:14px}
.card__kind{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan);font-weight:600}
.card__t{font-family:var(--fd);font-weight:600;letter-spacing:-.015em;font-size:clamp(1.2rem,1.05rem + .7vw,1.7rem);line-height:1.25;max-width:34ch;position:relative}
.card__link{display:inline-flex;gap:10px;align-items:center;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;margin-top:6px;position:relative;width:fit-content}
.card__link::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:1px;background:var(--cyan);transform:scaleX(0);transform-origin:left;transition:transform var(--ui) var(--ease)}
.card__link .arr{transition:transform var(--ui) var(--ease)}
@media (hover:hover) and (pointer:fine){.card:hover .card__media img{transform:scale(1.025)}.card:hover .card__link::after,.card:focus-visible .card__link::after{transform:scaleX(1)}.card:hover .card__link .arr{transform:translateX(3px)}}
@media (min-width:900px){
  .work__grid{grid-template-columns:repeat(12,1fr);align-items:start}
  .work__big{grid-column:1/9;grid-row:1/3}.work__big .card__media .pic{aspect-ratio:3/2}
  .work__sm{grid-column:9/13}.work__sm .card__media .pic{aspect-ratio:4/3}
}

/* ---------- trade / owner ---------- */
.trade__in{display:grid;gap:clamp(28px,4vw,56px)}
.trade__list{display:grid;gap:16px;margin-top:24px}
.trade__list dt{font-weight:600;font-size:15px}
.trade__list dd{color:var(--fg2);font-size:15px;margin-top:2px}
.trade__fig .pic{aspect-ratio:4/5;max-width:460px}
@media (min-width:700px){.trade__list{grid-template-columns:1fr 1fr;gap:20px 28px}}
@media (min-width:900px){.trade__in{grid-template-columns:1.1fr .9fr;align-items:center}.trade__fig .pic{margin-left:auto}}
.owner__in{display:grid;gap:clamp(28px,4vw,56px)}
.owner__fig .pic{aspect-ratio:4/5;max-width:420px}
@media (min-width:900px){.owner__in{grid-template-columns:.9fr 1.1fr;align-items:center}}

/* ---------- consultation ---------- */
.cta{overflow:hidden}
.cta::before{content:"";position:absolute;left:-10%;bottom:-30%;width:60%;height:80%;background:radial-gradient(circle,rgba(30,143,255,.22),rgba(30,143,255,0) 65%);filter:blur(20px);pointer-events:none}
.cta__in{display:grid;gap:clamp(28px,4vw,56px);position:relative}
.cta__art .pic{aspect-ratio:4/3}
@media (min-width:900px){.cta__in{grid-template-columns:1.1fr .9fr;align-items:center}.cta__art .pic{aspect-ratio:4/5;max-width:460px;margin-left:auto}}

/* ---------- footer ---------- */
.foot{background:linear-gradient(180deg,#040f2c 0%,var(--black) 60%);color:var(--fg);border-top:1px solid var(--line);padding:clamp(36px,5vw,56px) 0 calc(28px + env(safe-area-inset-bottom))}
.foot__in{display:grid;gap:22px}
.foot__pos{margin-top:12px;color:var(--fg2);max-width:52ch;font-size:15px}
.foot__links{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:14px;letter-spacing:.02em}
.foot__links a:hover{color:var(--cyan)}
.foot__contact{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:14px;color:var(--fg2);overflow-wrap:anywhere}
.foot__contact--col{flex-direction:column;gap:8px}
.foot__contact a:hover{color:var(--cyan)}
.foot__bot{font-size:12.5px;color:var(--fg3);padding-top:18px;border-top:1px solid var(--line)}
@media (min-width:900px){.foot__in{grid-template-columns:1fr auto;align-items:start}.foot__bot{grid-column:1/-1}}

/* ---------- inner pages ---------- */
.sols__grid{display:grid;gap:clamp(20px,3vw,32px)}
.sol{display:block;color:inherit;padding:14px;transition:border-color var(--ui) var(--ease),box-shadow var(--ui) var(--ease)}
.sol__media .pic{aspect-ratio:4/3}
.sol__media img{transition:transform 1s var(--ease)}
.sol__body{display:grid;gap:6px;padding:16px 8px 8px}
.sol__n{font-size:11.5px;letter-spacing:.16em;color:var(--cyan);font-weight:600}
.sol__t{font-family:var(--fd);font-weight:600;letter-spacing:-.02em;font-size:clamp(1.4rem,1.2rem + 1vw,2rem);line-height:1.12}
.sol__d{color:var(--fg2);font-size:15px;max-width:48ch}
@media (hover:hover) and (pointer:fine){.sol:hover{border-color:rgba(53,198,255,.4);box-shadow:var(--glow)}.sol:hover .sol__media img{transform:scale(1.025)}.sol:hover .card__link .arr{transform:translateX(3px)}}
@media (min-width:700px){.sols__grid{grid-template-columns:1fr 1fr}}
.caps__list{display:grid;gap:16px;margin-top:clamp(24px,4vw,44px)}
.caps__list > div{padding:22px}
.caps__list dt{font-family:var(--fd);font-weight:600;letter-spacing:-.01em;font-size:clamp(1.15rem,1.05rem + .5vw,1.45rem)}
.caps__list dd{color:var(--fg2);margin-top:6px;max-width:56ch;font-size:15.5px}
@media (min-width:700px){.caps__list{grid-template-columns:1fr 1fr;gap:18px}.caps__list--3{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.caps__list--3{grid-template-columns:repeat(3,1fr)}}
.fit__in{display:grid;gap:clamp(28px,4vw,56px)}
.fit__fig .pic{aspect-ratio:4/3}
@media (min-width:900px){.fit__in{grid-template-columns:1fr 1fr;align-items:center}}
.rel__list{display:grid;margin-top:16px;border-top:1px solid var(--line)}
.rel__list a{display:flex;align-items:center;gap:18px;padding:16px 0;border-bottom:1px solid var(--line);font-family:var(--fd);font-weight:600;letter-spacing:-.015em;font-size:clamp(1.2rem,1.05rem + .9vw,1.7rem)}
.rel__list .arr{margin-left:auto;opacity:.5;transition:transform var(--ui) var(--ease)}
.rel__list a:hover .arr{transform:translateX(3px);opacity:1}
.qa__in{display:grid;gap:clamp(24px,4vw,48px)}
@media (min-width:900px){.qa__in{grid-template-columns:.8fr 1.2fr;align-items:start}}
.faq{border-top:1px solid var(--line)}
.faq__i{border-bottom:1px solid var(--line)}
.faq__i summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px 0;font-weight:600;font-size:16px;min-height:56px}
.faq__i summary::-webkit-details-marker{display:none}
.faq__ic{position:relative;width:14px;height:14px;flex:none}
.faq__ic::before,.faq__ic::after{content:"";position:absolute;background:var(--cyan);left:0;top:6px;width:14px;height:1.5px;transition:transform var(--ui) var(--ease)}
.faq__ic::after{transform:rotate(90deg)}
.faq__i[open] .faq__ic::after{transform:rotate(0)}
.faq__a{padding:0 0 18px;color:var(--fg2);max-width:60ch}
.faq__i[open] .faq__a{animation:faqIn .3s var(--ease)}
@keyframes faqIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.pgrid__in{display:grid;gap:clamp(28px,4vw,48px)}
.pgrid__in .card__media .pic{aspect-ratio:4/3}
@media (min-width:900px){.pgrid__in{grid-template-columns:1fr 1fr}.pgrid__wide{grid-column:1/-1}.pgrid__wide .card__media .pic{aspect-ratio:21/10}.pgrid__in--one{grid-template-columns:1fr;max-width:820px}}
.story__in{display:grid;gap:clamp(28px,4vw,56px)}
.story__col{display:grid;gap:14px;max-width:62ch}
.story__facts{padding:22px;align-self:start}
.story__facts ul{display:grid;gap:8px;margin-top:12px;color:var(--fg2)}
@media (min-width:900px){.story__in{grid-template-columns:1.3fr .7fr}.story__facts{position:sticky;top:calc(var(--hdr) + 24px)}}
.gal__grid{display:grid;gap:16px;margin-top:16px}
.gal__b{display:block;width:100%}
.gal__i .pic{aspect-ratio:3/2}
.gal__i--tall .pic{aspect-ratio:4/5}
@media (min-width:900px){.gal__grid{grid-template-columns:repeat(12,1fr);gap:24px}.gal__i{grid-column:span 7}.gal__i:nth-child(even){grid-column:span 5}.gal__i--tall{grid-column:span 5}}
.lb{border:0;padding:0;background:transparent;max-width:100vw;max-height:100vh;width:100%;height:100%;color:var(--fg)}
.lb::backdrop{background:rgba(3,5,12,.94)}
.lb__in{position:fixed;inset:0;display:grid;grid-template-rows:1fr auto;padding:max(16px,env(safe-area-inset-top)) 16px max(16px,env(safe-area-inset-bottom))}
.lb__fig{display:grid;place-items:center;min-height:0}
.lb__img{max-width:100%;max-height:78vh;width:auto;height:auto;object-fit:contain;background:var(--ink);border-radius:6px}
.lb__cap{font-size:13px;color:var(--fg2);text-align:center;margin-top:10px;max-width:60ch}
.lb__bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:12px}
.lb__count{font-size:13px;letter-spacing:.14em;color:var(--fg2)}
.lb__ctl{display:flex;gap:8px}
.lb__btn{width:48px;height:48px;border:1px solid var(--line);border-radius:6px;display:grid;place-items:center;font-size:18px;transition:border-color var(--ui)}
.lb__btn:hover{border-color:var(--cyan)}
.prose__in{max-width:68ch;display:grid;gap:14px}
.prose__in .h3{margin-top:22px}
.prose__in a{text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere}
.menu__contact,.ctc__info{overflow-wrap:anywhere}

/* ---------- contact form ---------- */
.ctc__in{display:grid;gap:clamp(28px,4vw,64px)}
.demo{font-size:14px;color:var(--fg2);max-width:60ch;margin-bottom:24px;padding:12px 14px;border:1px solid var(--line);border-radius:6px}
.form{display:grid;gap:22px;max-width:640px}
.form__row{display:grid;gap:22px}
@media (min-width:600px){.form__row{grid-template-columns:1fr 1fr}}
.field{display:grid;gap:8px}
.field__l{font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;color:var(--fg2)}
.field__l small{text-transform:none;letter-spacing:0;font-weight:400;color:var(--fg3);margin-left:6px}
.req{color:var(--cyan);font-weight:600}
.field input,.field select,.field textarea{width:100%;background:transparent;border:0;border-bottom:1px solid rgba(190,205,230,.3);color:var(--fg);font:inherit;font-size:17px;padding:12px 0;border-radius:0;transition:border-color var(--ui)}
.field select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--cyan) 50%),linear-gradient(135deg,var(--cyan) 50%,transparent 50%);background-position:calc(100% - 14px) 50%,calc(100% - 9px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-right:28px}
.field select option{color:#111;background:#fff}
.field textarea{resize:vertical;min-height:110px}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-bottom-color:var(--cyan);box-shadow:0 1px 0 var(--cyan)}
.field input:focus-visible,.field textarea:focus-visible,.field select:focus-visible{outline:2px solid var(--cyan);outline-offset:4px}
.field.is-bad input,.field.is-bad textarea{border-bottom-color:#E0836F}
.field__err{display:none;font-size:14px;color:#F2A58F}
.field__err::before{content:"⚠ "}
.field.is-bad .field__err{display:block}
.field__help{font-size:13px;color:var(--fg3)}
.hp{position:absolute;left:-9999px;top:-9999px}
.form__foot{display:grid;gap:12px}
.form__btn{width:100%;min-width:240px}
@media (min-width:600px){.form__btn{width:auto}}
.form__btn.is-busy{opacity:.75;pointer-events:none}
.form__status{font-size:15px;color:var(--fg2);min-height:1.4em}
.form__status.is-err{color:#F2A58F}
.form__ok{padding:24px;max-width:640px}
.form__ok p{margin-top:8px;color:var(--fg2)}
.ctc__side{display:grid;gap:28px;align-content:start}
.ctc__info{padding:22px}
.ctc__info .eyebrow{margin-bottom:12px}
.ctc__fig .pic{aspect-ratio:4/5;max-width:420px}
@media (min-width:900px){.ctc__in{grid-template-columns:1.1fr .9fr;align-items:start}.ctc__side{order:2}.ctc__fig .pic{margin-left:auto}}
@media (max-width:899px){.ctc__fig{display:none}}

/* ---------- page transitions + hidden tab ---------- */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.26s}
@media (prefers-reduced-motion:reduce){::view-transition-old(root),::view-transition-new(root){animation:none}}
html.tab-hidden *{animation-play-state:paused!important}

/* ---------- featured products + installation ---------- */
.prods__grid{display:grid;gap:16px;margin-top:clamp(28px,4vw,48px)}
.prod{display:grid;overflow:hidden}
.prod__art{aspect-ratio:3/2;background:radial-gradient(80% 70% at 50% 40%,rgba(30,143,255,.16),rgba(30,143,255,0) 70%),linear-gradient(180deg,#0b1430,#070b19);display:grid;place-items:center;padding:8%;border-bottom:1px solid rgba(190,205,230,.1)}
.prod__art svg{width:100%;height:100%;max-height:220px;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.prod__art .a-chrome{stroke:url(#none);stroke:#cfd8e6;fill:rgba(255,255,255,.03);filter:drop-shadow(0 6px 14px rgba(0,0,0,.45))}
.prod__art .a-line{stroke:rgba(53,198,255,.75)}
.prod__art .a-ui{stroke:rgba(190,220,255,.7);fill:rgba(53,198,255,.08)}
.prod__art .a-dot{fill:var(--cyan);stroke:none}
.prod__body{padding:20px 22px 24px;display:grid;gap:8px}
.prod__name{font-size:clamp(1.1rem,1rem + .5vw,1.35rem)}
.prod__model{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;letter-spacing:.06em;color:var(--cyan);border:1px solid rgba(53,198,255,.35);border-radius:4px;padding:3px 8px;width:fit-content}
.prod p{color:var(--fg2);font-size:15.5px}
@media (min-width:600px){.prods__grid{grid-template-columns:1fr 1fr}}
@media (min-width:1000px){.prods__grid{grid-template-columns:repeat(4,1fr)}}
.install__in{display:grid;gap:clamp(28px,4vw,56px)}
.install__fig .pic{aspect-ratio:4/5;max-width:520px}
.ticks{display:grid;gap:10px;margin-top:22px;color:var(--fg)}
.ticks li{display:flex;gap:12px;align-items:flex-start;font-size:15.5px}
.ticks li::before{content:"";flex:none;width:18px;height:18px;margin-top:2px;border-radius:50%;background:linear-gradient(180deg,#45c6ff,#0f66e8);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 4px 12px rgba(30,143,255,.35);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Ccircle cx='9' cy='9' r='9' fill='%23000'/%3E%3Cpath d='M5 9.5l3 3 5-6' stroke='%23fff' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Ccircle cx='9' cy='9' r='9' fill='%23000'/%3E%3Cpath d='M5 9.5l3 3 5-6' stroke='%23fff' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
@media (min-width:900px){.install__in{grid-template-columns:.9fr 1.1fr;align-items:center}.install__fig .pic{margin:0 auto}}
.prod__art--photo{padding:0;background:#030406}
.prod__art--photo .pic{width:100%;height:100%;background:#030406;border-radius:0}
.prod__art--photo img{object-fit:contain;object-position:50% 50%}

/* back button: every page except home (Abraham, 2026-10-18) */
.back{display:inline-flex;align-items:center;gap:4px;flex:none;min-height:44px;min-width:44px;padding:0 12px 0 8px;margin-left:-8px;border-radius:999px;font:600 14px/1 var(--fb);color:var(--fg);background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.02));border:1px solid rgba(190,205,230,.18);transition:border-color var(--ui) var(--ease),color var(--ui) var(--ease)}
.back svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media (hover:hover) and (pointer:fine){.back:hover{border-color:var(--cyan);color:#fff}}
@media (max-width:420px){.back span{display:none}.back{padding:0;justify-content:center;margin-left:-4px}.hdr__in{gap:12px}}

/* photo headers: a dark band under the fixed header so the menu and Back read on any photo (owner photos carry a top-right watermark) */
.hero--page .hero__grad{background:linear-gradient(180deg,rgba(5,6,9,.82) 0%,rgba(5,6,9,.35) 16%,rgba(5,6,9,0) 32%,rgba(5,6,9,.66) 74%,rgba(5,6,9,.88) 100%),linear-gradient(90deg,rgba(4,12,34,.6),rgba(5,6,9,0) 58%)}
/* inner pages: the header is always a dark glass bar, so a photo (or its watermark) never sits under Back or the menu */
body:not(.page-home) .hdr{background:rgba(5,6,9,.84);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
body:not(.page-home) .hdr::after{opacity:1}
.lead--long{font-family:var(--fd);font-weight:500;font-size:clamp(1.15rem,1.05rem + .5vw,1.45rem);line-height:1.5;letter-spacing:-.01em;color:var(--fg);max-width:60ch}   /* the owner's longer service descriptions, word for word */
@media (min-width:900px){.fit__in--solo{grid-template-columns:1fr}}
@media (min-width:900px){.cta__in--solo{grid-template-columns:1fr}}

/* Control4 Diamond dealer (2026-10-18) */
.hero__logo{position:relative}
.hero__c4{position:absolute;top:2%;right:-2%;width:34%;height:auto;filter:drop-shadow(0 4px 12px rgba(0,0,0,.55))}
@media (min-width:900px){.hero__c4{width:30%;top:4%;right:0}}
.dealer{padding-block:clamp(56px,8vw,104px)}
.dealer__in{display:grid;gap:clamp(24px,4vw,56px);align-items:center}
.dealer__badge{width:min(62vw,340px);margin:0 auto;filter:drop-shadow(0 18px 40px rgba(53,198,255,.35))}
.dealer__badge img{width:100%;height:auto}
.dealer__c4{width:min(56vw,220px);height:auto;margin-top:22px}
@media (min-width:900px){.dealer__in{grid-template-columns:.8fr 1.2fr}.dealer__badge{margin:0}}
.platform__diamond{width:min(56vw,220px);height:auto;filter:drop-shadow(0 12px 28px rgba(53,198,255,.3))}
.platform__c4{width:min(60vw,240px);height:auto;margin-top:8px}
.foot__dealer{display:flex;align-items:center;gap:10px;margin-top:14px;font-size:13.5px;font-weight:600;color:var(--fg)}
.foot__dealer img{width:40px;height:40px;border-radius:8px}