/* ============================================================
   KGBR MARKETING — V2 (Fervor x Phenyx merge)
   Fervor: structure, pinned 3D deck, method cards, timeline, FAQ.
   Phenyx: floating glass nav, 3D particle hero, chrome type,
   italic-serif accents, soft cards, bento.
   KGBR colors throughout. Motion lives in js/main.js.
   ============================================================ */
:root{
  --bg: #fafaf8;
  --bg-2: #f1f0eb;
  --surface: #ffffff;
  --card: #ecebe4;
  --ink: #141412;
  --ink-2: #6f6e69;
  --line: rgba(20,20,18,0.10);
  --line-strong: rgba(20,20,18,0.22);
  --accent: #0c6b76;
  --accent-2: #095560;
  --accent-soft: #5bc0c9;
  --accent-wash: rgba(12,107,118,0.10);
  --media: #111110;
  --btn: #e9e7e0;

  --font: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --serif: 'Cormorant', Georgia, 'Times New Roman', serif;

  --pad: clamp(16px, 3vw, 32px);
  --header-h: 84px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  --soft-shadow: 0 1px 0 rgba(255,255,255,0.95) inset, 0 22px 44px -28px rgba(20,20,18,0.38), 0 3px 10px -4px rgba(20,20,18,0.10);
  --chrome: linear-gradient(135deg, #141412 18%, #56605f 50%, #1c1f1e 82%);
  --shine: linear-gradient(105deg, transparent 42%, rgba(255,255,255,0.7) 50%, transparent 58%);

  color-scheme: light;
}

*, *::before, *::after{ box-sizing: border-box; }
*{ margin: 0; }
html{ -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--header-h); }
body{
  background: var(--bg); color: var(--ink);
  font-family: var(--font); font-weight: 600; font-size: 17px; line-height: 1.4;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, svg, video, canvas{ display: block; max-width: 100%; }
a{ color: inherit; text-decoration: none; }
button, input, select, textarea{ font: inherit; color: inherit; }
button{ cursor: pointer; }
ul, ol{ list-style: none; padding: 0; }
h1, h2, h3{ font-weight: 700; letter-spacing: -0.04em; line-height: 0.92; }

.sr-only{ position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link{ position: absolute; top: -100px; left: var(--pad); z-index: 300; background: var(--ink); color: var(--bg); padding: 10px 14px; border-radius: 6px; }
.skip-link:focus{ top: 12px; }
:focus-visible{ outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

.wrap{ width: 100%; max-width: 1440px; margin-inline: auto; padding-inline: var(--pad); }
.nobr{ white-space: nowrap; }
.serif{ font-family: var(--serif); font-style: italic; font-weight: 600; letter-spacing: -0.01em; color: var(--ink-2); font-size: 1.06em; }

/* ---------- Pills, eyebrows, buttons ---------- */
.pill{
  display: inline-flex; align-items: center; gap: 0.4em;
  font-family: var(--mono); font-weight: 600; font-size: 12px; line-height: 1; letter-spacing: -0.01em; text-transform: uppercase;
  padding: 5px 9px 4px; border: 1.5px solid var(--ink); border-radius: 999px;
  background: var(--bg); color: var(--ink); white-space: nowrap; -webkit-text-fill-color: currentColor;
}
.pill-accent{ border-color: var(--accent); color: var(--accent); }
.eyebrow{
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px 6px 11px; border-radius: 999px;
  background: var(--surface); box-shadow: var(--soft-shadow);
  font: 600 12px/1 var(--mono); text-transform: uppercase; letter-spacing: -0.01em; color: var(--ink);
}
.eyebrow::before{ content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--accent-wash); }

/* Gradient-bordered pill buttons with rolling text */
.pbtn{
  display: inline-flex; padding: 1.5px; border-radius: 999px; flex: none;
  background: linear-gradient(135deg, #141412, #ffffff 52%, #141412);
  box-shadow: 0 10px 24px -14px rgba(20,20,18,0.45);
  transition: transform 0.25s var(--ease), box-shadow 0.25s;
}
button.pbtn{ border: 0; }
.pbtn:disabled{ cursor: wait; }
.pbtn:hover{ transform: translateY(-1px); box-shadow: 0 16px 30px -16px rgba(20,20,18,0.5); }
.pbtn:active{ transform: scale(0.97); }
.pbtn-in{
  display: inline-flex; align-items: center; gap: 10px; padding: 9px 9px 9px 18px; border-radius: 999px;
  background: var(--bg); color: var(--ink); font-weight: 600; font-size: 15px; line-height: 1; white-space: nowrap;
}
.pbtn-ico{ width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--bg); flex: none; }
.pbtn-ico svg{ width: 12px; height: 12px; }
.pbtn-dark{ background: linear-gradient(135deg, #0c6b76, #ffffff 52%, #0c6b76); }
.pbtn-dark .pbtn-in{ background: var(--ink); color: var(--bg); }
.pbtn-dark .pbtn-ico{ background: var(--bg); color: var(--ink); }
.pbtn-lg .pbtn-in{ font-size: 17px; padding: 12px 12px 12px 22px; }
.pbtn-lg .pbtn-ico{ width: 30px; height: 30px; }
.pbtn-block{ display: flex; width: 100%; }
.pbtn-block .pbtn-in{ width: 100%; justify-content: center; padding: 15px 18px; font-size: 17px; }
.roll{ display: inline-block; height: 1.2em; overflow: hidden; line-height: 1.2; }
.roll-in{ display: flex; flex-direction: column; transition: transform 0.5s var(--ease); }
.pbtn:hover .roll-in, .pbtn:focus-visible .roll-in{ transform: translateY(-1.2em); }

/* ---------- Floating glass nav ---------- */
.site-header{ position: fixed; top: 12px; left: 0; right: 0; z-index: 100; padding-inline: 12px; pointer-events: none; }
.nav-shell{
  pointer-events: auto; max-width: 1180px; height: 60px; margin: 0 auto; padding: 0 8px 0 20px;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  background: rgba(250,250,248,0.72); border: 1px solid rgba(255,255,255,0.85); border-radius: 999px;
  backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: 0 1px 0 rgba(255,255,255,0.9) inset, 0 10px 30px -18px rgba(20,20,18,0.35);
  transition: box-shadow 0.3s, background 0.3s;
}
.site-header.is-scrolled .nav-shell{ background: rgba(250,250,248,0.86); box-shadow: 0 1px 0 rgba(255,255,255,0.9) inset, 0 18px 40px -20px rgba(20,20,18,0.45); }
.logo{ grid-column: 1; justify-self: start; display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 17px; letter-spacing: -0.03em; white-space: nowrap; }
.logo-mark{ width: 20px; height: 20px; flex: none; }
.nav{ grid-column: 2; display: none; gap: 26px; font-size: 15px; }
.nav a{ color: var(--ink-2); transition: color 0.2s; }
.nav a:hover{ color: var(--ink); }
.nav-actions{ grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 6px; }
.site-header .pbtn-in{ font-size: 14px; padding: 7px 7px 7px 15px; }
.site-header .pbtn-ico{ width: 24px; height: 24px; }
@media (min-width: 900px){ .nav{ display: flex; } }

/* Phones and small windows: a three-line menu button opens the page links under the header pill */
.menu-btn{
  width: 44px; height: 44px; flex: none; border: 0; border-radius: 50%; cursor: pointer;
  display: grid; place-content: center; gap: 4px; background: rgba(20,20,18,0.07); transition: background 0.2s;
}
.menu-btn:hover{ background: rgba(20,20,18,0.12); }
.menu-btn span{ display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--ink); transition: transform 0.3s var(--ease), opacity 0.2s; }
.menu-btn[aria-expanded="true"] span:nth-child(1){ transform: translateY(6px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span:nth-child(2){ opacity: 0; }
.menu-btn[aria-expanded="true"] span:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }
.mobile-menu{
  pointer-events: auto; max-width: 1180px; margin: 8px auto 0; padding: 8px; display: grid; gap: 2px;
  background: rgba(250,250,248,0.97); border: 1px solid rgba(255,255,255,0.85); border-radius: 24px;
  backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: 0 1px 0 rgba(255,255,255,0.9) inset, 0 24px 50px -24px rgba(20,20,18,0.45);
  animation: menu-in 0.28s var(--ease);
}
.mobile-menu[hidden]{ display: none; }
.mobile-menu a{ display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; border-radius: 16px; font-size: 21px; font-weight: 700; letter-spacing: -0.025em; color: var(--ink); }
.mobile-menu a::after{ content: '\2197'; font-size: 16px; color: var(--accent); }
.mobile-menu a:hover, .mobile-menu a:focus-visible{ background: var(--bg-2); }
.mobile-menu a[aria-current="page"]{ color: var(--accent); }
@keyframes menu-in{ from{ opacity: 0; transform: translateY(-8px); } }
.is-paused .mobile-menu{ animation-play-state: running !important; }
@media (min-width: 900px){ .menu-btn, .mobile-menu{ display: none; } }
/* Phones: the header logo and Explore options button get compact so the menu button fits; the smallest
   phones shorten the logo to "KGBR" (its link still says KGBR Marketing to screen readers) */
@media (max-width: 419px){
  .site-header .logo{ gap: 7px; font-size: 15px; }
  .site-header .logo-mark{ width: 18px; height: 18px; }
  .site-header .pbtn-ico{ display: none; }
  .site-header .pbtn-in{ padding: 9px 13px; font-size: 13px; }
  .menu-btn{ width: 40px; height: 40px; }
}
@media (max-width: 379px){ .logo-word{ display: none; } }

/* ---------- Line / word / letter reveals (3D flip-up) ---------- */
.js [data-split] .w{
  display: inline-block; transform-origin: 50% 100%;
  transform: perspective(900px) translate3d(0, 0.35em, 0) rotateX(-80deg); opacity: 0;
  transition: transform 1s var(--ease), opacity 0.7s ease; transition-delay: calc(var(--i, 0) * 32ms);
}
.js [data-split] .w.chip{ display: inline-flex; }
.js [data-split].in .w{ transform: perspective(900px) translate3d(0, 0, 0) rotateX(0deg); opacity: 1; }

/* ---------- Hero ---------- */
.hero{ position: relative; min-height: 100svh; display: flex; flex-direction: column; padding-top: var(--header-h); overflow: clip; isolation: isolate; }
.hero-wave{ position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; }
.hero::before{
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60% 46% at 50% 44%, rgba(250,250,248,0.94) 0%, rgba(250,250,248,0.72) 45%, rgba(250,250,248,0) 100%),
    linear-gradient(180deg, var(--bg) 0%, rgba(250,250,248,0) 22%, rgba(250,250,248,0) 70%, var(--bg) 100%);
}
.hero-center{ flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 5vh var(--pad) 4vh; }
.hero-title{ transform-origin: 50% 100%; will-change: transform, opacity; }
.hero h1{ font-size: clamp(2.8rem, 9vw, 8.5rem); line-height: 0.92; letter-spacing: -0.045em; text-wrap: balance; }
/* Phones: a bigger three-line headline and a lighter wash over the dot wave, so the hero isn't a big empty white screen */
@media (max-width: 759px){
  .hero h1{ font-size: clamp(3.2rem, 16.5vw, 5.2rem); }
  .hero::before{
    background:
      radial-gradient(90% 34% at 50% 46%, rgba(250,250,248,0.9) 0%, rgba(250,250,248,0.55) 55%, rgba(250,250,248,0) 100%),
      linear-gradient(180deg, var(--bg) 0%, rgba(250,250,248,0) 16%, rgba(250,250,248,0) 78%, var(--bg) 100%);
  }
}

.hero-h1-visual{ display: block; }
/* Chrome type (Phenyx) with a slow glint. Padding/negative margin keeps descenders inside the clip box. */
.hero h1 .ln{
  display: block; padding-bottom: 0.14em; margin-bottom: -0.14em;
  background-image: var(--shine), var(--chrome);
  background-size: 250% 100%, 100% 100%; background-position: 100% 0, 0 0; background-repeat: no-repeat;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  animation: chrome-shine 8s ease-in-out 2.2s infinite;
}
.hero h1 .ln .serif{ -webkit-text-fill-color: var(--accent); color: var(--accent); font-size: 1.12em; font-weight: 600; letter-spacing: -0.02em; }
@keyframes chrome-shine{ 0%{ background-position: 100% 0, 0 0; } 38%, 100%{ background-position: 0% 0, 0 0; } }
.js .hero h1 .ln{ transform-origin: 50% 100%; transform: perspective(900px) translate3d(0, 0.3em, 0) rotateX(-70deg); opacity: 0; transition: transform 1.1s var(--ease), opacity 0.8s ease; transition-delay: calc(var(--i, 0) * 140ms); }
.js .hero h1.in .ln{ transform: perspective(900px) translate3d(0, 0, 0) rotateX(0deg); opacity: 1; }
/* If the script never runs, show the headline anyway. */
.js .hero h1:not(.in) .ln{ animation: chrome-shine 8s ease-in-out 2.2s infinite, ln-fallback 0.01s linear 3s forwards; }
@keyframes ln-fallback{ to{ opacity: 1; transform: none; } }
.hero-center .eyebrow{ margin-bottom: clamp(18px, 3.4vh, 30px); }

/* "A Christian marketing agency based in Colorado." then the three offers, split by teal slashes */
.hero-tagline{ max-width: 22em; margin-top: clamp(20px, 3.4vh, 34px); text-align: center; text-wrap: balance; font-weight: 700; font-size: clamp(17px, 4.2vw, 28px); line-height: 1.15; letter-spacing: -0.025em; color: var(--ink); }
.hero-tagline .serif{ color: var(--accent); }
.hero-offers{
  display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 0.25em 0.6em;
  margin-top: clamp(10px, 1.6vh, 16px); font: 600 clamp(11px, 2.9vw, 13.5px)/1.3 var(--mono); text-transform: uppercase; letter-spacing: -0.01em; color: var(--ink-2);
}
.hero-offers i{ font-style: normal; letter-spacing: -0.08em; color: var(--accent); }
/* Phones: two offers on the first line, the third on its own line, no slash left hanging */
@media (max-width: 559px){
  .hero-offers i:nth-of-type(2){ display: none; }
  .hero-offers span:last-of-type{ flex-basis: 100%; text-align: center; }
}

.chip-hero{ display: inline-block; width: 0.5em; height: 1em; vertical-align: -0.34em; margin: 0 0.07em; perspective: 500px; -webkit-text-fill-color: currentColor; }
.chip-tilt{ display: block; width: 100%; height: 100%; transform-style: preserve-3d; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
.chip-float{
  display: block; position: relative; width: 100%; height: 100%; overflow: hidden;
  border-radius: 0.085em; background: var(--media); container-type: size;
  box-shadow: 0 0.22em 0.32em -0.14em rgba(20,20,18,0.45), 0 0.05em 0.1em rgba(20,20,18,0.18);
  animation: chip-float 6s ease-in-out infinite;
}
.chip-float img{ width: 100%; height: 100%; object-fit: cover; }
.chip-float::after{ content: ''; position: absolute; inset: 0; background: linear-gradient(130deg, rgba(255,255,255,0.28), transparent 42%); }
/* Recording dot. No text in here: text inside the chrome-clipped line paints a ghost copy in Chrome. */
.hero-rec{ position: absolute; top: 8%; left: 12%; z-index: 1; width: 15cqw; height: 15cqw; border-radius: 50%; background: var(--accent-soft); box-shadow: 0 0 0 4cqw rgba(255,255,255,0.28); animation: blink 1.4s steps(2) infinite; }
@keyframes chip-float{ 0%, 100%{ transform: translateY(0) rotate(-2.5deg); } 50%{ transform: translateY(-0.05em) rotate(1.5deg); } }
@keyframes blink{ 50%{ opacity: 0.2; } }
/* Headline: "Stories" + a little vertical-video phone, then "worth watching." as one phrase */
.hero h1 .ln-one, .hero h1 .ln-two{ white-space: nowrap; }
.chip-phone{ width: 0.4em; height: 0.73em; vertical-align: 0; margin: 0 0 0 0.13em; }
/* Phones: shrink the serif phrase just enough to stay on one line inside the side padding */
@media (max-width: 759px){ .hero h1 .ln-two .serif{ font-size: min(1.12em, 15.4vw); } }
.chip-phone .chip-float{ background: none; border-radius: 0.1em; overflow: visible; container-type: normal; box-shadow: 0 0.16em 0.24em -0.12em rgba(20,20,18,0.42), 0 0.03em 0.07em rgba(20,20,18,0.16); }
.chip-phone .chip-float::after{ border-radius: inherit; }
.chip-phone svg{ display: block; width: 100%; height: 100%; }
.chip-phone .ph-body{ fill: var(--media); }
.chip-phone .ps-a{ stop-color: var(--accent-soft); }
.chip-phone .ps-b{ stop-color: var(--accent); }
.chip-phone .ph-play{ fill: var(--bg); }
.chip-phone .ph-track{ fill: rgba(250,250,248,0.35); }
.chip-phone .ph-prog{ fill: var(--bg); }

.hero-sub{ margin-top: clamp(14px, 2.4vh, 24px); max-width: 33em; font-size: clamp(16px, 1.25vw, 18px); line-height: 1.32; }
.hl{ color: var(--accent); }
.hero-ctas{ display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: clamp(22px, 3.5vh, 34px); }
@media (max-width: 479px){
  .hero-ctas{ gap: 8px; }
  .hero-ctas .pbtn-lg .pbtn-in{ font-size: 15px; gap: 8px; padding: 8px 8px 8px 15px; }
  .hero-ctas .pbtn-lg .pbtn-ico{ width: 26px; height: 26px; }
}

.logos{ position: relative; z-index: 1; padding: 0 0 22px; }
.logos-label{ text-align: center; font: 600 11px var(--mono); text-transform: uppercase; color: var(--ink-2); margin-bottom: 14px; }
.logo-marquee{ overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.logo-track{ display: flex; width: max-content; animation: marquee 40s linear infinite; }
.logo-set{ display: flex; align-items: center; gap: 56px; padding-right: 56px; }
/* Client logos: wordmarks go solid ink, round profile logos go grayscale with the brand name beside them */
.brand{ display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; font-weight: 700; font-size: 15px; letter-spacing: -0.02em; color: var(--ink); opacity: 0.72; }
.brand img{ max-width: none; }
.brand-word img{ height: var(--h, 28px); width: auto; filter: brightness(0); }
.brand-mark{ width: 34px; height: 34px; flex: none; border-radius: 50%; object-fit: cover; filter: grayscale(1) contrast(1.05); box-shadow: 0 0 0 1px var(--line); }
.brand-mono{ display: grid; place-items: center; background: var(--ink); color: var(--bg); font: 700 11px var(--mono); letter-spacing: 0.02em; filter: none; }
.brand-mono svg{ width: 18px; height: 18px; }
@keyframes marquee{ to{ transform: translateX(-50%); } }

/* ---------- Section heads ---------- */
.sec{ padding: clamp(80px, 12vh, 140px) 0; }
.sec-alt{ background: var(--bg-2); }
.sec-alt + .sec-alt{ padding-top: clamp(16px, 4vh, 48px); }
.shead{ display: grid; justify-items: start; gap: 18px; margin-bottom: clamp(36px, 6vh, 64px); }
.shead h2{ font-size: clamp(2.3rem, 4.8vw, 4.4rem); max-width: 13em; text-wrap: balance; }
.shead p{ color: var(--ink-2); max-width: 34em; font-size: clamp(16px, 1.3vw, 18px); line-height: 1.38; }
.shead-center{ justify-items: center; text-align: center; }
.shead-row{ display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 22px; }

/* ---------- Featured projects (pinned 3D deck on desktop) ---------- */
.projects{ position: relative; overflow-x: clip; background: var(--bg-2); }
.projects-title{ text-align: center; font-size: clamp(2.2rem, 4vw, 3rem); padding: 12vh var(--pad) 5vh; }
.projects-grid{ padding-bottom: 6vh; }
.proj{ display: grid; gap: 22px; padding: 0 var(--pad) 72px; max-width: 560px; margin-inline: auto; }
.proj-who{ display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.proj-avatar{ width: 44px; height: 44px; flex: none; border-radius: 50%; background: var(--ink); color: var(--bg); display: grid; place-items: center; font: 700 12px var(--mono); letter-spacing: 0.02em; text-transform: uppercase; }
.proj-kicker{ font: 600 11px var(--mono); text-transform: uppercase; color: var(--ink-2); }
.proj-info h3{ font-size: clamp(2.4rem, 4.4vw, 4rem); line-height: 0.95; letter-spacing: -0.045em; }
.proj-info p{ margin-top: 16px; max-width: 22em; color: var(--ink-2); font-size: 16px; line-height: 1.3; }
.proj-links{ display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; }
.proj-links .pill{ text-transform: none; font-size: 12px; padding: 6px 10px 5px; }
.proj-links a.pill, .proj-links button.pill{ cursor: pointer; transition: background 0.2s, color 0.2s; }
.proj-links a.pill:hover, .proj-links button.pill:hover{ background: var(--ink); color: var(--bg); }
.proj-lock svg, .screen-lock svg{ width: 12px; height: 12px; flex: none; }
.proj-count{ font: 600 12.5px var(--mono); color: var(--ink-2); margin-bottom: 10px; }
.proj-count b{ color: var(--ink); font-weight: 600; }
.proj-stats .pill{ margin-bottom: 16px; }
.stats{ display: grid; gap: 14px; grid-template-columns: repeat(3, 1fr); }
.stat b{ display: block; font-size: clamp(1.6rem, 6.9vw, 2rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1; color: var(--accent); white-space: nowrap; }
.stat span{ font-size: 14px; }

/* Media slot: a stack of 9:16 phones for short-form, a pair of 16:9 screens for long-form YouTube.
   js/main.js moves each card's data-slot along every 3s: "front" plays, "next" waits on the right
   (top right for screens) and "prev" on the left. --f-* is the front card's tilt. */
.proj-media{ position: relative; width: min(68vw, 300px); aspect-ratio: 9 / 16; margin: 8px auto 12px; perspective: 1200px; --f-rx: 0deg; --f-ry: -14deg; --f-rz: -3deg; --out-x: -72%; }
.proj-media.is-wide{ width: min(100%, 560px); aspect-ratio: 16 / 9; perspective: 1400px; margin-top: 56px; --f-rx: 3deg; --f-ry: -9deg; --f-rz: 0deg; --out-x: -42%; } /* room for the screen peeking out behind */
.proj-media.is-fan{ --fan: 22%; }

.phone, .screen{
  position: absolute; inset: 0; z-index: 3; overflow: hidden; background: var(--media);
  box-shadow: 0 40px 70px -30px rgba(20,20,18,0.5), 0 12px 24px -12px rgba(20,20,18,0.3);
  --x: 0%; --y: 0%; --rx: var(--f-rx); --ry: var(--f-ry); --rz: var(--f-rz); --s: 1;
  transform: translate(var(--x), var(--y)) rotateX(var(--rx)) rotateY(var(--ry)) rotate(var(--rz)) scale(var(--s));
  transition: transform 0.9s cubic-bezier(0.65, 0, 0.35, 1);
}
.phone{ border-radius: 22px; }
.screen{ border-radius: 18px; }
[data-slot="next"], [data-slot="prev"]{ z-index: 1; --rx: 0deg; --ry: 0deg; --s: 0.82; }
.is-fan [data-slot="next"]{ --x: var(--fan); --rz: 8deg; }
.is-fan [data-slot="prev"]{ --x: calc(var(--fan) * -1); --rz: -8deg; }
.is-wide [data-slot="next"]{ --x: 7%; --y: -25%; --rz: 3deg; --s: 0.86; }

/* A swap: the front card slides out to the left and fades, then fades back in at its new spot
   behind; the next card springs forward; with three cards, the left one slips behind to the right. */
.proj-media .is-leaving{ animation: card-leave 0.9s linear both; transition: none; }
.proj-media .is-arriving{ transition: transform 0.9s cubic-bezier(0.3, 1.25, 0.5, 1); }
.proj-media .is-passing{ z-index: 0; }
@keyframes card-leave{
  0%{ transform: translate(0%, 0%) rotateX(var(--f-rx)) rotateY(var(--f-ry)) rotate(var(--f-rz)) scale(1); opacity: 1; z-index: 4; animation-timing-function: cubic-bezier(0.5, 0, 0.75, 0.4); }
  42%{ transform: translate(var(--out-x), 2%) rotateX(var(--f-rx)) rotateY(var(--f-ry)) rotate(calc(var(--f-rz) - 9deg)) scale(0.92); opacity: 0; z-index: 4; }
  58%{ transform: translate(var(--x), var(--y)) rotateX(var(--rx)) rotateY(var(--ry)) rotate(var(--rz)) scale(var(--s)); opacity: 0; z-index: 1; animation-timing-function: ease-out; }
  100%{ transform: translate(var(--x), var(--y)) rotateX(var(--rx)) rotateY(var(--ry)) rotate(var(--rz)) scale(var(--s)); opacity: 1; z-index: 1; }
}
/* Jumping back to the first card happens off screen, with no motion */
.proj-media.no-anim [data-slot], .proj-media.no-anim [data-slot] *{ transition: none !important; animation: none !important; }
/* The pause button stops loops, but a swap already under way still finishes */
.is-paused .proj-media .is-leaving{ animation-play-state: running !important; }

.phone-img, .screen-img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.phone::before, .screen::before{ content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(10,10,9,0.55) 0%, rgba(10,10,9,0) 24%, rgba(10,10,9,0) 56%, rgba(10,10,9,0.75) 100%); }
.phone::after, .screen::after{ content: ''; position: absolute; inset: 0; z-index: 3; background: linear-gradient(115deg, rgba(255,255,255,0.16), transparent 38%); pointer-events: none; }

/* Labels and the play button belong to the card in front; they fade in once it has landed. */
.card-ui{ position: absolute; inset: 0; z-index: 2; pointer-events: none; transition: opacity 0.45s ease 0.05s, visibility 0s; }
.card-ui button{ pointer-events: auto; }
[data-slot]:not([data-slot="front"]) > .card-ui, .is-arriving > .card-ui{ opacity: 0; visibility: hidden; transition: opacity 0.2s ease, visibility 0s 0.2s; }
.phone-top, .screen-top{ position: absolute; z-index: 2; top: 16px; left: 16px; right: 16px; display: flex; justify-content: space-between; gap: 10px; font: 600 11px var(--mono); color: rgba(255,255,255,0.85); text-transform: uppercase; }
.phone-play, .screen-play{
  position: absolute; z-index: 2; inset: 0; margin: auto; width: 64px; height: 64px; border: 0; border-radius: 50%;
  background: rgba(255,255,255,0.18); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  display: grid; place-items: center; box-shadow: 0 0 0 1px rgba(255,255,255,0.35) inset;
  transition: transform 0.35s var(--ease), background 0.25s;
}
.phone-play:hover, .screen-play:hover{ transform: scale(1.1); background: rgba(255,255,255,0.32); }
.phone-play svg, .screen-play svg{ width: 22px; height: 22px; fill: #fff; margin-left: 3px; }
.screen-play{ width: 72px; height: 72px; }
/* Keep each reel's hook text (top third) clear of the play button */
.phone .phone-play{ inset: auto 0; top: 60%; margin: 0 auto; }
.phone-views{ position: absolute; z-index: 2; left: 16px; right: 16px; bottom: 32px; color: rgba(255,255,255,0.85); font: 600 11px var(--mono); text-transform: uppercase; }
.phone-views b{ display: block; margin-bottom: 4px; color: #fff; font: 700 clamp(30px, 3.2vw, 46px)/0.95 var(--font); letter-spacing: -0.045em; }
.phone-bar{ position: absolute; z-index: 2; left: 16px; right: 16px; bottom: 18px; height: 3px; border-radius: 2px; background: rgba(255,255,255,0.25); }
.phone-bar::after{ content: ''; position: absolute; inset: 0 auto 0 0; width: 38%; border-radius: 2px; background: #fff; }
.screen-title{ position: absolute; z-index: 2; left: 18px; right: 18px; bottom: 16px; color: #fff; font-weight: 700; font-size: clamp(15px, 1.3vw, 19px); line-height: 1.15; letter-spacing: -0.02em; text-wrap: balance; }

/* Chips label the cards waiting behind, on the corner that stays visible; hidden while cards move */
.phone-chip{ position: absolute; z-index: 2; left: 10px; top: 12px; padding: 5px 8px 4px; border-radius: 999px; background: rgba(250,250,248,0.94); color: var(--ink); font: 700 11px/1 var(--font); white-space: nowrap; }
[data-slot="next"] > .phone-chip{ left: auto; right: 10px; }
.screen-lock{ position: absolute; z-index: 2; bottom: 16px; left: 18px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px 5px; border-radius: 999px; background: rgba(250,250,248,0.94); color: var(--ink); font: 600 11px var(--mono); text-transform: uppercase; }
[data-slot="next"] > .screen-lock{ top: 10px; right: 14px; bottom: auto; left: auto; }
.card-chip{ transition: opacity 0.35s ease 0.15s; }
[data-slot="front"] > .chip-back, :is(.is-leaving, .is-arriving, .is-passing) > .card-chip{ opacity: 0; transition: none; }

/* 3D deck only when the 3D engine runs (JS on, motion allowed); otherwise the stacked list above. */
@media (min-width: 900px) and (min-height: 620px){
  /* One screen tall; the deck plays on a timer instead of being pinned to the scroll. */
  .has-3d .projects-stage{ position: relative; height: 100vh; min-height: 640px; overflow: clip; display: flex; flex-direction: column; padding-top: 92px; }
  .has-3d .deck-nav{ display: flex; }
  .has-3d .projects-title{ padding: 1vh var(--pad); font-size: clamp(2rem, 2.9vw, 2.6rem); }
  .has-3d .projects-grid{
    flex: 1; min-height: 0; display: grid; align-items: center;
    grid-template-columns: 1fr minmax(280px, min(30vw, 460px)) 1fr; grid-template-areas: "info media stats";
    gap: clamp(16px, 3vw, 48px); padding: 0 var(--pad) 3vh;
    perspective: 1500px; perspective-origin: 50% 45%;
  }
  .has-3d .proj{ display: contents; }
  .has-3d .proj-info{ grid-area: info; justify-self: start; max-width: min(420px, 26vw); }
  .has-3d .proj-stats{ grid-area: stats; justify-self: start; padding-left: clamp(48px, 5vw, 80px); }
  .has-3d .proj-stats .stats{ grid-template-columns: 1fr; gap: 12px; }
  .has-3d .proj-stats .stat b{ font-size: clamp(1.8rem, 2.6vw, 2.4rem); }
  .has-3d .proj-media{ grid-area: media; justify-self: center; width: auto; height: min(68vh, 660px); margin: 0; perspective: none; }
  .has-3d .proj-media.is-wide{ width: min(36vw, 640px); height: auto; }
  .has-3d .proj-media, .has-3d .proj-media.is-wide{ --f-rx: 0deg; --f-ry: 0deg; --f-rz: 0deg; }
  .has-3d .proj-info p{ max-width: 20em; }
  .has-3d .proj-info, .has-3d .proj-stats, .has-3d .proj-media{ will-change: transform, opacity; }
  /* Text always sits above the cards (cards get z-index up to 100 from js/main.js). */
  .has-3d .proj-info, .has-3d .proj-stats{ position: relative; z-index: 120; }
}
@media (min-width: 1280px) and (min-height: 620px){
  .has-3d .proj-media.is-wide{ width: min(42vw, 640px); }
  .has-3d .proj-media.is-fan{ --fan: 32%; }
}

/* Progress bars under the self-playing deck: the current one fills while its project plays (3s per card) */
.deck-nav{ display: none; position: absolute; z-index: 130; left: 50%; bottom: 3.2vh; transform: translateX(-50%); gap: 10px; }
.deck-dot{ width: 46px; padding: 8px 0; border: 0; background: none; cursor: pointer; }
.deck-dot i{ position: relative; display: block; height: 4px; border-radius: 4px; overflow: hidden; background: var(--line-strong); transition: background 0.2s; }
.deck-dot:hover i{ background: var(--ink-2); }
.deck-dot i::after{ content: ''; position: absolute; inset: 0; border-radius: inherit; background: var(--accent); transform: scaleX(0); transform-origin: 0 50%; }
.deck-dot.is-active i::after{ transform: scaleX(1); }
.deck-dot.is-active.is-running i::after{ animation: deck-fill var(--dwell, 3s) linear var(--start, 0s) both; }
@keyframes deck-fill{ from{ transform: scaleX(0); } to{ transform: scaleX(1); } }
/* The YouTube frame in front slowly pushes in while its slide is up (eases back out when it leaves) */
.has-3d .screen-img{ transition: transform 4.5s cubic-bezier(0.2, 0.6, 0.3, 1); }
.has-3d .proj-media[data-active] [data-slot="front"]:not(.is-arriving) .screen-img{ transform: scale(1.07); }

/* ---------- Video lightbox ---------- */
.lightbox{ position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 64px 16px 24px; animation: lb-in 0.3s ease; }
.lightbox[hidden]{ display: none; }
.lightbox-backdrop{ position: absolute; inset: 0; background: rgba(12,12,11,0.8); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.lightbox-panel{ position: relative; display: grid; justify-items: center; gap: 14px; animation: lb-pop 0.45s var(--ease); }
.lightbox-frame{ border-radius: 16px; overflow: hidden; background: #000; box-shadow: 0 40px 80px -30px rgba(0,0,0,0.7); }
.lightbox-frame iframe{ display: block; width: 100%; height: 100%; border: 0; }
.lightbox-frame.is-youtube{ width: min(1100px, 92vw, (100vh - 150px) * 16 / 9); aspect-ratio: 16 / 9; }
.lightbox-frame.is-instagram{ width: min(400px, 92vw); height: min(100vh - 150px, 720px); background: #fff; }
.lightbox-frame.is-file{ width: min(420px, 92vw, (100vh - 150px) * 9 / 16); aspect-ratio: 9 / 16; }
.lightbox-frame video{ display: block; width: 100%; height: 100%; object-fit: contain; background: #000; }
.lightbox-close{ position: absolute; top: -52px; right: 0; width: 40px; height: 40px; border: 0; border-radius: 50%; display: grid; place-items: center; background: rgba(250,250,248,0.94); color: var(--ink); transition: transform 0.25s var(--ease); }
.lightbox-close:hover{ transform: rotate(90deg); }
.lightbox-close svg{ width: 18px; height: 18px; }
.lightbox-link{ font: 600 12px var(--mono); text-transform: uppercase; color: rgba(250,250,248,0.85); }
.lightbox-link:hover{ color: #fff; }
.lb-open{ overflow: hidden; }
.is-paused .lightbox, .is-paused .lightbox-panel{ animation-play-state: running !important; }
@keyframes lb-in{ from{ opacity: 0; } }
@keyframes lb-pop{ from{ opacity: 0; transform: translateY(18px) scale(0.97); } }

/* Pointer tilt (js/main.js sets the transform on fine pointers) */
.has-3d [data-tilt]{ transition: transform 0.6s var(--ease), box-shadow 0.4s; }
.has-3d [data-tilt]:hover{ box-shadow: 0 1px 0 rgba(255,255,255,0.95) inset, 0 34px 60px -30px rgba(20,20,18,0.45), 0 6px 14px -6px rgba(20,20,18,0.14); }

/* ---------- Manifesto ---------- */
/* Not on any page since 2026-10-21 (Karter took the section out "right now"); kept so it can come back. */
.manifesto{ display: grid; place-items: center; padding: clamp(80px, 16vh, 180px) var(--pad); }
.mani{ max-width: 17.5em; text-align: center; font-size: clamp(1.9rem, 4.1vw, 3.5rem); font-weight: 700; line-height: 1.04; letter-spacing: -0.04em; }
.chip{ display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; position: relative; top: -0.06em; margin: 0 0.06em; }
.chip-pair img{ width: 0.82em; height: 0.82em; border-radius: 50%; object-fit: cover; border: 0.05em solid var(--bg); box-shadow: 0 0.08em 0.16em rgba(20,20,18,0.3); }
.chip-pair img + img{ margin-left: -0.32em; }
.chip-arrow{ width: 0.66em; height: 0.66em; border-radius: 50%; background: var(--ink); }
.chip-arrow i{ font-style: normal; color: var(--bg); font-size: 0.5em; line-height: 1; }
.chip-spark{ color: var(--accent); }
.chip-spark i{ display: inline-block; font-style: normal; font-size: 0.7em; animation: spin3d 6s linear infinite; }
/* Deep teal band (the video wall, and the manifesto when it's on the page) so those read as their own sections */
.band-teal{ background: radial-gradient(110% 140% at 50% 0%, #0f7c88 0%, #0c6b76 40%, #08464e 100%); color: var(--bg); }
.band-teal .chip-arrow{ background: var(--bg); }
.band-teal .chip-arrow i{ color: var(--accent); }
.band-teal .chip-spark{ color: #a6e6ec; }
@keyframes spin3d{ to{ transform: rotateY(360deg); } }

/* ---------- Method (scroll-driven 3D cards) ---------- */
/* Tinted band with white cards, so it reads as its own section after the cream Services list */
.method{ position: relative; padding: clamp(64px, 10vh, 120px) 0 clamp(80px, 14vh, 160px); overflow-x: clip; background: var(--bg-2); }
.method::before, .svc-page::before{ content: ''; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(to right, var(--line) 1px, transparent 1px); background-size: calc(100% / 8) 100%; }
.method-head{ position: relative; display: grid; justify-items: center; gap: 18px; text-align: center; margin-bottom: clamp(40px, 6vh, 72px); padding-inline: var(--pad); }
.method-head h2{ font-size: clamp(2.3rem, 4.8vw, 4.4rem); }
.steps{ position: relative; display: flex; flex-direction: column; align-items: center; }
.step-item{ width: 100%; display: flex; flex-direction: column; align-items: center; }
.step{
  --lift: 0;
  width: min(100% - 2 * var(--pad), 1040px); text-align: center; background: var(--surface);
  border-radius: clamp(18px, 2.4vw, 30px); padding: clamp(36px, 6vw, 72px) clamp(18px, 4vw, 56px) clamp(32px, 5vw, 56px);
  transform-origin: 50% 50%; will-change: transform;
  box-shadow: 0 1px 0 rgba(255,255,255,0.85) inset,
    0 calc(38px * var(--lift)) calc(70px * var(--lift)) -28px rgba(20,20,18, calc(0.36 * var(--lift))),
    0 calc(10px * var(--lift)) calc(22px * var(--lift)) -10px rgba(20,20,18, calc(0.18 * var(--lift)));
}
.step-title{ font-size: clamp(2.4rem, 8vw, 6.8rem); line-height: 0.9; letter-spacing: -0.05em; color: var(--ink); transition: color 0.45s var(--ease); text-wrap: balance; }
.step.is-active .step-title{ color: var(--accent); }
.step-idx{ display: inline-block; vertical-align: top; margin-left: 0.15em; font: 700 13px/1 var(--mono); letter-spacing: 0; color: var(--accent); }
.step p{ margin: clamp(14px, 2vw, 24px) auto 0; max-width: 34em; color: var(--ink-2); font-size: clamp(15px, 1.3vw, 18px); line-height: 1.35; }
.connector{ position: relative; height: clamp(70px, 11vh, 120px); width: 100%; display: flex; align-items: center; justify-content: center; }
.connector::before{ content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 1.5px; transform: translateX(-50%); background: var(--line-strong); transition: background 0.4s; }
.connector .pill{ position: relative; font-size: 11px; transition: color 0.4s, border-color 0.4s; }
.connector.is-on::before{ background: var(--accent); }
.connector.is-on .pill{ border-color: var(--accent); color: var(--accent); }

.step-chip{ display: inline-block; vertical-align: -0.16em; margin: 0 0.07em; position: relative; container-type: inline-size; transform: rotate(var(--r, -4deg)); box-shadow: 0 0.14em 0.24em -0.1em rgba(20,20,18,0.4); }
.chip-doc{ --r: -5deg; width: 0.58em; height: 0.78em; background: #fff; border-radius: 0.06em; padding-top: 0.05em; }
.chip-doc i{ display: block; height: 6cqw; margin: 9cqw 12cqw 0; border-radius: 3cqw; background: #d6d3ca; }
.chip-doc i:nth-child(1){ width: 52%; background: var(--ink); }
.chip-doc i:nth-child(2){ width: 74%; }
.chip-doc i:nth-child(3){ width: 64%; }
.chip-doc i:nth-child(4){ width: 70%; }
.chip-doc b{ position: absolute; right: -10cqw; bottom: -10cqw; width: 40cqw; aspect-ratio: 1; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; font: 700 22cqw/1 var(--font); letter-spacing: 0; }
.chip-rec{ --r: 4deg; width: 0.46em; height: 0.82em; border-radius: 0.06em; overflow: hidden; background: var(--media); }
.chip-rec img{ width: 100%; height: 100%; object-fit: cover; filter: saturate(0.85) brightness(0.8); }
.chip-rec .rec{ position: absolute; top: 8cqw; left: 9cqw; display: flex; align-items: center; gap: 5cqw; font: 700 13cqw/1 var(--mono); letter-spacing: 0; color: #fff; }
.chip-rec .rec::before{ content: ''; width: 12cqw; height: 12cqw; border-radius: 50%; background: var(--accent-soft); animation: blink 1.4s steps(2) infinite; }
.chip-rec .tc{ position: absolute; bottom: 9cqw; left: 9cqw; font: 600 12cqw/1 var(--mono); letter-spacing: 0; color: rgba(255,255,255,0.85); }
.chip-post{ --r: -3deg; width: 0.54em; height: 0.82em; background: #fff; border-radius: 0.06em; overflow: hidden; display: inline-flex; flex-direction: column; vertical-align: top; margin-top: 0.03em; }
.chip-post .bar{ display: flex; align-items: center; gap: 5cqw; padding: 8cqw; font: 700 11cqw/1 var(--font); letter-spacing: 0; color: var(--ink); }
.chip-post .bar i{ width: 16cqw; height: 16cqw; border-radius: 50%; background: var(--accent); flex: none; }
.chip-post img{ flex: 1; min-height: 0; width: 100%; object-fit: cover; }
.chip-post .foot{ display: flex; justify-content: center; padding: 7cqw 8cqw; }
.chip-post .foot b{ background: var(--accent); color: #fff; border-radius: 3cqw; padding: 5cqw 7cqw; font: 600 10cqw/1 var(--mono); letter-spacing: 0; }
.chip-call{ --r: 3deg; width: 0.9em; height: 0.56em; border-radius: 0.06em; background: var(--media); display: inline-grid; grid-template-columns: 1fr 1fr; gap: 0.03em; padding: 0.07em 0.045em 0.045em; vertical-align: middle; }
.chip-call span{ border-radius: 4cqw; background: #2a3231; display: grid; place-items: center; font: 700 11cqw/1 var(--mono); letter-spacing: 0; color: #fff; }
.chip-call span:first-of-type{ background: var(--accent); }
.chip-call .live{ position: absolute; top: -9cqw; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 3cqw; background: var(--bg); color: var(--ink); border: 1px solid var(--ink); border-radius: 99px; padding: 3cqw 6cqw; font: 700 7cqw/1 var(--mono); letter-spacing: 0; white-space: nowrap; }
.chip-call .live::before{ content: ''; width: 5cqw; height: 5cqw; border-radius: 50%; background: var(--accent); }

/* ---------- Services: homepage list ---------- */
/* On the hero's cream (no dots): a big heading with a teal serif word, then the three offers as big, heavy numbered rows
   between hairlines, each with an outlined arrow button, opening its offer on services.html. Rows rise in one after
   another when the list scrolls into view. */
.svc-home{ background: var(--bg); padding-top: clamp(20px, 3.5vh, 40px); } /* sits close under the hero's brands strip */
.svc-home .shead h2{ font-size: clamp(3rem, 8vw, 7rem); line-height: 0.9; letter-spacing: -0.05em; }
.svc-home .shead h2 .serif{ color: var(--accent); font-size: 1.12em; letter-spacing: -0.02em; }
.svc-index{ max-width: 1200px; margin-inline: auto; border-top: 1px solid var(--line-strong); }
.svc-index li{ border-bottom: 1px solid var(--line-strong); }
.svc-row{
  display: grid; grid-template-columns: 2.6em minmax(0, 1fr) auto; align-items: center; gap: clamp(10px, 2vw, 28px);
  margin: 6px 0; padding: clamp(18px, 2.6vw, 32px) clamp(6px, 1.4vw, 20px); border-radius: 20px;
  transition: background 0.3s, box-shadow 0.3s;
}
.svc-num{ align-self: start; padding-top: 0.7em; font: 700 14px var(--mono); color: var(--accent); }
.svc-name{
  display: grid; gap: 10px; font-size: clamp(26px, 4.2vw, 60px); font-weight: 800; line-height: 0.95; letter-spacing: -0.045em;
  text-wrap: balance; transition: transform 0.4s var(--ease);
}
.svc-name small{ font: 600 13px/1.25 var(--mono); letter-spacing: -0.01em; text-transform: uppercase; color: var(--ink-2); }
.svc-go{
  width: 50px; height: 50px; flex: none; border-radius: 50%; display: grid; place-items: center;
  border: 1.5px solid var(--line-strong); color: var(--ink);
  transition: background 0.3s, color 0.3s, border-color 0.3s, transform 0.4s var(--ease);
}
.svc-go svg{ width: 18px; height: 18px; }
.svc-row:hover, .svc-row:focus-visible{ background: var(--surface); box-shadow: var(--soft-shadow); }
.svc-row:hover .svc-name, .svc-row:focus-visible .svc-name{ transform: translateX(6px); }
.svc-row:hover .svc-go, .svc-row:focus-visible .svc-go{ background: var(--accent); border-color: var(--accent); color: var(--bg); transform: translateX(-4px); }
.js-ready .svc-index li{ opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.8s var(--ease); transition-delay: calc(var(--k, 0) * 110ms); }
.js-ready .svc-index.in li{ opacity: 1; transform: none; }
/* Phones: the number sits above the name so the name gets the full width */
@media (max-width: 599px){
  .svc-row{ grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "num go" "name go"; column-gap: 14px; row-gap: 8px; }
  .svc-num{ grid-area: num; padding-top: 0; }
  .svc-name{ grid-area: name; }
  .svc-go{ grid-area: go; width: 44px; height: 44px; }
  .svc-go svg{ width: 16px; height: 16px; }
}

/* ---------- Services page (services.html) ---------- */
/* The whole page sits on the method section's tint and vertical stripes (the stripes rule is shared with .method) */
.svc-page{ position: relative; background: var(--bg-2); }
.svc-page > section{ position: relative; }
.svc-hero{ padding: calc(var(--header-h) + clamp(40px, 8vh, 96px)) 0 clamp(56px, 9vh, 104px); }
.svc-hero .shead{ margin-bottom: 0; }
.svc-hero h1{ font-size: clamp(2.6rem, 6.4vw, 5.6rem); max-width: 12em; text-wrap: balance; }
.svc-hero h1 .serif{ color: var(--accent); }
.svc-list{ padding-top: 0; }
.svc-stack{ display: grid; gap: 16px; }
/* One card per offer: what it is (and its button) on the left, what's included on the right;
   phones stack the copy, the list, then the button */
.svc-feature{
  display: grid; gap: clamp(22px, 3vw, 44px); align-items: start; scroll-margin-top: 16px; grid-template-areas: "copy" "list" "cta";
  padding: clamp(22px, 3.4vw, 48px); border-radius: 26px; background: var(--surface); box-shadow: var(--soft-shadow);
}
@media (min-width: 900px){
  .svc-feature{ grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); grid-template-rows: auto 1fr; grid-template-areas: "copy list" "cta list"; }
}
.svc-feature .svc-includes{ grid-area: list; }
.svc-feature > .pbtn{ grid-area: cta; justify-self: start; }
.svc-feature:target{ box-shadow: 0 0 0 2px var(--accent), var(--soft-shadow); }
.svc-feature-copy{ grid-area: copy; display: grid; justify-items: start; gap: 16px; }
.svc-kicker{ display: flex; align-items: center; gap: 12px; font: 600 12.5px var(--mono); color: var(--ink-2); }
.svc-feature h2{ font-size: clamp(2.1rem, 4.2vw, 3.8rem); line-height: 0.95; letter-spacing: -0.045em; text-wrap: balance; }
.svc-feature-copy > p:not(.svc-kicker){ max-width: 30em; color: var(--ink-2); font-size: clamp(16px, 1.4vw, 19px); line-height: 1.4; }
/* What each offer includes: a numbered list (01, 02, ...) with hairlines between rows */
.svc-includes{ counter-reset: inc; display: grid; width: 100%; border-top: 1px solid var(--line-strong); }
.svc-includes li{
  counter-increment: inc; display: grid; grid-template-columns: 2.8em minmax(0, 1fr); align-items: baseline;
  padding: 13px 0; border-bottom: 1px solid var(--line); font-size: clamp(15px, 1.3vw, 18px); line-height: 1.35;
}
.svc-includes li::before{ content: counter(inc, decimal-leading-zero); font: 600 12.5px var(--mono); color: var(--accent); }
@media (max-width: 379px){ .svc-feature{ padding: 18px; } }
.svc-ico{ width: 40px; height: 40px; flex: none; border-radius: 12px; display: grid; place-items: center; background: var(--accent-wash); color: var(--accent); }
.svc-ico svg{ width: 20px; height: 20px; }

/* ---------- The work (3D editing timeline) ---------- */
.work{ padding: clamp(80px, 12vh, 140px) 0 clamp(60px, 8vh, 100px); }
.work-head{ display: grid; justify-items: center; gap: 18px; text-align: center; margin-bottom: clamp(36px, 6vh, 64px); }
.work-head h2{ font-size: clamp(2.3rem, 4.8vw, 4.4rem); max-width: 12em; text-wrap: balance; }
.timeline{ position: relative; overflow: hidden; perspective: 1300px; perspective-origin: 50% -20%; padding-bottom: 40px; }
.timeline-inner{ position: relative; transform-origin: 50% 0; transform: rotateX(var(--tl-rx, 14deg)); }
.ruler{ display: grid; grid-template-columns: repeat(10, 1fr); height: 48px; margin: 0 var(--pad); border-bottom: 1px solid var(--line-strong); }
.ruler span{ position: relative; padding: 30px 0 0 6px; border-left: 1.5px solid var(--ink); background: linear-gradient(to right, var(--line-strong) 1px, transparent 1px) 0 100% / 12.5% 14px repeat-x; font: 600 11px/1 var(--mono); color: var(--accent); }
.playhead{ position: absolute; top: 0; bottom: 0; left: 38%; width: 2px; background: var(--accent); z-index: 2; pointer-events: none; }
.playhead::before{ content: ''; position: absolute; top: 30px; left: 50%; transform: translateX(-50%); border: 7px solid transparent; border-top: 9px solid var(--accent); border-bottom: 0; }
.track{ margin-top: 10px; }
.track-inner{ display: flex; width: max-content; animation: marquee 80s linear infinite; }
.track-b .track-inner{ animation-direction: reverse; animation-duration: 70s; }
.track-c .track-inner{ animation-duration: 95s; }
.clip-set{ display: flex; gap: 10px; padding-right: 10px; }
/* A clip on the edit timeline: the video's cover, its file name, who posted it and its views. Display only. */
.clip{
  flex: none; width: var(--w, 260px); height: 112px; position: relative;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: 1fr auto auto; column-gap: 12px;
  padding: 8px 10px 8px 8px; border: 0; border-radius: 10px; background: var(--card); color: var(--ink);
  font: inherit; text-align: left;
}
.clip-thumb{ grid-row: 1 / -1; grid-column: 1; width: 54px; height: 96px; border-radius: 6px; object-fit: cover; background: var(--media); }
.clip-thumb.is-wide{ width: 171px; }
.clip-thumb.is-post{ width: 77px; } /* 4:5 photo posts */
.clip-name{ grid-row: 1; grid-column: 2; align-self: start; font: 600 11px/1.2 var(--mono); color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.clip-who{ grid-row: 2; grid-column: 2; min-height: 1.4em; margin-bottom: 6px; font-size: 12.5px; line-height: 1.4; font-weight: 600; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.clip-views{ grid-row: 3; grid-column: 2; display: flex; align-items: baseline; gap: 6px; font-size: 28px; font-weight: 700; line-height: 1; letter-spacing: -0.03em; color: var(--accent); white-space: nowrap; }
.clip-views small{ font: 600 10px var(--mono); color: var(--ink-2); letter-spacing: 0; text-transform: uppercase; }
.clip-views.is-label{ font-size: 17px; letter-spacing: -0.015em; }
.clip-handle{ grid-row: 1 / -1; grid-column: 3; align-self: center; width: 4px; height: 36px; border-radius: 2px; background: var(--ink-2); }
@media (max-width: 599px){
  .clip{ height: 100px; column-gap: 10px; }
  .clip-thumb{ width: 47px; height: 84px; }
  .clip-thumb.is-wide{ width: 149px; }
  .clip-thumb.is-post{ width: 67px; }
  .clip-views{ font-size: 24px; }
}
.lb-open .track-inner{ animation-play-state: paused; }
/* The wall on the teal band: dark teal clips, light timeline marks */
.band-teal .eyebrow{ background: rgba(250,250,248,0.1); box-shadow: 0 0 0 1px rgba(250,250,248,0.18) inset; color: var(--bg); }
.band-teal .serif{ color: rgba(250,250,248,0.7); }
.band-teal .ruler{ border-bottom-color: rgba(250,250,248,0.28); }
.band-teal .ruler span{ border-left-color: rgba(250,250,248,0.75); background: linear-gradient(to right, rgba(250,250,248,0.3) 1px, transparent 1px) 0 100% / 12.5% 14px repeat-x; color: rgba(250,250,248,0.8); }
.band-teal .playhead{ background: #a6e6ec; }
.band-teal .playhead::before{ border-top-color: #a6e6ec; }
.band-teal .clip{ background: rgba(6, 34, 38, 0.62); color: var(--bg); box-shadow: 0 0 0 1px rgba(250,250,248,0.08) inset; }
.band-teal .clip-name, .band-teal .clip-who, .band-teal .clip-views small{ color: rgba(250,250,248,0.66); }
.band-teal .clip-views{ color: #a6e6ec; }
.band-teal .clip-handle{ background: rgba(250,250,248,0.4); }



/* ---------- FAQ ---------- */
.faq{ padding: clamp(80px, 12vh, 140px) var(--pad); }
.faq-list{ max-width: 780px; margin: 0 auto; border-top: 1px solid var(--line-strong); }
.faq details{ border-bottom: 1px solid var(--line-strong); }
.faq summary{ list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 2px; font-size: clamp(19px, 2vw, 24px); font-weight: 700; letter-spacing: -0.025em; }
.faq summary::-webkit-details-marker{ display: none; }
.faq summary::after{ content: '+'; flex: none; font: 600 22px/1 var(--mono); color: var(--accent); transition: transform 0.3s var(--ease); }
.faq details[open] summary::after{ transform: rotate(45deg); }
.faq summary:hover{ color: var(--accent); }
.faq details p{ padding: 0 2px 24px; max-width: 40em; color: var(--ink-2); line-height: 1.42; }

/* ---------- Next step + contact ---------- */
.next{ position: relative; padding: clamp(80px, 12vh, 140px) 0 clamp(48px, 8vh, 96px); background: var(--bg-2); }
/* The method section's vertical stripes, a little fainter */
.next::before{ content: ''; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(to right, rgba(20,20,18,0.06) 1px, transparent 1px); background-size: calc(100% / 8) 100%; }
.next > .wrap{ position: relative; }
/* Phones: heading, the discovery call card, then email/phone. Desktop: heading and contact details left, card right. */
.next-grid{ display: grid; gap: clamp(40px, 6vw, 96px); align-items: start; grid-template-areas: "copy" "cta" "contact"; }
@media (min-width: 980px){
  .next-grid{ grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr; grid-template-areas: "copy cta" "contact cta"; row-gap: 32px; }
}
.next-copy{ grid-area: copy; }
.next-grid > .apply-cta{ grid-area: cta; }
.next-copy .eyebrow{ margin-bottom: 22px; }
.next-copy h2{ font-size: clamp(2.5rem, 5.4vw, 5.2rem); letter-spacing: -0.05em; text-wrap: balance; }
.next-copy > p{ margin-top: 24px; max-width: 30em; color: var(--ink-2); font-size: clamp(16px, 1.4vw, 19px); }
.next-contact{ grid-area: contact; display: grid; gap: 14px; }
.next-contact span{ display: block; font: 600 11px var(--mono); text-transform: uppercase; color: var(--ink-2); margin-bottom: 2px; }
.next-contact a, .next-contact p{ font-size: clamp(18px, 1.8vw, 22px); font-weight: 700; letter-spacing: -0.02em; }
.next-contact a:hover{ color: var(--accent); }

/* Homepage contact: the card that sends people to the discovery call application */
.apply-cta{ display: grid; align-content: start; gap: 16px; padding: clamp(24px, 3.2vw, 44px); border-radius: 26px; background: var(--surface); box-shadow: var(--soft-shadow); }
.apply-cta .eyebrow{ justify-self: start; }
.apply-cta h3{ font-size: clamp(1.8rem, 3.2vw, 2.6rem); line-height: 1; letter-spacing: -0.04em; }
.apply-cta > p{ color: var(--ink-2); font-size: clamp(16px, 1.3vw, 18px); line-height: 1.4; }
.apply-cta .pbtn{ justify-self: start; margin-top: 8px; }

/* Text fields (discovery call application) */
.field label{ display: block; margin-bottom: 8px; font-size: 15px; font-weight: 600; }
.field input[type="text"], .field input[type="email"], .field input[type="tel"], .field textarea{
  width: 100%; background: var(--bg); border: 1px solid var(--line-strong); border-radius: 12px;
  padding: 14px 15px; font: 600 16px/1.4 var(--font); color: var(--ink); transition: border-color 0.2s, box-shadow 0.2s;
}
.field textarea{ min-height: 128px; resize: vertical; }
.field input:focus, .field textarea:focus{ outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-wash); }
.honeypot{ position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
button.pbtn{ border: 0; cursor: pointer; font: inherit; color: inherit; }
button.pbtn:disabled{ cursor: progress; opacity: 0.75; }

/* ---------- Discovery call application (apply.html) ---------- */
.apply-page{ min-height: 100svh; background: radial-gradient(110% 60% at 50% -10%, rgba(12,107,118,0.12), transparent 60%), var(--bg); }
.apply-top{ max-width: 760px; margin: 0 auto; padding: 18px var(--pad) 0; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.apply-close{ display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 999px; background: rgba(20,20,18,0.06); font-size: 14px; font-weight: 600; color: var(--ink-2); transition: background 0.2s, color 0.2s; }
.apply-close:hover{ background: rgba(20,20,18,0.1); color: var(--ink); }
.apply-close span{ font-size: 18px; line-height: 1; }
.apply-main{ max-width: 760px; margin: 0 auto; padding: clamp(24px, 5vh, 56px) var(--pad) 72px; }
.apply-card{ position: relative; padding: clamp(22px, 4.4vw, 48px); border-radius: 28px; background: var(--surface); box-shadow: var(--soft-shadow); }
.apply-card [hidden]{ display: none !important; }
.apply-intro{ margin-bottom: 26px; }
.apply-title{ margin-top: 16px; font-size: clamp(2.2rem, 6.4vw, 3.8rem); line-height: 0.95; letter-spacing: -0.05em; text-wrap: balance; }
.apply-title .serif{ color: var(--accent); }
.apply-intro p{ margin-top: 14px; max-width: 32em; color: var(--ink-2); font-size: clamp(16px, 1.4vw, 18px); line-height: 1.4; }
/* Progress shows only with JS (without it every question is on one page) */
.apply-progress, .apply-count{ display: none; }
.js .apply-progress{ display: block; height: 4px; border-radius: 4px; background: var(--line); overflow: hidden; }
.apply-progress i{ display: block; width: 14%; height: 100%; border-radius: inherit; background: var(--accent); transition: width 0.45s var(--ease); }
.js .apply-count{ display: block; margin-top: 12px; font: 600 11px var(--mono); text-transform: uppercase; color: var(--ink-2); }
.apply-step{ min-width: 0; margin: 22px 0 0; padding: 0; border: 0; }
.js .apply-step:not(.is-current){ display: none; }
.apply-q{ display: block; width: 100%; margin-bottom: 18px; padding: 0; font-size: clamp(1.35rem, 3.2vw, 1.9rem); font-weight: 700; line-height: 1.18; letter-spacing: -0.03em; outline: none; }
.apply-options{ display: grid; gap: 10px; }
.apply-opt{ position: relative; display: flex; align-items: center; gap: 14px; min-height: 58px; padding: 14px 16px; border: 1.5px solid var(--line-strong); border-radius: 16px; font-size: 16px; font-weight: 600; line-height: 1.3; cursor: pointer; transition: border-color 0.2s, background 0.2s; }
.apply-opt:hover{ border-color: var(--ink-2); }
.apply-opt input{ position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
.apply-dot{ display: grid; place-items: center; width: 22px; height: 22px; flex: none; border: 2px solid var(--line-strong); border-radius: 50%; transition: border-color 0.2s; }
.apply-opt:has(input:checked){ border-color: var(--accent); background: var(--accent-wash); }
.apply-opt input:checked + .apply-dot{ border-color: var(--accent); }
.apply-opt input:checked + .apply-dot::after{ content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); }
.apply-opt:has(input:focus-visible){ outline: 2px solid var(--accent); outline-offset: 2px; }
.apply-other{ margin-top: 14px; }
.js .apply-other:not(.is-open){ display: none; }
.apply-fields{ display: grid; gap: 16px; }
.apply-error{ margin-top: 12px; font-size: 14px; font-weight: 600; color: #b3261e; }
.apply-error:empty{ display: none; }
.apply-fine{ margin-top: 16px; font-size: 13px; line-height: 1.45; color: var(--ink-2); }
.apply-fine a{ color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.apply-nav{ display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 30px; }
.apply-nav .apply-next{ margin-left: auto; }
.apply-back{ padding: 12px 4px; border: 0; background: none; font: 600 15px var(--font); color: var(--ink-2); cursor: pointer; }
.apply-back:hover{ color: var(--ink); }
.apply-done{ display: grid; justify-items: center; gap: 16px; padding: 12px 0; text-align: center; outline: none; }
.apply-done-ico{ display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--accent); color: var(--bg); }
.apply-done-ico svg{ width: 30px; height: 30px; }
.apply-done h2{ font-size: clamp(2rem, 5vw, 3rem); line-height: 1; letter-spacing: -0.045em; }
.apply-done h2 .serif{ color: var(--accent); }
.apply-done p{ max-width: 28em; color: var(--ink-2); font-size: 17px; line-height: 1.45; }

/* ---------- Footer ---------- */
.site-footer{ padding-top: clamp(48px, 8vh, 96px); overflow: clip; }
.footer-cols{ display: grid; gap: 36px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.footer-cols .pill{ margin-bottom: 16px; }
.footer-cols ul{ display: grid; gap: 6px; }
.footer-cols a, .footer-cols li{ font-size: clamp(17px, 1.5vw, 20px); font-weight: 700; letter-spacing: -0.02em; }
.footer-cols a:hover{ color: var(--accent); }
.footer-word{ display: flex; justify-content: center; align-items: center; gap: 0.06em; margin-top: clamp(56px, 10vh, 120px); padding-inline: var(--pad); font-size: 10.6vw; font-weight: 800; letter-spacing: -0.065em; line-height: 0.82; white-space: nowrap; }
.footer-word .fw-mark{ width: 0.6em; height: 0.6em; flex: none; }
.js .footer-word .l{ display: inline-block; transform-origin: 50% 100%; transform: perspective(900px) rotateX(90deg); opacity: 0; transition: transform 1.1s var(--ease), opacity 0.6s ease; transition-delay: calc(var(--i, 0) * 45ms); }
.js .footer-word.in .l{ transform: perspective(900px) rotateX(0deg); opacity: 1; }
.footer-bottom{ display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; padding-block: 28px 84px; font-size: 13px; color: var(--ink-2); }
.footer-bottom a{ color: var(--ink); }
.footer-bottom a:hover{ color: var(--accent); }

/* ---------- Pause-animations toggle ---------- */
.pause-btn{
  position: fixed; left: 14px; bottom: 14px; z-index: 90;
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px 7px 9px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.9);
  background: rgba(250,250,248,0.8); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 8px 22px -12px rgba(20,20,18,0.45); font: 600 12px/1 var(--font); color: var(--ink);
}
.pause-ico{ position: relative; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--ink); flex: none; }
.pause-ico::before, .pause-ico::after{ content: ''; position: absolute; top: 4px; width: 1.5px; height: 5px; background: var(--ink); }
.pause-ico::before{ left: 5px; }
.pause-ico::after{ right: 5px; }
.is-paused .pause-ico::before{ left: 5px; top: 3.5px; width: 0; height: 0; background: none; border-left: 6px solid var(--ink); border-top: 3.5px solid transparent; border-bottom: 3.5px solid transparent; }
.is-paused .pause-ico::after{ display: none; }
@media (max-width: 699px){
  .pause-btn{ padding: 8px; }
  .pause-label{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
}
.is-paused *, .is-paused *::before, .is-paused *::after{ animation-play-state: paused !important; }

/* ---------- About page ---------- */
.about-hero{ padding: calc(var(--header-h) + clamp(40px, 8vh, 96px)) 0 clamp(64px, 10vh, 120px); }
.about-hero-grid{ display: grid; gap: clamp(36px, 5vw, 80px); align-items: center; }
@media (min-width: 900px){ .about-hero-grid{ grid-template-columns: 1.15fr 0.85fr; } }
.about-name{ margin-top: 20px; font-family: var(--serif); font-style: italic; font-weight: 600; font-size: clamp(4rem, 10.5vw, 8.4rem); line-height: 0.88; letter-spacing: -0.03em; color: var(--ink); }
.about-roles{ display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25em 0.6em; margin-top: 20px; font: 600 clamp(11px, 2.9vw, 13.5px)/1.3 var(--mono); text-transform: uppercase; letter-spacing: -0.01em; color: var(--ink-2); }
.about-roles i{ font-style: normal; letter-spacing: -0.08em; color: var(--accent); }
.about-lead{ margin-top: 22px; max-width: 21em; font-size: clamp(19px, 2vw, 26px); font-weight: 700; line-height: 1.2; letter-spacing: -0.025em; text-wrap: balance; }
.about-ctas{ display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
/* Portrait: 4:5, slightly tilted; the photo is cropped to keep his face and hands in frame */
.about-photo{
  position: relative; width: min(100%, 460px); justify-self: center; aspect-ratio: 4 / 5; border-radius: 28px; overflow: hidden;
  background: radial-gradient(110% 120% at 30% 10%, #0f7c88 0%, #0c6b76 40%, #08464e 100%);
  box-shadow: 0 40px 70px -32px rgba(20,20,18,0.5), 0 12px 24px -12px rgba(20,20,18,0.25); transform: rotate(2deg);
}
.about-photo img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; }
.about-tag{ position: absolute; left: 16px; bottom: 16px; padding: 7px 12px 6px; border-radius: 999px; background: rgba(250,250,248,0.94); color: var(--ink); font: 600 11px var(--mono); text-transform: uppercase; }
/* Story: heading on the left (sticky on desktop), the story reads down the right */
.story-grid{ display: grid; gap: clamp(28px, 5vw, 72px); }
@media (min-width: 900px){
  .story-grid{ grid-template-columns: 0.8fr 1.2fr; align-items: start; }
  .story-head{ position: sticky; top: calc(var(--header-h) + 32px); }
}
.story-head{ display: grid; justify-items: start; gap: 18px; }
.story-head h2{ font-size: clamp(2.3rem, 4.8vw, 4.4rem); text-wrap: balance; }
.story-body{ display: grid; gap: clamp(26px, 4vh, 40px); }
.beat{ display: grid; gap: 10px; padding-left: 20px; border-left: 2px solid var(--line-strong); }
.beat-k{ font: 600 11px var(--mono); text-transform: uppercase; color: var(--accent); }
.beat p:not(.beat-k){ font-size: clamp(18px, 1.7vw, 22px); line-height: 1.45; letter-spacing: -0.01em; color: var(--ink); }
/* Faith band */
.faith{ display: grid; justify-items: center; gap: 20px; padding: clamp(80px, 14vh, 160px) var(--pad); text-align: center; }
.faith h2{ font-size: clamp(2.6rem, 6.4vw, 5.4rem); line-height: 0.95; letter-spacing: -0.05em; }
.faith p{ max-width: 33em; font-size: clamp(17px, 1.6vw, 21px); line-height: 1.45; color: rgba(250,250,248,0.88); }
/* Facts + brand strip */
.about-proof .logos{ margin-top: clamp(40px, 7vh, 72px); padding-bottom: 0; }
.about-facts{ display: grid; gap: 14px; grid-template-columns: repeat(2, 1fr); }
.about-facts .fact:last-child:nth-child(odd){ grid-column: 1 / -1; } /* odd count on phones: last card spans the row */
@media (min-width: 700px){
  .about-facts{ grid-template-columns: repeat(3, 1fr); }
  .about-facts .fact:last-child:nth-child(odd){ grid-column: auto; }
}
.fact{ padding: clamp(18px, 2.2vw, 26px); border-radius: 22px; background: var(--surface); box-shadow: var(--soft-shadow); text-align: center; }
.fact b{ display: block; font-size: clamp(2rem, 4vw, 3.2rem); font-weight: 700; line-height: 1; letter-spacing: -0.04em; color: var(--accent); white-space: nowrap; }
.fact span{ display: block; margin-top: 10px; font-size: 14px; line-height: 1.3; color: var(--ink-2); }
.about-next .pbtn{ margin-top: 8px; }
.nav a[aria-current="page"]{ color: var(--ink); }

/* ---------- Legal page ---------- */
.legal{ max-width: 760px; margin-inline: auto; padding: calc(var(--header-h) + 40px) var(--pad) 96px; }
.legal h1{ font-size: clamp(2.4rem, 6vw, 4rem); margin: 18px 0 16px; }
.legal h2{ font-size: 1.4rem; letter-spacing: -0.02em; line-height: 1.2; margin: 40px 0 12px; }
.legal p, .legal li{ color: var(--ink-2); font-weight: 500; margin-bottom: 12px; }
.legal ul{ list-style: disc; padding-left: 1.3em; }
.legal a{ color: var(--accent); text-decoration: underline; }
.legal-note{ border: 1px solid var(--line-strong); background: var(--surface); border-radius: 12px; padding: 16px 18px; margin: 24px 0 8px; font-size: 14px; color: var(--ink-2); }
.legal-note strong{ color: var(--ink); }

/* ---------- Reduced motion: no 3D, no movement ---------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{ animation: none !important; transition: none !important; }
  .js [data-split] .w, .js .footer-word .l, .js .hero h1 .ln{ transform: none !important; opacity: 1 !important; }
  .timeline-inner{ transform: none !important; }
  .logo-marquee, .track{ overflow-x: auto; }
  .pause-btn{ display: none; }
}