/* ============================================================
   NINE-DOTS CONSULTING — Shared Stylesheet
   ============================================================
   Design system for the Nine-Dots Consulting website.
   All color, typography, spacing, and component styles live here.

   TABLE OF CONTENTS
   -----------------
   1. CSS Variables (design tokens)
   2. Reset & Base
   3. Layout Utilities
   4. Navigation
   5. Hero Sections
   6. Section Utilities (labels, headlines, subs)
   7. Buttons
   8. Cards (service, industry, team, contact)
   9. Trust Bar
   10. Comparison Table
   11. Services Grid & Sub-pages
   12. Insights / Blog
   13. About Page
   14. Contact Page & Form
   15. Footer
   16. Responsive Breakpoints
   ============================================================ */


/* ── 1. CSS Variables ───────────────────────────────────────── */
:root {
  /* Brand colors */
  --navy:      #0d1b2a;
  --navy2:     #1a2d44;
  --teal:      #00b4a6;
  --teal2:     #00d4c4;
  --offwhite:  #f4f6f8;
  --muted:     #8a9bb0;
  --text:      #1e2d3d;
  --text-soft: #5a6e82;
  --white:     #ffffff;

  /* Borders */
  --border-light: #e5e9ed;
  --border-dark:  rgba(255, 255, 255, 0.08);

  /* Radius & shadow */
  --radius: 10px;
  --shadow-card: 0 4px 24px rgba(13, 27, 42, 0.08);
  --shadow-hover: 0 8px 32px rgba(0, 180, 166, 0.12);

  /* Spacing scale */
  --section-pad: 96px;
  --container-max: 1120px;
  --container-pad: 32px;
}


/* ── 2. Reset & Base ────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  color: var(--text);
  background: var(--white);
  line-height: 1.6;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
ul { list-style: none; }


/* ── 3. Layout Utilities ────────────────────────────────────── */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}

section {
  padding: var(--section-pad) 0;
}

/* Alternate section backgrounds */
.bg-white   { background: var(--white); }
.bg-offwhite { background: var(--offwhite); }
.bg-navy    { background: var(--navy); }


/* ── 4. Navigation ──────────────────────────────────────────── */
/* Sticky top navigation bar, dark-themed */
nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: rgba(13, 27, 42, 0.97);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-dark);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
}

/* Logo: 3x3 dot grid + wordmark */
.logo {
  display: flex;
  align-items: center;
  gap: 12px;
}

.logo-dots {
  display: grid;
  grid-template-columns: repeat(3, 8px);
  gap: 4px;
}

.logo-dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--teal);
  transition: background 0.2s;
}

/* Center dot in the 3x3 grid is white — the "nine dot" motif */
.logo-dots span:nth-child(5) { background: var(--white); }

.logo-name {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--white);
  letter-spacing: 0.02em;
}

.logo-name span { color: var(--teal); }

.nav-links {
  display: flex;
  gap: 36px;
}

.nav-links a {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.9rem;
  font-weight: 500;
  transition: color 0.2s;
}

.nav-links a:hover,
.nav-links a.active { color: var(--teal2); }

/* "Contact" nav item styled as a button */
.nav-cta {
  background: var(--teal) !important;
  color: var(--navy) !important;
  padding: 9px 20px;
  border-radius: 6px;
  font-weight: 600 !important;
  font-size: 0.875rem !important;
  transition: background 0.2s !important;
}

.nav-cta:hover { background: var(--teal2) !important; }

/* Mobile menu toggle (hidden on desktop) */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 4px;
}

.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--white);
  border-radius: 2px;
  transition: transform 0.2s, opacity 0.2s;
}


/* ── 5. Hero Sections ───────────────────────────────────────── */
/* Full-bleed dark hero for Home page */
.hero-full {
  background: var(--navy);
  padding: 160px 0 112px;
  position: relative;
  overflow: hidden;
}

/* Subtle radial glow in top-right corner */
.hero-full::before {
  content: '';
  position: absolute;
  top: -40%; right: -10%;
  width: 700px; height: 700px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 180, 166, 0.12) 0%, transparent 70%);
  pointer-events: none;
}

/* Compact page-level hero (used on interior pages) */
.hero-page {
  background: var(--navy);
  padding: 120px 0 72px;
  position: relative;
  overflow: hidden;
}

.hero-page::before {
  content: '';
  position: absolute;
  top: -30%; right: -5%;
  width: 500px; height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 180, 166, 0.10) 0%, transparent 70%);
  pointer-events: none;
}

/* Eyebrow label (pill above headlines) */
.hero-eyebrow {
  display: inline-block;
  background: rgba(0, 180, 166, 0.15);
  color: var(--teal2);
  border: 1px solid rgba(0, 180, 166, 0.3);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 20px;
  margin-bottom: 28px;
}

.hero-headline {
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  font-weight: 800;
  color: var(--white);
  line-height: 1.15;
  max-width: 760px;
  margin-bottom: 24px;
}

/* Teal emphasis within headlines */
.hero-headline em {
  font-style: normal;
  color: var(--teal);
}

.hero-sub {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.65);
  max-width: 580px;
  margin-bottom: 44px;
  line-height: 1.7;
}

/* Interior page headline (slightly smaller) */
.page-headline {
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 800;
  color: var(--white);
  line-height: 1.2;
  max-width: 700px;
  margin-bottom: 20px;
}

.page-sub {
  font-size: 1.05rem;
  color: rgba(255, 255, 255, 0.6);
  max-width: 560px;
  line-height: 1.7;
}

/* Stat bar below hero headline on home page */
.hero-stats {
  display: flex;
  gap: 48px;
  margin-top: 72px;
  padding-top: 48px;
  border-top: 1px solid var(--border-dark);
  flex-wrap: wrap;
}

.stat-value {
  font-size: 2rem;
  font-weight: 800;
  color: var(--white);
  line-height: 1;
}

.stat-value span { color: var(--teal); }

.stat-label {
  font-size: 0.82rem;
  color: var(--muted);
  margin-top: 6px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* CTA button row */
.hero-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}


/* ── 6. Section Utilities ───────────────────────────────────── */
.section-label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 12px;
}

/* On dark backgrounds, use a lighter teal variant */
.section-label--light { color: var(--teal2); }

.section-headline {
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  font-weight: 800;
  color: var(--navy);
  margin-bottom: 20px;
  line-height: 1.2;
}

.section-headline--white { color: var(--white); }

.section-sub {
  font-size: 1.05rem;
  color: var(--text-soft);
  max-width: 580px;
  line-height: 1.7;
}

.section-sub--white { color: rgba(255, 255, 255, 0.6); }

/* Two-column section intro (headline left, text right) */
.section-intro-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  margin-bottom: 64px;
  align-items: end;
}


/* ── 7. Buttons ─────────────────────────────────────────────── */
.btn-primary {
  background: var(--teal);
  color: var(--navy);
  padding: 14px 28px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.95rem;
  transition: background 0.2s, transform 0.15s;
  display: inline-block;
  cursor: pointer;
  border: none;
}

.btn-primary:hover {
  background: var(--teal2);
  transform: translateY(-1px);
}

.btn-ghost {
  border: 1.5px solid rgba(255, 255, 255, 0.28);
  color: rgba(255, 255, 255, 0.85);
  padding: 14px 28px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.95rem;
  transition: border-color 0.2s, color 0.2s;
  display: inline-block;
}

.btn-ghost:hover {
  border-color: var(--teal);
  color: var(--teal);
}

/* Smaller button variant */
.btn-sm {
  padding: 10px 20px;
  font-size: 0.875rem;
}

/* Button on light background */
.btn-outline-navy {
  border: 1.5px solid var(--navy);
  color: var(--navy);
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.9rem;
  transition: background 0.2s, color 0.2s;
  display: inline-block;
}

.btn-outline-navy:hover {
  background: var(--navy);
  color: var(--white);
}


/* ── 8. Cards ───────────────────────────────────────────────── */

/* ── Service Card (grid layout) ── */
.service-card {
  background: var(--white);
  border-radius: var(--radius);
  padding: 32px 28px;
  border: 1px solid var(--border-light);
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
  display: flex;
  flex-direction: column;
}

.service-card:hover {
  border-color: var(--teal);
  box-shadow: var(--shadow-hover);
  transform: translateY(-3px);
}

.service-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: rgba(0, 180, 166, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  font-size: 1.3rem;
  flex-shrink: 0;
}

.service-card h3 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 10px;
}

.service-card p {
  font-size: 0.88rem;
  color: var(--text-soft);
  line-height: 1.65;
  margin-bottom: 16px;
  flex: 1;
}

.service-price {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--teal);
  background: rgba(0, 180, 166, 0.1);
  border-radius: 4px;
  padding: 4px 10px;
  display: inline-block;
  margin-bottom: 16px;
}

.service-card .card-link {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--teal);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: gap 0.2s;
}

.service-card .card-link:hover { gap: 8px; }

/* ── Service Sub-page layout ── */
.service-detail {
  padding: var(--section-pad) 0;
}

.service-detail-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 64px;
  align-items: start;
}

.service-detail-main h2 {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--navy);
  margin: 40px 0 16px;
}

.service-detail-main h2:first-child { margin-top: 0; }

.service-detail-main p {
  color: var(--text-soft);
  line-height: 1.8;
  margin-bottom: 16px;
}

.service-detail-main ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
}

.service-detail-main ul li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 0.95rem;
  color: var(--text-soft);
  line-height: 1.6;
}

.service-detail-main ul li::before {
  content: '✓';
  color: var(--teal);
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 1px;
}

/* Sidebar card on service sub-pages */
.service-sidebar {
  position: sticky;
  top: 88px;
}

.sidebar-card {
  background: var(--offwhite);
  border-radius: var(--radius);
  padding: 32px;
  border: 1px solid var(--border-light);
}

.sidebar-card h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 20px;
}

.sidebar-price {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--navy);
  margin-bottom: 4px;
}

.sidebar-price span {
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--text-soft);
}

.sidebar-timeline {
  font-size: 0.88rem;
  color: var(--text-soft);
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border-light);
}

.sidebar-features {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 28px;
}

.sidebar-feature {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.88rem;
  color: var(--text-soft);
}

.sidebar-feature::before {
  content: '';
  display: block;
  width: 6px;
  height: 6px;
  background: var(--teal);
  border-radius: 50%;
  flex-shrink: 0;
}

/* ── Industry Card (dark bg) ── */
.industry-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-dark);
  border-radius: var(--radius);
  padding: 36px 28px;
  transition: background 0.2s, border-color 0.2s;
}

.industry-card:hover {
  background: rgba(0, 180, 166, 0.06);
  border-color: rgba(0, 180, 166, 0.3);
}

.industry-num {
  font-size: 2.2rem;
  font-weight: 900;
  color: var(--teal);
  opacity: 0.4;
  line-height: 1;
  margin-bottom: 16px;
}

.industry-card h3 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 12px;
}

.industry-card p {
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.65;
}

.industry-badge {
  display: inline-block;
  margin-top: 16px;
  background: rgba(0, 180, 166, 0.15);
  color: var(--teal2);
  border: 1px solid rgba(0, 180, 166, 0.25);
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 4px 10px;
}

/* ── Team Card ── */
.team-card {
  background: var(--white);
  border-radius: var(--radius);
  padding: 36px;
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-card);
}

.team-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--teal), var(--navy2));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--white);
  margin-bottom: 20px;
  letter-spacing: -0.02em;
}

.team-card h3 {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--navy);
  margin-bottom: 4px;
}

.team-role {
  font-size: 0.85rem;
  color: var(--teal);
  font-weight: 600;
  margin-bottom: 16px;
}

.team-card p {
  font-size: 0.9rem;
  color: var(--text-soft);
  line-height: 1.7;
  margin-bottom: 12px;
}

.team-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}

.tag {
  font-size: 0.78rem;
  font-weight: 600;
  padding: 4px 10px;
  background: var(--offwhite);
  border: 1px solid #dde3ea;
  border-radius: 4px;
  color: var(--text-soft);
}

.team-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  color: var(--teal);
  font-weight: 600;
  margin-top: 20px;
  transition: color 0.2s;
}

.team-link:hover { color: var(--teal2); }

/* ── Positioning Cards (home page) ── */
.pos-card {
  background: var(--offwhite);
  border-radius: var(--radius);
  padding: 24px 28px;
  border-left: 4px solid var(--teal);
}

.pos-card h4 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 6px;
}

.pos-card p {
  font-size: 0.9rem;
  color: var(--text-soft);
  line-height: 1.6;
}

/* ── What We Do tiles (home 3-column strip) ── */
.what-card {
  background: var(--white);
  border-radius: var(--radius);
  padding: 36px 28px;
  border: 1px solid var(--border-light);
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}

.what-card:hover {
  border-color: var(--teal);
  box-shadow: var(--shadow-hover);
  transform: translateY(-3px);
}

.what-icon {
  font-size: 2rem;
  margin-bottom: 20px;
}

.what-card h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 12px;
}

.what-card p {
  font-size: 0.9rem;
  color: var(--text-soft);
  line-height: 1.65;
  margin-bottom: 20px;
}

.what-card .card-link {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--teal);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: gap 0.2s;
}

.what-card .card-link:hover { gap: 8px; }


/* ── 9. Trust Bar ───────────────────────────────────────────── */
#trust {
  background: var(--offwhite);
  padding: 28px 0;
  border-top: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
}

.trust-inner {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.trust-label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

.trust-items {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
  align-items: center;
}

.trust-item {
  font-size: 0.88rem;
  font-weight: 600;
  color: #6b7e94;
  display: flex;
  align-items: center;
  gap: 8px;
}

.trust-item::before {
  content: '';
  display: block;
  width: 6px;
  height: 6px;
  background: var(--teal);
  border-radius: 50%;
  flex-shrink: 0;
}


/* ── 10. Comparison Table ───────────────────────────────────── */
.comparison-table {
  width: 100%;
  border-collapse: collapse;
}

.comparison-table th {
  text-align: left;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0 16px 12px 0;
  border-bottom: 2px solid var(--border-light);
}

.comparison-table td {
  padding: 14px 16px 14px 0;
  font-size: 0.88rem;
  border-bottom: 1px solid #f0f3f6;
  color: var(--text-soft);
  vertical-align: top;
}

.comparison-table td:first-child { font-weight: 600; color: var(--navy); }
.comparison-table td:last-child  { color: var(--teal); font-weight: 600; }
.check { color: var(--teal); margin-right: 4px; }
.ex    { color: #c0cad4;   margin-right: 4px; }


/* ── 11. Services Grid ──────────────────────────────────────── */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* "Not sure?" callout below the grid */
.services-callout {
  margin-top: 40px;
  background: rgba(0, 180, 166, 0.07);
  border: 1px solid rgba(0, 180, 166, 0.2);
  border-radius: var(--radius);
  padding: 24px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.services-callout p {
  font-size: 1rem;
  color: var(--navy);
  font-weight: 500;
  max-width: 540px;
}

.services-callout strong { color: var(--teal); }

/* Breadcrumb navigation for sub-pages */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 24px;
}

.breadcrumb a { color: rgba(255, 255, 255, 0.5); transition: color 0.2s; }
.breadcrumb a:hover { color: var(--teal2); }
.breadcrumb .sep { opacity: 0.4; }
.breadcrumb .current { color: rgba(255, 255, 255, 0.85); }


/* ── 12. Insights / Blog ────────────────────────────────────── */
.insights-empty {
  text-align: center;
  padding: 80px 24px;
  max-width: 480px;
  margin: 0 auto;
}

.insights-empty-icon {
  font-size: 3rem;
  margin-bottom: 24px;
  opacity: 0.4;
}

.insights-empty h3 {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 12px;
}

.insights-empty p {
  font-size: 1rem;
  color: var(--text-soft);
  line-height: 1.7;
  margin-bottom: 28px;
}

/* Email signup strip */
.insights-signup {
  background: var(--offwhite);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  padding: 48px;
  text-align: center;
  max-width: 560px;
  margin: 0 auto;
}

.insights-signup h3 {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 8px;
}

.insights-signup p {
  font-size: 0.95rem;
  color: var(--text-soft);
  margin-bottom: 24px;
}

.signup-form {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

.signup-form input[type="email"] {
  flex: 1;
  min-width: 200px;
  padding: 12px 16px;
  border: 1.5px solid var(--border-light);
  border-radius: 8px;
  font-size: 0.95rem;
  color: var(--navy);
  outline: none;
  transition: border-color 0.2s;
}

.signup-form input[type="email"]:focus { border-color: var(--teal); }

/* Article card (used when articles are published) */
.article-card {
  background: var(--white);
  border-radius: var(--radius);
  padding: 28px;
  border: 1px solid var(--border-light);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.article-card:hover {
  border-color: var(--teal);
  box-shadow: var(--shadow-hover);
}

.article-meta {
  font-size: 0.8rem;
  color: var(--muted);
  margin-bottom: 10px;
  display: flex;
  gap: 16px;
}

.article-card h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 10px;
  line-height: 1.35;
}

.article-card p {
  font-size: 0.9rem;
  color: var(--text-soft);
  line-height: 1.65;
}


/* ── 13. About Page ─────────────────────────────────────────── */
.approach-item {
  display: flex;
  gap: 24px;
  padding: 28px 0;
  border-bottom: 1px solid var(--border-light);
}

.approach-item:last-child { border-bottom: none; }

.approach-num {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(0, 180, 166, 0.12);
  border: 1.5px solid rgba(0, 180, 166, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--teal);
  margin-top: 2px;
}

.approach-content h4 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 8px;
}

.approach-content p {
  font-size: 0.92rem;
  color: var(--text-soft);
  line-height: 1.7;
}

/* "Why Claude?" callout box */
.claude-callout {
  background: rgba(0, 180, 166, 0.06);
  border: 1px solid rgba(0, 180, 166, 0.2);
  border-radius: var(--radius);
  padding: 32px;
  margin-top: 48px;
}

.claude-callout h4 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.claude-callout p {
  font-size: 0.92rem;
  color: var(--text-soft);
  line-height: 1.7;
}


/* ── 14. Contact Page & Form ────────────────────────────────── */
.contact-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}

.contact-form-wrap {
  background: var(--offwhite);
  border-radius: var(--radius);
  padding: 40px;
  border: 1px solid var(--border-light);
}

.contact-form-wrap h3 {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 24px;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 6px;
}

.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 12px 16px;
  border: 1.5px solid var(--border-light);
  border-radius: 8px;
  font-size: 0.95rem;
  font-family: inherit;
  color: var(--navy);
  background: var(--white);
  outline: none;
  transition: border-color 0.2s;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus { border-color: var(--teal); }

.form-group textarea { resize: vertical; min-height: 120px; }

/* Honeypot spam field — hidden from humans */
.form-honeypot {
  position: absolute;
  left: -9999px;
  opacity: 0;
  pointer-events: none;
}

.contact-info h3 {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 16px;
}

.contact-info p {
  font-size: 0.95rem;
  color: var(--text-soft);
  line-height: 1.7;
  margin-bottom: 24px;
}

.contact-direct {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 32px;
}

.contact-direct-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.95rem;
}

.contact-direct-item .icon {
  width: 36px;
  height: 36px;
  background: rgba(0, 180, 166, 0.12);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}

.contact-direct-item a {
  color: var(--teal);
  font-weight: 600;
  transition: color 0.2s;
}

.contact-direct-item a:hover { color: var(--teal2); }

/* Contact page success message (shown on form submission) */
.form-success {
  display: none;
  text-align: center;
  padding: 48px 24px;
}

.form-success h3 {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 12px;
}

.form-success p {
  font-size: 0.95rem;
  color: var(--text-soft);
}

/* Contact card strip */
.contact-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 840px;
  margin: 64px auto 0;
}

.contact-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-dark);
  border-radius: var(--radius);
  padding: 24px 20px;
}

.contact-card-icon { font-size: 1.5rem; margin-bottom: 10px; }

.contact-card h4 {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 6px;
}

.contact-card p {
  font-size: 0.83rem;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.5;
}


/* ── 15. Footer ─────────────────────────────────────────────── */
footer {
  background: #060e18;
  padding: 48px 0 36px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.footer-top {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  margin-bottom: 32px;
}

.footer-brand .logo-name {
  font-size: 1.1rem;
  margin-bottom: 12px;
}

.footer-brand p {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.35);
  line-height: 1.7;
  max-width: 280px;
  margin-top: 12px;
}

.footer-col h4 {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: 16px;
}

.footer-col ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-col ul li a {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.4);
  transition: color 0.2s;
}

.footer-col ul li a:hover { color: var(--teal); }

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}

.footer-copy {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.25);
}

.footer-links {
  display: flex;
  gap: 24px;
}

.footer-links a {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.25);
  transition: color 0.2s;
}

.footer-links a:hover { color: var(--teal); }

/* Footer CTA strip (dark section just above footer) */
.footer-cta {
  background: var(--navy2);
  padding: 64px 0;
  text-align: center;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.footer-cta h2 {
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  font-weight: 800;
  color: var(--white);
  margin-bottom: 12px;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

.footer-cta p {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.55);
  max-width: 480px;
  margin: 0 auto 36px;
  line-height: 1.7;
}


/* ── 16. Responsive Breakpoints ─────────────────────────────── */

/* Tablet (~900px) */
@media (max-width: 900px) {
  :root { --section-pad: 72px; }

  .section-intro-2col  { grid-template-columns: 1fr; gap: 32px; }
  .services-grid       { grid-template-columns: 1fr 1fr; }
  .contact-cards       { grid-template-columns: 1fr; }
  .contact-layout      { grid-template-columns: 1fr; gap: 48px; }
  .service-detail-grid { grid-template-columns: 1fr; }
  .service-sidebar     { position: static; }
  .footer-top          { grid-template-columns: 1fr 1fr; gap: 32px; }

  .nav-links { display: none; }
  .nav-toggle { display: flex; }

  /* Mobile nav drawer */
  .nav-links.open {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: fixed;
    top: 68px; left: 0; right: 0;
    background: rgba(13, 27, 42, 0.98);
    padding: 16px 0 24px;
    border-bottom: 1px solid var(--border-dark);
  }

  .nav-links.open li a {
    display: block;
    padding: 14px 32px;
    font-size: 1rem;
  }

  .nav-cta { margin: 8px 32px 0 !important; padding: 12px 20px !important; text-align: center; }

  .hero-stats { gap: 28px; }
}

/* Mobile (~600px) */
@media (max-width: 600px) {
  :root { --container-pad: 20px; }

  .services-grid { grid-template-columns: 1fr; }
  .footer-top    { grid-template-columns: 1fr; }

  .hero-full   { padding: 120px 0 80px; }
  .hero-page   { padding: 100px 0 56px; }
}