@font-face { font-family: "Barlow Condensed"; src: url("assets/fonts/barlow-condensed-700.woff2?v=20260903-2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("assets/fonts/barlow-condensed-800.woff2?v=20260903-2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("assets/fonts/manrope-400.woff2?v=20260903-2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("assets/fonts/manrope-600.woff2?v=20260903-2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("assets/fonts/manrope-800.woff2?v=20260903-2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }

:root {
  --navy: #062a4e;
  --blue: #0b5ba8;
  --orange: #c84b00;
  --orange-hot: #ff7a00;
  --paper: #f4f6f7;
  --paper-deep: #e7ebee;
  --line: #9aabb8;
  --draft: #74a8d1;
  --ink-soft: #40586d;
  --white: #ffffff;
  --display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --body: "Manrope", sans-serif;
  --panel-shadow: 0 16px 40px rgba(6, 42, 78, .12), 0 2px 4px rgba(6, 42, 78, .08);
  --ease: cubic-bezier(.16, 1, .3, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scrollbar-color: var(--orange) var(--navy); }
section[id], li[id] { scroll-margin-top: 7rem; }
body {
  margin: 0;
  overflow-x: clip;
  color: var(--navy);
  background: #dfe4e7;
  font-family: var(--body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
body::selection { color: var(--white); background: var(--orange); }
button, input, select, textarea { font: inherit; }
a { color: inherit; text-underline-offset: .25em; }
img, svg { display: block; max-width: 100%; }

.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-link {
  position: fixed; z-index: 100; top: 1rem; left: 1rem; padding: .75rem 1rem;
  color: var(--white); background: var(--navy); transform: translateY(-180%);
}
.skip-link:focus { transform: translateY(0); }

.site-header {
  position: sticky; z-index: 50; top: 0; min-height: 6rem; display: grid;
  grid-template-columns: minmax(240px, 1fr) auto auto; align-items: center; gap: 2.2rem;
  padding: .65rem clamp(1rem, 3vw, 3.25rem); border-bottom: 1px solid rgba(6, 42, 78, .22);
  background: rgba(246, 248, 249, .96); box-shadow: 0 6px 20px rgba(6, 42, 78, .08);
}
.brand { width: min(19rem, 34vw); height: 4.35rem; display: flex; align-items: center; }
.brand-crop { width: 100%; height: 100%; display: flex; align-items: center; }
.brand-crop img { width: 100%; height: 100%; object-fit: contain; object-position: left center; }
.site-nav { display: flex; align-items: center; gap: clamp(1.2rem, 2.4vw, 2.7rem); }
.site-nav a {
  position: relative; text-decoration: none; font-family: var(--display); font-weight: 700;
  font-size: 1rem; letter-spacing: .035em; text-transform: uppercase;
}
.site-nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -.45rem; height: 2px; background: var(--orange); transition: right .35s var(--ease); }
.site-nav a:hover::after, .site-nav a:focus-visible::after { right: 0; }
.header-cta {
  display: inline-flex; align-items: center; gap: 1rem; min-height: 3.15rem; padding: .7rem 1.2rem;
  color: var(--white); background: var(--navy); border: 1px solid #133f67; border-radius: .3rem;
  box-shadow: 0 8px 18px rgba(6, 42, 78, .2); text-decoration: none; font-weight: 800;
  transition: background .25s ease, transform .25s var(--ease), box-shadow .25s ease;
}
.header-cta:hover { background: var(--blue); transform: translateY(-2px); box-shadow: 0 12px 25px rgba(6,42,78,.25); }
.header-cta svg, .text-link svg { width: 1.1rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.nav-toggle { display: none; }

.panel {
  position: relative; background:
    linear-gradient(118deg, rgba(255,255,255,.92), rgba(237,241,243,.88)),
    linear-gradient(90deg, transparent 49.8%, rgba(6,42,78,.035) 50%, transparent 50.2%);
  border: 1px solid rgba(6,42,78,.28); box-shadow: inset 0 1px 0 #fff, var(--panel-shadow);
}
.panel-screw { position: absolute; z-index: 8; width: 13px; height: 13px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #8b969d 58%, #47545c 65%, #dce0e2 72%); box-shadow: 0 1px 2px rgba(0,0,0,.3); }
.panel-screw::after { content: ""; position: absolute; width: 7px; height: 1px; top: 6px; left: 3px; background: #52616a; transform: rotate(-28deg); }
.screw-tl { left: .7rem; top: .7rem; } .screw-tr { right: .7rem; top: .7rem; }
.screw-bl { left: .7rem; bottom: .7rem; } .screw-br { right: .7rem; bottom: .7rem; }

.hero {
  min-height: min(585px, calc(100vh - 6rem)); display: grid; grid-template-columns: minmax(470px, .8fr) minmax(650px, 1.2fr);
  align-items: stretch; overflow: hidden;
}
.hero::before { content: ""; position: absolute; z-index: 0; inset: 0; background: url("assets/hero-technical.png?v=20260903-2") center right / cover no-repeat; opacity: .84; }
.hero::after { content: ""; position: absolute; z-index: 1; inset: 0; background: linear-gradient(90deg, rgba(247,249,250,.98) 0 28%, rgba(247,249,250,.68) 38%, rgba(247,249,250,.08) 72%); pointer-events: none; }
.hero-copy { position: relative; z-index: 4; min-width: 0; padding: clamp(4rem, 8vh, 7rem) 1rem 8rem clamp(2rem, 5vw, 5.5rem); }
.hero-copy h1 {
  max-width: none; margin: 0; font-family: var(--display); font-size: clamp(4.4rem, 5.45vw, 5.3rem);
  font-weight: 800; line-height: .76; letter-spacing: -.025em; text-transform: uppercase;
}
.hero-copy h1 em { color: var(--orange); font-style: normal; }
.hero-copy p { max-width: 29rem; margin: 2.6rem 0 0; font-size: clamp(1.02rem, 1.4vw, 1.25rem); font-weight: 600; color: #173d61; }
.hero-copy::after {
  content: ""; position: absolute; left: clamp(2rem,5vw,5.5rem); right: -13rem; bottom: 6.2rem; height: 1px;
  background: linear-gradient(90deg, var(--orange-hot), var(--orange-hot) 72%, transparent 72%); height: 6px; border-radius: 4px;
}
.hero-copy::before { content: ""; position: absolute; z-index: 2; left: calc(clamp(2rem,5vw,5.5rem) - 9px); bottom: calc(6.2rem - 7px); width: 20px; height: 20px; border: 5px solid var(--orange-hot); border-radius: 50%; background: var(--paper); box-shadow: 0 0 0 4px rgba(255,106,0,.2), 0 5px 12px rgba(126,47,0,.25); }

.system-map { position: relative; z-index: 3; min-height: 585px; isolation: isolate; }
.city-drawing { display: none; }
.draft-lines, .dimension-lines { fill: none; stroke: currentColor; stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.draft-lines .faint { opacity: .4; stroke-dasharray: 6 7; }
.dimension-lines { opacity: .58; stroke-width: 1; }
.dimension-lines text { fill: currentColor; stroke: none; font: 700 12px var(--body); letter-spacing: .18em; }
.circuit-line { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; overflow: visible; }
.circuit-shadow, .circuit-core { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.circuit-shadow { stroke: rgba(201,73,0,.3); stroke-width: 18; filter: blur(9px); }
.circuit-core { stroke: var(--orange-hot); stroke-width: 6; filter: drop-shadow(0 3px 2px rgba(129,45,0,.45)); stroke-dasharray: 1; stroke-dashoffset: 1; animation: energize 1.8s .25s var(--ease) forwards; }
@keyframes energize { to { stroke-dashoffset: 0; } }

.stations { list-style: none; margin: 0; padding: 0; }
.station {
  position: absolute; z-index: 3; width: clamp(130px, 12vw, 165px); min-height: 142px; color: var(--navy); background: linear-gradient(145deg, #fff, #dfe4e7);
  border-radius: .7rem; box-shadow: 0 12px 25px rgba(6,42,78,.17), inset 0 1px 1px #fff;
  transition: transform .28s var(--ease), box-shadow .28s ease;
}
.station:hover { transform: translateY(-5px); box-shadow: 0 18px 32px rgba(6,42,78,.24), inset 0 1px 1px #fff; }
.station-link { min-height: 142px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .7rem; padding: .75rem .7rem 1.45rem; color: inherit; text-decoration: none; border-radius: inherit; }
.station::before, .station::after { content: ""; position: absolute; width: 7px; height: 7px; border-radius: 50%; background: #89969e; box-shadow: inset 0 0 0 2px #dfe4e7; }
.station::before { left: .35rem; top: .35rem; } .station::after { right: .35rem; bottom: .35rem; }
.station-icon { width: 62px; height: 62px; flex: 0 0 62px; display: grid; place-items: center; color: white; background: var(--navy); border: 4px solid var(--orange); border-radius: 50%; box-shadow: 0 0 0 4px #fff, 0 8px 16px rgba(6,42,78,.25); }
.station-icon svg { width: 35px; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.station b, .station small { display: block; font-family: var(--display); text-transform: uppercase; }
.station b { font-size: 1.18rem; line-height: 1; letter-spacing: .02em; text-align: center; }
.station small { margin-top: .35rem; color: var(--ink-soft); font-size: .65rem; font-weight: 700; letter-spacing: .06em; text-align: center; }
.station-link > span:last-child::after { content: ""; position: absolute; left: 50%; bottom: .7rem; width: 28px; height: 8px; transform: translateX(-50%); background: repeating-linear-gradient(0deg, #7f8d95 0 1px, transparent 1px 3px); opacity: .8; }
.station-1 { left: 4%; top: 51%; } .station-2 { left: 29%; top: 20%; }
.station-3 { left: 54%; top: 34%; } .station-4 { left: 75%; top: 52%; }

.hero-cta {
  position: absolute; z-index: 5; right: 4%; bottom: 2.1rem; min-width: 260px; min-height: 68px;
  display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: 1rem 1.3rem 1rem 1.6rem;
  color: var(--white); background: linear-gradient(145deg, #0c3a65, #031f3b); border: 1px solid #0d4f85; border-radius: .42rem;
  box-shadow: 0 14px 25px rgba(6,42,78,.32), inset 0 1px 0 rgba(255,255,255,.22); text-decoration: none; font-weight: 800;
  transition: transform .3s var(--ease), box-shadow .3s ease;
}
.hero-cta::before, .hero-cta::after { content: ""; position: absolute; left: .45rem; width: 7px; height: 7px; border-radius: 50%; background: #8a969d; box-shadow: inset 0 0 0 2px #dbe1e4; }
.hero-cta::before { top: .45rem; } .hero-cta::after { bottom: .45rem; }
.hero-cta svg { width: 25px; fill: var(--white); }
.hero-cta:hover { transform: translateY(-4px); box-shadow: 0 18px 35px rgba(6,42,78,.4); }
.hero-caption { position: absolute; left: clamp(2rem,5vw,5.5rem); bottom: 1.5rem; display: flex; gap: 2rem; font-family: var(--display); font-size: .78rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--ink-soft); }

.services { padding: 1.25rem clamp(1.5rem, 6vw, 7rem) 2rem; }
.section-heading { display: grid; grid-template-columns: .72fr 1fr; align-items: end; gap: 8vw; margin-bottom: .9rem; }
.section-heading h2, .project-intro h2, .process h2, .contact h2 { margin: 0; font-family: var(--display); font-weight: 800; font-size: clamp(3.5rem, 6.2vw, 6rem); line-height: .9; letter-spacing: -.02em; text-transform: uppercase; }
.section-heading h2 { font-size: clamp(2.35rem, 3.5vw, 3.35rem); }
.section-heading p { max-width: 48rem; margin: 0; font-size: 1.15rem; color: var(--ink-soft); }
.service-sequence { list-style: none; display: grid; grid-template-columns: repeat(4,1fr); margin: 0; padding: 0; border-top: 2px solid var(--navy); }
.service-sequence li { display: grid; grid-template-columns: 3rem 1fr; gap: 1rem; align-items: start; min-height: 8.6rem; padding: 1rem 1.4rem .7rem 0; border-right: 1px solid rgba(6,42,78,.25); }
.service-sequence li:last-child { border-right: 0; padding-right: 0; padding-left: 1.4rem; }
.service-sequence li::after { display: none; }
.sequence-index { font-family: var(--display); font-size: 3rem; font-weight: 800; color: var(--orange); font-variant-numeric: tabular-nums; }
.service-sequence h3 { margin: .3rem 0 .6rem; font-family: var(--display); font-size: 1.45rem; line-height: 1; text-transform: uppercase; }
.service-sequence p { max-width: 60ch; margin: 0; color: var(--ink-soft); }
.service-link { position: relative; color: inherit; text-decoration: none; }
.service-link::after { content: ""; position: absolute; left: 0; bottom: -.55rem; width: 2.2rem; height: 2px; background: var(--orange); transform: scaleX(.35); transform-origin: left; transition: transform .3s var(--ease); }
.service-link:hover::after, .service-link:focus-visible::after { transform: scaleX(1); }

.products { padding: clamp(5rem, 8vw, 8rem) clamp(1.5rem, 6vw, 7rem); color: var(--navy); background: var(--paper); }
.products-heading { display: grid; grid-template-columns: .85fr 1.15fr; align-items: end; gap: clamp(3rem, 8vw, 9rem); margin-bottom: clamp(4rem, 7vw, 7rem); }
.products-heading h2 { margin: 0; font-family: var(--display); font-size: clamp(3.5rem, 6.2vw, 6rem); font-weight: 800; line-height: .88; letter-spacing: -.02em; text-transform: uppercase; }
.products-heading p { max-width: 58ch; margin: 0 0 1.5rem; color: var(--ink-soft); font-size: 1.1rem; }
.products-contact { display: inline-flex; align-items: center; gap: .8rem; color: var(--blue); font-weight: 800; text-underline-offset: .28rem; }
.products-contact svg { width: 1.25rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s ease; }
.products-contact:hover svg { transform: translateX(.3rem); }
.catalog-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 2rem; margin-bottom: 2rem; padding: 1rem 0; border-top: 1px solid rgba(6,42,78,.2); border-bottom: 1px solid rgba(6,42,78,.2); }
.catalog-filters { display: flex; flex-wrap: wrap; gap: .55rem; }
.catalog-filters button { min-height: 2.65rem; padding: .62rem 1rem; border: 1px solid rgba(6,42,78,.28); border-radius: .3rem; color: var(--navy); background: var(--white); font: 800 .76rem/1 var(--body); letter-spacing: .055em; text-transform: uppercase; cursor: pointer; transition: color .2s ease, background-color .2s ease, border-color .2s ease, transform .2s var(--ease); }
.catalog-filters button:hover { border-color: var(--blue); transform: translateY(-1px); }
.catalog-filters button[aria-pressed="true"] { color: var(--white); border-color: var(--navy); background: var(--navy); box-shadow: inset 0 -3px 0 var(--orange); }
.catalog-count { flex: 0 0 auto; margin: 0; color: var(--ink-soft); font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; font-variant-numeric: tabular-nums; }
.product-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(.9rem, 1.4vw, 1.25rem); }
.product-card { min-width: 0; display: grid; grid-template-rows: auto 1fr; overflow: hidden; border: 1px solid rgba(6,42,78,.18); border-radius: .7rem; background: var(--white); transition: border-color .3s ease, box-shadow .3s ease, transform .3s var(--ease); }
.product-card[hidden] { display: none; }
.product-card:hover { border-color: rgba(11,91,168,.5); box-shadow: 0 16px 30px rgba(6,42,78,.11); transform: translateY(-3px); }
.product-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-bottom: 1px solid rgba(6,42,78,.12); background: var(--white); }
.product-media img { width: 100%; height: 100%; object-fit: cover; background: var(--white); transition: filter .45s ease, transform .55s var(--ease); }
.product-card:hover .product-media img { filter: saturate(1.04) contrast(1.02); transform: scale(1.03); }
.product-copy { min-height: 14rem; display: flex; flex-direction: column; padding: 1.25rem; }
.product-category { margin: 0 0 .55rem; color: var(--blue); font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.product-copy h3 { margin: 0 0 .7rem; font-family: var(--display); font-size: clamp(1.55rem, 1.8vw, 1.9rem); line-height: .95; text-transform: uppercase; text-wrap: balance; }
.product-copy > p:not(.product-category) { max-width: 42ch; margin: 0; color: var(--ink-soft); font-size: .88rem; line-height: 1.55; }
.product-copy a { display: inline-flex; align-items: center; justify-content: space-between; gap: .8rem; margin-top: auto; padding-top: 1rem; border-top: 1px solid rgba(6,42,78,.13); color: var(--navy); font-size: .78rem; font-weight: 800; letter-spacing: .035em; text-decoration: none; text-transform: uppercase; }
.product-copy a svg { width: 1.15rem; flex: 0 0 auto; fill: none; stroke: var(--orange); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s ease; }
.product-copy a:hover svg, .product-copy a:focus-visible svg { transform: translateX(.3rem); }

.project-types { display: grid; grid-template-columns: .85fr 1fr 1fr; min-height: 42rem; color: var(--white); background: var(--navy); }
.project-intro { padding: 6rem 4rem; display: flex; flex-direction: column; justify-content: space-between; border-right: 1px solid rgba(255,255,255,.18); }
.project-intro p { max-width: 28rem; margin: 3rem 0 0; color: #c6d7e5; }
.project-type { position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end; padding: 3rem; border-right: 1px solid rgba(255,255,255,.18); background: #041f39; }
.project-type::before { content: ""; position: absolute; z-index: 1; inset: 0; background: linear-gradient(180deg, rgba(3,22,40,.06) 30%, rgba(3,22,40,.92) 100%); pointer-events: none; }
.project-type::after { content: ""; position: absolute; z-index: 1; left: 0; bottom: 0; width: 5px; height: 42%; background: var(--orange); transform: scaleY(0); transform-origin: bottom; transition: transform .45s ease; pointer-events: none; }
.project-type:hover::after { transform: scaleY(1); }
.project-image { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2,.7,.2,1), filter .7s ease; }
.vertical-type .project-image { object-position: 57% center; }
.urban-type .project-image { object-position: 53% center; }
.project-type:hover .project-image { transform: scale(1.035); filter: saturate(1.08) contrast(1.03); }
.project-label, .project-type p { position: relative; z-index: 2; }
.project-label { max-width: 12ch; font-family: var(--display); font-size: clamp(2rem, 3vw, 3.3rem); line-height: .9; font-weight: 800; text-transform: uppercase; text-wrap: balance; }
.project-type p { max-width: 34ch; margin-bottom: 0; color: #e4edf4; text-shadow: 0 1px 12px rgba(3,22,40,.55); }
.tower { position: absolute; inset: 5rem 12% 6rem; border: 2px solid #6da9d6; transform: perspective(700px) rotateY(-9deg); opacity: .86; }
.tower::before { content: ""; position: absolute; inset: 7% 8%; background: repeating-linear-gradient(0deg, transparent 0 11%, rgba(116,168,209,.48) 11% 11.7%), repeating-linear-gradient(90deg, transparent 0 23%, rgba(116,168,209,.48) 23% 24%); }
.tower i { position: absolute; width: 12px; height: 12px; border: 2px solid var(--orange); border-radius: 50%; box-shadow: 0 0 16px var(--orange); }
.tower i:nth-child(1){left:10%;top:18%}.tower i:nth-child(2){right:17%;top:31%}.tower i:nth-child(3){left:42%;top:52%}.tower i:nth-child(4){right:10%;top:70%}.tower i:nth-child(5){left:20%;top:82%}
.street { position: absolute; inset: 11rem 7% 8rem; transform: perspective(700px) rotateX(58deg); border-bottom: 2px solid #6da9d6; }
.street::before, .street::after { content: ""; position: absolute; top: 0; bottom: 0; width: 36%; border: 2px solid #6da9d6; background: repeating-linear-gradient(90deg, transparent 0 30%, rgba(116,168,209,.45) 30% 32%); }
.street::before { left: 0; transform: skewY(-18deg); } .street::after { right: 0; transform: skewY(18deg); }
.street i { position: absolute; left: 49%; width: 2px; height: 28%; background: var(--orange); box-shadow: 0 0 12px var(--orange); }
.street i:nth-child(1){top:8%}.street i:nth-child(2){top:38%}.street i:nth-child(3){top:70%}

.process { min-height: 38rem; display: grid; grid-template-columns: 1fr 1fr; background: #edf1f3; }
.process-copy { padding: clamp(5rem,8vw,9rem); }
.process-copy p { max-width: 62ch; margin: 2.5rem 0; color: var(--ink-soft); font-size: 1.12rem; }
.text-link { display: inline-flex; align-items: center; gap: 1rem; font-weight: 800; color: var(--blue); }
.process-diagram { position: relative; overflow: hidden; background: linear-gradient(145deg, #d8dfe3, #fafbfb); border-left: 1px solid rgba(6,42,78,.2); }
.process-diagram::before { content: ""; position: absolute; inset: 10%; border: 1px solid rgba(6,42,78,.2); }
.current { position: absolute; left: 10%; right: 10%; top: 50%; height: 7px; background: var(--orange); box-shadow: 0 0 22px rgba(243,106,16,.45); }
.terminal { position: absolute; z-index: 2; top: calc(50% - 29px); width: 58px; height: 58px; display: grid; place-items: center; color: white; background: var(--navy); border: 4px solid var(--orange); border-radius: 50%; box-shadow: 0 0 0 7px #e6ebee; font: 800 1.5rem var(--display); text-decoration: none; transition: background-color .2s ease, box-shadow .2s ease, transform .2s var(--ease); }
.terminal:hover { background: var(--blue); box-shadow: 0 0 0 7px #e6ebee, 0 10px 22px rgba(6,42,78,.2); transform: translateY(-3px); }
.terminal:focus-visible { outline: 3px solid var(--navy); outline-offset: 6px; }
.terminal-a{left:12%}.terminal-b{left:35%}.terminal-c{left:58%}.terminal-d{right:12%}

.contact { display: grid; grid-template-columns: .85fr 1.15fr; padding: clamp(5rem,8vw,9rem); gap: clamp(3rem,8vw,9rem); }
.panel-dark { color: var(--white); background: radial-gradient(circle at 75% 10%, #154f7a, transparent 32%), var(--navy); border-color: #0a1d2d; }
.contact-copy p { max-width: 46ch; margin: 2.4rem 0; color: #c7d8e5; }
.contact-note { display: flex; align-items: center; gap: .8rem; color: #c7d8e5; font-size: .85rem; }
.contact-note span { width: 10px; height: 10px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 12px rgba(243,106,16,.75); }
.quote-form { display: grid; gap: 1.35rem; align-content: start; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.35rem; }
.quote-form label { display: grid; gap: .5rem; color: #d7e3ed; font-size: .82rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.quote-form label span { opacity: .66; text-transform: none; }
.quote-form input, .quote-form select, .quote-form textarea { width: 100%; color: var(--white); background: rgba(255,255,255,.07); border: 1px solid #6383a0; border-radius: .25rem; padding: .9rem 1rem; outline: none; caret-color: var(--orange); transition: border-color .2s, background .2s; }
.quote-form input:focus, .quote-form select:focus, .quote-form textarea:focus { background: rgba(255,255,255,.12); border-color: var(--orange); box-shadow: 0 0 0 3px rgba(243,106,16,.2); }
.quote-form option { color: var(--navy); background: white; }
.quote-form [aria-invalid="true"] { border-color: #ffad78; }
.form-status { min-height: 1.4rem; margin: 0; color: #ffd0b1; font-size: .9rem; }
.quote-form button { min-height: 3.6rem; display: flex; align-items: center; justify-content: space-between; padding: .8rem 1.2rem; color: var(--navy); background: var(--orange); border: 0; border-radius: .3rem; font-weight: 800; cursor: pointer; transition: transform .25s var(--ease), background .2s; }
.quote-form button:hover { background: #ff812c; transform: translateY(-2px); }
.quote-form button:disabled { cursor: wait; opacity: .65; transform: none; }

.site-footer { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 2rem; padding: 2rem clamp(1.5rem,6vw,7rem); color: #c6d7e5; background: #031b32; font-size: .82rem; }
.footer-brand { font: italic 800 1.65rem var(--display); text-decoration: none; letter-spacing: -.02em; }
.footer-brand span { color: var(--orange); }

:focus-visible { outline: 3px solid var(--orange); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }

@media (max-width: 1100px) {
  .site-header { grid-template-columns: minmax(220px,1fr) auto auto; gap: 1rem; }
  .site-nav { gap: 1.2rem; }
  .hero { grid-template-columns: minmax(390px,.78fr) minmax(520px,1.22fr); }
  .hero-copy { padding-left: 2.4rem; }
  .hero-copy h1 { font-size: clamp(4.5rem,7.5vw,6.2rem); }
  .station { width: 160px; }
  .station b { font-size: 1.1rem; }
  .station small { display: none; }
  .service-sequence { grid-template-columns: 1fr 1fr; }
  .service-sequence li:nth-child(2) { border-right: 0; }
  .service-sequence li:nth-child(n+3) { border-top: 1px solid rgba(6,42,78,.25); }
  .project-types { grid-template-columns: 1fr 1fr; }
  .project-intro { grid-column: 1/-1; min-height: 20rem; }
  .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
  .site-header { min-height: 5rem; grid-template-columns: 1fr auto; }
  .brand { width: 15rem; height: 3.75rem; }
  .header-cta { display: none; }
  .nav-toggle { width: 45px; height: 42px; display: grid; place-content: center; gap: 5px; border: 1px solid rgba(6,42,78,.25); background: white; border-radius: .25rem; }
  .nav-toggle span:not(.sr-only) { width: 22px; height: 2px; background: var(--navy); transition: transform .25s, opacity .2s; }
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .site-nav { position: fixed; left: 0; right: 0; top: 5rem; display: grid; gap: 0; padding: 1rem; background: var(--paper); border-bottom: 1px solid rgba(6,42,78,.2); box-shadow: var(--panel-shadow); transform: translateY(-130%); transition: transform .4s var(--ease); }
  .site-nav.is-open { transform: translateY(0); }
  .site-nav a { padding: 1rem; border-bottom: 1px solid rgba(6,42,78,.12); }
  .hero { min-height: auto; grid-template-columns: 1fr; }
  .hero::before { background-position: 36% center; opacity: .48; }
  .hero::after { background: linear-gradient(180deg, rgba(247,249,250,.98) 0 48%, rgba(247,249,250,.18) 78%); }
  .hero-copy { padding: 4rem 1.6rem 1rem; }
  .hero-copy h1 { font-size: clamp(4.25rem,18vw,6rem); }
  .hero-copy p { margin-top: 1.8rem; }
  .hero-copy::after { display: none; }
  .hero-copy::before { display: none; }
  .system-map { min-height: 660px; }
  .city-drawing { inset: 2% -12% 0 -18%; width: 135%; opacity: .48; }
  .circuit-line { inset: 2rem 0 0; height: 620px; transform: rotate(90deg) scale(.68,1.25); }
  .station { width: min(calc(100% - 3rem), 340px); min-height: 90px; }
  .station-link { min-height: 90px; flex-direction: row; justify-content: flex-start; padding: .7rem .9rem; }
  .station b, .station small { text-align: left; }
  .station-link > span:last-child::after { left: auto; right: .9rem; bottom: .7rem; transform: none; }
  .station-1 { left: 7%; top: 18%; } .station-2 { right: 5%; left: auto; top: 37%; }
  .station-3 { left: 7%; top: 56%; } .station-4 { right: 5%; left: auto; top: 75%; }
  .hero-cta { left: 7%; right: 5%; top: 1.2rem; bottom: auto; min-width: 0; }
  .hero-caption { display: none; }
  .section-heading { grid-template-columns: 1fr; gap: 2rem; margin-bottom: 3.5rem; }
  .service-sequence { grid-template-columns: 1fr; }
  .service-sequence li, .service-sequence li:last-child { grid-template-columns: 4rem 1fr; padding: 1.5rem 0; border-right: 0; border-top: 1px solid rgba(6,42,78,.25); }
  .project-types { grid-template-columns: 1fr; }
  .project-intro, .project-type { min-height: 34rem; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.18); }
  .project-intro { min-height: 25rem; padding: 4rem 1.5rem; }
  .products-heading { grid-template-columns: 1fr; align-items: start; gap: 2rem; }
  .product-grid { grid-template-columns: 1fr 1fr; }
  .process, .contact { grid-template-columns: 1fr; }
  .process-copy { padding: 5rem 1.5rem; }
  .process-diagram { min-height: 24rem; border-left: 0; border-top: 1px solid rgba(6,42,78,.2); }
  .contact { padding: 5rem 1.5rem; }
  .site-footer { grid-template-columns: 1fr; gap: .6rem; }
}

@media (max-width: 520px) {
  .site-header { min-height: 5rem; padding-left: 1rem; padding-right: 1rem; grid-template-columns: minmax(0,1fr) 45px; }
  .brand { width: 13.25rem; height: 3.45rem; }
  .nav-toggle { position: absolute; right: max(1rem, calc(100vw - 23.3rem)); }
  .hero-copy h1 { max-width: 22rem; font-size: clamp(3.35rem, 15.8vw, 4rem); }
  .hero-copy p { width: min(100%, 21rem); overflow-wrap: anywhere; }
  .system-map { width: min(100%, 390px); min-height: 650px; }
  .station-1, .station-2, .station-3, .station-4 { left: 1.75rem; right: auto; }
  .station { width: 82vw; }
  .station-icon { width: 54px; height: 54px; flex-basis: 54px; }
  .services { padding: 5rem 1.4rem; }
  .service-sequence li { grid-template-columns: 3rem 1fr; gap: 1rem; }
  .sequence-index { font-size: 2rem; }
  .field-row { grid-template-columns: 1fr; }
  .project-type { padding: 2rem 1.5rem; }
  .products { padding-left: 1.25rem; padding-right: 1.25rem; }
  .catalog-toolbar { align-items: flex-end; gap: 1rem; }
  .catalog-filters { flex-wrap: nowrap; margin-right: -1.25rem; padding-right: 1.25rem; overflow-x: auto; scrollbar-width: none; }
  .catalog-filters::-webkit-scrollbar { display: none; }
  .catalog-filters button { flex: 0 0 auto; }
  .catalog-count { display: none; }
  .product-grid { grid-template-columns: 1fr; }
  .product-copy { min-height: 12.5rem; }
}

.whatsapp-fab { position: fixed; z-index: 30; right: clamp(1rem, 2.2vw, 2rem); bottom: clamp(1rem, 2.2vw, 2rem); display: flex; align-items: center; gap: .7rem; min-height: 3.75rem; padding: .65rem 1.05rem .65rem .65rem; color: #fff; background: #25d366; border: 1px solid rgba(255,255,255,.42); border-radius: 999px; box-shadow: 0 12px 34px rgba(3,22,40,.28); font-family: var(--display); font-weight: 800; font-size: 1rem; letter-spacing: .045em; text-transform: uppercase; transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease; }
.whatsapp-fab:hover { color: #fff; background: #1fbd5b; transform: translateY(-3px); box-shadow: 0 17px 38px rgba(3,22,40,.34); }
.whatsapp-fab:focus-visible { outline: 3px solid var(--orange); outline-offset: 4px; }
.whatsapp-icon { width: 2.45rem; height: 2.45rem; display: grid; place-items: center; overflow: hidden; flex: 0 0 auto; border-radius: 50%; background: #25d366; }
.whatsapp-icon img { width: 84%; height: 84%; object-fit: contain; filter: invert(1); mix-blend-mode: screen; }
.whatsapp-status { position: fixed; z-index: 31; right: clamp(1rem, 2.2vw, 2rem); bottom: 5.75rem; max-width: min(23rem, calc(100vw - 2rem)); margin: 0; padding: .8rem 1rem; color: var(--white); background: var(--navy); border: 1px solid var(--orange); box-shadow: var(--panel-shadow); opacity: 0; visibility: hidden; transform: translateY(.5rem); transition: opacity .2s ease, transform .2s ease, visibility .2s; }
.whatsapp-status.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }

@media (max-width: 520px) {
  .whatsapp-fab { width: 3.7rem; height: 3.7rem; min-height: 0; padding: .6rem; justify-content: center; }
  .whatsapp-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .whatsapp-icon { width: 2.5rem; height: 2.5rem; }
}