/* Conqueror Capital shared stylesheet.
   Section 1 is a verbatim copy of the homepage inline <style> (index.html).
   Keep in sync by hand if the homepage styles change. */
:root {
  --black: #FFFFFF;
  --bone: #141414;
  --bone-dim: rgba(20, 20, 20, 0.7);
  --gold: #d7261e;
  --display: 'Anton', 'Arial Black', sans-serif;
  --serif: 'Newsreader', Georgia, serif;
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 42px;
  --space-gutter: 6vw;
  --radius-none: 0;
  --radius-round: 50%;
  --shadow-card: 0 14px 34px rgba(0, 0, 0, 0.45);
  --dur-fast: 0.25s;
  --dur-slow: 0.5s;
  --ease: ease;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: auto; }

body {
  background: var(--black);
  color: var(--bone);
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.6;
  cursor: none;
  overflow-x: hidden;
}
a, button { cursor: none; }

::selection { background: var(--red, #d7261e); --gold: #ffffff; --bone-dim: rgba(255,255,255,0.88); color: var(--black); }

/* ---------- CURSOR (gold use #1) ---------- */
#cursor-dot, #cursor-ring {
  position: fixed;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 1000;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
#cursor-dot {
  width: 7px; height: 7px;
  background: var(--gold);
}
#cursor-ring {
  width: 34px; height: 34px;
  border: 1px solid rgba(215, 38, 30, 0.65);
  transition: width 0.25s, height 0.25s, border-color 0.25s;
}
body.cursor-hover #cursor-ring {
  width: 56px; height: 56px;
  border-color: rgba(215, 38, 30, 1);
}
@media (hover: none) {
  #cursor-dot, #cursor-ring { display: none; }
  body, a, button { cursor: auto; }
}
/* set by JS whenever the custom cursor is not rendered */
body.plain-cursor, body.plain-cursor a, body.plain-cursor button { cursor: auto; }

/* ---------- NAV ----------
   Scoped to the top-level bar. A bare `nav` selector would also capture
   any <nav> nested elsewhere on the page and pin it to the viewport. */
body > nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 26px 4vw;
  mix-blend-mode: normal;
    background: rgba(255, 255, 255, 0.94);
    border-bottom: 3px solid #d7261e;
}
nav .logo {
  font-family: var(--display);
  font-size: 18px;
  letter-spacing: 0.14em;
  color: var(--bone);
  text-decoration: none;
}
nav .nav-links {
  display: flex;
  align-items: center;
  gap: 34px;
}
nav .contact {
  font-family: var(--serif);
  font-style: italic;
  font-size: 16px;
  color: var(--bone);
  text-decoration: none;
  border-bottom: 1px solid rgba(20, 20, 20, 0.4);
  padding-bottom: 2px;
}
body > nav .nav-sections {
  display: flex;
  align-items: center;
  gap: 30px;
}
body > nav .nav-sections a {
  font-family: var(--display);
  font-size: 13px;
  letter-spacing: 0.2em;
  color: var(--bone);
  text-decoration: none;
  opacity: 0.72;
  transition: opacity 0.25s;
}
body > nav .nav-sections a:hover { opacity: 1; }

/* anchor targets would otherwise land underneath the fixed bar */
#work, #services, #plans, #book { scroll-margin-top: 92px; }

/* between the phone breakpoint and full desktop the three groups crowd.
   The email is the one that can go — it is in the footer as well. */
@media (max-width: 1080px) {
  body > nav .nav-links .contact[href^="mailto"] { display: none; }
  body > nav .nav-sections { gap: 20px; }
  body > nav .nav-sections a { font-size: 12px; letter-spacing: 0.14em; }
}

/* ---------- HERO ---------- */
#hero-pin { height: 100vh; position: relative; }
#hero-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}
#ink-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
#hero-type {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 2;
  /* the bar is fixed and overlays the hero, so its height is reserved here;
     --nav-h is measured in JS, the fallback covers the one-row desktop bar */
  padding-top: var(--nav-h, 84px);
}
#hero-type .wordmark {
  font-family: var(--display);
  font-weight: 400;
  /* --fit1/--fit2 are measured and set by the wordmark fitter in JS.
     The vw fallbacks below are deliberately conservative so the brand
     never overflows even if the fitter has not run yet. */
  font-size: var(--fit1, 12.6vw);
  line-height: 0.86;
  letter-spacing: 0.01em;
  color: var(--bone);
  text-align: center;
  user-select: none;
  white-space: nowrap;
}
#hero-type .wordmark .row2 {
  display: block;
  font-size: var(--fit2, 8.4vw);
  letter-spacing: 0.26em;
  text-indent: 0.26em;
  line-height: 1.15;
}

/* visible to screen readers and crawlers, not to sighted users */
.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;
}
#manifesto-line {
  margin-top: 4.5vh;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(17px, 1.9vw, 26px);
  color: var(--bone-dim);
  min-height: 1.7em;
  text-align: center;
  padding: 0 6vw;
}
#manifesto-line .caret {
  display: inline-block;
  width: 1px;
  height: 1em;
  background: var(--red, #d7261e); --gold: #ffffff; --bone-dim: rgba(255,255,255,0.88);
  vertical-align: -0.15em;
  margin-left: 2px;
  animation: blink 0.9s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

#hero-cta-wrap {
  margin-top: 4vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
#hero-cta {
  font-family: var(--display);
  font-size: clamp(14px, 1.2vw, 17px);
  letter-spacing: 0.26em;
  text-indent: 0.26em;
  color: var(--black);
  background: var(--red, #d7261e); --gold: #ffffff; --bone-dim: rgba(255,255,255,0.88);
  text-decoration: none;
  padding: 18px 42px;
  transition: transform 0.25s, box-shadow 0.25s;
}
#hero-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45);
}
#hero-proof {
  font-family: var(--mono, 'Share Tech Mono', monospace);
  font-size: clamp(12px, 1vw, 13px);
  letter-spacing: 0.16em;
  color: var(--bone-dim);
}

#hero-scrollcue {
  position: absolute;
  bottom: 4vh;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  color: var(--bone-dim);
  transition: opacity 0.5s;
}

/* ---------- KINETIC MANIFESTO ---------- */
#kinetic-pin { height: 100vh; position: relative; background: var(--red, #d7261e); --gold: #ffffff; --bone-dim: rgba(255,255,255,0.88); }
#kinetic-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: var(--red, #d7261e); --gold: #ffffff; --bone-dim: rgba(255,255,255,0.88);
  color: var(--black);
}
.k-word {
  position: absolute;
  font-family: var(--display);
  font-size: clamp(90px, 17vw, 260px);
  line-height: 1;
  letter-spacing: 0.02em;
  opacity: 0;
  transform: scale(2.6);
  user-select: none;
}
.k-word.gold { color: var(--gold); } /* gold use #2 */
/* the kinetic words are wider than a phone screen mid-animation; clip them so the page never pans sideways */
html, body { overflow-x: clip; }
#kinetic-pin { overflow-x: clip; }
/* set by JS when the words advance on a timer instead of per frame */
#kinetic-stage.k-eased .k-word { transition: opacity 0.45s ease, transform 0.45s ease; }
.k-caption {
  position: absolute;
  bottom: 12vh;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(16px, 1.7vw, 22px);
  color: rgba(255, 255, 255, 0.6);
  opacity: 0;
  transition: opacity 0.3s;
  text-align: center;
  padding: 0 8vw;
}
#kinetic-stage .k-index {
  position: absolute;
  top: 12vh;
  font-family: var(--display);
  font-size: 13px;
  letter-spacing: 0.5em;
  color: rgba(255, 255, 255, 0.35);
}

/* ---------- WORK ---------- */
#work { background: var(--black); padding: 16vh 4vw 10vh; }
.sec-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  border-bottom: 1px solid rgba(20, 20, 20, 0.18);
  padding-bottom: 22px;
  margin-bottom: 6vh;
}
.sec-head h2 {
  font-family: var(--display);
  font-size: clamp(38px, 5.4vw, 84px);
  letter-spacing: 0.02em;
  font-weight: 400;
}
.sec-head .count {
  font-family: var(--serif);
  font-style: italic;
  color: var(--bone-dim);
  font-size: 17px;
}

.work-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.5vw;
}
.case {
  position: relative;
  display: block;
  text-decoration: none;
  color: var(--bone);
  border: 1px solid rgba(20, 20, 20, 0.14);
  overflow: hidden;
}
.case .media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #f6f5f3;
}
.case .media img {
  position: absolute;
  width: 130%;
  height: 130%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.55s ease;
  will-change: transform;
}
.case .media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1;
  filter: saturate(0.8) contrast(1.05) brightness(0.62);
  transition: filter 0.5s ease;
}
.case:hover .media video, .case.force-hover .media video {
  filter: saturate(0.95) contrast(1.05) brightness(1);
}
.case .placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--display);
  font-size: clamp(50px, 6vw, 110px);
  color: rgba(20, 20, 20, 0.08);
  letter-spacing: 0.05em;
  transition: color 0.5s;
}
.case:hover .media img, .case.force-hover .media img { opacity: 1; animation: kenburns 7s linear infinite alternate; }
.case:hover .placeholder, .case.force-hover .placeholder { color: rgba(20, 20, 20, 0.0); }
@keyframes kenburns {
  from { transform: translate(0%, 0%) scale(1); }
  to   { transform: translate(-14%, -8%) scale(1.12); }
}
.case .meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 20px 22px;
  border-top: 1px solid rgba(20, 20, 20, 0.14);
}
.case .meta .name {
  font-family: var(--display);
  font-size: 20px;
  letter-spacing: 0.06em;
}
.case .meta .tag {
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  color: var(--bone-dim);
}
.case .result {
  position: absolute;
  top: 20px; left: 22px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 16px;
  color: var(--bone);
  background: rgba(255, 255, 255, 0.55);
  padding: 6px 14px;
  opacity: 0;
  transform: translateY(8px);
  transition: all 0.45s ease 0.1s;
}
.case:hover .result, .case.force-hover .result { opacity: 1; transform: translateY(0); }

/* ---------- SERVICES ---------- */
#services { background: var(--red, #d7261e); --gold: #ffffff; --bone-dim: rgba(255,255,255,0.88); color: var(--black); padding: 16vh 4vw; }
#services .sec-head {
  border-color: rgba(255, 255, 255, 0.2);
}
#services .sec-head .count { color: rgba(255, 255, 255, 0.5); }
.svc {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 4vw;
  padding: 5.5vh 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  align-items: baseline;
}
.svc .left {
  display: flex;
  align-items: baseline;
  gap: 2.2vw;
}
.svc .num {
  font-family: var(--serif);
  font-style: italic;
  font-size: 17px;
  color: rgba(255, 255, 255, 0.45);
  min-width: 3ch;
}
.svc h3 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(26px, 3.4vw, 54px);
  letter-spacing: 0.02em;
  line-height: 1.05;
}
.svc p {
  font-size: clamp(16px, 1.35vw, 20px);
  font-weight: 300;
  color: rgba(255, 255, 255, 0.72);
  max-width: 48ch;
}

/* ---------- PEOPLE ---------- */
#people {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--black);
}
#people .bg {
  position: absolute;
  inset: -12% 0;
  background-size: cover;
  background-position: center;
  will-change: transform;
  filter: brightness(0.85);
}
#people .shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(255, 255, 255,0.92) 0%, rgba(255, 255, 255,0.25) 45%, rgba(255, 255, 255,0.35) 100%);
}
#people .inner {
  position: relative;
  z-index: 2;
  padding: 0 4vw 12vh;
  max-width: 900px;
}
#people h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(34px, 4.6vw, 72px);
  line-height: 1.04;
  letter-spacing: 0.02em;
}
#people p {
  margin-top: 3vh;
  font-size: clamp(17px, 1.5vw, 22px);
  font-weight: 300;
  color: var(--bone-dim);
  max-width: 56ch;
}

/* ---------- BOOK ---------- */
#book { background: var(--red, #d7261e); --gold: #ffffff; --bone-dim: rgba(255,255,255,0.88); color: var(--black); padding: 14vh 4vw; }
#book .sec-head { border-color: rgba(255, 255, 255, 0.2); }
#book .sec-head .count { color: rgba(255, 255, 255, 0.5); }
#book .objections {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3vw;
  margin-bottom: 8vh;
}
#book .obj { border-top: 2px solid var(--black); padding-top: 16px; }
#book .obj-q {
  font-family: var(--display);
  font-size: clamp(17px, 1.6vw, 22px);
  letter-spacing: 0.02em;
  margin-bottom: 10px;
}
#book .obj-a {
  font-size: clamp(14px, 1.15vw, 17px);
  font-weight: 300;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.5;
}
@media (max-width: 760px) {
  #book .objections { grid-template-columns: 1fr; gap: 26px; margin-bottom: 60px; }
}
.book-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5vw;
  align-items: start;
}
.book-col h3 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(22px, 2.4vw, 34px);
  letter-spacing: 0.03em;
  margin-bottom: 10px;
}
.book-col .note {
  font-family: var(--serif);
  font-style: italic;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 34px;
}
#lead-form { display: flex; flex-direction: column; gap: 26px; }
#lead-form .frow { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
#lead-form input,
#lead-form select {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
  padding: 12px 2px;
  font-family: var(--serif);
  font-size: 17px;
  color: var(--black);
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
}
#lead-form select { cursor: pointer; }
#lead-form input::placeholder { color: rgba(255, 255, 255, 0.45); font-style: italic; }
#lead-form input:focus,
#lead-form select:focus {
  outline: none;
  border-bottom-color: var(--black);
}
#lead-form button {
  margin-top: 14px;
  background: var(--black);
  color: var(--bone);
  border: none;
  padding: 20px 30px;
  font-family: var(--display);
  font-size: 15px;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  transition: opacity 0.3s;
}
#lead-form button:hover { opacity: 0.82; }
.iclosed-widget { border: 1px solid rgba(255, 255, 255, 0.16); }

/* TCPA express-written-consent block: must be legible, never pre-checked */
#lead-form .consent {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: start;
  margin-top: 6px;
  font-size: 13.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.68);
  cursor: pointer;
}
#lead-form .consent input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  accent-color: var(--black);
  -webkit-appearance: auto;
  appearance: auto;
  border: none;
  padding: 0;
  flex: none;
}
#lead-form .consent a { color: rgba(255, 255, 255, 0.85); }
.form-note {
  margin-top: 14px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.5);
}

@media (max-width: 900px) {
  .book-grid { grid-template-columns: 1fr; gap: 70px; }
}

/* ---------- PLANS ---------- */
#plans { background: var(--black); padding: 16vh 4vw 14vh; }
.plan-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5vw;
  align-items: stretch;
}
.plan {
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(20, 20, 20, 0.18);
  padding: 40px 34px 34px;
  background: rgba(20, 20, 20, 0.02);
  transition: border-color 0.35s, transform 0.35s;
}
.plan:hover { border-color: rgba(20, 20, 20, 0.4); transform: translateY(-4px); }
.plan.featured {
  border-color: rgba(215, 38, 30, 0.55); /* gold use #4 */
  background: rgba(215, 38, 30, 0.05);
}
.plan.featured:hover { border-color: var(--gold); }
.plan .badge {
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  color: var(--gold);
  margin-bottom: 12px;
  min-height: 1.4em;
}
.plan h3 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(28px, 2.8vw, 40px);
  letter-spacing: 0.05em;
  line-height: 1;
}
.plan .who {
  font-family: var(--serif);
  font-style: italic;
  font-size: 16px;
  color: var(--bone-dim);
  margin-top: 12px;
  padding-bottom: 26px;
  border-bottom: 1px solid rgba(20, 20, 20, 0.14);
}
.plan ul { list-style: none; margin: 26px 0 34px; flex: 1; }
.plan li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 15px;
  font-size: 16.5px;
  font-weight: 300;
  color: rgba(20, 20, 20, 0.82);
  line-height: 1.5;
}
.plan li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.62em;
  width: 12px; height: 1px;
  background: var(--gold);
}
.plan .pick {
  display: block;
  width: 100%;
  background: var(--red, #d7261e); --gold: #ffffff; --bone-dim: rgba(255,255,255,0.88);
  color: var(--black);
  border: none;
  padding: 19px 24px;
  font-family: var(--display);
  font-size: 14px;
  letter-spacing: 0.26em;
  text-indent: 0.26em;
  text-align: center;
  transition: transform 0.25s, box-shadow 0.25s;
}
.plan .pick:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5); }
.plan.featured .pick { background: #d7261e; color: #ffffff; }
/* auto-renewal disclosure — ROSCA requires this to be clear and conspicuous
   at the point of sale, not buried in the terms */
#plans .plans-renewal {
  margin-top: 5vh;
  border-left: 3px solid var(--gold);
  background: rgba(215, 38, 30, 0.07);
  padding: 20px 24px;
  max-width: 90ch;
  font-size: 15.5px;
  line-height: 1.6;
  color: rgba(20, 20, 20, 0.86);
}
#plans .plans-renewal strong { color: var(--bone); font-weight: 400; font-family: var(--display); letter-spacing: 0.04em; }
#plans .plans-renewal a { color: var(--gold); }
#plans .plans-note {
  margin-top: 3vh;
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  color: var(--bone-dim);
  max-width: 70ch;
}

/* ---------- CHECKOUT MODAL ---------- */
#checkout {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 5vh 4vw;
  background: rgba(255, 255, 255, 0.88);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
#checkout[open] { display: flex; }
#checkout .panel {
  position: relative;
  background: var(--red, #d7261e); --gold: #ffffff; --bone-dim: rgba(255,255,255,0.88);
  color: var(--black);
  width: min(560px, 100%);
  max-height: 90vh;
  overflow-y: auto;
  padding: 46px 38px 38px;
}
#checkout h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(26px, 3vw, 38px);
  letter-spacing: 0.03em;
  line-height: 1.05;
}
#checkout .sub {
  font-family: var(--serif);
  font-style: italic;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.6);
  margin: 12px 0 30px;
}
#checkout .close {
  position: absolute;
  top: 14px; right: 16px;
  background: none;
  border: none;
  font-family: var(--display);
  font-size: 22px;
  line-height: 1;
  color: var(--black);
  padding: 10px 14px;
}
#checkout .close:hover { opacity: 0.6; }
#checkout .loading {
  font-family: var(--serif);
  font-style: italic;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.5);
}
body.modal-open { overflow: hidden; }

@media (max-width: 900px) {
  .plan-grid { grid-template-columns: 1fr; gap: 26px; }
  #plans { padding: 13vh 5vw 11vh; }
  .plan { padding: 34px 26px 28px; }
  #checkout .panel { padding: 44px 22px 26px; }
}

/* ---------- FOOTER ---------- */
footer {
  background: var(--black);
  padding: 18vh 4vw 6vh;
  position: relative;
}
footer .big {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(44px, 8.2vw, 150px);
  line-height: 0.98;
  letter-spacing: 0.01em;
  max-width: 12ch;
}
footer .big em {
  font-style: normal;
  color: var(--gold); /* gold use #3 */
}
footer .row {
  margin-top: 9vh;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 30px;
  border-top: 1px solid rgba(20, 20, 20, 0.18);
  padding-top: 4vh;
}
footer a { color: var(--bone); text-decoration: none; }
footer .mail {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(18px, 2vw, 28px);
  border-bottom: 1px solid rgba(20, 20, 20, 0.4);
  padding-bottom: 3px;
}
footer .socials {
  display: flex;
  gap: 34px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 16px;
  color: var(--bone-dim);
}
footer .socials a { color: var(--bone-dim); }
footer .socials a:hover { color: var(--bone); }
footer .legal-disclaimer {
  margin-top: 7vh;
  max-width: 90ch;
  font-family: var(--serif);
  font-size: 12px;
  line-height: 1.7;
  color: rgba(20, 20, 20, 0.7);
}
footer .legal {
  margin-top: 3vh;
  font-size: 12.5px;
  color: rgba(20, 20, 20, 0.7);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
}
footer .legal a { color: rgba(20, 20, 20, 0.7); text-decoration: underline; }
/* a11y 2026-10-11: sister-site credit links were #4D8EFF inline (3.2:1); force 5.8:1 + underline */
footer .site-credit a { color: #1d5fd1 !important; text-decoration: underline !important; }

@media (max-width: 760px) {
  .work-grid { grid-template-columns: 1fr; gap: 5vw; }
  .svc { grid-template-columns: 1fr; gap: 12px; }

  /* ---- NAV: single row, no wrap ---- */
  body > nav { padding: 18px 5vw; }
  nav .logo {
    font-size: 15px;
    letter-spacing: 0.1em;
    white-space: nowrap;
  }
  nav .nav-links { gap: 0; }
  nav .nav-links .contact[href^="mailto"] { display: none; }  /* email lives in footer */
  nav .contact {
    font-size: 15px;
    white-space: nowrap;
    border-bottom: none;
    padding: 6px 0;               /* taller tap target */
  }

  /* ---- full-height sections track the mobile browser bar ---- */
  #hero-pin, #hero-stage,
  #kinetic-pin, #kinetic-stage { height: 100svh; }

  /* ---- HERO ---- */
  #hero-type { padding: var(--nav-h, 110px) 6vw 0; }
  /* keep deferring to the measured fit; the vw values are only the
     no-JS fallback, sized so the long wordmark still cannot overflow */
  #hero-type .wordmark { font-size: var(--fit1, 21vw); }
  #hero-type .wordmark .row2 { font-size: var(--fit2, 13.5vw); }
  #manifesto-line { font-size: 16px; margin-top: 3.5vh; }
  #hero-cta-wrap { margin-top: 5vh; width: 100%; }
  #hero-cta {
    width: 100%;
    text-align: center;
    padding: 20px 24px;           /* 44px+ tap target */
    font-size: 15px;
  }
  #hero-proof {
    font-size: 12px;
    letter-spacing: 0.06em;
    line-height: 1.9;
    text-align: center;
    padding: 0 4vw;
  }
  #hero-scrollcue { bottom: 2.5vh; }

  /* ---- KINETIC: group word + caption tighter ---- */
  #kinetic-stage .k-index { top: 16vh; }
  .k-word { font-size: 17vw; }
  .k-caption { bottom: 20vh; font-size: 16px; padding: 0 9vw; }

  /* ---- SECTION HEADS clear the floating nav, stack cleanly ---- */
  #work, #services, #book { padding-top: 13vh; }
  .sec-head { flex-direction: column; align-items: flex-start; gap: 8px; }
  .sec-head h2 { font-size: 14vw; line-height: 0.94; }
  .sec-head .count { font-size: 15px; }

  /* ---- SERVICES ---- */
  .svc .left { gap: 5vw; }
  .svc h3 { font-size: 8.5vw; }
  .svc p { font-size: 16px; }

  /* ---- PEOPLE ---- */
  #people h2 { font-size: 10vw; }
  #people p { font-size: 16px; }

  /* ---- BOOK / FORM: bigger tap targets ---- */
  #lead-form .frow { grid-template-columns: 1fr; gap: 26px; }
  #lead-form input, #lead-form select { font-size: 16px; padding: 14px 2px; }  /* 16px stops iOS zoom */
  #lead-form button { padding: 22px 30px; font-size: 15px; }
  .book-col h3 { font-size: 7vw; }
  .iclosed-widget { height: 560px; }

  /* ---- FOOTER ---- */
  footer { padding: 12vh 5vw 8vh; }
  footer .big { font-size: 13.5vw; line-height: 1.0; }
  footer .row { flex-direction: column; align-items: flex-start; gap: 20px; }
  footer .mail { font-size: 20px; }
  footer .legal-disclaimer { font-size: 12px; }
}

@media (max-width: 380px) {
  #hero-proof { font-size: 12px; letter-spacing: 0.03em; white-space: normal; line-height: 1.5; }
  nav .logo, nav .contact { font-size: 14px; }
}

/* ---------- TAP-TO-PLAY (phones / data saver) ----------
   The clip is not downloaded until the card is tapped, so the card has to
   say so. Badge disappears once playback starts. */
.case.tap-to-play .media::after {
  content: "\25B6  TAP TO PLAY";
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  z-index: 3;
  font-family: var(--display);
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--bone);
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(20, 20, 20, 0.3);
  padding: 9px 16px;
  white-space: nowrap;
  pointer-events: none;
}
.case.tap-to-play.playing .media::after { content: none; }
.case.tap-to-play .media video { filter: saturate(0.9) contrast(1.05) brightness(0.9); }

/* ---------- STICKY ACTION BAR (phones) ----------
   The page is tall and the two calls to action sit far apart, so on a
   phone they travel with the visitor. */
#action-bar { display: none; }

@media (max-width: 760px) {
  #action-bar {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 90;
    padding: 10px 4vw calc(10px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, 0.93);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-top: 1px solid rgba(20, 20, 20, 0.16);
  }
  #action-bar a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    font-family: var(--display);
    font-size: 14px;
    letter-spacing: 0.18em;
    text-indent: 0.18em;
    text-decoration: none;
  }
  #action-bar .primary { background: var(--red, #d7261e); --gold: #ffffff; --bone-dim: rgba(255,255,255,0.88); color: var(--black); }
  #action-bar .call {
    padding: 0 22px;
    color: var(--bone);
    border: 1px solid rgba(20, 20, 20, 0.45);
  }
  /* clear the bar so nothing sits underneath it */
  body { padding-bottom: 78px; }
  body.modal-open #action-bar { display: none; }

  /* blend modes are expensive to composite, and the bar can sit over either
     a dark or a bone section — a scrim is cheaper and always legible */
  body > nav {
    mix-blend-mode: normal;
    background: linear-gradient(to bottom, rgba(255, 255, 255,0.96) 0%, rgba(255, 255, 255,0.9) 70%, rgba(255, 255, 255,0.62) 100%);
    /* logo and phone share row one, the section links get row two */
    flex-wrap: wrap;
    row-gap: 4px;
    padding-bottom: 8px;
  }
  body > nav .logo, body > nav .contact { color: var(--bone); }
  body > nav .logo { order: 1; }
  body > nav .nav-links { order: 2; }
  body > nav .nav-sections {
    order: 3;
    width: 100%;
    justify-content: space-between;
    gap: 0;
    padding-top: 7px;
    border-top: 1px solid rgba(20, 20, 20, 0.16);
  }
  body > nav .nav-sections a {
    font-size: 12px;
    letter-spacing: 0.08em;
    padding: 12px 0;      /* keeps the tap target usable */
    opacity: 0.85;
  }
  /* the bar is two rows tall here */
  #work, #services, #plans, #book { scroll-margin-top: 124px; }
}

/* ---------- LANGUAGE TOGGLE (EN | FR) ---------- */
body > nav .lang {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--display);
  font-size: 13px;
  letter-spacing: 0.2em;
  color: var(--bone);
}
body > nav .lang a { color: var(--bone); text-decoration: none; opacity: 0.72; transition: opacity 0.25s; }
body > nav .lang a:hover { opacity: 1; }
body > nav .lang .sep { opacity: 0.4; }
@media (max-width: 760px) {
  body > nav .lang { margin-left: 12px; font-size: 12px; letter-spacing: 0.08em; }
  /* the other language is a 44px tap target that does not grow the bar */
  body > nav .lang a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    margin-block: -8px;
    opacity: 0.9;
    border: 1px solid rgba(20, 20, 20, 0.3);
  }
}

/* ---------- RENDER BUDGET ----------
   Below-the-fold sections skip layout/paint until they are near the
   viewport. Intrinsic sizes keep the scrollbar honest so nothing jumps. */
#work    { content-visibility: auto; contain-intrinsic-size: auto 1400px; }
#services{ content-visibility: auto; contain-intrinsic-size: auto 1200px; }
#plans   { content-visibility: auto; contain-intrinsic-size: auto 900px; }

/* ---------- REDUCED MOTION ----------
   The JS animation loops also read this query and stop scheduling frames. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  #cursor-dot, #cursor-ring { display: none; }
  body, a, button { cursor: auto; }
  .case:hover .media img, .case.force-hover .media img { animation: none; }
  .k-word { opacity: 1; transform: none; position: static; }
  .k-word:not(:first-of-type) { display: none; }
  .k-caption[data-i="0"] { opacity: 1; }
  #manifesto-line .caret { animation: none; opacity: 0; }
  #people .bg { transform: none !important; }
}

/* =====================================================================
   INNER PAGES (service pages, case studies, about)
   Everything below applies only to pages with <body class="page">.
   ===================================================================== */
body.page, body.page a, body.page button { cursor: auto; }

:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.on-bone :focus-visible { outline-color: var(--black); }
.skip-link:focus { position: fixed; top: 10px; left: 10px; width: auto; height: auto; clip: auto; margin: 0; padding: 10px 16px; background: var(--red, #d7261e); --gold: #ffffff; --bone-dim: rgba(255,255,255,0.88); color: var(--black); z-index: 3000; }

.page-hero { padding: calc(var(--nav-h, 84px) + 12vh) 4vw 10vh; background: var(--black); }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 10px; font-style: italic; font-size: 15px; color: var(--bone-dim); margin-bottom: 4vh; }
.crumbs li + li::before { content: "/"; margin-right: 10px; opacity: 0.5; }
.crumbs a { color: var(--bone-dim); }
.crumbs a:hover { color: var(--bone); }
.page-hero h1 { font-family: var(--display); font-weight: 400; font-size: clamp(40px, 6.4vw, 104px); line-height: 1; letter-spacing: 0.01em; max-width: 16ch; }
.page-hero .lede { margin-top: 4vh; font-size: clamp(18px, 1.6vw, 24px); font-weight: 300; color: var(--bone-dim); max-width: 60ch; }
.page-hero .kicker { font-family: var(--display); font-size: 13px; letter-spacing: 0.3em; color: var(--gold); margin-bottom: 2vh; }

.btn { display: inline-block; font-family: var(--display); font-size: 15px; letter-spacing: 0.24em; text-indent: 0.24em; text-decoration: none; padding: 18px 36px; background: var(--red, #d7261e); --gold: #ffffff; --bone-dim: rgba(255,255,255,0.88); color: var(--black); transition: transform 0.25s, box-shadow 0.25s; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(0,0,0,0.45); }
.btn.dark { background: var(--black); color: var(--bone); }
.cta-row { margin-top: 5vh; display: flex; flex-wrap: wrap; gap: 18px 28px; align-items: center; }
.cta-row .call-link { color: var(--bone); font-style: italic; }

.band { padding: 12vh 4vw; background: var(--black); }
.band.on-bone { background: var(--red, #d7261e); --gold: #ffffff; --bone-dim: rgba(255,255,255,0.88); color: var(--black); }
.band.on-bone .sec-head { border-color: rgba(255, 255, 255,0.2); }
.band.on-bone .sec-head .count { color: rgba(255, 255, 255,0.5); }
.prose { max-width: 70ch; }
.prose p, .prose ul { font-size: clamp(17px, 1.3vw, 20px); font-weight: 300; margin-bottom: 1.2em; }
.prose ul { padding-left: 1.2em; }
.prose li { margin-bottom: 0.5em; }
.prose h3 { font-family: var(--display); font-weight: 400; font-size: clamp(22px, 2.2vw, 32px); letter-spacing: 0.02em; margin: 1.6em 0 0.5em; }
.band a { color: inherit; }
/* .band a would otherwise win over .btn and paint bone text on the bone button. */
.band .btn { color: var(--black); }
.band .btn.dark, .band.on-bone .btn { background: var(--black); color: var(--bone); }
.band.on-bone .prose p, .band.on-bone .prose li { color: rgba(255, 255, 255,0.78); }
.band:not(.on-bone) .prose p, .band:not(.on-bone) .prose li { color: rgba(20, 20, 20,0.82); }

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3vw; }
.steps .obj-q, .steps h3 { font-family: var(--display); font-weight: 400; font-size: clamp(18px, 1.7vw, 24px); letter-spacing: 0.02em; margin-bottom: 10px; }
.steps > div { border-top: 2px solid currentColor; padding-top: 16px; }
.steps p { font-weight: 300; font-size: 16.5px; line-height: 1.55; opacity: 0.8; }

.faq details { border-bottom: 1px solid rgba(255, 255, 255,0.18); }
.band:not(.on-bone) .faq details { border-color: rgba(20, 20, 20,0.18); }
.faq summary { padding: 22px 0; cursor: pointer; font-family: var(--display); font-size: clamp(18px, 1.7vw, 24px); letter-spacing: 0.02em; list-style: none; display: flex; justify-content: space-between; gap: 20px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { margin: 0 0 22px; font-weight: 300; max-width: 70ch; opacity: 0.82; }

.related { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 2vw; }
.related a { display: block; border: 1px solid rgba(20, 20, 20,0.18); padding: 26px 24px; text-decoration: none; color: var(--bone); transition: border-color 0.3s; }
.related a:hover { border-color: var(--gold); }
.related .t { font-family: var(--display); font-size: 20px; letter-spacing: 0.04em; display: block; }
.related .d { font-style: italic; font-size: 15px; color: var(--bone-dim); }
.band.on-bone .related a { color: var(--black); border-color: rgba(255, 255, 255,0.2); }
.band.on-bone .related .d { color: rgba(255, 255, 255,0.55); }

.case-media { max-width: 1100px; border: 1px solid rgba(20, 20, 20,0.14); background: #f6f5f3; }
.case-media video { display: block; width: 100%; height: auto; }
.facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5vw; margin-top: 6vh; max-width: 1100px; }
.facts div { border-top: 1px solid rgba(20, 20, 20,0.3); padding-top: 14px; }
.facts dt { font-style: italic; font-size: 15px; color: var(--bone-dim); }
.facts dd { font-family: var(--display); font-size: clamp(20px, 2vw, 28px); letter-spacing: 0.02em; }
.work-grid .case .media img.poster { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 1; animation: none; }

.note-small { font-style: italic; font-size: 14px; opacity: 0.6; margin-top: 3vh; max-width: 80ch; }
footer .site-links { margin-top: 5vh; display: flex; flex-wrap: wrap; gap: 10px 26px; font-size: 15px; }
footer .site-links a { color: var(--bone-dim); }
footer .site-links a:hover { color: var(--bone); }

@media (max-width: 760px) {
  .page-hero { padding: calc(var(--nav-h, 124px) + 8vh) 5vw 8vh; }
  .page-hero h1 { font-size: 12vw; }
  .band { padding: 9vh 5vw; }
  .steps, .facts { grid-template-columns: 1fr; gap: 26px; }
  .btn { display: block; text-align: center; }
  body.page > nav .nav-sections a { font-size: 11px; letter-spacing: 0.04em; }
}

/* Text contrast >= 4.5:1 on the red bands and in the footer (PageSpeed a11y, 2026-10-11). */
.band.on-bone .sec-head .count, #services .sec-head .count, #book .sec-head .count,
.band.on-bone .prose p, .band.on-bone .prose li, .band.on-bone .related .d { color: #fff; }
.band.on-bone .steps p, .band.on-bone .faq details p, .band.on-bone .note-small { opacity: 1; color: #fff; }
body.page footer .legal, body.page footer .legal a, body.page footer .legal span,
body.page footer .legal-disclaimer, body.page footer .legal-disclaimer span { color: #595959 !important; opacity: 1 !important; }
.band:not(.on-bone) .note-small { opacity: .85; }