@font-face { font-family:Outfit; src:url('/design-refresh/assets/outfit.ttf') format('truetype'); font-weight:100 900; font-display:swap; }
@font-face { font-family:Geist; src:url('/design-refresh/assets/fonts/geist-400.ttf') format('truetype'); font-weight:400; font-display:swap; }
@font-face { font-family:Geist; src:url('/design-refresh/assets/fonts/geist-500.ttf') format('truetype'); font-weight:500; font-display:swap; }
@font-face { font-family:Geist; src:url('/design-refresh/assets/fonts/geist-600.ttf') format('truetype'); font-weight:600 800; font-display:swap; }
:root {
 --canvas:#f4f4f2; --surface:#fafaf9; --ink:#202222; --muted:#646664; --red:#b93643; --red-hover:#a72c38; --line:#d8dad5; --mineral:#e9eae7;
 --glass-blur:16px; --glass-solid:linear-gradient(145deg,#f4f4f2,#e9eae7); --glass-fill:linear-gradient(145deg,#f4f4f2ed,#e9eae7f0); --glass-border:#c4c7c1;
 --glass-shadow:inset 0 1px 0 #fafaf9,inset 1px 0 0 #fafaf980,0 2px 7px #20222212,0 24px 48px -22px #20222242;
 --glass-chip:linear-gradient(145deg,#fafaf9,#e9eae7); --ease:cubic-bezier(.23,1,.32,1); --duration-press:140ms; color-scheme:light;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:32px; }
body { margin:0; background:var(--canvas); color:var(--ink); font-family:Geist,Arial,sans-serif; font-size:16px; line-height:1.7; -webkit-font-smoothing:antialiased; isolation:isolate; }
body::before { content:''; position:fixed; inset:0; z-index:-1; pointer-events:none; background:url('/design-refresh/assets/textures/solar-texture.svg') center top / 1440px 1040px repeat; opacity:.34; }
body::after { content:''; position:fixed; inset:0; z-index:40; pointer-events:none; background:url('/design-refresh/assets/textures/paper-grain.svg') repeat; opacity:.065; }
button,input,select,textarea { font:inherit; } button,a,input,select,summary { -webkit-tap-highlight-color:transparent; }
a { color:inherit; text-decoration:none; } button { color:inherit; cursor:pointer; } img { display:block; max-width:100%; }
h1,h2,h3,p,figure { margin:0; } h1,h2,h3 { font-family:Outfit,Arial,sans-serif; font-weight:500; } p { text-wrap:pretty; max-width:65ch; }
h2 { font-size:clamp(32px,3.4vw,47px); line-height:1.13; letter-spacing:-.045em; } h3 { font-size:29px; line-height:1.15; letter-spacing:-.035em; }
[hidden] { display:none!important; } ::selection { background:var(--red); color:var(--canvas); }
:focus-visible { outline:3px solid var(--red); outline-offset:5px; } .process :focus-visible,.footer :focus-visible { outline-color:var(--canvas); }
.container { width:min(1280px,calc(100% - 96px)); margin-inline:auto; } .section { padding-block:112px; }
.eyebrow { font-size:10px; font-weight:600; letter-spacing:.13em; line-height:1.6; } .muted { color:var(--muted); } .red { color:var(--red); }
.icon { width:24px; height:24px; flex-shrink:0; display:inline-block; background:currentColor; mask:var(--icon-url) center/contain no-repeat; -webkit-mask:var(--icon-url) center/contain no-repeat; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip { position:fixed; top:10px; left:12px; transform:translateY(-180%); clip-path:inset(50%); z-index:60; background:var(--red); color:var(--canvas); padding:16px; } .skip:focus { transform:none; clip-path:none; }
/* Layers: background -1, content 0, header 20, pointer-transparent grain 40, skip 60; dialog native top layer. */
.industrial-backdrop { position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden; }
.industrial-backdrop canvas,.process-grid-texture { display:block; width:100%; height:100%; pointer-events:none; background-image:linear-gradient(#b936430f 1px,transparent 1px),linear-gradient(90deg,#b936430f 1px,transparent 1px); background-size:64px 64px; background-position:24px 24px; }
.process-grid-texture { position:absolute; inset:0; z-index:-1; background-image:linear-gradient(#f4f4f212 1px,transparent 1px),linear-gradient(90deg,#f4f4f212 1px,transparent 1px); }
canvas[data-industrial-grid][data-ready=true] { background-image:none; }
.liquid-glass { position:relative; isolation:isolate; background:var(--glass-solid); border:1px solid var(--glass-border); box-shadow:var(--glass-shadow); }
.liquid-glass::before { content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; border-radius:inherit; background:linear-gradient(135deg,#fafaf926,transparent 40%,transparent 75%,#20222205); }
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
 .liquid-glass { background:var(--glass-fill); backdrop-filter:blur(var(--glass-blur)) saturate(1.12); -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(1.12); }
}
.header { position:relative; z-index:20; border:0; border-bottom:1px solid var(--glass-border); box-shadow:inset 0 1px 0 #fafaf9d9,inset 0 -1px #fafaf985,0 8px 30px -24px #20222245; }
.header-inner { min-height:96px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand { display:inline-flex; align-items:center; min-height:44px; flex-shrink:0; } .brand img { width:108px; height:auto; mix-blend-mode:multiply; }
.navigation { display:flex; align-items:center; gap:27px; font-size:12px; font-weight:500; } .navigation>a { display:inline-flex; align-items:center; min-height:44px; transition:color .2s ease; }
.navigation>a:hover { color:var(--red); } .header-cta { display:inline-flex; gap:20px; align-items:center; min-height:44px; font-size:12px; border-bottom:1px solid var(--ink); white-space:nowrap; } .header-cta .icon { width:18px; height:18px; }
.menu-button { display:none; min-height:44px; border:0; background:none; align-items:center; gap:10px; }
.hero { padding-block:72px; display:grid; grid-template-columns:1.06fr 1fr; gap:66px; align-items:center; min-height:720px; }
.hero-copy,.hero-art { min-width:0; } .hero-copy>.eyebrow { font-size:9px; letter-spacing:.1em; margin-bottom:28px; }
.hero h1 { font-size:clamp(46px,4.65vw,67px); letter-spacing:-.055em; line-height:1.065; }
.hero h1>span { display:block; } .hero h1>.hero-audience { font-size:.59em; line-height:1.3; letter-spacing:-.035em; margin-bottom:12px; }
.hero h1>.headline-inline { display:flex; align-items:center; gap:.18em; white-space:nowrap; }
.inline-picture { display:block; width:1.45em; height:1.1em; flex-shrink:0; } .inline-picture img { width:100%; height:100%; object-fit:contain; }
.hero-description { font-size:15px; line-height:1.85; color:var(--muted); max-width:470px; margin:27px 0 30px; }
.hero-actions { display:flex; flex-wrap:wrap; align-items:center; gap:14px 24px; } .hero-note { max-width:420px; font-size:12px; line-height:1.8; color:var(--muted); margin-top:19px; }
.button { min-height:54px; padding:15px 24px; display:inline-flex; align-items:center; justify-content:center; gap:32px; font-size:13px; font-weight:600; line-height:1.5; border:0; border-radius:6px; background:var(--red); color:var(--surface); transition:transform var(--duration-press) var(--ease),background .2s ease; box-shadow:inset 0 1px 0 #fafaf973,inset 0 -1px 0 #20222212,0 4px 10px -8px #b936434d; }
.button:active { transform:translateY(1px) scale(.985); } .button .icon { width:20px; height:20px; } .button-icon { display:contents; }
.hero-text-link { display:inline-flex; align-items:center; gap:14px; font-size:13px; min-height:48px; padding:10px 0; border-bottom:1px solid var(--glass-border); } .hero-text-link .icon { width:17px; height:17px; }
.store-preview { border-radius:22px; overflow:hidden; padding:9px; align-self:center; min-width:0; }
.preview-browser { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:10px; padding:7px 12px 14px; color:var(--muted); font-size:9px; letter-spacing:.02em; }
.preview-browser>span:nth-child(2) { background:#fafaf9b8; border:1px solid var(--glass-border); border-radius:5px; padding:4px 20px; text-align:center; }
.browser-lights { display:flex; gap:5px; } .browser-lights i { display:block; width:7px; height:7px; border-radius:50%; background:var(--red); opacity:.65; box-shadow:inset 0 0 0 1px #20222212; } .browser-lights i:nth-child(2) { background:var(--muted); opacity:.5; } .browser-lights i:nth-child(3) { background:var(--ink); opacity:.35; }
.browser-lock { justify-self:end; display:flex; } .browser-lock .icon { width:12px; height:12px; }
.store-canvas { background:var(--red); border:1px solid #a72c38; border-radius:11px; overflow:hidden; box-shadow:0 1px 0 #fafaf9b3; color:var(--canvas); }
.store-nav { display:flex; justify-content:space-between; align-items:center; padding:20px 28px 14px; border-bottom:1px solid #f4f4f226; } .store-nav>span { font-family:Outfit,sans-serif; font-size:18px; letter-spacing:-.04em; } .store-nav .icon { width:19px; height:19px; } .store-dot { color:var(--surface); }
.store-intro { padding:23px 28px 0; } .store-intro>span { font-size:7px; letter-spacing:.16em; } .store-intro>p { font-family:Outfit,sans-serif; font-size:31px; line-height:1.13; letter-spacing:-.035em; margin-top:8px; }
.store-image { width:100%; height:auto; aspect-ratio:4/3; object-fit:contain; mask-image:linear-gradient(to bottom,transparent 0%,#000 20%,#000 84%,transparent 100%); -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 20%,#000 84%,transparent 100%); }
.store-bottom { margin:0 24px 21px; border-top:1px solid #f4f4f240; padding-top:15px; display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:9px; line-height:1.6; } .store-bottom strong { font-weight:500; } .store-visual-label { background:var(--canvas); color:var(--red); padding:10px 12px; border-radius:3px; font-size:8px; }
.store-preview>figcaption { display:flex; justify-content:space-between; gap:12px; padding:13px 12px 4px; font-size:8px; color:var(--muted); } .store-preview>figcaption>span:last-child { font-size:7px; white-space:nowrap; }
.production-line { border-block:1px solid var(--line); background:#e9eae7b8; padding-block:32px 22px; overflow:hidden; }
.production-heading { display:flex; justify-content:space-between; align-items:center; gap:24px; } .production-heading .eyebrow { color:var(--red); font-size:9px; margin-bottom:8px; } .production-heading h2 { font-size:24px; letter-spacing:-.035em; line-height:1.3; } .production-heading h2 span { color:var(--muted); } .production-break { display:none; }

.conveyor-window { overflow:hidden; padding-top:42px; padding-bottom:8px; } .conveyor-track { display:flex; width:max-content; animation:conveyor-travel 32s linear infinite; } .conveyor-group { display:flex; width:max(100vw,1280px); justify-content:space-around; gap:48px; padding-inline:24px; align-items:flex-end; flex-shrink:0; }




.conveyor-deck { border-top:4px solid var(--canvas); border-bottom:7px solid var(--red-hover); background:var(--red); padding:4px 0; } .conveyor-rollers { display:flex; justify-content:space-between; gap:12px; min-width:1400px; padding-inline:12px; } .roller { display:grid; place-items:center; width:26px; height:26px; border:2px solid #e9eae7; border-radius:50%; background:#adb3ae; flex-shrink:0; } .roller i { width:3px; height:17px; border-radius:3px; background:#646664; animation:roller-turn 2s linear infinite; }
.conveyor-feet { display:flex; justify-content:space-around; padding-inline:7%; } .conveyor-feet>span { height:24px; width:9px; background:#bbc0b9; border-inline:2px solid #949b92; border-bottom:5px solid var(--red-hover); }
@keyframes conveyor-travel { from { transform:translateX(-50%); } to { transform:translateX(0); } } @keyframes roller-turn { to { transform:rotate(360deg); } }
.production-line.is-offscreen .conveyor-track,.production-line.is-offscreen .roller i,.is-hidden .conveyor-track,.is-hidden .roller i { animation-play-state:paused; }
.section-heading { margin-bottom:45px; } .section-heading>.eyebrow { margin-bottom:24px; color:var(--red); } .section-heading>div { display:flex; justify-content:space-between; align-items:flex-end; gap:30px; } .section-heading>div>p,.section-heading>p:last-child:not(.eyebrow) { max-width:400px; font-size:14px; line-height:1.9; color:var(--muted); } .section-heading>p:last-child:not(.eyebrow) { margin-top:22px; }
.service-grid { display:grid; grid-template-columns:1.12fr 1fr; gap:22px; margin-top:51px; } .service { padding:32px; border-radius:22px; display:flex; flex-direction:column; min-width:0; } .service-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:26px; color:var(--red); } .service-top>span { font-size:11px; font-variant-numeric:tabular-nums; } .service-top .icon { width:28px; height:28px; } .service h3 { margin-bottom:18px; } .service>p { font-size:14px; line-height:1.85; color:var(--muted); max-width:450px; } .service>.service-delivery { border-top:1px solid var(--line); padding-top:17px; margin-top:20px; font-size:13px; } .service-delivery>strong { display:block; color:var(--ink); font-weight:600; margin-bottom:5px; } .service-tags { display:flex; flex-wrap:wrap; gap:7px; margin-top:22px; } .service-tags span { font-size:10px; border:1px solid var(--glass-border); border-radius:30px; padding:6px 10px; background:var(--glass-chip); box-shadow:inset 0 1px 0 #fafaf9b3; color:var(--muted); } .service-link { min-height:44px; display:flex; align-items:center; justify-content:space-between; font-size:12px; font-weight:500; color:var(--red); padding-top:20px; margin-top:auto; } .service-link .icon { width:18px; height:18px; }
.process { background:var(--red); color:var(--canvas); position:relative; isolation:isolate; overflow:hidden; }
.process::before { content:''; position:absolute; inset:0; background:url('/design-refresh/assets/textures/solar-texture.svg') center / 1440px 1040px; filter:brightness(0) invert(1); opacity:.12; z-index:-1; pointer-events:none; }
.process .liquid-glass { --glass-solid:#b93643; --glass-fill:linear-gradient(135deg,#fafaf91f,#fafaf907 55%,#fafaf916); color:var(--canvas); border-color:#f4f4f240; box-shadow:inset 0 1px 0 #fafaf947,inset 1px 0 0 #fafaf914,inset 0 -1px 0 #f4f4f22e,0 14px 30px -24px #20222273; }
.process .liquid-glass::before { background:linear-gradient(135deg,#fafaf90f,transparent 48%,#fafaf909); }
.process .section-heading { margin-bottom:38px; } .process .section-heading>.eyebrow { color:var(--canvas); margin-bottom:23px; } .process .section-heading>div>p { color:#f4f4f2e6; max-width:360px; } .process h2 { font-size:clamp(36px,4.1vw,57px); line-height:1.12; }
.system-grid { display:block; } .stage-tabs { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin-bottom:18px; }
.stage-tab { display:flex; align-items:center; gap:13px; padding:15px 18px; min-height:60px; border:1px solid #f4f4f255; border-radius:8px; color:var(--canvas); background:#fafaf90b; text-align:left; font-size:13px; line-height:1.5; transition:background var(--duration-press) ease; }
.stage-number { font-size:10px; flex-shrink:0; opacity:.8; } .stage-tab[aria-selected=true] { background:var(--canvas); color:var(--red); border-color:var(--canvas); }
.stage-panels { display:grid; min-width:0; } .stage-panel,.stage-panel[hidden] { display:grid!important; grid-area:auto; grid-template-columns:.94fr 1.06fr; gap:42px; padding:34px; border-radius:23px; min-width:0; }
.stage-panel[hidden],.stage-panel[inert] { visibility:hidden; pointer-events:none; } .stage-panel:focus-visible { outline-offset:-6px; }
.stage-content { min-width:0; padding-block:5px; } .small-label { display:block; font-size:10px; text-transform:uppercase; letter-spacing:.12em; font-weight:500; color:var(--muted); margin-bottom:16px; }
.stage-content .small-label { color:var(--canvas); font-size:9px; margin-bottom:12px; } .stage-content h3 { font-size:36px; line-height:1.15; } .stage-content p { font-size:14px; line-height:1.9; color:#f4f4f2e6; margin-top:23px; } .stage-content .method-scope { padding:14px 16px; margin-top:20px; border-left:2px solid var(--canvas); background:#fafaf910; font-size:12px; }
.tags { display:flex; flex-wrap:wrap; gap:7px; margin-top:22px; } .tags span { font-size:10px; border:1px solid #f4f4f244; border-radius:30px; padding:6px 10px; color:var(--canvas); background:#fafaf90c; }
.stage-visual { position:relative; min-width:0; min-height:320px; padding:20px; border:1px solid #f4f4f233; border-radius:14px; overflow:hidden; background:radial-gradient(ellipse at 40% 40%,#fafaf912,transparent 65%),repeating-linear-gradient(0deg,transparent 0 39px,#f4f4f20b 39px 40px),repeating-linear-gradient(90deg,transparent 0 39px,#f4f4f20b 39px 40px); }
.visual-caption { position:absolute; top:20px; left:20px; right:20px; font-size:8px; letter-spacing:.08em; color:#f4f4f2cc; }
.region-visual { display:grid; grid-template-columns:1fr 1fr 1fr; grid-template-rows:1fr 1fr 1fr; align-items:center; justify-items:center; padding-top:50px; }
.region-core { grid-area:2/2; display:grid; place-items:center; width:68px; height:68px; border-radius:18px; background:var(--canvas); color:var(--red); box-shadow:0 12px 23px #20222215; } .region-core>.icon { width:32px; height:32px; }
.region-label { font-size:11px; line-height:1.3; background:#fafaf918; border:1px solid #f4f4f24d; padding:10px 15px; border-radius:8px; z-index:1; white-space:nowrap; } .label-one { grid-area:1/2; } .label-two { grid-area:2/3; } .label-three { grid-area:3/1; justify-self:end; }
.orbit { pointer-events:none; position:absolute; left:50%; top:54%; border:1px solid #f4f4f23b; border-radius:50%; transform:translate(-50%,-50%); } .orbit-one { width:140px; height:140px; } .orbit-two { width:230px; height:230px; border-style:dashed; }
.message-visual,.pipeline-visual { display:flex; align-items:center; justify-content:center; } .message-tile { display:flex; flex-direction:column; align-items:center; gap:12px; font-size:11px; min-width:88px; padding:24px 12px; border-radius:14px; border:1px solid #f4f4f24d; background:#fafaf915; } .message-tile>.icon { width:30px; height:30px; } .main-tile { background:var(--canvas); color:var(--red); transform:translateY(-16px); } .connection { width:26px; height:1px; background:#f4f4f25c; flex-shrink:0; }
.filter-visual { display:grid; grid-template-columns:1fr 1fr 1fr; gap:9px; align-content:center; } .filter-item { background:#fafaf915; border:1px solid #f4f4f24d; border-radius:10px; padding:15px 7px; display:flex; flex-direction:column; align-items:center; gap:14px; font-size:11px; } .filter-item>.icon { width:18px; height:18px; } .filter-result { grid-column:1/-1; display:flex; align-items:center; justify-content:center; gap:12px; margin-top:10px; background:var(--canvas); color:var(--red); border-radius:10px; padding:16px; font-size:12px; }
.pipeline-visual>div { display:grid; justify-items:center; gap:16px; font-size:11px; } .pipeline-visual>div>.icon { width:40px; height:40px; } .pipeline-visual .connection { margin-bottom:30px; width:40px; }
.proof { background:transparent; } .stories { display:grid; grid-template-columns:1.12fr 1fr; gap:35px 22px; align-items:start; } .story { min-width:0; } .story:nth-child(even) { padding-top:45px; }
.story-media { width:100%; display:block; text-align:left; border-radius:22px; overflow:hidden; padding:9px 9px 0; } .story-media>img { width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; border-radius:13px; transition:transform .3s var(--ease); } .play { display:flex; align-items:center; gap:10px; padding:16px 12px; min-height:52px; font-size:12px; } .play>.icon { width:18px; height:18px; color:var(--red); } .story-caption { display:flex; justify-content:space-between; align-items:center; padding:18px 8px 0; gap:16px; } .story-caption h3 { font-size:25px; } .story-caption p { margin-top:6px; font-size:12px; color:var(--muted); } .story-arrow { color:var(--red); font-size:25px; }
.client-index { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:25px; padding:35px 0 0; margin-top:35px; border-top:1px solid var(--line); } .client-index p { font-size:11px; color:var(--muted); } .client-index>a { font-family:Outfit,sans-serif; font-size:22px; min-height:44px; display:flex; gap:6px; align-items:center; } .client-index>a>span { color:var(--muted); font-size:14px; } .client-index .index-link { font-family:Geist,sans-serif; font-size:12px; gap:10px; } .client-index .icon { width:18px; height:18px; }
.solutions { padding-top:0; } .solution-layout { display:grid; grid-template-columns:.85fr 1.15fr; gap:45px; } .solution-intro { padding:32px; border-radius:22px; display:flex; flex-direction:column; align-items:flex-start; } .solution-intro>.icon { width:52px; height:52px; color:var(--red); } .solution-intro>p { font-family:Outfit,sans-serif; font-size:32px; line-height:1.2; letter-spacing:-.035em; margin:28px 0; } .solution-intro strong { font-weight:500; color:var(--red); display:block; } .solution-intro .text-link { margin-top:auto; }
.text-link { display:inline-flex; align-items:center; gap:16px; min-height:44px; color:var(--red); font-size:13px; font-weight:500; } .text-link .icon { width:18px; height:18px; }
.solution-list { display:grid; gap:12px; align-content:start; } .solution { border-radius:16px; padding-inline:22px; } summary { cursor:pointer; list-style:none; } summary::-webkit-details-marker { display:none; } .solution summary { display:flex; justify-content:space-between; align-items:center; gap:24px; padding:24px 0; font-family:Outfit,sans-serif; font-size:24px; line-height:1.3; } .solution summary>.icon { width:20px; height:20px; color:var(--red); } details[open]>summary>.icon { transform:rotate(45deg); } .detail-content { padding:0 0 22px; } .detail-content p { font-size:14px; line-height:1.85; color:var(--muted); } .detail-content a { display:flex; gap:14px; align-items:center; font-size:12px; font-weight:500; color:var(--red); min-height:44px; margin-top:14px; }
.partnership { border-radius:22px; padding:42px; display:grid; grid-template-columns:1fr 1fr; gap:64px; } .partnership h2 { font-size:clamp(32px,3.4vw,47px); } .partnership .small-label { color:var(--red); } .partnership-roles>div+div { margin-top:25px; } .role-label { display:block; font-size:13px; color:var(--red); font-weight:500; margin-bottom:8px; } .partnership-roles p { font-size:14px; line-height:1.9; color:var(--muted); } .partnership-roles>.text-link { margin-top:20px; }
.guide-grid { display:grid; grid-template-columns:1.12fr 1fr; gap:22px; } .guide { border-radius:22px; padding:32px; display:flex; flex-direction:column; align-items:flex-start; min-width:0; } .guide-type { font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--red); } .guide-symbol { width:110px; height:110px; border-radius:50%; border:1px solid var(--glass-border); background:var(--glass-chip); display:grid; place-items:center; color:var(--red); margin:28px 0; } .guide-symbol .icon { width:65px; height:65px; } .guide h3 { font-size:29px; } .guide-link { display:flex; align-items:center; gap:20px; min-height:44px; font-size:12px; color:var(--red); margin-top:24px; } .guide-link .icon { width:18px; height:18px; } .guide-stack { display:grid; gap:22px; } .guide-compact h3 { margin-top:22px; font-size:26px; } .guide-compact .guide-link { margin-top:auto; padding-top:20px; }
.faq { border-top:1px solid var(--line); display:grid; grid-template-columns:.85fr 1.15fr; gap:100px; } .faq-heading p { color:var(--muted); font-size:14px; line-height:1.8; margin-top:23px; } .faq-heading .text-link { margin-top:20px; } .faq-list { display:grid; gap:12px; align-content:start; } .faq-list>details { border-radius:16px; padding-inline:22px; } .faq-list summary { display:flex; justify-content:space-between; align-items:center; gap:24px; font-size:14px; font-weight:500; line-height:1.6; min-height:79px; padding:20px 0; } .faq-list summary>.icon { width:18px; height:18px; color:var(--red); } .faq-list details>p { font-size:14px; line-height:1.9; color:var(--muted); padding:0 32px 24px 0; } .faq-list p>a { color:var(--red); text-decoration:underline; text-underline-offset:3px; }
.contact { border-top:1px solid var(--line); display:grid; grid-template-columns:1fr 1fr; gap:100px; align-items:start; } .contact-copy>.eyebrow { margin-bottom:27px; color:var(--red); } .contact-copy>p:not(.eyebrow) { font-size:14px; line-height:1.9; color:var(--muted); max-width:340px; margin-top:26px; }
.contact-panel { min-width:0; padding:32px; border-radius:20px; } .contact-panel h3 { font-size:29px; margin-bottom:26px; } .field { display:flex; flex-direction:column; gap:9px; margin-bottom:22px; } .field label,.project-field legend { font-size:12px; font-weight:500; } .field select { width:100%; min-height:50px; padding:12px 14px; background:var(--surface); color:var(--ink); border:1px solid var(--glass-border); border-radius:4px; font-size:14px; } .field select[aria-invalid=true] { border-color:var(--red); } .field-error { color:var(--red-hover); font-size:12px; line-height:1.5; margin-top:4px; }
/* Native radios carry selection; the complete visual card is their touch target. */
.project-field { border:0; padding:0; margin:0; min-width:0; }
.project-field legend { margin-bottom:14px; }
.project-options { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.project-option { position:relative; cursor:pointer; min-width:0; }
.project-option input { position:absolute; opacity:0; width:1px; height:1px; }
.project-card { position:relative; display:flex; flex-direction:column; height:100%; padding:16px; min-height:198px; border:1px solid var(--glass-border); border-radius:14px; background:linear-gradient(145deg,#fafaf9d9,#f4f4f299); box-shadow:inset 0 1px 0 #fafaf9; transition:transform 140ms var(--ease),border-color 140ms var(--ease),background-color 140ms var(--ease); }
.project-art { display:flex; align-items:center; justify-content:flex-start; height:94px; margin-bottom:11px; }
.project-art img { width:108px; height:108px; object-fit:contain; }
.project-copy { display:flex; flex-direction:column; gap:6px; }
.project-copy strong { font-family:Outfit,Arial,sans-serif; font-size:19px; line-height:1.2; font-weight:500; letter-spacing:-.025em; }
.project-copy small { color:var(--muted); font-size:11px; line-height:1.6; max-width:24ch; }
.project-check { position:absolute; top:15px; right:15px; width:20px; height:20px; border-radius:50%; border:1px solid var(--glass-border); display:grid; place-items:center; background:var(--surface); }
.project-check .icon { width:12px; height:12px; color:var(--canvas); opacity:0; }
.project-option input:checked+.project-card { border-color:var(--red); background-color:#b9364312; box-shadow:inset 0 0 0 1px #b936431a,inset 0 1px 0 #fafaf9; }
.project-option input:checked+.project-card .project-copy strong { color:var(--red); }
.project-option input:checked+.project-card .project-check { background:var(--red); border-color:var(--red); }
.project-option input:checked+.project-card .project-check .icon { opacity:1; }
.project-option input:focus-visible+.project-card { outline:3px solid var(--red); outline-offset:4px; }
.project-option input[aria-invalid=true]+.project-card { border-color:var(--red); }
.form-button { width:100%; margin-top:16px; justify-content:space-between; }
.form-note { font-size:11px; line-height:1.7; color:var(--muted); margin-top:18px; }
.official-application { border-top:1px solid var(--glass-border); padding-top:18px; margin-top:23px; display:flex; align-items:center; justify-content:space-between; gap:12px; } .official-application>span { font-size:10px; color:var(--muted); } .official-application>a { display:flex; gap:8px; align-items:center; min-height:44px; font-size:11px; font-weight:500; color:var(--red); } .official-application .icon { width:17px; height:17px; }
.result-icon { display:grid; place-items:center; width:52px; height:52px; border:1px solid var(--glass-border); border-radius:12px; background:var(--glass-chip); color:var(--red); margin-bottom:20px; } .result-intro { font-size:14px; line-height:1.8; color:var(--muted); } .contact-panel blockquote { font-size:14px; line-height:1.85; border-left:2px solid var(--red); margin:22px 0 0; padding:16px; background:var(--glass-chip); } .back-link { display:block; min-height:44px; background:none; border:0; padding:12px 0; margin:8px auto 0; font-size:12px; text-decoration:underline; text-underline-offset:4px; } #brief-result:focus { outline:none; }
.footer { background:var(--red); color:var(--canvas); padding:45px 0 20px; } .footer-top { display:flex; align-items:center; justify-content:space-between; gap:30px; padding-bottom:35px; } .footer .brand { background:var(--canvas); border-radius:8px; padding:8px 14px; } .footer .brand img { width:124px; } .footer-top>p { font-size:14px; line-height:1.8; } .social-links { display:flex; gap:10px; } .social-links>a { display:grid; place-items:center; min-width:44px; min-height:44px; border:1px solid #f4f4f266; border-radius:50%; } .social-links .icon { width:19px; height:19px; }
.footer-bottom { display:flex; justify-content:space-between; align-items:center; gap:25px; border-top:1px solid #f4f4f240; padding-top:22px; font-size:10px; } .footer-bottom>a { display:flex; gap:10px; align-items:center; min-height:44px; }
/* Modals use native focus management and interruptible CSS transitions. */
dialog { max-width:900px; width:calc(100% - 40px); padding:24px; color:var(--ink); background:var(--glass-solid); border:1px solid var(--glass-border); border-radius:20px; box-shadow:var(--glass-shadow); opacity:0; transform:scale(.96); transition:opacity 250ms var(--ease),transform 250ms var(--ease),display 250ms allow-discrete,overlay 250ms allow-discrete; }
dialog[open] { opacity:1; transform:scale(1); } dialog::backdrop { background:#202222b8; opacity:0; transition:opacity 250ms var(--ease),display 250ms allow-discrete,overlay 250ms allow-discrete; } dialog[open]::backdrop { opacity:1; }
@starting-style { dialog[open] { opacity:0; transform:scale(.96); } dialog[open]::backdrop { opacity:0; } }
dialog[data-instant],dialog[data-instant]::backdrop { transition:none; } .dialog-top { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-bottom:18px; } .dialog-top h2 { font-size:24px; } .close-dialog { display:grid; place-items:center; width:44px; height:44px; border:1px solid var(--glass-border); border-radius:50%; background:var(--glass-chip); } .video-container { aspect-ratio:16/9; background:var(--ink); overflow:hidden; border-radius:10px; } .video-container iframe { display:block; border:0; width:100%; height:100%; } dialog>p { margin-top:15px; font-size:12px; color:var(--muted); } dialog>p>a { color:var(--red); text-decoration:underline; text-underline-offset:3px; } body:has(dialog[open]) { overflow:hidden; }
.reveal { opacity:1; transform:none; } .js-reveal .reveal { opacity:0; transform:translateY(18px); transition:opacity .7s var(--ease) var(--reveal-delay,0ms),transform .7s var(--ease) var(--reveal-delay,0ms); } .js-reveal .reveal.is-visible { opacity:1; transform:none; }
@media(hover:hover) and (pointer:fine) {
 .button:hover { transform:translateY(-2px); background:var(--red-hover); } .button:active { transform:translateY(1px) scale(.985); }
 .story-media:hover>img { transform:scale(1.015); } .text-link:hover,.service-link:hover { text-decoration:underline; text-underline-offset:4px; }
}
body[data-input=keyboard] .button:active { transform:none; } body[data-input=keyboard] .button { transition:none; }
@media(min-width:1600px) { .hero { gap:90px; min-height:790px; } }
@media(max-width:1100px) {
 .container { width:calc(100% - 64px); } .section { padding-block:88px; } .header-inner { gap:20px; } .navigation { gap:16px; font-size:11px; } .header-cta { font-size:11px; gap:12px; } .brand img { width:95px; }
 .hero { gap:36px; min-height:650px; } .hero h1 { font-size:clamp(42px,5.5vw,62px); } .hero-copy>.eyebrow { font-size:8px; } .hero-description { font-size:14px; } .service-grid { gap:18px; } .service { padding:26px; }
 .process .section-heading>div { gap:35px; } .process h2 { font-size:43px; } .stage-tab { padding:13px 12px; font-size:11px; gap:8px; } .stage-panel,.stage-panel[hidden] { padding:24px; gap:25px; } .stage-content h3 { font-size:31px; } .stage-visual { padding:16px; } .visual-caption { top:16px; left:16px; right:16px; font-size:7px; } .message-tile { min-width:75px; font-size:10px; padding:20px 10px; } .connection { width:18px; }
 .solution-layout,.partnership,.faq,.contact { gap:40px; } .partnership { padding:32px; } .guide { padding:26px; } .guide h3 { font-size:27px; } .contact-panel { padding:28px; } .project-options .project-card { font-size:11px; padding:11px; }
}
@media(min-width:768px) and (max-width:900px) {
 .header-inner { flex-wrap:wrap; padding-block:15px; gap:12px 24px; } .navigation { order:3; width:100%; justify-content:space-between; } .hero { gap:28px; } .hero h1 { font-size:48px; } .hero .inline-picture { width:1.2em; } .hero-actions { gap:10px; } .hero-actions .button { font-size:12px; padding:13px 18px; gap:20px; } .store-intro>p { font-size:25px; } .store-intro { padding-inline:20px; } .store-nav { padding-inline:20px; } .store-visual-label { display:none; }
 .stage-panel,.stage-panel[hidden] { grid-template-columns:.8fr 1fr; } .stage-content h3 { font-size:28px; } .message-tile { min-width:60px; padding:17px 5px; font-size:9px; } .connection { width:13px; } .pipeline-visual .connection { width:22px; } .filter-item { font-size:10px; } .region-label { font-size:10px; padding:9px; }
  .official-application { flex-direction:column; align-items:flex-start; gap:0; } .solution summary { font-size:21px; } .service h3 { font-size:26px; } .footer-bottom { flex-wrap:wrap; }
}
@media(max-width:767px) {
 :root { --glass-blur:8px; } .container { width:calc(100% - 40px); } .section { padding-block:64px; } body::before { background-image:url('/design-refresh/assets/textures/solar-texture-mobile.svg'); background-size:390px 900px; }
 .header-inner { min-height:80px; flex-wrap:wrap; gap:0; } .brand { min-height:80px; } .brand img { width:96px; } .menu-button { display:flex; margin-left:auto; font-size:12px; } .menu-button .icon { width:22px; height:22px; } .header-cta { display:none; } .navigation { display:none; width:100%; order:3; flex-direction:column; align-items:stretch; gap:0; padding:10px 0 20px; } .navigation.is-open { display:flex; } .navigation>a { padding:11px 4px; min-height:48px; font-size:14px; }
 .hero { grid-template-columns:1fr; gap:36px; padding:43px 0 44px; min-height:initial; } .hero-copy>.eyebrow { font-size:8px; letter-spacing:.06em; margin-bottom:23px; } .hero h1 { font-size:clamp(34px,10vw,68px); line-height:1.065; letter-spacing:-.05em; } .hero h1>.hero-audience { font-size:.67em; } .hero .inline-picture { width:1.45em; height:1.1em; } .hero-description { font-size:16px; line-height:1.8; max-width:490px; margin:22px 0 25px; } .hero-actions { gap:6px 20px; } .hero-actions>.button { min-height:54px; font-size:14px; } .hero-note { font-size:12px; line-height:1.8; margin-top:16px; max-width:400px; }
 .store-preview { max-width:530px; justify-self:center; width:100%; border-radius:16px; padding:7px; } .store-canvas { border-radius:9px; } .store-nav { padding:19px 22px 14px; } .store-intro { padding:20px 22px 0; } .store-intro>p { font-size:29px; } .store-bottom { margin:0 20px 18px; } .store-preview>figcaption { padding:13px 10px 4px; font-size:8px; } .store-visual-label { font-size:7px; padding:8px; } .preview-browser { padding-inline:8px; }
 .production-line { padding-top:26px; } .production-heading { gap:12px; align-items:flex-start; } .production-heading h2 { font-size:20px; } .production-break { display:block; } .production-heading .eyebrow { font-size:8px; }  .conveyor-window { padding-top:36px; }
 .section-heading { margin-bottom:32px; } .section-heading>.eyebrow { margin-bottom:20px; } .section-heading>div { display:block; } h2 { font-size:clamp(32px,7.9vw,44px); } .section-heading>div>p { font-size:14px; margin-top:23px; } .section-heading>div>p br { display:none; }
 .service-grid { grid-template-columns:1fr; gap:16px; margin-top:32px; } .service { padding:25px 23px 28px; } .service-top { margin-bottom:23px; } .service h3 { font-size:29px; } .service>p { font-size:14px; }
 .process .section-heading { margin-bottom:27px; } .process h2 { font-size:clamp(32px,9vw,47px); } .stage-tabs { grid-template-columns:1fr 1fr; gap:8px; margin-bottom:16px; } .stage-tab { min-height:60px; font-size:12px; gap:9px; padding:12px; } .stage-panel,.stage-panel[hidden] { grid-template-columns:1fr; gap:26px; padding:17px; border-radius:18px; } .stage-visual { min-height:300px; padding:17px; } .region-visual { padding-top:50px; } .stage-content h3 { font-size:33px; } .stage-content p { font-size:14px; } .stage-content .method-scope { font-size:12px; } .visual-caption { top:17px; left:17px; font-size:7px; } .message-tile { min-width:80px; font-size:10px; padding:20px 10px; } .connection { width:22px; }
 .stories { grid-template-columns:1fr; gap:28px; } .story:nth-child(even) { padding-top:0; } .story-caption h3 { font-size:25px; } .story-media { border-radius:16px; padding:7px 7px 0; } .story-media>img { border-radius:10px; } .client-index { align-items:flex-start; gap:14px 26px; } .client-index p { flex-basis:100%; } .client-index p br { display:none; } .client-index>a { font-size:21px; }
 .solutions { padding-top:0; } .solution-layout { grid-template-columns:1fr; gap:20px; } .solution-intro { padding:25px; } .solution-intro>p { font-size:30px; } .solution summary { font-size:23px; } .solution { padding-inline:20px; }
 .partnership { grid-template-columns:1fr; gap:28px; padding:26px; border-radius:18px; } .partnership h2 { font-size:34px; } .partnership-roles p { font-size:14px; }
 .guide-grid { grid-template-columns:1fr; gap:18px; } .guide-stack { gap:18px; } .guide { padding:25px; border-radius:18px; } .guide h3 { font-size:29px; }
 .faq { grid-template-columns:1fr; gap:36px; } .faq-list summary { font-size:15px; min-height:78px; } .faq-list details>p { font-size:14px; padding-right:0; } .faq-list>details { padding-inline:18px; } .faq-heading p br { display:none; }
 .contact { grid-template-columns:1fr; gap:36px; } .contact-copy>p:not(.eyebrow) { max-width:none; } .contact-panel { padding:22px 18px; border-radius:16px; } .field label,.project-field legend { font-size:13px; } .field select { font-size:16px; min-height:50px; }  .project-options .project-card { font-size:13px; min-height:50px; padding:13px; } .form-note { font-size:12px; } .form-button { justify-content:space-between; font-size:14px; } .official-application { flex-direction:row; align-items:center; } .official-application>a { font-size:11px; }
 .footer { padding-top:35px; } .footer-top { align-items:flex-start; flex-direction:column; gap:22px; padding-bottom:27px; } .footer .brand { min-height:initial; } .footer-bottom { flex-wrap:wrap; gap:10px 24px; font-size:10px; align-items:flex-start; } .footer-bottom>a { font-size:12px; }
 dialog { padding:18px; width:calc(100% - 24px); border-radius:16px; } .dialog-top h2 { font-size:21px; } .video-container { aspect-ratio:9/13; max-height:65dvh; }
}
@media(max-width:359px) {
 .hero h1 { font-size:34px; } .hero-actions .button { font-size:13px; gap:20px; padding-inline:19px; } .hero-copy>.eyebrow { font-size:7px; } .store-intro>p { font-size:25px; } .store-visual-label { display:none; } .preview-browser>span:nth-child(2) { padding-inline:14px; }
 .stage-tab { font-size:11px; padding:10px; gap:6px; } .stage-panel,.stage-panel[hidden] { padding:14px; } .stage-content h3 { font-size:29px; } .stage-visual { padding:13px; } .region-visual { padding-top:50px; } .region-label { padding:8px; font-size:10px; } .message-tile { min-width:65px; font-size:9px; padding:18px 6px; } .connection,.pipeline-visual .connection { width:15px; } .filter-item { font-size:9px; } .official-application { flex-direction:column; align-items:flex-start; gap:0; } .partnership h2 { font-size:30px; }
}
@media(prefers-reduced-motion:reduce) {
 html { scroll-behavior:auto; } .js-reveal .reveal { opacity:1; transform:none; transition:none; } .conveyor-track,.roller i { animation:none!important; }
 .button { transition:background .2s ease,opacity .2s ease; } .button:hover,.button:active,.story-media:hover>img { transform:none; } .story-media>img { transition:none; } .stage-tab { transition:none; }
 dialog,dialog[open] { transform:none; transition:opacity .2s ease,display .2s allow-discrete,overlay .2s allow-discrete; } dialog::backdrop { transition:opacity .2s ease,display .2s allow-discrete,overlay .2s allow-discrete; }
 .conveyor-group:nth-child(2),.conveyor-deck,.conveyor-feet { display:none; } .conveyor-window { padding:32px 20px 0; } .conveyor-track { display:block; width:auto; transform:none; } .conveyor-group { width:auto; flex-wrap:wrap; justify-content:center; gap:28px 24px; padding:12px 0; }
}
@media(prefers-reduced-transparency:reduce) { .liquid-glass { background:var(--glass-solid); backdrop-filter:none; -webkit-backdrop-filter:none; } }
@media print { .industrial-backdrop,body::before,body::after,.header,.conveyor-window,.stage-tabs,.contact-panel,.social-links { display:none; } .container { width:100%; } .section { padding-block:32px; } .process,.footer { color:var(--ink); background:var(--canvas); } .reveal { opacity:1!important; transform:none!important; } .stage-panel,.stage-panel[hidden],.stage-panel[inert] { visibility:visible; grid-area:auto; color:var(--ink); } .stage-content p,.stage-content .small-label { color:var(--ink); } }

.tabs-ready>.stage-panel,.tabs-ready>.stage-panel[hidden]{grid-area:1/1}
body[data-input=keyboard] .stage-tab{transition:none}

html:has(body[data-input=keyboard]){scroll-behavior:auto}

/* Solar modules use the chosen Perakende-scale rail direction. */
.conveyor-window { padding-top:42px; }
.conveyor-group { gap:48px; }
.panel-unit { width:184px; height:132px; padding:7px 7px 31px; position:relative; flex-shrink:0; margin-bottom:2px; border:1px solid #7a807b; background:#c8ccc5; border-radius:1px; box-shadow:inset 0 0 0 1px #f4f4f2,0 3px 6px #20222210; }
.panel-cells { position:relative; height:100%; display:grid; grid-template-columns:repeat(var(--panel-columns,6),1fr); gap:2px; background:#9ba29b; border:1px solid #787f79; padding:1px; }
.panel-cells>span { position:relative; background:var(--cell-surface,#303535); }
.panel-cells>span::before { content:''; position:absolute; inset:0; background:repeating-linear-gradient(to bottom,transparent 0,transparent calc(100% / var(--cell-rows,4) - 1px),var(--cell-line,#8b938c) calc(100% / var(--cell-rows,4))); }
.panel-cells>span::after { content:''; position:absolute; inset:0; border-inline:1px solid var(--cell-busbar,#59615b); margin-inline:32%; }
/* A shared module family with portrait, split-array and dark-frame variations. */
.panel-unit--portrait { width:140px; height:174px; --cell-rows:6; background:#515b54; border-color:#626b64; box-shadow:inset 0 0 0 1px #a5ada5,0 3px 6px #20222210; }
.panel-unit--portrait .panel-caption { background:var(--red); color:var(--canvas); border-color:var(--red-hover); }
.panel-unit--portrait .panel-caption>span,.panel-unit--portrait .panel-caption .icon { color:var(--canvas); }
.panel-unit--wide { width:216px; height:122px; --panel-columns:8; --cell-rows:3; }
.panel-unit--wide .panel-cells::after { content:''; position:absolute; top:0; bottom:0; left:50%; width:5px; transform:translateX(-50%); border-inline:1px solid #e0e3dd; background:#8f9990; }
.panel-unit--black { width:184px; height:144px; --cell-rows:6; --cell-surface:#252c29; --cell-line:#59665c; --cell-busbar:#455247; background:#383f3b; border-color:#5e6860; box-shadow:inset 0 0 0 1px #788279,0 3px 6px #20222210; }
.panel-unit--black .panel-cells { background:#737e74; border-color:#737e74; }
.panel-unit--black::after { content:''; position:absolute; right:2px; top:2px; width:13px; height:13px; border-top:2px solid var(--red); border-right:2px solid var(--red); pointer-events:none; }
.panel-caption { position:absolute; bottom:0; left:0; right:0; height:26px; display:flex; align-items:center; gap:10px; padding:0 10px; border-top:1px solid #7a807b; background:var(--canvas); }
.panel-caption>span { color:var(--red); font-size:8px; letter-spacing:.05em; }
.panel-caption>strong { font-family:Geist,Arial,sans-serif; font-size:11px; font-weight:500; }
.panel-caption .icon { width:13px; height:13px; color:var(--red); margin-left:auto; }
.brief-heading { padding-bottom:25px; margin-bottom:24px; border-bottom:1px solid var(--glass-border); }
.contact-panel .brief-heading h3 { font-size:32px; letter-spacing:-.04em; margin-bottom:8px; }
.brief-heading>p { color:var(--muted); font-size:13px; line-height:1.7; }
.group-label,.project-field legend.group-label { font-size:13px; font-weight:500; line-height:1.6; }
.group-number { display:inline-grid; place-items:center; font-size:9px; font-weight:500; color:var(--red); width:23px; height:23px; border:1px solid var(--glass-border); border-radius:50%; margin-right:6px; vertical-align:middle; }
.selection-summary { display:flex; align-items:flex-start; gap:9px; min-height:40px; margin-top:22px; padding:13px 0 0; border-top:1px solid var(--glass-border); font-size:12px; line-height:1.7; color:var(--muted); }
.selection-summary .icon { color:var(--red); width:18px; height:18px; margin-top:1px; }
.selection-summary.has-selection { color:var(--ink); }
/* Native dialog owns modality, focus containment, Escape and top-layer placement. */
.city-dialog { position:fixed; inset:0; margin:auto; width:calc(100% - 40px); max-width:460px; height:min(590px,calc(100dvh - 40px)); padding:0; border-radius:24px; max-height:calc(100dvh - 40px); overflow:hidden; }
.city-dialog[open] { display:flex; flex-direction:column; }
.city-dialog-header { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:26px 26px 20px; flex-shrink:0; }
.city-dialog-header .eyebrow { font-size:8px; color:var(--red); margin-bottom:8px; }
.city-dialog-header h2 { font-size:30px; line-height:1.15; letter-spacing:-.035em; }
.city-close { width:44px; height:44px; display:grid; place-items:center; flex-shrink:0; border:1px solid var(--glass-border); border-radius:50%; background:var(--glass-chip); }
.city-close .icon { width:18px; height:18px; }
.city-search-field { padding:0 26px 18px; flex-shrink:0; }
.city-search-field label { display:block; font-size:11px; margin-bottom:7px; }
.city-search-field input { width:100%; min-height:52px; padding:12px 15px; border:1px solid var(--glass-border); border-radius:10px; background:var(--surface); color:var(--ink); font-size:16px; }
.city-results { list-style:none; padding:0 14px; margin:0; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; min-height:0; flex:1 1 auto; }
.city-results li { padding:0; margin:0; }
.city-option { display:flex; align-items:center; justify-content:space-between; gap:14px; width:100%; min-height:48px; border:0; border-bottom:1px solid #d8dad580; background:none; padding:11px 13px; text-align:left; font-size:15px; border-radius:8px; }
.city-option[aria-pressed=true] { background:#b936430d; color:var(--red); }
.city-option:focus-visible { outline-offset:-3px; }
.city-option .icon { width:17px; height:17px; opacity:0; }
.city-option[aria-pressed=true] .icon { opacity:1; }
.city-empty { flex:1 1 auto; padding:22px 26px 30px; font-size:14px; color:var(--muted); line-height:1.8; }
.city-dialog-footer { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:10px 26px 14px; border-top:1px solid var(--glass-border); margin-top:12px; font-size:11px; color:var(--muted); flex-shrink:0; }
.city-cancel { border:0; border-radius:6px; background:none; padding:10px 0 10px 20px; min-height:44px; font-size:13px; color:var(--ink); }
@media(hover:hover) and (pointer:fine) {
 .project-option:hover .project-card { transform:translateY(-2px); border-color:#b9364366; }
 .city-option:hover { background:#b936430a; }
}
body[data-input=keyboard] .project-card { transition:none; }
@media(min-width:768px) and (max-width:1000px) {
 .contact { grid-template-columns:1fr; gap:32px; }
 .contact-copy>p:not(.eyebrow) { max-width:500px; }
 .project-options { grid-template-columns:1fr 1fr; }
 .project-card { padding:20px; }
 .project-copy strong { font-size:22px; }
 .project-copy small { font-size:13px; }
}
@media(max-width:767px) {
 .contact-panel { padding:25px 20px; }
 .contact-panel .brief-heading h3 { font-size:30px; }
 .brief-heading { padding-bottom:22px; margin-bottom:22px; }
 .brief-heading>p { font-size:13px; }
 .project-options { grid-template-columns:1fr; gap:10px; }
 .project-options .project-card { display:grid; grid-template-columns:82px 1fr; align-items:center; gap:12px; min-height:120px; padding:13px 32px 13px 10px; }
 .project-art { width:82px; height:86px; margin:0; }
 .project-art img { width:88px; height:88px; max-width:none; }
 .project-copy strong { font-size:19px; }
 .project-copy small { font-size:11px; }
 .project-check { top:12px; right:12px; width:18px; height:18px; }
 .project-check .icon { width:11px; height:11px; }
 .selection-summary { font-size:12px; }
 .city-dialog { top:auto; bottom:0; margin:0 auto; width:100%; max-width:560px; height:min(620px,calc(100dvh - 12px)); max-height:calc(100dvh - 12px); border-radius:24px 24px 0 0; padding:0 0 env(safe-area-inset-bottom,0px); transform:translateY(24px); }
 .city-dialog[open] { transform:translateY(0); }
 .city-dialog-header { padding:24px 22px 18px; }
 .city-search-field { padding-inline:22px; }

 .city-dialog-footer { padding-inline:22px; }
 @starting-style { .city-dialog[open] { transform:translateY(24px); opacity:0; } }
 .conveyor-window { padding-top:36px; }


}
@media(max-width:359px) {
 .contact-panel { padding-inline:16px; }
 .contact-panel .brief-heading h3 { font-size:27px; }
 .project-options .project-card { grid-template-columns:64px 1fr; gap:9px; padding-right:25px; }
 .project-art { width:64px; }
 .project-art img { width:70px; height:70px; }
 .project-copy strong { font-size:17px; }
 .project-copy small { font-size:10px; }
 .project-check { right:9px; top:10px; width:16px; height:16px; }
 .project-field legend.group-label { font-size:12px; }
}
@media(prefers-reduced-motion:reduce) {
 .project-option:hover .project-card { transform:none; }
 .project-card { transition:border-color 140ms var(--ease),background-color 140ms var(--ease); }
 .city-dialog,.city-dialog[open] { transform:none; }
 .conveyor-group { gap:28px 24px; }
 .panel-unit { width:154px; height:112px; }
}

/* Contact location follows the Perakende card; the phone is a labelled contact row. */
.contact-copy { min-width:0; }
.contact-location { margin-top:28px; padding:22px 24px 0; max-width:420px; border-radius:18px; }
.location-heading { display:flex; align-items:center; gap:13px; }
.location-pin { display:grid; place-items:center; flex-shrink:0; width:44px; height:44px; border:1px solid var(--glass-border); border-radius:12px; background:var(--glass-chip); color:var(--red); }
.location-pin .icon { width:21px; height:21px; }
.location-heading .eyebrow { font-size:9px; color:var(--muted); margin-bottom:3px; }
.location-heading h3 { font-size:25px; letter-spacing:-.035em; color:var(--red); }
.contact-location address { font-style:normal; font-size:14px; line-height:1.85; margin-top:18px; overflow-wrap:anywhere; }
.contact-location address>span { color:var(--muted); }
.location-map-link { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:48px; margin-top:14px; border-top:1px solid var(--glass-border); color:var(--red); font-size:13px; font-weight:500; }
.location-map-link .icon { width:18px; height:18px; }
.location-phone { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:86px; padding:16px 0 19px; border-top:1px solid var(--glass-border); }
.location-phone>span { display:flex; flex-direction:column; gap:2px; }
.location-phone>span>span { font-size:12px; color:var(--muted); }
.location-phone strong { font-family:Outfit,Arial,sans-serif; font-size:22px; font-weight:500; letter-spacing:-.02em; }
.location-phone .icon { width:21px; height:21px; color:var(--red); }
.footer-location .icon { width:15px; height:15px; }
@media(hover:hover) and (pointer:fine) {
 .location-map-link:hover,.location-phone:hover strong,.footer-location:hover { text-decoration:underline; text-underline-offset:4px; }
}
@media(max-width:767px) {
 .contact-location { max-width:none; padding:20px 20px 0; margin-top:24px; border-radius:16px; }
 .contact-location address { font-size:14px; }
 .location-phone strong { font-size:21px; }
}