/* style.css — Future Ark polished system (replace whole file or merge) */

/* Basic reset */
* { box-sizing: border-box; }
html,body { height:100%; }
body {
  margin:0;
  font-family: "Nunito Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: #0b1020;
  color: #0f1724;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Layout container */
:root {
  --max: 1120px;
  --accent-1: #2d59ff;
  --accent-2: #7b41f5;
  --muted: #9fb1d9;
  --panel: rgba(255,255,255,0.03);
  --light-bg: #eef4fb;
  --radius: 18px;
}

.container {
  width: min(var(--max), 92%);
  margin: 0 auto;
}

/* Header / Nav */
.site-header {
  position: sticky;
  top: 0;
  z-index: 90;
  background: linear-gradient(180deg, rgba(11,16,32,0.85), rgba(11,16,32,0.85));
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.nav-inner {
  display:flex;
  gap:16px;
  align-items:center;
  justify-content:space-between;
  padding:16px 0;
}
.brand-link { display:inline-flex; align-items:center; gap:10px; }
.brand-logo {
  height: clamp(24px, 3.2vw, 36px);
  min-height:24px;
  max-height:36px;
  width:auto;
  display:block;
  object-fit:contain;
}
.nav-links { display:flex; gap:18px; list-style:none; padding:0; margin:0; }
.nav-links a { color: #d7def0; text-decoration:none; font-weight:600; letter-spacing:0.02em; }
.nav-links a.active, .nav-links a:hover { color: #ffffff; }

/* Hero */
.hero { padding:72px 0 52px; background:
  radial-gradient(circle at top left, rgba(109,140,255,0.08), transparent 18%),
  radial-gradient(circle at top right, rgba(139,92,246,0.07), transparent 20%),
  linear-gradient(180deg, #0d1530 0%, #081026 100%);
  color:#fff;
}
.hero-large .hero-grid { display:grid; grid-template-columns: 1.1fr 0.9fr; gap:36px; align-items:center; }
.hero-copy h1 {
  font-family: "Orbitron", "Nunito Sans", sans-serif;
  font-weight:700;
  font-size: clamp(2.4rem, 4.6vw, 4.4rem);
  margin:0 0 12px;
  color:#fff;
}
.lead { color: #d1e1ff; max-width: 56ch; margin: 0 0 18px; font-size:1.05rem; }
.hero-visual img { width:100%; height:100%; border-radius:16px; object-fit:cover; box-shadow: 0 20px 60px rgba(0,0,0,0.28); }

/* Buttons */
.button-row { display:flex; gap:14px; margin-top:14px; flex-wrap:wrap; }
.button {
  padding:12px 20px; border-radius:12px; font-weight:800; letter-spacing:0.08em; text-decoration:none; display:inline-block;
}
.button-primary {
  padding:12px 20px; border-radius:12px; font-weight:800; letter-spacing:0.08em; text-decoration:none; display:inline-block;
  background: linear-gradient(135deg,var(--accent-1),var(--accent-2));
  color:white; box-shadow: 0 12px 30px rgba(50,40,120,0.18);
}

/* section helpers */
.section-title { font-size:1.6rem; margin:0 0 12px; }
.display { font-family:"Orbitron", sans-serif; font-weight:400; font-size: clamp(2.0rem, 4vw, 3.4rem); margin:0 0 12px; color: #0b2fa7; }
.center-title { text-align:center; font-family:"Orbitron", sans-serif; font-weight:400; font-size: clamp(1.6rem,3.2vw,2.4rem); margin:36px 0; color: var(--accent-1); }

/* Two-col grid & features */
.two-col-grid { display:grid; grid-template-columns: 1fr 1fr; gap:28px; align-items:center; padding:56px 0; background:#eef6fd; color:#071133; border-radius:10px; }
.grid-3 { display:grid; grid-template-columns: repeat(3,1fr); gap:32px; align-items:start; margin-top:12px; }
.feature { text-align:center; padding:10px; }
.feature-ico { width:88px; height:auto; display:block; margin:0 auto 14px; }
.feature h3 { color: #1931a6; margin:8px 0 10px; font-weight:800; }
.feature p { color:#233b63; }

/* value grid */
.two-tone { background: #edf5fb; padding:56px 0; }
.value-grid .value { text-align:center; padding:12px; }
.value-ico { width:82px; margin: 0 auto 12px; }

/* Philosophy / roadmap */
.content-block { padding:56px 0; color:#071133; }
.big-lead { font-size:1.3rem; text-align:center; margin:16px 0 28px; color:#243a6a; }
.roadmap { display:flex; gap:24px; justify-content:space-between; margin-top:28px; }
.road-step { flex:1; background:linear-gradient(180deg,#ffffff,#f3f8ff); padding:18px; border-radius:12px; text-align:center; }

/* CTA section */
.cta-section { padding:64px 0; background: linear-gradient(135deg,#7b41f5 0%, #2d59ff 100%); color:white; text-align:center; }
.cta-wrap { padding:40px 0; }
.contact-quick { display:flex; justify-content:center; gap:48px; margin-top:20px; color: #dbe9ff; }

/* footer */
.site-footer { padding:24px 0; background: linear-gradient(180deg,#081026,#021026); color:#9fb1d9; border-top:1px solid rgba(255,255,255,0.04); }
.footer-inner { display:flex; justify-content:space-between; align-items:center; gap:12px; }

/* responsive */
@media (max-width:900px) {
  .hero-large .hero-grid { grid-template-columns: 1fr; }
  .two-col-grid { grid-template-columns:1fr; }
  .grid-3, .value-grid { grid-template-columns:1fr; }
  .roadmap { flex-direction:column; }
  .nav-inner { padding:12px 0; }
  .nav-links { display:none; }
}
/* ===== Accessibility / contrast fixes for dark background =====
   Force readable text color on dark backgrounds and tune paragraph
   contrast. This is intentionally high-specificity and uses !important
   to override previous conflicting rules.
*/
body { color: #f5f8ff !important; }
h1,h2,h3,h4,h5 { color: #ffffff !important; }
.lead, .card p, .service-card p, .team-card p, .feature p, .value p, .panel p {
  color: #d7e8ff !important;
  line-height: 1.6;
}

/* Links */
a { color: #aecdff; }
a:hover, a:focus { color: #ffffff; text-decoration: underline; }

/* Keep light-section text dark (for blocks that use light backgrounds) */
.two-col-grid, .two-tone, .content-block[style*="background:#eef6fd"], .content-block[style*="background:#eef4fb"] {
  color: #071133 !important;
}

/* Make small UI improvements for readability */
.nav-links a { color: #dbe9ff !important; }
.panel { background: rgba(255,255,255,0.04); }

/* Improve card contrast */
.service-card, .card, .team-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 12px 30px rgba(0,0,0,0.18);
}

/* Optional: slightly bolder body text for legibility */
body, p, .lead { font-weight: 400; }

/* ===== Service rows (Framer-style) ===== */
.service-list {
  display: flex;
  flex-direction: column;
  gap: 28px;
  margin-top: 8px;
}

.service-row {
  display: flex;
  gap: 22px;
  align-items: center;
  padding: 22px;
  border-radius: 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 12px 30px rgba(0,0,0,0.14);
}

.service-media {
  flex: 0 0 180px;
  width: 180px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
}

.service-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.service-info {
  flex: 1 1 auto;
}

.service-info h3 {
  margin: 0 0 8px;
  font-size: 1.2rem;
  color: #ffffff;
}

.service-info p {
  margin: 0 0 10px;
  color: #d7e8ff;
}

.service-meta {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 8px;
}

.service-link {
  color: #aecdff;
  text-decoration: none;
  font-weight: 700;
  border-bottom: 2px solid transparent;
  padding-bottom: 2px;
}

.service-link:hover {
  color: #ffffff;
  border-bottom-color: #aecdff;
}

/* On-page detail blocks */
.service-detail {
  margin-top: 36px;
  padding: 22px;
  border-radius: 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.05);
}

.service-detail h4 { margin-top: 0; color: #ffffff; }

/* Responsive: stack on small screens */
@media (max-width: 900px) {
  .service-row {
    flex-direction: column;
    align-items: stretch;
  }
  .service-media {
    width: 100%;
    height: 220px;
  }
}

/* TitanForge logo: ensure it fits without cropping and uses a polite size */
.service-row#service-titanforge .service-media {
  flex: 0 0 160px;
  width: 160px;
  height: 120px;
}
.service-row#service-titanforge .service-media img {
  object-fit: contain;
  padding: 8px;
  width: auto;
  height: 100%;
  max-width: 100%;
  display: block;
}

/* Hide service details by default; show only the :target detail */
.service-detail { display: none; margin-top: 36px; padding: 22px; border-radius: 12px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.05); }
.service-detail:target { display: block; scroll-margin-top: 120px; }
/* Also allow showing when body has class .show-all (not used by default) */
body.show-all .service-detail { display: block; }

/* Small visual tweak so "Learn more" is clear */
.service-meta { margin-top: 8px; }
.service-link { color: #aecdff; font-weight:700; text-decoration:none; }
.service-link:hover { color: #fff; text-decoration:underline; }

/* === TitanForge-style services cards (namespaced to .tf-*) === */
.tf-section {
  max-width: 1120px;
  margin: 48px auto;
  padding: 36px 20px;
  color: #f5f8ff;
}
.tf-section h2 { font-size: 2.4rem; margin-bottom: 18px; color: #fff; }
.tf-cards { display:flex; gap:28px; flex-wrap:wrap; justify-content:center; align-items:stretch; }
.tf-card-wrap { perspective:1000px; width:320px; height:360px; }
.tf-card {
  width:100%; height:100%; position:relative; transform-style:preserve-3d; transition: transform .7s ease; cursor:pointer;
}
.tf-card-wrap:hover .tf-card { transform:rotateY(180deg); }

/* faces */
.tf-card-face { position:absolute; inset:0; border-radius:14px; display:flex; align-items:center; justify-content:center; padding:22px; backface-visibility:hidden; overflow:hidden; }
.tf-card-front { color:#fff; font-size:1.9rem; font-weight:700; text-align:center; }
.tf-card-front.rental { background: linear-gradient(135deg,#2db8c9,#19cbe0); }
.tf-card-front.forge  { background: linear-gradient(135deg,#0a8c84,#0da18f); }
.tf-card-front.advisory { background: linear-gradient(135deg,#8a1a8f,#b43fb7); }

.tf-card-back { background:#071028; color:#e6eefc; transform:rotateY(180deg); display:flex; flex-direction:column; gap:12px; align-items:center; justify-content:center; text-align:center; padding:26px; }
.tf-card-back h3 { margin:0; font-size:1.25rem; color:#fff; }
.tf-card-back p { margin:0; color:#cfe6ff; line-height:1.6; font-size:0.97rem; max-width:260px; }

.tf-card-back a, .tf-card-back button {
  margin-top:10px;
  padding:10px 18px;
  border-radius:999px;
  border:2px solid rgba(255,255,255,0.12);
  color:#fff;
  text-decoration:none;
  background:transparent;
  font-weight:700;
  cursor:pointer;
}
.tf-card-back a:hover, .tf-card-back button:hover { background:#fff; color:#071028; border-color:rgba(255,255,255,0.25); }

/* modal (partner form) */
.tf-modal { display:none; position:fixed; inset:0; background: rgba(0,0,0,0.45); z-index:1200; align-items:center; justify-content:center; padding:18px; }
.tf-modal.active { display:flex; }
.tf-modal .tf-modal-content { width:100%; max-width:640px; background:#fff; color:#0a0a0a; border-radius:12px; padding:20px 22px; box-shadow:0 20px 60px rgba(0,0,0,0.25); }
.tf-modal .tf-close { position:absolute; right:18px; top:12px; background:none; border:none; font-size:22px; cursor:pointer; color:#666; }

/* responsive */
@media (max-width: 980px) {
  .tf-card-wrap { width:300px; height:320px; }
}
@media (max-width: 720px) {
  .tf-cards { gap:18px; flex-direction:column; align-items:center; }
  .tf-card-wrap { width:92%; max-width:420px; height:320px; }
}

/* === TitanForge-style services cards (namespaced to .tf-*) === */
.tf-section {
  max-width: 1120px;
  margin: 48px auto;
  padding: 36px 20px;
  color: #f5f8ff;
}
.tf-section h2 { font-size: 2.4rem; margin-bottom: 18px; color: #fff; }
.tf-cards { display:flex; gap:28px; flex-wrap:wrap; justify-content:center; align-items:stretch; }
.tf-card-wrap { perspective:1000px; width:320px; height:360px; }
.tf-card {
  width:100%; height:100%; position:relative; transform-style:preserve-3d; transition: transform .7s ease; cursor:pointer;
}
.tf-card-wrap:hover .tf-card { transform:rotateY(180deg); }

/* faces */
.tf-card-face { position:absolute; inset:0; border-radius:14px; display:flex; align-items:center; justify-content:center; padding:22px; backface-visibility:hidden; overflow:hidden; }
.tf-card-front { color:#fff; font-size:1.9rem; font-weight:700; text-align:center; }
.tf-card-front.rental { background: linear-gradient(135deg,#2db8c9,#19cbe0); }
.tf-card-front.forge  { background: linear-gradient(135deg,#0a8c84,#0da18f); }
.tf-card-front.advisory { background: linear-gradient(135deg,#8a1a8f,#b43fb7); }

.tf-card-back { background:#071028; color:#e6eefc; transform:rotateY(180deg); display:flex; flex-direction:column; gap:12px; align-items:center; justify-content:center; text-align:center; padding:26px; }
.tf-card-back h3 { margin:0; font-size:1.25rem; color:#fff; }
.tf-card-back p { margin:0; color:#cfe6ff; line-height:1.6; font-size:0.97rem; max-width:260px; }

.tf-card-back a, .tf-card-back button {
  margin-top:10px;
  padding:10px 18px;
  border-radius:999px;
  border:2px solid rgba(255,255,255,0.12);
  color:#fff;
  text-decoration:none;
  background:transparent;
  font-weight:700;
  cursor:pointer;
}
.tf-card-back a:hover, .tf-card-back button:hover { background:#fff; color:#071028; border-color:rgba(255,255,255,0.25); }

/* modal (partner form) */
.tf-modal { display:none; position:fixed; inset:0; background: rgba(0,0,0,0.45); z-index:1200; align-items:center; justify-content:center; padding:18px; }
.tf-modal.active { display:flex; }
.tf-modal .tf-modal-content { width:100%; max-width:640px; background:#fff; color:#0a0a0a; border-radius:12px; padding:20px 22px; box-shadow:0 20px 60px rgba(0,0,0,0.25); }
.tf-modal .tf-close { position:absolute; right:18px; top:12px; background:none; border:none; font-size:22px; cursor:pointer; color:#666; }

/* responsive */
@media (max-width: 980px) {
  .tf-card-wrap { width:300px; height:320px; }
}
@media (max-width: 720px) {
  .tf-cards { gap:18px; flex-direction:column; align-items:center; }
  .tf-card-wrap { width:92%; max-width:420px; height:320px; }
}
/* Titan Forge flip cards (namespaced) */
 /* Titan Forge flip cards */
.tf-section {
  max-width: 1120px;
  margin: 48px auto;
  padding: 36px 20px;
  color: #f5f8ff;
}
.tf-section h2 { font-size: 2.4rem; margin-bottom: 18px; color: #fff; }
.tf-cards { display:flex; gap:28px; flex-wrap:wrap; justify-content:center; align-items:stretch; }
.tf-card-wrap { perspective:1200px; width:320px; height:360px; }
.tf-card { width:100%; height:100%; position:relative; transform-style:preserve-3d; transition: transform .7s ease; cursor:pointer; }
.tf-card-wrap:hover .tf-card { transform: rotateY(180deg); }

.tf-card-face { position:absolute; inset:0; border-radius:14px; display:flex; align-items:center; justify-content:center; padding:22px; backface-visibility:hidden; overflow:hidden; }
.tf-card-front { color:#fff; font-size:1.9rem; font-weight:700; text-align:center; }
.tf-card-front.rental { background: linear-gradient(135deg,#2db8c9,#19cbe0); }
.tf-card-front.forge  { background: linear-gradient(135deg,#0a8c84,#0da18f); }
.tf-card-front.advisory { background: linear-gradient(135deg,#8a1a8f,#b43fb7); }

.tf-card-back { background:#071028; color:#e6eefc; transform: rotateY(180deg); display:flex; flex-direction:column; gap:12px; align-items:center; justify-content:center; text-align:center; padding:26px; }
.tf-card-back h3 { margin:0; font-size:1.25rem; color:#fff; }
.tf-card-back p { margin:0; color:#cfe6ff; line-height:1.6; font-size:0.97rem; max-width:260px; }

.tf-card-back a, .tf-card-back button {
  margin-top:10px;
  padding:10px 18px;
  border-radius:999px;
  border:2px solid rgba(255,255,255,0.12);
  color:#fff;
  text-decoration:none;
  background:transparent;
  font-weight:700;
  cursor:pointer;
}
.tf-card-back a:hover, .tf-card-back button:hover { background:#fff; color:#071028; border-color:rgba(255,255,255,0.25); }

/* modal (stacked) */
.modal { display:none; position:fixed; inset:0; background: rgba(0,0,0,0.45); z-index:1200; align-items:center; justify-content:center; padding:18px; }
.modal.active { display:flex; }
.modal .modal-content { width:100%; max-width:640px; background:#fff; color:#0a0a0a; border-radius:12px; padding:20px 22px; box-shadow:0 20px 60px rgba(0,0,0,0.25); }
.modal .close-btn { position:absolute; right:18px; top:12px; background:none; border:none; font-size:22px; cursor:pointer; color:#666; }

/* responsive */
@media (max-width: 980px) {
  .tf-card-wrap { width:300px; height:320px; }
}
@media (max-width: 720px) {
  .tf-cards { gap:18px; flex-direction:column; align-items:center; }
  .tf-card-wrap { width:92%; max-width:420px; height:320px; }
}
/* Reveal animations */
/* Reveal animations: fade + lift + slight scale, with small stagger helpers. */
.reveal { 
  opacity: 0; 
  transform: translateY(18px) scale(.995);
  transition: opacity 560ms cubic-bezier(.2,.9,.2,1), transform 560ms cubic-bezier(.2,.9,.2,1);
  will-change: opacity, transform;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* small staged delays */
.reveal.delay-1 { transition-delay: 60ms; }
.reveal.delay-2 { transition-delay: 140ms; }
.reveal.delay-3 { transition-delay: 220ms; }

/* a tighter layout for card fronts so long titles don't jump */
.tf-card-face.tf-card-front { line-height:1.02; }

/* accessibility: respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .reveal { transition: none !important; transform: none !important; opacity: 1 !important; }
}

/* small scrollbar hint for horizontal lists (tf-cards/service lists) */
.tf-cards, .service-list { -webkit-overflow-scrolling: touch; scrollbar-width: thin; }

/* ===== Readability + layout fixes for Why Future Ark, Philosophy, and TF cards ===== */

/* 1) WHY FUTURE ARK / two-tone area: dark text on light background */
.two-tone {
  background: #eef6fb !important; /* slightly warm light background */
  color: #071133 !important;      /* strong dark text */
}
.value-grid .value {
  min-height: 160px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 18px;
}
.value-grid .value h4 {
  color: #0b2fa7 !important;
  font-weight: 700;
  font-size: 1.15rem;
  margin-bottom: 8px;
}
.value-grid .value p {
  color: #243a6a !important;
  font-size: 0.99rem;
  line-height: 1.5;
  margin: 0;
}

/* 2) Future Ark Philosophy: larger, clearer lead + roadmap sizing */
.big-lead {
  font-size: clamp(1.15rem, 2.2vw, 1.45rem) !important;
  color: #243a6a !important;
  margin-bottom: 18px;
}
.roadmap {
  display:flex;
  gap:20px;
  flex-wrap:wrap;
}
.road-step {
  flex:1;
  min-width: 180px;
  padding: 18px;
  background: linear-gradient(180deg,#ffffff,#f3f8ff);
  border-radius: 12px;
  text-align: center;
}
.road-step h5 {
  margin:0 0 8px;
  font-size: 1rem;
  color: #071133;
  font-weight:700;
}
.road-step p { color: #243a6a; margin:0; }

/* 3) TF cards: single line on wide screens, avoid strategic advisory wrapping */
.tf-cards {
  gap: 20px;
  overflow-x: auto;               /* allow a small horizontal scroll on narrow viewports */
  -webkit-overflow-scrolling: touch;
  padding-bottom: 8px;
}

/* default card sizing */
.tf-card-wrap {
  width: 320px;
  height: 360px;
  flex: 0 0 320px;
  box-sizing: border-box;
}

/* ensure front face text is responsive and avoids awkward wrapping */
.tf-card-face.tf-card-front {
  padding: 14px;
  line-height: 1.02;
  font-size: clamp(1.3rem, 1.8vw, 1.9rem);
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  hyphens:auto;
  white-space:normal;
  word-break: break-word;
}

/* Strategic Advisory: slightly smaller clamp to avoid line-breaks */
.tf-card-face.tf-card-front.advisory {
  font-size: clamp(1.1rem, 1.45vw, 1.6rem);
  padding-left: 10px;
  padding-right: 10px;
  white-space: normal;
}

/* On wide screens force single-row (no wrapping) and use percentage basis so three fit */
@media (min-width: 1100px) {
  .tf-cards {
    flex-wrap: nowrap;        /* keep in one row */
    justify-content: center;
  }
  .tf-card-wrap {
    width: 32%;
    flex: 0 0 32%;
    max-width: 360px;
    min-width: 260px;
  }
  .tf-card-face.tf-card-front { font-size: clamp(1.2rem, 1.4vw, 1.8rem); }
}

/* Mobile: stack as before but keep the front a bit smaller */
@media (max-width: 720px) {
  .tf-card-wrap { width: 92%; max-width: 420px; height: 320px; }
  .tf-card-face.tf-card-front { font-size: 1.8rem; }
}

/* small visual polish for hero / headings for better contrast on dark background */
.hero-copy h1, .page-hero h1 {
  color: #ffffff !important;
  text-shadow: 0 6px 18px rgba(0,0,0,0.32);
}

/* FOOTER / CTA readability if needed */
.cta-box, .panel {
  background: linear-gradient(135deg, rgba(109,140,255,0.06), rgba(139,92,246,0.04));
  color: #eaf1ff;
}

/* keep two-tone text dark even if other overrides exist */
.two-tone, .two-tone * { color: #071133 !important; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .tf-card, .tf-card-wrap { transition: none !important; }
}

/* ===== Fix: The Ark Way (two-col light) readability + Philosophy sizing ===== */

/* Ensure the 'light' two-col area uses a readable light background with dark text */
.two-col.light,
.two-col.light .two-col-grid {
  background: linear-gradient(180deg,#f7fbfe 0%, #eef6fb 100%) !important;
  color: #072043 !important;               /* strong dark blue for text */
}

/* Force headings, paragraphs and lead text inside that block to be dark */
.two-col.light h1,
.two-col.light h2,
.two-col.light h3,
.two-col.light .display,
.two-col.light .lead,
.two-col.light p,
.two-col.light .panel,
.two-col.light .card,
.two-col.light .service-card {
  color: #072043 !important;
}

/* Improve contrast for any links or small UI within the block */
.two-col.light a,
.two-col.light .service-link {
  color: #0b5fd6 !important;               /* vivid link color that reads on the light bg */
}

/* Bigger, clearer "Future Ark Philosophy" lead */
.big-lead {
  font-size: clamp(1.15rem, 2.4vw, 1.6rem) !important;
  color: #243a6a !important;
  line-height: 1.6 !important;
  margin-bottom: 18px !important;
}

/* Roadmap: more breathing room and clearer headings */
.roadmap { display:flex; gap:20px; flex-wrap:wrap; align-items:stretch; }
.road-step {
  flex:1;
  min-width: 190px;
  padding: 18px;
  background: linear-gradient(180deg,#ffffff,#f3f8ff);
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 10px 28px rgba(7,20,50,0.04);
}
.road-step h5 {
  margin:0 0 8px;
  font-size: 1.05rem;
  color: #071133;
  font-weight:700;
}
.road-step p { color: #243a6a; margin:0; }

/* Make the two-col image area and text align vertically better */
.two-col-grid { align-items: center; gap: 28px; }

/* Keep hero copy readable as well (in case of overlay) */
.hero-copy, .page-hero p { color: #eaf1ff !important; }

/* Small accessibility tweak: ensure panels inside two-col use visible borders */
.two-col.light .panel, .two-col.light .card {
  border: 1px solid rgba(7,20,51,0.06);
  background: #fbfeff;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .two-col.light * { transition: none !important; }
}

/* ===== Fixes: Roadmap / Phase cards + Strategic Advisory wrapping ===== */

/* Make roadmap steps larger, darker and visually distinct */
.road-step {
  background: linear-gradient(180deg,#ffffff,#f3f8ff);
  border-radius: 12px;
  padding: 22px;
  min-height: 140px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 28px rgba(7,20,50,0.05);
  border: 1px solid rgba(7,20,50,0.06);
}

/* "Phase X" heading: bigger and bold */
.road-step h5 {
  font-size: 1.125rem;        /* ~18px */
  line-height: 1.2;
  margin: 0 0 10px;
  color: #071133 !important;  /* strong dark navy */
  font-weight: 800;
  text-transform: none;
  letter-spacing: 0;
}

/* Phase text: larger, better line-height, dark color */
.road-step p {
  font-size: 1.02rem;         /* ~16px */
  line-height: 1.6;
  margin: 0;
  color: #243a6a !important;
  max-width: 28ch;
  text-align: center;
}

/* Ensure the roadmap container keeps consistent heights on rows */
.roadmap { align-items: stretch; }

/* When the page uses a light background for that block make sure text is dark */
.two-col.light .road-step,
.two-col.light .road-step h5,
.two-col.light .road-step p {
  color: inherit !important;
}

/* Improve visibility of detail blocks */
.service-detail {
  padding: 22px;
  border-radius: 12px;
  background: linear-gradient(180deg,#ffffff,#fbfeff);
  border: 1px solid rgba(7,20,50,0.05);
  box-shadow: 0 10px 30px rgba(7,20,50,0.04);
  color: #072043;
}

/* Make detail headings larger and easier to scan */
.service-detail h4 {
  font-size: 1.15rem;
  margin-top: 0;
  color: #071133;
  font-weight: 800;
}

/* Make the paragraph text in details readable */
.service-detail p {
  font-size: 1.02rem;
  line-height: 1.6;
  color: #243a6a;
}

/* Strategic Advisory: avoid awkward line-breaks on wide screens */
@media (min-width: 1100px) {
  .tf-card-face.tf-card-front.advisory {
    white-space: nowrap;           /* keep it on a single line */
    overflow: hidden;
    text-overflow: ellipsis;       /* safeguard in case it can't fit */
    font-size: clamp(1.1rem, 1.4vw, 1.6rem);
    padding-left: 10px;
    padding-right: 10px;
  }

  /* force TF cards to stay in a single row on wide screens */
  .tf-cards { flex-wrap: nowrap; justify-content:center; }
  .tf-card-wrap { width: 32%; flex: 0 0 32%; max-width: 360px; min-width: 260px; }
}

/* Still allow wrapping on smaller screens so mobile remains usable */
@media (max-width: 1099px) {
  .tf-card-face.tf-card-front.advisory { white-space: normal; }
}

/* small polish: increase contrast for the Ark Way paragraphs if they appear light */
.two-col.light .lead, .two-col.light p {
  color: #072043 !important;
  font-size: 1.02rem;
  line-height: 1.6;
}

/* Accessibility: respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .tf-card, .tf-card-wrap, .tf-cards { transition: none !important; }
}
/* MOBILE NAV & FOOTER CTA */

/* toggle button (hamburger) */
.nav-toggle {
  display: none; /* shown on mobile */
  background: none;
  border: none;
  padding: 8px;
  margin-left: 12px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.nav-toggle .hamburger,
.nav-toggle .hamburger::before,
.nav-toggle .hamburger::after {
  display: block;
  width: 22px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  position: relative;
}
.nav-toggle .hamburger::before,
.nav-toggle .hamburger::after {
  content: "";
  position: absolute;
  left: 0;
}
.nav-toggle .hamburger::before { top: -7px; }
.nav-toggle .hamburger::after { top: 7px; }

/* default nav-links desktop behaviour already exists */
.nav-inner { align-items:center; }

/* Mobile: hide links by default, show on .open */
@media (max-width: 900px) {
  .nav-inner { display:flex; align-items:center; gap:12px; padding:12px 0; }
  .nav-toggle { display: inline-flex; color: var(--muted); }
  .nav-links {
    display: none !important;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: rgba(11,16,32,0.95);
    flex-direction: column;
    gap: 12px;
    padding: 12px 18px;
    border-top: 1px solid rgba(255,255,255,0.04);
    z-index: 120;
  }
  .nav-links.open { display: flex !important; }
  .nav-links a { padding: 8px 0; display: block; }
}

/* make sure nav-links are visible on desktop */
@media (min-width: 901px) {
  .nav-links { display:flex !important; position:static; background:transparent; flex-direction:row; gap:18px; padding:0; border-top: none; }
}

/* Footer CTA — reuse site accents for color cohesion */
.footer-cta {
  display:block;
  padding: 28px;
  border-radius: 14px;
  margin: 22px 0 6px;
  color: #fff;
  background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
  box-shadow: 0 18px 50px rgba(0,0,0,0.18);
}
.footer-cta .cta-grid {
  display:flex;
  gap:18px;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
}
.footer-cta .cta-left {
  flex:1 1 320px;
}
.footer-cta .cta-right {
  flex:0 0 auto;
  display:flex;
  gap:18px;
  align-items:center;
}
.footer-cta h3 {
  margin:0 0 6px;
  font-size:1.3rem;
  color:#fff;
}
.footer-cta .muted { color: rgba(255,255,255,0.85); font-weight:600; }
.footer-cta a.button {
  background: #fff;
  color: var(--bg);
  padding:10px 16px;
  border-radius:10px;
  font-weight:700;
  text-decoration:none;
}

/* ensure the footer CTA matches pages that had a light palette if necessary */
.two-tone .footer-cta, .two-col.light .footer-cta {
  background: linear-gradient(180deg,#eef6fb,#f8fbfe);
  color: #071133;
}
.two-tone .footer-cta a.button, .two-col.light .footer-cta a.button {
  background: var(--accent-1);
  color: white;
}

/* accessibility: reduce motion */
@media (prefers-reduced-motion: reduce) {
  .nav-links, .nav-toggle, .footer-cta { transition: none !important; }
}
/* (paste the CSS snippet I provided earlier) */

/* ===== Contact modal & mobile contact button (added) ===== */
.nav-contact{ display:none; }
@media (max-width:900px){
  .nav-contact{ display:inline-block; }
  .nav-links{ display:none; } /* keep your existing behavior but ensure contact button visible */
}

.contact-panel { max-width:720px; margin:36px auto; padding:28px; }
.form-row { margin-bottom:14px; display:flex; flex-direction:column; gap:6px; }
.form-row label { font-weight:600; font-size:0.95rem; color:var(--muted); }
.form-row input[type="text"], .form-row input[type="email"], .form-row textarea {
  padding:12px 14px; border-radius:12px; border:1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03); color:var(--text); font-size:1rem; outline:none;
}
.form-row textarea { min-height:120px; resize:vertical; }
.form-actions { display:flex; gap:12px; align-items:center; margin-top:8px; }

.contact-modal { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; z-index:2000; background: rgba(11,16,32,0.6); backdrop-filter: blur(6px); }
.contact-modal.active { display:flex; }
.contact-modal .modal-card { width:96%; max-width:720px; border-radius:16px; padding:20px; background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02)); border:1px solid rgba(255,255,255,0.06); box-shadow: 0 20px 60px rgba(0,0,0,0.25); color:var(--text); }
.modal-close { float:right; background:transparent; border:none; font-size:20px; color:var(--muted); cursor:pointer; }
.contact-success { padding:18px; border-radius:12px; background:linear-gradient(135deg, rgba(10,140,132,0.12), rgba(109,140,255,0.08)); color:var(--text); }
.contact-error { padding:12px; border-radius:10px; background:rgba(255,60,60,0.08); color:#ffdede; }

/* ensure modal inputs match site look */
.contact-modal input, .contact-modal textarea { background: rgba(255,255,255,0.02); border:1px solid rgba(255,255,255,0.06); }

/* BEGIN GLOBAL THEME TOGGLE */
.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.theme-toggle {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.08);
  color: #f5f8ff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.2s ease, color 0.2s ease;
  padding: 0;
}

.theme-toggle:hover {
  transform: translateY(-1px);
}

.theme-toggle svg {
  width: 18px;
  height: 18px;
}

.sun-icon { display: none; }
body.light-mode .sun-icon { display: block; }
body.light-mode .moon-icon { display: none; }

body.light-mode {
  background: #f4f6fa !important;
  color: #101828 !important;
}

body.light-mode nav,
body.light-mode .site-header {
  background: rgba(255,255,255,0.92) !important;
  border-bottom: 1px solid rgba(16,24,40,0.08) !important;
}

body.light-mode .theme-toggle {
  border-color: rgba(16,24,40,0.08);
  background: rgba(16,24,40,0.06);
  color: #101828;
}

body.light-mode .nav-links a {
  color: #667085 !important;
}

body.light-mode .nav-links a.active,
body.light-mode .nav-links a:hover {
  color: #101828 !important;
}

body.light-mode h1,
body.light-mode h2,
body.light-mode h3,
body.light-mode h4,
body.light-mode h5,
body.light-mode .display,
body.light-mode .center-title,
body.light-mode .section-title {
  color: #101828 !important;
}

body.light-mode p,
body.light-mode .lead,
body.light-mode .muted,
body.light-mode .member-role,
body.light-mode .member-copy,
body.light-mode .team-role,
body.light-mode .feature p,
body.light-mode .value p,
body.light-mode .road-step p {
  color: #475467 !important;
}

body.light-mode .hero,
body.light-mode .page-hero,
body.light-mode .two-tone,
body.light-mode .content-block,
body.light-mode section,
body.light-mode main {
  color: #101828 !important;
}

body.light-mode .card,
body.light-mode .team-card,
body.light-mode .member-card,
body.light-mode .service-card,
body.light-mode .service-row,
body.light-mode .road-step,
body.light-mode .panel,
body.light-mode .contact-panel {
  background: #ffffff !important;
  border: 1px solid rgba(16,24,40,0.08) !important;
  box-shadow: 0 14px 34px rgba(16,24,40,0.10) !important;
  color: #101828 !important;
}

body.light-mode footer,
body.light-mode .site-footer {
  background: #ffffff !important;
  color: #101828 !important;
  border-top: 1px solid rgba(16,24,40,0.08) !important;
}

body.light-mode footer a,
body.light-mode .site-footer a {
  color: #344054 !important;
}

body.light-mode .footer-cta {
  background: linear-gradient(180deg,#eef6fb,#f8fbfe) !important;
  color: #071133 !important;
}

@media (max-width: 900px) {
  .header-actions {
    gap: 8px;
  }

  .theme-toggle {
    width: 38px;
    height: 38px;
  }
}
/* END GLOBAL THEME TOGGLE */

/* BEGIN MINI FOOTER */
.footer-links-mini {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  padding: 18px 0 8px;
}

.footer-links-mini a {
  color: inherit;
  text-decoration: none;
  font-weight: 600;
  opacity: 0.92;
}

.footer-links-mini a:hover,
.footer-links-mini a:focus {
  text-decoration: underline;
  opacity: 1;
}

body.light-mode .footer-links-mini a {
  color: #344054 !important;
}

@media (max-width: 720px) {
  .footer-links-mini {
    gap: 12px;
    padding: 16px 0 8px;
    font-size: 0.95rem;
  }
}
/* END MINI FOOTER */

/* BEGIN CTA CENTER FIX */
.cta-section,
.cta-wrap {
  text-align: center;
}

.cta-section h2,
.cta-section .lead,
.cta-section p {
  text-align: center !important;
  margin-left: auto;
  margin-right: auto;
}

.cta-section .button-row {
  justify-content: center !important;
  text-align: center;
}
/* END CTA CENTER FIX */

/* BEGIN INNER PAGE CONTRAST REFRESH */

/* Keep the homepage as-is. Improve readability on inner pages. */
body:not(.home-page) .page-hero {
  background:
    radial-gradient(circle at top left, rgba(109,140,255,0.08), transparent 18%),
    radial-gradient(circle at top right, rgba(139,92,246,0.07), transparent 20%),
    linear-gradient(180deg, #0d1530 0%, #081026 100%);
  color: #ffffff !important;
}

body:not(.home-page) .page-hero h1 {
  color: #ffffff !important;
  text-shadow: 0 6px 18px rgba(0,0,0,0.28);
}

body:not(.home-page) .page-hero p,
body:not(.home-page) .page-hero .lead {
  color: #d7e8ff !important;
}

/* Light, readable content sections like the homepage mix */
body:not(.home-page) .content-block,
body:not(.home-page) .two-tone,
body:not(.home-page) section:not(.page-hero):not(.cta-section):not(.site-footer):not(.footer-cta) {
  color: #071133;
}

body:not(.home-page) .content-block h2,
body:not(.home-page) .content-block h3,
body:not(.home-page) .content-block h4,
body:not(.home-page) .two-tone h2,
body:not(.home-page) .two-tone h3,
body:not(.home-page) .two-tone h4,
body:not(.home-page) .center-title,
body:not(.home-page) .section-title,
body:not(.home-page) .display {
  color: #0b2fa7 !important;
}

body:not(.home-page) .content-block p,
body:not(.home-page) .two-tone p,
body:not(.home-page) .big-lead,
body:not(.home-page) .lead,
body:not(.home-page) .value p,
body:not(.home-page) .feature p,
body:not(.home-page) .road-step p {
  color: #243a6a !important;
}

/* Cards and panels become lighter and easier to scan */
body:not(.home-page) .card,
body:not(.home-page) .team-card,
body:not(.home-page) .member-card,
body:not(.home-page) .service-row,
body:not(.home-page) .service-detail,
body:not(.home-page) .insight-card,
body:not(.home-page) .visual-card,
body:not(.home-page) .stat-card,
body:not(.home-page) .mini-case,
body:not(.home-page) .chart-panel,
body:not(.home-page) .summary-panel,
body:not(.home-page) .faq-item,
body:not(.home-page) .faq-panel,
body:not(.home-page) .faq-highlight,
body:not(.home-page) .principle-card,
body:not(.home-page) .about-panel,
body:not(.home-page) .story-row,
body:not(.home-page) .process-card,
body:not(.home-page) .impact-card {
  background: linear-gradient(180deg, #ffffff, #f8fbff) !important;
  border: 1px solid rgba(7,20,50,0.06) !important;
  box-shadow: 0 14px 34px rgba(16,24,40,0.10) !important;
}

/* Card text readability */
body:not(.home-page) .card h2,
body:not(.home-page) .card h3,
body:not(.home-page) .card h4,
body:not(.home-page) .team-card h2,
body:not(.home-page) .team-card h3,
body:not(.home-page) .member-card h2,
body:not(.home-page) .member-card h3,
body:not(.home-page) .service-row h3,
body:not(.home-page) .service-detail h4,
body:not(.home-page) .visual-card h3,
body:not(.home-page) .stat-value,
body:not(.home-page) .mini-case h3,
body:not(.home-page) .chart-panel h2,
body:not(.home-page) .summary-panel h2,
body:not(.home-page) .faq-panel h2,
body:not(.home-page) .faq-panel h3,
body:not(.home-page) .faq-group-title,
body:not(.home-page) .faq-question,
body:not(.home-page) .principle-card h3,
body:not(.home-page) .about-panel h2,
body:not(.home-page) .about-panel h3,
body:not(.home-page) .story-copy h2,
body:not(.home-page) .process-card h3,
body:not(.home-page) .impact-card h4 {
  color: #071133 !important;
}

body:not(.home-page) .card p,
body:not(.home-page) .team-card p,
body:not(.home-page) .member-card p,
body:not(.home-page) .member-copy,
body:not(.home-page) .member-role,
body:not(.home-page) .service-row p,
body:not(.home-page) .service-detail p,
body:not(.home-page) .visual-card p,
body:not(.home-page) .stat-card p,
body:not(.home-page) .mini-case p,
body:not(.home-page) .chart-panel p,
body:not(.home-page) .summary-panel p,
body:not(.home-page) .summary-box p,
body:not(.home-page) .faq-panel p,
body:not(.home-page) .faq-answer-inner,
body:not(.home-page) .faq-answer-inner p,
body:not(.home-page) .faq-highlight p,
body:not(.home-page) .principle-card p,
body:not(.home-page) .about-panel p,
body:not(.home-page) .about-panel li,
body:not(.home-page) .story-copy p,
body:not(.home-page) .process-card p,
body:not(.home-page) .impact-card p,
body:not(.home-page) .stat-label,
body:not(.home-page) .principle-kicker,
body:not(.home-page) .story-copy .eyebrow,
body:not(.home-page) .faq-kicker,
body:not(.home-page) .insight-kicker {
  color: #475467 !important;
}

/* Team page specific: make the cards stay readable in both modes */
body.team-page .member-card {
  text-align: left;
}

body.team-page .member-name,
body.team-page .member-role,
body.team-page .member-copy {
  text-align: left;
}

body.team-page .team-links {
  justify-content: flex-start;
}

/* Keep CTA dark and intentional */
body:not(.home-page) .cta-section {
  background: linear-gradient(135deg,#7b41f5 0%, #2d59ff 100%) !important;
  color: white !important;
}

body:not(.home-page) .cta-section h2,
body:not(.home-page) .cta-section p,
body:not(.home-page) .cta-section .lead {
  color: #ffffff !important;
}

/* Preserve dark mode on pages that explicitly use light-mode toggle */
body.light-mode .page-hero {
  background: linear-gradient(180deg, #dfe9fb 0%, #eef4fb 100%) !important;
}

body.light-mode .page-hero h1 {
  color: #101828 !important;
  text-shadow: none !important;
}

body.light-mode .page-hero p,
body.light-mode .page-hero .lead {
  color: #475467 !important;
}

/* END INNER PAGE CONTRAST REFRESH */

/* BEGIN INNER PAGE TITLE FONT */
.page-hero h1,
.about-copy h1 {
  font-family: "Orbitron", "Nunito Sans", sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -0.04em;
}

.page-hero .lead,
.about-copy .lead,
.about-kicker,
.faq-kicker,
.insight-kicker {
  font-family: "Nunito Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
}
/* END INNER PAGE TITLE FONT */

/* BEGIN HOMEPAGE LIGHT MODE CONTRAST PATCH */

/* AI Salon-ish direction: cleaner black/white contrast in light mode */
body.light-mode .hero,
body.light-mode.home-page .hero,
body.light-mode .home-hero {
  background:
    linear-gradient(180deg, #f7f9fc 0%, #eef3f8 100%) !important;
  color: #101828 !important;
}

/* Main hero title */
body.light-mode .hero h1,
body.light-mode .hero-copy h1,
body.light-mode.home-page .hero h1,
body.light-mode.home-page .hero-copy h1 {
  color: #0f1728 !important;
  text-shadow: none !important;
}

/* Hero paragraph */
body.light-mode .hero p,
body.light-mode .hero .lead,
body.light-mode .hero-copy p,
body.light-mode .hero-copy .lead,
body.light-mode.home-page .hero p,
body.light-mode.home-page .hero .lead {
  color: #475467 !important;
}

/* Hero buttons in light mode */
body.light-mode .hero .button-primary,
body.light-mode.home-page .hero .button-primary {
  background: #111827 !important;
  color: #ffffff !important;
  border: 1px solid #111827 !important;
  box-shadow: 0 10px 24px rgba(17,24,39,0.12) !important;
}

body.light-mode .hero .button,
body.light-mode.home-page .hero .button {
  color: #ffffff !important;
}

/* Hero image panel / visual */
body.light-mode .hero-visual img,
body.light-mode .hero img {
  box-shadow: 0 18px 40px rgba(15,23,40,0.12) !important;
}

/* Homepage section headings */
body.light-mode .center-title,
body.light-mode .display,
body.light-mode .section-title,
body.light-mode .hero + section h2,
body.light-mode section h2,
body.light-mode section h3,
body.light-mode section h4 {
  color: #0f1728 !important;
}

/* Homepage supporting copy */
body.light-mode .big-lead,
body.light-mode .value p,
body.light-mode .feature p,
body.light-mode .service-card p,
body.light-mode .card p,
body.light-mode .road-step p,
body.light-mode .service-row p,
body.light-mode .service-detail p,
body.light-mode section p {
  color: #475467 !important;
}

/* Service / value / feature cards */
body.light-mode .service-card,
body.light-mode .card,
body.light-mode .feature,
body.light-mode .value,
body.light-mode .road-step,
body.light-mode .service-row,
body.light-mode .service-detail,
body.light-mode .panel {
  background: #ffffff !important;
  border: 1px solid rgba(16,24,40,0.08) !important;
  box-shadow: 0 14px 34px rgba(16,24,40,0.08) !important;
  color: #101828 !important;
}

/* Specific titles inside service cards */
body.light-mode .service-card h3,
body.light-mode .card h3,
body.light-mode .feature h3,
body.light-mode .value h4,
body.light-mode .road-step h5,
body.light-mode .service-row h3,
body.light-mode .service-detail h4 {
  color: #0f1728 !important;
}

/* Improve "Our Services" area readability */
body.light-mode .service-link,
body.light-mode a.service-link {
  color: #111827 !important;
  font-weight: 700;
}

body.light-mode .service-link:hover,
body.light-mode a.service-link:hover {
  color: #000000 !important;
  text-decoration: underline;
}

/* Make the white/light sections really feel intentional */
body.light-mode .two-tone,
body.light-mode .content-block,
body.light-mode .two-col.light,
body.light-mode .two-col-grid {
  background: #f8fbff !important;
  color: #101828 !important;
}

/* Footer still readable in light mode */
body.light-mode footer,
body.light-mode .site-footer {
  background: #ffffff !important;
  color: #101828 !important;
  border-top: 1px solid rgba(16,24,40,0.08) !important;
}

body.light-mode footer a,
body.light-mode .site-footer a,
body.light-mode .footer-links-mini a {
  color: #344054 !important;
}

/* END HOMEPAGE LIGHT MODE CONTRAST PATCH */

/* BEGIN HOMEPAGE LIGHT CTA TUNE */
body.light-mode .footer-cta,
body.light-mode.home-page .footer-cta,
body.light-mode .cta-box.footer-cta {
  background: linear-gradient(180deg, #eaf2fb 0%, #dfeaf7 100%) !important;
  color: #0f1728 !important;
  border: 1px solid rgba(15,23,40,0.08) !important;
  box-shadow: 0 16px 34px rgba(15,23,40,0.08) !important;
}

body.light-mode .footer-cta h3,
body.light-mode .footer-cta .cta-left,
body.light-mode .footer-cta .cta-right,
body.light-mode .footer-cta strong,
body.light-mode .footer-cta div {
  color: #0f1728 !important;
}

body.light-mode .footer-cta .muted,
body.light-mode .footer-cta span,
body.light-mode .footer-cta p {
  color: #475467 !important;
}

body.light-mode .footer-cta a.button,
body.light-mode .footer-cta .button {
  background: #111827 !important;
  color: #ffffff !important;
  border: 1px solid #111827 !important;
  box-shadow: 0 10px 24px rgba(17,24,39,0.12) !important;
}

body.light-mode .footer-cta a.button:hover,
body.light-mode .footer-cta .button:hover {
  background: #0f1728 !important;
  color: #ffffff !important;
}

/* Keep the footer links row below it neutral and readable */
body.light-mode .footer-links-mini,
body.light-mode .footer-inner {
  color: #344054 !important;
}

body.light-mode .footer-links-mini a,
body.light-mode .footer-inner a {
  color: #344054 !important;
}
/* END HOMEPAGE LIGHT CTA TUNE */

/* BEGIN SHARED PAGE KICKER */
.page-kicker,
.about-kicker,
.insight-kicker,
.faq-kicker,
.team-kicker,
.services-kicker,
.contact-kicker,
body.light-mode .page-kicker,
body.light-mode .about-kicker,
body.light-mode .insight-kicker,
body.light-mode .faq-kicker,
body.light-mode .team-kicker,
body.light-mode .services-kicker,
body.light-mode .contact-kicker,
body.light-mode .page-hero .page-kicker + h1,
.page-hero .about-kicker + h1,
.page-hero .insight-kicker + h1,
.page-hero .faq-kicker + h1,
.page-hero .team-kicker + h1,
.page-hero .services-kicker + h1,
.page-hero .contact-kicker + h1,
.page-hero .legal-kicker + h1 {
  margin-top: 0;
}
/* END SHARED PAGE KICKER */

/* BEGIN PAGE KICKER ALIGN FIX */
.page-hero .container > .page-kicker,
.page-hero .container > .about-kicker,
.page-hero .container > .insight-kicker,
.page-hero .container > .page-hero .container > h1 {
  margin-top: 0 !important;
}
/* END PAGE KICKER ALIGN FIX */

/* BEGIN HOMEPAGE LIGHT MODE AI SALON PATCH */

/* Softer off-white / blue-gray homepage instead of pure white */
body.light-mode .hero,
body.light-mode.home-page .hero,
body.light-mode .home-hero {
  background:
    radial-gradient(circle at top left, rgba(45,89,255,0.05), transparent 22%),
    radial-gradient(circle at top right, rgba(123,65,245,0.04), transparent 20%),
    linear-gradient(180deg, #f3f6fb 0%, #e9eff6 100%) !important;
  color: #0f1728 !important;
}

/* Hero title: much darker */
body.light-mode .hero h1,
body.light-mode .hero-copy h1,
body.light-mode.home-page .hero h1,
body.light-mode.home-page .hero-copy h1 {
  color: #111827 !important;
  text-shadow: none !important;
}

/* Hero supporting copy */
body.light-mode .hero p,
body.light-mode .hero .lead,
body.light-mode .hero-copy p,
body.light-mode .hero-copy .lead,
body.light-mode.home-page .hero p,
body.light-mode.home-page .hero .lead {
  color: #475467 !important;
}

/* Buttons in hero */
body.light-mode .hero .button-primary,
body.light-mode.home-page .hero .button-primary {
  background: #111827 !important;
  color: #ffffff !important;
  border: 1px solid #111827 !important;
  box-shadow: 0 10px 24px rgba(17,24,39,0.12) !important;
}

/* Homepage section mix: not pure white, slightly blue-tinted */
body.light-mode .two-tone,
body.light-mode .content-block,
body.light-mode .two-col.light,
body.light-mode .two-col-grid {
  background: #f4f8fc !important;
  color: #101828 !important;
}

/* Main homepage headings */
body.light-mode .center-title,
body.light-mode .display,
body.light-mode .section-title,
body.light-mode .hero + section h2,
body.light-mode section h2,
body.light-mode section h3,
body.light-mode section h4 {
  color: #111827 !important;
}

/* Paragraph copy */
body.light-mode .big-lead,
body.light-mode .value p,
body.light-mode .feature p,
body.light-mode .service-card p,
body.light-mode .card p,
body.light-mode .road-step p,
body.light-mode .service-row p,
body.light-mode .service-detail p,
body.light-mode section p {
  color: #475467 !important;
}

/* Service / content cards: soft tinted surfaces */
body.light-mode .service-card,
body.light-mode .card,
body.light-mode .feature,
body.light-mode .value,
body.light-mode .road-step,
body.light-mode .service-row,
body.light-mode .service-detail,
body.light-mode .panel {
  background: linear-gradient(180deg, #fbfdff, #eef4fa) !important;
  border: 1px solid rgba(15,23,40,0.08) !important;
  box-shadow: 0 14px 34px rgba(15,23,40,0.08) !important;
  color: #101828 !important;
}

/* Card titles */
body.light-mode .service-card h3,
body.light-mode .card h3,
body.light-mode .feature h3,
body.light-mode .value h4,
body.light-mode .road-step h5,
body.light-mode .service-row h3,
body.light-mode .service-detail h4 {
  color: #111827 !important;
}

/* Links in service area */
body.light-mode .service-link,
body.light-mode a.service-link {
  color: #111827 !important;
  font-weight: 700;
}

body.light-mode .service-link:hover,
body.light-mode a.service-link:hover {
  color: #000000 !important;
  text-decoration: underline;
}

/* Homepage CTA block in light mode: soft blue, not harsh white */
body.light-mode .footer-cta,
body.light-mode.home-page .footer-cta,
body.light-mode .cta-box.footer-cta {
  background: linear-gradient(180deg, #eaf2fb 0%, #dfeaf7 100%) !important;
  color: #0f1728 !important;
  border: 1px solid rgba(15,23,40,0.08) !important;
  box-shadow: 0 16px 34px rgba(15,23,40,0.08) !important;
}

body.light-mode .footer-cta h3,
body.light-mode .footer-cta .cta-left,
body.light-mode .footer-cta .cta-right,
body.light-mode .footer-cta strong,
body.light-mode .footer-cta div {
  color: #0f1728 !important;
}

body.light-mode .footer-cta .muted,
body.light-mode .footer-cta span,
body.light-mode .footer-cta p {
  color: #475467 !important;
}

body.light-mode .footer-cta a.button,
body.light-mode .footer-cta .button {
  background: #111827 !important;
  color: #ffffff !important;
  border: 1px solid #111827 !important;
}

/* Footer links below CTA */
body.light-mode .footer-links-mini,
body.light-mode .footer-inner {
  color: #344054 !important;
}

body.light-mode .footer-links-mini a,
body.light-mode .footer-inner a {
  color: #344054 !important;
}

/* END HOMEPAGE LIGHT MODE AI SALON PATCH */

/* BEGIN PILL DROP FIX */
.page-hero .container > .insight-kicker {
  display: inline-flex !important;
  margin-top: 14px !important;
  margin-bottom: 18px !important;
}

.page-hero .container > h1 {
  margin-top: 0 !important;
}
/* END PILL DROP FIX */


/* BEGIN PILL HARD FIX */
body:not(.about-page):not(.insights-page) .page-hero .container > .insight-kicker {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 8px 12px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  background: rgba(255,255,255,0.04) !important;
  color: #d5e4ff !important;
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  margin-top: 14px !important;
  margin-bottom: 18px !important;
  font-family: "Nunito Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
  width: auto !important;
}

body.light-mode:not(.about-page):not(.insights-page) .page-hero .container > .insight-kicker {
  border-color: rgba(16,24,40,0.10) !important;
  background: rgba(16,24,40,0.04) !important;
  color: #475467 !important;
}

body.about-page .about-kicker,
body.about-page .page-kicker,
body.about-page .insight-kicker {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 8px 12px !important;
  border-radius: 999px !important;
  border: 1px solid var(--about-border) !important;
  background: var(--about-surface) !important;
  color: var(--about-muted) !important;
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  margin-bottom: 18px !important;
}

body.insights-page .insight-kicker,
body.insights-page .page-kicker {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 8px 12px !important;
  border-radius: 999px !important;
  border: 1px solid var(--insight-border) !important;
  background: var(--insight-surface) !important;
  color: var(--insight-muted) !important;
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  margin-bottom: 18px !important;
}

.page-hero .container > h1 {
  margin-top: 0 !important;
}
/* END PILL HARD FIX */

/* BEGIN ABOUT PAGE RESTORE */
body.about-page .story-row,
body.about-page .principle-card,
body.about-page .about-mini-panel {
  background: linear-gradient(180deg, var(--about-surface), var(--about-surface-2)) !important;
  border: 1px solid var(--about-border) !important;
  box-shadow: var(--about-shadow) !important;
}

body.about-page .story-badge {
  background: linear-gradient(135deg, rgba(45,89,255,0.20), rgba(123,65,245,0.18)) !important;
  border: 1px solid var(--about-border) !important;
  color: var(--about-text) !important;
}

body.about-page .story-copy h2,
body.about-page .principle-card h3,
body.about-page .about-mini-panel h2,
body.about-page .center-title {
  color: var(--about-text) !important;
}

body.about-page .story-copy p,
body.about-page .story-copy .eyebrow,
body.about-page .principle-card p,
body.about-page .principle-kicker,
body.about-page .about-mini-panel p {
  color: var(--about-muted) !important;
}

body.about-page.light-mode .story-row,
body.about-page.light-mode .principle-card,
body.about-page.light-mode .about-mini-panel {
  background: linear-gradient(180deg, #ffffff, #f8fbff) !important;
  border: 1px solid rgba(16,24,40,0.08) !important;
  box-shadow: 0 14px 34px rgba(16,24,40,0.10) !important;
}

body.about-page.light-mode .story-copy h2,
body.about-page.light-mode .principle-card h3,
body.about-page.light-mode .about-mini-panel h2,
body.about-page.light-mode .center-title {
  color: #101828 !important;
}

body.about-page.light-mode .story-copy p,
body.about-page.light-mode .story-copy .eyebrow,
body.about-page.light-mode .principle-card p,
body.about-page.light-mode .principle-kicker,
body.about-page.light-mode .about-mini-panel p {
  color: #475467 !important;
}
/* END ABOUT PAGE RESTORE */

/* BEGIN MOBILE NAV ANCHOR FIX */
.site-header,
nav,
.nav-inner {
  position: relative;
}

@media (max-width: 900px) {
  .nav-links {
    top: calc(100% + 8px) !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1200 !important;
  }
}
/* END MOBILE NAV ANCHOR FIX */

/* BEGIN INNER PAGE HOMEPAGE STYLE SYSTEM */

/* Shared design language from homepage */
body:not(.home-page) {
  --page-surface: rgba(255,255,255,0.04);
  --page-surface-2: rgba(255,255,255,0.03);
  --page-border: rgba(255,255,255,0.08);
  --page-text: #f5f8ff;
  --page-muted: #d5e4ff;
  --page-shadow: 0 20px 60px rgba(0,0,0,0.20);
  --page-radius: 28px;
}

body.light-mode:not(.home-page) {
  --page-surface: #ffffff;
  --page-surface-2: #f6f9fc;
  --page-border: rgba(16,24,40,0.08);
  --page-text: #101828;
  --page-muted: #526072;
  --page-shadow: 0 18px 42px rgba(16,24,40,0.10);
}

/* Inner page hero */
body:not(.home-page) .page-hero {
  padding: 44px 0 28px !important;
  background:
    radial-gradient(circle at top left, rgba(109,140,255,0.08), transparent 18%),
    radial-gradient(circle at top right, rgba(139,92,246,0.07), transparent 20%),
    linear-gradient(180deg, #0d1530 0%, #081026 100%) !important;
  color: #fff !important;
}

body.light-mode:not(.home-page) .page-hero {
  background:
    radial-gradient(circle at top left, rgba(45,89,255,0.05), transparent 22%),
    radial-gradient(circle at top right, rgba(123,65,245,0.04), transparent 20%),
    linear-gradient(180deg, #f3f6fb 0%, #e9eff6 100%) !important;
  color: #101828 !important;
}

/* Headings */
body:not(.home-page) .page-hero h1,
body:not(.home-page) .display,
body:not(.home-page) .center-title,
body:not(.home-page) .section-title,
body:not(.home-page) .section-head h2 {
  font-family: "Orbitron", "Nunito Sans", sans-serif !important;
  letter-spacing: -0.04em !important;
}

body:not(.home-page) .page-hero h1 {
  font-size: clamp(2.4rem, 4.4vw, 4.2rem) !important;
  line-height: 0.98 !important;
  margin: 0 0 14px !important;
  color: #fff !important;
  max-width: 14ch;
}

body.light-mode:not(.home-page) .page-hero h1 {
  color: #111827 !important;
  text-shadow: none !important;
}

body:not(.home-page) .page-hero .lead,
body:not(.home-page) .page-hero p {
  color: #d7e8ff !important;
  max-width: 58ch;
  line-height: 1.7 !important;
}

body.light-mode:not(.home-page) .page-hero .lead,
body.light-mode:not(.home-page) .page-hero p {
  color: #475467 !important;
}

/* Pills / kickers */
body:not(.home-page) .page-kicker,
body:not(.home-page) .insight-kicker,
body:not(.home-page) .about-kicker,
body:not(.home-page) .faq-kicker {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 8px 12px !important;
  border-radius: 999px !important;
  border: 1px solid var(--page-border) !important;
  background: var(--page-surface) !important;
  color: var(--page-muted) !important;
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  margin-bottom: 18px !important;
}

body:not(.home-page) .page-hero .container > h1 {
  margin-top: 0 !important;
}

/* Shared section header rhythm */
body:not(.home-page) .section-head {
  display: block !important;
  max-width: 860px;
  margin-bottom: 24px !important;
}

body:not(.home-page) .section-head > div {
  display: block !important;
  margin-bottom: 12px;
}

body:not(.home-page) .section-head h2 {
  max-width: 16ch !important;
  margin: 0 0 12px !important;
  color: var(--page-text) !important;
  font-size: clamp(1.9rem, 3.2vw, 3rem) !important;
  line-height: 1.02 !important;
}

body:not(.home-page) .section-head p {
  max-width: 62ch !important;
  margin: 0 !important;
  color: var(--page-muted) !important;
  line-height: 1.7 !important;
}

/* Card system */
body:not(.home-page) .card,
body:not(.home-page) .team-card,
body:not(.home-page) .member-card,
body:not(.home-page) .visual-card,
body:not(.home-page) .value-card,
body:not(.home-page) .why-card,
body:not(.home-page) .proof-card,
body:not(.home-page) .step-card,
body:not(.home-page) .faq-item,
body:not(.home-page) .faq-panel,
body:not(.home-page) .faq-highlight,
body:not(.home-page) .split-panel,
body:not(.home-page) .story-panel,
body:not(.home-page) .story-row,
body:not(.home-page) .principle-card,
body:not(.home-page) .about-mini-panel,
body:not(.home-page) .service-row,
body:not(.home-page) .service-detail,
body:not(.home-page) .stat-card,
body:not(.home-page) .panel {
  background: linear-gradient(180deg, var(--page-surface), var(--page-surface-2)) !important;
  border: 1px solid var(--page-border) !important;
  box-shadow: var(--page-shadow) !important;
  border-radius: var(--page-radius) !important;
  overflow: hidden;
  position: relative;
}

body:not(.home-page) .card::before,
body:not(.home-page) .team-card::before,
body:not(.home-page) .member-card::before,
body:not(.home-page) .visual-card::before,
body:not(.home-page) .value-card::before,
body:not(.home-page) .why-card::before,
body:not(.home-page) .proof-card::before,
body:not(.home-page) .step-card::before,
body:not(.home-page) .faq-item::before,
body:not(.home-page) .faq-panel::before,
body:not(.home-page) .faq-highlight::before,
body:not(.home-page) .split-panel::before,
body:not(.home-page) .story-panel::before,
body:not(.home-page) .story-row::before,
body:not(.home-page) .principle-card::before,
body:not(.home-page) .about-mini-panel::before,
body:not(.home-page) .service-row::before,
body:not(.home-page) .service-detail::before,
body:not(.home-page) .stat-card::before,
body:not(.home-page) .panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(255,255,255,0.22), rgba(255,255,255,0.02));
}

body.light-mode:not(.home-page) .card::before,
body.light-mode:not(.home-page) .team-card::before,
body.light-mode:not(.home-page) .member-card::before,
body.light-mode:not(.home-page) .visual-card::before,
body.light-mode:not(.home-page) .value-card::before,
body.light-mode:not(.home-page) .why-card::before,
body.light-mode:not(.home-page) .proof-card::before,
body.light-mode:not(.home-page) .step-card::before,
body.light-mode:not(.home-page) .faq-item::before,
body.light-mode:not(.home-page) .faq-panel::before,
body.light-mode:not(.home-page) .faq-highlight::before,
body.light-mode:not(.home-page) .split-panel::before,
body.light-mode:not(.home-page) .story-panel::before,
body.light-mode:not(.home-page) .story-row::before,
body.light-mode:not(.home-page) .principle-card::before,
body.light-mode:not(.home-page) .about-mini-panel::before,
body.light-mode:not(.home-page) .service-row::before,
body.light-mode:not(.home-page) .service-detail::before,
body.light-mode:not(.home-page) .stat-card::before,
body.light-mode:not(.home-page) .panel::before {
  background: linear-gradient(90deg, rgba(45,89,255,0.18), rgba(45,89,255,0.02));
}

/* Text inside cards */
body:not(.home-page) .card h2,
body:not(.home-page) .card h3,
body:not(.home-page) .card h4,
body:not(.home-page) .team-card h2,
body:not(.home-page) .team-card h3,
body:not(.home-page) .member-card h2,
body:not(.home-page) .member-card h3,
body:not(.home-page) .visual-card h2,
body:not(.home-page) .visual-card h3,
body:not(.home-page) .value-card h3,
body:not(.home-page) .why-card h3,
body:not(.home-page) .proof-value,
body:not(.home-page) .step-card h3,
body:not(.home-page) .split-panel h2,
body:not(.home-page) .story-panel h2,
body:not(.home-page) .story-panel h3,
body:not(.home-page) .story-copy h2,
body:not(.home-page) .principle-card h3,
body:not(.home-page) .about-mini-panel h2,
body:not(.home-page) .service-row h3,
body:not(.home-page) .service-detail h4,
body:not(.home-page) .faq-group-title,
body:not(.home-page) .faq-panel h2,
body:not(.home-page) .faq-panel h3,
body:not(.home-page) .faq-question {
  color: var(--page-text) !important;
}

body:not(.home-page) .card p,
body:not(.home-page) .team-card p,
body:not(.home-page) .member-card p,
body:not(.home-page) .member-role,
body:not(.home-page) .member-copy,
body:not(.home-page) .visual-card p,
body:not(.home-page) .value-card p,
body:not(.home-page) .why-card p,
body:not(.home-page) .proof-label,
body:not(.home-page) .step-card p,
body:not(.home-page) .split-panel p,
body:not(.home-page) .story-panel p,
body:not(.home-page) .story-copy p,
body:not(.home-page) .story-copy .eyebrow,
body:not(.home-page) .principle-card p,
body:not(.home-page) .principle-kicker,
body:not(.home-page) .about-mini-panel p,
body:not(.home-page) .service-row p,
body:not(.home-page) .service-detail p,
body:not(.home-page) .faq-panel p,
body:not(.home-page) .faq-answer-inner,
body:not(.home-page) .faq-answer-inner p,
body:not(.home-page) .faq-highlight p {
  color: var(--page-muted) !important;
  line-height: 1.72 !important;
}

/* Images */
body:not(.home-page) img {
  border-radius: 18px;
}

body:not(.home-page) .card-art,
body:not(.home-page) .split-visual,
body:not(.home-page) .feature-band-visual {
  border-radius: 22px !important;
  overflow: hidden;
}

/* Buttons */
body:not(.home-page) .button-primary {
  box-shadow: 0 12px 30px rgba(50,40,120,0.18) !important;
}

body.light-mode:not(.home-page) .button-primary {
  background: #111827 !important;
  color: #ffffff !important;
  border: 1px solid #111827 !important;
  box-shadow: 0 10px 24px rgba(17,24,39,0.12) !important;
}

/* Hover lift */
body:not(.home-page) .card:hover,
body:not(.home-page) .team-card:hover,
body:not(.home-page) .member-card:hover,
body:not(.home-page) .visual-card:hover,
body:not(.home-page) .value-card:hover,
body:not(.home-page) .why-card:hover,
body:not(.home-page) .proof-card:hover,
body:not(.home-page) .step-card:hover,
body:not(.home-page) .split-panel:hover,
body:not(.home-page) .story-panel:hover,
body:not(.home-page) .principle-card:hover,
body:not(.home-page) .service-row:hover {
  transform: translateY(-4px);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* Spacing rhythm */
body:not(.home-page) .content-block,
body:not(.home-page) .about-section,
body:not(.home-page) .faq-section,
body:not(.home-page) .home-section,
body:not(.home-page) section {
  scroll-margin-top: 110px;
}

@media (max-width: 980px) {
  body:not(.home-page) .page-hero h1,
  body:not(.home-page) .section-head h2 {
    max-width: none !important;
  }
}
/* END INNER PAGE HOMEPAGE STYLE SYSTEM */