:root {
  --bg: #0d0f14;
  --bg-alt: #0a0c10;
  --card: #151820;
  --card-alt: #0f1118;
  --text: #e8e6e1;
  --text-soft: #9b9690;
  --text-mute: #6b7280;
  --gold: #c9a84c;
  --gold-hover: #e8c96a;
  --serif: 'Playfair Display', Georgia, serif;
  --sans: 'DM Sans', system-ui, sans-serif;
  --mono: 'DM Mono', monospace;
  --ease-premium: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; }

/* The [hidden] attribute is only a low-priority browser default
   (display: none); any author rule that sets display on the same
   element (.btn, .hero-ticker-item, .insight-modal, .contact-success, etc.)
   silently wins over it regardless of specificity, since author styles
   always beat user-agent styles in the cascade. Restoring it here once,
   globally, so hidden="" reliably hides no matter what else applies. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

/* Keeps section headings from landing underneath the fixed nav bar
   when jumping to an anchor (from the desktop nav or the mobile menu). */
section[id] { scroll-margin-top: 68px; }

body {
  margin: 0;
  color: var(--text);
  background-color: var(--bg);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
}

img { max-width: 100%; display: block; }
a { color: inherit; }
ul { margin: 0; padding: 0; list-style: none; }

::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(201,168,76,0.3); border-radius: 2px; }

.wrap { max-width: 1200px; margin: 0 auto; padding: 0 32px; }

.gold { color: var(--gold); }

/* ---------- Header ---------- */
.site-header { background: var(--bg-alt); border-bottom: 1px solid rgba(255,255,255,0.08); }

.header-top { padding: 48px 32px 32px; text-align: center; }

.logo-link { text-decoration: none; display: inline-block; }

.logo {
  font-family: var(--serif);
  font-size: clamp(36px, 6vw, 72px);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--text);
  line-height: 1;
}

.market-chips {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 16px;
}

.market-chip {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  text-decoration: none;
  border: 1px solid rgba(201,168,76,0.35);
  padding: 3px 12px;
  border-radius: 999px;
  white-space: nowrap;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.market-chip:hover { background: var(--gold); color: var(--bg); border-color: var(--gold); }

.tagline {
  margin-top: 14px;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-mute);
  font-family: var(--mono);
}

.header-rule { margin: 24px auto 0; width: 48px; height: 2px; background: var(--gold); }

.nav-sentinel { height: 1px; }
.nav-spacer { height: 0; }

.site-nav {
  position: relative;
  border-top: 1px solid rgba(255,255,255,0.06);
  z-index: 100;
  background: var(--bg-alt);
  transition: box-shadow 0.3s;
}
.site-nav.is-stuck {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  /* Forces its own GPU-composited layer so mobile browsers update its
     position in real time during fast scrolling instead of lagging on
     the main thread and only "catching up" once scrolling settles or
     reverses direction. */
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  height: 52px;
}
.site-nav.is-stuck .nav-inner { justify-content: space-between; }

.nav-links-group,
.nav-right-group {
  display: flex;
  align-items: center;
  height: 100%;
}
.nav-right-group { gap: 20px; }

.nav-logo-mini {
  display: flex;
  align-items: center;
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  white-space: nowrap;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.04em;
  color: var(--text);
  text-decoration: none;
  transition: max-width 0.35s ease, opacity 0.25s ease;
}
.site-nav.is-stuck .nav-logo-mini { max-width: 220px; opacity: 1; }

.nav-link {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-soft);
  text-decoration: none;
  padding: 0 24px;
  height: 52px;
  display: flex;
  align-items: center;
  border-right: 1px solid rgba(255,255,255,0.06);
  transition: color 0.2s;
}
.nav-link:hover, .nav-link.active { color: var(--gold); }

/* Book gets a standing-out treatment in the nav — gold by default rather
   than only on hover, so it reads as worth a second look at a glance. */
.nav-link--book, .mobile-link.nav-link--book { color: var(--gold); font-weight: 600; }
.nav-link--book:hover { color: var(--gold-hover); }

.nav-cta {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: var(--gold);
  color: var(--bg);
  padding: 0 28px;
  height: 52px;
  display: flex;
  align-items: center;
  text-decoration: none;
  font-weight: 600;
  transition: background 0.2s;
}
.nav-cta:hover { background: var(--gold-hover); }

.nav-mobile-bar {
  padding: 0 24px;
  display: flex;
  justify-content: space-between;
  height: 52px;
  align-items: center;
}

.menu-toggle {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text);
  font-size: 20px;
  padding: 4px;
}

.mobile-menu {
  display: none;
  background: var(--card);
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: 24px 32px;
  flex-direction: column;
  gap: 20px;
}
.mobile-menu.open { display: flex; }

.mobile-link {
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-soft);
  text-decoration: none;
}
.mobile-link.active { color: var(--gold); }

.mobile-cta {
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--gold);
  color: var(--bg);
  padding: 12px 22px;
  text-decoration: none;
  font-weight: 600;
  text-align: center;
}

.hidden-mobile { display: flex; }
.show-mobile { display: none; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 80vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.18;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #0d0f14 45%, rgba(13,15,20,0.6) 100%);
}

.hero-accent-line {
  position: absolute;
  left: 0;
  top: 10%;
  bottom: 10%;
  width: 3px;
  background: linear-gradient(180deg, transparent, var(--gold) 30%, var(--gold) 70%, transparent);
}

.hero-inner { position: relative; padding: 80px 32px; width: 100%; }

.hero-grid {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 64px;
  align-items: center;
}

.hero-title {
  font-family: var(--serif);
  font-size: clamp(36px, 5vw, 68px);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.01em;
  margin: 0 0 28px;
  text-align: center;
}
.hero-title em { font-style: italic; color: var(--gold); }

.hero-lede { font-size: 17px; line-height: 1.7; color: var(--text-soft); margin: 0 0 40px; font-weight: 300; }

.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  text-decoration: none;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 500;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--sans);
}

.btn-primary { background: var(--gold); color: var(--bg); transition: background 0.2s; }
.btn-primary:hover { background: var(--gold-hover); }

.btn-outline { border: 1px solid rgba(201,168,76,0.4); color: var(--gold); transition: border-color 0.2s, color 0.2s; }
.btn-outline:hover { border-color: var(--gold); color: var(--gold-hover); }

.btn-ghost { border: 1px solid rgba(255,255,255,0.15); color: var(--text-soft); padding: 15px 28px; font-weight: 400; transition: border-color 0.2s, color 0.2s; }
.btn-ghost:hover { border-color: rgba(255,255,255,0.35); color: var(--text); }

.arrow { font-size: 16px; }

.hero-cards { display: flex; flex-direction: column; gap: 2px; }

.hero-card {
  background: rgba(21,24,32,0.85);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  padding: 28px;
}
.hero-card--vision { border-left: 3px solid var(--gold); }
.hero-card--mission { border-left: 3px solid rgba(201,168,76,0.3); }

.hero-card-text { font-family: var(--serif); font-size: 16px; font-weight: 600; line-height: 1.5; color: var(--text); margin: 0; }
.hero-card-text--italic { font-size: 15px; font-weight: 400; font-style: italic; line-height: 1.6; color: var(--text-soft); }

/* Insights, replacing the hero's CTA buttons with a small card containing
   a ticker that rotates through one insight at a time — see
   assets/js/insights.js */
.hero-insights-card {
  background: rgba(21,24,32,0.85);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-left: 3px solid var(--gold);
  padding: 22px 26px;
  max-width: 480px;
}

.hero-insights-header { display: flex; align-items: center; gap: 9px; margin-bottom: 14px; }
.hero-insights-label { margin-bottom: 0; }

.hero-insights-live {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
  animation: heroInsightsPulse 1.8s ease-in-out infinite;
}
@keyframes heroInsightsPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(0.7); }
}

.hero-ticker-item {
  display: flex;
  align-items: baseline;
  gap: 12px;
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
}
.hero-ticker-item:hover .hero-ticker-text { color: var(--gold); }
.hero-ticker-item:hover .arrow { opacity: 1; transform: translateX(0); }

.hero-ticker-text {
  flex: 1;
  font-family: var(--serif);
  font-style: italic;
  font-size: 17px;
  line-height: 1.4;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity 0.35s ease, transform 0.35s ease;
  opacity: 1;
  transform: translateY(0);
}
.hero-ticker-text.is-fading { opacity: 0; transform: translateY(6px); }

.hero-ticker-item .arrow {
  flex-shrink: 0;
  color: var(--gold);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.2s, transform 0.2s;
}

.hero-ticker-dots { display: flex; gap: 6px; margin-top: 18px; }
.hero-ticker-dot {
  width: 5px;
  height: 5px;
  border-radius: 3px;
  background: rgba(201,168,76,0.25);
  transition: background 0.3s, width 0.3s;
}
.hero-ticker-dot.is-active { width: 16px; background: var(--gold); }

.hero-insights-viewall {
  display: block;
  margin-top: 16px;
  background: none;
  border: none;
  padding: 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--text-mute);
  cursor: pointer;
  transition: color 0.2s;
}
.hero-insights-viewall:hover { color: var(--gold); }

/* ---------- Shared section bits ---------- */
.eyebrow {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 16px;
  font-family: var(--mono);
}
.eyebrow--small { font-size: 11px; letter-spacing: 0.2em; margin-bottom: 10px; }
.eyebrow--inline { margin-bottom: 0; }

.h2 {
  font-family: var(--serif);
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 600;
  line-height: 1.1;
  margin: 0 0 12px;
}
.h2--book { margin-bottom: 8px; }

.h3 {
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 700;
  color: var(--text);
  margin: 0;
}
.h3 em { font-style: italic; color: var(--gold); }
.h3--card { font-size: 24px; font-weight: 600; margin-bottom: 28px; }

.section-head--center { text-align: center; margin-bottom: 56px; }
.section-head--narrow { max-width: 700px; margin: 0 auto 80px; }

.section-sub { color: var(--text-mute); font-size: 15px; margin: 0; letter-spacing: 0.04em; }

.section-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }

.prose { display: flex; flex-direction: column; gap: 20px; color: var(--text-soft); font-size: 16px; line-height: 1.75; font-weight: 300; }
.prose--book { margin-bottom: 40px; }
.prose p { margin: 0; }

.dot-list { display: flex; flex-direction: column; gap: 14px; }
.dot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; display: inline-block; }
.dot--gold { background: var(--gold); }
.dot--gold-soft { background: rgba(201,168,76,0.5); }

/* ---------- Insights (embedded widget in the hero — see .hero-insights) ---------- */

/* Modal — loads the insight's PDF in an iframe using the browser's native viewer */
.insight-modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 24px; }

.insight-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5,6,9,0.82);
  opacity: 0;
  transition: opacity 0.25s;
}
.insight-modal.open .insight-modal-backdrop { opacity: 1; }

.insight-modal-panel {
  position: relative;
  background: var(--card);
  border: 1px solid rgba(201,168,76,0.25);
  box-shadow: 0 24px 64px rgba(0,0,0,0.5);
  max-width: 640px;
  width: 100%;
  max-height: 82vh;
  overflow-y: auto;
  padding: 48px 44px;
  opacity: 0;
  transform: translateY(16px) scale(0.98);
  transition: opacity 0.25s, transform 0.25s;
}
.insight-modal.open .insight-modal-panel { opacity: 1; transform: translateY(0) scale(1); }

.insight-modal-panel--pdf {
  max-width: 900px;
  width: 92vw;
  height: 85vh;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  padding: 32px;
}

.insight-modal-close {
  position: absolute;
  top: 18px;
  right: 18px;
  background: none;
  border: none;
  color: var(--text-soft);
  font-size: 18px;
  cursor: pointer;
  padding: 8px;
  line-height: 1;
  z-index: 1;
}
.insight-modal-close:hover { color: var(--gold); }

.insight-modal-title {
  font-family: var(--serif);
  font-size: clamp(20px, 2.6vw, 26px);
  font-weight: 600;
  line-height: 1.25;
  color: var(--text);
  margin: 0 0 20px;
  padding-right: 32px;
  flex-shrink: 0;
}

.insight-modal-viewer {
  flex: 1;
  min-height: 0;
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(201,168,76,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
}

.insight-modal-frame { width: 100%; height: 100%; border: none; }

.insight-modal-fallback { color: var(--text-mute); font-size: 15px; padding: 40px; text-align: center; }

.insight-modal-open-link {
  flex-shrink: 0;
  margin-top: 16px;
  align-self: flex-start;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.05em;
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px solid rgba(201,168,76,0.4);
  transition: border-color 0.2s;
}
.insight-modal-open-link:hover { border-color: var(--gold); }

.insight-modal-panel--list {
  max-width: 560px;
  width: 92vw;
  max-height: 70vh;
  display: flex;
  flex-direction: column;
}

.insights-list {
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.insights-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  background: none;
  border: none;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  padding: 16px 4px;
  text-align: left;
  font-family: var(--serif);
  font-size: 16px;
  color: var(--text);
  cursor: pointer;
  transition: color 0.2s;
}
.insights-list-item:last-child { border-bottom: none; }
.insights-list-item:hover { color: var(--gold); }
.insights-list-item:hover .arrow { opacity: 1; transform: translateX(0); }
.insights-list-item .arrow {
  flex-shrink: 0;
  color: var(--gold);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.2s, transform 0.2s;
}

/* ---------- ASSURE framework ---------- */
.assure-section {
  padding: 120px 32px;
  background: var(--bg-alt);
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.assure-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px; }

.step-card {
  background: var(--card);
  padding: 36px 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: background 0.25s, transform 0.3s ease, box-shadow 0.3s ease;
  cursor: default;
  position: relative;
  overflow: hidden;
}
.step-card:hover { transform: translateY(-6px); box-shadow: 0 20px 40px rgba(0,0,0,0.35); }
.step-card:hover { background: #1c2030; }

.step-card-letter-bg {
  position: absolute;
  top: -10px;
  right: 16px;
  font-family: var(--serif);
  font-size: 120px;
  font-weight: 700;
  line-height: 1;
  color: rgba(255,255,255,0.03);
  transition: color 0.25s;
  -webkit-user-select: none;
  user-select: none;
  pointer-events: none;
}
.step-card:hover .step-card-letter-bg { color: rgba(201,168,76,0.08); }

.step-card-letter-box {
  width: 44px;
  height: 44px;
  border: 2px solid rgba(201,168,76,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 700;
  color: var(--gold);
  transition: border-color 0.25s;
  flex-shrink: 0;
}
.step-card:hover .step-card-letter-box { border-color: var(--gold); }

.step-card-word { font-family: var(--serif); font-size: 17px; font-weight: 600; color: var(--text); margin-bottom: 10px; }
.step-card-desc { font-size: 13px; line-height: 1.65; color: var(--text-mute); margin: 0; font-weight: 300; }

.step-card-bar { margin-top: auto; height: 2px; background: transparent; transition: background 0.25s; }
.step-card:hover .step-card-bar { background: var(--gold); }

/* ---------- Services ---------- */
.services-section { padding: 120px 32px; }

.services-inner-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }

.service-card { padding: 48px 44px; }
.service-card--one { background: var(--card); border-top: 3px solid var(--gold); }
.service-card--two { background: var(--card-alt); border-top: 3px solid rgba(201,168,76,0.35); }
.service-card-head { margin-bottom: 32px; }

.dot-list li { display: flex; align-items: center; gap: 14px; font-size: 15px; color: var(--text-soft); padding: 13px 0; border-bottom: 1px solid rgba(255,255,255,0.05); }
.expertise-card .dot-list li { padding: 0; border-bottom: none; font-size: 15px; }

/* ---------- About ---------- */
.about-section {
  padding: 120px 32px;
  background: var(--card);
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.about-media { position: relative; }

/* Plays once on load, not tied to scroll position or IntersectionObserver
   at all — guarantees the image itself is never dependent on JS timing/
   scroll-trigger edge cases to become visible (unlike the old .reveal-clip
   approach, which needed main.js's observer to add .is-visible). */
@keyframes aboutImgReveal {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}
.about-img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  background: #1c2030;
  animation: aboutImgReveal 1.1s var(--ease-premium) 0.2s both;
}

.about-corner { position: absolute; width: 80px; height: 80px; pointer-events: none; }
.about-corner--tl { top: -16px; left: -16px; border: 2px solid var(--gold); }
.about-corner--br { bottom: -16px; right: -16px; border: 2px solid rgba(201,168,76,0.3); }

.about-fade {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 80px;
  background: linear-gradient(to top, rgba(13,15,20,0.6), transparent);
}

/* ---------- Team ---------- */
.team-section { padding: 120px 32px; }

.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; }

.team-card { text-align: center; }

.team-photo {
  position: relative;
  width: 100%;
  max-width: 240px;
  aspect-ratio: 1/1;
  margin: 0 auto 24px;
  background: linear-gradient(145deg, #1c2030 0%, #0d0f14 100%);
  border: 1px solid rgba(201,168,76,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.team-photo svg { width: 84px; height: 84px; opacity: 0.28; }

.team-photo-corner { position: absolute; width: 24px; height: 24px; pointer-events: none; }
.team-photo-corner--tl { top: 12px; left: 12px; border-top: 2px solid var(--gold); border-left: 2px solid var(--gold); }
.team-photo-corner--br { bottom: 12px; right: 12px; border-bottom: 2px solid rgba(201,168,76,0.4); border-right: 2px solid rgba(201,168,76,0.4); }

.team-name { font-family: var(--serif); font-size: 20px; font-weight: 600; color: var(--text); margin-bottom: 4px; }
.team-role { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); margin-bottom: 14px; }
.team-bio { font-size: 14px; line-height: 1.65; color: var(--text-mute); font-weight: 300; margin: 0; }

/* ---------- Expertise ---------- */
.expertise-section { padding: 120px 32px; }

.expertise-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; margin-bottom: 2px; }

.expertise-card { background: var(--card); padding: 40px 36px; border-top: 3px solid var(--gold); }

.products-panel { background: var(--bg-alt); border: 1px solid rgba(201,168,76,0.2); padding: 48px; }

.products-head { display: flex; align-items: baseline; gap: 16px; margin-bottom: 36px; flex-wrap: wrap; }

.products-divider { width: 40px; height: 1px; background: rgba(201,168,76,0.3); }

.products-note { font-size: 13px; color: var(--text-mute); font-style: italic; }

.products-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; }

.product-card { background: var(--card); padding: 32px 28px; border-top: 2px solid rgba(201,168,76,0.4); }

.product-code { font-family: var(--mono); font-size: 18px; font-weight: 500; color: var(--gold); margin-bottom: 10px; letter-spacing: 0.04em; }
.product-name { font-family: var(--serif); font-size: 16px; font-weight: 600; color: var(--text); margin-bottom: 12px; line-height: 1.3; }
.product-desc { font-size: 13px; line-height: 1.65; color: var(--text-mute); margin: 0; font-weight: 300; }

/* ---------- Book ---------- */
.book-section { padding: 120px 32px; background: var(--bg-alt); border-top: 1px solid rgba(255,255,255,0.06); }

.book-mockup-wrap { display: flex; justify-content: center; }

.book-mockup { position: relative; width: 260px; }

.book-cover {
  width: 260px;
  height: 360px;
  background: linear-gradient(145deg, #1c2030 0%, #0d0f14 100%);
  border: 1px solid rgba(201,168,76,0.3);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 28px;
  box-shadow: 20px 20px 60px rgba(0,0,0,0.6), -4px 4px 0 rgba(201,168,76,0.15);
  position: relative;
  overflow: hidden;
}

.book-spine { position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: linear-gradient(180deg, #c9a84c, #8a6a20); }

.book-title { font-family: var(--serif); font-size: 22px; font-weight: 700; line-height: 1.2; color: var(--text); margin: 0; }

.book-subtitle { margin-top: 10px; font-size: 11px; color: var(--text-soft); font-family: var(--mono); line-height: 1.5; }

.book-icon { display: flex; justify-content: flex-end; opacity: 0.15; }

.book-handbook { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-mute); font-family: var(--mono); }

.book-edge { position: absolute; right: -8px; top: 8px; bottom: -8px; width: 8px; background: linear-gradient(180deg, #c9a84c22, #0d0f14); }

.book-subline { font-size: 15px; color: var(--gold); letter-spacing: 0.06em; margin-bottom: 24px; font-family: var(--mono); }

.book-tagline { font-size: 16px; line-height: 1.7; color: var(--text-soft); font-weight: 500; font-style: italic; margin-bottom: 20px; }

.tag-row { display: flex; gap: 12px; flex-wrap: wrap; }

.tag-chip {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 6px 14px;
  border: 1px solid rgba(201,168,76,0.25);
  color: var(--gold);
  font-family: var(--mono);
}

.hero-actions--book { margin-top: 40px; }

/* ---------- Contact ---------- */
.contact-section { padding: 120px 32px; border-top: 1px solid rgba(255,255,255,0.06); }

.contact-lede { font-size: 16px; line-height: 1.75; color: var(--text-soft); font-weight: 300; margin: 0 0 48px; }

.contact-list { display: flex; flex-direction: column; gap: 20px; }

.contact-item { border-bottom: 1px solid rgba(255,255,255,0.06); padding-bottom: 20px; }

.contact-label { font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--text-mute); margin-bottom: 6px; font-family: var(--mono); }

.contact-value { font-size: 15px; color: var(--gold); }

.contact-form { display: flex; flex-direction: column; gap: 16px; }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.form-input {
  width: 100%;
  background: var(--card);
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--text);
  padding: 14px 16px;
  font-size: 14px;
  outline: none;
  font-family: var(--sans);
  transition: border-color 0.2s;
}
.form-input:focus { border-color: rgba(201,168,76,0.5); }

.form-select { color: var(--text); }
.form-select:invalid { color: var(--text-mute); }

.form-textarea { resize: vertical; }

.btn-submit { background: var(--gold); color: var(--bg); border: none; cursor: pointer; padding: 16px 32px; font-weight: 600; align-self: flex-start; transition: background 0.2s; }
.btn-submit:hover { background: var(--gold-hover); }

.contact-success {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 16px;
  padding: 48px;
  border: 1px solid rgba(201,168,76,0.2);
}
.contact-success-check { font-size: 32px; color: var(--gold); }
.contact-success-text { font-size: 16px; color: var(--text-soft); text-align: center; margin: 0; }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid rgba(255,255,255,0.06); padding: 40px 32px; background: var(--bg-alt); }

.footer-inner { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 20px; text-align: center; }

.footer-logo { font-family: var(--serif); font-size: 16px; font-weight: 700; color: var(--text); }

.footer-copy { font-size: 11px; color: var(--text-mute); margin-top: 4px; }

/* ---------- Motion ---------- */

/* Scroll reveal: elements start hidden/offset, main.js adds .is-visible via
   IntersectionObserver once they enter the viewport. .reveal-stagger cascades
   its direct children in with an increasing delay (covers grids up to 6).
   Everything here is scoped under .js (set by an inline script in <head> —
   see index.html) rather than applying unconditionally: if JavaScript is
   ever blocked or fails outright, <html> stays .no-js and this content
   simply renders in its normal, fully visible state instead of staying
   hidden forever waiting for a reveal that will never come. */
.js .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s var(--ease-premium), transform 0.8s var(--ease-premium);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

.js .reveal-stagger > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s var(--ease-premium), transform 0.7s var(--ease-premium);
}
.reveal-stagger.is-visible > * { opacity: 1; transform: translateY(0); }
.reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 0.08s; }
.reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 0.16s; }
.reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 0.24s; }
.reveal-stagger.is-visible > *:nth-child(5) { transition-delay: 0.32s; }
.reveal-stagger.is-visible > *:nth-child(6) { transition-delay: 0.4s; }

/* Hero headline: each line sits in an overflow-hidden mask and slides up
   from underneath it, staggered — rather than the whole heading fading in
   as one block. Pure CSS, runs once on load since it's above the fold. */
.line-mask { display: block; overflow: hidden; }
.line-inner {
  display: block;
  transform: translateY(115%);
  animation: lineReveal 0.9s var(--ease-premium) both;
}
@keyframes lineReveal { to { transform: translateY(0); } }
.line-mask:nth-child(1) .line-inner { animation-delay: 0.15s; }
.line-mask:nth-child(2) .line-inner { animation-delay: 0.3s; }
.line-mask:nth-child(3) .line-inner { animation-delay: 0.45s; }

/* Rest of the hero entrance: pure CSS, staggered after the headline lines */
@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(26px); }
  to { opacity: 1; transform: translateY(0); }
}
.hero-lede { animation: heroFadeUp 0.8s var(--ease-premium) 0.65s both; }
.hero-insights-card { animation: heroFadeUp 0.8s var(--ease-premium) 0.8s both; }
.hero-cards { animation: heroFadeUp 0.8s var(--ease-premium) 0.8s both; }

/* Ambient slow zoom on the hero background photo */
@keyframes heroBgZoom {
  from { transform: scale(1); }
  to { transform: scale(1.08); }
}
.hero-bg { animation: heroBgZoom 22s ease-in-out infinite alternate; }

/* Hover lift for grid cards that previously had no hover feedback at all */
.service-card, .expertise-card, .product-card {
  transition: transform 0.35s var(--ease-premium), box-shadow 0.35s var(--ease-premium);
}
.service-card:hover, .expertise-card:hover, .product-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.35);
}

/* Nav link underline sweep on hover/active */
.nav-link { position: relative; }
.nav-link::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease-premium);
}
.nav-link:hover::after, .nav-link.active::after { transform: scaleX(1); }

/* Scroll progress: thin gold line along the bottom edge of the nav bar,
   fills as the page is scrolled — see main.js for the width calculation */
.nav-progress {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 0%;
  background: var(--gold);
}

/* Button arrows nudge forward on hover, reinforcing the click affordance */
.arrow { display: inline-block; transition: transform 0.3s var(--ease-premium); }
.btn:hover .arrow, .hero-ticker-item:hover .arrow { transform: translateX(4px); }

/* Book mockup: CSS fallback tilt (JS in main.js upgrades this to an
   interactive cursor-follow tilt when motion isn't reduced) */
.book-mockup { transition: transform 0.4s var(--ease-premium); }
.book-mockup:hover { transform: rotate(-2deg) translateY(-8px); }

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal-stagger > *,
  .about-img,
  .line-inner,
  .hero-lede,
  .hero-insights-card,
  .hero-cards,
  .hero-bg,
  .book-mockup,
  .arrow {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }
}

/* ---------- Responsive ---------- */

/* Tablet: 901px is the nav breakpoint (unchanged), this tier handles layout down to ~641px */
@media (max-width: 900px) {
  .hidden-mobile { display: none !important; }
  .show-mobile { display: flex !important; }
  .section-grid { grid-template-columns: 1fr !important; gap: 48px !important; }
  .services-inner-grid { grid-template-columns: 1fr !important; }
  .expertise-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
  .team-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
  .assure-grid { grid-template-columns: repeat(3, 1fr) !important; }
  .hero-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
  .products-grid { grid-template-columns: repeat(2, 1fr) !important; }

  .assure-section, .services-section, .about-section, .team-section,
  .expertise-section, .book-section, .contact-section {
    padding-top: 72px;
    padding-bottom: 72px;
  }
}

@media (min-width: 901px) {
  .show-mobile { display: none !important; }
}

/* Large phone / small tablet: the 3-col ASSURE grid and 2-col product grid
   get too tight below ~640px, and the contact form fields need to stack */
@media (max-width: 640px) {
  .wrap { padding: 0 20px; }
  .header-top { padding: 36px 20px 24px; }

  .assure-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .products-grid { grid-template-columns: 1fr !important; }
  .form-row { grid-template-columns: 1fr; }

  .step-card { padding: 28px 20px; }
  .step-card-letter-bg { font-size: 90px; right: 8px; }

  .service-card { padding: 36px 24px; }
  .expertise-card { padding: 32px 24px; }
  .products-panel { padding: 32px 24px; }
  .product-card { padding: 24px 20px; }
  .insight-modal-panel { padding: 36px 24px; }
  .insight-modal-panel--pdf { width: 96vw; height: 90vh; max-height: 90vh; padding: 20px; }

  .assure-section, .services-section, .about-section, .team-section,
  .expertise-section, .book-section, .contact-section {
    padding-top: 56px;
    padding-bottom: 56px;
  }

  .book-mockup, .book-cover { width: 220px; }
  .book-cover { height: 305px; }
}

/* Small phone: single-column everything, tighter type and spacing */
@media (max-width: 420px) {
  .wrap { padding: 0 16px; }
  .header-top { padding: 32px 16px 20px; }

  .logo { font-size: 30px; letter-spacing: 0.03em; line-height: 1.15; }
  .tagline { font-size: 10px; letter-spacing: 0.14em; }

  .assure-grid { grid-template-columns: 1fr !important; }

  .nav-link { padding: 0 14px; font-size: 11px; }
  .nav-cta { padding: 0 18px; margin-left: 12px; font-size: 11px; }

  .products-panel { padding: 24px 18px; }
  .products-head { gap: 10px; }

  .book-mockup, .book-cover { width: 190px; }
  .book-cover { height: 264px; padding: 20px; }
  .book-title { font-size: 19px; }

  .hero-card, .service-card, .expertise-card, .product-card, .step-card {
    padding-left: 20px;
    padding-right: 20px;
  }

  .btn, .btn-ghost, .btn-submit { width: 100%; justify-content: center; }
  .hero-actions, .hero-actions--book { flex-direction: column; }
}