/* Layout: porcelain page with soft aurora light; a fixed 3D particle cloud morphs into each sector's
   shape (spiral wave, gear, oil drop, mill rollers, bolt, solar array, circuit, steel truss, waves)
   and slides to whichever side the content leaves free. Frosted-glass cards carry the copy. Light only. */
:root{
  color-scheme: light;
  --bg:#F6F8FB;
  --glass:rgba(255,255,255,.7);
  --glass-strong:rgba(255,255,255,.9);
  --surface:#FFFFFF;
  --ink:#0A1424;
  --muted:#556275;
  --line:rgba(10,20,36,.09);
  --line-strong:rgba(10,20,36,.16);
  --blue:#0E579B;          /* Alvvin blue */
  --sky:#3BA3E6;
  --amber:#F2A93B;         /* solar warmth */
  --red:#DF3135;           /* Alvvin red, small details */
  --shadow:0 1px 2px rgba(10,20,36,.04),0 22px 50px -26px rgba(14,87,155,.28);
  --shadow-lift:0 2px 4px rgba(10,20,36,.05),0 40px 80px -34px rgba(14,87,155,.38);
  --display:"Schibsted Grotesk","Helvetica Neue",Arial,sans-serif;
  --serif:"Instrument Serif",Georgia,"Times New Roman",serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  --wrap:1240px; --gutter:clamp(16px,4vw,32px); --r:24px;
  --ease:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--ink);font-family:var(--display);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;
  background:
    radial-gradient(900px 620px at 95% -6%,rgba(186,222,250,.85),transparent 60%),
    radial-gradient(760px 560px at -8% 22%,rgba(214,226,252,.75),transparent 60%),
    radial-gradient(700px 520px at 70% 108%,rgba(253,230,190,.55),transparent 60%),
    var(--bg);
  background-attachment:fixed}
img,video{max-width:100%;height:auto;display:block}
[hidden]{display:none!important}
a{color:inherit}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:8px}
h1,h2,h3{margin:0;font-weight:700;letter-spacing:-.03em;text-wrap:balance}
p{margin:0}
::selection{background:rgba(14,87,155,.18)}

.scene{position:fixed;inset:0;width:100vw;height:100vh;z-index:0;pointer-events:none;opacity:0;transition:opacity 1.2s ease}
.scene.ready{opacity:1}
.vignette{position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse at center,transparent 55%,rgba(246,248,251,.75) 100%)}
.page{position:relative;z-index:1}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:clamp(80px,11vw,150px)}

.eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.eyebrow b{font-weight:500;color:var(--blue);background:var(--surface);border:1px solid rgba(14,87,155,.22);border-radius:999px;padding:2px 10px}
.h2{font-size:clamp(34px,5vw,64px);line-height:1.03;letter-spacing:-.035em}
.serif{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.01em;color:var(--blue)}
.grad{background:linear-gradient(100deg,#3BA3E6 0%,#0E579B 55%,#1B3A8C 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.glass{background:var(--glass);border:1px solid rgba(255,255,255,.9);outline:1px solid var(--line);outline-offset:-1px;border-radius:var(--r);box-shadow:var(--shadow);backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);position:relative;overflow:hidden;transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.glass::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(59,163,230,.14),transparent 60%);opacity:0;transition:opacity .4s}
.glass:hover::after{opacity:1}
.glass:hover{box-shadow:var(--shadow-lift)}

.btn{display:inline-flex;align-items:center;gap:10px;height:52px;padding:0 26px;border-radius:999px;font-weight:600;font-size:15px;text-decoration:none;border:1px solid var(--line-strong);transition:transform .3s var(--ease),background .3s,box-shadow .3s}
.btn svg{width:16px;height:16px}
.btn-primary{background:linear-gradient(135deg,#0E579B,#1B6FC0);color:#FFFFFF;border-color:transparent;box-shadow:0 14px 30px -14px rgba(14,87,155,.7)}
.btn-primary:hover{transform:translateY(-2px)}
.btn-ghost{background:var(--glass-strong);color:var(--ink)}
.btn-ghost:hover{border-color:var(--ink)}

/* Header */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;padding-block:14px}
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:8px 8px 8px 16px;border-radius:999px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;min-width:0}
.brand img{height:38px;width:auto}
.brand span{font-weight:700;font-size:15px;letter-spacing:-.01em;white-space:nowrap}
.links{display:flex;align-items:center;gap:2px}
.links>a,.links .dd>button{font:500 14px/1 var(--display);color:var(--ink);text-decoration:none;padding:12px 14px;border-radius:999px;border:0;background:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.links>a:hover,.links .dd>button:hover{background:rgba(14,87,155,.08)}
.links>a[aria-current]{color:var(--blue)}
.dd{position:relative}
.dd-menu{position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%);background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:8px;min-width:300px;box-shadow:var(--shadow-lift);display:grid}
.dd-menu a{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;text-decoration:none;font-size:14px}
.dd-menu a i{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:rgba(14,87,155,.08);color:var(--blue);font-style:normal}
.dd-menu a i svg{width:16px;height:16px}
.dd-menu a:hover{background:var(--bg)}
.menu-btn{display:none}
@media (max-width:980px){
  .brand span{display:none}
  .links{display:none}
  .menu-btn{display:inline-flex}
  .links.open{display:grid;position:absolute;left:var(--gutter);right:var(--gutter);top:78px;background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:10px;box-shadow:var(--shadow-lift)}
  .links.open .dd-menu{position:static;transform:none;box-shadow:none;border:0;min-width:0;padding:0 0 0 8px}
}

/* Hero */
.hero{min-height:calc(100svh - 80px);display:grid;align-content:center;padding-block:clamp(32px,6vw,72px)}
.hero-copy{max-width:640px;display:grid;gap:26px}
.pill{display:inline-flex;align-items:center;gap:10px;justify-self:start;padding:8px 16px 8px 10px;border-radius:999px;font-size:13px;font-weight:500;text-decoration:none;background:var(--glass-strong);border:1px solid var(--line)}
.pill .dot{width:8px;height:8px;border-radius:50%;background:var(--red);box-shadow:0 0 0 4px rgba(223,49,53,.15);animation:pulse 2s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 0 8px rgba(223,49,53,0)}}
.slides{display:grid}
.slide{grid-area:1/1;display:grid;gap:22px;transition:opacity .8s var(--ease),transform .8s var(--ease),filter .8s}
.slide[aria-hidden="true"]{opacity:0;transform:translateY(14px);filter:blur(6px);pointer-events:none}
.display{font-size:clamp(46px,7.4vw,104px);line-height:.95;letter-spacing:-.045em;font-weight:800}
.lead{color:var(--muted);font-size:clamp(16px,1.5vw,19px);max-width:48ch}
.actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.dots{display:flex;gap:8px;margin-left:8px}
.dots button{width:30px;height:4px;border-radius:4px;border:0;background:var(--line-strong);cursor:pointer;padding:0;transition:background .3s,width .3s}
.dots button[aria-current="true"]{background:var(--blue);width:44px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.chip{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;font-size:13px;font-weight:500;background:var(--glass-strong);border:1px solid var(--line);text-decoration:none;transition:border-color .3s,transform .3s}
.chip:hover{border-color:var(--blue);transform:translateY(-2px)}
.chip i{width:18px;height:18px;color:var(--blue)}
.chip i svg{width:18px;height:18px}
.serve{margin-top:clamp(40px,6vw,72px);display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:24px;padding:18px 22px;background:var(--glass-strong)}
.serve h2{font-size:14px;font-weight:600;letter-spacing:0;white-space:nowrap}
.marquee{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.marquee-track{display:flex;gap:56px;width:max-content;animation:marquee 26s linear infinite;align-items:center}
.marquee img{height:48px;width:auto;transition:transform .3s}
.marquee img.tall{height:62px}
.marquee img:hover{transform:scale(1.06)}
@keyframes marquee{to{transform:translateX(-50%)}}
.scroll-cue{justify-self:start;margin-top:28px;width:26px;height:42px;border:1.5px solid var(--line-strong);border-radius:20px;position:relative}
.scroll-cue::after{content:"";position:absolute;left:50%;top:8px;width:4px;height:8px;margin-left:-2px;border-radius:4px;background:var(--blue);animation:cue 1.8s ease-in-out infinite}
@keyframes cue{60%{transform:translateY(12px);opacity:0}}

/* Two-column sector layout: content on one side, the 3D shape on the other */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,64px);align-items:center}
.split.flip>.content{grid-column:2}
.split.flip>.content:only-child{grid-column:2}
.shape-label{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:8px}
.shape-label::before{content:"";width:28px;height:1px;background:var(--line-strong)}

/* About */
.about-copy{display:grid;gap:22px}
.about-copy p{color:var(--muted)}
.about-copy p.big{color:var(--ink);font-size:clamp(19px,1.8vw,23px);line-height:1.45;letter-spacing:-.01em}
.about-photos{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.about-photos img{width:100%;aspect-ratio:4/4.6;object-fit:cover;border-radius:18px}
.about-photos img:first-child{background:linear-gradient(180deg,#DCE7F2,#F1F4F7)}
.pillars{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:clamp(40px,6vw,72px)}
.pillar{padding:26px;display:grid;gap:12px;align-content:start}
.pillar h3{font-size:19px;letter-spacing:-.015em}
.pillar p{color:var(--muted);font-size:14.5px}
.ico{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(135deg,rgba(59,163,230,.18),rgba(14,87,155,.12));color:var(--blue)}
.ico svg{width:22px;height:22px}

/* Services story */
.svc-intro{display:grid;gap:18px;max-width:760px}
.svc-panel{min-height:88vh;display:grid;align-items:center;padding-block:40px}
.svc-card{display:grid;grid-template-columns:minmax(0,1fr);}
.svc-card .ph{position:relative;aspect-ratio:16/9;overflow:hidden}
.svc-card .ph img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.svc-card:hover .ph img{transform:scale(1.04)}
.svc-card .ph .tag{position:absolute;left:16px;top:16px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;background:rgba(255,255,255,.88);padding:6px 10px;border-radius:999px;color:var(--ink)}
.svc-body{display:grid;grid-template-columns:minmax(0,1fr) 112px;gap:20px;padding:26px 28px 28px;align-items:start}
.svc-body h3{font-size:clamp(24px,2.4vw,32px);line-height:1.1;text-transform:capitalize;margin-bottom:12px}
.svc-body p{color:var(--muted)}
.more{display:inline-flex;align-items:center;gap:8px;margin-top:18px;font-weight:600;font-size:14.5px;color:var(--blue);text-decoration:none}
.more svg{width:15px;height:15px;transition:transform .3s}
.more:hover svg{transform:translateX(4px)}
.instrument{width:112px;height:112px;border-radius:20px;background:linear-gradient(160deg,#FFFFFF,#EEF4FA);border:1px solid var(--line);display:grid;place-items:center}
.instrument svg{width:92px;height:92px;overflow:visible}

/* sector micro-animations */
.spin{transform-box:fill-box;transform-origin:center;animation:spin 8s linear infinite}
.spin.rev{animation-direction:reverse;animation-duration:5.1s}
.spin.fast{animation-duration:3s}
@keyframes spin{to{transform:rotate(360deg)}}
.nod{transform-box:view-box;transform-origin:46px 38px;animation:nod 2.4s ease-in-out infinite}
@keyframes nod{50%{transform:rotate(-13deg)}}
.flow{stroke-dasharray:6 8;animation:flow 1.2s linear infinite}
@keyframes flow{to{stroke-dashoffset:-28}}
.drip{animation:drip 2.4s ease-in infinite}
@keyframes drip{0%{transform:translateY(-6px);opacity:0}20%{opacity:1}100%{transform:translateY(14px);opacity:0}}
.needle{transform-box:view-box;transform-origin:46px 62px;animation:needle 3.2s var(--ease) infinite}
@keyframes needle{0%,100%{transform:rotate(-58deg)}45%{transform:rotate(38deg)}70%{transform:rotate(-12deg)}}
.zap{animation:zap 3.2s ease-in-out infinite}
@keyframes zap{0%,40%,100%{opacity:.2}45%,60%{opacity:1}}
.rays{transform-box:fill-box;transform-origin:center;animation:spin 14s linear infinite}
.shine{animation:shine 3s ease-in-out infinite}
@keyframes shine{0%{transform:translateX(-60px)}60%,100%{transform:translateX(90px)}}
.pulse-path{stroke-dasharray:10 120;animation:trace 2.6s linear infinite}
.pulse-path.d2{animation-delay:-.9s}.pulse-path.d3{animation-delay:-1.7s}
@keyframes trace{to{stroke-dashoffset:-130}}

/* Solar / tech */
.oem{display:grid;gap:18px;padding:clamp(22px,3vw,34px)}
.oem-media{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:14px}
.oem-media .jk{display:grid;place-items:center;border-radius:16px;background:var(--surface);border:1px solid var(--line);padding:16px}
.oem-media .jk img{max-height:40px;width:auto}
.oem-media video{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:16px;background:#0A1424}
.tech{display:grid;gap:18px;padding:clamp(22px,3vw,34px)}
.tech-logos{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.tech-logos div{display:grid;place-items:center;border-radius:16px;background:var(--surface);border:1px solid var(--line);padding:22px 16px;min-height:110px}
.tech-logos img{max-height:56px;width:auto}
.card-head{display:grid;grid-template-columns:minmax(0,1fr) 112px;gap:20px;align-items:start}
.card-head h2{font-size:clamp(26px,2.8vw,38px);line-height:1.08}

/* Projects */
.projects{display:grid;gap:14px}
.proj{position:relative;display:block;border-radius:22px;overflow:hidden;height:clamp(180px,17vw,230px);text-decoration:none;color:#FFFFFF;box-shadow:var(--shadow);transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.proj:hover{box-shadow:var(--shadow-lift)}
.proj img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.proj::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,20,36,.62) 0%,rgba(10,20,36,0) 62%)}
.proj h3{position:absolute;left:26px;bottom:22px;z-index:1;font-size:clamp(22px,2.2vw,30px);color:#FFFFFF}
.proj span.go{position:absolute;right:20px;bottom:20px;z-index:1;width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.92);color:#0A1424;display:grid;place-items:center}
.proj span.go svg{width:15px;height:15px}

/* Numbers */
.numbers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:clamp(32px,5vw,56px)}
.num{padding:30px 28px;display:grid;gap:8px}
.num strong{font-size:clamp(64px,8vw,116px);line-height:.9;letter-spacing:-.06em;font-weight:500;font-variant-numeric:tabular-nums}
.num strong sup{font-size:.4em;vertical-align:1em;margin-left:4px;color:var(--blue);font-weight:600}
.num p{color:var(--muted);max-width:24ch}

/* 5-up carousels */
.center-head{text-align:center;display:grid;justify-items:center;gap:14px;margin-bottom:clamp(28px,4vw,48px)}
.loop{position:relative;height:var(--h);margin-inline:auto;max-width:1200px}
.loop .item{position:absolute;left:50%;top:50%;width:var(--w);transition:transform .9s var(--ease),opacity .9s ease,filter .9s ease;cursor:pointer}
.loop .item[data-pos="0"]{z-index:5;cursor:default}
.loop .item[data-pos="1"],.loop .item[data-pos="-1"]{z-index:4}
.loop .item[data-pos="2"],.loop .item[data-pos="-2"]{z-index:3}
.loop .item[data-pos="x"]{opacity:0;z-index:1;pointer-events:none}
.loop.certs{--w:min(290px,46vw);--h:clamp(300px,40vw,450px)}
.loop.gal{--w:min(360px,62vw);--h:clamp(240px,30vw,320px)}
.frame{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:12px;box-shadow:var(--shadow-lift)}
.frame img{width:100%;aspect-ratio:1/1.3;object-fit:contain;background:#FFFFFF;border-radius:6px}
.gal .item img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:20px;box-shadow:var(--shadow-lift)}
.loop-ctl{display:flex;justify-content:center;align-items:center;gap:14px;margin-top:28px;font-family:var(--mono);font-size:12px;color:var(--muted)}
.loop-ctl button{width:44px;height:44px;border-radius:50%;border:1px solid var(--line-strong);background:var(--glass-strong);cursor:pointer;display:grid;place-items:center;color:var(--ink)}
.loop-ctl button:hover{border-color:var(--ink)}
.loop-ctl svg{width:16px;height:16px}

/* Footer */
.foot{margin-top:clamp(40px,6vw,80px);padding-bottom:24px}
.foot-card{padding:clamp(28px,4vw,48px);display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,.9fr);gap:36px}
.foot h2{font-size:clamp(26px,3vw,38px);line-height:1.08;margin-bottom:14px}
.foot p{color:var(--muted);max-width:52ch}
.foot h3{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:16px}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.foot li{display:grid;grid-template-columns:20px minmax(0,1fr);gap:12px}
.foot li svg{width:16px;height:16px;margin-top:4px;color:var(--blue)}
.foot li a{text-decoration:none}
.foot li a:hover{color:var(--blue)}
.map{display:grid;align-content:space-between;gap:16px;border-radius:18px;padding:18px;min-height:170px;text-decoration:none;color:var(--ink);position:relative;overflow:hidden;border:1px solid var(--line);background:
  linear-gradient(var(--line) 1px,transparent 1px) 0 0/26px 26px,linear-gradient(90deg,var(--line) 1px,transparent 1px) 0 0/26px 26px,var(--surface)}
.map .pin{width:16px;height:16px;border-radius:50%;background:var(--red);position:absolute;left:58%;top:40%;box-shadow:0 0 0 0 rgba(223,49,53,.4);animation:ping 2s infinite}
@keyframes ping{70%{box-shadow:0 0 0 18px rgba(223,49,53,0)}}
.map small{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.foot-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;padding:20px 8px 0;font-size:13px;color:var(--muted)}
.wa{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:var(--ink);font-weight:500}
.wa svg{width:18px;height:18px;color:#1FA855}

@media (max-width:1024px){
  .split,.split.flip{grid-template-columns:minmax(0,1fr)}
  .split.flip>.content{grid-column:1}
  .svc-panel{min-height:auto;padding-block:28px}
  .pillars{grid-template-columns:minmax(0,1fr)}
  .foot-card{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .svc-body,.card-head{grid-template-columns:minmax(0,1fr)}
  .instrument{order:-1;width:84px;height:84px}
  .instrument svg{width:68px;height:68px}
  .numbers{grid-template-columns:minmax(0,1fr)}
  .oem-media,.tech-logos{grid-template-columns:minmax(0,1fr)}
  .serve{grid-template-columns:minmax(0,1fr)}
  .loop.certs{--w:52vw;--h:86vw}
  .loop.gal{--w:70vw;--h:60vw}
}

/* ── Inner pages ─────────────────────────────────────────── */
.crumbs{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:13px;color:var(--muted);list-style:none;margin:0;padding:0}
.crumbs a{text-decoration:none}
.crumbs a:hover{color:var(--blue)}
.crumbs li+li::before{content:"/";margin-right:8px;color:var(--line-strong)}
.hero>.wrap,.page-hero>.wrap{width:100%}
.page-hero{min-height:min(860px,calc(88svh - 80px));display:grid;align-content:center;padding-block:clamp(40px,7vw,96px)}
.page-hero .hero-copy{max-width:620px}
.title{font-size:clamp(44px,6.6vw,96px);line-height:.96;letter-spacing:-.045em;font-weight:800}
.sector-badge{display:flex;align-items:center;gap:16px;padding:14px 18px 14px 14px;justify-self:start;border-radius:22px}
.sector-badge .instrument{width:84px;height:84px;border-radius:16px}
.sector-badge .instrument svg{width:68px;height:68px}
.sector-badge b{display:block;font-size:15px}
.sector-badge small{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.banner{position:relative;border-radius:28px;overflow:hidden;box-shadow:var(--shadow-lift);aspect-ratio:21/8;background:#DCE7F2}
.banner img{width:100%;height:100%;object-fit:cover;transform:scale(1.06);transition:transform 1.6s var(--ease)}
.banner.in img{transform:scale(1)}
.banner .tag{position:absolute;left:18px;bottom:18px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;background:rgba(255,255,255,.9);padding:7px 12px;border-radius:999px}
.prose{padding:clamp(24px,3.4vw,44px);display:grid;gap:18px}
.prose p{color:var(--muted)}
.prose p.big{color:var(--ink);font-size:clamp(18px,1.6vw,21px);line-height:1.5;letter-spacing:-.01em}
.prose h2{font-size:clamp(28px,3vw,40px);line-height:1.08}
.prose h3{font-size:20px;letter-spacing:-.015em;margin-top:6px}
.prose ul{margin:0;padding-left:20px;color:var(--muted);display:grid;gap:8px}
.prose li::marker{color:var(--blue)}
.prose .photo{width:100%;border-radius:18px;aspect-ratio:16/10;object-fit:cover}
.stack{display:grid;gap:clamp(16px,2vw,22px)}
.head{display:grid;gap:16px;max-width:780px;margin-bottom:clamp(28px,4vw,48px)}
.head.center{text-align:center;justify-items:center;margin-inline:auto}
.head p{color:var(--muted);font-size:17px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:16px}
.cards.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.cards.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.card{padding:26px;display:grid;gap:12px;align-content:start}
.card h3{font-size:19px;letter-spacing:-.015em;line-height:1.25}
.card p{color:var(--muted);font-size:15px}
.card .n{font-family:var(--mono);font-size:12px;color:var(--blue)}
.card .top-row{display:flex;justify-content:space-between;align-items:center}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:12px}
.tile{display:flex;align-items:center;gap:14px;padding:18px 20px;border-radius:18px;font-weight:600}
.tile .ico{width:40px;height:40px;border-radius:12px;flex:none}
.tile .ico svg{width:19px;height:19px}
.cta{padding:clamp(30px,5vw,64px);display:grid;justify-items:center;text-align:center;gap:24px}
.cta p{font-size:clamp(22px,2.6vw,34px);line-height:1.2;letter-spacing:-.025em;font-weight:600;max-width:30ch}
.others{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.other{display:grid;text-decoration:none}
.other .ph{aspect-ratio:16/10;overflow:hidden}
.other .ph img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.other:hover .ph img{transform:scale(1.05)}
.other .body{padding:20px 22px 24px;display:grid;gap:8px}
.other h3{font-size:19px;display:flex;justify-content:space-between;gap:12px;align-items:center}
.other h3 svg{width:16px;height:16px;color:var(--blue);flex:none;transition:transform .3s}
.other:hover h3 svg{transform:translateX(4px)}
.other p{color:var(--muted);font-size:14.5px}
.logo-cards{display:grid;gap:14px}
.logo-card{display:grid;grid-template-columns:150px minmax(0,1fr);gap:20px;align-items:center;padding:20px}
.logo-card .lg{display:grid;place-items:center;background:var(--surface);border:1px solid var(--line);border-radius:14px;min-height:96px;padding:12px}
.logo-card .lg img{max-height:58px;width:auto}
.logo-card h3{font-size:17px;margin-bottom:6px}
.logo-card p{color:var(--muted);font-size:14.5px}

/* Contact */
.info{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.info a{display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:18px;text-decoration:none}
.info small{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.info b{font-size:16px}
.form{padding:clamp(22px,3vw,36px);display:grid;gap:16px}
.form h2{font-size:clamp(26px,2.6vw,34px)}
.notice{font-size:14px;color:#7A4B00;background:rgba(242,169,59,.12);border:1px solid rgba(242,169,59,.35);border-radius:14px;padding:12px 14px}
.notice b{color:#5C3700}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.fields .full{grid-column:1/-1}
.field{display:grid;gap:6px}
.field span{font-size:13px;font-weight:600}
.field input,.field select,.field textarea{font:inherit;font-size:15px;color:var(--ink);background:var(--surface);border:1px solid var(--line-strong);border-radius:14px;padding:13px 14px;width:100%;transition:border-color .2s,box-shadow .2s}
.field textarea{min-height:130px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 4px rgba(14,87,155,.12)}
.form-foot{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.form-foot button{cursor:pointer}
.form-foot button:disabled{opacity:.6;cursor:progress}
#form-note{font-size:14px;font-weight:500}
#form-note[data-kind="ok"]{color:#1E8A4C}
#form-note[data-kind="warn"]{color:var(--red)}
#form-note[data-kind="info"]{color:var(--muted)}
.locations{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.loc{padding:26px;display:grid;gap:14px;align-content:start}
.loc h3{font-size:20px}
.loc address{font-style:normal;color:var(--muted);line-height:1.7}
.loc a{text-decoration:none;font-weight:500}
.loc a:hover{color:var(--blue)}
.loc .rows{display:grid;gap:6px;font-size:14.5px}
.mapframe{margin-top:16px;border-radius:24px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow);aspect-ratio:21/8;background:var(--surface)}
.mapframe iframe{width:100%;height:100%;border:0;display:block}

/* Projects */
.filter{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:24px}
.filter button{font:500 14px/1 var(--display);padding:12px 18px;border-radius:999px;border:1px solid var(--line-strong);background:var(--glass-strong);cursor:pointer;color:var(--ink);text-transform:capitalize}
.filter button[aria-pressed="true"]{background:var(--ink);color:#FFFFFF;border-color:var(--ink)}
.filter .count{margin-left:auto;font-family:var(--mono);font-size:12px;color:var(--muted)}
.gallery{columns:3 300px;column-gap:14px}
.gallery figure{margin:0 0 14px;break-inside:avoid;border-radius:18px;overflow:hidden;position:relative;box-shadow:var(--shadow)}
.gallery figure a{display:block}
.gallery img{width:100%;height:auto;transition:transform .9s var(--ease)}
.gallery figure:hover img{transform:scale(1.04)}
.gallery figcaption{position:absolute;left:12px;bottom:12px;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;background:rgba(255,255,255,.9);padding:5px 9px;border-radius:999px}
dialog.lightbox{border:0;padding:0;background:transparent;max-width:min(1200px,94vw);width:100%}
dialog.lightbox::backdrop{background:rgba(246,248,251,.9);backdrop-filter:blur(8px)}
dialog.lightbox figure{margin:0;display:grid;gap:12px}
dialog.lightbox img{width:100%;max-height:80vh;object-fit:contain;border-radius:18px;background:#FFFFFF;box-shadow:var(--shadow-lift)}
dialog.lightbox figcaption{text-align:center;color:var(--muted);font-size:14px}
.lb-ctl{display:flex;justify-content:center;gap:10px}
.lb-ctl button{width:46px;height:46px;border-radius:50%;border:1px solid var(--line-strong);background:#FFFFFF;cursor:pointer;display:grid;place-items:center;color:var(--ink)}
.lb-ctl svg{width:16px;height:16px}

/* Legal */
.legal{padding:clamp(24px,4vw,52px);display:grid;gap:16px;max-width:860px}
.legal h2{font-size:clamp(22px,2.2vw,28px);margin-top:14px}
.legal h3{font-size:17px;margin-top:4px}
.legal p,.legal li{color:var(--muted)}
.legal ul{margin:0;padding-left:20px;display:grid;gap:6px}
.draft{font-size:14px;border-radius:14px;padding:12px 14px;background:rgba(14,87,155,.07);border:1px solid rgba(14,87,155,.2);color:var(--blue)}

/* Reveal */
.reveal{opacity:0;transform:translateY(26px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.reveal.in{opacity:1;transform:none}
.cards>.reveal:nth-child(2),.others>.reveal:nth-child(2),.locations>.reveal:nth-child(2){transition-delay:.08s}
.cards>.reveal:nth-child(3),.others>.reveal:nth-child(3),.locations>.reveal:nth-child(3){transition-delay:.16s}
.cards>.reveal:nth-child(4){transition-delay:.24s}

.skip{position:absolute;left:-999px;top:8px;z-index:99;background:var(--ink);color:#FFFFFF;padding:10px 16px;border-radius:999px;text-decoration:none}
.skip:focus{left:12px}
.foot-links{display:flex;gap:18px;flex-wrap:wrap}
.foot-links a{text-decoration:none}
.foot-links a:hover{color:var(--blue)}

@media (max-width:1024px){
  .others,.locations{grid-template-columns:minmax(0,1fr)}
  .cards.two{grid-template-columns:minmax(0,1fr)}
  .cards.three{grid-template-columns:repeat(2,minmax(0,1fr))}
  .page-hero{min-height:auto}
}
@media (max-width:640px){
  .info,.fields,.cards.three{grid-template-columns:minmax(0,1fr)}
  .banner{aspect-ratio:4/3}
  .logo-card{grid-template-columns:minmax(0,1fr)}
  .mapframe{aspect-ratio:4/3}
  .filter .count{margin-left:0;width:100%}
}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}