:root {
  color-scheme: dark;
  --ink: #e9f6fc;
  --muted: #afc8d6;
  --dark: #06101a;
  --paper: #091724;
  --mint: #91ecfa;
  --green: #a1edf9;
  --line: #345466;
  --gold: #ffc184;
  --glass: #112839;
  --nav-height: 82px;
}

body { background: var(--paper); }
::selection { background: var(--mint); color: var(--dark); }
:focus-visible { outline-color: var(--gold); }
.skip { color: #083949; }
.header { border-color: #263b4a; }
.header nav a:last-child { border-color: #47778b; }
.button, .hero .button, .mobile-actions .button {
  color: #061624; background: var(--mint); border-color: var(--mint);
}
.button:hover, .hero .button:hover { color: #061624; background: #c7f6fe; }
.hero .secondary, .mobile-actions .secondary { color: var(--ink); background: #102233; border-color: #4f758a; }
.hero .secondary:hover, .mobile-actions .secondary:hover { color: var(--white); background: #213c50; }

.circuit-hero {
  position: relative;
  isolation: isolate;
  min-height: calc(100svh - var(--nav-height));
  display: grid;
  grid-template-rows: 1fr auto;
  background: radial-gradient(ellipse at 72% 54%, #132e41 0, #0c1e2e 34%, #06101a 70%);
}
.circuit-hero::before {
  position: absolute;
  content: "";
  z-index: -1;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, #a0e8ff20 1px, transparent 1.3px);
  background-size: 19px 19px;
  mask-image: linear-gradient(90deg, transparent 10%, #000 79%);
}
.hero-film { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; opacity: .22; pointer-events: none; }
.hero-grid { grid-template-columns: 1.06fr 1fr; gap: clamp(24px, 4vw, 62px); padding-block: clamp(38px, 6vh, 88px); }
.hero h1 { font-size: clamp(2.7rem, 6vw, 5.7rem); letter-spacing: -.04em; line-height: .99; }
.hero h1 em { display: block; color: var(--mint); text-shadow: 0 0 30px #70dbff45; }
.hero .lead { color: #bfd4e0; max-width: 52ch; }
.hero-instrument { min-width: 0; }
.hero .visual { width: 100%; background: #071624; border-color: #396377; box-shadow: 0 24px 80px #0008; }
.visual svg { width: 100%; height: auto; }
.instrument-bar { min-height: 42px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 2px 0; color: #afcbd8; font-size: .77rem; }
.instrument-bar i { display: inline-block; margin-right: 5px; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 12px #ffc18485; }
.motion-toggle { border: 0; padding: 5px 0; background: transparent; color: var(--muted); text-decoration: underline; text-underline-offset: .18em; }
.proof { background: #0d2131; border-block: 1px solid #294653; }
.proof-grid span::before { color: var(--gold); }
.subhero, .band { background: #102333; border-color: #2b485c; }
.subhero { background-image: radial-gradient(ellipse at 100% 45%, #193c50 0, transparent 64%); }
.card, .callout, form { background: #112635; border-color: var(--line); }
.service, .project { position: relative; background: #0e2231; border: 1px solid #38586b; border-radius: 14px; }
.service:hover { background: #102b3c; border-color: #639db0; }
.service[data-hover], .project[data-hover] {
  background: radial-gradient(ellipse at var(--pointer-x, 50%) var(--pointer-y, 50%), #214556 0, #122d40 34%, #0e2231 72%);
  border-color: #699eb1;
}
.service[data-hover]::before, .project[data-hover]::before {
  content: "";
  position: absolute;
  inset: -1px;
  padding: 1px;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(circle 120px at var(--pointer-x) var(--pointer-y), #c8faff, transparent);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}
.service a { align-self: end; justify-self: start; margin-top: 16px; }
.service span { color: var(--gold); }
.service a span { color: inherit; font: inherit; }
.expertise-flow { display: grid; grid-template-columns: minmax(0, 1.26fr) minmax(0, .9fr); gap: clamp(18px, 5vw, 66px); margin-top: 24px; align-items: start; }
.equipment-frame { min-width: 0; border: 1px solid #38586b; background: radial-gradient(ellipse at 50% 44%, #163747, #091724 75%); border-radius: 14px; overflow: hidden; }
.equipment { display: block; width: 100%; max-height: 59vh; height: auto; }
.equipment .case { stroke: #638395; stroke-width: 1.6; fill: #0b1a25; }
.equipment .panel-mark { stroke: #315061; }
.equipment .panel-label { fill: #adc8d3; stroke: none; font: 13px ui-monospace, Consolas, monospace; letter-spacing: 1.3px; }
.equipment .device { stroke-width: 2; }
.equipment .device-cfo { stroke: #79e8fa; }
.equipment .device-cfa { stroke: #9aa9ff; }
.equipment .device-ssi { stroke: #ffc184; }
.equipment .device-control { stroke: #90ebc9; }
.equipment .device-accent { fill: #79e8fa; fill-opacity: .3; }
.equipment-index { display: flex; flex-wrap: wrap; gap: 8px 15px; padding: 12px 18px; border-top: 1px solid #38586b; color: var(--muted); font-size: .79rem; }
.service-sequence { display: grid; gap: 12px; }
.service-sequence .service { min-width: 0; grid-template-rows: auto auto auto 1fr; }
.metrics > div, .steps li { border-color: var(--line); }
.split { grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); }
.metrics dd { color: var(--mint); }
.metrics > div:nth-child(2) dd { color: var(--gold); }
.sectors { color: var(--mint); margin-bottom: 0; }
.sector-reel { overflow: hidden; margin-bottom: 17px; padding-block: 6px; }
.sector-reel .sectors { width: max-content; max-width: 100%; }
.sector-reel li { border: 1px solid #43647a; border-radius: 6px; padding: 4px 9px; color: var(--ink); }
.projects { border: 0; display: grid; gap: 14px; }
.project { min-height: 136px; padding: 24px; align-content: center; }
.project h3 { font-size: clamp(1.18rem, 2vw, 1.65rem); }
.project p { color: var(--muted); }
.project .photo { order: -1; margin: 0; }
.project .photo img { border-radius: 8px; }
/* The original proportions keep the entire equipment visible. */
.photo.photo-chantier { width: min(420px, calc(100% - 40px)); }
.photo.photo-chantier img {
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
  aspect-ratio: auto;
  object-fit: contain;
}
.project .photo.photo-chantier { width: min(100%, 300px); }

@media (min-width: 741px) {
  .project:has(.photo-chantier) {
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 24px;
    align-items: center;
  }
}
.plan-section { display: grid; grid-template-columns: .75fr 1.25fr; gap: clamp(22px, 4vw, 58px); align-items: center; }
.comparison { --split: 52%; min-width: 0; }
.comparison-stage { position: relative; border: 1px solid #597e91; border-radius: 12px; overflow: hidden; }
.comparison-stage svg { display: block; width: 100%; height: auto; }
.comparison-stage svg text { font: 15px ui-monospace, Consolas, monospace; stroke: none; }
.comparison-layer { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--split)); }
.comparison-divider { position: absolute; inset-block: 0; left: var(--split); width: 2px; background: #91ecfa; pointer-events: none; }
.comparison label { margin-top: 12px; }
.comparison input[type="range"] { accent-color: var(--mint); padding: 0; background: transparent; border: 0; min-height: 36px; }
.comparison-labels { display: flex; justify-content: space-between; color: var(--muted); font-size: .8rem; }
input:not([type="checkbox"]), select, textarea { color: var(--ink); background: #0b1b28; border-color: #7290a0; }
input::placeholder, textarea::placeholder { color: #a9bfcd; }
.cookie-panel { background: #122737; border-color: #668c9d; color: var(--ink); }
.cookie-actions button { color: var(--ink); background: #203e51; border-color: #6d97ab; }
.cookie-actions button:hover { background: #305468; }
.mobile-actions { border-color: #38586b; }

.pulse { opacity: 0; stroke: #8df6ff; stroke-width: 4; stroke-dasharray: .12 1; stroke-linecap: round; }
.pulse-c { stroke: #ffc184; }

@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  .service-sequence .service, .project {
    background-color: #122d3cbb;
    backdrop-filter: blur(6px);
  }
  .motion-ready .equipment-frame { position: sticky; top: 22px; }
  .motion-ready .service-sequence .service { min-height: min(38vh, 315px); padding: clamp(22px, 3vw, 37px); }
  .motion-ready .equipment [data-stage-layer] { opacity: .16; transition: opacity 300ms ease-out; }
  .motion-ready .equipment [data-stage-layer].is-built { opacity: 1; }
  .motion-ready .service.is-active { border-color: #75c4d8; }
  .motion-ready .hero-instrument.is-visible .pulse { animation: carry-current 2700ms linear infinite; }
  .motion-ready .hero-instrument.is-visible .pulse-b { animation-delay: 750ms; }
  .motion-ready .hero-instrument.is-visible .pulse-c { animation-delay: 400ms; }
  .motion-ready .sector-reel { max-width: 390px; }
  .motion-ready .sector-reel.is-visible .sectors { animation: sector-current 18s ease-in-out infinite alternate; }
  .motion-ready .sector-reel .sectors { max-width: none; flex-wrap: nowrap; }
  .motion-ready .sector-reel .sectors li { flex: none; white-space: nowrap; }
  .motion-ready .sector-reel:focus-within .sectors, .motion-ready .sector-reel:hover .sectors { animation-play-state: paused; }
  .motion-ready .magnet { translate: var(--magnet-x, 0) var(--magnet-y, 0); transition: translate 140ms ease-out, background-color 140ms ease-out; }
  .motion-ready .service:hover, .motion-ready .button:hover { transform: none; }
  .motion-ready.cursor-ready body::after {
    content: "";
    pointer-events: none;
    position: fixed;
    z-index: 3;
    inset: 0;
    background: radial-gradient(circle 100px at var(--cursor-x) var(--cursor-y), #83e5fa14, transparent);
  }
  html:not(.motion-ready) .equipment [data-stage-layer] { opacity: 1; }
  @view-transition { navigation: auto; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 180ms; }
}

@media (prefers-reduced-motion: no-preference) {
  .circuit-hero h1 em { animation: switch-light 820ms ease-out both; }
  .breaker-switch { animation: close-breaker 500ms cubic-bezier(.2,.85,.2,1) both; }
}

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr 1fr; }
  .hero h1 { font-size: clamp(2.35rem, 6vw, 4.35rem); }
  .expertise-flow { grid-template-columns: 1fr; }
  .equipment-frame { width: min(100%, 600px); }
  .equipment { max-height: 400px; }
}

@media (max-width: 740px) {
  .circuit-hero { min-height: auto; }
  .hero-grid, .plan-section { grid-template-columns: 1fr; }
  .hero h1 { font-size: clamp(2.5rem, 8vw, 3.65rem); }
  .hero .visual svg { max-height: 320px; }
  .instrument-bar { min-height: 35px; }
  .service-sequence { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
  .project { padding: 19px; }
}

@media (max-width: 565px) {
  .split { grid-template-columns: minmax(0, 1fr); }
}

@keyframes carry-current {
  8%, 86% { opacity: 1; }
  to { stroke-dashoffset: -1; opacity: 0; }
}
@keyframes close-breaker {
  from, 40% { transform: translateY(23px); }
  72% { transform: translateY(-2px); }
  to { transform: translateY(0); }
}
@keyframes switch-light {
  from { text-shadow: 0 0 0 transparent; }
  65% { text-shadow: 0 0 38px #8af5ff82; }
  to { text-shadow: 0 0 30px #70dbff45; }
}
@keyframes sector-current {
  15% { translate: 0; }
  85%, to { translate: var(--sector-shift, 0); }
}