/* ============================================================
   Anryx — Corporate website styles
   Cisco-inspired: navy-heavy, denser, product-photography forward
   ============================================================ */

:root {
  /* Brand */
  --c-primary: #003D7A;
  --c-primary-deep: #002A57;
  --c-secondary: #0066CC;
  --c-accent: #4A90E2;
  --c-pale: #E6F0FA;

  /* Surfaces */
  --c-white: #FFFFFF;
  --c-offwhite: #F8FAFC;
  --c-light-gray: #E5E7EB;
  --c-divider: #E2E8F0;

  /* Text */
  --c-charcoal: #1F2937;
  --c-medium: #6B7280;
  --c-near-black: #0F172A;

  /* Type */
  --font-sans: "IBM Plex Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Layout */
  --container: 1280px;
  --gutter: 24px;

  /* Motion */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  color: var(--c-charcoal);
  background: var(--c-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "ss02";
}

a {
  color: var(--c-secondary);
  text-decoration: none;
  transition: color 0.15s var(--ease);
}
a:hover { color: var(--c-primary); }

img, svg { display: block; max-width: 100%; }

button { font-family: inherit; cursor: pointer; }

/* ===== Layout primitives ===== */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.section {
  padding: 112px 0;
}
.section--tight { padding: 80px 0; }
.section--pale { background: var(--c-pale); }
.section--off { background: var(--c-offwhite); }
.section--navy {
  background: var(--c-primary-deep);
  color: rgba(255,255,255,0.9);
}
.section--navy h1, .section--navy h2, .section--navy h3 { color: #fff; }

@media (max-width: 768px) {
  .section { padding: 64px 0; }
  .section--tight { padding: 48px 0; }
}

/* ===== Type ===== */
h1, h2, h3, h4, h5 {
  font-family: var(--font-sans);
  color: var(--c-near-black);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
  text-wrap: balance;
}
.display { font-size: 64px; line-height: 1.08; letter-spacing: -0.02em; font-weight: 600; }
h1 { font-size: 48px; line-height: 1.16; letter-spacing: -0.02em; }
h2 { font-size: 36px; line-height: 1.22; }
h3 { font-size: 24px; line-height: 1.33; }
h4 { font-size: 20px; line-height: 1.4; }

p { margin: 0; text-wrap: pretty; }
.lead { font-size: 18px; line-height: 1.55; color: var(--c-medium); }
.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-secondary);
}
.muted { color: var(--c-medium); }

@media (max-width: 768px) {
  .display { font-size: 40px; }
  h1 { font-size: 34px; }
  h2 { font-size: 28px; }
  h3 { font-size: 20px; }
  .lead { font-size: 16px; }
}

/* ===== Buttons ===== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.005em;
  border: 1px solid transparent;
  border-radius: 2px;
  transition: all 0.15s var(--ease);
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
}
.btn--primary {
  background: var(--c-primary);
  color: #fff;
}
.btn--primary:hover {
  background: var(--c-primary-deep);
  color: #fff;
}
.btn--secondary {
  background: transparent;
  color: var(--c-primary);
  border-color: var(--c-primary);
}
.btn--secondary:hover {
  background: var(--c-primary);
  color: #fff;
}
.btn--ghost {
  background: transparent;
  color: var(--c-primary);
  padding: 8px 0;
}
.btn--ghost:hover { color: var(--c-secondary); }
.btn--white {
  background: #fff;
  color: var(--c-primary);
}
.btn--white:hover { background: var(--c-pale); }

.btn .arrow {
  width: 16px;
  height: 16px;
  transition: transform 0.2s var(--ease);
}
.btn:hover .arrow { transform: translateX(3px); }

/* ===== Header ===== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.site-header.is-scrolled {
  border-bottom-color: var(--c-divider);
}
.site-header__inner {
  display: flex;
  align-items: center;
  gap: 40px;
  height: 72px;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.logo {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  color: var(--c-near-black);
  text-decoration: none;
  line-height: 1;
}
.logo:hover { color: var(--c-primary); }
.logo__mark {
  width: 28px;
  height: 28px;
}
.logo__img {
  height: 32px;
  width: auto;
  display: block;
}
.logo__tagline {
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-medium);
  font-weight: 500;
  white-space: nowrap;
  /* Visually align under the wordmark image */
  padding-left: 1px;
}
.footer-brand .logo__img--footer {
  height: 40px;
  filter: brightness(0) invert(1);
}
.logo__tagline--footer {
  color: rgba(255, 255, 255, 0.55);
  font-size: 10px;
}
@media (max-width: 560px) {
  /* Slogan can crowd the header on narrow phones — hide there, keep in footer */
  .site-header .logo__tagline { display: none; }
}

.site-nav {
  display: flex;
  gap: 4px;
  margin-left: auto;
  align-items: center;
}
.site-nav a {
  position: relative;
  padding: 10px 14px;
  font-size: 15px;
  font-weight: 500;
  color: var(--c-charcoal);
  border-radius: 2px;
}
.site-nav a:hover { color: var(--c-primary); background: var(--c-pale); }
.site-nav a.is-active { color: var(--c-primary); }
.site-nav a.is-active::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: -1px;
  height: 2px;
  background: var(--c-primary);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 12px;
  padding-left: 16px;
  border-left: 1px solid var(--c-divider);
}

.lang-switch {
  position: relative;
}
.lang-switch__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 0;
  padding: 8px 12px;
  font-size: 14px;
  font-weight: 500;
  color: var(--c-charcoal);
  border-radius: 2px;
}
.lang-switch__btn:hover { background: var(--c-pale); color: var(--c-primary); }
.lang-switch__menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  min-width: 140px;
  background: #fff;
  border: 1px solid var(--c-divider);
  box-shadow: 0 4px 24px rgba(15, 23, 42, 0.08);
  padding: 4px;
  display: none;
}
.lang-switch.is-open .lang-switch__menu { display: block; }
.lang-switch__menu button {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background: transparent;
  border: 0;
  font-size: 14px;
  color: var(--c-charcoal);
  text-align: left;
}
.lang-switch__menu button:hover { background: var(--c-pale); }
.lang-switch__menu button.is-current { color: var(--c-primary); font-weight: 500; }

.header-cta { padding: 10px 18px; font-size: 14px; }

.menu-toggle {
  display: none;
  background: transparent;
  border: 0;
  margin-left: auto;
  padding: 10px;
}
@media (max-width: 900px) {
  .site-nav, .header-actions { display: none; }
  .menu-toggle { display: block; }
  /* Lang switch lives outside .header-actions so the language toggle stays
     visible on phones (where .header-actions is hidden behind the hamburger).
     Push it right and pair it tightly with the hamburger. The parent's
     `gap: 40px` would otherwise leave a huge space between the two. */
  .site-header__inner > #langSwitch {
    margin-left: auto;
    margin-right: -36px; /* eats the parent's 40px gap → ~4px between btn and hamburger */
  }
  .site-header__inner > .menu-toggle {
    margin-left: 0;
  }
  .site-header.is-mobile-open .site-nav,
  .site-header.is-mobile-open .header-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
  }
  .site-header.is-mobile-open .site-header__inner {
    flex-wrap: wrap;
    height: auto;
    padding-top: 16px;
    padding-bottom: 16px;
    gap: 12px;
  }
  .site-header.is-mobile-open .site-nav a { padding: 14px 4px; border-bottom: 1px solid var(--c-divider); }
}

/* ===== Footer ===== */
.site-footer {
  background: var(--c-near-black);
  color: rgba(255,255,255,0.7);
  padding: 80px 0 32px;
  font-size: 14px;
}
.site-footer .container { display: grid; gap: 64px; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(4, 1fr);
  gap: 48px;
}
.footer-brand .logo { color: #fff; }
.footer-brand p { margin-top: 16px; max-width: 280px; line-height: 1.6; color: rgba(255,255,255,0.6); }
.footer-col h5 {
  color: #fff;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 20px;
  font-weight: 500;
}
.footer-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.footer-col a { color: rgba(255,255,255,0.7); }
.footer-col a:hover { color: #fff; }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 32px;
  border-top: 1px solid rgba(255,255,255,0.08);
  font-size: 13px;
  color: rgba(255,255,255,0.5);
  flex-wrap: wrap;
  gap: 16px;
}
.footer-bottom-links { display: flex; gap: 24px; }
.footer-bottom-links a { color: rgba(255,255,255,0.5); }
.footer-bottom-links a:hover { color: #fff; }

@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr; }
}

/* ===== Hero ===== */
.hero {
  position: relative;
  padding: 112px 0 128px;
  overflow: hidden;
  background: transparent;
}
.hero__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 64px;
  align-items: center;
}
.hero__copy { max-width: 720px; }
.hero__eyebrow { margin-bottom: 24px; }
.hero__title { margin-bottom: 24px; }
.hero__sub { font-size: 19px; line-height: 1.55; color: var(--c-medium); max-width: 540px; margin-bottom: 40px; }
.hero__ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.hero__visual {
  position: relative;
  aspect-ratio: 1 / 1;
  max-width: 560px;
  justify-self: end;
  width: 100%;
}
@media (max-width: 900px) {
  .hero { padding: 64px 0 80px; }
  .hero__inner { grid-template-columns: 1fr; gap: 48px; }
  .hero__visual { justify-self: stretch; max-width: none; aspect-ratio: 4 / 3; }
}

/* ===== Page hero (smaller) ===== */
.page-hero {
  padding: 80px 0 64px;
  background: linear-gradient(180deg, var(--c-pale) 0%, #fff 100%);
  border-bottom: 1px solid var(--c-divider);
}
.page-hero__inner { max-width: 800px; }
.page-hero__title { margin: 16px 0 20px; }

/* ===== Cards ===== */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--c-divider);
  border: 1px solid var(--c-divider);
}
@media (max-width: 900px) { .cards-grid { grid-template-columns: 1fr; } }

.card {
  background: #fff;
  padding: 40px 36px;
  display: flex;
  flex-direction: column;
  transition: background 0.2s var(--ease);
}
.card:hover { background: var(--c-offwhite); }
.card__icon {
  width: 44px;
  height: 44px;
  color: var(--c-primary);
  margin-bottom: 28px;
}
.card__num {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--c-secondary);
  margin-bottom: 16px;
  letter-spacing: 0.08em;
}
.card__title { margin-bottom: 12px; font-size: 22px; }
.card__desc { color: var(--c-medium); line-height: 1.6; margin-bottom: 28px; flex: 1; }
.card__link {
  font-size: 14px;
  font-weight: 500;
  color: var(--c-primary);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.card__link:hover { color: var(--c-secondary); }
.card__link svg { width: 14px; height: 14px; transition: transform 0.2s var(--ease); }
.card__link:hover svg { transform: translateX(3px); }

/* ===== Industry grid ===== */
.industry-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--c-divider);
  border: 1px solid var(--c-divider);
}
@media (max-width: 900px) { .industry-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .industry-grid { grid-template-columns: 1fr; } }

.industry-tile {
  background: #fff;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-height: 200px;
  transition: background 0.2s var(--ease);
  position: relative;
}
.industry-tile:hover { background: var(--c-pale); }
.industry-tile__icon { width: 36px; height: 36px; color: var(--c-primary); }
.industry-tile__title { font-size: 17px; font-weight: 600; color: var(--c-near-black); margin-top: auto; }
.industry-tile__num {
  position: absolute;
  top: 28px;
  right: 28px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--c-medium);
  letter-spacing: 0.08em;
}

/* ===== CTA band ===== */
.cta-band {
  background: var(--c-primary);
  color: #fff;
  padding: 80px 0;
}
.cta-band__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.cta-band h2 { color: #fff; max-width: 700px; }
.cta-band p { color: rgba(255,255,255,0.8); margin-top: 12px; max-width: 600px; }

/* ===== Brand statement ===== */
.brand-statement {
  background: var(--c-pale);
  padding: 128px 0;
  text-align: center;
}
.brand-statement blockquote {
  margin: 0 auto;
  max-width: 920px;
  font-size: 36px;
  line-height: 1.3;
  font-weight: 500;
  color: var(--c-near-black);
  letter-spacing: -0.015em;
}
.brand-statement blockquote::before { content: "“"; color: var(--c-primary); margin-right: 4px; }
.brand-statement blockquote::after { content: "”"; color: var(--c-primary); margin-left: 4px; }
@media (max-width: 768px) {
  .brand-statement { padding: 80px 0; }
  .brand-statement blockquote { font-size: 24px; }
}

/* ===== Solution detail section ===== */
.solution-section { padding: 112px 0; border-top: 1px solid var(--c-divider); }
.solution-section:first-of-type { border-top: 0; }
.solution-section__head {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 64px;
  margin-bottom: 64px;
}
.solution-section__head h2 { font-size: 44px; line-height: 1.1; }
.solution-section__positioning { font-size: 20px; line-height: 1.5; color: var(--c-charcoal); font-weight: 400; }
.solution-section__overview { color: var(--c-medium); line-height: 1.65; font-size: 17px; }
@media (max-width: 900px) {
  .solution-section { padding: 64px 0; }
  .solution-section__head { grid-template-columns: 1fr; gap: 24px; margin-bottom: 40px; }
}

.capability-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border-top: 1px solid var(--c-divider);
}
.capability-list li {
  list-style: none;
  padding: 28px 0 28px 32px;
  position: relative;
  border-bottom: 1px solid var(--c-divider);
}
.capability-list li:nth-child(odd) { border-right: 1px solid var(--c-divider); padding-right: 32px; }
/* Column 2 (even items) butts up against the vertical divider on its left,
   so the dash marker would visually crowd the divider. Push it inward to
   match the breathing room column 1's marker has against the page edge. */
.capability-list li:nth-child(even) { padding-left: 64px; }
.capability-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 36px;
  width: 16px;
  height: 1px;
  background: var(--c-primary);
}
.capability-list li:nth-child(even)::before { left: 32px; }
@media (max-width: 700px) {
  /* Phones collapse to single column — restore default left padding so the
     marker hangs in the same place for every item. */
  .capability-list li:nth-child(even) { padding-left: 32px; }
  .capability-list li:nth-child(even)::before { left: 0; }
}
.capability-list .cap-name { font-weight: 600; color: var(--c-near-black); margin-bottom: 4px; }
.capability-list .cap-desc { color: var(--c-medium); font-size: 14px; line-height: 1.55; }
@media (max-width: 700px) {
  .capability-list { grid-template-columns: 1fr; }
  .capability-list li:nth-child(odd) { border-right: 0; padding-right: 0; }
}

.use-cases {
  margin-top: 56px;
  background: var(--c-offwhite);
  padding: 40px;
  border-left: 3px solid var(--c-primary);
}
.use-cases h4 {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-secondary);
  margin-bottom: 20px;
  font-weight: 500;
}
.use-cases ul { padding: 0; margin: 0; display: grid; gap: 12px; }
.use-cases li {
  list-style: none;
  padding-left: 20px;
  position: relative;
  color: var(--c-charcoal);
}
.use-cases li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--c-primary);
}

/* ===== Solutions sticky nav ===== */
.solutions-tabs {
  position: sticky;
  top: 72px;
  z-index: 50;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--c-divider);
}
.solutions-tabs__inner {
  display: flex;
  gap: 32px;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.solutions-tabs a {
  padding: 18px 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--c-medium);
  border-bottom: 2px solid transparent;
  transition: all 0.15s var(--ease);
}
.solutions-tabs a:hover { color: var(--c-primary); }
.solutions-tabs a.is-active { color: var(--c-primary); border-bottom-color: var(--c-primary); }
.solutions-tabs__num {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--c-medium);
  margin-right: 8px;
}

/* ===== Industry detail row ===== */
.industry-row {
  display: grid;
  grid-template-columns: 80px 1fr 1.4fr;
  column-gap: 48px;
  row-gap: 32px;
  padding: 56px 0;
  border-bottom: 1px solid var(--c-divider);
  align-items: start;
}
.industry-row:last-child { border-bottom: 0; }
.industry-row__visual {
  grid-column: 1 / -1;
  width: 100%;
  border-radius: 6px;
  overflow: hidden;
  background: #F5F7FA;
  border: 1px solid var(--c-divider);
}
.industry-row__visual img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 320px;
  object-fit: cover;
  object-position: center;
}
.industry-row__tagline {
  font-size: 17px;
  line-height: 1.4;
  color: var(--c-primary);
  font-weight: 500;
  margin: 0 0 16px;
}
.industry-row__num {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--c-secondary);
  letter-spacing: 0.08em;
  padding-top: 8px;
}
.industry-row__title h3 { font-size: 26px; margin-bottom: 12px; }
.industry-row__desc { color: var(--c-medium); line-height: 1.6; }
.industry-row__focus h5 {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-medium);
  margin-bottom: 16px;
  font-weight: 500;
}
.industry-row__focus ul { padding: 0; margin: 0; display: grid; gap: 10px; }
.industry-row__focus li {
  list-style: none;
  padding-left: 20px;
  position: relative;
  font-size: 15px;
  color: var(--c-charcoal);
}
.industry-row__focus li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 12px;
  height: 1px;
  background: var(--c-primary);
}
@media (max-width: 900px) {
  .industry-row { grid-template-columns: 1fr; gap: 24px; padding: 40px 0; }
}

/* ===== About — values grid ===== */
.values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
}
.value-block h4 {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-secondary);
  margin-bottom: 16px;
  font-weight: 500;
}
.value-block h3 { font-size: 22px; margin-bottom: 12px; }
.value-block p { color: var(--c-medium); line-height: 1.6; }
@media (max-width: 768px) { .values-grid { grid-template-columns: 1fr; gap: 32px; } }

.approach-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 64px;
}
.approach-grid h2 { font-size: 36px; }
.approach-blocks { display: grid; gap: 40px; }
.approach-block { padding-left: 24px; border-left: 2px solid var(--c-pale); }
.approach-block .label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-secondary);
  margin-bottom: 8px;
  font-weight: 500;
}
.approach-block h3 { font-size: 20px; margin-bottom: 10px; }
.approach-block p { color: var(--c-medium); line-height: 1.6; }
@media (max-width: 900px) { .approach-grid { grid-template-columns: 1fr; gap: 32px; } }

/* ===== Architectural placeholder (Phase-2 spaces) ===== */
.placeholder-band {
  border: 1px dashed var(--c-light-gray);
  background: var(--c-offwhite);
  padding: 48px;
  text-align: center;
  color: var(--c-medium);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.placeholder-band .label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-medium);
}
.placeholder-band h4 { color: var(--c-charcoal); font-size: 18px; font-weight: 500; }

/* ===== Contact form ===== */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 80px;
  align-items: start;
}
.contact-info h2 { font-size: 36px; margin-bottom: 20px; }
.contact-info p { color: var(--c-medium); line-height: 1.6; margin-bottom: 32px; }
.contact-info dl { display: grid; gap: 24px; margin: 0; padding-top: 32px; border-top: 1px solid var(--c-divider); }
.contact-info dt {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-medium);
  margin-bottom: 6px;
}
.contact-info dd { margin: 0; color: var(--c-charcoal); font-size: 15px; line-height: 1.5; }

.contact-form {
  background: #fff;
  border: 1px solid var(--c-divider);
  padding: 48px;
}
.field { display: grid; gap: 8px; margin-bottom: 24px; }
.field label {
  font-size: 13px;
  font-weight: 500;
  color: var(--c-charcoal);
}
.field label .req { color: var(--c-secondary); }
.field input, .field select, .field textarea {
  width: 100%;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 15px;
  color: var(--c-charcoal);
  background: #fff;
  border: 1px solid var(--c-light-gray);
  border-radius: 2px;
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 0;
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.12);
}
.field textarea { resize: vertical; min-height: 120px; }
.field.is-error input, .field.is-error select, .field.is-error textarea { border-color: #DC2626; }
.field .err {
  font-size: 12px;
  color: #DC2626;
  display: none;
}
.field.is-error .err { display: block; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 768px) { .field-row { grid-template-columns: 1fr; } }
@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; gap: 48px; }
  .contact-form { padding: 32px 24px; }
}

.form-success {
  text-align: center;
  padding: 64px 32px;
}
.form-success__icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 24px;
  color: var(--c-primary);
}
.form-success h3 { font-size: 24px; margin-bottom: 12px; }
.form-success p { color: var(--c-medium); }

/* ===== Reveal on scroll ===== */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.reveal.is-in {
  opacity: 1;
  transform: none;
}

/* ===== Hero network graphic ===== */
.network-svg {
  width: 100%;
  height: 100%;
}
.network-svg .node {
  fill: var(--c-primary);
  opacity: 0;
  animation: nodeIn 0.6s var(--ease) forwards;
}
.network-svg .node--accent { fill: var(--c-accent); }
.network-svg .ring {
  fill: none;
  stroke: var(--c-pale);
  stroke-width: 1;
}
.network-svg .link {
  stroke: var(--c-accent);
  stroke-width: 1;
  opacity: 0;
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  animation: linkIn 1.4s var(--ease) forwards;
}
.network-svg .pulse {
  fill: var(--c-secondary);
  animation: pulseDot 3s ease-in-out infinite;
}
.network-svg .core {
  fill: var(--c-primary);
}
.network-svg .net-root {
  transform-origin: 50% 50%;
  transform-box: fill-box;
  will-change: transform;
  transition: none;
}

/* ===== Page-wide globe background ===== */
#globeBackground {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  /* dvh gives the *currently visible* viewport on iOS Safari (excludes the URL bar
     area which slides up/down) so the globe doesn't get cropped under the address
     bar. The vh fallback above is fine on browsers that don't know dvh. */
  height: 100dvh;
  z-index: 0;
  pointer-events: none;
  opacity: 0.18;
  overflow: hidden;
  /* Force a compositing layer on iOS Safari. Without this, fixed elements with
     low opacity sometimes render as a static, never-redrawn snapshot. */
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  will-change: transform;
}
#globeBackground .globe-svg {
  width: 100%;
  height: 100%;
  display: block;
}
/* Lift all main content above the bg globe */
body > #siteHeaderSlot,
body > main,
body > #siteFooterSlot {
  position: relative;
  z-index: 1;
}

/* ===== Globe ===== */
.globe-svg .globe-disk {
  fill-opacity: 1;
}
.globe-svg .globe-dot {
  fill: var(--c-primary);
  pointer-events: none;
}
.globe-svg .globe-arcs { pointer-events: none; }
.globe-svg .globe-arc {
  fill: none;
  stroke: var(--c-accent);
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-dasharray: 4 6;
  filter: drop-shadow(0 0 3px rgba(91, 192, 235, 0.45));
}
.globe-svg .globe-packet {
  fill: var(--c-accent);
  filter: drop-shadow(0 0 4px var(--c-accent));
  pointer-events: none;
}
.globe-svg .globe-cities { pointer-events: none; }
.globe-svg .globe-city__dot {
  fill: var(--c-primary);
  transition: fill 0.18s ease, r 0.18s ease;
}
.globe-svg .globe-city--hub .globe-city__dot {
  fill: var(--c-accent);
}
.globe-svg .globe-city__pulse {
  fill: var(--c-accent);
  opacity: 0.18;
  transform-origin: center;
  transform-box: fill-box;
  animation: cityPulse 2.4s ease-in-out infinite;
}
.globe-svg .globe-city--hub .globe-city__pulse {
  animation-duration: 1.8s;
  opacity: 0.28;
}
.globe-svg .globe-city--hot .globe-city__dot {
  fill: var(--c-accent);
  r: 5;
  filter: drop-shadow(0 0 6px var(--c-accent));
}
@keyframes cityPulse {
  0%, 100% { transform: scale(0.7); opacity: 0; }
  40% { opacity: 0.45; }
  100% { transform: scale(2.2); opacity: 0; }
}

@keyframes nodeIn {
  to { opacity: 1; }
}
@keyframes linkIn {
  to { opacity: 0.5; stroke-dashoffset: 0; }
}
@keyframes pulseDot {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.4); opacity: 0.6; }
}

/* ===== Section header ===== */
.section-head {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 64px;
  margin-bottom: 64px;
  align-items: end;
}
.section-head__title h2 { margin-top: 8px; }
.section-head__sub { font-size: 18px; line-height: 1.55; color: var(--c-medium); max-width: 520px; }
@media (max-width: 900px) {
  .section-head { grid-template-columns: 1fr; gap: 24px; margin-bottom: 40px; }
  .section-head__sub { font-size: 16px; }
}

/* ===== Approach / what-we-do strip ===== */
.global-reach {
  background: var(--c-primary-deep);
  color: #fff;
  padding: 96px 0;
  position: relative;
  overflow: hidden;
}
.global-reach h2 { color: #fff; }
.global-reach p { color: rgba(255,255,255,0.75); max-width: 600px; margin-top: 16px; line-height: 1.6; }
.global-reach__bg {
  position: absolute;
  inset: 0;
  opacity: 0.18;
  pointer-events: none;
}
.global-reach__inner { position: relative; }