/* Manrope, self-hosted and preloaded, so the font is ready before the page paints */
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: block;
  src: url("fonts/manrope-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
  --bg: #FFFFFF;
  --alt: #F5F7FA;
  --ink: #0B1220;
  --muted: #546071;
  --line: #E3E7EE;
  --accent: #4F46E5;
  --accent-dark: #4338CA;
  --accent-tint: #EEF0FF;
  --band: #0B1220;
  --band-text: #FFFFFF;
  --band-muted: #9AA5B8;
  --radius: 6px;
  --max: 1120px;
  --top: calc(68px + 17vh); /* where the small label starts on every dark header */
  /* Fonts: change these two lines once a font is chosen on test.html */
  --font-body: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-head: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 20px; }
a { color: inherit; }
h1, h2, h3, h4, .brand, .links a, .btn { font-family: var(--font-head); }

/* Buttons: fill wipe on hover. Every CTA uses the same link */
.btn {
  --wipe: #fff;
  --wipe-text: var(--accent);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  background: var(--accent);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  padding: 12.5px 24.5px;
  border: 1.5px solid var(--accent);
  border-radius: var(--radius);
  transition: color .25s ease, transform .15s ease;
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--wipe);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .28s cubic-bezier(.7, 0, .2, 1);
  z-index: -1;
}
.btn:hover { color: var(--wipe-text); }
.btn:hover::before { transform: scaleX(1); }
.btn:active { transform: scale(.97); }
.btn-sm { padding: 7.5px 16.5px; font-size: .92rem; }
.mobile-only { display: none; }
/* Light backgrounds wipe to black instead of white */
.about-text .btn, .video-text .btn { --wipe: var(--ink); --wipe-text: #fff; }
header.nav .btn { --wipe: #fff; --wipe-text: var(--accent); }
header.nav.scrolled .btn { --wipe: var(--ink); --wipe-text: #fff; }

/* Dynamic header: transparent over the dark hero, frosted glass once scrolling (.glass),
   white just before the hero ends (.scrolled). Every property below uses the same 0.25s timing
   so the background, logo, wordmark, tabs, and button all change together. */
header.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color .25s ease, border-color .25s ease, box-shadow .25s ease, -webkit-backdrop-filter .25s ease, backdrop-filter .25s ease;
}
header.nav.glass { background: rgba(11,18,32,.5); -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%); }
header.nav.scrolled { background: rgba(255,255,255,.96); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom-color: var(--line); box-shadow: 0 1px 12px rgba(11,18,32,.06); }
.nav-inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 68px; gap: 16px; position: relative; }
.nav-inner .brand { justify-self: start; }
.nav-right { justify-self: end; display: flex; align-items: center; gap: 10px; }
.brand { display: flex; align-items: center; gap: 7px; text-decoration: none; font-weight: 600; font-size: 1.35rem; letter-spacing: -0.035em; color: #fff; transition: color .25s ease; }
.brand .wm b { font-weight: 800; }
.brand img, .brand svg { width: 28px; height: 28px; flex: none; }
/* Logo: the light and dark versions sit on top of each other and cross-fade */
header.nav .lg-light { opacity: 1; transition: opacity .25s ease; }
header.nav .lg-dark { opacity: 0; margin-left: -35px; transition: opacity .25s ease; }
header.nav.scrolled .brand { color: var(--ink); }
header.nav.scrolled .lg-light { opacity: 0; }
header.nav.scrolled .lg-dark { opacity: 1; }
.links { display: flex; align-items: center; justify-content: center; gap: 30px; }
.links a.l { text-decoration: none; font-weight: 500; font-size: 13px; letter-spacing: 0; color: rgba(255,255,255,.72); transition: color .25s ease; }
.links a.l:hover, .links a.l.active { color: #fff; }
header.nav.scrolled .links a.l { color: var(--muted); }
header.nav.scrolled .links a.l:hover, header.nav.scrolled .links a.l.active { color: var(--ink); }
.menu-btn { display: none; background: none; border: 1px solid rgba(255,255,255,.35); border-radius: var(--radius); padding: 8px 12px; font: inherit; font-weight: 600; cursor: pointer; color: #fff; transition: color .25s ease, border-color .25s ease; }
header.nav.scrolled .menu-btn { border-color: var(--line); color: var(--ink); }

/* Dark hero and page headers (space feel: near-black with indigo glow) */
.hero, .page-head {
  color: #fff;
  background:
    radial-gradient(900px 420px at 82% 0%, rgba(79,70,229,.38), transparent 62%),
    radial-gradient(640px 320px at 0% 100%, rgba(99,102,241,.18), transparent 60%),
    #0B1220;
}
.hero .label, .page-head .label { color: #A5B4FC; }

/* Hero: label and headline start at the same height as the inner pages; the button sits near the bottom */
.hero {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  padding: var(--top) 0 4.5vh;
}
.hero > .wrap { width: 100%; flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; }
.hero .btn { margin-top: auto; }
.label {
  display: inline-block;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 2.4vh;
}
.hero h1, .page-head h1 {
  font-size: clamp(2rem, min(5vw, 9vh), 5rem);
  line-height: 1.04;
  letter-spacing: -0.04em;
  font-weight: 700;
  margin: 0 auto 4vh;
}
/* Saucer shape: short line, long middle line, short line */
.hero h1 .ln { display: block; white-space: nowrap; }
.hero p.sub {
  font-size: clamp(.95rem, min(1.6vw, 2.7vh), 1.2rem);
  color: #B7C0D1;
  max-width: 54ch;
  margin: 0 auto 6vh;
}
@media (max-width: 700px) {
  .hero h1 .ln { display: inline; white-space: normal; }
  .hero h1 { text-wrap: balance; }
}

/* Page header (inner pages) */
.page-head { min-height: 68vh; padding: calc(68px + 9vh) 0 6vh; text-align: center; }
.page-head > .wrap { display: flex; flex-direction: column; align-items: center; }
.page-head h1 { max-width: 20ch; text-wrap: balance; }
.page-head p { color: #B7C0D1; font-size: clamp(.95rem, min(1.6vw, 2.7vh), 1.2rem); max-width: 56ch; margin: 0 auto; }

/* Results page */
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.tag { font-size: .75rem; font-weight: 600; color: var(--accent); background: var(--accent-tint); padding: 4px 10px; border-radius: 999px; }
.thumb { aspect-ratio: 16 / 9; border-radius: 4px; margin: -10px -10px 20px; display: grid; place-items: center; background: linear-gradient(135deg, #EEF0FF, #DDE1FF); }
.thumb svg { width: 44px; height: 44px; fill: none; stroke: var(--accent); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; opacity: .85; }
.work-meta { color: var(--muted); font-size: .85rem; margin: 0 0 8px; }

/* Sections */
section { padding: 120px 0; }
.alt { background: var(--alt); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section-head { margin-bottom: 56px; }
.eyebrow { font-size: .8rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); margin: 0 0 10px; font-family: var(--font-head); }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.4rem); letter-spacing: -0.03em; line-height: 1.12; margin: 0; font-weight: 700; }

/* Tool marquee (keeps moving on hover) */
.proof { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 20px 0 30px; overflow: hidden; }
.proof .small { text-align: center; color: var(--ink); font-weight: 700; font-size: 1rem; letter-spacing: -0.01em; margin: 0 0 16px; }
.marquee { position: relative; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.track { display: flex; width: max-content; animation: scroll 38s linear infinite; }
.item { display: flex; align-items: center; gap: 10px; margin: 0 28px; white-space: nowrap; font-weight: 600; color: #3A4556; font-size: 1.02rem; }
.item img, .item svg { width: 28px; height: 28px; flex: none; }
@keyframes scroll { to { transform: translateX(-50%); } }

/* Cards */
.card { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 34px 30px; }
.alt .card { background: #fff; }
.card h3 { margin: 0 0 8px; font-size: 1.15rem; letter-spacing: -0.02em; }
.card p { margin: 0; color: var(--muted); }
a.card { display: block; text-decoration: none; transition: border-color .2s, transform .2s; }
a.card:hover { border-color: var(--accent); transform: translateY(-2px); }
.grid-4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(235px, 100%), 1fr)); gap: 24px; }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(270px, 100%), 1fr)); gap: 24px; }
.num { font-weight: 700; color: var(--accent); margin-bottom: 10px; font-size: .85rem; letter-spacing: .06em; font-family: var(--font-head); }

/* Service line icons */
.ico-box { width: 52px; height: 52px; border-radius: 10px; background: var(--accent-tint); display: grid; place-items: center; margin-bottom: 18px; }
.ico-box svg { width: 28px; height: 28px; fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* Reviews */
.review-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 20px; }
.card p.quote { font-size: 1.05rem; margin: 0 0 20px; color: var(--ink); }
.who { color: var(--muted); font-size: .9rem; margin: 0; }
.who strong { color: var(--ink); }
.stars { color: var(--accent); letter-spacing: 3px; margin-bottom: 14px; font-size: 1.05rem; }
.verified { margin-top: 6px; font-size: .8rem; color: var(--muted); }

/* Service detail rows (services page) */
.svc { display: grid; grid-template-columns: 90px 1fr; gap: 24px; padding: 40px 0; border-top: 1px solid var(--line); }
.svc:first-of-type { border-top: 0; padding-top: 0; }
.svc h2 { font-size: 1.7rem; margin-bottom: 10px; }
.svc p { color: var(--muted); max-width: 62ch; margin: 0 0 14px; }
.svc ul { margin: 0; padding-left: 20px; color: var(--muted); }
.svc li { margin-bottom: 6px; }
.svc .ico-box { width: 64px; height: 64px; }
.svc .ico-box svg { width: 34px; height: 34px; }

/* Fit */
.split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr)); gap: 20px; }
.split ul { margin: 14px 0 0; padding-left: 20px; color: var(--muted); }
.split li { margin-bottom: 8px; }

/* About */
.about-grid { display: grid; grid-template-columns: 340px 1fr; gap: 56px; align-items: start; }
.headshot-ph {
  aspect-ratio: 4 / 5;
  border: 2px dashed #B9C2D3;
  border-radius: 10px;
  background: var(--alt);
  display: grid;
  place-items: center;
  text-align: center;
  color: var(--muted);
  font-size: .95rem;
  padding: 20px;
  overflow: hidden;
}
.headshot-ph img { width: 100%; height: 100%; object-fit: cover; }
.headshot-ph.has-img { border: 0; padding: 0; background: var(--alt); }
.about-text p { color: var(--muted); max-width: 62ch; margin: 0 0 16px; font-size: 1.05rem; }
.mentor { display: none; border-left: 3px solid var(--accent); padding-left: 18px; margin: 24px 0 0; } /* show once a quote is added */

/* Intro video */
.video-grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: 64px; align-items: center; }
.video-text p { color: var(--muted); font-size: 1.05rem; margin: 18px 0 28px; max-width: 46ch; }
.video-frame { position: relative; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; display: grid; place-items: center; text-align: center; color: #B7C0D1; font-size: .9rem; background: radial-gradient(420px 220px at 80% 0%, rgba(79,70,229,.4), transparent 62%), #0B1220; box-shadow: 0 24px 60px rgba(11,18,32,.18); }
.video-frame video { position: absolute; inset: 0; width: 100%; height: 100%; background: #000; object-fit: cover; }
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-poster { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; cursor: pointer; background: #000; display: block; }
.video-poster img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease, opacity .3s ease; }
.video-poster:hover img { transform: scale(1.03); opacity: .92; }
.video-poster .play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); margin: 0; box-shadow: 0 8px 30px rgba(0,0,0,.35); transition: transform .2s ease; }
.video-poster:hover .play { transform: translate(-50%, -50%) scale(1.08); }
.play { width: 68px; height: 68px; border-radius: 50%; background: var(--accent); display: grid; place-items: center; margin: 0 auto 12px; }
.play svg { width: 24px; height: 24px; fill: #fff; margin-left: 3px; }
@media (max-width: 860px) { .video-grid { grid-template-columns: 1fr; gap: 36px; } }

/* Closing band */
.band { background: var(--band); color: var(--band-text); text-align: center; padding: 140px 0; }
.band h2 { margin-bottom: 14px; }
.band p { color: var(--band-muted); margin: 0 auto 30px; max-width: 52ch; }

/* Footer */
footer { background: var(--band); color: var(--band-muted); padding: 0 0 36px; border-top: 1px solid #1E2738; font-size: .95rem; }
.foot-top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 36px; padding: 56px 0 40px; }
footer .brand { color: #fff; }
footer p { margin: 14px 0 0; max-width: 34ch; line-height: 1.55; }
footer h4 { color: var(--band-text); margin: 0 0 14px; font-size: .85rem; letter-spacing: .06em; text-transform: uppercase; }
footer ul { list-style: none; margin: 0; padding: 0; }
footer li { margin-bottom: 10px; }
footer a { text-decoration: none; transition: color .15s; }
footer a:hover { color: #fff; }
.foot-bottom { border-top: 1px solid #1E2738; padding-top: 22px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; font-size: .88rem; }

/* Scroll reveal */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }
body.sub .reveal { opacity: 1; transform: none; transition: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
  .track { animation: none; }
}

@media (max-width: 860px) {
  .nav-right .btn { display: none; }
  .mobile-only { display: inline-flex; }
  .menu-btn { display: block; }
  .nav-inner { display: flex; justify-content: space-between; }
  .links { display: none; position: absolute; top: 68px; left: -20px; right: -20px; background: #fff; border-bottom: 1px solid var(--line); flex-direction: column; align-items: flex-start; padding: 18px 20px 22px; gap: 16px; }
  .links.open { display: flex; }
  .foot-top { grid-template-columns: 1fr 1fr; }
  .about-grid { grid-template-columns: 1fr; gap: 32px; }
  .headshot-ph { max-width: 320px; }
}
@media (max-width: 560px) {
  :root { --top: calc(68px + 9vh); }
  .page-head { min-height: 46vh; padding-top: calc(68px + 6vh); padding-bottom: 44px; }
  section { padding: 80px 0; }
  .band { padding: 96px 0; }
  .section-head { margin-bottom: 40px; }
  .foot-top { grid-template-columns: 1fr; gap: 28px; }
  .svc { grid-template-columns: 1fr; gap: 14px; }
}

/* Results page: headings match the service titles, review boxes line up */
body.results .section-head { margin-bottom: 28px; }
body.results .section-head h2 { font-size: 1.7rem; letter-spacing: -0.03em; }
body.results .review-grid .card { display: flex; flex-direction: column; }
body.results .review-grid .card p.quote { flex: 1; }

/* Home page: half the vertical spacing of the other pages */
body.home section { padding: 60px 0; }
body.home .section-head { margin-bottom: 36px; }
body.home .band { padding: 70px 0; }
@media (max-width: 560px) {
  body.home section { padding: 44px 0; }
  body.home .band { padding: 52px 0; }
}