/* ZFSOLENOID visual system. Keep the established homepage composition. */
@font-face {
  font-family:"ZF Navigation";
  src:url("/assets/fonts/Anton-Regular.ttf") format("truetype");
  font-style:normal;
  font-weight:400;
  font-display:swap;
}
:root {
  --bg:#080809; --text:#f5f5f7; --muted:#a1a1a6; --cyan:#8fc547;
  --line:rgba(255,255,255,.12);
  --font-system:-apple-system,BlinkMacSystemFont,system-ui,"SF Pro Text","Segoe UI","Helvetica Neue",Arial,"Microsoft YaHei",sans-serif;
  font-family:var(--font-system); font-synthesis:none; -webkit-font-smoothing:antialiased;
}
html { -webkit-text-size-adjust:100%; text-size-adjust:100%; }
[hidden] { display:none!important; }
body { font-family:var(--font-system); background:var(--bg); color:var(--text); }
body::before { background:none; }
button,a { -webkit-tap-highlight-color:transparent; }
button,h1,h2,h3 { font-family:inherit; }
h1 { font-weight:600; letter-spacing:-.035em; line-height:1.08; }
h2 { font-weight:600; letter-spacing:-.018em; }
.site-header-shell { --header-cyan:var(--cyan); background:#101011; }
.header { font-family:var(--font-system); border-bottom-color:var(--line); align-items:end; padding-bottom:8px; }
.header .wordmark { display:flex; align-items:center; width:clamp(230px,22vw,340px); transform:translateY(8px); }
.brand-logo { display:block; width:100%; height:auto; aspect-ratio:4/1; object-fit:contain; filter:url('#brand-header-colors'); }
.brand-filter { position:absolute; width:0; height:0; overflow:hidden; }
.main-nav { align-self:end; transform:none; }
.main-nav a { align-items:center; padding:0 12px; color:#d2d2d7; font-family:"ZF Navigation",Impact,"Arial Narrow",sans-serif; font-size:20px; font-weight:400; letter-spacing:.015em; text-transform:uppercase; border-radius:12px; }
.main-nav a[aria-current="page"] { color:var(--cyan); font-weight:400; }
.main-nav a[aria-current="page"]::after { bottom:0; width:40px; height:3px; background:var(--cyan); border-radius:2px; }
.main-nav a:hover,.main-nav a:focus-visible { background:var(--cyan); color:#101011; }
.main-nav a[aria-current="page"]:hover::after,.main-nav a[aria-current="page"]:focus-visible::after { background:#101011; }
.eyebrow{ color:#a1a1a6; letter-spacing:.09em; font-weight:500; }
.eyebrow>span { height:1px; }


/* Service headline: white information/technical lines and green support. */
.hero-services { padding-top:0; }
.hero .service-headline { font-size:clamp(36px,4vw,70px); line-height:1.08; letter-spacing:-.035em; }
.service-headline .service-line { display:block; }
.service-headline em { display:block; margin-top:.16em; }
.service-headline em > .service-line:first-child { color:var(--text); }

.globe-topline,.globe-bottomline { color:#a1a1a6; letter-spacing:.04em; }
.motion-button { background:#1b1b1dcf; color:#f5f5f7; border-color:#424245; font-weight:400; backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); }
.motion-button:hover { background:#29292b; border-color:#69696e; }
.motion-button>span:first-child { color:var(--cyan); }
.region-panel {
  margin:36px 0 32px; padding:68px 0 28px; min-width:0;
  background:#fff; color:#1d1d1f; border:0; border-radius:0;
  /* Extend the painted background without widening the page or its content. */
  box-shadow:0 0 0 100vmax #fff; clip-path:inset(0 -100vmax);
}
.selection-heading { flex-direction:column; align-items:center; justify-content:flex-start; margin-bottom:44px; padding-bottom:0; border-bottom:0; gap:22px; text-align:center; }
.selection-title { min-width:0; width:100%; }
.selection-heading h2 { margin:0; font-family:Arial,"Helvetica Neue",sans-serif; font-size:clamp(44px,3.6vw,56px); font-weight:700; line-height:1.12; letter-spacing:-.04em; text-wrap:balance; }
.region-panel .selected-summary { max-width:100%; flex-direction:row; align-items:center; justify-content:center; gap:10px; padding:0; border:0; text-align:center; overflow-wrap:normal; }
.summary-icon { display:block; width:24px; height:24px; flex:none; stroke:#1d1d1f; stroke-width:1.4; }
.summary-icon-accent { fill:var(--cyan); stroke:#fff; stroke-width:2; }
.summary-copy { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; column-gap:12px; row-gap:6px; min-width:0; }
.summary-name { color:#1d1d1f; font-size:16px; font-weight:500; line-height:1.4; letter-spacing:-.015em; overflow-wrap:break-word; }
.summary-state { display:inline-flex; align-items:center; gap:12px; color:#6e6e73; font-size:14px; font-weight:400; line-height:1.4; letter-spacing:0; }
.summary-state::before { content:""; width:4px; height:4px; flex:none; border-radius:50%; background:var(--cyan); }
.region-panel .regions { gap:20px 24px; }
.region {
  background:#111113; border:1px solid #242426; border-radius:14px;
  min-height:78px; padding:18px 24px; color:#fff;
  box-shadow:0 3px 10px #00000012;
  transform:none;
  transition:border-color .25s,background .25s;
}
.region:hover { background:#202022; border-color:#46464a; }
.region[aria-pressed="true"] { background:var(--cyan); border-color:var(--cyan); color:#fff; box-shadow:0 3px 10px #00000012; }
.region:not([aria-pressed="true"]):active { background:#202022; }
.region::before { content:""; position:absolute; left:10px; top:50%; transform:translateY(-50%); width:8px; height:8px; border-radius:50%; background:#fff; opacity:0; }
.region[aria-pressed="true"]::before { opacity:1; }
.region:focus-visible { outline-color:#42651f; outline-offset:5px; }
.region-en { font-size:18px; line-height:1.45; font-weight:700; letter-spacing:-.01em; transform:none; }
.region[aria-pressed="true"] .region-en { font-weight:700; }
.hotspot .pin-label { background:#1b1b1de8; border-color:#5d5d6255; border-top-color:#8fc547; border-radius:10px; backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); }
.hotspot .pin-label::before { background:#8fc54780; }
.hotspot[aria-pressed="true"] .pin { background:#f0f9e6; box-shadow:0 0 0 4px #8fc54730,0 0 12px #a6d46970; }
.pin-name { font:500 14px/1.35 var(--font-system); letter-spacing:0; text-transform:none; color:#f5f5f7; text-shadow:none; }
.loading { color:#d2d2d7; }
.loading-ring { border-color:#424245; border-top-color:var(--cyan); }
.company-card { background:#161617; border-color:#303032; border-radius:18px; }
.company-card:hover { background:#222224; border-color:#57575c; }
.company-logo { border-radius:12px; }
.company-wordmark { font-family:var(--font-system); color:#1d1d1f; }
.company-info small { color:#a1a1a6; letter-spacing:.06em; }
.company-info strong { font-weight:600; letter-spacing:-.02em; }
.company-info>span,.company-numbers span { color:#a1a1a6; }
.company-numbers strong { font-family:var(--font-system); font-weight:600; letter-spacing:-.03em; }

/* Keep company browsing inside the full-width white region-selection surface. */
.region-panel > .companies { margin-top:28px; border-top:1px solid #e5e5e7; padding:28px 0 6px; }
.region-panel .company-card { color:#f5f5f7; }
@media(max-width:600px) { .region-panel > .companies { margin-top:24px; padding:24px 0 4px; } }

footer { color:#a1a1a6; border-top-color:var(--line); line-height:1.5; }
footer a:hover { color:var(--text); text-decoration:underline; text-underline-offset:3px; }

.skip-link { position:absolute; top:8px; left:16px; padding:10px 14px; border-radius:12px; background:#8fc547; color:#17200f; transform:translateY(-180%); z-index:20; }
.skip-link:focus { transform:none; }
.globe-stage canvas:focus-visible { outline:2px solid var(--cyan); outline-offset:-5px; }

/* Information pages share a quiet light surface and the existing dark header. */
.content-page { color-scheme:light; --bg:#f5f5f7; --text:#1d1d1f; --muted:#6e6e73; --line:#d2d2d7; }
.content-page .header { --line:rgba(255,255,255,.12); }
.info-page .eyebrow{ color:#6e6e73; font-size:12px; }
.info-page h1{ font-weight:600; letter-spacing:-.035em; }
.info-page .lead { color:#1d1d1f; font-weight:500; letter-spacing:-.025em; }
.info-page p { color:#6e6e73; line-height:1.65; }
.info-page .info-action { color:#1d2813; background:#8fc547; border-color:transparent; border-radius:999px; padding:11px 22px; font-size:16px; font-weight:500; }
.info-page .info-action:hover { background:#9ed259; border-color:transparent; }
.resource-credit { margin-top:64px; padding-top:22px; border-top:1px solid #d2d2d7; }
.resource-credit h2 { margin:0 0 12px; font-size:16px; font-weight:600; letter-spacing:-.01em; }
.resource-credit p { margin:8px 0; font-size:13px; line-height:1.65; }
.resource-credit a { text-decoration:underline; text-underline-offset:3px; }
.resource-credit a:hover { color:#1d1d1f; }
.content-page .company-card { background:#fff; border-color:#e5e5e7; }
.content-page .company-card:hover { background:#fafafa; border-color:#b9b9bd; }
.content-page .company-info small,.content-page .company-info>span,.content-page .company-numbers span { color:#6e6e73; }
.content-page .company-numbers b { color:#42651f; }
.content-page footer { color:#6e6e73; }
@media(max-width:1000px) { .header .wordmark { width:clamp(200px,calc(30vw - 70px),230px); transform:none; } .main-nav a { font-size:18px; } .region-panel { padding:56px 0 24px; } .region-panel .regions { gap:18px 16px; } .region-en { font-size:17px; } }
@media(min-width:601px) and (max-width:900px) { .hero .service-headline { font-size:clamp(24px,4.1vw,37px); } }
@media(max-width:760px) {
  .selection-heading { align-items:center; gap:20px; }
  .summary-icon { width:22px; height:22px; }
  .summary-name { font-size:15px; }
  .summary-state { font-size:13px; }
}
@media(max-width:600px) {
  .hero .service-headline { font-size:clamp(29px,8.6vw,44px); }

  .header .wordmark { width:clamp(160px,46vw,230px); }
  .main-nav a { font-size:16px; padding:0 4px; }
  .region-panel { margin:28px 0 24px; padding:48px 0 24px; }
  .selection-heading { margin-bottom:32px; padding-bottom:0; gap:18px; }
  .selection-heading h2 { font-size:36px; }
  .summary-copy { flex-direction:column; }
  .summary-state::before { display:none; }
  .region-panel .regions { gap:18px 12px; }
  .regions .region { min-height:84px; padding:16px; }
  .region::before { left:4px; width:6px; height:6px; }
  .region-en { font-size:16px; }
  .pin-name { font-size:13px; }
}
@media(max-width:350px) { .header .wordmark { width:145px; } .main-nav a { font-size:14px; padding:0; } .globe-stage { width:100%; margin:7px 0 0; } .region-panel { padding:44px 0 22px; } .region-panel .regions { gap:18px 10px; } .selection-heading h2 { font-size:32px; } .regions .region { padding:14px; } .region-en { font-size:16px; } }
@media(prefers-reduced-motion:reduce) { .region,.region:hover,.region[aria-pressed="true"],.region:active,.region-en { transition:none; transform:none; } .region::before { transform:translateY(-50%); } }

/* Use the phone composition on wider mobile and foldable viewports too. */
@media(max-width:900px) {
  .header .wordmark { width:clamp(160px,35vw,200px); }
  .main-nav a { font-size:16px; }
  .hero { display:flex; flex-direction:column; padding-top:28px; }
  .hero-copy { align-self:stretch; padding:0; }
  .hero .service-headline { font-size:clamp(32px,5.6vw,48px); line-height:1.08; }
  .globe-stage { flex:none; width:100%; max-width:460px; aspect-ratio:1; margin:18px 0 56px; }
  .globe-topline { top:0; left:0; right:0; font-size:11px; }
  .globe-topline>span:first-child { visibility:visible; }
  .globe-bottomline { top:calc(100% + 4px); bottom:auto; left:0; right:0; gap:12px; font-size:14px; }
  #motion-hint { min-width:0; }
  .motion-hint-extra { display:none; }
  .motion-button { flex:none; min-height:44px; padding:10px 14px; font-size:13px; white-space:nowrap; }
  .region-panel { align-self:stretch; width:100%; margin-top:24px; padding-top:44px; }
  .region-panel .regions { grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
  .regions .region { grid-column:auto; min-height:84px; padding:16px 16px 16px 30px; }
  .region::before { left:10px; }
}