/* ===== Fonts ===== */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400&family=DM+Sans:wght@300;400;500;600;700&display=swap');

html { scroll-behavior: auto; }
body {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: #f4f8ff;
  color: rgb(0 0 0 / 0.8);
  font-size: 0.9375rem;
}
h1, h2, h3, h4, h5, h6 {
  font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  font-weight: 400;
}

/* ===== Page Loader (4-square chase) ===== */
.page-loader {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f4f8ff;
  opacity: 1;
  transition: opacity 500ms cubic-bezier(0.22, 1, 0.36, 1);
}
.page-loader.is-hidden {
  opacity: 0;
  pointer-events: none;
}
.cpm-loader {
  height: 60px;
  aspect-ratio: 1;
  --c: no-repeat linear-gradient(#1384b3 0 0);
  background: var(--c), var(--c), var(--c), var(--c);
  background-size: 33.4% 33.4%;
  animation: cpm-l7 1.5s infinite linear;
}
@keyframes cpm-l7 {
  0%, 5%    { background-position: 0 0, 50% 0, 0 50%, 50% 50%; }
  25%       { background-position: 0 0, 100% 0, 0 100%, 50% 50%; }
  50%       { background-position: 50% 0, 100% 0, 0 100%, 0 50%; }
  75%       { background-position: 50% 0, 100% 50%, 0 100%, 0 0; }
  95%, 100% { background-position: 50% 0, 50% 50%, 0 50%, 0 0; }
}

/* ===== Page Transition ===== */
.page-transition {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 380ms cubic-bezier(0.22, 1, 0.36, 1), transform 380ms cubic-bezier(0.22, 1, 0.36, 1);
}
.page-transition.is-ready {
  opacity: 1;
  transform: translateY(0);
}
.page-transition.is-leaving {
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 280ms cubic-bezier(0.22, 1, 0.36, 1), transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* ===== Reveal ===== */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 650ms cubic-bezier(0.22, 1, 0.36, 1), transform 650ms cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--reveal-delay, 0s);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ===== BlurText ===== */
.blur-text { display: block; }
.blur-text .bt-word {
  display: inline-block;
  white-space: nowrap;
}
.blur-text .bt-char {
  display: inline-block;
  filter: blur(14px) brightness(0%);
  opacity: 0;
  will-change: filter, opacity;
}
.blur-text .bt-space { display: inline-block; }

/* ===== Hero headline (time-based) ===== */
.hero-headline .bt-char {
  filter: blur(14px) brightness(0%);
  opacity: 0;
  transition: filter 0.55s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.hero-headline.play .bt-char {
  filter: blur(0px) brightness(100%);
  opacity: 1;
}
.hero-fade {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.hero-fade.play { opacity: 1; transform: translateY(0); }

/* ===== Header mobile menu ===== */
.mobile-menu {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 350ms cubic-bezier(0.22, 1, 0.36, 1), opacity 350ms cubic-bezier(0.22, 1, 0.36, 1);
}
.mobile-menu.is-open {
  max-height: 500px;
  opacity: 1;
}
.mobile-menu .menu-link {
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 280ms cubic-bezier(0.22, 1, 0.36, 1), transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
}
.mobile-menu.is-open .menu-link {
  opacity: 1;
  transform: translateY(0);
}
.hamburger-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1), opacity 220ms cubic-bezier(0.22, 1, 0.36, 1);
}
.hamburger-icon.swap-out {
  transform: rotate(90deg);
  opacity: 0;
}

/* ===== CTAs ===== */
.cta-primary, .cta-secondary {
  transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.3s ease-out, color 0.3s ease-out;
}
.cta-primary:hover, .cta-secondary:hover { transform: scale(1.02); }
.cta-primary:active, .cta-secondary:active { transform: scale(0.97); }

.cta-tertiary {
  transition: transform 0.15s, color 0.3s;
}
.cta-tertiary:active { transform: scale(0.96); }
.cta-tertiary .arrow {
  display: inline-flex;
  transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}
.cta-tertiary:hover .arrow { transform: translateX(4px); }
.cta-secondary .arrow {
  display: inline-flex;
  transition: transform 0.3s;
}
.cta-secondary:hover .arrow { transform: translateX(4px); }

/* ===== Services horizontal progress ===== */
.services-progress { width: 0%; background-color: #1384b3; transition: none; }

/* Lenis recommended */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* BlurText forced line breaks — only on mobile */
@media (min-width: 640px) {
  .bt-mobile-br { display: none; }
}

/* ============= Parallax background (pure CSS) =============
   Background image stays fixed to the viewport while the section
   scrolls over it, producing the classic parallax feel. Pen variant #3. */
.parallax-bg,
.vision-bg-fixed {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}
/* On touch / mobile, background-attachment: fixed is unreliable and can
   janks scroll. Fall back to a normal cover background. */
@media (max-width: 1023px), (hover: none) {
  .parallax-bg,
  .vision-bg-fixed { background-attachment: scroll; }
}

/* ============= Services slider =============
   Use a clip-mask wrapper + negative margin trick so any browser-rendered
   scrollbar is visually cropped out of view. */
.services-track-mask {
  overflow: hidden;
}
.services-track {
  scrollbar-width: none;        /* Firefox */
  -ms-overflow-style: none;     /* IE/Edge */
  /* Reserve extra space below the cards then pull the mask up to clip it */
  padding-bottom: 32px;
  margin-bottom: -32px;
  scroll-behavior: auto;        /* we run our own smooth lerp; native easing fights it */
}
.services-track.is-dragging { user-select: none; }
/* Don't let card images be draggable as ghost previews */
.services-card img { -webkit-user-drag: none; user-select: none; }
/* Show normal cursor on links inside cards (so users know they're clickable) */
.services-card a { cursor: pointer; }

/* ============= Global custom cursor =============
   Tiny black dot by default; rings out on links; morphs to a labeled disc
   on [data-cursor="view"] / [data-cursor="drag"] elements. */
.cc-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 8px;
  height: 8px;
  background: transparent;
  border-radius: 9999px;
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  transform: translate(-50%, -50%);
  transition:
    opacity 0.25s ease,
    width 0.35s cubic-bezier(0.23, 1, 0.32, 1),
    height 0.35s cubic-bezier(0.23, 1, 0.32, 1),
    background 0.3s ease,
    border 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  will-change: transform, width, height;
}
.cc-cursor.is-link,
.cc-cursor.is-view,
.cc-cursor.is-drag { opacity: 1; }
.cc-cursor__label {
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #f4f8ff;
  opacity: 0;
  transition: opacity 0.3s ease;
  white-space: nowrap;
}
.cc-cursor.is-link {
  width: 72px;
  height: 72px;
  background: #1384b3;
}
.cc-cursor.is-view {
  width: 88px;
  height: 88px;
  background: #1384b3;
}
.cc-cursor.is-drag {
  width: 80px;
  height: 80px;
  background: #1384b3;
}
.cc-cursor.is-link .cc-cursor__label,
.cc-cursor.is-view .cc-cursor__label,
.cc-cursor.is-drag .cc-cursor__label { opacity: 1; }

/* Touch / coarse pointer — disable custom cursor */
@media (hover: none), (pointer: coarse) {
  .cc-cursor { display: none !important; }
}
.services-track::-webkit-scrollbar,
.services-track::-webkit-scrollbar-track,
.services-track::-webkit-scrollbar-thumb {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  background: transparent !important;
  -webkit-appearance: none !important;
}
.services-nav { border-radius: 0; cursor: pointer; }
.services-nav:disabled { cursor: not-allowed; }

/* ============= Article (insight detail) ============= */

/* Reading progress bar — fixed at top of viewport, fills as you scroll */
.read-progress {
  position: fixed;
  top: 80px;            /* below site header */
  left: 0;
  right: 0;
  height: 2px;
  z-index: 40;
  background: transparent;
  pointer-events: none;
}
.read-progress__bar {
  display: block;
  height: 100%;
  width: 0%;
  background: #1384b3;
  transform-origin: left center;
  transition: width 80ms linear;
}

/* Magazine hero — image fills the viewport region, title sits on a dark scrim */
.article-hero {
  position: relative;
  min-height: 70vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  isolation: isolate;
}
.article-hero__bg {
  position: absolute;
  inset: 0;
  background-position: center 30%;
  background-size: cover;
  background-repeat: no-repeat;
  transform: scale(1.06);
  z-index: -2;
}
.article-hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(6, 47, 95, 0.15) 0%, rgba(6, 47, 95, 0.55) 55%, rgba(6, 47, 95, 0.88) 100%);
  z-index: -1;
}

/* Article body niceties */
.article-body p,
.article-body ul { color: rgba(0, 0, 0, 0.78); }
.article-body p { margin-bottom: 1.4em; }

/* ===== Global body-text justification =====
   Applies to all <p> inside <main> so long-form prose looks set. Excludes
   short eyebrow / chip / form labels via opt-out class .no-justify. */
main p {
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
}
main p.no-justify,
main p[class*="uppercase"],
main p[class*="tracking-wider"],
main p[class*="tracking-widest"],
main p[class*="tracking-tight"],
main p[class*="font-light"],
main p[class*="font-semibold"],
main p[class*="tracking-[0.18em]"],
main p[class*="tracking-[0.2em]"],
main p[class*="tracking-[0.22em]"] {
  text-align: left;
  hyphens: manual;
}
main p[class*="text-center"] {
  text-align: center;
}
/* On narrow viewports justify produces large word gaps — revert there */
@media (max-width: 640px) {
  main p { text-align: left; hyphens: manual; }
}

/* Simple body — no drop cap, no eyebrow, no serif pull quote */
.article-body .eyebrow { display: none; }

.article-body h2 {
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin-top: 2.5rem;
  margin-bottom: 0.75rem;
  color: #10233f;
}
@media (min-width: 640px) {
  .article-body h2 { font-size: 1.75rem; }
}

.article-body p {
  font-size: 1rem;
  line-height: 1.75;
  color: rgba(0, 0, 0, 0.78);
  font-weight: 400;
}
@media (min-width: 640px) {
  .article-body p { font-size: 1.0625rem; }
}

.article-body .lede {
  font-size: 1.125rem;
  line-height: 1.65;
  color: #10233f;
  font-weight: 400;
}
@media (min-width: 640px) {
  .article-body .lede { font-size: 1.25rem; }
}

/* Pull quote — plain sans-serif, just a left rule */
.pull-quote {
  margin: 2.25rem 0;
  padding: 0.5rem 0 0.5rem 1.25rem;
  border-left: 2px solid #1384b3;
  font-style: normal;
  font-size: 1.0625rem;
  line-height: 1.55;
  color: #10233f;
  font-weight: 500;
}
@media (min-width: 768px) {
  .pull-quote { font-size: 1.125rem; }
}

/* Tag chip (back link + category) */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.9rem;
  background: rgba(244, 248, 255, 0.14);
  border: 1px solid rgba(244, 248, 255, 0.35);
  color: #f4f8ff;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  transition: background 0.25s, border-color 0.25s;
}
.chip:hover { background: rgba(244, 248, 255, 0.22); border-color: rgba(244, 248, 255, 0.6); }

/* Author card */
.author-card {
  display: flex;
  gap: 1rem;
  align-items: center;
  padding: 1.25rem 0;
}
.author-card__dot {
  width: 44px; height: 44px;
  border-radius: 9999px;
  background: linear-gradient(135deg, #1384b3, #0e6d95);
  color: #f4f8ff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-family: 'DM Sans', sans-serif;
  letter-spacing: 0.04em;
}