:root {
    --bg: #f3efe5;
    --surface: #fffaf0;
    --ink: #112940;
    --muted: #657383;
    --accent: #ff5c35;
    --line: rgba(17, 41, 64, .2);
    --page: min(1320px, calc(100vw - 48px));
    --display: "Bodoni Moda", Georgia, serif;
    --sans: "Manrope", Arial, sans-serif;
    --mono: "DM Mono", monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--bg); font-family: var(--sans); }
a { color: inherit; }
img { display: block; max-width: 100%; }
button, input, textarea { font: inherit; }

.concept-header {
    position: absolute;
    z-index: 20;
    top: 0;
    left: 0;
    right: 0;
    width: var(--page);
    margin: auto;
    min-height: 96px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--line);
}

.concept-brand img { width: 154px; height: auto; }
.concept-nav { display: flex; align-items: center; gap: 30px; }
.concept-nav a { font-size: 13px; font-weight: 700; text-decoration: none; }
.concept-nav .nav-quote { padding: 13px 18px; color: #fff; background: var(--ink); }
.concept-menu { display: none; border: 0; background: none; color: inherit; font-size: 24px; }

.concept-hero {
    position: relative;
    min-height: min(900px, 100vh);
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(390px, .92fr);
    padding-left: max(24px, calc((100vw - 1320px) / 2));
}

.hero-copy {
    position: relative;
    z-index: 2;
    align-self: center;
    max-width: 760px;
    padding: 150px 8vw 96px 0;
}

.eyebrow {
    margin: 0 0 26px;
    color: var(--accent);
    font: 500 12px/1 var(--mono);
    letter-spacing: .16em;
    text-transform: uppercase;
}

.hero-copy h1 {
    max-width: 760px;
    margin: 0;
    font: 600 clamp(4.4rem, 8.4vw, 9.2rem)/.82 var(--display);
    letter-spacing: -.075em;
}

.hero-copy h1 em { color: var(--accent); font-weight: 500; }
.hero-lead { max-width: 560px; margin: 38px 0 0; color: var(--muted); font-size: clamp(1rem, 1.5vw, 1.2rem); line-height: 1.75; }
.hero-actions { display: flex; align-items: center; gap: 22px; margin-top: 36px; }
.primary-action { display: inline-flex; align-items: center; gap: 20px; padding: 17px 22px; color: #fff; background: var(--ink); font-size: 13px; font-weight: 800; text-decoration: none; }
.primary-action span { color: var(--accent); font-size: 20px; }
.secondary-action { color: var(--ink); font-size: 13px; font-weight: 800; text-underline-offset: 5px; }

.hero-visual { position: relative; min-height: 700px; overflow: hidden; }
.hero-visual > img { width: 100%; height: 100%; object-fit: cover; object-position: 66% center; }
.hero-visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--bg) 0%, transparent 18%), linear-gradient(0deg, rgba(17,41,64,.35), transparent 45%); }
.route-labels { position: absolute; z-index: 2; right: 34px; bottom: 34px; display: flex; align-items: center; gap: 12px; color: #fff; font: 500 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.route-labels i { width: 56px; height: 1px; background: var(--accent); }

.trust-bar { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--ink); color: #fff; }
.trust-bar > div { min-height: 120px; display: grid; place-content: center; gap: 8px; padding: 24px; border-right: 1px solid rgba(255,255,255,.16); }
.trust-bar strong { font: 600 28px/1 var(--display); }
.trust-bar span { color: rgba(255,255,255,.6); font: 500 11px/1.4 var(--mono); text-transform: uppercase; letter-spacing: .09em; }

.section-shell { width: var(--page); margin: 0 auto; }
.content-section { position: relative; overflow: hidden; padding: clamp(90px, 10vw, 150px) 0; }
.section-index { display: block; margin-bottom: 48px; color: var(--muted); font: 500 10px/1 var(--mono); letter-spacing: .14em; }
.content-section h2,
.location-section h2 { margin: 0; font: 600 clamp(3rem, 5.5vw, 6.2rem)/.93 var(--display); letter-spacing: -.055em; }

.about-section { background: var(--surface); }
.about-grid { display: grid; grid-template-columns: 1.4fr .6fr; align-items: end; gap: 8vw; }
.section-heading-block h2 { max-width: 900px; }
.about-copy > p { margin: 0; color: var(--muted); font-size: 17px; line-height: 1.8; }
.about-route { display: flex; align-items: center; gap: 10px; margin-top: 38px; color: var(--ink); font: 500 10px/1 var(--mono); text-transform: uppercase; letter-spacing: .1em; }
.about-route i { flex: 1; min-width: 18px; height: 1px; background: var(--accent); position: relative; }
.about-route i::after { content: ""; position: absolute; right: 0; top: -2px; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }

.services-section { background: #dce6ec; }
.section-topline { display: grid; grid-template-columns: 1.35fr .65fr; align-items: end; gap: 9vw; margin-bottom: clamp(50px, 7vw, 90px); }
.section-topline > p { max-width: 390px; margin: 0 0 8px; color: var(--muted); line-height: 1.75; }
.service-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.service-card { position: relative; min-height: 440px; display: flex; flex-direction: column; padding: 30px; background: rgba(255,255,255,.26); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); transition: color .25s ease, background .25s ease, transform .25s ease; }
.service-card:hover { z-index: 2; color: #fff; background: var(--ink); transform: translateY(-8px); }
.card-number { position: absolute; top: 30px; right: 30px; color: var(--muted); font: 500 10px/1 var(--mono); }
.card-mark { width: 52px; height: 52px; display: grid; margin: 40px 0 auto; border: 1px solid var(--accent); border-radius: 50%; color: var(--accent); font: 500 18px/1 var(--mono); place-items: center; }
.service-card h3 { margin: 52px 0 14px; font-size: 21px; letter-spacing: -.03em; }
.service-card p { min-height: 92px; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.7; }
.service-card:hover p,
.service-card:hover .card-number { color: rgba(255,255,255,.58); }
.service-card a { display: flex; justify-content: space-between; align-items: center; margin-top: 30px; padding-top: 18px; border-top: 1px solid currentColor; font-size: 11px; font-weight: 800; text-decoration: none; }
.service-card a span { color: var(--accent); font-size: 18px; }

.process-section { color: #fff; background: var(--ink); }
.process-layout { display: grid; grid-template-columns: .85fr 1.15fr; gap: 10vw; align-items: center; }
.process-section .section-index { color: rgba(255,255,255,.38); }
.process-intro > p:not(.eyebrow) { max-width: 520px; margin: 28px 0 32px; color: rgba(255,255,255,.62); line-height: 1.75; }
.process-intro .primary-action { color: var(--ink); background: var(--accent); }
.process-intro .primary-action span { color: inherit; }
.process-list { margin: 0; padding: 0; list-style: none; counter-reset: route; }
.process-list li { display: grid; grid-template-columns: 72px 1fr; gap: 22px; padding: 34px 0; border-bottom: 1px solid rgba(255,255,255,.16); }
.process-list li:first-child { border-top: 1px solid rgba(255,255,255,.16); }
.process-list li > span { color: var(--accent); font: 500 11px/1 var(--mono); }
.process-list strong { display: block; font-size: clamp(19px, 2vw, 28px); letter-spacing: -.03em; }
.process-list p { margin: 10px 0 0; color: rgba(255,255,255,.5); font-size: 13px; line-height: 1.6; }

.location-section { position: relative; min-height: min(760px, 80vh); overflow: hidden; background: #15283a; }
.location-map { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(.8) contrast(.9) brightness(.78); }
.location-overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(17,41,64,.94) 0%, rgba(17,41,64,.65) 40%, rgba(17,41,64,.08) 72%); pointer-events: none; }
.location-inner { position: relative; z-index: 2; min-height: min(760px, 80vh); display: flex; align-items: center; }
.location-card { width: min(590px, 100%); padding: clamp(34px, 5vw, 68px); color: #fff; background: rgba(17,41,64,.92); border-left: 6px solid var(--accent); box-shadow: 0 34px 90px rgba(0,0,0,.28); }
.location-card .section-index { margin-bottom: 36px; color: rgba(255,255,255,.4); }
.location-card address { margin: 34px 0 24px; color: rgba(255,255,255,.66); font-size: 16px; font-style: normal; line-height: 1.75; }
.location-card a { color: #fff; font-size: 12px; font-weight: 800; text-underline-offset: 6px; }
.location-card a span { color: var(--accent); }

.contact-section { background: var(--bg); }
.contact-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: 8vw; align-items: start; }
.contact-copy > p:not(.eyebrow) { margin: 28px 0 40px; color: var(--muted); line-height: 1.75; }
.contact-details { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; padding-top: 28px; border-top: 1px solid var(--line); }
.contact-details > * { display: grid; gap: 7px; text-decoration: none; }
.contact-details small { color: var(--muted); font: 500 9px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.contact-details strong { font-size: 13px; line-height: 1.5; }
.contact-form { padding: clamp(34px, 5vw, 68px); background: var(--surface); box-shadow: 0 30px 90px rgba(17,41,64,.1); }
.form-intro { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; margin-bottom: 38px; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.form-intro h3 { margin: 0; font: 600 25px/1.1 var(--display); }
.form-intro p { margin: 0; color: var(--muted); font-size: 11px; }
.form-feedback { margin-bottom: 24px; padding: 14px 16px; color: var(--ink); background: #e7f5df; border-left: 4px solid #509533; font-size: 13px; line-height: 1.5; }
.form-feedback[data-status="error"],
.form-feedback[data-status="invalid"],
.form-feedback[data-status="turnstile"] { background: #fff0ec; border-color: var(--accent); }
.contact-honeypot { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 24px; }
.form-grid label { display: grid; gap: 9px; color: var(--muted); font: 600 10px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.form-grid input,
.form-grid textarea { width: 100%; color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; outline: none; padding: 10px 0 13px; font: 500 14px/1.4 var(--sans); text-transform: none; transition: border-color .18s ease; }
.form-grid textarea { min-height: 110px; resize: vertical; }
.form-grid input:focus,
.form-grid textarea:focus { border-color: var(--accent); }
.form-wide { grid-column: 1 / -1; }
.turnstile-wrap { min-height: 65px; }
.form-submit { display: flex; align-items: center; gap: 18px; }
.form-submit button { display: inline-flex; align-items: center; justify-content: space-between; gap: 36px; min-height: 54px; padding: 0 20px; color: #fff; background: var(--ink); border: 0; font-size: 12px; font-weight: 800; }
.form-submit button span { color: var(--accent); font-size: 18px; }
.form-submit small { max-width: 240px; color: var(--muted); font-size: 10px; line-height: 1.5; }

.concept-footer { padding: 70px 0 22px; color: #fff; background: #091827; }
.footer-grid { display: grid; grid-template-columns: .8fr 1.2fr auto; align-items: center; gap: 7vw; padding-bottom: 60px; }
.footer-grid > img { width: 180px; }
.footer-grid > p { max-width: 480px; margin: 0; color: rgba(255,255,255,.52); font-size: 13px; line-height: 1.7; }
.footer-grid nav { display: flex; gap: 24px; }
.footer-grid nav a { color: rgba(255,255,255,.7); font-size: 11px; font-weight: 700; text-decoration: none; }
.footer-bottom { display: flex; justify-content: space-between; gap: 20px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.35); font: 500 9px/1.5 var(--mono); letter-spacing: .1em; text-transform: uppercase; }

/* Concept 03 — Night Operations */
html[data-theme="signal"] {
    --bg: #061211;
    --surface: #0b1d1b;
    --ink: #ecf5ef;
    --muted: #8ca09b;
    --accent: #c9ff4a;
    --line: rgba(201, 255, 74, .2);
    --display: "Manrope", Arial, sans-serif;
}

html[data-theme="signal"] body { background-image: linear-gradient(rgba(201,255,74,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(201,255,74,.035) 1px, transparent 1px); background-size: 48px 48px; }
html[data-theme="signal"] .concept-header { position: fixed; width: calc(100% - 32px); top: 16px; min-height: 72px; padding: 0 20px; color: #fff; background: rgba(5,17,16,.76); border: 1px solid rgba(201,255,74,.22); backdrop-filter: blur(18px); }
html[data-theme="signal"] .concept-brand img { width: 124px; }
html[data-theme="signal"] .concept-nav a { font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
html[data-theme="signal"] .concept-nav .nav-quote { color: #071211; background: var(--accent); }
html[data-theme="signal"] .concept-hero { min-height: 100vh; display: block; padding: 0; color: #fff; background: #061211; }
html[data-theme="signal"] .hero-copy { position: relative; z-index: 3; width: var(--page); max-width: none; margin: auto; padding: max(190px, 21vh) 46% 110px 0; }
html[data-theme="signal"] .hero-copy h1 { font-size: clamp(4.2rem, 7.5vw, 8.4rem); line-height: .86; text-transform: uppercase; letter-spacing: -.075em; }
html[data-theme="signal"] .hero-copy h1 em { color: var(--accent); font-style: normal; }
html[data-theme="signal"] .hero-lead { color: rgba(255,255,255,.62); }
html[data-theme="signal"] .hero-visual { position: absolute; inset: 0; min-height: 0; }
html[data-theme="signal"] .hero-visual > img { filter: saturate(.55) hue-rotate(80deg) brightness(.64) contrast(1.15); object-position: 70% center; }
html[data-theme="signal"] .hero-visual::after { background: linear-gradient(90deg, #061211 0%, rgba(6,18,17,.88) 34%, rgba(6,18,17,.1) 76%), linear-gradient(0deg, #061211 0%, transparent 35%, rgba(6,18,17,.35)); }
html[data-theme="signal"] .hero-copy::before { content: "LIVE / EU-NETWORK"; display: block; width: max-content; margin-bottom: 36px; padding: 8px 10px; color: var(--accent); border: 1px solid var(--line); font: 500 9px/1 var(--mono); letter-spacing: .12em; }
html[data-theme="signal"] .hero-copy::after { content: "●  SYSTEM ONLINE"; position: absolute; right: 0; top: 28vh; width: min(330px, 31vw); padding: 24px; color: var(--accent); background: rgba(5,17,16,.74); border: 1px solid var(--line); font: 500 10px/1 var(--mono); letter-spacing: .12em; box-shadow: inset 0 0 36px rgba(201,255,74,.04); }
html[data-theme="signal"] .primary-action { color: #071211; background: var(--accent); }
html[data-theme="signal"] .primary-action span { color: inherit; }
html[data-theme="signal"] .secondary-action { color: #fff; }
html[data-theme="signal"] .route-labels { right: max(24px, calc((100vw - 1320px) / 2)); color: var(--accent); }
html[data-theme="signal"] .trust-bar { position: relative; z-index: 4; width: var(--page); margin: -70px auto 0; color: #fff; background: rgba(8,26,24,.92); border: 1px solid var(--line); backdrop-filter: blur(18px); }
html[data-theme="signal"] .trust-bar > div { min-height: 138px; border-color: var(--line); }
html[data-theme="signal"] .trust-bar strong { color: var(--accent); font-family: var(--mono); font-size: 24px; }
html[data-theme="signal"] .about-section { background: transparent; }
html[data-theme="signal"] .about-grid { align-items: start; }
html[data-theme="signal"] .about-grid::before { content: "ROUTE CONTROL / 01"; position: absolute; top: 34px; right: max(24px, calc((100vw - 1320px) / 2)); color: var(--muted); font: 500 9px/1 var(--mono); letter-spacing: .12em; }
html[data-theme="signal"] .about-copy { padding: 28px; background: rgba(11,29,27,.76); border: 1px solid var(--line); }
html[data-theme="signal"] .about-route { color: #fff; }
html[data-theme="signal"] .services-section { background: #081816; }
html[data-theme="signal"] .service-card { min-height: 410px; background: rgba(8,24,22,.72); border-color: var(--line); }
html[data-theme="signal"] .service-card:hover { color: #071211; background: var(--accent); transform: none; }
html[data-theme="signal"] .service-card:hover p,
html[data-theme="signal"] .service-card:hover .card-number { color: rgba(7,18,17,.65); }
html[data-theme="signal"] .service-card:hover .card-mark { color: #071211; border-color: #071211; }
html[data-theme="signal"] .card-mark { border-radius: 0; }
html[data-theme="signal"] .process-section { color: #fff; background: #0b1d1b; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
html[data-theme="signal"] .process-list li { padding: 25px; margin-bottom: 10px; border: 1px solid var(--line); background: rgba(201,255,74,.025); }
html[data-theme="signal"] .process-list li:first-child { border-top: 1px solid var(--line); }
html[data-theme="signal"] .process-list li > span { display: grid; width: 42px; height: 42px; border: 1px solid var(--accent); place-items: center; }
html[data-theme="signal"] .location-map { filter: grayscale(1) invert(.9) sepia(.5) hue-rotate(65deg) saturate(1.8) brightness(.45) contrast(1.25); }
html[data-theme="signal"] .location-overlay { background: linear-gradient(90deg, #061211 0%, rgba(6,18,17,.82) 42%, rgba(6,18,17,.2)); }
html[data-theme="signal"] .location-card { background: rgba(6,18,17,.9); border: 1px solid var(--line); border-left: 8px solid var(--accent); box-shadow: 0 0 70px rgba(201,255,74,.07); }
html[data-theme="signal"] .contact-section { background: transparent; }
html[data-theme="signal"] .contact-form { background: rgba(11,29,27,.94); border: 1px solid var(--line); box-shadow: none; }
html[data-theme="signal"] .form-grid input,
html[data-theme="signal"] .form-grid textarea { color: #fff; }
html[data-theme="signal"] .form-submit button { color: #071211; background: var(--accent); }
html[data-theme="signal"] .form-submit button span { color: inherit; }
html[data-theme="signal"] .form-feedback { color: #071211; }
html[data-theme="signal"] .concept-footer { background: #030b0a; border-top: 1px solid var(--line); }
html[data-theme="signal"] .concept-switcher a[aria-current="page"] { background: var(--accent); }

@media (max-width: 900px) {
    :root { --page: calc(100vw - 32px); }
    .concept-header { min-height: 76px; }
    .concept-brand img { width: 122px; }
    .concept-menu { display: block; }
    .concept-nav { display: none; position: absolute; top: 76px; left: 0; right: 0; padding: 20px; background: var(--surface); box-shadow: 0 18px 40px rgba(0,0,0,.12); }
    .concept-nav.is-open { display: grid; }
    .concept-hero { display: block; min-height: auto; padding: 0; }
    .hero-copy { width: var(--page); margin: auto; padding: 130px 0 64px; }
    .hero-copy h1 { font-size: clamp(4rem, 18vw, 7rem); }
    .hero-visual { min-height: 56vh; }
    .hero-visual::after { background: linear-gradient(180deg, var(--bg), transparent 24%); }
    .trust-bar { grid-template-columns: repeat(2, 1fr); }
    .about-grid,
    .section-topline,
    .process-layout,
    .contact-layout { grid-template-columns: 1fr; }
    .about-grid,
    .process-layout,
    .contact-layout { gap: 58px; }
    .service-grid { grid-template-columns: repeat(2, 1fr); }
    .section-topline { gap: 28px; }
    .section-topline > p { max-width: 600px; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .footer-grid nav { grid-column: 1 / -1; }
    html[data-theme="signal"] .concept-header { top: 8px; }
    html[data-theme="signal"] .concept-nav { top: 72px; color: #fff; background: #081816; border: 1px solid var(--line); }
    html[data-theme="signal"] .hero-copy { width: var(--page); padding: 170px 0 100px; }
    html[data-theme="signal"] .hero-copy::after { top: auto; right: 0; bottom: 74px; width: 220px; }
    html[data-theme="signal"] .hero-visual { position: absolute; min-height: 0; }
    html[data-theme="signal"] .hero-visual::after { background: linear-gradient(90deg, #061211 0%, rgba(6,18,17,.72) 58%, rgba(6,18,17,.2)), linear-gradient(0deg, #061211, transparent 45%); }
    html[data-theme="signal"] .trust-bar { margin-top: 0; }
}

@media (max-width: 560px) {
    .hero-actions { align-items: flex-start; flex-direction: column; }
    .primary-action { width: 100%; justify-content: space-between; }
    .trust-bar { grid-template-columns: 1fr; }
    .service-grid,
    .form-grid,
    .contact-details { grid-template-columns: 1fr; }
    .service-card { min-height: 350px; }
    .form-wide { grid-column: auto; }
    .form-submit,
    .form-intro { align-items: flex-start; flex-direction: column; }
    .footer-grid { grid-template-columns: 1fr; }
    .footer-grid nav { grid-column: auto; flex-wrap: wrap; }
    .footer-bottom { flex-direction: column; }
    html[data-theme="signal"] .hero-copy { padding-bottom: 180px; }
    html[data-theme="signal"] .hero-copy::after { right: auto; left: 0; bottom: 54px; width: calc(100% - 40px); }
    html[data-theme="signal"] .hero-copy h1 { font-size: clamp(3.6rem, 18vw, 5.7rem); }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }