@layer reset, base, components, sections, responsive;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body, h1, h2, h3, p, ol { margin: 0; }
  body { min-width: 320px; }
  img, svg, video { display: block; max-width: 100%; }
  button, input, textarea { font: inherit; }
  button, a { -webkit-tap-highlight-color: transparent; }
  a { color: inherit; text-decoration: none; }
}

@layer base {
  :root {
    --grid-ink: #0a1724;
    --deep-navy: #102638;
    --instrument-blue: #145f83;
    --sustainability-green: #286957;
    --signal-amber: #dfa928;
    --steel: #657482;
    --ice: #dce7ec;
    --paper: #f4f7f8;
    --white: #ffffff;
    --line: rgba(10, 23, 36, 0.15);
    --display: "IBM Plex Sans Condensed", "Arial Narrow", sans-serif;
    --body: "Manrope", Arial, sans-serif;
    --mono: "IBM Plex Mono", monospace;
    --shell: min(1180px, calc(100vw - 96px));
    --header-height: 96px;
    --motion-fast: 180ms;
    --motion-ui: 280ms;
    --motion-reveal: 560ms;
    --motion-hero: 820ms;
    --ease-standard: cubic-bezier(.2, .7, .2, 1);
    --ease-out-expo: cubic-bezier(.16, 1, .3, 1);
    --motion-distance-sm: 8px;
    --motion-distance-md: 20px;
  }

  body {
    background: var(--paper);
    color: var(--grid-ink);
    font-family: var(--body);
    font-size: 16px;
    line-height: 1.65;
    text-rendering: optimizeLegibility;
  }

  body.menu-open { overflow: hidden; }
  ::selection { background: var(--signal-amber); color: var(--grid-ink); }
  :focus-visible { outline: 3px solid var(--signal-amber); outline-offset: 4px; }
  .page-shell { width: var(--shell); margin-inline: auto; }
  .section { padding: 132px 0; }
  .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; left: 16px; top: -80px; z-index: 1000; background: var(--signal-amber); color: var(--grid-ink); padding: 12px 18px; font-weight: 700; transition: top .2s ease; }
  .skip-link:focus { top: 16px; }

  .section-kicker, .utility-label {
    display: block;
    color: var(--instrument-blue);
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
  }
  .section-kicker { margin-bottom: 22px; }
  .section-kicker::before { content: ""; display: inline-block; width: 26px; height: 2px; margin: 0 11px 4px 0; background: currentColor; }
  .section-kicker--light { color: #8ebbd0; }
  .section-heading { max-width: 810px; }
  .section-heading h2, .process-intro h2, .career h2, .contact-intro h2 {
    font-family: var(--display);
    font-size: clamp(42px, 5.2vw, 72px);
    font-weight: 600;
    letter-spacing: -.035em;
    line-height: .98;
  }
  .section-heading--compact h2 { font-size: clamp(42px, 4.4vw, 62px); }

  /* Reveal başlangıç durumları yalnız script çalışan tarayıcılarda gizlenir; JS yoksa içerik görünür kalır. */
  @media (scripting: enabled) {
    .reveal { opacity: 0; transform: translateY(var(--motion-distance-md)); }
    .reveal--children { opacity: 1; transform: none; }
    .reveal--children > * { opacity: 0; transform: translateY(12px); }
    .section-heading.reveal h2 { clip-path: inset(0 -4% 102% -4%); }
  }
  .reveal { transition: opacity var(--motion-reveal) var(--ease-standard) var(--reveal-delay, 0ms), transform var(--motion-reveal) var(--ease-out-expo) var(--reveal-delay, 0ms); }
  .reveal.is-visible { opacity: 1; transform: none; }
  .reveal--children > * { transition: opacity var(--motion-reveal) var(--ease-standard), transform var(--motion-reveal) var(--ease-out-expo); }
  .reveal--children.is-visible > * { opacity: 1; transform: none; }
  .reveal--children.is-visible > *:nth-child(2) { transition-delay: 70ms; }
  .reveal--children.is-visible > *:nth-child(3) { transition-delay: 140ms; }
  .reveal--children.is-visible > *:nth-child(4) { transition-delay: 210ms; }
  .reveal--children.is-visible > *:nth-child(5) { transition-delay: 280ms; }
  .reveal--children.is-visible > *:nth-child(6) { transition-delay: 350ms; }
  .section-heading.reveal h2 { transition: clip-path var(--motion-reveal) var(--ease-out-expo) 90ms; }
  .section-heading.reveal.is-visible h2 { clip-path: inset(-8% -8% -12% -8%); }
}

@layer components {
  .site-header {
    position: fixed;
    inset: 0 0 auto;
    z-index: 100;
    height: var(--header-height);
    background: transparent;
    border-bottom: 1px solid rgba(255, 255, 255, .2);
    transition: height .3s ease, background .3s ease, border-color .3s ease, box-shadow .3s ease;
  }
  .site-header.is-scrolled {
    height: 72px;
    background: rgba(248, 250, 251, .94);
    border-bottom-color: rgba(10, 23, 36, .1);
    box-shadow: 0 8px 30px rgba(10, 23, 36, .1);
    backdrop-filter: blur(6px) saturate(1.05);
  }
  .measure-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--signal-amber); transform: scaleX(0); transform-origin: left; pointer-events: none; }
  .header-inner { width: min(1120px, calc(100vw - 40px)); height: 100%; margin-inline: auto; display: flex; align-items: center; }
  .brand { width: 178px; min-height: 44px; flex: 0 0 178px; display: inline-flex; align-items: center; justify-content: flex-start; color: var(--grid-ink); }
  .brand-logo { width: 88%; height: auto; transform: translateY(2px); transition: filter .3s ease; }

  .site-header:not(.is-scrolled) .brand-logo { filter: brightness(0) invert(1); }
  .site-header:not(.is-scrolled) .primary-navigation > a,
  .site-header:not(.is-scrolled) .nav-group > button { color: var(--white); }
  .site-header:not(.is-scrolled) .header-cta { background: var(--white); color: var(--grid-ink); }
  .site-header.is-scrolled .services-menu { top: 72px; }

  body.menu-open .site-header {
    background: rgba(248, 250, 251, .99);
    border-bottom-color: rgba(10, 23, 36, .1);
  }
  body.menu-open .site-header .primary-navigation > a,
  body.menu-open .site-header .nav-group > button { color: var(--grid-ink); }
  body.menu-open .site-header .brand-logo { filter: none; }
  body.menu-open .site-header .menu-toggle span:not(.sr-only) { background: var(--grid-ink); }

  .primary-navigation { flex: 1 1 auto; margin-left: 36px; display: flex; align-items: stretch; justify-content: flex-start; height: 100%; }
  .primary-navigation > a, .nav-group > button { position: relative; display: flex; align-items: center; padding: 0 15px; border: 0; background: none; color: #263642; font-size: 13px; font-weight: 700; cursor: pointer; }
  .primary-navigation > a::after, .nav-group > button::after { content: ""; position: absolute; left: 15px; right: 15px; bottom: 0; height: 3px; background: var(--signal-amber); transform: scaleX(0); transform-origin: left; transition: transform var(--motion-ui) var(--ease-out-expo); }
  .primary-navigation > a:hover::after, .primary-navigation > a:focus-visible::after, .nav-group:hover > button::after, .nav-group.is-open > button::after { transform: scaleX(1); }
  .nav-group { position: relative; display: flex; }
  .nav-group > button svg { width: 11px; margin-left: 8px; fill: none; stroke: currentColor; stroke-width: 1.8; transition: transform .2s ease; }
  .nav-group.is-open > button svg { transform: rotate(180deg); }
  .services-menu { position: fixed; top: var(--header-height); left: 50%; width: min(1080px, calc(100vw - 64px)); display: grid; grid-template-columns: .72fr 1.75fr; opacity: 0; visibility: hidden; transform: translate(-50%, 8px); background: var(--white); border-top: 3px solid var(--signal-amber); box-shadow: 0 24px 60px rgba(10, 23, 36, .18); transition: opacity .22s ease, transform .22s ease, visibility .22s; }
  .nav-group:hover .services-menu, .nav-group.is-open .services-menu { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
  .services-menu__category { opacity: 0; transform: translateY(6px); transition: opacity var(--motion-ui) var(--ease-standard), transform var(--motion-ui) var(--ease-standard), background .22s ease; }
  .nav-group:is(:hover, .is-open) .services-menu__category { opacity: 1; transform: none; }
  .nav-group:is(:hover, .is-open) .services-menu__category:nth-child(2) { transition-delay: 60ms; }
  .nav-group:is(:hover, .is-open) .services-menu__category:nth-child(3) { transition-delay: 120ms; }
  .services-menu__intro { display: flex; flex-direction: column; padding: 34px; background: var(--grid-ink); color: var(--white); }
  .services-menu__intro span { font-family: var(--mono); color: #8ebbd0; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; }
  .services-menu__intro strong { display: block; margin-top: 28px; font-family: var(--display); font-size: 30px; font-weight: 600; line-height: 1.02; }
  .services-menu__all { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: auto; padding-top: 30px; border-top: 1px solid rgba(255,255,255,.2); color: rgba(255,255,255,.75); font-size: 10px; font-weight: 700; }
  .services-menu__all b { color: var(--signal-amber); font-size: 18px; font-weight: 400; }
  .services-menu__categories { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .services-menu__category { --menu-accent: var(--instrument-blue); position: relative; min-height: 154px; display: flex; flex-direction: column; padding: 20px 24px; overflow: hidden; transition: background .22s ease, color .22s ease; }
  .services-menu__category:where(:nth-child(odd)) { border-right: 1px solid var(--line); }
  .services-menu__category:where(:nth-child(-n+2)) { border-bottom: 1px solid var(--line); }
  .services-menu__category--solar { --menu-accent: #ba7d00; }
  .services-menu__category--electrical { --menu-accent: var(--instrument-blue); }
  .services-menu__category--mechanical { --menu-accent: #526b78; }
  .services-menu__category--sustainability { --menu-accent: var(--sustainability-green); }
  .services-menu__category span { color: var(--menu-accent); font-family: var(--mono); font-size: 9px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
  .services-menu__category strong { margin-top: 14px; font-family: var(--display); font-size: 27px; font-weight: 600; line-height: 1; }
  .services-menu__category small { margin-top: 10px; color: #63737d; font-size: 10px; line-height: 1.55; }
  .services-menu__category > b { margin-top: auto; color: var(--menu-accent); font-size: 20px; font-weight: 400; }
  .services-menu__category::after { content: ""; position: absolute; right: -42px; bottom: -54px; width: 130px; height: 130px; border: 1px solid var(--menu-accent); border-radius: 50%; opacity: .2; }
  .services-menu__category:hover { background: #edf2f4; }
  .services-menu__category--current { background: #edf2f4; box-shadow: inset 0 -4px var(--menu-accent); }

  .language-switcher { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-left: 18px; color: #52636f; font-size: 11px; font-weight: 700; letter-spacing: .05em; }
  .language-switcher .is-current { color: var(--grid-ink); }
  .language-switcher a { color: inherit; transition: color var(--motion-fast) var(--ease-standard); }
  .language-switcher a:is(:hover, :focus-visible) { color: var(--signal-amber); }
  .language-switcher__separator { opacity: .4; }
  .language-switcher [aria-disabled="true"] { opacity: .72; }
  .site-header:not(.is-scrolled) .language-switcher { color: rgba(255,255,255,.7); }
  .site-header:not(.is-scrolled) .language-switcher .is-current { color: var(--white); }
  body.menu-open .site-header .language-switcher { color: #52636f; }
  body.menu-open .site-header .language-switcher .is-current { color: var(--grid-ink); }

  .header-cta { flex: 0 0 auto; margin-left: 18px; display: inline-flex; align-items: center; gap: 16px; min-height: 44px; padding: 0 18px; background: var(--grid-ink); color: var(--white); font-size: 12px; font-weight: 700; }
  .header-cta svg, .button svg { width: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; transition: transform var(--motion-fast) var(--ease-standard); }
  :is(.header-cta, .button):is(:hover, :focus-visible) svg { transform: translateX(6px); }
  .menu-toggle { display: none; }

  .button { display: inline-flex; align-items: center; justify-content: center; gap: 28px; min-height: 54px; padding: 0 24px; border: 1px solid transparent; font-size: 12px; font-weight: 700; letter-spacing: .015em; transition: background .22s ease, color .22s ease, border-color .22s ease; }
  .button--light { background: var(--white); color: var(--grid-ink); }
  .button--light:hover { background: var(--signal-amber); }
  .button--outline { border-color: rgba(255,255,255,.5); color: var(--white); }
  .button--outline:hover { background: var(--white); color: var(--grid-ink); border-color: var(--white); }
  .button--dark { border: 0; background: var(--grid-ink); color: var(--white); cursor: pointer; }
  .button--dark:hover { background: var(--instrument-blue); }
  .text-link { position: relative; display: inline-block; border-bottom: 1px solid currentColor; color: var(--grid-ink); font-size: 12px; font-weight: 700; padding-bottom: 4px; }
  .text-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--signal-amber); transform: scaleX(0); transform-origin: left; transition: transform var(--motion-ui) var(--ease-out-expo); }
  .text-link:is(:hover, :focus-visible)::after { transform: scaleX(1); }
  .text-link--light { color: var(--white); }

  .cursor-dot, .cursor-ring { position: fixed; left: 0; top: 0; z-index: 300; pointer-events: none; opacity: 0; will-change: transform; }
  .cursor-dot { width: 4px; height: 4px; margin: -2px 0 0 -2px; border-radius: 50%; background: var(--signal-amber); }
  .cursor-ring { width: 22px; height: 22px; margin: -11px 0 0 -11px; }
  .cursor-ring::after { content: ""; position: absolute; inset: 0; border: 1px solid rgba(255, 255, 255, .8); border-radius: 50%; transition: transform var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) linear; }
  .cursor-ring.is-locked::after { transform: scale(1.35); border-color: var(--signal-amber); }
  .cursor-ring.is-cross::before { content: ""; position: absolute; inset: 0; color: rgba(255, 255, 255, .75); background: linear-gradient(currentColor, currentColor) center / 1px 10px no-repeat, linear-gradient(currentColor, currentColor) center / 10px 1px no-repeat; }
  .cursor-dot.is-on, .cursor-ring.is-on { opacity: 1; }
  html.has-cursor-fx [data-cursor-zone], html.has-cursor-fx [data-cursor-zone] :is(a, button, summary) { cursor: none; }
  @media (forced-colors: active) {
    .cursor-dot, .cursor-ring { display: none; }
    html.has-cursor-fx [data-cursor-zone], html.has-cursor-fx [data-cursor-zone] :is(a, button, summary) { cursor: auto; }
  }
}

@layer sections {
  .hero { position: relative; min-height: 820px; height: 100svh; overflow: hidden; display: flex; align-items: center; background: var(--grid-ink); color: var(--white); }
  .hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 58% center; }
  .hero-video-toggle { position: absolute; z-index: 3; right: 36px; bottom: 94px; width: 48px; height: 48px; display: grid; place-items: center; padding: 0; border: 1px solid rgba(223,169,40,.78); border-radius: 50%; background: rgba(10,23,36,.72); color: var(--white); cursor: pointer; backdrop-filter: blur(4px); transition: background var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard), transform var(--motion-fast) var(--ease-standard); }
  .hero-video-toggle[hidden] { display: none; }
  .hero-video-toggle:is(:hover, :focus-visible) { background: var(--signal-amber); color: var(--grid-ink); transform: scale(1.04); }
  .hero-video-toggle svg { width: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .hero-video-toggle__play { display: none; fill: currentColor; stroke: none; }
  .hero-video-toggle.is-paused .hero-video-toggle__pause { display: none; }
  .hero-video-toggle.is-paused .hero-video-toggle__play { display: block; }
  .hero-overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5, 15, 24, .94) 0%, rgba(5, 15, 24, .76) 40%, rgba(5, 15, 24, .2) 78%, rgba(5, 15, 24, .34) 100%), linear-gradient(0deg, rgba(5,15,24,.62), transparent 45%); }
  .hero-grid { position: absolute; inset: 0; opacity: .15; background-image: linear-gradient(rgba(255,255,255,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.12) 1px, transparent 1px); background-size: 80px 80px; mask-image: linear-gradient(90deg, black, transparent 66%); }
  .hero-content { position: relative; z-index: 2; padding-top: calc(var(--header-height) + 40px); }
  .hero-eyebrow { color: #b9d2dd; font-family: var(--mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; }
  .hero-eyebrow::before { content: ""; display: inline-block; width: 34px; height: 2px; margin: 0 13px 4px 0; background: var(--signal-amber); }
  .hero-title { max-width: 800px; margin-top: 26px; font-family: var(--display); font-size: clamp(64px, 7.6vw, 112px); font-weight: 600; letter-spacing: -.045em; line-height: .84; }
  .hero-lead { max-width: 650px; margin-top: 34px; color: rgba(255,255,255,.8); font-size: 17px; line-height: 1.7; }
  .hero-actions { display: flex; align-items: center; gap: 30px; margin-top: 34px; }
  .hero-footer { position: absolute; z-index: 2; left: 50%; bottom: 30px; transform: translateX(-50%); display: grid; grid-template-columns: repeat(3, auto) 1fr auto; align-items: center; gap: 36px; }
  .hero-footer p { display: flex; align-items: center; gap: 9px; color: rgba(255,255,255,.68); font-family: var(--mono); font-size: 9px; letter-spacing: .05em; text-transform: uppercase; }
  .hero-footer p span { width: 5px; height: 5px; background: var(--signal-amber); }
  .hero-footer a { grid-column: 5; }
  .hero-footer svg { width: 18px; fill: none; stroke: var(--white); stroke-width: 1.2; }
  @media (scripting: enabled) {
    .hero-reveal { opacity: 0; transform: translateY(var(--motion-distance-md)); }
    .hero-line__inner { transform: translateY(130%); }
  }
  .hero-reveal { transition: opacity var(--motion-reveal) var(--ease-standard), transform var(--motion-hero) var(--ease-out-expo); }
  .is-ready .hero-reveal { opacity: 1; transform: none; }
  .hero-line { display: block; overflow: hidden; padding-bottom: .14em; margin-bottom: -.14em; }
  .hero-line--tint { color: #a8c9d8; }
  .hero-line__inner { display: block; transition: transform var(--motion-hero) var(--ease-out-expo); }
  .is-ready .hero-line__inner { transform: none; }
  .is-ready .hero-eyebrow { transition-delay: .1s; }
  .is-ready .hero-line:nth-child(1) .hero-line__inner { transition-delay: .18s; }
  .is-ready .hero-line:nth-child(2) .hero-line__inner { transition-delay: .26s; }
  .is-ready .hero-lead { transition-delay: .34s; }
  .is-ready .hero-actions { transition-delay: .46s; }
  .is-ready .hero-footer { transition-delay: .58s; transform: translateX(-50%); }
  .is-ready .breadcrumb.hero-reveal { transition-delay: .08s; }
  .is-ready :is(.inner-hero, .ges-detail-hero) h1.hero-reveal { transition-delay: .18s; }
  .is-ready .ges-detail-hero__meta.hero-reveal { transition-delay: .14s; }
  .is-ready :is(.inner-hero__summary, .ges-detail-hero__lead).hero-reveal { transition-delay: .32s; }
  .is-ready .ges-detail-hero__actions.hero-reveal { transition-delay: .44s; }
  .is-ready .ges-instrument.hero-reveal { transition-delay: .5s; }
  .hero-sweep { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
  .hero-sweep::before { content: ""; position: absolute; top: 0; bottom: 0; left: -140px; width: 120px; opacity: 0; background: linear-gradient(90deg, transparent, rgba(223, 169, 40, .07) 55%, rgba(223, 169, 40, .3) 96%, rgba(255, 255, 255, .5)); }
  .is-ready .hero-sweep::before { animation: hero-sweep 2600ms var(--ease-standard) 1200ms 1 both; }
  @keyframes hero-sweep {
    0% { opacity: 0; transform: translateX(0); }
    12% { opacity: 1; }
    88% { opacity: 1; }
    100% { opacity: 0; transform: translateX(calc(100vw + 150px)); }
  }
  .calibration-rail { position: absolute; z-index: 2; right: 36px; top: 50%; width: 50px; height: 330px; transform: translateY(-42%); border-right: 1px solid rgba(255,255,255,.35); background: repeating-linear-gradient(to bottom, transparent 0 13px, rgba(255,255,255,.42) 13px 14px, transparent 14px 27px); background-size: 11px 100%; background-repeat: no-repeat; background-position: right top; color: rgba(255,255,255,.65); font-family: var(--mono); font-size: 8px; letter-spacing: .12em; }
  .calibration-rail::after { content: ""; position: absolute; right: -2px; top: calc(6% + var(--rail-progress, .5) * 64%); width: 5px; height: 58px; background: var(--signal-amber); }
  .calibration-rail span { position: absolute; right: 16px; writing-mode: vertical-rl; }
  .calibration-rail span:nth-child(1) { top: 0; }
  .calibration-rail span:nth-child(2) { top: 132px; }
  .calibration-rail span:nth-child(3) { bottom: 0; }

  .assurance-band { background: var(--white); border-bottom: 1px solid var(--line); }
  .assurance-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
  .assurance-grid article { min-height: 205px; padding: 42px 42px 34px 0; border-right: 1px solid var(--line); }
  .assurance-grid article + article { padding-left: 42px; }
  .assurance-grid article:last-child { border-right: 0; }
  .assurance-grid p { margin-top: 22px; max-width: 310px; font-family: var(--display); font-size: 22px; font-weight: 500; line-height: 1.25; }

  .contact-direct {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
  }
  .contact-direct__btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 46px;
    padding: 0 18px;
    border: 1px solid var(--line);
    background: var(--white);
    color: var(--grid-ink);
    font-size: 12px;
    font-weight: 700;
    transition: background var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard), transform var(--motion-fast) var(--ease-standard);
  }
  .contact-direct__btn svg { width: 18px; height: 18px; }
  .contact-direct__btn--whatsapp:is(:hover, :focus-visible) {
    border-color: #1f8a4c;
    background: #1f8a4c;
    color: var(--white);
    transform: translateY(-1px);
  }
  .contact-direct__btn--mail:is(:hover, :focus-visible) {
    border-color: var(--instrument-blue);
    background: var(--instrument-blue);
    color: var(--white);
    transform: translateY(-1px);
  }

  .float-contact {
    position: fixed;
    z-index: 90;
    right: 22px;
    bottom: 22px;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .float-contact__btn {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--white);
    box-shadow: 0 10px 28px rgba(10, 23, 36, .22);
    transition: transform var(--motion-fast) var(--ease-standard), filter var(--motion-fast) var(--ease-standard);
  }
  .float-contact__btn svg { width: 22px; height: 22px; }
  .float-contact__btn--whatsapp { background: #1f8a4c; }
  .float-contact__btn--mail { background: var(--instrument-blue); }
  .float-contact__btn:is(:hover, :focus-visible) { transform: scale(1.06); filter: brightness(1.06); }

  .about { background: var(--paper); }
  .split-layout { display: grid; grid-template-columns: 1.05fr .75fr; gap: 11vw; }
  .about-copy { padding-top: 76px; }
  .about-copy p { color: #465663; }
  .about-copy .lead-copy { color: var(--grid-ink); font-size: 19px; font-weight: 500; line-height: 1.75; }
  .about-copy p + p { margin-top: 26px; }
  .about-copy .text-link { margin-top: 36px; }

  .services { background: #e8eef1; }
  .services-header { display: grid; grid-template-columns: 1.25fr .55fr; align-items: end; gap: 10vw; }
  .services-header > p { padding-bottom: 4px; color: #52636f; font-size: 14px; }
  .service-list { margin-top: 74px; border-top: 1px solid rgba(10,23,36,.32); }
  .service-row { --row-accent: var(--instrument-blue); position: relative; display: grid; grid-template-columns: 52px 1fr 120px 48px; gap: 25px; align-items: center; min-height: 142px; border-bottom: 1px solid rgba(10,23,36,.22); transition: padding .25s ease, background .25s ease, opacity var(--motion-reveal) var(--ease-standard) var(--reveal-delay, 0ms), transform var(--motion-reveal) var(--ease-out-expo) var(--reveal-delay, 0ms); }
  .service-row:nth-of-type(1) { --row-accent: #c88c00; }
  .service-row:nth-of-type(3) { --row-accent: #526b78; }
  .service-row--sustainability { --row-accent: var(--sustainability-green); }
  .service-row::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 100%; height: 2px; background: var(--row-accent); transform: scaleX(0); transform-origin: left; transition: transform var(--motion-ui) var(--ease-out-expo); }
  .service-row:is(:hover, :focus-visible) { padding-inline: 18px; background: rgba(255,255,255,.55); }
  .service-row:is(:hover, :focus-visible)::after { transform: scaleX(1); }
  .service-number { align-self: start; padding-top: 42px; color: var(--instrument-blue); font-family: var(--mono); font-size: 11px; }
  .service-copy h3 { font-family: var(--display); font-size: clamp(25px, 3vw, 38px); font-weight: 600; line-height: 1; }
  .service-copy p { margin-top: 11px; max-width: 650px; color: #52636f; font-size: 13px; }
  .service-tag { justify-self: start; padding: 7px 10px; border: 1px solid rgba(20,95,131,.35); color: var(--instrument-blue); font-family: var(--mono); font-size: 9px; text-transform: uppercase; }
  .service-tag--solar { border-color: rgba(185,121,0,.42); color: #9d6800; }
  .service-tag--mechanical { border-color: rgba(82,107,120,.42); color: #526b78; }
  .service-tag--sustainability { border-color: rgba(40,105,87,.42); color: var(--sustainability-green); }
  .service-arrow { width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid rgba(10,23,36,.24); background: transparent; transition: background .2s ease, color .2s ease; }
  .service-arrow:hover, .service-row:is(:hover, :focus-visible) .service-arrow { background: var(--grid-ink); color: var(--white); }
  .service-arrow svg { width: 21px; fill: none; stroke: currentColor; stroke-width: 1.4; transition: transform var(--motion-fast) var(--ease-standard); }
  .service-row:is(:hover, :focus-visible) .service-arrow svg { transform: translateX(4px); }
  .scope-note, .reference-note { margin-top: 28px; color: #657482; font-size: 11px; }
  .scope-note span { margin-right: 10px; color: var(--instrument-blue); font-family: var(--mono); text-transform: uppercase; }

  .process { background: var(--grid-ink); color: var(--white); }
  .process-layout { display: grid; grid-template-columns: .8fr 1.1fr; gap: 11vw; }
  .process-intro { position: sticky; top: 132px; align-self: start; }
  .process-intro h2 { max-width: 530px; }
  .process-intro > p { max-width: 500px; margin-top: 34px; color: rgba(255,255,255,.62); }
  .process-intro .button { margin-top: 42px; }
  .process-steps { position: relative; list-style: none; padding: 0 0 0 26px; border-top: 1px solid rgba(255,255,255,.2); }
  .process-steps::before { content: ""; position: absolute; left: 4px; top: 0; bottom: 0; width: 1px; background: rgba(255,255,255,.16); }
  .process-steps::after { content: ""; position: absolute; left: 3px; top: 0; bottom: 0; width: 3px; background: var(--signal-amber); transform: scaleY(var(--rail-progress, 0)); transform-origin: top; transition: transform var(--motion-reveal) var(--ease-standard); }
  .process-steps li { display: grid; grid-template-columns: 72px 1fr; gap: 18px; padding: 34px 0; border-bottom: 1px solid rgba(255,255,255,.18); }
  .process-steps li > span { color: var(--signal-amber); font-family: var(--mono); font-size: 11px; transition: color var(--motion-ui) var(--ease-standard); }
  @media (scripting: enabled) { .process-steps li:not(.is-active) > span { color: rgba(255,255,255,.42); } }
  .process-steps h3 { font-family: var(--display); font-size: 29px; font-weight: 500; line-height: 1; }
  .process-steps p { margin-top: 10px; color: rgba(255,255,255,.55); font-size: 13px; }

  .references { background: var(--white); }
  .sector-grid { display: grid; grid-template-columns: repeat(2, 1fr); margin-top: 76px; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
  .sector-card { min-height: 280px; padding: 38px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); transition: background .25s ease, opacity var(--motion-reveal) var(--ease-standard) var(--reveal-delay, 0ms), transform var(--motion-reveal) var(--ease-out-expo) var(--reveal-delay, 0ms); }
  .sector-card:hover { background: var(--paper); }
  .sector-card > span { display: inline-block; color: var(--instrument-blue); font-family: var(--mono); font-size: 10px; border-bottom: 2px solid transparent; padding-bottom: 5px; transition: border-color var(--motion-ui) var(--ease-standard); }
  .sector-card:hover > span { border-color: var(--signal-amber); }
  .sector-card h3 { max-width: 420px; margin-top: 64px; font-family: var(--display); font-size: 34px; font-weight: 600; line-height: 1; }
  .sector-card p { max-width: 430px; margin-top: 18px; color: #60717e; font-size: 13px; }

  .articles { background: var(--paper); border-top: 1px solid var(--line); }
  .articles-heading { display: flex; justify-content: space-between; align-items: end; gap: 40px; }
  .article-grid { display: grid; grid-template-columns: 1.35fr 1fr 1fr; gap: 18px; margin-top: 70px; }
  .article-card { min-height: 380px; display: flex; flex-direction: column; padding: 32px; background: var(--white); border: 1px solid var(--line); }
  .article-card--featured { background: var(--instrument-blue); color: var(--white); border-color: var(--instrument-blue); }
  .article-type { font-family: var(--mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; }
  .article-card--featured .article-type { color: #c2dbe6; }
  .article-card h3 { margin-top: 70px; font-family: var(--display); font-size: 30px; font-weight: 600; line-height: 1.05; }
  .article-card p { margin-top: 20px; color: #60717e; font-size: 13px; }
  .article-card--featured p { color: rgba(255,255,255,.72); }
  .article-card a { margin-top: auto; padding-top: 28px; border-top: 1px solid currentColor; font-size: 11px; font-weight: 700; }
  .article-card a span { float: right; transition: transform var(--motion-fast) var(--ease-standard); }
  .article-card a:is(:hover, :focus-visible) span { transform: translateX(5px); }

  .career { padding: 78px 0; background: var(--deep-navy); color: var(--white); }
  .career-inner { display: grid; grid-template-columns: 1.2fr 1fr auto; gap: 60px; align-items: end; }
  .career h2 { max-width: 600px; font-size: clamp(40px, 4.5vw, 62px); }
  .career-inner > p { max-width: 420px; color: rgba(255,255,255,.62); font-size: 13px; }

  .contact { background: var(--ice); }
  .contact-layout { display: grid; grid-template-columns: .75fr 1.15fr; gap: 10vw; }
  .contact-intro > p { max-width: 550px; margin-top: 34px; color: #52636f; }
  .contact-meta { margin-top: 54px; display: grid; gap: 14px; }
  .contact-meta p { color: var(--grid-ink); font-size: 13px; font-weight: 600; }
  .contact-meta span { display: block; color: var(--instrument-blue); font-family: var(--mono); font-size: 9px; font-weight: 400; letter-spacing: .1em; text-transform: uppercase; }
  .contact-form { padding: 48px; background: var(--white); }
  .field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 22px; }
  .contact-form > label { display: block; margin-top: 26px; }
  .contact-form label span { display: block; margin-bottom: 8px; font-family: var(--mono); font-size: 9px; letter-spacing: .09em; text-transform: uppercase; }
  .contact-form input, .contact-form textarea, .contact-form select { width: 100%; border: 0; border-bottom: 1px solid #9aa8b2; border-radius: 0; background: transparent; color: var(--grid-ink); padding: 9px 0 12px; outline: none; transition: border-color .2s ease; }
  .contact-form textarea { resize: vertical; }
  .contact-form select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--instrument-blue) 50%), linear-gradient(135deg, var(--instrument-blue) 50%, transparent 50%); background-position: calc(100% - 12px) 17px, calc(100% - 7px) 17px; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
  .contact-form input, .contact-form textarea { background-image: linear-gradient(var(--instrument-blue), var(--instrument-blue)); background-repeat: no-repeat; background-size: 0% 2px; background-position: left bottom; transition: border-color .2s ease, background-size var(--motion-ui) var(--ease-out-expo); }
  .contact-form input:focus, .contact-form textarea:focus { background-size: 100% 2px; }
  .contact-form input:focus, .contact-form textarea:focus, .contact-form select:focus { border-color: var(--instrument-blue); }
  .form-footer { display: flex; align-items: center; justify-content: space-between; gap: 28px; margin-top: 38px; }
  .form-footer p { max-width: 290px; color: #71808b; font-size: 10px; }
  .form-status { min-height: 24px; margin-top: 16px; color: var(--instrument-blue); font-size: 12px; font-weight: 700; }

  .site-footer { background: #07111a; color: var(--white); }
  .footer-main { min-height: 220px; display: grid; grid-template-columns: 1fr 1fr auto; align-items: center; gap: 80px; }
  .brand--footer { color: var(--white); }
  .brand--footer .brand-logo { filter: brightness(0) invert(1); }
  .footer-main > p { max-width: 380px; color: rgba(255,255,255,.62); font-size: 12px; }
  .footer-main nav { display: flex; gap: 28px; font-size: 11px; font-weight: 700; }
  .footer-bottom { min-height: 72px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.58); font-family: var(--mono); font-size: 8px; letter-spacing: .04em; text-transform: uppercase; }
}

@layer responsive {
  @media (max-width: 1180px) {
    :root { --shell: min(100% - 56px, 1120px); }
    .header-inner { width: calc(100vw - 40px); }
    .brand { width: 160px; flex-basis: 160px; }
    .primary-navigation { margin-left: 28px; }
    .primary-navigation > a, .nav-group > button { padding-inline: 11px; font-size: 11px; }
    .language-switcher { gap: 5px; margin-left: 12px; font-size: 10px; }
    .header-cta { margin-left: 12px; padding-inline: 13px; }
    .header-cta span { display: none; }
    .career-inner { grid-template-columns: 1fr 1fr; }
    .career-inner .button { grid-column: 2; justify-self: start; }
  }

  @media (max-width: 920px) {
    :root { --header-height: 72px; --shell: min(100% - 40px, 840px); }
    .site-header, .site-header.is-scrolled { height: var(--header-height); }
    .brand { width: 166px; flex-basis: 166px; }
    .language-switcher { order: 1; margin-left: auto; }
    .header-cta { order: 2; margin-left: 12px; margin-right: 12px; }
    .menu-toggle { order: 3; width: 44px; height: 44px; display: grid; align-content: center; gap: 5px; padding: 10px; border: 0; background: transparent; }
    .menu-toggle span:not(.sr-only) { width: 24px; height: 2px; background: var(--white); transition: transform .2s ease, opacity .2s ease, background .2s ease; }
    .site-header.is-scrolled .menu-toggle span:not(.sr-only) { background: var(--grid-ink); }
    body.menu-open .site-header .menu-toggle span:not(.sr-only) { background: var(--grid-ink); }
    .menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
    .menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
    .primary-navigation { order: 4; position: fixed; inset: var(--header-height) 0 0; width: auto; height: auto; margin-left: 0; display: block; padding: 28px 20px 48px; overflow-y: auto; background: var(--paper); opacity: 0; visibility: hidden; transform: translateY(-12px); transition: opacity .25s ease, transform .25s ease, visibility .25s; }
    .primary-navigation.is-open { opacity: 1; visibility: visible; transform: none; }
    .primary-navigation > a, .primary-navigation .nav-group { opacity: 0; transform: translateY(-8px); transition: opacity var(--motion-ui) var(--ease-standard), transform var(--motion-ui) var(--ease-standard); }
    .primary-navigation.is-open > a, .primary-navigation.is-open .nav-group { opacity: 1; transform: none; }
    .primary-navigation.is-open > :nth-child(2) { transition-delay: 40ms; }
    .primary-navigation.is-open > :nth-child(3) { transition-delay: 80ms; }
    .primary-navigation.is-open > :nth-child(4) { transition-delay: 120ms; }
    .primary-navigation.is-open > :nth-child(5) { transition-delay: 160ms; }
    .primary-navigation.is-open > :nth-child(6) { transition-delay: 200ms; }
    .primary-navigation > a, .nav-group > button { width: 100%; min-height: 58px; justify-content: space-between; padding: 0; border-bottom: 1px solid var(--line); font-family: var(--display); font-size: 26px; font-weight: 600; }
    .primary-navigation > a::after, .nav-group > button::after { display: none; }
    .nav-group { display: block; }
    .services-menu { position: static; width: 100%; display: block; max-height: 0; overflow: hidden; opacity: 0; visibility: hidden; pointer-events: none; transform: none; border: 0; box-shadow: none; transition: max-height .4s ease, opacity .2s ease, visibility .2s; }
    .nav-group:not(.is-open) .services-menu { opacity: 0; visibility: hidden; pointer-events: none; }
    .nav-group.is-open .services-menu { max-height: 720px; opacity: 1; visibility: visible; pointer-events: auto; }
    .services-menu__intro { display: block; padding: 14px 0 8px 18px; background: transparent; color: var(--grid-ink); }
    .services-menu__intro > span, .services-menu__intro > strong { display: none; }
    .services-menu__all { margin-top: 0; padding: 12px 0; border-top: 0; border-bottom: 1px solid var(--line); color: var(--instrument-blue); font-size: 11px; }
    .services-menu__categories { display: block; padding: 0 0 18px 18px; }
    .services-menu__category { min-height: 0; display: grid; grid-template-columns: 80px 1fr auto; gap: 12px; align-items: center; padding: 15px 0; border-right: 0; border-bottom: 1px solid var(--line); overflow: visible; }
    .services-menu__category::after { display: none; }
    .services-menu__category span { font-size: 8px; }
    .services-menu__category strong { max-width: none; margin-top: 0; font-size: 20px; }
    .services-menu__category small { display: none; }
    .services-menu__category > b { margin-top: 0; padding-right: 4px; }
    .hero { min-height: 760px; }
    .hero-content { padding-top: 110px; }
    .hero-title { font-size: clamp(58px, 12vw, 90px); }
    .hero-video-toggle { right: 24px; bottom: 92px; }
    .float-contact { right: 16px; bottom: 16px; }
    .float-contact__btn { width: 48px; height: 48px; }
    .hero-footer { grid-template-columns: repeat(3, 1fr); gap: 18px; }
    .hero-footer a { display: none; }
    .calibration-rail { display: none; }
    .assurance-grid, .split-layout, .services-header, .process-layout, .contact-layout { grid-template-columns: 1fr; }
    .assurance-grid article { padding: 34px 24px !important; min-height: 165px; }
    .split-layout, .services-header, .process-layout, .contact-layout { gap: 60px; }
    .about-copy { padding-top: 0; }
    .process-intro { position: static; }
    .article-grid { grid-template-columns: 1fr 1fr; }
    .article-card--featured { grid-column: span 2; }
    .career-inner { grid-template-columns: 1fr; align-items: start; }
    .career-inner .button { grid-column: 1; }
    .footer-main { grid-template-columns: 1fr 1fr; gap: 30px; padding-block: 50px; }
    .footer-main nav { grid-column: span 2; }
  }

  @media (max-width: 640px) {
    :root { --shell: calc(100% - 32px); }
    .section { padding: 92px 0; }
    .header-inner { width: calc(100vw - 24px); }
    .brand { width: 150px; flex-basis: 150px; }
    .header-cta { display: none; }
    .language-switcher { gap: 4px; font-size: 10px; }
    .menu-toggle { margin-left: 12px; }
    .hero { min-height: 720px; height: 100svh; }
    .hero-video { object-position: 65% center; }
    .hero-video-toggle { right: 16px; bottom: 148px; width: 46px; height: 46px; }
    .hero-overlay { background: linear-gradient(90deg, rgba(5,15,24,.95), rgba(5,15,24,.55)), linear-gradient(0deg, rgba(5,15,24,.7), transparent); }
    .hero-content { padding-top: 90px; }
    .hero-title { font-size: clamp(50px, 16vw, 72px); line-height: .9; }
    .hero-lead { font-size: 14px; line-height: 1.65; }
    .hero-actions { align-items: flex-start; flex-direction: column; gap: 18px; }
    .hero-footer { bottom: 20px; grid-template-columns: 1fr; gap: 4px; }
    .hero-footer p { font-size: 8px; }
    .assurance-grid { grid-template-columns: 1fr; }
    .assurance-grid article { border-right: 0; border-bottom: 1px solid var(--line); }
    .service-row { grid-template-columns: 34px 1fr 42px; gap: 12px; padding: 24px 0; }
    .service-number { padding-top: 6px; }
    .service-tag { display: none; }
    .service-arrow { width: 42px; height: 42px; }
    .service-copy h3 { font-size: 27px; }
    .sector-grid, .article-grid, .field-grid { grid-template-columns: 1fr; }
    .sector-card { min-height: 245px; padding: 28px; }
    .article-card--featured { grid-column: 1; }
    .articles-heading { display: block; }
    .articles-heading .text-link { margin-top: 28px; }
    .career-inner { gap: 28px; }
    .contact-form { padding: 28px 22px; }
    .form-footer { align-items: flex-start; flex-direction: column; }
    .footer-main { grid-template-columns: 1fr; }
    .footer-main nav { grid-column: 1; flex-wrap: wrap; }
    .footer-bottom { min-height: 110px; align-items: flex-start; flex-direction: column; justify-content: center; gap: 10px; }
  }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
    .hero-reveal, .reveal, .reveal--children > * { opacity: 1; transform: none; }
    .hero-line__inner { transform: none; }
    .section-heading.reveal h2 { clip-path: none; }
    .hero-sweep, .hero-video-toggle, .measure-progress, .cursor-dot, .cursor-ring { display: none; }
    .services-menu__category { opacity: 1; transform: none; }
    .primary-navigation > a, .primary-navigation .nav-group { opacity: 1; transform: none; }
    .process-steps li > span { color: var(--signal-amber); }
    .process-steps::after { transform: none; }
  }
}