/*
 * GTI Phase 1 visual foundation — preview/local scope only — 2026-09-10
 *
 * This layer is deliberately loaded after the public reference-led theme and
 * is scoped to data-gti-foundation="phase1". It establishes the shared design
 * tokens, layout primitives and interaction states required by the master
 * brief without changing routes, content, Admin UI, data or production state.
 */

:root {
  --gti-canvas: #f7fbff;
  --gti-surface: #ffffff;
  --gti-surface-soft: #eef8ff;
  --gti-surface-strong: #ddf1ff;
  --gti-ink: #102638;
  --gti-ink-soft: #2b4357;
  --gti-muted: #52677a;
  --gti-line: #d7e6f1;
  --gti-blue: #0b9fea;
  --gti-blue-deep: #0878c3;
  --gti-teal: #18b7b1;
  --gti-mint: #a9e6c7;
  --gti-peach: #ffd9aa;
  --gti-coral: #ff8b79;
  --gti-violet: #6657c8;
  --gti-focus: #b66b00;
  --gti-radius-sm: 14px;
  --gti-radius-md: 24px;
  --gti-radius-lg: 34px;
  --gti-shadow-sm: 0 10px 28px rgba(7, 59, 92, .08);
  --gti-shadow-md: 0 22px 60px rgba(7, 59, 92, .12);
  --gti-max: 1220px;
  --gti-gutter: 24px;
  --gti-header-height: 82px;
  --gti-motion-fast: 160ms;
  --gti-motion-standard: 220ms;
}

body[data-public-theme="reference-led-2026-09"][data-gti-foundation="phase1"] {
  min-width: 320px;
  color: var(--gti-ink);
  background: var(--gti-canvas);
  font-family: "Aptos", "Segoe UI", Inter, ui-sans-serif, system-ui, sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body[data-public-theme="reference-led-2026-09"][data-gti-foundation="phase1"] main {
  isolation: isolate;
}

body[data-public-theme="reference-led-2026-09"][data-gti-foundation="phase1"] :is(h1, h2, h3, h4, p, ul, ol, figure) {
  margin-block-start: 0;
}

body[data-public-theme="reference-led-2026-09"][data-gti-foundation="phase1"] :is(h1, h2, h3, h4) {
  color: var(--gti-ink);
  font-family: inherit;
  font-weight: 820;
  letter-spacing: -.045em;
  line-height: 1.04;
  text-wrap: balance;
}

body[data-public-theme="reference-led-2026-09"][data-gti-foundation="phase1"] p {
  color: var(--gti-muted);
  max-inline-size: 72ch;
  text-wrap: pretty;
}

/* Contextual surfaces own their contrast. Keep the shared heading contract
   from accidentally turning copy on blue/navy bands into dark ink. */
body[data-public-theme="reference-led-2026-09"][data-gti-foundation="phase1"] :is(.page-hero, .rl-hero, .rl-proof-section, .rl-capability-band) :is(h1, h2, h3, h4) {
  color: #ffffff;
}

body[data-public-theme="reference-led-2026-09"][data-gti-foundation="phase1"] :is(.page-hero, .rl-hero, .rl-proof-section, .rl-capability-band) p {
  color: rgba(255, 255, 255, .9);
}

body[data-public-theme="reference-led-2026-09"][data-gti-foundation="phase1"] :is(a, button, input, select, textarea, summary) {
  font-family: inherit;
}

body[data-public-theme="reference-led-2026-09"][data-gti-foundation="phase1"] :is(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--gti-focus);
  outline-offset: 4px;
}

/* Container and section primitives. Every public template can consume these
   values without inventing a page-specific gutter or max-width. */
body[data-public-theme="reference-led-2026-09"][data-gti-foundation="phase1"] .container {
  width: min(calc(100% - (var(--gti-gutter) * 2)), var(--gti-max));
  margin-inline: auto;
}

body[data-public-theme="reference-led-2026-09"][data-gti-foundation="phase1"] :is(.section, .page-hero, .system-page) {
  scroll-margin-top: calc(var(--gti-header-height) + 16px);
}

body[data-public-theme="reference-led-2026-09"][data-gti-foundation="phase1"] .section > .container {
  min-inline-size: 0;
}

body[data-public-theme="reference-led-2026-09"][data-gti-foundation="phase1"] :is(.section-heading, .page-hero-copy, .collection-hero-copy, .detail-hero-copy) {
  min-inline-size: 0;
}

/* Future-proof composition helpers used by the public page families. */
body[data-public-theme="reference-led-2026-09"][data-gti-foundation="phase1"] .gti-stack {
  display: grid;
  gap: var(--gti-stack-gap, 18px);
}

body[data-public-theme="reference-led-2026-09"][data-gti-foundation="phase1"] .gti-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gti-cluster-gap, 12px);
}

body[data-public-theme="reference-led-2026-09"][data-gti-foundation="phase1"] .gti-grid-auto {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: var(--gti-grid-gap, 18px);
}

/* Header, navigation and action targets share one predictable geometry. */
body[data-public-theme="reference-led-2026-09"][data-gti-foundation="phase1"] .site-header {
  min-height: var(--gti-header-height);
  border-bottom-color: color-mix(in srgb, var(--gti-line) 88%, transparent);
}

body[data-public-theme="reference-led-2026-09"][data-gti-foundation="phase1"] .nav-shell {
  min-inline-size: 0;
  min-height: var(--gti-header-height);
}

body[data-public-theme="reference-led-2026-09"][data-gti-foundation="phase1"] .brand {
  min-inline-size: 0;
  flex: 0 1 auto;
}

body[data-public-theme="reference-led-2026-09"][data-gti-foundation="phase1"] .brand > span {
  min-inline-size: 0;
}

body[data-public-theme="reference-led-2026-09"][data-gti-foundation="phase1"] .brand-name {
  overflow-wrap: anywhere;
}

body[data-public-theme="reference-led-2026-09"][data-gti-foundation="phase1"] .nav-links a,
body[data-public-theme="reference-led-2026-09"][data-gti-foundation="phase1"] .nav-inquiry-cta {
  min-block-size: 44px;
  touch-action: manipulation;
}

body[data-public-theme="reference-led-2026-09"][data-gti-foundation="phase1"] .nav-inquiry-cta {
  box-shadow: var(--gti-shadow-sm);
}

/* Buttons and text links remain compatible with the existing analytics hooks. */
body[data-public-theme="reference-led-2026-09"][data-gti-foundation="phase1"] :is(.button, .rl-text-link, .text-link) {
  touch-action: manipulation;
  text-underline-offset: 4px;
}

body[data-public-theme="reference-led-2026-09"][data-gti-foundation="phase1"] .button {
  min-block-size: 50px;
  font-weight: 800;
  letter-spacing: -.01em;
}

body[data-public-theme="reference-led-2026-09"][data-gti-foundation="phase1"] :is(.button, .nav-inquiry-cta):disabled,
body[data-public-theme="reference-led-2026-09"][data-gti-foundation="phase1"] :is(.button, .nav-inquiry-cta)[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: .58;
  transform: none;
}

/* Shared cards and media modules keep content from creating horizontal
   overflow, while preserving each page family's approved visual treatment. */
body[data-public-theme="reference-led-2026-09"][data-gti-foundation="phase1"] :is(
  .service-card,
  .solution-card,
  .info-page-card,
  .sitemap-grid article,
  .capability-grid article,
  .pillar-grid article,
  .product-grid article,
  .leader-grid article,
  .proof-card-grid article,
  .workflow-rail article,
  .phase3-context-grid article,
  .service-section-grid article,
  .matrix-operating-cards article
) {
  min-inline-size: 0;
  overflow-wrap: anywhere;
  transition: border-color var(--gti-motion-standard) ease, box-shadow var(--gti-motion-standard) ease, transform var(--gti-motion-standard) ease;
}

body[data-public-theme="reference-led-2026-09"][data-gti-foundation="phase1"] :is(
  .service-card,
  .solution-card,
  .info-page-card,
  .sitemap-grid article,
  .capability-grid article,
  .pillar-grid article,
  .product-grid article,
  .leader-grid article,
  .proof-card-grid article,
  .workflow-rail article,
  .phase3-context-grid article,
  .service-section-grid article,
  .matrix-operating-cards article
) :is(h2, h3, h4, p, a, span, small) {
  max-inline-size: 100%;
  overflow-wrap: anywhere;
}

body[data-public-theme="reference-led-2026-09"][data-gti-foundation="phase1"] :is(
  .media-frame,
  .contact-media,
  .collection-hero-media,
  .detail-hero-visual,
  .page-hero-visual,
  .media-proof-grid article,
  .rl-hero-image,
  .command-editorial-visual
) {
  min-inline-size: 0;
  isolation: isolate;
}

/* A hero's minimum height must not turn its intrinsic aspect ratio into a
   wider-than-grid column on narrow screens. Keep every editorial hero inside
   its grid track while preserving the shared image crop. */
body[data-public-theme="reference-led-2026-09"][data-gti-foundation="phase1"] :is(
  .collection-hero-media,
  .detail-hero-visual,
  .page-hero-visual
) {
  width: 100%;
  aspect-ratio: auto;
}

body[data-public-theme="reference-led-2026-09"][data-gti-foundation="phase1"] :is(
  .media-frame,
  .contact-media,
  .collection-hero-media,
  .detail-hero-visual,
  .page-hero-visual,
  .media-proof-grid article,
  .rl-hero-image,
  .command-editorial-visual
) :is(picture, img, video) {
  max-inline-size: 100%;
}

/* One icon contract: the SVG is the artwork, the parent owns spacing and
   colour. This prevents duplicate backgrounds when a page reuses an icon. */
body[data-public-theme="reference-led-2026-09"][data-gti-foundation="phase1"] .line-icon {
  flex: 0 0 auto;
  line-height: 0;
}

body[data-public-theme="reference-led-2026-09"][data-gti-foundation="phase1"] .line-icon svg {
  display: block;
  max-inline-size: 100%;
  max-block-size: 100%;
}

body[data-public-theme="reference-led-2026-09"][data-gti-foundation="phase1"] :is(.section-icon, .card-line-icon, .capability-line-icon, .workflow-icon, .architecture-icon, .proof-icon, .command-panel-icon) {
  flex: 0 0 auto;
}

/* Forms use the same rhythm as cards and keep long labels/files readable. */
body[data-public-theme="reference-led-2026-09"][data-gti-foundation="phase1"] :is(.contact-form, .contact-card, .instant-inquiry-card) {
  min-inline-size: 0;
}

body[data-public-theme="reference-led-2026-09"][data-gti-foundation="phase1"] :is(input, select, textarea) {
  min-block-size: 48px;
  color: var(--gti-ink);
  font-size: 16px;
}

body[data-public-theme="reference-led-2026-09"][data-gti-foundation="phase1"] :is(input, select, textarea)::placeholder {
  color: color-mix(in srgb, var(--gti-muted) 72%, white);
}

body[data-public-theme="reference-led-2026-09"][data-gti-foundation="phase1"] :is(.file-field, .form-message, .form-context-hint) {
  overflow-wrap: anywhere;
}

/* Footer and floating contact controls are part of the shared shell, not
   page-specific decoration. */
body[data-public-theme="reference-led-2026-09"][data-gti-foundation="phase1"] .site-footer {
  position: relative;
  z-index: 3;
  background: #072d47;
}

body[data-public-theme="reference-led-2026-09"][data-gti-foundation="phase1"] .footer-grid {
  min-inline-size: 0;
}

body[data-public-theme="reference-led-2026-09"][data-gti-foundation="phase1"] .footer-link-group,
body[data-public-theme="reference-led-2026-09"][data-gti-foundation="phase1"] .footer-link-list {
  min-inline-size: 0;
}

body[data-public-theme="reference-led-2026-09"][data-gti-foundation="phase1"] .footer-link-list a {
  min-block-size: 40px;
  overflow-wrap: anywhere;
}

body[data-public-theme="reference-led-2026-09"][data-gti-foundation="phase1"] .quick-contact-dock {
  z-index: 45;
}

body[data-public-theme="reference-led-2026-09"][data-gti-foundation="phase1"] :is(.quick-dock-toggle, .quick-dock-action) {
  min-inline-size: 52px;
  min-block-size: 52px;
  touch-action: manipulation;
}

@media (max-width: 1120px) {
  :root { --gti-gutter: 20px; }

  body[data-public-theme="reference-led-2026-09"][data-gti-foundation="phase1"] .gti-grid-auto {
    --gti-grid-gap: 16px;
  }
}

@media (max-width: 860px) {
  :root {
    --gti-gutter: 18px;
    --gti-header-height: 72px;
  }

  body[data-public-theme="reference-led-2026-09"][data-gti-foundation="phase1"] :is(.footer-grid, .footer-trust-strip) {
    min-inline-size: 0;
  }

  body[data-public-theme="reference-led-2026-09"][data-gti-foundation="phase1"] :is(.footer-link-group, .footer-brand-panel) {
    min-inline-size: 0;
  }
}

@media (max-width: 560px) {
  :root { --gti-gutter: 15px; }

  body[data-public-theme="reference-led-2026-09"][data-gti-foundation="phase1"] :is(h1, h2, h3) {
    overflow-wrap: anywhere;
  }

  body[data-public-theme="reference-led-2026-09"][data-gti-foundation="phase1"] .gti-cluster {
    align-items: stretch;
  }

  body[data-public-theme="reference-led-2026-09"][data-gti-foundation="phase1"] :is(.button, .nav-inquiry-cta) {
    max-inline-size: 100%;
  }
}

@media (max-width: 760px) {
  /* Long-term capability rows are content, not a horizontal carousel. Stack
     them on phones so the full label and explanation remain readable. */
  body[data-public-theme="reference-led-2026-09"][data-gti-foundation="phase1"][data-page-path="/"] .rl-capability-band .mini-capability-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    min-inline-size: 0;
    overflow: visible;
  }

  body[data-public-theme="reference-led-2026-09"][data-gti-foundation="phase1"][data-page-path="/"] .rl-capability-band .mini-capability-row span {
    width: 100%;
    min-inline-size: 0;
    flex: initial;
    white-space: normal;
  }
}

@media (max-width: 380px) {
  :root { --gti-gutter: 12px; }

  body[data-public-theme="reference-led-2026-09"][data-gti-foundation="phase1"] .container {
    width: calc(100% - (var(--gti-gutter) * 2));
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-public-theme="reference-led-2026-09"][data-gti-foundation="phase1"] *,
  body[data-public-theme="reference-led-2026-09"][data-gti-foundation="phase1"] *::before,
  body[data-public-theme="reference-led-2026-09"][data-gti-foundation="phase1"] *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}

@supports not (color: color-mix(in srgb, black, white)) {
  body[data-public-theme="reference-led-2026-09"][data-gti-foundation="phase1"] .site-header {
    border-bottom-color: var(--gti-line);
  }

  body[data-public-theme="reference-led-2026-09"][data-gti-foundation="phase1"] :is(input, select, textarea)::placeholder {
    color: var(--gti-muted);
  }
}