/* ==========================================================================
   Glass Lane Pty Ltd — Shared sub-page styles (About, Services, Mirror AI,
   Learn, Enterprise, Contact). Pairs with the homepage <style> block.
   ========================================================================== */

/* ---- Fixed full-page video background (Services) ----
   The video is pinned for the whole page and never appears to move.
   Content lives in glossy cards that stack and slide over each other. */
.page-video-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.page-video-bg .page-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1;
  will-change: transform;
}
.page-video-bg .page-video-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(12, 11, 51, 0.45) 0%, rgba(12, 11, 51, 0.3) 50%, rgba(12, 11, 51, 0.6) 100%);
}

/* ---- Intro: headline floats directly over the video ---- */
.deck-intro {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--white);
  padding: 6rem 0 5rem;
}
.deck-intro .container { max-width: 56rem; }

/* ---- Glossy card deck ---- */
.deck-card {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: 3rem 0;
}
/* Each card sticks to the top of the viewport while the next slides over it. */
.gloss-card {
  position: sticky;
  top: 0;
  z-index: 2;
  width: min(96%, 1200px);
  margin: 0 auto;
  padding: clamp(2rem, 5vw, 4rem);
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.97) 0%,
    rgba(255, 255, 255, 0.94) 55%,
    rgba(244, 246, 250, 0.97) 100%
  );
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: 1.5rem;
  /* Cinematic 3D — layered drop shadows give depth + a soft teal glow that
     makes the card "lift" off the video. */
  box-shadow:
    0 2px 4px rgba(12, 11, 51, 0.12),
    0 12px 28px -6px rgba(12, 11, 51, 0.28),
    0 36px 70px -16px rgba(12, 11, 51, 0.5),
    0 70px 120px -30px rgba(12, 11, 51, 0.45),
    0 0 0 1px rgba(255, 255, 255, 0.25) inset,
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 22px 60px -12px rgba(8, 182, 105, 0.18);
  color: var(--charcoal);
  /* 3D presence on the page — cards gently tilt into the viewport */
  transform: perspective(1600px) rotateX(0.4deg) rotateY(0deg);
  transform-origin: center;
  transition:
    transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
/* Transparent variant — the card has no white panel; its text sits directly on
   the fixed video behind it (matching the hero/deck-intro treatment). Flip the
   text to white so it reads on the dark video. */
.gloss-card--transparent {
  background: transparent;
  border: none;
  box-shadow: none;
  color: #fff;
  text-align: center;
}
.gloss-card--transparent .card-eyebrow { color: var(--secondary-teal); }
.gloss-card--transparent .card-title { color: #fff; }
.gloss-card--transparent .card-lede { color: rgba(255, 255, 255, 0.85); }
.gloss-card--transparent .grad-text {
  background: linear-gradient(120deg, #9fb6e6 0%, #08b669 55%, #7dd8ac 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.gloss-card--transparent .help-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.gloss-card--transparent .help-step {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 8px 30px -8px rgba(12, 11, 51, 0.4);
}
.gloss-card--transparent .help-step:hover {
  box-shadow: 0 14px 40px -8px rgba(12, 11, 51, 0.5);
}
.gloss-card--transparent .help-step h3 { color: #fff; }
.gloss-card--transparent .help-step p { color: rgba(255, 255, 255, 0.85); }
.gloss-card--transparent .help-cta .btn--ghost {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.6);
  color: #fff;
}
.gloss-card--transparent .help-cta .btn--ghost:hover {
  border-color: var(--secondary-teal);
  color: var(--secondary-teal);
  background: rgba(255, 255, 255, 0.06);
}
/* All ghost buttons inside a transparent card must be visible on the dark
   video: white text + a solid light border (the default dark-navy ghost style
   is invisible against the video). */
.gloss-card--transparent .btn--ghost {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.7);
  color: #fff;
}
.gloss-card--transparent .btn--ghost:hover {
  border-color: var(--secondary-teal);
  color: #fff;
  background: rgba(8, 182, 105, 0.22);
}
/* ---- Transparent-card inner components: force readable light-on-dark ---- */
.gloss-card--transparent .about-grid { align-items: center; }
.gloss-card--transparent .about-copy h3,
.gloss-card--transparent .about-copy p,
.gloss-card--transparent .about-copy .card-lede { color: rgba(255, 255, 255, 0.85); }
.gloss-card--transparent .about-link { color: var(--secondary-teal); }
.gloss-card--transparent .about-card {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 8px 30px -8px rgba(12, 11, 51, 0.5);
  backdrop-filter: blur(6px);
}
.gloss-card--transparent .about-card h3 { color: #fff; }
.gloss-card--transparent .about-card div { border-bottom-color: rgba(255, 255, 255, 0.1); }
.gloss-card--transparent .about-card dt { color: rgba(255, 255, 255, 0.7); }
.gloss-card--transparent .about-card dd { color: #fff; }

/* Services cards */
.gloss-card--transparent .svc-grid .svc-card {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: 0 8px 30px -8px rgba(12, 11, 51, 0.5);
  backdrop-filter: blur(6px);
}
.gloss-card--transparent .svc-card .svc-body h3 { color: #fff; }
.gloss-card--transparent .svc-card .svc-body > p { color: rgba(255, 255, 255, 0.85); }
.gloss-card--transparent .svc-card .svc-list li { color: rgba(255, 255, 255, 0.8); }

/* Mirror AI */
.gloss-card--transparent .mirror-grid .section-title { color: #fff; }
.gloss-card--transparent .mirror-desc { color: rgba(255, 255, 255, 0.85); }
.gloss-card--transparent .mirror-feats strong { color: #fff; }
.gloss-card--transparent .mirror-feats p { color: rgba(255, 255, 255, 0.8); }

/* Who We Serve */
.gloss-card--transparent .serve-card {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 8px 30px -8px rgba(12, 11, 51, 0.5);
  backdrop-filter: blur(6px);
}
.gloss-card--transparent .serve-card h3 { color: #fff; }
.gloss-card--transparent .serve-card p { color: rgba(255, 255, 255, 0.85); }
.gloss-card--transparent .serve-link { color: var(--secondary-teal); }

/* Trusted Sources / partners */
.gloss-card--transparent .partners-band {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
}
.gloss-card--transparent .partners-band::before { opacity: 0.6; }
/* Alternate a subtle opposite rotation so consecutive cards read as distinct layers */
.gloss-card[style*="--gpos:right"] {
  transform: perspective(1600px) rotateX(0.4deg) rotateY(-0.6deg);
}
/* Dramatic 3D lift on hover — card pops up and straightens toward the viewer */
.gloss-card:hover {
  transform: perspective(1200px) rotateX(0deg) rotateY(0deg) translateY(-8px) scale(1.01);
  box-shadow:
    0 2px 4px rgba(12, 11, 51, 0.1),
    0 16px 36px -6px rgba(12, 11, 51, 0.3),
    0 48px 90px -18px rgba(12, 11, 51, 0.55),
    0 90px 150px -40px rgba(12, 11, 51, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.3) inset,
    0 1px 0 rgba(255, 255, 255, 0.95) inset,
    0 30px 80px -16px rgba(8, 182, 105, 0.28);
}
/* Glossy sheen — a diagonal highlight across the top of the card */
.gloss-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(
      115deg,
      rgba(255, 255, 255, 0.55) 0%,
      rgba(255, 255, 255, 0) 38%,
      rgba(255, 255, 255, 0) 100%
    );
  pointer-events: none;
}
/* Alternate a subtle side highlight so consecutive cards feel distinct */
.gloss-card[style*="--gpos:right"]::before {
  background:
    linear-gradient(
      245deg,
      rgba(255, 255, 255, 0.55) 0%,
      rgba(255, 255, 255, 0) 38%,
      rgba(255, 255, 255, 0) 100%
    );
}
.gloss-card .container { padding: 0; max-width: none; }

/* ---- Card media image (top of each glossy card) ---- */
.gloss-media {
  position: relative;
  margin: calc(clamp(2rem, 5vw, 4rem) * -1) calc(clamp(2rem, 5vw, 4rem) * -1) 1.75rem;
  border-radius: 1.5rem 1.5rem 0 0;
  overflow: hidden;
  aspect-ratio: 21 / 8;
}
/* Team headshots: circular bordered portrait with the title label below.
   The 21/8 banner makes headshots huge; a headshot is a compact circle. */
.team-headshot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  margin: calc(clamp(2rem, 5vw, 4rem) * -1) auto 1.75rem;
}
.gloss-media--headshot {
  aspect-ratio: 1 / 1;
  width: 12rem;
  max-width: 12rem;
  margin: 0;
  border-radius: 50%;
  border: 3px solid rgba(12, 11, 51, 0.12);
  padding: 0.35rem;
  background: #fff;
  box-shadow: 0 8px 24px rgba(12, 11, 51, 0.12);
  position: relative;
}
.gloss-media--headshot::before {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  padding: 3px;
  background: conic-gradient(
    from 0deg,
    var(--secondary-teal, #2dd4bf),
    var(--primary-dark, #0c0b33),
    var(--secondary-teal, #2dd4bf)
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: headshot-ring 6s linear infinite;
  opacity: 0.9;
}
@keyframes headshot-ring {
  to { transform: rotate(360deg); }
}
.gloss-media--headshot img {
  object-fit: cover;
  object-position: center top;
  border-radius: 50%;
  width: 100%;
  height: 100%;
}
.team-headshot .gloss-media-tag {
  position: static;
  margin-top: 0.5rem;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  color: var(--primary-dark);
  text-align: center;
  white-space: normal;
  line-height: 1.4;
}
.gloss-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.01);
  transition: transform 0.6s ease;
}
.gloss-card:hover .gloss-media img { transform: scale(1.06); }
.gloss-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(12,11,51,0) 55%, rgba(12,11,51,0.28) 100%);
  pointer-events: none;
}
.gloss-media-tag {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 2;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(6px);
  color: var(--primary-dark);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(12,11,51,0.2);
}
.gloss-card--cta .gloss-media { border-radius: 1.5rem 1.5rem 0 0; margin-bottom: 1.5rem; }
.gloss-card--cta .gloss-media::after {
  background: linear-gradient(180deg, rgba(12,11,51,0.25) 0%, rgba(12,11,51,0.55) 100%);
}

.card-eyebrow {
  color: var(--secondary-teal);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}
.card-title {
  font-family: var(--font-serif);
  color: var(--primary-dark);
  font-size: clamp(1.9rem, 4vw, 2.8rem);
  font-weight: 700;
  line-height: 1.12;
  margin-bottom: 1rem;
}
.card-lede {
  font-size: clamp(1.05rem, 2vw, 1.2rem);
  color: var(--charcoal);
  line-height: 1.7;
  max-width: 62ch;
  margin-bottom: 2rem;
}

/* Final CTA card sits over the video, translucent glassy navy */
.gloss-card--cta {
  background: linear-gradient(
    145deg,
    rgba(12, 11, 51, 0.92) 0%,
    rgba(20, 18, 60, 0.9) 55%,
    rgba(12, 11, 51, 0.94) 100%
  );
  border-color: rgba(8, 182, 105, 0.35);
  color: rgba(255, 255, 255, 0.9);
}
.gloss-card--cta .card-title,
.gloss-card--cta h2 { color: var(--white); }
.gloss-card--cta .contact-title { color: var(--white); font-family: var(--font-serif); font-size: clamp(1.8rem, 4vw, 2.6rem); }
.gloss-card--cta .contact-sub { color: rgba(255, 255, 255, 0.82); max-width: 56ch; margin: 1rem auto 2rem; line-height: 1.7; }
.gloss-card--cta .contact-actions { justify-content: center; }
/* Ghost button on the dark navy CTA card must be visible (white text +
   light border) — the dark-navy default disappears on the navy background. */
.gloss-card--cta .btn--ghost {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.7);
  color: #fff;
}
.gloss-card--cta .btn--ghost:hover {
  border-color: var(--secondary-teal);
  color: #fff;
  background: rgba(8, 182, 105, 0.22);
}

/* Reduced motion: cards stack normally instead of sliding */
@media (prefers-reduced-motion: reduce) {
  .deck-card { min-height: auto; }
  .gloss-card { position: static; margin-bottom: 1.5rem; }
}

/* ---- Mobile: deck cards + video must remain usable on small screens ----
   On phones the fixed video's `object-fit: cover` crops to a tiny, unreadable
   slice and the sticky full-height cards squeeze the content. Degrade the deck
   to a clean stacked layout so the video reads as a backdrop and cards flow
   naturally. */
@media (max-width: 760px) {
  .deck-intro { min-height: auto; padding: 5.5rem 0 3.5rem; }
  .deck-card { min-height: auto; padding: 1rem 0 1.5rem; display: block; }
  .gloss-card {
    position: static;
    width: 100%;
    padding: clamp(1.5rem, 5vw, 2rem);
    border-radius: 1.1rem;
    margin-bottom: 1.25rem;
    /* Flatten the 3D tilt on mobile for cleaner scroll + less GPU cost */
    transform: none;
  }
  /* On phones we now serve a dedicated portrait (1080x1920) video via a
     <source media="(max-width:760px)">. Show it full-bleed (cover) so the
     whole scene fills the frame — no more corner-crop or tiny contained strip.
     The poster remains as a fallback/preload backdrop. */
  .page-video-bg {
    background-color: #080a24;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
  .page-video-bg .page-video {
    display: block;
    object-fit: cover;
    object-position: center;
    /* The orb/network subject is ~95% of the frame width and drifts as it
       animates, so `cover` crops its edges on a phone. Scale the video down
       slightly so the whole subject stays in frame and centred. */
    transform: scale(0.82);
  }
  .page-video-bg .page-video-overlay { background: rgba(12, 11, 51, 0.55); }
  .gloss-media { aspect-ratio: 16 / 10; }
  .gloss-media img { object-fit: cover; }
  /* Tighten inner grids so nothing overflows horizontally */
  .mirror-gallery, .cap-grid, .process-grid, .serve-grid, .svc-grid,
  .problem-grid, .tool-grid, .values-grid, .module-grid, .eng-grid,
  .sector-grid, .team-grid, .help-grid {
    grid-template-columns: 1fr !important;
  }
  .svc-detail-grid .svc-card { grid-template-columns: 1fr; }
  .card-title { font-size: 1.7rem; }
  /* Flatten the per-variant entrance animations on phones — cards stay
     visible and static instead of sliding/zooming (cleaner, cheaper). */
  html.js .gloss-card[data-anim],
  html.js .gloss-card[data-anim].is-in {
    opacity: 1;
    transform: none;
    filter: none;
  }
}

/* ---- Card entrance animation (lift + fade on scroll into view) ---- */
html.js .gloss-card {
  opacity: 0;
  transform: translateY(40px) scale(0.98);
  transition:
    opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform, filter;
}
html.js .gloss-card.is-in,
html:not(.js) .gloss-card,
html.js.no-motion .gloss-card {
  opacity: 1;
  /* Land on the cinematic 3D-tilted position (matches the base .gloss-card
     transform; hover straightens it). */
  transform: perspective(1600px) rotateX(0.4deg) rotateY(0deg);
}
html.js .gloss-card.is-in[style*="--gpos:right"],
html:not(.js) .gloss-card[style*="--gpos:right"],
html.js.no-motion .gloss-card[style*="--gpos:right"] {
  opacity: 1;
  transform: perspective(1600px) rotateX(0.4deg) rotateY(-0.6deg);
}
html.js .gloss-card:hover,
html:not(.js) .gloss-card:hover,
html.js.no-motion .gloss-card:hover {
  transform: perspective(1200px) rotateX(0deg) rotateY(0deg) translateY(-8px) scale(1.01);
}

/* ---- Per-variant entrance animations (presentation feel) ----
   Each card reveals with a distinct motion as you scroll, like a slide deck
   reacting to your scroll position. Variants are selected via data-anim.
   The base reveal hides cards; `.is-in` + the variant class plays the motion. */
html.js .gloss-card[data-anim="zoom-in"] {
  opacity: 0;
  transform: perspective(1600px) scale(0.82);
}
html.js .gloss-card[data-anim="zoom-in"].is-in {
  opacity: 1;
  transform: perspective(1600px) rotateX(0.4deg) scale(1);
}
html.js .gloss-card[data-anim="slide-left"] {
  opacity: 0;
  transform: perspective(1600px) translateX(90px);
}
html.js .gloss-card[data-anim="slide-left"].is-in {
  opacity: 1;
  transform: perspective(1600px) rotateX(0.4deg) rotateY(-0.6deg) translateX(0);
}
html.js .gloss-card[data-anim="slide-right"] {
  opacity: 0;
  transform: perspective(1600px) translateX(-90px);
}
html.js .gloss-card[data-anim="slide-right"].is-in {
  opacity: 1;
  transform: perspective(1600px) rotateX(0.4deg) rotateY(0.6deg) translateX(0);
}
html.js .gloss-card[data-anim="fade-up"] {
  opacity: 0;
  transform: perspective(1600px) translateY(60px);
}
html.js .gloss-card[data-anim="fade-up"].is-in {
  opacity: 1;
  transform: perspective(1600px) rotateX(0.4deg) translateY(0);
}
/* Blend a soft depth blur on cards as they settle, like a focused slide */
html.js .gloss-card[data-anim].is-in {
  filter: blur(0);
}
html.js .gloss-card[data-anim] {
  filter: blur(4px);
}
html:not(.js) .gloss-card[data-anim],
html.js.no-motion .gloss-card[data-anim] {
  opacity: 1;
  transform: perspective(1600px) rotateX(0.4deg);
  filter: none;
}

/* Animated glossy sheen sweep across the card */
.gloss-card::after {
  content: "";
  position: absolute;
  top: -120%;
  left: -120%;
  width: 70%;
  height: 400%;
  transform: rotate(25deg);
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.28) 50%, transparent 100%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
html.js .gloss-card.is-in::after {
  animation: gloss-sweep 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0.4s forwards;
}
@keyframes gloss-sweep {
  0% { left: -120%; opacity: 0; }
  20% { opacity: 1; }
  70% { opacity: 1; }
  100% { left: 120%; opacity: 0; }
}
/* On hover, gently sweep the sheen again */
.gloss-card:hover::after {
  animation: gloss-sweep 0.9s ease forwards;
}
@media (prefers-reduced-motion: reduce) {
  html.js .gloss-card { opacity: 1; transform: none; transition: none; }
  .gloss-card::after { display: none; }
}

/* ---- Scrollspy rail (section dots) ---- */
.scrollspy-rail {
  position: fixed;
  right: 1.25rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 0.6rem 0.5rem;
  background: rgba(12, 11, 51, 0.35);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
}
.scrollspy-dot {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: transparent;
  cursor: pointer;
  padding: 0;
  transition: background 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
}
.scrollspy-dot:hover { border-color: var(--secondary-teal); transform: scale(1.2); }
.scrollspy-dot.is-active {
  background: var(--secondary-teal);
  border-color: var(--secondary-teal);
  transform: scale(1.35);
}
@media (max-width: 900px) {
  .scrollspy-rail { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .scrollspy-rail { display: none; }
}

/* ---- Split-text heading reveal ---- */
.split { display: inline-block; }
.split__line {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
}
.split__unit {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.6em);
  transition:
    opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1) calc(var(--i, 0) * 45ms),
    transform 0.6s cubic-bezier(0.22, 1, 0.36, 1) calc(var(--i, 0) * 45ms);
}
.is-split-in .split__unit {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .split__unit { opacity: 1; transform: none; transition: none; }
}

/* ---- Page hero (dark sub-page header) ---- */
.page-hero {
  padding-top: 8rem;
  padding-bottom: 4rem;
}
.page-hero .eyebrow { justify-content: flex-start; }
.page-title {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(2.4rem, 5vw, 3.5rem);
  line-height: 1.08;
  color: var(--white);
  max-width: 18ch;
  margin-bottom: 1.25rem;
}
.page-sub {
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  color: rgba(255,255,255,.82);
  max-width: 62ch;
  line-height: 1.7;
}

/* ---- Narrow centered container ---- */
.narrow { max-width: 46rem; margin-inline: auto; }
.center { text-align: center; }
.center .eyebrow { justify-content: center; }
.center .section-sub { margin-inline: auto; }

/* ---- Prose (long-form copy) ---- */
.prose p {
  color: var(--charcoal);
  font-size: 1.0625rem;
  line-height: 1.8;
  margin-bottom: 1.25rem;
}
.prose strong { color: var(--primary-dark); }
.prose ul { margin: 1rem 0 1.5rem 1.25rem; list-style: disc; color: var(--charcoal); }
.prose li { margin-bottom: .5rem; line-height: 1.6; }
.prose a { color: var(--primary-blue); text-decoration: underline; }

/* ---- Team grid ---- */
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.75rem;
  margin-top: 2.5rem;
}
.team-card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 1rem;
  padding: 1.75rem;
  text-align: center;
  transition: transform .3s ease, border-color .3s ease, background .3s ease;
}
.team-card:hover { transform: translateY(-4px); border-color: rgba(8,182,105,.5); background: rgba(255,255,255,.06); }
.team-photo {
  width: 7.5rem; height: 7.5rem;
  margin: 0 auto 1.25rem;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid rgba(8,182,105,.4);
}
.team-photo img { width: 100%; height: 100%; object-fit: cover; }
.team-card h3 { color: var(--white); font-size: 1.3rem; font-family: var(--font-serif); }
.team-role { color: var(--secondary-teal); font-size: .9rem; font-weight: 500; margin: .25rem 0 .9rem; }
.team-bio { color: rgba(255,255,255,.78); font-size: .95rem; line-height: 1.65; }

/* ---- Expanded team profiles ---- */
.team-profile {
  display: grid; grid-template-columns: 1fr; gap: 2rem;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.09);
  border-radius: 1.25rem; padding: 2rem; margin-bottom: 2rem;
}
@media (min-width: 860px) { .team-profile { grid-template-columns: 300px 1fr; } }
.team-profile-head { text-align: center; }
.team-profile-head .team-photo {
  width: 9rem; height: 9rem; margin: 0 auto 1.25rem;
  border-radius: 50%; overflow: hidden; border: 3px solid rgba(8,182,105,.4);
}
.team-profile-head .team-photo img { width: 100%; height: 100%; object-fit: cover; }
.team-profile-head h3 { color: var(--white); font-family: var(--font-serif); font-size: 1.5rem; }
.team-profile-head .team-role { color: var(--secondary-teal); font-size: .9rem; font-weight: 500; margin: .25rem 0 1rem; }
.team-profile-head .team-linkedin {
  display: inline-flex; align-items: center; gap: .5rem;
  background: rgba(8,182,105,.12); border: 1px solid rgba(8,182,105,.35);
  color: #5fe8b0; padding: .5rem 1rem; border-radius: 999px;
  font-size: .85rem; font-weight: 500; text-decoration: none; transition: all .2s ease;
}
.team-profile-head .team-linkedin:hover { background: rgba(8,182,105,.22); }
.team-profile-body h4 {
  font-family: var(--font-serif); color: var(--secondary-teal);
  font-size: 1.05rem; text-transform: uppercase; letter-spacing: .04em; margin: 1.5rem 0 .5rem;
}
.team-profile-body h4:first-child { margin-top: 0; }
.team-profile-body p { color: rgba(255,255,255,.8); line-height: 1.7; margin-bottom: .75rem; }
.team-profile-body ul { list-style: none; margin-bottom: 1rem; }
.team-profile-body ul li { position: relative; padding-left: 1.4rem; color: rgba(255,255,255,.8); margin-bottom: .5rem; line-height: 1.6; }
.team-profile-body ul li::before { content: "✓"; position: absolute; left: 0; color: var(--secondary-teal); font-weight: 700; }

/* ---- Services detail page ---- */
.svc-detail-grid {
  display: grid;
  gap: 2rem;
  margin-top: 2.5rem;
}
.svc-detail-grid .svc-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  background: var(--white);
  border: 1px solid rgba(12,11,51,.08);
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: box-shadow .3s ease, transform .3s ease;
}
.svc-detail-grid .svc-card:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-3px); }
.svc-detail-grid .svc-media { position: relative; }
.svc-detail-grid .svc-media img { width: 100%; height: 100%; object-fit: cover; max-height: 300px; }
.svc-detail-grid .svc-num {
  position: absolute; top: 1rem; left: 1rem;
  background: var(--secondary-teal); color: #fff;
  font-weight: 700; padding: .35rem .8rem; border-radius: 999px; font-size: .85rem;
}
.svc-detail-grid .svc-body { padding: 1.5rem 1.75rem 2rem; }
.svc-detail-grid .svc-body h3 { font-family: var(--font-serif); color: var(--primary-dark); font-size: 1.6rem; margin-bottom: .75rem; }
.svc-detail-grid .svc-body > p { color: var(--charcoal); margin-bottom: 1.25rem; }
.svc-list { list-style: none; }
.svc-list li { position: relative; padding-left: 1.4rem; color: var(--charcoal); margin-bottom: .55rem; line-height: 1.5; }
.svc-list li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: .5rem; height: .5rem; border-radius: 50%;
  background: var(--gradient-primary);
}
@media (min-width: 720px) {
  .svc-detail-grid .svc-card { grid-template-columns: 1.2fr 1fr; align-items: stretch; }
}

/* ---- Process / approach ---- */
.process-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.25rem;
  margin-top: 2.5rem;
  text-align: left;
}
.process-step {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 1rem;
  padding: 1.5rem;
}
.process-num {
  font-family: var(--font-serif);
  font-size: 2rem; font-weight: 700;
  color: var(--secondary-teal); display: block; margin-bottom: .5rem;
}
.process-step h3 { color: var(--white); font-family: var(--font-serif); font-size: 1.2rem; margin-bottom: .4rem; }
.process-step p { color: rgba(255,255,255,.75); font-size: .95rem; line-height: 1.6; }

/* ---- Mirror AI page ---- */
.page-actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.75rem; }
.page-note { margin-top: 1.25rem; font-size: .9rem; color: rgba(255,255,255,.65); }
.mirror-badge {
  display: inline-flex; align-items: center; gap: .5rem;
  background: rgba(8,182,105,.12); border: 1px solid rgba(8,182,105,.4);
  color: #5fe8b0; padding: .45rem 1rem; border-radius: 999px;
  font-size: .82rem; font-weight: 600; letter-spacing: .02em; margin-bottom: 1.25rem;
}
.mirror-badge .dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--secondary-teal); }
.mirror-gallery {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.25rem; margin-top: 2rem;
}
.mirror-shot {
  border-radius: 1rem; overflow: hidden; border: 1px solid rgba(12,11,51,.1);
  box-shadow: var(--shadow-card);
}
.mirror-shot img { width: 100%; display: block; }
.cap-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.25rem; margin-top: 2rem;
}
.cap-card {
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.09);
  border-radius: 1rem; padding: 1.5rem;
}
.cap-card h3 { color: var(--white); font-family: var(--font-serif); font-size: 1.2rem; margin-bottom: .5rem; }
.cap-card p { color: rgba(255,255,255,.75); font-size: .95rem; line-height: 1.6; }
.process-step--light { background: var(--off-white); border: 1px solid rgba(12,11,51,.08); }
.process-step--light h3 { color: var(--primary-dark); }
.process-step--light p { color: var(--charcoal); }
.process-step--light .process-num { color: var(--secondary-green); }

/* ---- Contact page ---- */
.contact-grid {
  display: grid; grid-template-columns: 1fr; gap: 2rem;
}
@media (min-width: 900px) { .contact-grid { grid-template-columns: 1fr 1.4fr; } }
.contact-info-card {
  background: var(--white); border: 1px solid rgba(12,11,51,.08);
  border-radius: 1rem; padding: 1.5rem; margin-bottom: 1.25rem;
  box-shadow: var(--shadow-card);
}
.contact-info-card h3 { font-family: var(--font-serif); color: var(--primary-dark); font-size: 1.15rem; margin-bottom: .5rem; }
.contact-info-card a, .contact-info-card p { color: var(--secondary-green); text-decoration: none; font-size: 1rem; line-height: 1.6; }
.contact-form-card {
  background: var(--white); border: 1px solid rgba(12,11,51,.08);
  border-radius: 1rem; padding: 2rem; box-shadow: var(--shadow-card);
}
.contact-form-card h3 { font-family: var(--font-serif); color: var(--primary-dark); font-size: 1.5rem; }
.form-intro { color: var(--gray); margin: .5rem 0 1.5rem; }
.form-field { margin-bottom: 1.1rem; }
.form-field label { display: block; font-weight: 500; color: var(--primary-dark); margin-bottom: .4rem; font-size: .9rem; }
.form-field input, .form-field select, .form-field textarea {
  width: 100%; padding: .8rem 1rem; border: 1px solid rgba(12,11,51,.2);
  border-radius: .6rem; font-family: var(--font-sans); font-size: 1rem;
  color: var(--charcoal); background: var(--off-white); transition: border-color .2s ease;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  outline: none; border-color: var(--secondary-teal); background: var(--white);
}
.btn--block { width: 100%; justify-content: center; }
.form-note { margin-top: 1rem; font-size: .9rem; }
.form-note.ok { color: var(--secondary-green); }
.form-note.error { color: #c0392b; }

/* ---- Articles page ---- */
.articles-status { color: var(--gray); font-size: 1rem; padding: 1rem 0; }
.articles-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem; margin-top: 1rem;
}
.article-card {
  background: var(--white); border: 1px solid rgba(12,11,51,.08);
  border-radius: 1rem; overflow: hidden; box-shadow: var(--shadow-card);
  display: flex; flex-direction: column;
  transition: transform .3s ease, box-shadow .3s ease;
}
.article-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); }
.article-thumb { width: 100%; height: 180px; object-fit: cover; display: block; background: var(--off-white); }
.article-thumb--placeholder {
  background: linear-gradient(135deg, var(--primary-dark) 0%, var(--secondary-teal) 100%);
}
.article-body { padding: 1.5rem; display: flex; flex-direction: column; flex: 1; }
.article-cat {
  display: inline-block; font-size: .72rem; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--secondary-green); margin-bottom: .5rem;
}
.article-title { font-family: var(--font-serif); color: var(--primary-dark); font-size: 1.25rem; line-height: 1.3; margin-bottom: .5rem; }
.article-title-link { color: var(--primary-dark); text-decoration: none; transition: color .2s ease; }
.article-title-link:hover { color: var(--primary-blue); text-decoration: underline; }
.article-sub { color: var(--primary-dark); font-weight: 500; font-size: .95rem; margin-bottom: .5rem; }
.article-excerpt { color: var(--gray); font-size: .92rem; line-height: 1.6; flex: 1; }
.article-meta { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.25rem; }
.article-date { color: var(--gray); font-size: .85rem; }

/* ---- Auth pages (login / signup) ---- */
.auth-card {
  max-width: 520px; margin: 0 auto; background: var(--white);
  border: 1px solid rgba(12,11,51,.08); border-radius: 1rem;
  padding: 2rem; box-shadow: var(--shadow-card);
}
.auth-tabs { display: flex; gap: .5rem; margin-bottom: 1.5rem; border-bottom: 1px solid rgba(12,11,51,.1); }
.auth-tab {
  background: none; border: none; padding: .6rem 1rem; font-family: var(--font-sans);
  font-size: .95rem; font-weight: 600; color: var(--gray); cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.auth-tab.is-active { color: var(--secondary-teal); border-bottom-color: var(--secondary-teal); }
.auth-panel { display: block; }
.auth-panel[hidden] { display: none; }
.auth-intro { color: var(--gray); font-size: .95rem; line-height: 1.6; margin-bottom: 1.25rem; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-field--row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.checkbox { display: flex; align-items: center; gap: .5rem; font-size: .9rem; color: var(--charcoal); cursor: pointer; }
.checkbox input { width: auto; }
.auth-link { color: var(--secondary-teal); text-decoration: none; font-size: .9rem; }
.auth-link:hover { text-decoration: underline; }
.auth-switch { margin-top: 1.25rem; text-align: center; color: var(--gray); font-size: .9rem; }
.auth-switch a { color: var(--secondary-teal); text-decoration: none; font-weight: 600; }
.auth-switch a:hover { text-decoration: underline; }
.opt { color: var(--gray); font-weight: 400; font-size: .85rem; }
@media (max-width: 480px) { .form-grid { grid-template-columns: 1fr; } }

/* ---- Admin dashboard ---- */
.admin-status { color: var(--gray); font-size: 1rem; padding: 1rem 0; }
.admin-status.error { color: #c0392b; }
.admin-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; margin-bottom: 2rem; }
.admin-stat { background: var(--white); border: 1px solid rgba(12,11,51,.08); border-radius: 1rem; padding: 1.25rem; box-shadow: var(--shadow-card); text-align: center; }
.admin-stat-num { display: block; font-family: var(--font-serif); font-size: 2rem; font-weight: 700; color: var(--primary-dark); }
.admin-stat-label { color: var(--gray); font-size: .85rem; }
.admin-tabs { display: flex; gap: .5rem; margin-bottom: 1.5rem; border-bottom: 1px solid rgba(12,11,51,.1); }
.admin-tab { background: none; border: none; padding: .6rem 1rem; font-family: var(--font-sans); font-size: .95rem; font-weight: 600; color: var(--gray); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.admin-tab.is-active { color: var(--secondary-teal); border-bottom-color: var(--secondary-teal); }
.admin-panel[hidden] { display: none; }
.admin-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.admin-toolbar h3 { font-family: var(--font-serif); color: var(--primary-dark); }
.admin-list { display: flex; flex-direction: column; gap: .75rem; }
.admin-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; background: var(--white); border: 1px solid rgba(12,11,51,.08); border-radius: .75rem; padding: 1rem 1.25rem; box-shadow: var(--shadow-card); }
.admin-row-main { display: flex; flex-direction: column; gap: .25rem; }
.admin-row-main strong { color: var(--primary-dark); }
.admin-row-sub { color: var(--gray); font-size: .85rem; }
.admin-row-actions { display: flex; align-items: center; gap: .5rem; }
.admin-badge { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--secondary-teal); background: rgba(8,182,105,.1); padding: .25rem .6rem; border-radius: 999px; }
.admin-empty { color: var(--gray); padding: 1rem 0; }
.btn--ghost { background: transparent; border: 1px solid rgba(12,11,51,.2); color: var(--primary-dark); }
.btn--ghost:hover { border-color: var(--secondary-teal); color: var(--secondary-teal); }
.btn--xs { padding: .35rem .7rem; font-size: .8rem; }

/* ---- Learn page ---- */
.module-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.25rem; margin-top: 2rem;
}
.module-card {
  background: var(--white); border: 1px solid rgba(12,11,51,.08);
  border-radius: 1rem; padding: 1.5rem; box-shadow: var(--shadow-card);
  transition: transform .3s ease, box-shadow .3s ease;
}
.module-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); }
.module-num { font-family: var(--font-serif); font-size: 2rem; font-weight: 700; color: var(--primary-purple); display: block; margin-bottom: .5rem; }
.module-card h3 { font-family: var(--font-serif); color: var(--primary-dark); font-size: 1.2rem; margin-bottom: .5rem; }
.module-card p { color: var(--charcoal); font-size: .95rem; line-height: 1.6; }
.module-card--dark { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.09); }
.module-card--dark h3 { color: var(--white); }
.module-card--dark p { color: rgba(255,255,255,.78); }
.module-card--dark .module-num { color: var(--secondary-teal); }
.tool-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem; margin-top: 2rem;
}
.tool-card {
  background: var(--off-white); border: 1px solid rgba(12,11,51,.08);
  border-radius: 1rem; padding: 1.5rem; text-align: center;
  transition: transform .3s ease, border-color .3s ease;
}
.tool-card:hover { transform: translateY(-3px); border-color: var(--secondary-teal); }
.tool-card h3 { font-family: var(--font-serif); color: var(--primary-dark); font-size: 1.15rem; margin-bottom: .35rem; }
.tool-card p { color: var(--gray); font-size: .9rem; }
.tool-grid--dark { margin-top: 0; }
.tool-card--dark { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.09); }
.tool-card--dark h3 { color: var(--white); }
.tool-card--dark p { color: rgba(255,255,255,.7); }

/* ---- Enterprise page ---- */
.problem-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.25rem; margin-top: 2rem;
}
.problem-card {
  background: var(--white); border: 1px solid rgba(12,11,51,.08);
  border-radius: 1rem; padding: 1.5rem; box-shadow: var(--shadow-card);
  transition: transform .3s ease, box-shadow .3s ease;
}
.problem-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); }
.problem-num { font-family: var(--font-serif); font-size: 2rem; font-weight: 700; color: var(--secondary-green); display: block; margin-bottom: .5rem; }
.problem-card h3 { font-family: var(--font-serif); color: var(--primary-dark); font-size: 1.2rem; margin-bottom: .5rem; }

/* ---- Light-theme overrides for inner cards inside a white gloss tile ----
   The following card classes were originally designed for dark `section--dark`
   backgrounds (white text on translucent white). Now that they live inside the
   white .gloss-card deck tiles, force them to a light, readable theme. */
.gloss-card .cap-card {
  background: var(--off-white);
  border: 1px solid rgba(12, 11, 51, 0.08);
}
.gloss-card .cap-card h3 { color: var(--primary-dark); }
.gloss-card .cap-card p { color: var(--charcoal); }

.gloss-card .process-step {
  background: var(--off-white);
  border: 1px solid rgba(12, 11, 51, 0.08);
}
.gloss-card .process-step h3 { color: var(--primary-dark); }
.gloss-card .process-step p { color: var(--charcoal); }
.gloss-card .process-step .process-num { color: var(--secondary-green); }

.gloss-card .tool-card--dark {
  background: var(--off-white);
  border: 1px solid rgba(12, 11, 51, 0.08);
}
.gloss-card .tool-card--dark h3 { color: var(--primary-dark); }
.gloss-card .tool-card--dark p { color: var(--charcoal); }
.gloss-card .tool-grid--dark { margin-top: 0; }

.gloss-card .team-card {
  background: var(--off-white);
  border: 1px solid rgba(12, 11, 51, 0.08);
}
.gloss-card .team-card h3 { color: var(--primary-dark); }
.gloss-card .team-card .team-role { color: var(--secondary-teal); }
.gloss-card .module-card--dark {
  background: var(--off-white);
  border: 1px solid rgba(12, 11, 51, 0.08);
}
.gloss-card .module-card--dark h3 { color: var(--primary-dark); }
.gloss-card .module-card--dark p { color: var(--charcoal); }
.gloss-card .module-card--dark .module-num { color: var(--primary-purple); }

.problem-card p { color: var(--charcoal); font-size: .95rem; line-height: 1.6; }

/* ---- About values ---- */
.values-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.25rem; margin-top: 2rem;
}
.value-card {
  background: var(--off-white); border: 1px solid rgba(12,11,51,.08);
  border-radius: 1rem; padding: 1.5rem; text-align: center;
  transition: transform .3s ease, border-color .3s ease;
}
.value-card:hover { transform: translateY(-3px); border-color: var(--secondary-teal); }
.value-card h3 { font-family: var(--font-serif); color: var(--primary-dark); font-size: 1.2rem; margin-bottom: .5rem; }
.value-card p { color: var(--charcoal); font-size: .95rem; line-height: 1.6; }

/* ---- Learn module detail pages ---- */
.module-hero { padding-top: 7rem; padding-bottom: 3rem; }
.module-breadcrumb {
  display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
  font-size: .85rem; color: rgba(255,255,255,.7); margin-bottom: 1.25rem;
}
.module-breadcrumb a { color: var(--secondary-teal); text-decoration: none; }
.module-breadcrumb a:hover { text-decoration: underline; }
.module-breadcrumb .sep { color: rgba(255,255,255,.4); }
.module-takeaway {
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
  border-radius: 1rem; padding: 1.5rem; margin-top: 1.5rem;
}
.module-takeaway h3 { color: var(--secondary-teal); font-family: var(--font-serif); font-size: 1.1rem; margin-bottom: .75rem; }
.module-takeaway ul { list-style: none; }
.module-takeaway li { color: rgba(255,255,255,.85); padding-left: 1.4rem; position: relative; margin-bottom: .5rem; line-height: 1.6; }
.module-takeaway li::before { content: "✓"; position: absolute; left: 0; color: var(--secondary-teal); font-weight: 700; }
.module-body { max-width: 46rem; margin-inline: auto; }
.module-body h2 {
  font-family: var(--font-serif); color: var(--primary-dark);
  font-size: 1.75rem; margin: 2.5rem 0 1rem;
}
.module-body h3 { font-family: var(--font-serif); color: var(--primary-purple); font-size: 1.3rem; margin: 1.75rem 0 .75rem; }
.module-body p { color: var(--charcoal); font-size: 1.0625rem; line-height: 1.8; margin-bottom: 1.1rem; }
.module-body ul, .module-body ol { margin: 1rem 0 1.5rem 1.4rem; color: var(--charcoal); }
.module-body li { margin-bottom: .5rem; line-height: 1.7; }
.module-body strong { color: var(--primary-dark); }
.module-body .module-callout {
  background: var(--off-white); border-left: 4px solid var(--secondary-teal);
  border-radius: .5rem; padding: 1.25rem 1.5rem; margin: 1.5rem 0;
}
.module-body .module-callout p { margin-bottom: 0; }
.module-nav {
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  margin-top: 3rem; padding-top: 2rem; border-top: 1px solid rgba(12,11,51,.1);
}
.module-nav a { text-decoration: none; }
.module-cta {
  background: var(--gradient-primary); color: #fff; border-radius: 1rem;
  padding: 2rem; text-align: center; margin-top: 3rem;
}
.module-cta h3 { font-family: var(--font-serif); font-size: 1.5rem; margin-bottom: .5rem; }
.module-cta p { color: rgba(255,255,255,.85); margin-bottom: 1.25rem; }
.module-cta .btn--ghost { border-color: rgba(255,255,255,.6); color: #fff; }
.module-cta .btn--ghost:hover { background: rgba(255,255,255,.1); }
.module-helpful { margin-top: 2rem; text-align: center; }
.module-helpful .helpful-btns { display: inline-flex; gap: .75rem; margin-top: .75rem; }
.module-helpful .helpful-btns button {
  padding: .5rem 1.25rem; border-radius: 999px; border: 1px solid rgba(12,11,51,.2);
  background: var(--white); color: var(--primary-dark); cursor: pointer; font-family: var(--font-sans);
  transition: all .2s ease;
}
.module-helpful .helpful-btns button:hover { border-color: var(--secondary-teal); color: var(--secondary-green); }

/* ---- Learn course hub ---- */
.course-hero { padding-top: 7rem; padding-bottom: 3rem; }
.course-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; margin-top: 2rem; }
.course-card {
  background: var(--white); border: 1px solid rgba(12,11,51,.08); border-radius: 1rem;
  padding: 1.75rem; box-shadow: var(--shadow-card); display: flex; flex-direction: column;
  transition: transform .3s ease, box-shadow .3s ease;
}
.course-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); }
.course-card .course-num { font-family: var(--font-serif); font-size: 2rem; font-weight: 700; color: var(--primary-purple); }
.course-card h3 { font-family: var(--font-serif); color: var(--primary-dark); font-size: 1.25rem; margin: .5rem 0; }
.course-card p { color: var(--charcoal); font-size: .95rem; line-height: 1.6; flex-grow: 1; }
.course-card .course-meta { display: flex; gap: 1rem; font-size: .8rem; color: var(--gray); margin-top: 1rem; }
.course-card .course-link { margin-top: 1.25rem; }
.course-card--dark { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.09); }
.course-card--dark h3 { color: var(--white); }
.course-card--dark p { color: rgba(255,255,255,.78); }
.course-card--dark .course-num { color: var(--secondary-teal); }
.course-card--dark .course-meta { color: rgba(255,255,255,.5); }

/* ---- Learn search ---- */
.learn-search { max-width: 40rem; margin: 2rem auto 0; position: relative; }
.learn-search input {
  width: 100%; padding: 1rem 1.25rem; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.08);
  color: var(--white); font-family: var(--font-sans); font-size: 1rem;
}
.learn-search input::placeholder { color: rgba(255,255,255,.5); }
.learn-search input:focus { outline: none; border-color: var(--secondary-teal); }
.learn-search .search-icon { position: absolute; right: 1.25rem; top: 50%; transform: translateY(-50%); color: rgba(255,255,255,.5); }
.search-empty { text-align: center; color: rgba(255,255,255,.6); padding: 2rem; display: none; }

/* ---- Tools ---- */
.tool-page { max-width: 46rem; margin-inline: auto; }
.tool-form { background: var(--white); border: 1px solid rgba(12,11,51,.08); border-radius: 1rem; padding: 2rem; box-shadow: var(--shadow-card); }
.tool-form .form-field { margin-bottom: 1.25rem; }
.tool-form label { display: flex; align-items: center; gap: .4rem; font-weight: 500; color: var(--primary-dark); margin-bottom: .4rem; font-size: .9rem; }
.tool-form input, .tool-form select {
  width: 100%; padding: .8rem 1rem; border: 1px solid rgba(12,11,51,.2);
  border-radius: .6rem; font-family: var(--font-sans); font-size: 1rem; color: var(--charcoal); background: var(--off-white);
}
.tool-form input:focus, .tool-form select:focus { outline: none; border-color: var(--secondary-teal); background: var(--white); }
.tool-result { background: var(--off-white); border: 1px solid rgba(12,11,51,.08); border-radius: 1rem; padding: 1.5rem; margin-top: 1.5rem; display: none; }
.tool-result.show { display: block; }
.tool-result h3 { font-family: var(--font-serif); color: var(--primary-dark); margin-bottom: .5rem; }
.tool-result .result-value { font-size: 2rem; font-weight: 700; color: var(--secondary-green); }
.tool-result p { color: var(--charcoal); line-height: 1.6; }
/* Data breakdown rows inside a result (label: value) */
.tool-breakdown { margin-top: 1.25rem; border-top: 1px solid rgba(12,11,51,.1); padding-top: 1rem; }
.tool-breakdown .bd-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: .45rem 0; border-bottom: 1px dashed rgba(12,11,51,.08);
  color: var(--charcoal); font-size: .95rem;
}
.tool-breakdown .bd-row .bd-label { color: var(--gray); }
.tool-breakdown .bd-row .bd-value { font-weight: 600; color: var(--primary-dark); text-align: right; }
.tool-breakdown .bd-row.bd-total { border-bottom: none; margin-top: .25rem; font-weight: 700; }
.tool-breakdown .bd-row.bd-total .bd-value { color: var(--secondary-green); font-size: 1.05rem; }
.tool-breakdown .bd-note { margin-top: .75rem; font-size: .85rem; color: var(--gray); line-height: 1.5; }
/* Insight / reasoning bullets */
.tool-insights { margin-top: 1.25rem; }
.tool-insights h4 { font-family: var(--font-serif); color: var(--primary-dark); font-size: 1rem; margin-bottom: .6rem; }
.tool-insights ul { list-style: none; }
.tool-insights ul li { position: relative; padding-left: 1.3rem; color: var(--charcoal); margin-bottom: .5rem; line-height: 1.55; font-size: .92rem; }
.tool-insights ul li::before {
  content: ""; position: absolute; left: 0; top: .5em;
  width: .5rem; height: .5rem; border-radius: 50%; background: var(--gradient-primary);
}
/* Contact / deeper-estimate CTA inside the result */
.tool-result-cta { margin-top: 1.25rem; text-align: center; padding: 1.25rem; background: var(--white); border: 1px solid rgba(12,11,51,.08); border-radius: .75rem; }
.tool-result-cta p { font-size: .9rem; color: var(--charcoal); margin-bottom: .75rem; }

/* ---- Field helper tooltips (?) ---- */
.field-help {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  background: var(--secondary-teal);
  color: #fff;
  font-size: .7rem;
  font-weight: 700;
  line-height: 1;
  cursor: help;
  flex-shrink: 0;
  user-select: none;
}
.field-help::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + .6rem);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  width: max-content;
  max-width: 18rem;
  background: var(--primary-dark);
  color: #fff;
  font-size: .78rem;
  font-weight: 400;
  line-height: 1.5;
  padding: .6rem .8rem;
  border-radius: .5rem;
  box-shadow: 0 8px 24px rgba(12,11,51,.25);
  opacity: 0;
  visibility: hidden;
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  z-index: 20;
  text-align: left;
  pointer-events: none;
}
.field-help:hover::after,
.field-help:focus-visible::after {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
/* Arrow under the tooltip */
.field-help::before {
  content: "";
  position: absolute;
  bottom: calc(100% + .1rem);
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--primary-dark);
  opacity: 0;
  visibility: hidden;
  transition: opacity .18s ease, visibility .18s;
  z-index: 20;
}
.field-help:hover::before,
.field-help:focus-visible::before {
  opacity: 1;
  visibility: visible;
}

/* ---- Tool page "How it works" strip ---- */
.tool-how {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin: 2.5rem 0;
}
@media (min-width: 700px) { .tool-how { grid-template-columns: repeat(3, 1fr); } }
.tool-how-step {
  background: var(--white);
  border: 1px solid rgba(12,11,51,.08);
  border-radius: 1rem;
  padding: 1.5rem;
  box-shadow: var(--shadow-card);
}
.tool-how-step .step-num {
  font-family: var(--font-serif);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--secondary-teal);
  display: block;
  margin-bottom: .5rem;
}
.tool-how-step h3 { font-family: var(--font-serif); color: var(--primary-dark); font-size: 1.05rem; margin-bottom: .4rem; }
.tool-how-step p { color: var(--charcoal); font-size: .9rem; line-height: 1.55; }

/* ---- Tool page value prop / why use ---- */
.tool-why {
  background: linear-gradient(135deg, var(--primary-dark), var(--primary-purple));
  color: #fff;
  border-radius: 1rem;
  padding: 2rem;
  margin: 2.5rem 0;
}
.tool-why h3 { font-family: var(--font-serif); font-size: 1.4rem; margin-bottom: .75rem; color: #fff; }
.tool-why p { color: rgba(255,255,255,.85); line-height: 1.7; }
.tool-why ul { list-style: none; margin-top: 1rem; }
.tool-why ul li { position: relative; padding-left: 1.4rem; color: rgba(255,255,255,.9); margin-bottom: .5rem; line-height: 1.55; }
.tool-why ul li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: .5rem; height: .5rem; border-radius: 50%; background: var(--secondary-teal);
}

/* ---- Tool page CTA to explore more tools ---- */
.tool-more {
  text-align: center;
  margin: 3rem 0 1rem;
  padding: 2.5rem;
  background: var(--off-white);
  border: 1px solid rgba(12,11,51,.08);
  border-radius: 1rem;
}
.tool-more h3 { font-family: var(--font-serif); color: var(--primary-dark); font-size: 1.5rem; margin-bottom: .5rem; }
.tool-more p { color: var(--charcoal); margin-bottom: 1.25rem; }

/* ---- Services restructure ---- */
.svc-line {
  display: grid; grid-template-columns: 1fr; gap: 2rem;
  padding: 2.5rem 0; border-bottom: 1px solid rgba(12,11,51,.08);
}
.svc-line:last-of-type { border-bottom: none; }
@media (min-width: 900px) { .svc-line { grid-template-columns: 1fr 1.4fr; gap: 3rem; } }
.svc-line-head .svc-num {
  font-family: var(--font-serif); font-size: 2.5rem; font-weight: 700;
  color: var(--secondary-teal); display: block; margin-bottom: .5rem;
}
.svc-line-head h2 { font-family: var(--font-serif); color: var(--primary-dark); font-size: 1.9rem; line-height: 1.15; margin-bottom: .75rem; }
.svc-line-head .svc-tagline { color: var(--gray); font-size: 1.05rem; line-height: 1.6; }
.svc-line-body h3 {
  font-family: var(--font-serif); color: var(--primary-purple);
  font-size: 1.1rem; margin: 1.5rem 0 .5rem; text-transform: uppercase; letter-spacing: .04em;
}
.svc-line-body h3:first-child { margin-top: 0; }
.svc-line-body p { color: var(--charcoal); line-height: 1.7; margin-bottom: .75rem; }
.svc-line-body ul { list-style: none; margin-bottom: 1rem; }
.svc-line-body ul li { position: relative; padding-left: 1.4rem; color: var(--charcoal); margin-bottom: .5rem; line-height: 1.55; }
.svc-line-body ul li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: .5rem; height: .5rem; border-radius: 50%; background: var(--gradient-primary);
}
.svc-outcomes { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .75rem; margin: .5rem 0 1rem; }
.svc-outcome {
  background: var(--off-white); border: 1px solid rgba(12,11,51,.08);
  border-radius: .75rem; padding: .9rem 1rem; font-size: .9rem; color: var(--primary-dark); font-weight: 500;
}
.svc-engagement {
  background: var(--off-white); border-left: 4px solid var(--secondary-teal);
  border-radius: .5rem; padding: 1rem 1.25rem; margin-top: 1rem; font-size: .95rem; color: var(--charcoal);
}
.svc-engagement strong { color: var(--primary-dark); }

/* ---- Engagement model ---- */
.eng-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.25rem; margin-top: 2.5rem; }
.eng-step {
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.09);
  border-radius: 1rem; padding: 1.5rem; position: relative;
}
.eng-step .eng-num { font-family: var(--font-serif); font-size: 2rem; font-weight: 700; color: var(--secondary-teal); display: block; margin-bottom: .5rem; }
.eng-step h3 { color: var(--white); font-family: var(--font-serif); font-size: 1.2rem; margin-bottom: .4rem; }
.eng-step p { color: rgba(255,255,255,.75); font-size: .95rem; line-height: 1.6; }
.gloss-card .eng-step {
  background: var(--off-white);
  border-color: rgba(12, 11, 51, 0.08);
}
.gloss-card .eng-step h3 { color: var(--primary-dark); }
.gloss-card .eng-step p { color: var(--charcoal); }
.eng-step .eng-dur {
  display: inline-block; margin-top: .75rem; font-size: .8rem; color: var(--secondary-teal);
  background: rgba(8,182,105,.12); border: 1px solid rgba(8,182,105,.3);
  padding: .25rem .75rem; border-radius: 999px;
}

/* ---- Sectors ---- */
.sector-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; margin-top: 2rem; }
.sector-card {
  background: var(--white); border: 1px solid rgba(12,11,51,.08); border-radius: 1rem;
  padding: 1.5rem; text-align: center; transition: transform .3s ease, border-color .3s ease;
}
.sector-card:hover { transform: translateY(-3px); border-color: var(--secondary-teal); }
.sector-card h3 { font-family: var(--font-serif); color: var(--primary-dark); font-size: 1.1rem; margin-bottom: .35rem; }
.sector-card p { color: var(--gray); font-size: .85rem; }

/* ---- FAQ accordion ---- */
.faq-list { max-width: 46rem; margin: 2rem auto 0; }
.faq-item {
  background: var(--white); border: 1px solid rgba(12,11,51,.08);
  border-radius: 1rem; margin-bottom: 1rem; overflow: hidden; box-shadow: var(--shadow-card);
}
.faq-item summary {
  padding: 1.25rem 1.5rem; cursor: pointer; list-style: none;
  font-family: var(--font-serif); font-size: 1.15rem; font-weight: 600; color: var(--primary-dark);
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .faq-arrow { color: var(--secondary-teal); transition: transform .2s ease; }
.faq-item[open] summary .faq-arrow { transform: rotate(180deg); }
.faq-item .faq-answer { padding: 0 1.5rem 1.25rem; color: var(--charcoal); line-height: 1.7; }