/* Global Network Systems DRC — site styles. No framework, no build step. */

@layer reset, tokens, base, layout, components, utilities;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { -webkit-text-size-adjust: none; text-size-adjust: none; }
  img, picture, svg, iframe { display: block; max-width: 100%; }
  img { height: auto; }
  input, button, textarea, select { font: inherit; color: inherit; }
  p, h1, h2, h3, h4 { overflow-wrap: break-word; }
  h1, h2, h3, h4 { text-wrap: balance; }
  p, li, dd { text-wrap: pretty; }
}

@layer tokens {
  :root {
    color-scheme: light dark;

    /* Brand: the logo's red, and its graphite grey. */
    --brand: #c4122f;
    --brand-strong: #9e0e26;
    --brand-soft: light-dark(#fdecef, #3a1218);

    --ink: light-dark(#1b1f23, #eceef0);
    --ink-muted: light-dark(#56606a, #a9b1b9);
    --surface: light-dark(#ffffff, #121417);
    --surface-alt: light-dark(#f4f5f7, #1b1e22);
    --surface-raised: light-dark(#ffffff, #1f2328);
    --line: light-dark(#dfe2e6, #30353b);
    --focus: light-dark(#0b57d0, #8ab4f8);
    --success: light-dark(#136c34, #6fd394);
    --danger: light-dark(#b3261e, #ff8f87);

    --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --step--1: clamp(0.83rem, 0.8rem + 0.15vw, 0.9rem);
    --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.1rem);
    --step-1: clamp(1.2rem, 1.1rem + 0.45vw, 1.45rem);
    --step-2: clamp(1.45rem, 1.25rem + 0.9vw, 1.95rem);
    --step-3: clamp(1.8rem, 1.45rem + 1.6vw, 2.75rem);

    --space-xs: 0.5rem;
    --space-s: 0.75rem;
    --space-m: 1.25rem;
    --space-l: 2rem;
    --space-xl: clamp(3rem, 2rem + 4vw, 5.5rem);

    --radius: 0.5rem;
    --radius-l: 1rem;
    --shadow: 0 1px 2px rgb(0 0 0 / 0.06), 0 6px 24px rgb(0 0 0 / 0.06);
    --container: 72rem;
    --header-height: 6.5rem;
  }
}

@layer base {
  html { scroll-behavior: smooth; scroll-padding-top: var(--space-l); }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

  body {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    font-family: var(--font);
    font-size: var(--step-0);
    line-height: 1.6;
    color: var(--ink);
    background: var(--surface);
  }
  main { flex: 1; }
  main:focus { outline: none; }

  h1, h2, h3 { line-height: 1.2; font-weight: 700; letter-spacing: -0.01em; }
  h1 { font-size: var(--step-3); }
  h2 { font-size: var(--step-2); }
  h3 { font-size: var(--step-1); }

  a { color: var(--brand); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
  a:hover { color: var(--brand-strong); text-decoration-thickness: 2px; }
  @media (prefers-color-scheme: dark) { a { color: #ff6b81; } a:hover { color: #ff94a4; } }

  :focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 2px; }
  ::selection { background: var(--brand); color: #fff; }

  address { font-style: normal; }
}

@layer layout {
  .container { width: min(100% - 2 * var(--space-m), var(--container)); margin-inline: auto; }
  .narrow { max-width: 48rem; }
  .container.narrow { width: min(100% - 2 * var(--space-m), 48rem); }

  .section { padding-block: var(--space-xl); }
  .section--alt { background: var(--surface-alt); }
  .section__header { max-width: 42rem; margin-block-end: var(--space-l); }
  .section__header p:not(.eyebrow) { color: var(--ink-muted); margin-block-start: var(--space-xs); }
  .section__more { margin-block-start: var(--space-l); }

  .split { display: grid; gap: var(--space-l); align-items: start; }
  .split > div > * + * { margin-block-start: var(--space-m); }
  @media (width >= 56rem) { .split { grid-template-columns: 1.1fr 1fr; gap: var(--space-xl); } }

  .columns { display: grid; gap: var(--space-l); grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
  .columns h3 { font-size: var(--step-0); margin-block: var(--space-xs); }
  .columns ul { padding-inline-start: 1.1rem; color: var(--ink-muted); }
  .columns li + li { margin-block-start: 0.3rem; }

  .with-toc { display: grid; gap: var(--space-l); padding-block: var(--space-xl); }
  @media (width >= 60rem) {
    .with-toc { grid-template-columns: 15rem minmax(0, 1fr); gap: var(--space-xl); }
    .toc { position: sticky; top: var(--space-l); align-self: start; }
  }
}

@layer components {
  .sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
  .icon {
    width: 1.1em; height: 1.1em; flex: none;
    fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
    display: inline-block; vertical-align: -0.15em;
  }
  .icon--lg { width: 2rem; height: 2rem; color: var(--brand); }

  .skip-link {
    position: absolute; inset-inline-start: var(--space-m); top: -10rem; z-index: 100;
    padding: var(--space-xs) var(--space-m); background: var(--ink); color: var(--surface); border-radius: var(--radius);
    &:focus { top: var(--space-xs); }
  }

  /* Header */
  .site-header { background: var(--surface); border-block-end: 1px solid var(--line); }
  .topbar { background: #1b1f23; color: #e6e8ea; font-size: var(--step--1); }
  .topbar a { color: inherit; text-decoration: none; display: inline-flex; gap: 0.4em; align-items: center; }
  .topbar a:hover { color: #fff; text-decoration: underline; }
  .topbar__inner { display: flex; flex-wrap: wrap; gap: 0.25rem var(--space-m); align-items: center; padding-block: 0.4rem; }
  .lang { margin-inline-start: auto; display: flex; gap: var(--space-xs); font-weight: 600; letter-spacing: 0.04em; }
  .lang a, .lang__current { padding: 0.1rem 0.45rem; border-radius: 0.25rem; }
  .lang__current { background: var(--brand); color: #fff; }

  .masthead { display: flex; align-items: center; gap: var(--space-m); padding-block: var(--space-s); }
  .brand { display: block; margin-inline-end: auto; padding: 0.25rem 0.4rem; border-radius: var(--radius); background: #fff; }
  .brand img { width: clamp(9.5rem, 7rem + 8vw, 13rem); }

  .menu-button {
    display: inline-flex; align-items: center; gap: 0.5em; padding: 0.5rem 0.9rem;
    border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-raised); cursor: pointer; font-weight: 600;
  }

  /* Mobile: the navigation is a popover sheet. Desktop: an inline list. */
  .site-nav ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 0.25rem; }
  .site-nav a {
    display: block; padding: 0.7rem 1rem; border-radius: var(--radius);
    color: var(--ink); text-decoration: none; font-weight: 600;
    &:hover { background: var(--surface-alt); color: var(--brand); }
    &[aria-current="page"] { color: var(--brand); box-shadow: inset 0 -3px 0 var(--brand); border-radius: 0; }
  }
  .site-nav:popover-open {
    inset: 0 0 auto auto; margin: var(--space-s); width: min(20rem, 100% - 2 * var(--space-s));
    padding: var(--space-s); border: 1px solid var(--line); border-radius: var(--radius-l);
    background: var(--surface-raised); color: var(--ink); box-shadow: var(--shadow);
  }
  .site-nav::backdrop { background: rgb(0 0 0 / 0.35); }

  @media (width >= 56rem) {
    .menu-button { display: none; }
    .site-nav[popover] {
      display: block; position: static; inset: auto; width: auto; height: auto; margin: 0; padding: 0;
      border: 0; background: none; color: inherit; overflow: visible;
    }
    .site-nav ul { flex-direction: row; gap: var(--space-xs); }
  }

  /* Buttons and links */
  .actions { display: flex; flex-wrap: wrap; gap: var(--space-s); }
  .button {
    display: inline-flex; align-items: center; gap: 0.55em; padding: 0.75rem 1.3rem;
    border: 2px solid var(--brand); border-radius: var(--radius); background: var(--brand); color: #fff;
    font-weight: 700; text-decoration: none; cursor: pointer; transition: background-color 0.15s, border-color 0.15s;
    &:hover { background: var(--brand-strong); border-color: var(--brand-strong); color: #fff; }
  }
  .button--ghost { background: transparent; color: var(--brand); &:hover { background: var(--brand-soft); color: var(--brand); } }
  .button--light { background: #fff; border-color: #fff; color: var(--brand-strong); &:hover { background: #f3f3f3; border-color: #f3f3f3; color: var(--brand-strong); } }
  .button--outline-light { background: transparent; border-color: rgb(255 255 255 / 0.8); color: #fff; &:hover { background: rgb(255 255 255 / 0.12); border-color: #fff; } }
  .link-arrow { display: inline-flex; align-items: center; gap: 0.4em; font-weight: 700; text-decoration: none; }
  .link-arrow:hover .icon { translate: 0.2em 0; }
  .link-arrow .icon { transition: translate 0.15s; }

  .eyebrow { font-size: var(--step--1); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand); margin-block-end: var(--space-xs); }
  .lead { font-size: var(--step-1); line-height: 1.5; color: var(--ink-muted); }
  .muted { color: var(--ink-muted); font-size: var(--step--1); }

  /* Home hero */
  .hero { position: relative; isolation: isolate; color: #fff; background: #111; overflow: hidden; }
  .hero__media { position: absolute; inset: 0; z-index: -1; }
  .hero__media img { width: 100%; height: 100%; object-fit: cover; }
  .hero::after {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(100deg, rgb(10 12 14 / 0.92) 0%, rgb(10 12 14 / 0.78) 45%, rgb(120 10 28 / 0.45) 100%);
  }
  .hero__content { padding-block: clamp(4rem, 3rem + 8vw, 9rem); max-width: 46rem; margin-inline: max(var(--space-m), (100% - var(--container)) / 2); }
  .hero__content > * + * { margin-block-start: var(--space-m); }
  .hero .eyebrow { color: #ff9aa9; }
  .hero h1 { font-size: clamp(2rem, 1.5rem + 2.6vw, 3.4rem); }
  .hero .lead { color: #e3e6e8; }
  .hero .actions { margin-block-start: var(--space-l); }

  .facts { background: var(--brand); color: #fff; }
  .facts__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: var(--space-m) var(--space-l); padding-block: var(--space-l); }
  .facts strong { display: block; font-size: var(--step-2); line-height: 1.15; }
  .facts span { opacity: 0.9; font-size: var(--step--1); }

  /* Cards */
  .cards { list-style: none; padding: 0; display: grid; gap: var(--space-m); grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); }
  .card, .service {
    padding: var(--space-l) var(--space-m); border: 1px solid var(--line); border-radius: var(--radius-l);
    background: var(--surface-raised); box-shadow: var(--shadow);
  }
  .card h3, .service h3 { font-size: var(--step-1); margin-block: var(--space-s) var(--space-xs); }
  .card p, .service p, .service ul { color: var(--ink-muted); }
  .service-grid { display: grid; gap: var(--space-m); grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); }
  .service ul { padding-inline-start: 1.1rem; }
  .service li + li { margin-block-start: 0.25rem; }

  .checklist { list-style: none; padding: 0; display: grid; gap: var(--space-s); }
  .checklist li {
    position: relative; padding: var(--space-s) var(--space-m) var(--space-s) 3rem;
    background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius);
  }
  .checklist li::before {
    content: ""; position: absolute; inset-inline-start: 1rem; top: 50%; translate: 0 -50%;
    width: 1.2rem; height: 1.2rem; border-radius: 50%; background: var(--brand);
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='%23fff' d='m9.5 16.2-4-4 1.4-1.4 2.6 2.6 6.6-6.6 1.4 1.4z'/%3E%3C/svg%3E") center / contain;
  }

  .clients { list-style: none; padding: 0; display: grid; gap: var(--space-s); grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); }
  .clients li {
    display: grid; place-items: center; min-height: 5.5rem; padding: var(--space-m); text-align: center;
    border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-raised);
    font-weight: 700; color: var(--ink-muted); letter-spacing: 0.01em;
  }

  .cta-band { background: linear-gradient(110deg, var(--brand-strong), var(--brand)); color: #fff; }
  .cta-band__inner { display: flex; flex-wrap: wrap; gap: var(--space-l); align-items: center; justify-content: space-between; padding-block: var(--space-xl); }
  .cta-band h2 { max-width: 32rem; }

  /* Inner pages */
  .page-hero { padding-block: var(--space-xl) var(--space-l); background: var(--surface-alt); border-block-end: 1px solid var(--line); }
  .page-hero > .container > * + * { margin-block-start: var(--space-s); }
  /* Aligned with the page content below it; the text keeps a readable measure. */
  .page-hero:not(.page-hero--plain) > .container.narrow { width: min(100% - 2 * var(--space-m), var(--container)); max-width: none; }
  .page-hero > .container > * { max-width: 48rem; }
  .page-hero--plain { background: none; border: 0; padding-block-end: 0; }

  .toc h2 { font-size: var(--step--1); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-muted); margin-block-end: var(--space-s); }
  .toc ol { list-style: none; padding: 0; border-inline-start: 2px solid var(--line); }
  .toc a { display: block; padding: 0.35rem var(--space-m); margin-inline-start: -2px; border-inline-start: 2px solid transparent; color: var(--ink-muted); text-decoration: none; }
  .toc a:hover { color: var(--brand); border-color: var(--brand); }

  .prose { max-width: 44rem; }
  .prose > section + section { margin-block-start: var(--space-xl); }
  .prose h2 { margin-block-end: var(--space-m); }
  .prose h3 { font-size: var(--step-0); margin-block: var(--space-m) var(--space-xs); }
  .prose p + p { margin-block-start: var(--space-m); }
  .container.prose { padding-block: var(--space-l) var(--space-xl); }

  .people { list-style: none; padding: 0; display: grid; gap: var(--space-s); grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); }
  .people li { padding: var(--space-m); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-raised); }
  .people strong, .people span { display: block; }
  .people span { color: var(--ink-muted); font-size: var(--step--1); }

  .details { display: grid; grid-template-columns: minmax(9rem, max-content) 1fr; gap: var(--space-xs) var(--space-l); }
  .details dt { color: var(--ink-muted); }
  .details dd { font-weight: 600; }
  @media (width < 36rem) { .details { grid-template-columns: 1fr; } .details dd { margin-block-end: var(--space-s); } }

  /* Contact */
  .contact { display: grid; gap: var(--space-xl); padding-block: var(--space-xl); }
  @media (width >= 60rem) { .contact { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); } }
  .contact__details h2 { font-size: var(--step-1); margin-block-end: var(--space-m); }

  .form-grid { display: grid; gap: var(--space-m); }
  @media (width >= 40rem) { .form-grid { grid-template-columns: 1fr 1fr; } .field--wide { grid-column: 1 / -1; } }
  .field { display: grid; gap: 0.35rem; }
  .field label { font-weight: 600; }
  .field input, .field textarea {
    width: 100%; padding: 0.7rem 0.85rem; border: 1px solid var(--line); border-radius: var(--radius);
    background: var(--surface-raised); transition: border-color 0.15s, box-shadow 0.15s;
    &:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 25%, transparent); }
  }
  .field textarea { resize: vertical; min-height: 10rem; field-sizing: content; }
  .field--invalid input, .field--invalid textarea { border-color: var(--danger); }
  .field__error { color: var(--danger); font-size: var(--step--1); font-weight: 600; }
  .field--trap { position: absolute; inset-inline-start: -100vw; width: 1px; height: 1px; overflow: hidden; }
  .form-footer { display: flex; flex-wrap: wrap; gap: var(--space-m); align-items: center; justify-content: space-between; margin-block-start: var(--space-l); }

  .notice { display: flex; gap: var(--space-s); padding: var(--space-m); border-radius: var(--radius); margin-block-end: var(--space-l); border: 1px solid; }
  .notice .icon { width: 1.5rem; height: 1.5rem; margin-block-start: 0.1rem; }
  .notice p + p { margin-block-start: var(--space-xs); }
  .notice--success { color: var(--success); background: color-mix(in srgb, var(--success) 10%, var(--surface)); }
  .notice--error { color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, var(--surface)); }
  .notice p { color: var(--ink); }

  .contact-list { display: grid; gap: var(--space-m); margin-block-end: var(--space-l); }
  .contact-list dt { display: flex; gap: 0.5em; align-items: center; font-weight: 700; color: var(--brand); }
  .contact-list dd { padding-inline-start: 1.6em; }

  .map iframe { width: 100%; aspect-ratio: 4 / 3; border: 1px solid var(--line); border-radius: var(--radius-l); background: var(--surface-alt); }
  .map figcaption { margin-block-start: var(--space-xs); font-size: var(--step--1); }

  /* Footer */
  .site-footer { background: #15181b; color: #c9ced3; font-size: var(--step--1); margin-block-start: auto; }
  .site-footer a { color: #fff; }
  .site-footer h2 { font-size: var(--step--1); text-transform: uppercase; letter-spacing: 0.08em; color: #fff; margin-block-end: var(--space-s); }
  .site-footer ul { list-style: none; padding: 0; display: grid; gap: 0.35rem; }
  .site-footer__grid { display: grid; gap: var(--space-l); padding-block: var(--space-xl) var(--space-l); grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
  .site-footer__grid > section:first-child { max-width: 26rem; }
  .site-footer__name { font-size: var(--step-0); font-weight: 700; color: #fff; margin-block-end: var(--space-xs); }
  .site-footer__bottom { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-l); justify-content: space-between; padding-block: var(--space-m); border-block-start: 1px solid #2c3136; color: #9aa2aa; }
}

@layer utilities {
  .visually-hidden {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
  }
}

@media print {
  .topbar, .menu-button, .site-nav, .cta-band, .map, .skip-link { display: none !important; }
  .hero { color: #000; background: none; }
  .hero::after, .hero__media { display: none; }
  a { color: inherit; }
}