/* ==========================================================================
   In Line K9
   Design system. Hand written, no framework.

   Identity note: the recurring motif is the LINE. The business is called
   In Line K9, so the structural device throughout is a hairline vertical rule
   that runs down sections, links numbered steps, and marks quotes. Everything
   hangs off a left edge rather than sitting centered.

   Palette: one accent only. Brass, derived from the gold in their existing
   logo, dropped in saturation and value until it reads as metal rather than
   highlighter. Sitting on a near black warm ground with bone text.

   An earlier pass sampled the palette from the photography (dry grass olive,
   training cot teal). It was faithful to the research and it read outdoorsy
   and utilitarian, which is wrong for a four thousand dollar minimum service
   in an affluent market. Restraint is the point: one accent, a lot of space.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* One accent only. Brass, derived from the gold in their own logo (#f8e028)
     by dropping saturation and value until it reads as metal rather than
     highlighter. A single precious accent on a near black ground is what
     separates a four thousand dollar service from a four hundred dollar one. */
  --brass-200: #ecd9b0;
  --brass-300: #e0c68f;
  --brass-400: #d4b473;
  --brass-500: #c2a15c;
  --brass-600: #a5853f;
  --brass-700: #7e6529;
  --brass-800: #5c4a1d;

  /* Warm neutral grayscale. Near black, barely warm, never olive. */
  --ink-990: #0a0a08;
  --ink-950: #0f0f0d;
  --ink-900: #141412;
  --ink-850: #1a1a17;
  --ink-800: #22221e;
  --ink-700: #2e2e29;
  --ink-600: #454540;
  --ink-500: #6b6b63;
  --ink-400: #8f8f85;
  --ink-300: #b4b4a9;
  --ink-200: #d2d2c8;
  --ink-100: #e8e6dd;
  --ink-050: #f4f3ee;
  --ink-000: #faf9f5;

  /* Type */
  --font-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Fluid type scale. Bigger jumps between levels, so hierarchy comes from
     scale and space rather than from weight. */
  --t-hero:    clamp(2.9rem, 1.5rem + 5.6vw, 6rem);
  --t-h1:      clamp(2.4rem, 1.4rem + 4.4vw, 4.75rem);
  --t-h2:      clamp(1.9rem, 1.2rem + 2.9vw, 3.25rem);
  --t-h3:      clamp(1.25rem, 1.05rem + 0.9vw, 1.6rem);
  --t-h4:      clamp(1.02rem, 0.98rem + 0.25vw, 1.15rem);
  --t-lead:    clamp(1.1rem, 1.02rem + 0.6vw, 1.4rem);
  --t-body:    clamp(1rem, 0.97rem + 0.16vw, 1.06rem);
  --t-small:   0.9375rem;
  --t-label:   0.68rem;
  --t-micro:   0.63rem;

  /* Spacing */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;   --sp-6: 2rem;     --sp-7: 2.75rem;  --sp-8: 3.5rem;
  --sp-9: 5rem;     --sp-10: 7rem;    --sp-11: 9.5rem;

  --section-y: clamp(5rem, 2.75rem + 9vw, 11rem);
  --gutter: clamp(1.15rem, 0.6rem + 2.4vw, 3rem);
  --measure: 30rem;
  --container: 76rem;
  --container-wide: 88rem;

  --radius: 2px;
  --rule-w: 1px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 220ms;
}

/* Light is the brand. It is what loads first, and it is deliberately not
   dependent on the visitor's system setting: the light treatment is the one
   that reads exclusive, so everyone sees it unless they choose otherwise.
   Dark is a fully designed alternative behind the toggle, not an afterthought. */
:root,
:root[data-theme='light'] {
  color-scheme: light;

  --bg:          #faf9f5;
  --bg-raised:   #ffffff;
  --bg-sunk:     #f1efe8;
  --bg-invert:   var(--ink-990);

  --text:        #14140f;
  --text-strong: #000000;
  --text-dim:    #57564e;
  --text-faint:  #706e64;
  --text-invert: var(--ink-000);

  --rule:        #e2e0d6;
  --rule-strong: #c9c7bb;

  --brand:       var(--brass-700);
  --brand-deep:  var(--brass-800);
  --brand-wash:  rgba(126, 101, 41, 0.06);

  --accent:      var(--brass-700);
  --accent-deep: var(--brass-800);
  --accent-wash: rgba(126, 101, 41, 0.07);
  --accent-ink:  #ffffff;

  --warm:        var(--ink-500);
  --gold:        var(--brass-600);

  --shadow-lift: 0 1px 0 rgba(0, 0, 0, 0.03);
}

:root[data-theme='dark'] {
  color-scheme: dark;

  --bg:          #0a0a08;
  --bg-raised:   #121210;
  --bg-sunk:     #060605;
  --bg-invert:   var(--ink-000);

  --text:        #e8e4d9;
  --text-strong: #ffffff;
  --text-dim:    #a8a49a;
  --text-faint:  #827f75;
  --text-invert: var(--ink-990);

  --rule:        #22221e;
  --rule-strong: #35352e;

  --brand:       var(--brass-500);
  --brand-deep:  var(--brass-600);
  --brand-wash:  rgba(194, 161, 92, 0.07);

  --accent:      var(--brass-500);
  --accent-deep: var(--brass-400);
  --accent-wash: rgba(194, 161, 92, 0.08);
  --accent-ink:  #0a0a08;

  --warm:        var(--ink-400);
  --gold:        var(--brass-400);

  --shadow-lift: 0 1px 0 rgba(255, 255, 255, 0.03);
}

/* --------------------------------------------------------------------------
   2. Reset and base
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: 0.003em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  color: var(--text-strong);
  margin: 0;
  text-wrap: balance;
}

h1 {
  font-size: var(--t-h1);
  font-weight: 500;
  font-variation-settings: 'wdth' 100;
  line-height: 1.02;
  letter-spacing: -0.028em;
}

h2 {
  font-size: var(--t-h2);
  font-weight: 500;
  font-variation-settings: 'wdth' 100;
  line-height: 1.08;
  letter-spacing: -0.024em;
}

h3 {
  font-size: var(--t-h3);
  font-weight: 600;
  font-variation-settings: 'wdth' 100;
  line-height: 1.25;
  letter-spacing: -0.012em;
}

h4 {
  font-size: var(--t-h4);
  font-weight: 600;
  font-variation-settings: 'wdth' 100;
  line-height: 1.3;
  letter-spacing: -0.005em;
}

p { margin: 0 0 1.05em; }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-decoration-color: var(--accent); text-underline-offset: 0.18em; }
a:hover { color: var(--accent); }

img, svg, video { display: block; max-width: 100%; height: auto; }

/* picture creates no box of its own, so layout and every img selector behave
   exactly as they did before WebP sources were introduced. */
picture { display: contents; }

ul, ol { margin: 0 0 1.05em; padding-left: 1.15rem; }
li { margin-bottom: 0.45em; }
li::marker { color: var(--brand); }

strong, b { font-weight: 700; color: var(--text-strong); }

hr {
  border: 0;
  border-top: var(--rule-w) solid var(--rule);
  margin: var(--sp-7) 0;
}

::selection { background: var(--accent); color: var(--accent-ink); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 1px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--accent);
  color: var(--accent-ink);
  padding: 0.7rem 1.1rem;
  font-family: var(--font-mono);
  font-size: var(--t-label);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.skip-link:focus { left: 0; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.wrap--wide { max-width: var(--container-wide); }
.wrap--tight { max-width: 58rem; }

.section { padding-block: var(--section-y); position: relative; }
.section--sunk { background: var(--bg-sunk); }
.section--raised { background: var(--bg-raised); }
.section--tight { padding-block: calc(var(--section-y) * 0.6); }

.section + .section:not(.section--sunk):not(.section--raised) {
  border-top: var(--rule-w) solid var(--rule);
}

.measure { max-width: var(--measure); }
.measure-wide { max-width: 46rem; }

.stack > * + * { margin-top: var(--sp-4); }
.stack-lg > * + * { margin-top: var(--sp-6); }

/* Editorial two column. Content left, aside right. Collapses on mobile. */
.split {
  display: grid;
  gap: var(--sp-7) var(--sp-8);
  grid-template-columns: 1fr;
}

@media (min-width: 62rem) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .split--lead { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
  .split--aside { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
  .split--sticky > .split__sticky { position: sticky; top: 6.5rem; }
}

.grid { display: grid; gap: var(--sp-5); grid-template-columns: 1fr; }
@media (min-width: 40rem) { .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 52rem) { .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 40rem) { .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* --------------------------------------------------------------------------
   4. Type components
   -------------------------------------------------------------------------- */

/* Mono eyebrow. Used instead of emoji or icons as a section marker. */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.26em;
  color: var(--brand);
  margin: 0 0 var(--sp-5);
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.eyebrow::before {
  content: '';
  width: 2.2rem;
  height: var(--rule-w);
  background: var(--brand);
  flex: none;
}

.eyebrow--plain::before { display: none; }
.eyebrow--accent { color: var(--accent); }
.eyebrow--accent::before { background: var(--accent); }

.hero-title {
  font-size: var(--t-hero);
  font-weight: 400;
  font-variation-settings: 'wdth' 100;
  line-height: 1.02;
  letter-spacing: -0.032em;
  text-wrap: pretty;
}

.lead {
  font-size: var(--t-lead);
  line-height: 1.55;
  color: var(--text-dim);
  font-weight: 400;
}

.dim { color: var(--text-dim); }
.faint { color: var(--text-faint); }
.brandc { color: var(--brand); }
.accentc { color: var(--accent); }

.mono {
  font-family: var(--font-mono);
  font-size: var(--t-small);
  letter-spacing: 0.01em;
}

.label {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--text-faint);
}

/* Large pull statement */
.statement {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 1rem + 2vw, 2.35rem);
  font-weight: 400;
  font-variation-settings: 'wdth' 100;
  line-height: 1.28;
  letter-spacing: -0.02em;
  color: var(--text-strong);
  text-wrap: balance;
}

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  font-family: var(--font-mono);
  font-size: var(--t-label);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  line-height: 1;
  padding: 1.15rem 2.1rem;
  border: var(--rule-w) solid transparent;
  border-radius: var(--radius);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
  min-height: 48px;
}

.btn:active { transform: translateY(1px); }

.btn--primary {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
}
.btn--primary:hover {
  background: var(--accent-deep);
  border-color: var(--accent-deep);
  color: var(--accent-ink);
}
:root[data-theme='light'] .btn--primary:hover { color: #fff; }

.btn--ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--rule-strong);
}
.btn--ghost:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-wash);
}

.btn--solid {
  background: var(--text);
  color: var(--bg);
  border-color: var(--text);
}
.btn--solid:hover { background: var(--brand); border-color: var(--brand); color: var(--ink-990); }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
}

/* Text link with an arrow, used for in flow navigation */
.arrow-link {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: var(--t-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--accent);
  text-decoration: none;
  padding-block: 0.6rem;
  min-height: 40px;
}
.arrow-link span:last-child { transition: transform var(--dur) var(--ease); }
.arrow-link:hover span:last-child { transform: translateX(4px); }
.arrow-link:hover { color: var(--accent); }

/* --------------------------------------------------------------------------
   6. Header and navigation
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: var(--rule-w) solid var(--rule);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  min-height: 4.25rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  gap: 0.65rem;
  text-decoration: none;
  color: var(--text-strong);
  flex: none;
}

.brand__mark { width: 30px; height: 30px; flex: none; }

.brand__name {
  font-family: var(--font-display);
  font-weight: 500;
  font-variation-settings: 'wdth' 100;
  font-size: 1.02rem;
  letter-spacing: 0.02em;
  line-height: 1;
}

.brand__name em {
  font-style: normal;
  color: var(--brand);
}

.nav { display: none; }

@media (min-width: 64rem) {
  .nav {
    display: flex;
    align-items: center;
    gap: clamp(0.5rem, -0.4rem + 1.5vw, 1.35rem);
  }
}

.nav__link {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.17em;
  color: var(--text-dim);
  text-decoration: none;
  padding: 0.5rem 0;
  position: relative;
  white-space: nowrap;
}

.nav__link::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: var(--rule-w);
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease);
}

.nav__link:hover { color: var(--text-strong); }
.nav__link:hover::after { transform: scaleX(1); }

.nav__link[aria-current='page'] { color: var(--text-strong); }
.nav__link[aria-current='page']::after { transform: scaleX(1); background: var(--brand); }

.header-actions { display: flex; align-items: center; gap: var(--sp-2); }

.icon-btn {
  width: 42px; height: 42px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: var(--rule-w) solid var(--rule);
  border-radius: var(--radius);
  color: var(--text-dim);
  cursor: pointer;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.icon-btn:hover { color: var(--accent); border-color: var(--accent); }
.icon-btn svg { width: 17px; height: 17px; }

/* Default state is light, so the control offers the moon (switch to dark).
   In dark it offers the sun. */
.theme-toggle .theme-toggle__sun { display: none; }
.theme-toggle .theme-toggle__moon { display: block; }
:root[data-theme='dark'] .theme-toggle .theme-toggle__sun { display: block; }
:root[data-theme='dark'] .theme-toggle .theme-toggle__moon { display: none; }

.header-cta { display: none; }
@media (min-width: 48rem) {
  .header-cta { display: inline-flex; padding: 0.8rem 1.15rem; min-height: 42px; }
}

.nav-toggle { display: inline-flex; }
@media (min-width: 64rem) { .nav-toggle { display: none; } }

/* Mobile drawer */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  padding: var(--gutter);
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform 300ms var(--ease), visibility 300ms;
  overflow-y: auto;
}

.mobile-nav[data-open='true'] { transform: translateY(0); visibility: visible; }

.mobile-nav__head {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 4.25rem;
  margin-bottom: var(--sp-5);
}

.mobile-nav__list { list-style: none; margin: 0; padding: 0; }

.mobile-nav__list li { border-top: var(--rule-w) solid var(--rule); margin: 0; }
.mobile-nav__list li:last-child { border-bottom: var(--rule-w) solid var(--rule); }

.mobile-nav__link {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  padding: 1.1rem 0;
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-variation-settings: 'wdth' 90;
  font-size: 1.5rem;
  letter-spacing: -0.014em;
  color: var(--text-strong);
}

.mobile-nav__link .num {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  font-weight: 500;
  color: var(--brand);
  letter-spacing: 0.1em;
}

.mobile-nav__sub {
  padding: 0 0 1rem 2.35rem;
  list-style: none;
  margin: -0.4rem 0 0;
}
.mobile-nav__sub li { border: 0; }
.mobile-nav__sub a {
  display: block;
  padding: 0.42rem 0;
  font-family: var(--font-body);
  font-size: var(--t-small);
  color: var(--text-dim);
  text-decoration: none;
}
.mobile-nav__sub a:hover { color: var(--accent); }

.mobile-nav__foot { margin-top: auto; padding-top: var(--sp-6); }

/* Desktop dropdown for services */
.nav__group { position: relative; display: flex; align-items: center; }

.nav__panel {
  position: absolute;
  top: calc(100% + 0.9rem);
  left: -1rem;
  min-width: 21rem;
  background: var(--bg-raised);
  border: var(--rule-w) solid var(--rule);
  border-radius: var(--radius);
  padding: 0.5rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-5px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.3);
}

:root[data-theme='light'] .nav__panel { box-shadow: 0 18px 44px rgba(20, 21, 15, 0.12); }

.nav__group:hover .nav__panel,
.nav__group:focus-within .nav__panel {
  opacity: 1; visibility: visible; transform: translateY(0);
}

.nav__panel a {
  display: block;
  padding: 0.68rem 0.8rem;
  border-radius: 2px;
  text-decoration: none;
  color: var(--text);
  font-size: var(--t-small);
  font-weight: 600;
  line-height: 1.35;
}
.nav__panel a span {
  display: block;
  font-weight: 400;
  font-size: 0.8rem;
  color: var(--text-faint);
  margin-top: 0.15rem;
}
.nav__panel a:hover { background: var(--accent-wash); color: var(--accent); }
.nav__panel a:hover span { color: var(--text-dim); }

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */

.hero { padding-block: clamp(2.5rem, 1rem + 7vw, 6rem) var(--section-y); position: relative; }

.hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-7);
  align-items: center;
}

@media (min-width: 60rem) {
  .hero__grid {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    gap: var(--sp-8);
  }
}

.hero-title { margin-bottom: var(--sp-5); }

.hero-title .rule-word {
  color: var(--brand);
  font-style: normal;
}

.hero__lead { max-width: 32rem; margin-bottom: var(--sp-6); }

.hero__proof {
  margin-top: var(--sp-7);
  padding-top: var(--sp-5);
  border-top: var(--rule-w) solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-5) var(--sp-6);
}

.proof-item { display: flex; flex-direction: column; gap: 0.2rem; }

.proof-item__figure {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 400;
  font-variation-settings: 'wdth' 100;
  line-height: 1;
  color: var(--text-strong);
  letter-spacing: -0.022em;
}

.proof-item__label {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--text-faint);
}

.stars { color: var(--gold); letter-spacing: 0.08em; font-size: 1.05rem; line-height: 1; }

/* Portrait photo frame. Portrait photos are NEVER stretched into wide bands. */
.portrait {
  position: relative;
  border: 0;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-sunk);
}

.portrait img { width: 100%; height: auto; }

.portrait__caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 2.75rem 1rem 0.85rem;
  background: linear-gradient(to top, rgba(10, 11, 7, 0.88), rgba(10, 11, 7, 0));
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: #e4e4da;
}

.hero__figure { width: 100%; justify-self: end; }

/* At desktop the photo fills its column rather than sitting right aligned
   inside it, which is what lets the stat panel actually overlap its edge.
   Right aligning it left a dead gap between the two halves. */
@media (min-width: 60rem) { .hero__figure { max-width: none; } }
@media (max-width: 59.99rem) { .hero__figure { justify-self: start; max-width: 26rem; } }

/* --------------------------------------------------------------------------
   8. The line motif: numbered steps and ruled blocks
   -------------------------------------------------------------------------- */

.steps { list-style: none; margin: 0; padding: 0; position: relative; }

.steps::before {
  content: '';
  position: absolute;
  left: 0.85rem;
  top: 0.6rem;
  bottom: 0.6rem;
  width: var(--rule-w);
  background: linear-gradient(to bottom, var(--brand), var(--rule) 85%);
}

.step {
  position: relative;
  padding: 0 0 var(--sp-6) 3.1rem;
  margin: 0;
}

.step:last-child { padding-bottom: 0; }

.step__num {
  position: absolute;
  left: 0;
  top: 0;
  width: 1.72rem;
  height: 1.72rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  border: var(--rule-w) solid var(--brand);
  border-radius: 50%;
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  font-weight: 600;
  color: var(--brand);
}

.section--sunk .step__num { background: var(--bg-sunk); }
.section--raised .step__num { background: var(--bg-raised); }

.step h3 { margin-bottom: 0.4rem; }
.step p { color: var(--text-dim); margin-bottom: 0; }

/* Ruled block. Square, hairline, no accent bar, no shadow. */
.block {
  border: 0;
  border-top: var(--rule-w) solid var(--rule);
  border-radius: 0;
  padding: var(--sp-5) 0 0;
  background: transparent;
  transition: border-color var(--dur) var(--ease);
}

.block--pad { padding: var(--sp-6) 0 0; }
.block--fill { background: transparent; }
.block--wash { background: var(--brand-wash); border-color: transparent; }
.block--accent { background: var(--accent-wash); border-color: transparent; }

a.block:hover, .block--link:hover { border-color: var(--accent); }

/* Forms are the one place a contained panel still earns its keep. */
form.block, form.block--pad {
  border: var(--rule-w) solid var(--rule);
  border-radius: var(--radius);
  padding: var(--sp-6);
  background: var(--bg-raised);
}

.block__index {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--brand);
  display: block;
  margin-bottom: var(--sp-3);
}

/* Hairline data list, used for facts and specs */
.spec { margin: 0; }

.spec__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.15rem 1.5rem;
  padding: 0.85rem 0;
  border-top: var(--rule-w) solid var(--rule);
}

.spec__row:last-child { border-bottom: var(--rule-w) solid var(--rule); }

@media (min-width: 34rem) {
  .spec__row { grid-template-columns: 9.5rem minmax(0, 1fr); align-items: baseline; }
}

.spec__key {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--text-faint);
  margin: 0;
}

.spec__val { margin: 0; color: var(--text); }
.spec__val strong { color: var(--text-strong); }

/* --------------------------------------------------------------------------
   9. Quotes and reviews
   -------------------------------------------------------------------------- */

.quote {
  position: relative;
  padding-left: var(--sp-5);
  border-left: var(--rule-w) solid var(--brand);
  margin: 0;
}

.quote p {
  font-size: var(--t-lead);
  line-height: 1.5;
  color: var(--text);
}

.quote--big p {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 0.95rem + 1.5vw, 1.9rem);
  font-weight: 400;
  font-variation-settings: 'wdth' 100;
  line-height: 1.35;
  letter-spacing: -0.017em;
  color: var(--text-strong);
}

.quote__by {
  display: block;
  margin-top: var(--sp-4);
  font-family: var(--font-mono);
  font-size: var(--t-label);
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--text-faint);
  font-style: normal;
}

.review {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-5) 0;
  border-top: var(--rule-w) solid var(--rule);
  break-inside: avoid;
}

.review__stars { color: var(--gold); font-size: 0.9rem; letter-spacing: 0.1em; line-height: 1; }
.review__text { color: var(--text-dim); margin: 0; font-size: var(--t-small); line-height: 1.62; }
.review__text::before { content: '\201C'; }
.review__text::after { content: '\201D'; }

.review__by {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--text-faint);
  margin: 0;
}

/* Review carousel. A few at a time with arrows, rather than a wall of text.
   Native scroll snap, so it still works with keyboard, trackpad and touch if
   the JS never runs. */

.rev {
  position: relative;
}

.rev__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}

.rev__count {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-faint);
}

.rev__ctrls { display: flex; gap: var(--sp-2); }

.rev__btn {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: var(--rule-w) solid var(--rule-strong);
  border-radius: var(--radius);
  color: var(--text);
  cursor: pointer;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease),
              opacity var(--dur) var(--ease);
}

.rev__btn:hover:not(:disabled) { color: var(--accent); border-color: var(--accent); }
.rev__btn:disabled { opacity: 0.3; cursor: default; }
.rev__btn svg { width: 16px; height: 16px; }

.rev__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc(100% - 2.5rem);
  gap: var(--sp-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: 0.25rem;
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
}

.rev__track::-webkit-scrollbar { display: none; }

@media (min-width: 40rem) {
  .rev__track {
    grid-auto-columns: calc(50% - 0.5rem);
    margin-inline: 0;
    padding-inline: 0;
  }
}

@media (min-width: 64rem) {
  .rev__track { grid-auto-columns: calc(33.333% - 0.667rem); }
}

.rev__card {
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  border: 0;
  border-top: var(--rule-w) solid var(--rule);
  border-radius: 0;
  padding: var(--sp-5) var(--sp-5) 0 0;
  background: transparent;
}

.rev__card .review__text {
  flex: 1;
  color: var(--text);
  font-size: var(--t-small);
}



/* Google topic keyword chips, real data straight off their profile */
.keywords { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 0; padding: 0; }

.keywords li {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45rem;
  border: var(--rule-w) solid var(--rule);
  border-radius: 100px;
  padding: 0.42rem 0.8rem;
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.06em;
  color: var(--text-dim);
  margin: 0;
}

.keywords b { color: var(--brand); font-weight: 600; }

/* --------------------------------------------------------------------------
   10. Service cards and page headers
   -------------------------------------------------------------------------- */

.page-head { padding-block: clamp(2.25rem, 1rem + 5vw, 4.5rem) 0; }

.page-head__inner {
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: 1fr;
}

@media (min-width: 60rem) {
  .page-head__inner { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); align-items: end; }
}

.breadcrumb {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-faint);
  margin-bottom: var(--sp-4);
}
.breadcrumb a { text-decoration: none; color: var(--text-faint); }
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb span { margin-inline: 0.45rem; opacity: 0.5; }

.service-card {
  display: flex;
  flex-direction: column;
  border: 0;
  border-top: var(--rule-w) solid var(--rule);
  border-radius: 0;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  background: transparent;
  transition: border-color var(--dur) var(--ease);
  height: 100%;
  padding-top: var(--sp-5);
}

.service-card:hover { border-color: var(--accent); color: inherit; }

.service-card__media {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--bg-sunk);
  border-radius: var(--radius);
}

.service-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 32%;
  transition: transform 500ms var(--ease);
}

.service-card:hover .service-card__media img { transform: scale(1.03); }

.service-card__body {
  padding: var(--sp-5) 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  flex: 1;
}

.service-card__index {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.14em;
  color: var(--brand);
}

/* Reserve two lines for the title so every card's body copy starts on the same
   baseline. Without this a one line name like Private Sessions pulls its
   paragraph up and the row reads misaligned, even though the cards themselves
   are equal height. */
.service-card h3 {
  font-size: var(--t-h4);
  min-height: calc(2 * 1.3em);
}

@media (max-width: 39.99rem) {
  /* Single column on phones, so nothing needs to line up with anything. */
  .service-card h3 { min-height: 0; }
}
.service-card p { font-size: var(--t-small); color: var(--text-dim); margin: 0; }
.service-card__foot { margin-top: auto; padding-top: var(--sp-2); }

/* --------------------------------------------------------------------------
   11. Fit lists: who this is and is not for
   -------------------------------------------------------------------------- */

.fit { list-style: none; margin: 0; padding: 0; }

.fit li {
  position: relative;
  padding: 0.72rem 0 0.72rem 1.9rem;
  border-top: var(--rule-w) solid var(--rule);
  margin: 0;
  color: var(--text-dim);
  font-size: var(--t-small);
  line-height: 1.55;
}

.fit li:last-child { border-bottom: var(--rule-w) solid var(--rule); }
.fit li strong { display: block; color: var(--text-strong); font-size: var(--t-body); margin-bottom: 0.1rem; }

.fit li::before {
  position: absolute;
  left: 0;
  top: 0.95rem;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  line-height: 1;
}

.fit--yes li::before { content: '+'; color: var(--accent); }
.fit--no li::before { content: '\2013'; color: var(--warm); }

/* --------------------------------------------------------------------------
   12. Forms
   -------------------------------------------------------------------------- */

.field { display: flex; flex-direction: column; gap: 0.42rem; margin-bottom: var(--sp-4); }

.field label,
.field > .field__legend {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--text-dim);
}

.field .req { color: var(--warm); }
.field .hint { font-family: var(--font-body); font-size: 0.8rem; color: var(--text-faint); text-transform: none; letter-spacing: 0; }

.input,
input[type='text'], input[type='email'], input[type='tel'], select, textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--t-body);
  color: var(--text);
  background: var(--bg-raised);
  border: var(--rule-w) solid var(--rule-strong);
  border-radius: var(--radius);
  padding: 0.82rem 0.9rem;
  min-height: 48px;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
  -webkit-appearance: none;
  appearance: none;
}

textarea { min-height: 7.5rem; resize: vertical; line-height: 1.55; }

select {
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 1.15rem) 1.32rem, calc(100% - 0.8rem) 1.32rem;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.4rem;
}

.input:focus, input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--bg);
}

::placeholder { color: var(--text-faint); opacity: 1; }

fieldset { border: 0; padding: 0; margin: 0 0 var(--sp-4); }
legend { padding: 0; }

.check-row { display: flex; align-items: flex-start; gap: 0.7rem; padding: 0.5rem 0; }
.check-row input { margin-top: 0.28rem; accent-color: var(--accent); width: 17px; height: 17px; flex: none; }
.check-row label { font-family: var(--font-body); font-size: var(--t-small); text-transform: none; letter-spacing: 0; color: var(--text-dim); }

.form-note {
  font-size: 0.82rem;
  color: var(--text-faint);
  margin-top: var(--sp-3);
}

.form-status {
  margin-top: var(--sp-4);
  padding: var(--sp-4);
  border: var(--rule-w) solid var(--accent);
  border-radius: var(--radius);
  background: var(--accent-wash);
  font-size: var(--t-small);
}

.form-status[hidden] { display: none; }

/* --------------------------------------------------------------------------
   13. Assessment
   -------------------------------------------------------------------------- */

.assess { max-width: 46rem; }

.assess__bar {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-bottom: var(--sp-6);
}

.assess__track {
  flex: 1;
  height: 2px;
  background: var(--rule);
  position: relative;
  overflow: hidden;
}

.assess__fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--accent);
  width: 0%;
  transition: width 340ms var(--ease);
}

.assess__count {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-faint);
  flex: none;
}

.assess__step { display: none; }
.assess__step[data-active='true'] { display: block; animation: stepIn 320ms var(--ease); }

@keyframes stepIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

.assess__q {
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 1.1rem + 1.8vw, 2.2rem);
  font-weight: 700;
  font-variation-settings: 'wdth' 90;
  line-height: 1.1;
  letter-spacing: -0.016em;
  color: var(--text-strong);
  margin-bottom: var(--sp-3);
}

.assess__help { color: var(--text-dim); font-size: var(--t-small); margin-bottom: var(--sp-5); }

.opts { list-style: none; margin: 0 0 var(--sp-5); padding: 0; display: grid; gap: 0.6rem; }

.opt {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  width: 100%;
  text-align: left;
  padding: 1rem 1.15rem;
  background: var(--bg-raised);
  border: var(--rule-w) solid var(--rule);
  border-radius: var(--radius);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: var(--t-body);
  color: var(--text);
  line-height: 1.42;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
  min-height: 52px;
}

.opt:hover { border-color: var(--accent); background: var(--accent-wash); }

.opt[aria-pressed='true'],
.opt[data-selected='true'] {
  border-color: var(--accent);
  background: var(--accent-wash);
}

.opt__key {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--brand);
  border: var(--rule-w) solid var(--rule-strong);
  border-radius: 3px;
  width: 1.5rem; height: 1.5rem;
  display: flex; align-items: center; justify-content: center;
  flex: none;
  margin-top: 0.06rem;
}

.opt[data-selected='true'] .opt__key { border-color: var(--accent); color: var(--accent); }

.opt__text { flex: 1; }
.opt__text small { display: block; color: var(--text-faint); font-size: 0.82rem; margin-top: 0.14rem; line-height: 1.4; }

.assess__nav { display: flex; gap: var(--sp-3); align-items: center; flex-wrap: wrap; }

.link-btn {
  background: none;
  border: 0;
  padding: 0.6rem 0;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: var(--t-label);
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--text-faint);
}
.link-btn:hover { color: var(--accent); }

/* Result: the mini game plan */
.plan { animation: stepIn 380ms var(--ease); }

.plan__head {
  border: var(--rule-w) solid var(--accent);
  border-radius: var(--radius);
  background: var(--accent-wash);
  padding: var(--sp-5);
  margin-bottom: var(--sp-6);
}

.plan__match {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--accent);
  margin-bottom: var(--sp-3);
}

.plan__title {
  font-family: var(--font-display);
  font-size: clamp(1.55rem, 1.15rem + 2vw, 2.4rem);
  font-weight: 800;
  font-variation-settings: 'wdth' 88;
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--text-strong);
  margin-bottom: var(--sp-3);
}

.plan__summary { color: var(--text-dim); margin: 0; }

.plan__section { margin-bottom: var(--sp-6); }

.plan__section > h3 {
  font-size: var(--t-h4);
  margin-bottom: var(--sp-4);
  padding-bottom: var(--sp-3);
  border-bottom: var(--rule-w) solid var(--rule);
}

.plan__list { list-style: none; margin: 0; padding: 0; }

.plan__list li {
  position: relative;
  padding: 0.52rem 0 0.52rem 1.6rem;
  color: var(--text-dim);
  font-size: var(--t-small);
  margin: 0;
}

.plan__list li::before {
  content: '';
  position: absolute;
  left: 0; top: 1.12rem;
  width: 0.62rem; height: var(--rule-w);
  background: var(--accent);
}

.plan__flag {
  border-left: 2px solid var(--warm);
  padding: 0.2rem 0 0.2rem var(--sp-4);
  color: var(--text-dim);
  font-size: var(--t-small);
}

/* --------------------------------------------------------------------------
   14. Callouts and CTA band
   -------------------------------------------------------------------------- */

.cta-band {
  border-top: var(--rule-w) solid var(--rule);
  background: var(--bg-sunk);
  padding-block: var(--section-y);
}

.cta-band__inner {
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: 1fr;
  align-items: center;
}

@media (min-width: 56rem) {
  .cta-band__inner { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--sp-8); }
}

.note {
  border-left: 2px solid var(--brand);
  padding-left: var(--sp-4);
  color: var(--text-dim);
  font-size: var(--t-small);
}

.pill-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border: var(--rule-w) solid var(--rule);
  border-radius: 100px;
  padding: 0.4rem 0.85rem;
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: 0.11em;
  color: var(--text-dim);
}

.pill--accent { border-color: var(--accent); color: var(--accent); }

/* Photo strip: portrait photos in a row, contained, never stretched */
.strip {
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 48rem) { .strip { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-4); } }

.strip figure { margin: 0; }

.strip img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center 30%;
  border-radius: var(--radius);
}

.strip figcaption {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: 0.11em;
  color: var(--text-faint);
  margin-top: 0.55rem;
  line-height: 1.4;
}

/* --------------------------------------------------------------------------
   15. FAQ
   -------------------------------------------------------------------------- */

.faq { border-top: var(--rule-w) solid var(--rule); }

.faq details {
  border-bottom: var(--rule-w) solid var(--rule);
}

.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 1.15rem 2.5rem 1.15rem 0;
  position: relative;
  font-family: var(--font-display);
  font-weight: 700;
  font-variation-settings: 'wdth' 96;
  font-size: var(--t-h4);
  line-height: 1.3;
  color: var(--text-strong);
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  content: '';
  position: absolute;
  right: 0.35rem;
  top: 1.62rem;
  width: 0.72rem;
  height: 0.72rem;
  border-right: var(--rule-w) solid var(--brand);
  border-bottom: var(--rule-w) solid var(--brand);
  transform: rotate(45deg);
  transition: transform var(--dur) var(--ease);
}

.faq details[open] summary::after { transform: rotate(-135deg); top: 1.85rem; }
.faq details > div { padding: 0 0 1.3rem; color: var(--text-dim); max-width: 44rem; }
.faq summary:hover { color: var(--accent); }

/* --------------------------------------------------------------------------
   16. Footer
   -------------------------------------------------------------------------- */

.site-footer {
  border-top: var(--rule-w) solid var(--rule);
  padding-block: var(--sp-8) var(--sp-6);
  background: var(--bg-sunk);
}

.footer-grid {
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: 1fr;
  margin-bottom: var(--sp-7);
}

@media (min-width: 40rem) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--sp-7); } }

.footer-head {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--text-faint);
  margin-bottom: var(--sp-4);
}

.footer-list { list-style: none; margin: 0; padding: 0; }
.footer-list li { margin-bottom: 0.15rem; }

.footer-list a {
  display: inline-block;
  padding-block: 0.35rem;
  text-decoration: none;
  color: var(--text-dim);
  font-size: var(--t-small);
}
.footer-list a:hover { color: var(--accent); }

.footer-bottom {
  border-top: var(--rule-w) solid var(--rule);
  padding-top: var(--sp-5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-5);
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.08em;
  color: var(--text-faint);
}

.footer-bottom a { text-decoration: none; color: var(--text-faint); }
.footer-bottom a:hover { color: var(--accent); }

/* Preview banner. Removed when the site goes live for the client. */
.preview-flag {
  background: var(--bg-sunk);
  border-bottom: var(--rule-w) solid var(--rule);
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  text-align: center;
  padding: 0.6rem var(--gutter);
  line-height: 1.4;
}

:root[data-theme='light'] .preview-flag { background: var(--bg-sunk); }

/* --------------------------------------------------------------------------
   17. Utilities
   -------------------------------------------------------------------------- */

.mt-0 { margin-top: 0; }
.mt-3 { margin-top: var(--sp-3); }
.mt-4 { margin-top: var(--sp-4); }
.mt-5 { margin-top: var(--sp-5); }
.mt-6 { margin-top: var(--sp-6); }
.mt-7 { margin-top: var(--sp-7); }
.mb-4 { margin-bottom: var(--sp-4); }
.mb-5 { margin-bottom: var(--sp-5); }
.mb-6 { margin-bottom: var(--sp-6); }
.mb-7 { margin-bottom: var(--sp-7); }

.reveal { opacity: 0; transform: translateY(14px); }
.reveal[data-shown='true'] {
  opacity: 1;
  transform: none;
  transition: opacity 620ms var(--ease), transform 620ms var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
}

@media print {
  .site-header, .site-footer, .cta-band, .preview-flag, .mobile-nav { display: none; }
  body { background: #fff; color: #000; }
}

/* ==========================================================================
   21. ART DIRECTION LAYER
   Added after the editorial base. Everything in this section is additive, so
   removing this block returns the site to the version snapshotted at
   snapshots/2026-08-11-editorial-src.

   The motif is measurement, taken from the name rather than the logo: a ruled
   tick line, and corner registration marks. Precise, abstract, and it means
   something for a business called In Line K9.
   ========================================================================== */

/* --- Tick rule. A measuring scale, used to divide major sections. --------- */

.tickrule {
  position: relative;
  height: 15px;
  border-bottom: var(--rule-w) solid var(--rule);
  overflow: hidden;
}

.tickrule::before {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 7px;
  background-image: repeating-linear-gradient(
    to right,
    var(--rule-strong) 0 1px,
    transparent 1px 14px
  );
  transform-origin: left;
}

/* Every fifth tick is taller and brass, like a real scale. */
.tickrule::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 14px;
  background-image: repeating-linear-gradient(
    to right,
    var(--brand) 0 1px,
    transparent 1px 70px
  );
  opacity: 0.55;
}

.section--ruled { border-top: 0; }

/* --- Registration marks. Corner brackets framing an image. ---------------- */

.regframe { position: relative; display: block; }

.regframe::before,
.regframe::after {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  border: 1px solid var(--brand);
  pointer-events: none;
  transition: inset var(--dur) var(--ease), opacity var(--dur) var(--ease);
  opacity: 0.85;
}

.regframe::before {
  top: -9px; left: -9px;
  border-right: 0; border-bottom: 0;
}

.regframe::after {
  bottom: -9px; right: -9px;
  border-left: 0; border-top: 0;
}

/* --- Offset frame. A brass outline sitting behind the photo. -------------- */

.offsetframe { position: relative; }

.offsetframe > .portrait,
.offsetframe > figure { position: relative; z-index: 1; }

.offsetframe::before {
  content: '';
  position: absolute;
  inset: 1.35rem -1.35rem -1.35rem 1.35rem;
  border: 1px solid var(--brand);
  opacity: 0.4;
  z-index: 0;
  border-radius: var(--radius);
  pointer-events: none;
}

@media (max-width: 47.99rem) {
  .offsetframe::before { inset: 0.85rem -0.85rem -0.85rem 0.85rem; }
}

/* --- Oversized numerals bleeding into the margin -------------------------- */

.bignum {
  position: absolute;
  font-family: var(--font-display);
  font-weight: 700;
  font-variation-settings: 'wdth' 100;
  font-size: clamp(7rem, 17vw, 15rem);
  line-height: 0.72;
  letter-spacing: -0.05em;
  color: transparent;
  -webkit-text-stroke: 1px var(--brand);
  opacity: 0.16;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

.bignum--right { right: -0.12em; top: -0.12em; }
.bignum--left { left: -0.14em; top: -0.16em; }

.has-bignum { position: relative; }
.has-bignum > *:not(.bignum) { position: relative; z-index: 1; }

/* --- Layered hero --------------------------------------------------------- */

@media (min-width: 60rem) {
  /* The stat row lifts off the text column and sits over the photo's lower
     edge, so the two halves of the hero interlock instead of sitting apart. */
  .hero__proof--layered {
    position: relative;
    z-index: 2;
    margin-right: -5.5rem;
    padding: var(--sp-5) var(--sp-6);
    background: color-mix(in srgb, var(--bg) 92%, transparent);
    backdrop-filter: blur(10px) saturate(1.3);
    -webkit-backdrop-filter: blur(10px) saturate(1.3);
    border: var(--rule-w) solid var(--rule);
    border-radius: var(--radius);
  }
}

/* --- Vertical offset in split layouts ------------------------------------- */

@media (min-width: 62rem) {
  .split__drop { margin-top: 4.5rem; }
  .split__rise { margin-top: -3rem; }
}

/* --- Quote overlapping a photo edge --------------------------------------- */

@media (min-width: 62rem) {
  .quote--overlap {
    margin-left: -3.5rem;
    margin-top: -3.5rem;
    padding: var(--sp-5) var(--sp-5) var(--sp-5) var(--sp-5);
    background: var(--bg);
    border-left-width: 2px;
    position: relative;
    z-index: 2;
    max-width: 30rem;
  }
}

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

.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 700ms var(--ease), transform 700ms var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}

.reveal[data-shown='true'] { opacity: 1; transform: none; }

/* Headline assembling line by line on load */
.hero-title .line {
  display: block;
  overflow: hidden;
}

.hero-title .line > span {
  display: block;
  transform: translateY(105%);
  animation: lineUp 900ms var(--ease) forwards;
  animation-delay: calc(var(--i, 0) * 110ms + 120ms);
}

@keyframes lineUp { to { transform: none; } }

/* Hero photo drifts slightly against the scroll */
.parallax { will-change: transform; }

/* Service card hover now has real behavior */
.service-card:hover .regframe::before { top: -13px; left: -13px; }
.service-card:hover .regframe::after { bottom: -13px; right: -13px; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero-title .line > span { transform: none; animation: none; }
  .parallax { transform: none !important; }
  .service-card:hover .regframe::before,
  .service-card:hover .regframe::after { top: auto; left: auto; bottom: auto; right: auto; }
  .service-card:hover .regframe::before { top: -9px; left: -9px; }
  .service-card:hover .regframe::after { bottom: -9px; right: -9px; }
}

/* ==========================================================================
   22. REFERENCE PASS
   Built against three sites Kenny picked: thehighrollersclub.io,
   photographytoprofits.com, executiveconnectionsdating.com.

   What they share: photography running to the viewport edge with text over or
   hard against it, bold headlines, a gold accent used as inline highlights
   inside sentences rather than only on labels, and a credibility bar near the
   top. All three use gold, which is why the brass palette stays.
   ========================================================================== */

/* --- Half bleed hero -----------------------------------------------------
   A true full bleed letterbox is not available to us: the only landscape photo
   on file features a trainer who no longer works here, and the one good photo
   of Aaron is portrait. Cropping it into a wide band would cut his head off.
   So the photo runs full height and bleeds off the right edge instead, which
   gets the same "photography carries the page" feel without the crop.        */

@media (min-width: 60rem) {
  .hero--bleed { padding-block: 0; }

  .hero--bleed .hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: 0;
    align-items: center;
    max-width: none;
    padding: 0;
  }

  .hero--bleed .hero__copy {
    padding: var(--sp-9) var(--sp-8) var(--sp-9)
             max(var(--gutter), calc(50vw - 38rem));
  }

  .hero--bleed .hero__figure {
    max-width: none;
    height: 100%;
    min-height: 46rem;
    align-self: stretch;
  }

  .hero--bleed .hero__figure .portrait { height: 100%; border-radius: 0; }

  .hero--bleed .hero__figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Biased to the top so heads are never clipped. */
    object-position: center 18%;
  }

  /* The offset frame and registration marks fight a bleed. Off here. */
  .hero--bleed .offsetframe::before { display: none; }
  .hero--bleed .regframe::before,
  .hero--bleed .regframe::after { display: none; }
}

/* --- Gold inline highlight -----------------------------------------------
   All three references color key phrases inside body copy. It is the cheapest
   way to stop a paragraph reading as a gray slab.                            */

.hl {
  color: var(--brand);
  font-weight: 600;
}

.hl--rule {
  color: inherit;
  font-weight: 600;
  box-shadow: inset 0 -0.42em 0 var(--brand-wash);
}

/* --- Credibility bar ------------------------------------------------------ */

.trustbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4) var(--sp-7);
  padding: var(--sp-5) 0;
  border-top: var(--rule-w) solid var(--rule);
  border-bottom: var(--rule-w) solid var(--rule);
}

.trustbar__item {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: 0.17em;
  color: var(--text-dim);
  white-space: nowrap;
}

.trustbar__item b { color: var(--brand); font-weight: 600; }

.trustbar__sep { color: var(--rule-strong); }

/* --- Full bleed statement band -------------------------------------------
   One tall photographic band with a statement over it. Kept tall rather than
   letterboxed so a portrait source survives the crop.                        */

.band {
  position: relative;
  min-height: clamp(26rem, 22rem + 18vw, 38rem);
  display: grid;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
}

.band__media { position: absolute; inset: 0; z-index: -2; }

.band__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 32%;
}

.band::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    100deg,
    rgba(8, 8, 6, 0.92) 0%,
    rgba(8, 8, 6, 0.78) 42%,
    rgba(8, 8, 6, 0.35) 100%
  );
}

.band__inner { padding-block: var(--sp-9); }

.band .eyebrow { color: var(--brass-400); }
.band .eyebrow::before { background: var(--brass-400); }

.band h2, .band .statement { color: #fff; }
.band p { color: rgba(255, 255, 255, 0.82); }
.band .hl { color: var(--brass-400); }

/* --- Bolder headlines ----------------------------------------------------
   The references all shout more than the editorial base did.                 */

.hero-title { font-weight: 600; letter-spacing: -0.034em; }
h2 { font-weight: 600; }
.statement { font-weight: 500; }

/* --- Eyebrow with separators --------------------------------------------- */

.eyebrow--dotted { gap: 0.55rem; }
.eyebrow--dotted::before { display: none; }

/* ==========================================================================
   23. FULL BLEED HERO
   Modelled directly on executiveconnectionsdating.com: photography edge to
   edge, content centered over it, gold eyebrow, bold uppercase headline, solid
   gold button, navigation sitting on the image.

   Note on the photo: there is only one landscape original on file and it shows
   a trainer who no longer works here, so the hero uses a portrait crop. The
   doberman shot is the one whose subject lies horizontally, so it is the only
   one that survives a wide crop without losing its subject.
   ========================================================================== */

.hero--full {
  position: relative;
  min-height: clamp(32rem, 82vh, 50rem);
  display: grid;
  align-items: center;
  padding: 0;
  overflow: hidden;
  isolation: isolate;
  text-align: center;
}

.hero--full .hero__bg { position: absolute; inset: 0; z-index: -2; }

.hero--full .hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Tuned by rendering the actual crop: keeps both people's heads in frame
     and leaves the upper middle clear for the headline. */
  object-position: center 62%;
}

@media (max-width: 47.99rem) {
  /* On a phone the box is nearly as tall as the source, so almost nothing is
     cropped. Recentre so the subjects are not pushed off the bottom. */
  .hero--full .hero__bg img { object-position: center 58%; }
}

/* Scrim. Heavier through the middle where the type sits, so the headline is
   readable without flattening the photograph at the edges. */
.hero--full::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to bottom,
      rgba(6, 6, 5, 0.62) 0%,
      rgba(6, 6, 5, 0.42) 28%,
      rgba(6, 6, 5, 0.60) 62%,
      rgba(6, 6, 5, 0.80) 100%);
}

.hero--full .hero__inner {
  max-width: 54rem;
  margin-inline: auto;
  padding-block: var(--sp-9);
}

.hero--full .eyebrow {
  justify-content: center;
  color: var(--brass-300);
  margin-bottom: var(--sp-5);
}
.hero--full .eyebrow::before { display: none; }

.hero-title--full {
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 1.1rem + 3.9vw, 4.4rem);
  font-weight: 700;
  font-variation-settings: 'wdth' 100;
  text-transform: uppercase;
  line-height: 1.06;
  letter-spacing: 0.005em;
  color: #fff;
  margin-bottom: var(--sp-5);
  text-wrap: balance;
  text-shadow: 0 1px 26px rgba(0, 0, 0, 0.4);
}

.hero-title--full .hl { color: var(--brass-300); font-weight: 700; }

.hero--full .lead {
  color: rgba(255, 255, 255, 0.88);
  max-width: 38rem;
  margin-inline: auto;
  margin-bottom: var(--sp-6);
  text-shadow: 0 1px 18px rgba(0, 0, 0, 0.45);
}

.hero--full .btn-row { justify-content: center; }

.hero--full .btn--primary {
  background: var(--brass-500);
  border-color: var(--brass-500);
  color: #14140f;
}
.hero--full .btn--primary:hover {
  background: var(--brass-400);
  border-color: var(--brass-400);
  color: #14140f;
}

.hero--full .btn--ghost {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.5);
}
.hero--full .btn--ghost:hover {
  color: #fff;
  border-color: #fff;
  background: rgba(255, 255, 255, 0.1);
}

/* Proof strip sits at the foot of the image rather than in a panel. */
.hero--full .hero__proof {
  justify-content: center;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  margin-top: var(--sp-7);
  padding-top: var(--sp-5);
  gap: var(--sp-5) var(--sp-8);
}

.hero--full .proof-item { align-items: center; }
.hero--full .proof-item__figure { color: #fff; }
.hero--full .proof-item__label { color: rgba(255, 255, 255, 0.7); }
.hero--full .stars { color: var(--brass-300); }

/* --- Navigation sitting on the image -------------------------------------- */

[data-page='home'] .site-header {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

[data-page='home'] .site-header::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 9rem;
  background: linear-gradient(to bottom, rgba(6, 6, 5, 0.55), transparent);
  pointer-events: none;
  z-index: -1;
  transition: opacity var(--dur) var(--ease);
}

[data-page='home'] .site-header .brand__name,
[data-page='home'] .site-header .nav__link,
[data-page='home'] .site-header .icon-btn { color: #fff; }

[data-page='home'] .site-header .brand__name em { color: var(--brass-300); }
[data-page='home'] .site-header .icon-btn { border-color: rgba(255, 255, 255, 0.4); }
[data-page='home'] .site-header .header-cta {
  background: var(--brass-500);
  border-color: var(--brass-500);
  color: #14140f;
}

/* Once scrolled past the hero the header returns to normal. */
[data-page='home'] .site-header[data-scrolled='true'] {
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-bottom-color: var(--rule);
}

[data-page='home'] .site-header[data-scrolled='true']::before { opacity: 0; }

[data-page='home'] .site-header[data-scrolled='true'] .brand__name,
[data-page='home'] .site-header[data-scrolled='true'] .icon-btn { color: var(--text-strong); }
[data-page='home'] .site-header[data-scrolled='true'] .nav__link { color: var(--text-dim); }
[data-page='home'] .site-header[data-scrolled='true'] .brand__name em { color: var(--brand); }
[data-page='home'] .site-header[data-scrolled='true'] .icon-btn { border-color: var(--rule); }

/* ==========================================================================
   24. INNER PAGE HEADERS
   The home hero's language carried onto every other page: gold eyebrow, bold
   uppercase heading, centered, dark ground.

   The photograph sits behind at low opacity as texture rather than as a
   picture. Reason: rendering the real crops at band dimensions produced
   headless people on three of six pages, because almost every original is
   portrait. At this opacity the crop is unreadable, so it adds warmth and
   depth without ever showing a decapitated subject.
   ========================================================================== */

.page-head--band {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: #0c0c0a;
  text-align: center;
  padding-block: clamp(3.25rem, 7vw, 6rem);
  margin-bottom: 0;
}

.page-head--band .ph__bg { position: absolute; inset: 0; z-index: -2; opacity: 0.26; }

.page-head--band .ph__bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 40%;
  filter: grayscale(0.35);
}

.page-head--band::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(120% 90% at 50% 45%,
      rgba(12, 12, 10, 0.35) 0%,
      rgba(12, 12, 10, 0.82) 70%,
      rgba(12, 12, 10, 0.95) 100%);
}

.page-head--band .breadcrumb {
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: var(--sp-5);
}
.page-head--band .breadcrumb a { color: rgba(255, 255, 255, 0.62); }
.page-head--band .breadcrumb a:hover { color: var(--brass-300); }

.page-head--band .eyebrow {
  justify-content: center;
  color: var(--brass-300);
  margin-bottom: var(--sp-4);
}
.page-head--band .eyebrow::before { display: none; }

.page-title {
  font-family: var(--font-display);
  font-size: clamp(1.85rem, 1.05rem + 3vw, 3.5rem);
  font-weight: 700;
  font-variation-settings: 'wdth' 100;
  text-transform: uppercase;
  line-height: 1.08;
  letter-spacing: 0.004em;
  color: #fff;
  margin: 0 auto var(--sp-5);
  max-width: 22ch;
  text-wrap: balance;
}

.page-head--band .lead {
  color: rgba(255, 255, 255, 0.82);
  max-width: 40rem;
  margin-inline: auto;
}

.page-head--band .hl { color: var(--brass-300); }

/* The header sits on the band on every page now, not only home. */
.site-header { position: sticky; }

[data-page]:not([data-page='home']) .site-header { background: color-mix(in srgb, var(--bg) 88%, transparent); }

/* --- Slogan and offer marks ---------------------------------------------- */

.footer-slogan {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  font-variation-settings: 'wdth' 100;
  letter-spacing: -0.014em;
  color: var(--text-strong);
  margin: 0 0 var(--sp-4);
  max-width: 22rem;
  line-height: 1.25;
}

.service-card__index .pop {
  color: var(--brand);
  font-weight: 600;
}

.offer {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  border: var(--rule-w) solid var(--brand);
  border-radius: var(--radius);
  padding: 0.85rem 1.1rem;
  font-family: var(--font-mono);
  font-size: var(--t-label);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--brand);
}

.offer b { font-weight: 600; }
.offer span { color: var(--text-dim); text-transform: none; letter-spacing: 0; font-family: var(--font-body); font-size: var(--t-small); }

/* ==========================================================================
   25. VIDEO HERO
   Aaron's own footage: a dog holding a heel through a crowded street market.
   1280x720, seven seconds, silent, 1.5 MB.

   The video only loads on wider screens and only when the visitor has not
   asked for reduced motion. Everywhere else the poster frame is shown as a
   normal responsive image, so phones never download 1.5 MB of video.
   ========================================================================== */

.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 55%;
  /* Never display:none. Safari refuses to autoplay a hidden video and Chrome
     power saves one, so hiding it until it reports playing is a deadlock: it
     cannot become visible until it plays and it will not play until visible.
     It stays rendered and transparent instead, and the poster sits on top. */
  opacity: 0;
  transition: opacity 500ms var(--ease);
}

.hero__video[data-playing='true'] { opacity: 1; }
.hero__video[data-playing='true'] ~ .hero__still { opacity: 0; }

.hero__still {
  position: absolute;
  inset: 0;
  /* Visible by default. This is the only hero background on mobile, where the
     video is never loaded, so it must not be hidden by anything except an
     actually playing video. */
  opacity: 1;
  transition: opacity 600ms var(--ease);
}

.hero__still img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 55%;
}