/* ═══════════════════════════════════════════════════════════════
   ClutchSOS — Shared Stylesheet
   Definitive Direction · Charcoal / Stone / Cyan
   Source of truth: clutchsos-definitive homepage (v.02)
   ═══════════════════════════════════════════════════════════════ */

/* ── TOKENS ── */
:root {
  --dark:       #1c1e24;
  --dark-mid:   #242830;
  --dark-light: #2c3038;
  --stone:      #b8a888;
  --stone-pale: #d4c9b0;
  --cream:      #f5f1ea;
  --warm-white: #faf8f4;
  --ink:        #2c2820;
  --muted:      #5a544a;
  --rule:       #c8bfa8;
  --cyan:       #01B2EA;
  --cyan-dim:   rgba(1,178,234,0.15);
  --prince:     #9D4EDD;

  --font-display: 'Playfair Display', Georgia, serif;
  --font-body:    'Crimson Pro', Georgia, serif;
  --font-ui:      'Montserrat', Arial, sans-serif;
}

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  background: var(--dark);
  color: var(--cream);
  font-size: 18px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }

/* Skip-to-content — accessibility, visible only when keyboard-focused.
   Allows screen-reader and keyboard users to jump past the nav. */
.skip-link {
  position: absolute;
  top: -100px; left: 0;
  z-index: 200;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  text-decoration: none;
  padding: 12px 20px;
  border: 1px solid var(--rule);
  border-radius: 3px;
  transition: top 0.15s;
}
.skip-link:focus {
  top: 12px; left: 12px;
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}

/* ── UTILITY ── */
.label {
  font-family: var(--font-ui);
  font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--cyan);
}
.stone-rule { display: block; width: 36px; height: 2px; background: var(--stone); margin: 14px 0 20px; }
.stone-rule-center { margin: 14px auto 20px; }

/* ── BUTTONS ── */
.btn {
  display: inline-block; font-family: var(--font-ui);
  font-size: 12.5px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  text-decoration: none; padding: 14px 28px;
  border-radius: 3px; cursor: pointer;
  transition: all 0.2s ease; border: none;
}
.btn-primary  { background: var(--cream); color: var(--ink); }
.btn-primary:hover { background: #e8e4dc; }
.btn-outline  { background: transparent; color: var(--cyan); border: 1px solid var(--cyan-dim); }
.btn-outline:hover { border-color: var(--cyan); background: rgba(1,178,234,0.06); }
.btn-stone    { background: var(--stone); color: var(--ink); }
.btn-stone:hover { background: #9a8e74; }
.btn-lg { padding: 16px 36px; font-size: 13.5px; }

/* ── NAV ── */
nav.site-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 60px; height: 72px;
  background: var(--warm-white);
  border-bottom: 1px solid rgba(212,201,176,0.5);
}
.site-nav a.nav-logo { display: block; }
.site-nav a.nav-logo img { height: 52px; width: auto; }
.nav-links { display: flex; align-items: center; gap: 36px; list-style: none; }
.nav-links a {
  font-family: var(--font-ui); font-size: 14px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink); text-decoration: none; transition: color 0.2s;
  position: relative;
}
.nav-links a:hover { color: var(--cyan); }
.nav-links a.active { color: var(--cyan); }
.nav-links a.active::after {
  content: ''; position: absolute; bottom: -6px; left: 0; right: 0;
  height: 1px; background: var(--cyan); opacity: 0.6;
}
.nav-cta { margin-left: 16px; }

/* ── PAGE-LEVEL SPACER (content sits below fixed nav) ── */
main { padding-top: 72px; }
main.no-hero-padding { padding-top: 72px; }

/* ═══════════════════════════════════════════════════════════════
   HERO PATTERNS
   ═══════════════════════════════════════════════════════════════ */

/* Full-height homepage hero */
.hero {
  min-height: 100vh; display: flex; flex-direction: column;
  justify-content: center; position: relative;
  padding: 120px 60px 80px; overflow: hidden;
}
.hero-bg {
  position: absolute; inset: 0;
  background: linear-gradient(160deg, #1c1e24 0%, #22262e 60%, #1c1e24 100%);
}
.hero-bg::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(212,201,176,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(212,201,176,0.03) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 0%, transparent 100%);
}
.hero-bg::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: 58px;
  width: 1px;
  background: linear-gradient(to bottom, transparent 10%, rgba(1,178,234,0.12) 40%, rgba(1,178,234,0.12) 60%, transparent 90%);
}

.hero-content { position: relative; z-index: 1; max-width: 680px; }

.hero-eyebrow {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 32px;
}
.hero-eyebrow::before {
  content: ''; display: block; width: 28px; height: 1px; background: var(--stone); opacity: 0.5;
}

.hero h1 {
  font-family: var(--font-display);
  font-size: clamp(42px, 5.5vw, 72px);
  font-weight: 700; line-height: 1.08;
  letter-spacing: -0.02em; color: var(--cream);
  margin-bottom: 28px;
}
.hero h1 em { font-style: italic; color: var(--stone); }

.hero-subhead {
  font-family: var(--font-body); font-size: 20px; font-weight: 400;
  line-height: 1.65; color: rgba(245,241,234,0.85);
  max-width: 520px; margin-bottom: 44px;
}

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

.hero-stat-row {
  position: relative; z-index: 1;
  display: flex; gap: 56px; margin-top: 80px;
  padding-top: 40px;
  border-top: 1px solid rgba(212,201,176,0.15);
  flex-wrap: wrap;
}
.hero-stat-num {
  font-family: var(--font-display); font-size: 34px;
  font-weight: 600; color: var(--stone);
  display: block; line-height: 1; margin-bottom: 6px;
}
.hero-stat-label {
  font-family: var(--font-ui); font-size: 12px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(245,241,234,0.7);
}

/* Compact hero for interior pages */
.page-hero {
  position: relative; overflow: hidden;
  padding: 140px 60px 100px;
  background: var(--dark);
}
.page-hero::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(160deg, #1c1e24 0%, #22262e 60%, #1c1e24 100%);
}
.page-hero::after {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(212,201,176,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(212,201,176,0.03) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 0%, transparent 100%);
}
.page-hero-accent {
  position: absolute;
  top: 0; bottom: 0; left: 58px;
  width: 1px; z-index: 1;
  background: linear-gradient(to bottom, transparent 10%, rgba(1,178,234,0.12) 40%, rgba(1,178,234,0.12) 60%, transparent 90%);
}
.page-hero-inner { position: relative; z-index: 2; max-width: 780px; }
.page-hero-eyebrow {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 32px;
}
.page-hero-eyebrow::before {
  content: ''; display: block; width: 28px; height: 1px;
  background: var(--stone); opacity: 0.5;
}
.page-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(40px, 5vw, 64px);
  font-weight: 700; line-height: 1.08;
  letter-spacing: -0.02em; color: var(--cream);
  margin-bottom: 24px;
}
.page-hero h1 em { font-style: italic; color: var(--stone); }
.page-hero-subhead {
  font-family: var(--font-body); font-size: 20px; font-weight: 400;
  line-height: 1.65; color: rgba(245,241,234,0.85);
  max-width: 620px;
}

/* ═══════════════════════════════════════════════════════════════
   QUOTE BAND
   ═══════════════════════════════════════════════════════════════ */
.quote-band {
  background: var(--dark-mid);
  border-top: 1px solid rgba(212,201,176,0.1);
  border-bottom: 1px solid rgba(212,201,176,0.1);
  padding: 52px 60px;
}
.quote-band-inner { max-width: 820px; margin: 0 auto; text-align: center; }
.quote-band blockquote {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.4vw, 28px);
  font-style: italic; font-weight: 400;
  line-height: 1.55; color: var(--cream);
}
.quote-band blockquote em { font-style: normal; color: var(--stone); }

/* ═══════════════════════════════════════════════════════════════
   SECTION HEADERS
   ═══════════════════════════════════════════════════════════════ */
.section-header { margin-bottom: 56px; max-width: 780px; }
.section-header.centered { margin-left: auto; margin-right: auto; text-align: center; }
.section-header.centered .stone-rule { margin-left: auto; margin-right: auto; }
.section-header h2 {
  font-family: var(--font-display);
  font-size: clamp(32px, 3.5vw, 48px); font-weight: 700;
  line-height: 1.15; letter-spacing: -0.02em;
  margin-top: 4px;
}
.section-header h2 em { font-style: italic; }
.section-header p {
  font-family: var(--font-body); font-size: 19px;
  max-width: 560px; margin-top: 16px; line-height: 1.65;
}
/* Tone by parent section */
section.on-dark .section-header h2 { color: var(--cream); }
section.on-dark .section-header h2 em { color: var(--stone); }
section.on-dark .section-header p { color: rgba(245,241,234,0.82); }
section.on-cream .section-header h2,
section.on-warm .section-header h2 { color: var(--ink); }
section.on-cream .section-header h2 em,
section.on-warm .section-header h2 em { color: var(--muted); }
section.on-cream .section-header p,
section.on-warm .section-header p { color: var(--muted); }

section.on-dark  { background: var(--dark); color: var(--cream); padding: 100px 60px; }
section.on-cream { background: var(--cream); color: var(--ink); padding: 100px 60px; }
section.on-warm  { background: var(--warm-white); color: var(--ink); padding: 100px 60px; }
section.on-dark-mid { background: var(--dark-mid); color: var(--cream); padding: 100px 60px; }

/* ═══════════════════════════════════════════════════════════════
   SERVICES ASIDE — "BY PRIVATE INQUIRY" CLOSING NOTE
   Sits at the bottom of the homepage services section. More
   readable than a buried footnote, less weight than a full card.
   Acknowledges that the firm handles additional sensitive
   engagements without naming them on the public site.
   ═══════════════════════════════════════════════════════════════ */
.services-aside {
  max-width: 760px;
  margin-top: 56px;
  padding-top: 36px;
  border-top: 1px solid var(--rule);
}
.services-aside .label { display: block; margin-bottom: 6px; }
.services-aside .stone-rule { margin: 10px 0 18px; }
.services-aside p {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.65;
  color: var(--ink);
}

/* ═══════════════════════════════════════════════════════════════
   SERVICES GRID
   ═══════════════════════════════════════════════════════════════ */
.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.service-card { background: var(--cream); padding: 44px 40px; transition: background 0.2s; }
.service-card:hover { background: #ede8df; }
.service-numeral {
  font-family: var(--font-display); font-style: italic;
  font-size: 12px; color: var(--cyan);
  letter-spacing: 0.05em; display: block; margin-bottom: 18px;
}
.service-card h3 {
  font-family: var(--font-display); font-size: 22px; font-weight: 600;
  color: var(--ink); margin-bottom: 8px; line-height: 1.25;
}
.service-stone-rule { display: block; width: 36px; height: 2px; background: var(--stone); margin: 12px 0 18px; }
.service-card p { font-family: var(--font-body); font-size: 17px; color: var(--muted); line-height: 1.65; }
.service-card a.service-link {
  display: block; text-align: right;
  font-size: 22px; margin-top: 20px;
  color: var(--stone); text-decoration: none;
  transition: color 0.2s;
}
.service-card a.service-link:hover { color: var(--cyan); }

/* ═══════════════════════════════════════════════════════════════
   APPROACH / TWO-COLUMN TEXT + PILLARS
   ═══════════════════════════════════════════════════════════════ */
.approach {
  background: var(--dark); padding: 100px 60px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center;
}
.approach-text .label { display: block; margin-bottom: 18px; }
.approach-text h2 {
  font-family: var(--font-display); font-size: clamp(28px, 3vw, 44px);
  font-weight: 700; color: var(--cream); line-height: 1.15;
  letter-spacing: -0.02em; margin-bottom: 24px;
}
.approach-text h2 em { font-style: italic; color: var(--stone); }
.approach-text p { font-family: var(--font-body); font-size: 18px; color: rgba(245,241,234,0.9); line-height: 1.75; margin-bottom: 16px; }

.pillars { display: flex; flex-direction: column; gap: 2px; }
.pillar {
  background: var(--dark-mid); padding: 26px 30px;
  border-left: 2px solid transparent; transition: border-color 0.2s, background 0.2s;
}
.pillar:hover { border-left-color: var(--cyan); background: var(--dark-light); }
.pillar-title {
  font-family: var(--font-ui); font-size: 12.5px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--stone); margin-bottom: 8px;
}
.pillar p { font-family: var(--font-body); font-size: 18px; color: rgba(245,241,234,0.84); line-height: 1.6; }

/* ═══════════════════════════════════════════════════════════════
   TESTIMONIALS
   ═══════════════════════════════════════════════════════════════ */
.testimonials-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; margin-top: 56px; }
.testimonial-card { background: var(--warm-white); padding: 48px 44px; position: relative; }
.testimonial-card::before {
  content: '\201C'; position: absolute; top: 24px; left: 38px;
  font-family: var(--font-display); font-size: 60px; line-height: 1;
  color: var(--stone); opacity: 0.5;
}
.testimonial-card blockquote {
  font-family: var(--font-body); font-size: 19px; font-style: italic;
  color: var(--ink); line-height: 1.65; padding-top: 28px;
  border-top: 1px solid var(--rule); margin-top: 28px;
}
.testimonial-meta { margin-top: 24px; }
.testimonial-name { font-family: var(--font-ui); font-size: 12.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); }
.testimonial-title { font-family: var(--font-ui); font-size: 12px; color: var(--muted); margin-top: 4px; }

/* ═══════════════════════════════════════════════════════════════
   LEAD MAGNET / GATE FORM
   ═══════════════════════════════════════════════════════════════ */
.lead-magnet {
  background: var(--dark-mid); padding: 100px 60px;
  border-top: 1px solid rgba(212,201,176,0.1);
}
.lead-magnet-inner {
  display: grid; grid-template-columns: 1fr 1fr; gap: 80px;
  align-items: center; max-width: 1100px; margin: 0 auto;
}
.brief-mockup {
  background: var(--dark); border: 1px solid rgba(212,201,176,0.15);
  padding: 48px 44px; position: relative;
}
.brief-mockup::before {
  content: ''; position: absolute; top: -1px; left: 40px;
  width: 48px; height: 2px; background: var(--cyan); opacity: 0.6;
}
.brief-overline { font-family: var(--font-ui); font-size: 11.5px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--cyan); opacity: 0.95; margin-bottom: 16px; }
.brief-title { font-family: var(--font-display); font-size: 26px; font-weight: 700; color: var(--cream); line-height: 1.2; margin-bottom: 6px; }
.brief-title span { color: var(--stone); font-style: italic; }
.brief-subtitle { font-family: var(--font-body); font-style: italic; font-size: 15.5px; color: rgba(245,241,234,0.78); margin-bottom: 28px; }
.brief-contents { list-style: none; }
.brief-contents li {
  font-family: var(--font-body); font-size: 16px; color: rgba(245,241,234,0.82);
  padding: 10px 0; border-bottom: 1px solid rgba(212,201,176,0.08);
  display: flex; gap: 12px; align-items: flex-start;
}
.brief-contents li::before { content: '—'; color: var(--stone); flex-shrink: 0; opacity: 0.5; margin-top: 1px; }

.lead-copy .label { display: block; margin-bottom: 18px; }
.lead-copy h2 {
  font-family: var(--font-display); font-size: clamp(28px, 3vw, 40px);
  font-weight: 700; color: var(--cream); line-height: 1.15;
  letter-spacing: -0.02em; margin-bottom: 18px;
}
.lead-copy h2 em { font-style: italic; color: var(--stone); }
.lead-copy p { font-family: var(--font-body); font-size: 18px; color: rgba(245,241,234,0.85); line-height: 1.75; margin-bottom: 28px; }

.gate-form { display: flex; flex-direction: column; gap: 10px; }
.gate-form input, .gate-form select, .gate-form textarea {
  background: rgba(255,255,255,0.04); border: 1px solid rgba(212,201,176,0.18);
  border-radius: 3px; padding: 13px 16px;
  font-family: var(--font-body); font-size: 16px;
  color: var(--cream); outline: none; transition: border-color 0.2s; width: 100%;
}
.gate-form input::placeholder,
.gate-form textarea::placeholder { color: rgba(245,241,234,0.7); }
.gate-form input:focus,
.gate-form select:focus,
.gate-form textarea:focus { border-color: rgba(1,178,234,0.35); }
.gate-form-row { display: flex; gap: 10px; }
.gate-form-row input,
.gate-form-row select { flex: 1; }
.gate-disclaimer { font-family: var(--font-ui); font-size: 12px; color: rgba(245,241,234,0.6); line-height: 1.6; margin-top: 6px; }

/* Gate form on light surfaces (for brief.html on warm-white) */
.gate-form.light input,
.gate-form.light select,
.gate-form.light textarea {
  background: rgba(255,255,255,0.6);
  border: 1px solid var(--rule);
  color: var(--ink);
}
.gate-form.light input::placeholder,
.gate-form.light textarea::placeholder { color: rgba(44,40,32,0.6); }
.gate-form.light input:focus,
.gate-form.light select:focus,
.gate-form.light textarea:focus { border-color: var(--cyan); }
.gate-form.light .gate-disclaimer { color: var(--muted); }

/* ═══════════════════════════════════════════════════════════════
   ASSESSMENT CTA
   ═══════════════════════════════════════════════════════════════ */
.assessment-cta {
  background: var(--cream); padding: 80px 60px; text-align: center;
  border-top: 1px solid var(--rule);
}
.assessment-cta .label { display: block; margin-bottom: 20px; }
.assessment-cta h2 {
  font-family: var(--font-display); font-size: clamp(28px, 3vw, 44px);
  font-weight: 700; color: var(--ink); line-height: 1.15; margin-bottom: 16px;
}
.assessment-cta p {
  font-family: var(--font-body); font-size: 20px; color: var(--muted);
  max-width: 520px; margin: 0 auto 36px; line-height: 1.6;
}

/* ═══════════════════════════════════════════════════════════════
   LEGAL PAGES — PRIVACY, TERMS
   Single-column reading layout for long-form legal content.
   Page hero uses the standard .page-hero (no photo). Body sits
   on cream for comfortable long-read contrast.
   ═══════════════════════════════════════════════════════════════ */
.legal-body { padding: 80px 60px 96px; background: var(--cream); }
.legal-reading-column {
  max-width: 760px; margin: 0 auto;
  font-family: var(--font-body);
  color: var(--ink);
  font-size: 17.5px; line-height: 1.75;
}
.legal-reading-column > p { margin-bottom: 18px; }
.legal-reading-column h2 {
  font-family: var(--font-display);
  font-size: 28px; font-weight: 700;
  line-height: 1.2; letter-spacing: -0.01em;
  color: var(--ink);
  margin: 56px 0 18px;
  padding-top: 32px;
  border-top: 1px solid var(--rule);
}
.legal-reading-column h2:first-of-type { padding-top: 0; border-top: none; }
.legal-reading-column h2 em { font-style: italic; color: var(--muted); }
.legal-reading-column h3 {
  font-family: var(--font-display);
  font-size: 20px; font-weight: 600;
  line-height: 1.3; color: var(--ink);
  margin: 36px 0 12px;
}
.legal-reading-column ul {
  margin: 0 0 22px 0; padding: 0;
  list-style: none;
}
.legal-reading-column ul li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 10px;
}
.legal-reading-column ul li::before {
  content: '—'; position: absolute; left: 0;
  color: var(--stone); opacity: 0.8;
}
.legal-reading-column strong { font-weight: 600; color: var(--ink); }
.legal-reading-column em { font-style: italic; }
.legal-reading-column a {
  color: var(--cyan); text-decoration: none;
  border-bottom: 1px solid rgba(1,178,234,0.3);
  transition: border-color 0.2s;
}
.legal-reading-column a:hover { border-bottom-color: var(--cyan); }
.legal-intro {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 21px; line-height: 1.55;
  color: var(--muted);
  margin: 0 0 16px;
  padding: 0;
}
.legal-attribution {
  font-family: var(--font-ui);
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--stone);
  margin: 0 0 48px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--rule);
}
.legal-callout {
  background: var(--warm-white);
  border-left: 3px solid var(--stone);
  padding: 24px 28px;
  margin: 24px 0 32px;
  font-family: var(--font-ui);
  font-size: 13.5px; line-height: 1.7;
  letter-spacing: 0.01em;
  color: var(--ink);
}
@media (max-width: 900px) {
  .legal-body { padding: 60px 28px 80px; }
}
footer.site-footer { background: var(--warm-white); border-top: 1px solid rgba(212,201,176,0.6); padding: 56px 60px 36px; }
.footer-top {
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 64px;
  padding-bottom: 40px; border-bottom: 1px solid var(--rule); margin-bottom: 28px;
  align-items: start;
}
.footer-logo img { height: 40px; width: auto; display: block; }
.footer-tagline { font-family: var(--font-body); font-style: italic; font-size: 16px; color: var(--muted); line-height: 1.6; max-width: 380px; margin-top: 14px; }
.footer-nav ul {
  list-style: none;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 12px 32px;
}
.footer-nav ul a {
  font-family: var(--font-body); font-size: 16px; color: var(--ink);
  text-decoration: none; transition: color 0.2s;
}
.footer-nav ul a:hover { color: var(--cyan); }
.footer-response {
  font-family: var(--font-ui); font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--stone); margin-top: 24px;
}
.footer-bottom { display: flex; justify-content: space-between; align-items: center; }
.footer-copy { font-family: var(--font-ui); font-size: 12px; color: var(--muted); opacity: 0.85; letter-spacing: 0.05em; }
.footer-legal { display: flex; gap: 24px; }
.footer-legal a { font-family: var(--font-ui); font-size: 12px; color: var(--muted); opacity: 0.85; text-decoration: none; letter-spacing: 0.05em; transition: color 0.2s; }
.footer-legal a:hover { color: var(--cyan); opacity: 1; }

/* ═══════════════════════════════════════════════════════════════
   SERVICES PAGE — DEEP SERVICE BLOCKS
   ═══════════════════════════════════════════════════════════════ */
.service-deep {
  padding: 100px 60px;
  border-bottom: 1px solid rgba(212,201,176,0.1);
}
.service-deep.on-dark  { background: var(--dark); border-bottom-color: rgba(212,201,176,0.1); }
.service-deep.on-cream { background: var(--cream); border-bottom-color: var(--rule); }
.service-deep.on-warm  { background: var(--warm-white); border-bottom-color: var(--rule); }
.service-deep.on-dark-mid { background: var(--dark-mid); border-bottom-color: rgba(212,201,176,0.1); }

.service-deep-inner {
  display: grid; grid-template-columns: 1fr 1fr; gap: 80px;
  align-items: start; max-width: 1200px; margin: 0 auto;
}
.service-deep.reverse .service-deep-inner > :first-child { order: 2; }

.service-deep-head .numeral {
  font-family: var(--font-display); font-style: italic;
  font-size: 14px; color: var(--cyan);
  letter-spacing: 0.05em; display: block; margin-bottom: 14px;
}
.service-deep-head h2 {
  font-family: var(--font-display);
  font-size: clamp(30px, 3.2vw, 46px);
  font-weight: 700; line-height: 1.12; letter-spacing: -0.02em;
  margin-bottom: 20px;
}
.service-deep-head h2 em { font-style: italic; }
.service-deep.on-dark .service-deep-head h2,
.service-deep.on-dark-mid .service-deep-head h2 { color: var(--cream); }
.service-deep.on-dark .service-deep-head h2 em,
.service-deep.on-dark-mid .service-deep-head h2 em { color: var(--stone); }
.service-deep.on-cream .service-deep-head h2,
.service-deep.on-warm .service-deep-head h2 { color: var(--ink); }
.service-deep.on-cream .service-deep-head h2 em,
.service-deep.on-warm .service-deep-head h2 em { color: var(--muted); }

.service-deep-lede {
  font-family: var(--font-body); font-size: 20px; font-weight: 400;
  line-height: 1.65; margin-bottom: 24px;
}
.service-deep.on-dark .service-deep-lede,
.service-deep.on-dark-mid .service-deep-lede { color: rgba(245,241,234,0.88); }
.service-deep.on-cream .service-deep-lede,
.service-deep.on-warm .service-deep-lede { color: var(--ink); }

.service-deep-body p {
  font-family: var(--font-body); font-size: 18px;
  line-height: 1.75; margin-bottom: 16px;
}
.service-deep.on-dark .service-deep-body p,
.service-deep.on-dark-mid .service-deep-body p { color: rgba(245,241,234,0.84); }
.service-deep.on-cream .service-deep-body p,
.service-deep.on-warm .service-deep-body p { color: var(--muted); }

.service-deep-scope {
  background: rgba(28,30,36,0.03);
  border: 1px solid var(--rule);
  padding: 32px 32px 28px;
  margin-top: 32px;
}
.service-deep.on-dark .service-deep-scope,
.service-deep.on-dark-mid .service-deep-scope {
  background: rgba(212,201,176,0.03);
  border-color: rgba(212,201,176,0.15);
}
.service-deep-scope .label { display: block; margin-bottom: 14px; }
.service-deep-scope h3 {
  font-family: var(--font-display); font-size: 20px; font-weight: 600;
  line-height: 1.3; margin-bottom: 4px;
}
.service-deep.on-dark .service-deep-scope h3,
.service-deep.on-dark-mid .service-deep-scope h3 { color: var(--cream); }
.service-deep.on-cream .service-deep-scope h3,
.service-deep.on-warm .service-deep-scope h3 { color: var(--ink); }
.service-deep-scope h3 em { font-style: italic; color: var(--stone); }
.service-deep.on-cream .service-deep-scope h3 em,
.service-deep.on-warm .service-deep-scope h3 em { color: var(--muted); }

.scope-list { list-style: none; margin-top: 18px; }
.scope-list li {
  font-family: var(--font-body); font-size: 16px; line-height: 1.55;
  padding: 12px 0;
  border-bottom: 1px solid var(--rule);
  display: flex; gap: 14px; align-items: flex-start;
}
.service-deep.on-dark .scope-list li,
.service-deep.on-dark-mid .scope-list li { color: rgba(245,241,234,0.84); border-bottom-color: rgba(212,201,176,0.12); }
.service-deep.on-cream .scope-list li,
.service-deep.on-warm .scope-list li { color: var(--ink); border-bottom-color: var(--rule); }
.scope-list li::before {
  content: '—'; flex-shrink: 0; color: var(--stone); opacity: 0.6;
}
.scope-list li:last-child { border-bottom: none; }

/* ═══════════════════════════════════════════════════════════════
   ABOUT PAGE — PRINCIPLES, TEAM, TIMELINE
   ═══════════════════════════════════════════════════════════════ */
.principles-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px;
  margin-top: 40px;
}
.principle-card {
  background: var(--dark-mid); padding: 44px 40px;
  border-left: 2px solid transparent;
  transition: border-color 0.25s, background 0.25s;
}
.principle-card:hover { border-left-color: var(--cyan); background: var(--dark-light); }
.principle-numeral {
  font-family: var(--font-display); font-style: italic;
  font-size: 13px; color: var(--cyan);
  letter-spacing: 0.05em; display: block; margin-bottom: 16px;
}
.principle-card h3 {
  font-family: var(--font-display); font-size: 22px; font-weight: 600;
  line-height: 1.3; color: var(--cream); margin-bottom: 14px;
}
.principle-card h3 em { font-style: italic; color: var(--stone); }
.principle-card p {
  font-family: var(--font-body); font-size: 17px;
  line-height: 1.65; color: rgba(245,241,234,0.84);
}

/* Team grid */
.team-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px;
  margin-top: 40px;
}
.team-card {
  background: var(--warm-white); padding: 40px 36px 36px;
  border-top: 2px solid transparent; transition: border-top-color 0.2s;
}
.team-card:hover { border-top-color: var(--stone); }
.team-photo-placeholder {
  width: 100%; aspect-ratio: 4 / 5; background: var(--cream);
  border: 1px solid var(--rule); margin-bottom: 24px;
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.team-photo-placeholder::before {
  content: '';
  position: absolute; top: 50%; left: 50%;
  width: 36px; height: 2px; background: var(--stone);
  transform: translate(-50%, -50%);
}
.team-role {
  font-family: var(--font-ui); font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--cyan); margin-bottom: 10px;
}
.team-name {
  font-family: var(--font-display); font-size: 22px; font-weight: 700;
  color: var(--ink); line-height: 1.2; margin-bottom: 6px;
}
.team-title {
  font-family: var(--font-body); font-style: italic;
  font-size: 15px; color: var(--muted); margin-bottom: 18px;
}
.team-bio {
  font-family: var(--font-body); font-size: 16px;
  line-height: 1.65; color: var(--ink);
}

/* Timeline */
.timeline {
  position: relative; max-width: 820px; margin: 40px auto 0;
  padding-left: 40px; border-left: 1px solid rgba(212,201,176,0.2);
}
.timeline-entry { padding: 24px 0 32px; position: relative; }
.timeline-entry::before {
  content: ''; position: absolute; left: -46px; top: 32px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--dark); border: 1px solid var(--stone);
}
.timeline-entry::after {
  content: ''; position: absolute; left: -40px; top: 38px;
  width: 28px; height: 1px; background: rgba(212,201,176,0.15);
}
.timeline-year {
  font-family: var(--font-display); font-style: italic;
  font-size: 13px; color: var(--cyan);
  letter-spacing: 0.05em; display: block; margin-bottom: 8px;
}
.timeline-entry h3 {
  font-family: var(--font-display); font-size: 22px; font-weight: 600;
  color: var(--cream); line-height: 1.25; margin-bottom: 10px;
}
.timeline-entry h3 em { font-style: italic; color: var(--stone); }
.timeline-entry p {
  font-family: var(--font-body); font-size: 17px;
  line-height: 1.7; color: rgba(245,241,234,0.84);
}

/* ═══════════════════════════════════════════════════════════════
   APP PAGE — BRAND → PRODUCT TIER REVEAL
   ═══════════════════════════════════════════════════════════════ */
/* Curtain moment: transition from brand to product tier */
.curtain {
  background: var(--warm-white);
  padding: 80px 60px 40px;
  text-align: center;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.curtain-rule { display: block; width: 36px; height: 2px; background: var(--stone); margin: 0 auto 28px; }
.curtain-line {
  font-family: var(--font-display); font-style: italic;
  font-size: clamp(20px, 2.2vw, 26px); font-weight: 400;
  color: var(--ink); line-height: 1.5;
  max-width: 640px; margin: 0 auto;
}
.curtain-line em { color: var(--muted); }

/* Phone mockups row */
.phones {
  display: flex; justify-content: center; gap: 32px;
  padding: 40px 60px 0;
  background: var(--warm-white);
  flex-wrap: wrap;
}
.phone-mockup {
  width: 240px; height: 480px;
  background: var(--dark);
  border-radius: 28px;
  border: 10px solid var(--ink);
  position: relative;
  box-shadow: 0 20px 60px rgba(28,30,36,0.15);
  overflow: hidden;
}
.phone-mockup::before {
  content: ''; position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
  width: 60px; height: 5px; background: #0a0b0e; border-radius: 3px;
}
.phone-screen {
  position: absolute; inset: 0;
  padding: 36px 20px 24px;
  display: flex; flex-direction: column;
  color: var(--cream);
}
.phone-screen .phone-logo {
  font-family: var(--font-display); font-size: 13px; font-weight: 700;
  color: var(--cyan); letter-spacing: 0.08em;
  margin-bottom: 20px;
}
.phone-screen .phone-status {
  font-family: var(--font-ui); font-size: 10px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--stone); margin-bottom: 6px;
}
.phone-screen .phone-title {
  font-family: var(--font-display); font-size: 18px; font-weight: 600;
  color: var(--cream); line-height: 1.2; margin-bottom: 16px;
}
.phone-screen .phone-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(212,201,176,0.12);
  border-radius: 4px; padding: 12px;
  font-family: var(--font-body); font-size: 12.5px;
  color: rgba(245,241,234,0.82); line-height: 1.5;
  margin-bottom: 10px;
}
.phone-screen .phone-card strong {
  display: block; font-family: var(--font-ui); font-size: 10.5px;
  font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--cyan); margin-bottom: 6px;
}
.phone-screen .phone-btn {
  margin-top: auto;
  background: var(--cyan); color: white;
  font-family: var(--font-ui); font-size: 11px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  text-align: center; padding: 12px; border-radius: 24px;
}

/* Full cyan download band — product tier */
.download-band {
  background: var(--cyan);
  padding: 100px 60px;
  text-align: center;
  color: white;
}
.download-band .label {
  color: rgba(255,255,255,0.85);
  margin-bottom: 18px;
}
.download-band .stone-rule {
  background: rgba(255,255,255,0.4);
  margin: 0 auto 22px;
}
.download-band h2 {
  font-family: var(--font-display);
  font-size: clamp(32px, 3.5vw, 48px); font-weight: 700;
  color: white; line-height: 1.15; letter-spacing: -0.02em;
  margin-bottom: 18px;
}
.download-band h2 em { font-style: italic; color: rgba(255,255,255,0.85); }
.download-band p {
  font-family: var(--font-body); font-size: 19px;
  color: rgba(255,255,255,0.9); line-height: 1.6;
  max-width: 560px; margin: 0 auto 40px;
}
.store-buttons { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.store-btn {
  display: inline-flex; align-items: center; gap: 14px;
  background: var(--ink); color: white;
  padding: 12px 28px; border-radius: 999px;
  font-family: var(--font-ui); text-decoration: none;
  transition: background 0.2s;
}
.store-btn:hover { background: #000; }
.store-btn-icon {
  font-size: 28px; line-height: 1;
}
.store-btn-text { text-align: left; }
.store-btn-text small {
  display: block; font-size: 11px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  opacity: 0.85; line-height: 1;
}
.store-btn-text span {
  font-size: 17px; font-weight: 600; letter-spacing: 0.01em;
  line-height: 1.2;
}

/* App features — back to brand tier */
.app-features-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 2px; margin-top: 56px;
}
.app-feature {
  background: var(--cream); padding: 40px 36px;
}
.app-feature .numeral {
  font-family: var(--font-display); font-style: italic;
  font-size: 12px; color: var(--cyan);
  letter-spacing: 0.05em; display: block; margin-bottom: 16px;
}
.app-feature h3 {
  font-family: var(--font-display); font-size: 20px; font-weight: 600;
  color: var(--ink); margin-bottom: 8px;
}
.app-feature .feature-rule {
  display: block; width: 32px; height: 2px; background: var(--stone); margin: 10px 0 16px;
}
.app-feature p {
  font-family: var(--font-body); font-size: 16px;
  color: var(--muted); line-height: 1.65;
}

/* ═══════════════════════════════════════════════════════════════
   BRIEF GATE PAGE — LONG-FORM GATE LAYOUT
   ═══════════════════════════════════════════════════════════════ */
.brief-gate {
  padding: 100px 60px;
  background: var(--warm-white);
}
.brief-gate-inner {
  display: grid; grid-template-columns: 1.2fr 1fr; gap: 80px;
  align-items: start; max-width: 1200px; margin: 0 auto;
}
.brief-preview {
  background: var(--dark);
  padding: 56px 48px;
  position: relative;
  box-shadow: 0 30px 80px rgba(28,30,36,0.15);
}
.brief-preview::before {
  content: ''; position: absolute; top: -1px; left: 48px;
  width: 56px; height: 2px; background: var(--cyan); opacity: 0.7;
}
.brief-preview-overline {
  font-family: var(--font-ui); font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--cyan); opacity: 0.95; margin-bottom: 22px;
}
.brief-preview-title {
  font-family: var(--font-display); font-size: 40px; font-weight: 700;
  color: var(--cream); line-height: 1.15; margin-bottom: 12px;
}
.brief-preview-title span { color: var(--stone); font-style: italic; }
.brief-preview-sub {
  font-family: var(--font-body); font-style: italic; font-size: 16.5px;
  color: rgba(245,241,234,0.82); margin-bottom: 40px;
  padding-bottom: 28px;
  border-bottom: 1px solid rgba(212,201,176,0.18);
}
.brief-preview-toc-label {
  font-family: var(--font-ui); font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--stone); margin-bottom: 20px;
}
.brief-preview-toc {
  list-style: none; display: flex; flex-direction: column; gap: 2px;
}
.brief-preview-toc li {
  padding: 16px 0;
  border-bottom: 1px solid rgba(212,201,176,0.08);
  display: grid; grid-template-columns: 28px 1fr;
  gap: 14px; align-items: baseline;
}
.brief-preview-toc li:last-child { border-bottom: none; }
.brief-preview-toc .num {
  font-family: var(--font-display); font-style: italic;
  font-size: 13px; color: var(--cyan);
}
.brief-preview-toc .title {
  font-family: var(--font-display); font-size: 17px; font-weight: 600;
  color: var(--cream); line-height: 1.3;
}
.brief-preview-toc .title span {
  display: block; font-family: var(--font-body); font-style: italic;
  font-size: 15px; font-weight: 400;
  color: rgba(245,241,234,0.78); margin-top: 4px;
}

.brief-gate-form { padding-top: 8px; }
.brief-gate-form .label { display: block; margin-bottom: 8px; }
.brief-gate-form h1 {
  font-family: var(--font-display);
  font-size: clamp(32px, 3.4vw, 46px); font-weight: 700;
  color: var(--ink); line-height: 1.12; letter-spacing: -0.02em;
  margin-bottom: 18px;
}
.brief-gate-form h1 em { font-style: italic; color: var(--muted); }
.brief-gate-form > p {
  font-family: var(--font-body); font-size: 19px;
  color: var(--muted); line-height: 1.7; margin-bottom: 32px;
}
.brief-trust-row {
  margin-top: 28px; padding-top: 24px;
  border-top: 1px solid var(--rule);
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
}
.brief-trust-item .label { color: var(--muted); font-size: 11.5px; margin-bottom: 6px; }
.brief-trust-item p {
  font-family: var(--font-body); font-size: 16px;
  color: var(--ink); line-height: 1.55;
}

/* ═══════════════════════════════════════════════════════════════
   ABOUT PAGE — VALUES / PHILOSOPHY BAND
   ═══════════════════════════════════════════════════════════════ */
.philosophy-band {
  background: var(--dark); padding: 120px 60px;
  position: relative; overflow: hidden;
}
.philosophy-band::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(212,201,176,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(212,201,176,0.03) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 0%, transparent 100%);
}
.philosophy-band-inner {
  position: relative; z-index: 1;
  max-width: 820px; margin: 0 auto; text-align: center;
}
.philosophy-band .label { display: inline-block; margin-bottom: 16px; }
.philosophy-band .stone-rule { margin: 0 auto 28px; }
.philosophy-band blockquote {
  font-family: var(--font-display);
  font-size: clamp(24px, 3vw, 38px); font-weight: 400; font-style: italic;
  line-height: 1.35; color: var(--cream);
  margin-bottom: 32px;
}
.philosophy-band blockquote em { font-style: normal; color: var(--stone); }
.philosophy-band .attribution {
  font-family: var(--font-ui); font-size: 12px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(245,241,234,0.78);
}

/* ═══════════════════════════════════════════════════════════════
   FEATURED-IN LOGO STRIP
   ═══════════════════════════════════════════════════════════════ */
.featured-in {
  background: var(--warm-white);
  padding: 36px 60px;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  text-align: center;
}
.featured-in-label {
  font-family: var(--font-ui); font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 20px;
}
.featured-logos {
  display: flex; align-items: center; justify-content: center;
  gap: 48px; flex-wrap: wrap;
}
.featured-logos img {
  height: 32px; width: auto;
  opacity: 0.85;
  transition: opacity 0.2s;
}
.featured-logos img:hover { opacity: 1; }

/* ═══════════════════════════════════════════════════════════════
   TESTIMONIAL QUOTE CARD — WITH ATTRIBUTION
   ═══════════════════════════════════════════════════════════════ */
.testimonials-grid-3 {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 2px; margin-top: 56px;
}
.quote-card {
  background: var(--warm-white);
  padding: 44px 40px 36px;
  position: relative;
  display: flex; flex-direction: column;
}
.quote-card::before {
  content: '\201C';
  position: absolute; top: 18px; left: 32px;
  font-family: var(--font-display);
  font-size: 64px; line-height: 1;
  color: var(--stone); opacity: 0.5;
}
.quote-card blockquote {
  font-family: var(--font-body);
  font-size: 17px; font-style: italic;
  color: var(--ink); line-height: 1.65;
  padding-top: 40px; margin-bottom: 24px;
  flex: 1;
}
.quote-card blockquote strong {
  font-weight: 600; font-style: normal;
  color: var(--ink);
}
.quote-card-meta {
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
}
.quote-card-name {
  font-family: var(--font-display);
  font-size: 17px; font-weight: 700;
  color: var(--ink); line-height: 1.25;
  margin-bottom: 4px;
}
.quote-card-name em { font-style: italic; color: var(--muted); }
.quote-card-title {
  font-family: var(--font-ui);
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted);
  line-height: 1.5;
}

/* Featured testimonial — full-width, larger, with Hucky-style credential card */
.featured-testimonial {
  background: var(--dark-mid);
  padding: 80px 60px;
  border-top: 1px solid rgba(212,201,176,0.1);
  border-bottom: 1px solid rgba(212,201,176,0.1);
}
.featured-testimonial-inner {
  max-width: 960px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1.6fr;
  gap: 56px; align-items: center;
}
.featured-testimonial-credential {
  padding: 28px 24px;
  background: var(--dark);
  border-left: 2px solid var(--cyan);
}
.featured-testimonial-credential .label {
  display: block; margin-bottom: 12px;
}
.featured-testimonial-credential .cred-name {
  font-family: var(--font-display);
  font-size: 22px; font-weight: 700;
  color: var(--cream); line-height: 1.2;
  margin-bottom: 10px;
}
.featured-testimonial-credential .cred-name em {
  font-style: italic; color: var(--stone);
}
.featured-testimonial-credential .cred-list {
  list-style: none;
  font-family: var(--font-body);
  font-size: 15.5px; line-height: 1.65;
  color: rgba(245,241,234,0.84);
}
.featured-testimonial-credential .cred-list li {
  padding: 6px 0;
  border-bottom: 1px solid rgba(212,201,176,0.08);
}
.featured-testimonial-credential .cred-list li:last-child { border-bottom: none; }

/* The Prince purple — used exactly once, on the word "Prince" in the
   Hucky Austin credential. Off-brand by design, on-brand for Prince.
   The bullet `::before` em-dash that used to sit before each cred-list
   item was removed: the divider line between items already separates
   them, and stacking em-dash + divider read as visual noise on this
   small dark card. */
.prince { color: var(--prince); }
.nowrap { white-space: nowrap; }

.featured-testimonial blockquote {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.4vw, 30px);
  font-style: italic; font-weight: 400;
  line-height: 1.4;
  color: var(--cream);
}
.featured-testimonial blockquote em {
  font-style: normal; color: var(--stone);
}

/* ═══════════════════════════════════════════════════════════════
   CLIENT SEGMENTS GRID
   ═══════════════════════════════════════════════════════════════ */
.segments-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 2px; margin-top: 40px;
}
.segment-card {
  background: var(--cream);
  padding: 44px 40px;
  position: relative;
  transition: background 0.2s;
}
.segment-card:hover { background: #ede8df; }
.segment-card .numeral {
  font-family: var(--font-display); font-style: italic;
  font-size: 12px; color: var(--cyan);
  letter-spacing: 0.05em; display: block; margin-bottom: 16px;
}
.segment-card h3 {
  font-family: var(--font-display);
  font-size: 24px; font-weight: 700;
  line-height: 1.2; color: var(--ink);
  margin-bottom: 6px;
}
.segment-card h3 em { font-style: italic; color: var(--muted); }
.segment-card .seg-rule {
  display: block; width: 32px; height: 2px;
  background: var(--stone);
  margin: 12px 0 16px;
}
.segment-card p {
  font-family: var(--font-body); font-size: 16px;
  color: var(--muted); line-height: 1.65;
  margin-bottom: 20px;
}
.segment-card .seg-link {
  font-family: var(--font-ui); font-size: 12px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--cyan); text-decoration: none;
  display: inline-flex; align-items: center; gap: 8px;
  transition: gap 0.2s;
}
.segment-card .seg-link::after { content: '→'; }
.segment-card .seg-link:hover { gap: 14px; }

/* ═══════════════════════════════════════════════════════════════
   PROCESS / HOW-WE-WORK STEPS
   ═══════════════════════════════════════════════════════════════ */
.process {
  max-width: 960px;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 2px; margin-top: 40px;
}
.process-step {
  background: var(--dark-mid);
  padding: 40px 32px 36px;
  position: relative;
}
.process-step .step-num {
  font-family: var(--font-display); font-style: italic;
  font-size: 13px; color: var(--cyan);
  letter-spacing: 0.05em; display: block; margin-bottom: 18px;
}
.process-step h3 {
  font-family: var(--font-display);
  font-size: 20px; font-weight: 600;
  color: var(--cream); line-height: 1.25;
  margin-bottom: 8px;
}
.process-step h3 em { font-style: italic; color: var(--stone); }
.process-step .step-rule {
  display: block; width: 28px; height: 2px;
  background: var(--stone); margin: 10px 0 16px;
}
.process-step p {
  font-family: var(--font-body); font-size: 16px;
  color: rgba(245,241,234,0.84); line-height: 1.65;
}

/* ═══════════════════════════════════════════════════════════════
   CONTACT FORM (bottom of each page)
   ═══════════════════════════════════════════════════════════════ */
.contact-section {
  background: var(--dark);
  padding: 100px 60px;
  position: relative; overflow: hidden;
}
.contact-section::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(212,201,176,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(212,201,176,0.03) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 0%, transparent 100%);
}
.contact-inner {
  position: relative; z-index: 1;
  max-width: 1100px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1.1fr;
  gap: 80px; align-items: start;
}
.contact-copy .label { display: block; margin-bottom: 14px; }
.contact-copy h2 {
  font-family: var(--font-display);
  font-size: clamp(32px, 3.5vw, 46px);
  font-weight: 700; color: var(--cream);
  line-height: 1.15; letter-spacing: -0.02em;
  margin-bottom: 18px;
}
.contact-copy h2 em { font-style: italic; color: var(--stone); }
.contact-copy > p {
  font-family: var(--font-body); font-size: 19px;
  color: rgba(245,241,234,0.85); line-height: 1.7;
  margin-bottom: 32px;
}
.contact-meta-list {
  list-style: none;
  margin-top: 28px; padding-top: 28px;
  border-top: 1px solid rgba(212,201,176,0.2);
}
.contact-meta-list li {
  font-family: var(--font-body); font-size: 17px;
  color: rgba(245,241,234,0.84); line-height: 1.7;
  padding: 10px 0;
  display: grid; grid-template-columns: 110px 1fr;
  gap: 20px;
}
.contact-meta-list li strong {
  font-family: var(--font-ui); font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--stone); padding-top: 4px;
}

/* ═══════════════════════════════════════════════════════════════
   APP PAGE — REAL CONSUMER APP (campus safety)
   ═══════════════════════════════════════════════════════════════ */
.app-three-up {
  max-width: 1100px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 2px;
}
.app-three-up-card {
  background: var(--dark-mid);
  padding: 40px 32px;
  border-left: 2px solid transparent;
  transition: border-left-color 0.2s, background 0.2s;
}
.app-three-up-card:hover {
  border-left-color: var(--cyan);
  background: var(--dark-light);
}
.app-three-up-card .numeral {
  font-family: var(--font-display); font-style: italic;
  font-size: 13px; color: var(--cyan);
  letter-spacing: 0.05em; display: block; margin-bottom: 18px;
}
.app-three-up-card h3 {
  font-family: var(--font-display);
  font-size: 22px; font-weight: 600;
  color: var(--cream); line-height: 1.2;
  margin-bottom: 8px;
}
.app-three-up-card h3 em { font-style: italic; color: var(--stone); }
.app-three-up-card .rule {
  display: block; width: 32px; height: 2px;
  background: var(--stone); margin: 10px 0 16px;
}
.app-three-up-card p {
  font-family: var(--font-body); font-size: 16px;
  color: rgba(245,241,234,0.84); line-height: 1.65;
}

/* App walkthrough — three side-by-side screen steps */
.app-walkthrough {
  max-width: 1200px; margin: 56px auto 0;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
.app-step {
  display: flex; flex-direction: column;
  align-items: flex-start;
}
.app-step-num {
  font-family: var(--font-display); font-style: italic;
  font-size: 14px; color: var(--cyan);
  letter-spacing: 0.05em; margin-bottom: 14px;
}
/* Unframed app screenshot — full image, no chrome that clips it.
   Treated like every other photographic image on the site:
   thin warm border, no heavy shadow, no rounded corners. */
.app-step-shot {
  width: 100%;
  max-width: 320px;
  margin: 0 auto 24px;
  background: var(--dark);
  border: 1px solid var(--rule);
  position: relative;
}
.app-step-shot::after {
  content: '';
  position: absolute; inset: 0;
  border: 1px solid rgba(212,201,176,0.05);
  pointer-events: none;
}
.app-step-shot img {
  width: 100%; height: auto;
  display: block;
}
.app-step h3 {
  font-family: var(--font-display);
  font-size: 24px; font-weight: 700;
  color: var(--ink); line-height: 1.2;
  margin-bottom: 10px; width: 100%;
}
.app-step h3 em { font-style: italic; color: var(--stone); }
.app-step .step-rule {
  display: block; width: 32px; height: 2px;
  background: var(--stone); margin: 8px 0 14px;
}
.app-step p {
  font-family: var(--font-body); font-size: 17px; font-weight: 400;
  color: var(--ink); line-height: 1.7;
}

/* App use cases (Sam/Svetlana/Jerome) */
.app-use-cases {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 2px; margin-top: 40px;
}
.app-use-card {
  background: var(--warm-white);
  padding: 40px 32px 32px;
  border-top: 2px solid var(--stone);
}
.app-use-card .label { display: block; margin-bottom: 14px; color: var(--cyan); }
.app-use-card blockquote {
  font-family: var(--font-body);
  font-size: 16px; font-style: italic;
  color: var(--ink); line-height: 1.65;
  margin-bottom: 20px;
}
.app-use-card .attribution {
  font-family: var(--font-ui); font-size: 12px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted);
  padding-top: 16px; border-top: 1px solid var(--rule);
}

/* ═══════════════════════════════════════════════════════════════
   ABOUT — CAREERS LIST
   ═══════════════════════════════════════════════════════════════ */
.careers-list {
  list-style: none;
  margin-top: 40px;
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 2px;
}
.careers-list li {
  background: var(--dark-mid);
  padding: 28px 32px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
  border-left: 2px solid transparent;
  transition: border-left-color 0.2s, background 0.2s;
}
.careers-list li:hover {
  border-left-color: var(--cyan);
  background: var(--dark-light);
}
.career-meta {
  display: flex; flex-direction: column; gap: 4px;
}
.career-title {
  font-family: var(--font-display);
  font-size: 19px; font-weight: 600;
  color: var(--cream); line-height: 1.25;
}
.career-location {
  font-family: var(--font-ui); font-size: 12px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--stone);
}
.career-apply {
  font-family: var(--font-ui); font-size: 12px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--cyan); text-decoration: none;
  white-space: nowrap;
  border: 1px solid var(--cyan-dim);
  padding: 10px 20px; border-radius: 3px;
  transition: all 0.2s;
}
.career-apply:hover {
  border-color: var(--cyan);
  background: rgba(1,178,234,0.06);
}

/* ═══════════════════════════════════════════════════════════════
   SOS — FIRST-LETTER CYAN HIGHLIGHT
   For the three "What Sets It Apart" cards: the first letters of
   "Streaming" / "Options" / "Secure" spell SOS. Each gets the
   structural cyan, scale-bumped to draw the eye.
   ═══════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════
   FAQ WITH SIDE IMAGE (App page)
   Long FAQ list paired with editorial image on the side, mirroring
   how the live site balances the long FAQ visually.
   ═══════════════════════════════════════════════════════════════ */
.faq-with-image {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 80px;
  align-items: start;
  margin-top: 24px;
}
.faq-list {
  max-width: 760px;
}
.faq-list details {
  border-bottom: 1px solid var(--rule);
  padding: 22px 0;
}
.faq-list details:last-child { border-bottom: none; }
.faq-list summary {
  font-family: var(--font-display);
  font-size: 19px; font-weight: 600;
  color: var(--ink); cursor: pointer;
  list-style: none;
  position: relative;
  padding-right: 28px;
  line-height: 1.35;
  transition: color 0.2s;
}
.faq-list summary:hover { color: var(--cyan); }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: '+';
  position: absolute;
  right: 0; top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-display);
  font-size: 22px; font-weight: 400;
  color: var(--cyan);
  transition: transform 0.2s;
}
.faq-list details[open] summary::after {
  content: '−';
}
.faq-list details p {
  font-family: var(--font-body); font-size: 17px;
  color: var(--muted); line-height: 1.7; margin-top: 14px;
}
.faq-list details p + p { margin-top: 12px; }

.faq-side-image {
  position: sticky;
  top: 96px;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--dark-mid);
  border: 1px solid var(--rule);
}
.faq-side-image img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

/* ═══════════════════════════════════════════════════════════════
   PRESS / FEATURED-IN — INVERTED VARIANT FOR DARK SURFACES
   Used when the press strip lands on a dark background; logos are
   white-on-dark so they need to invert for visibility.
   ═══════════════════════════════════════════════════════════════ */
.featured-in.on-dark {
  background: var(--dark-mid);
  border-top: 1px solid rgba(212,201,176,0.1);
  border-bottom: 1px solid rgba(212,201,176,0.1);
}
.featured-in.on-dark .featured-in-label {
  color: rgba(245,241,234,0.75);
}
.featured-in.on-dark .featured-logos img {
  /* These press logos are PNGs already designed for dark backgrounds
     (the source files have "OFFWHITE" in the filename). They have
     white/light ink on transparent backgrounds, so we just need to
     desaturate and lift opacity — NOT invert, which would flip them
     to black-on-dark and make them invisible. */
  filter: grayscale(100%) brightness(1.2) contrast(1.1);
  opacity: 0.85;
}
.featured-in.on-dark .featured-logos img:hover {
  filter: grayscale(0%) brightness(1.1);
  opacity: 1;
}

/* ═══════════════════════════════════════════════════════════════
   IMAGE TREATMENT — EDITORIAL FILTER
   Applied to all photographic content for a unified warm,
   slightly-desaturated register that matches the palette.
   ═══════════════════════════════════════════════════════════════ */
img.editorial,
.editorial-img {
  filter: saturate(0.72) sepia(0.08) brightness(0.96) contrast(1.02);
  transition: filter 0.4s ease;
}
img.editorial:hover,
.editorial-img:hover {
  filter: saturate(0.85) sepia(0.04) brightness(1) contrast(1.04);
}

/* ═══════════════════════════════════════════════════════════════
   HERO — PHOTOGRAPHIC VARIANT (homepage)
   Full-bleed photo behind the charcoal masthead, with overlay
   that keeps the headline readable in cream.
   ═══════════════════════════════════════════════════════════════ */
.hero.hero-photo .hero-bg {
  background:
    linear-gradient(
      105deg,
      rgba(28,30,36,0.96) 0%,
      rgba(28,30,36,0.85) 38%,
      rgba(28,30,36,0.55) 70%,
      rgba(28,30,36,0.35) 100%
    ),
    var(--hero-photo-url, none) center / cover no-repeat;
}
.hero.hero-photo .hero-bg::before {
  background-image:
    linear-gradient(rgba(212,201,176,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(212,201,176,0.025) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse 80% 80% at 30% 50%, black 0%, transparent 100%);
}

.page-hero.page-hero-photo::before {
  background:
    linear-gradient(
      110deg,
      rgba(28,30,36,0.95) 0%,
      rgba(28,30,36,0.85) 40%,
      rgba(28,30,36,0.6) 75%,
      rgba(28,30,36,0.4) 100%
    ),
    var(--page-hero-photo-url, none) center / cover no-repeat;
}

/* Subject-on-left variant — when the hero photo's main subject sits
   on the left of the frame and would be covered by the dark
   gradient, this variant shifts the photo's positioning to the right
   so the subject moves out from under the text. Hero text stays
   left-anchored, consistent with every other page. */
.page-hero.page-hero-photo.photo-right::before {
  background:
    linear-gradient(
      105deg,
      rgba(28,30,36,0.95) 0%,
      rgba(28,30,36,0.85) 40%,
      rgba(28,30,36,0.6) 75%,
      rgba(28,30,36,0.4) 100%
    ),
    var(--page-hero-photo-url, none) right center / cover no-repeat;
}

/* Mirror variant — flips the photo so the subjects sit on the right
   and the headline overlay covers empty space rather than faces. */
.page-hero.page-hero-photo.flip-photo::before {
  transform: scaleX(-1);
}

/* Top-anchored variant — when the subject's head/face is near the
   top of the source image, vertical-centering crops the head awkwardly.
   This variant anchors the background to top so the full head stays
   in frame at any viewport height. */
.page-hero.page-hero-photo.photo-top::before {
  background:
    linear-gradient(
      110deg,
      rgba(28,30,36,0.95) 0%,
      rgba(28,30,36,0.85) 40%,
      rgba(28,30,36,0.6) 75%,
      rgba(28,30,36,0.4) 100%
    ),
    var(--page-hero-photo-url, none) center 18% / cover no-repeat;
}

/* ═══════════════════════════════════════════════════════════════
   SERVICE CARDS — WITH PHOTOGRAPHY
   ═══════════════════════════════════════════════════════════════ */
.service-card.has-image {
  padding: 0;
  display: flex; flex-direction: column;
  background: var(--cream);
  overflow: hidden;
}
.service-card.has-image .service-card-image {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--dark-mid);
}
.service-card.has-image .service-card-image img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.service-card.has-image .service-card-body {
  padding: 32px 32px 28px;
  display: flex; flex-direction: column;
  flex: 1;
}
.service-card.has-image:hover .service-card-image img {
  filter: saturate(0.85) sepia(0.04) brightness(1) contrast(1.04);
}
.service-card.has-image .service-numeral { margin-bottom: 14px; }
.service-card.has-image h3 { font-size: 22px; }
.service-card.has-image p { flex: 1; }
.service-card.has-image a.service-link { margin-top: 16px; }

/* ═══════════════════════════════════════════════════════════════
   SERVICE DEEP — WITH IMAGE COLUMN
   ═══════════════════════════════════════════════════════════════ */
.service-deep-image {
  width: 100%;
  aspect-ratio: 3 / 2;
  background: var(--dark-mid);
  overflow: hidden;
  position: relative;
}
.service-deep-image img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.service-deep-image::after {
  content: '';
  position: absolute; inset: 0;
  border: 1px solid rgba(212,201,176,0.1);
  pointer-events: none;
}
.service-deep-side {
  display: flex; flex-direction: column;
  gap: 24px;
  position: sticky;
  top: 96px;
  align-self: start;
}

/* ═══════════════════════════════════════════════════════════════
   SEGMENT CARDS — WITH PHOTOGRAPHY
   ═══════════════════════════════════════════════════════════════ */
.segment-card.has-image {
  padding: 0;
  display: flex; flex-direction: column;
  overflow: hidden;
  background: var(--cream);
}
.segment-card.has-image .segment-image {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--dark-mid);
}
.segment-card.has-image .segment-image img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.segment-card.has-image:hover .segment-image img {
  filter: saturate(0.85) sepia(0.04) brightness(1) contrast(1.04);
}
.segment-card.has-image .segment-body {
  padding: 32px 32px 28px;
  display: flex; flex-direction: column;
  flex: 1;
}
.segment-card.has-image .numeral { margin-bottom: 14px; }
.segment-card.has-image p { flex: 1; }
.segment-card.has-image .seg-link { margin-top: 16px; }

/* ═══════════════════════════════════════════════════════════════
   APP USE CASES — WITH PHOTOGRAPHY
   ═══════════════════════════════════════════════════════════════ */
.app-use-card.has-image {
  padding: 0;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.app-use-card.has-image .use-image {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--dark-mid);
}
.app-use-card.has-image .use-image img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.app-use-card.has-image:hover .use-image img {
  filter: saturate(0.85) sepia(0.04) brightness(1) contrast(1.04);
}
.app-use-card.has-image .use-body {
  padding: 32px 32px 28px;
  display: flex; flex-direction: column;
  flex: 1;
}

/* ═══════════════════════════════════════════════════════════════
   ABOUT — STORY WITH IMAGE
   ═══════════════════════════════════════════════════════════════ */
.story-with-image {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 80px; align-items: start;
  max-width: 1100px;
  margin-top: 24px;
}
.story-image {
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--dark-mid);
  position: relative;
}
.story-image img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.story-image::after {
  content: '';
  position: absolute; inset: 0;
  border: 1px solid var(--rule);
  pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════════
   FEATURED TESTIMONIAL WITH PORTRAIT (Travis on App page)
   ═══════════════════════════════════════════════════════════════ */
.travis-testimonial {
  background: var(--dark-mid);
  padding: 80px 60px;
  border-top: 1px solid rgba(212,201,176,0.1);
  border-bottom: 1px solid rgba(212,201,176,0.1);
}
.travis-inner {
  max-width: 1000px; margin: 0 auto;
  display: grid; grid-template-columns: 280px 1fr;
  gap: 56px; align-items: center;
}
.travis-portrait {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--dark);
  position: relative;
  border: 1px solid rgba(212,201,176,0.15);
}
.travis-portrait img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.travis-portrait::before {
  content: '';
  position: absolute; top: 0; left: 0;
  width: 48px; height: 2px;
  background: var(--cyan); opacity: 0.7;
  z-index: 1;
}
.travis-quote {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.2vw, 28px);
  font-style: italic; font-weight: 400;
  line-height: 1.45;
  color: var(--cream);
  margin-bottom: 28px;
}
.travis-quote em {
  font-style: normal; color: var(--stone);
}
.travis-attribution {
  padding-top: 24px;
  border-top: 1px solid rgba(212,201,176,0.15);
}
.travis-name {
  font-family: var(--font-display);
  font-size: 22px; font-weight: 700;
  color: var(--cream); line-height: 1.2;
  margin-bottom: 6px;
}
.travis-name em { font-style: italic; color: var(--stone); }
.travis-title {
  font-family: var(--font-ui);
  font-size: 12.5px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted);
}

/* ═══════════════════════════════════════════════════════════════
   ANIMATIONS
   ═══════════════════════════════════════════════════════════════ */
@keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.hero-eyebrow       { animation: fadeUp 0.7s ease 0.1s both; }
.hero h1            { animation: fadeUp 0.7s ease 0.25s both; }
.hero-subhead       { animation: fadeUp 0.7s ease 0.4s both; }
.hero-actions       { animation: fadeUp 0.7s ease 0.55s both; }
.hero-stat-row      { animation: fadeUp 0.7s ease 0.7s both; }
.page-hero-eyebrow  { animation: fadeUp 0.7s ease 0.1s both; }
.page-hero h1       { animation: fadeUp 0.7s ease 0.25s both; }
.page-hero-subhead  { animation: fadeUp 0.7s ease 0.4s both; }

/* ═══════════════════════════════════════════════════════════════
   VIDEO TESTIMONY (app page)
   Click-to-play poster; iframe loads only on user interaction.
   ═══════════════════════════════════════════════════════════════ */
.video-testimony {
  background: var(--warm-white);
  padding: 96px 60px 100px;
}
.video-testimony-inner {
  max-width: 1040px;
  margin: 0 auto;
}
.video-testimony .label {
  margin-bottom: 18px;
  display: block;
}
.video-caption {
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 40px;
  max-width: 720px;
}
.video-caption em {
  color: var(--stone);
  font-style: italic;
  font-weight: 600;
}
.video-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--dark);
  cursor: pointer;
  overflow: hidden;
  outline: none;
}
.video-embed:focus-visible {
  outline: 3px solid var(--cyan);
  outline-offset: 4px;
}
.video-poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease, filter 0.3s ease;
}
.video-embed:hover .video-poster {
  transform: scale(1.02);
  filter: brightness(0.92);
}
.video-play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 96px; height: 96px;
  border-radius: 50%;
  background: var(--cyan);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 16px 40px rgba(0,0,0,0.35), 0 0 0 8px rgba(255,255,255,0.12);
  transition: transform 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
  pointer-events: none;
}
.video-play svg {
  width: 36px; height: 36px;
  margin-left: 4px; /* triangle optical centering */
}
.video-embed:hover .video-play {
  transform: translate(-50%, -50%) scale(1.08);
  background: #00a3d6;
  box-shadow: 0 20px 50px rgba(0,0,0,0.4), 0 0 0 10px rgba(255,255,255,0.16);
}
.video-iframe {
  width: 100%; height: 100%;
  border: none;
  display: block;
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */

/* The mobile-only CTA inside .nav-links is hidden by default and
   only displayed within the mobile overlay (@media ≤900px below). */
.nav-cta-mobile { display: none !important; }

/* ── MOBILE NAV (hamburger + overlay) ───────────────────────────
   The hamburger button is visible only on mobile (≤900px). When
   tapped, the body gets .nav-open which slides the cream overlay
   over the page and shows the nav links stacked vertically. */
.nav-toggle {
  display: none;
  background: transparent; border: none; cursor: pointer;
  width: 44px; height: 44px;
  padding: 10px;
  position: relative; z-index: 110;
}
.nav-toggle span {
  display: block;
  width: 24px; height: 2px;
  background: var(--ink);
  margin: 4px auto;
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.2s ease;
}
body.nav-open .nav-toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
body.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 900px) {
  .nav-toggle { display: block; }
  .nav-cta { display: none; }

  .nav-links {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: var(--cream);
    padding: 100px 32px 40px;
    gap: 0;
    z-index: 105;
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
  }
  body.nav-open .nav-links { transform: translateX(0); }

  .nav-links li { border-bottom: 1px solid var(--rule); padding: 0; list-style: none; }
  .nav-links li:last-of-type { border-bottom: none; }
  .nav-links a {
    display: block;
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 400;
    color: var(--ink);
    padding: 22px 0;
    letter-spacing: 0;
    text-transform: none;
  }
  .nav-links a:hover, .nav-links a.active { color: var(--cyan); }
  .nav-links a.active::after { display: none; }

  .nav-links .nav-cta-mobile {
    display: inline-block !important;
    margin-top: 32px;
    background: var(--ink);
    color: var(--cream);
    font-family: var(--font-ui);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 18px 28px;
    text-align: center;
    border-radius: 2px;
    text-decoration: none;
  }
  .nav-links .nav-cta-mobile:hover { background: var(--cyan); color: var(--cream); }

  body.nav-open { overflow: hidden; }
}

@media (max-width: 900px) {
  nav.site-nav { padding: 0 28px; }
  .hero, .page-hero,
  section.on-dark, section.on-cream, section.on-warm, section.on-dark-mid,
  .approach, .lead-magnet, .assessment-cta,
  .service-deep, .brief-gate, .philosophy-band, .download-band,
  footer.site-footer {
    padding-left: 28px; padding-right: 28px;
  }
  .hero-stat-row { gap: 28px; flex-wrap: wrap; }
  .services-grid,
  .approach,
  .testimonials-grid,
  .lead-magnet-inner,
  .service-deep-inner,
  .principles-grid,
  .team-grid,
  .app-features-grid,
  .brief-gate-inner {
    grid-template-columns: 1fr; gap: 40px;
  }
  .service-deep.reverse .service-deep-inner > :first-child { order: 0; }
  .footer-top { grid-template-columns: 1fr; gap: 32px; }
  .footer-bottom { flex-direction: column; gap: 16px; }
  .brief-trust-row { grid-template-columns: 1fr; }
  .phone-mockup { width: 200px; height: 400px; }
  .featured-in { padding-left: 28px; padding-right: 28px; }
  .featured-logos { gap: 28px; }
  .contact-section { padding-left: 28px; padding-right: 28px; }
  .contact-inner,
  .testimonials-grid-3,
  .segments-grid,
  .process,
  .app-three-up,
  .app-walkthrough,
  .app-use-cases,
  .featured-testimonial-inner,
  .careers-list { grid-template-columns: 1fr; gap: 32px; }
  .featured-testimonial { padding-left: 28px; padding-right: 28px; }
  .careers-list li { flex-direction: column; align-items: flex-start; gap: 14px; }
  .story-with-image,
  .travis-inner,
  .faq-with-image { grid-template-columns: 1fr; gap: 32px; }
  .faq-side-image { position: relative; top: 0; max-width: 320px; }
  .travis-portrait { max-width: 240px; }
  .travis-testimonial { padding-left: 28px; padding-right: 28px; }
  .video-testimony { padding: 64px 28px 72px; }
  .video-caption { font-size: 28px; margin-bottom: 28px; }
  .video-play { width: 72px; height: 72px; }
  .video-play svg { width: 28px; height: 28px; }
}

@media (max-width: 600px) {
  .phones { gap: 16px; }
  .phone-mockup:nth-child(3) { display: none; }
  .hero, .page-hero { padding-left: 20px; padding-right: 20px; }
  .video-caption { font-size: 24px; }
  .video-play { width: 60px; height: 60px; box-shadow: 0 10px 24px rgba(0,0,0,0.4), 0 0 0 6px rgba(255,255,255,0.16); }
  .video-play svg { width: 24px; height: 24px; }
}