/* ============================================================
   Your Local Marketer — "Living Navy" theme layer
   Loaded AFTER styles.css. Adds:
     · a rhythm-based spacing scale (replaces uniform 112px)
     · animated gradient hero + diagnostic form card
     · horizontal work rail (drag / scroll / keyboard)
     · shaped media masks + hand-drawn accents
     · compact proof strip, testimonials, service accordion
   ============================================================ */

:root {
  /* Interactive accent — derived from --sky, not a new brand colour */
  --electric:   #6FC3F0;
  --electric-dk:#3E9FD1;

  /* Spacing rhythm. Sections deliberately differ in weight so the
     page has a cadence instead of ten equal slabs. */
  --sp-band:  clamp(2.25rem, 3.5vw, 3.25rem);   /* thin bands  */
  --sp-tight: clamp(3.25rem, 5vw,   4.5rem);    /* supporting  */
  --sp-sect:  clamp(4.5rem,  7vw,   6.5rem);    /* standard    */
  --sp-hero:  clamp(6rem,    9vw,   8.5rem);    /* feature     */

  /* Consistent internal gutters — kills the inline-style patchwork */
  --gut:      clamp(1rem, 2.5vw, 2rem);
  --stack:    clamp(0.75rem, 1.5vw, 1.25rem);
}

/* Rhythm utilities */
.band  { padding-block: var(--sp-band); }
.tight { padding-block: var(--sp-tight); }
.sect  { padding-block: var(--sp-sect); }

/* ── Living gradient hero ──────────────────────────────────── */
.hero-live {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--navy);
  padding-block: calc(var(--nav-h) + var(--sp-tight)) var(--sp-sect);
}

/* Three slow-drifting radial blobs = Made-style atmosphere, pure CSS */
.hero-live::before,
.hero-live::after,
.hero-aura {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  pointer-events: none;
  z-index: -1;
}
.hero-live::before {
  width: 60vw; height: 60vw;
  top: -22vw; left: -12vw;
  background: radial-gradient(circle, rgba(91,158,201,0.55), transparent 68%);
  animation: drift-a 26s var(--ease-snap) infinite alternate;
}
.hero-live::after {
  width: 48vw; height: 48vw;
  bottom: -20vw; right: -8vw;
  background: radial-gradient(circle, rgba(111,195,240,0.38), transparent 66%);
  animation: drift-b 32s var(--ease-snap) infinite alternate;
}
.hero-aura {
  width: 38vw; height: 38vw;
  top: 30%; left: 45%;
  background: radial-gradient(circle, rgba(232,221,208,0.20), transparent 70%);
  animation: drift-c 38s var(--ease-snap) infinite alternate;
}
@keyframes drift-a {
  from { transform: translate3d(0,0,0)        scale(1);    }
  to   { transform: translate3d(8vw,6vw,0)    scale(1.18); }
}
@keyframes drift-b {
  from { transform: translate3d(0,0,0)        scale(1.1);  }
  to   { transform: translate3d(-9vw,-5vw,0)  scale(0.9);  }
}
@keyframes drift-c {
  from { transform: translate3d(0,0,0)        scale(0.9);  }
  to   { transform: translate3d(-6vw,7vw,0)   scale(1.25); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-live::before, .hero-live::after, .hero-aura { animation: none; }
}

/* Hero grid: copy left, diagnostic right (Supple placement) */
.hero-live-inner {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0, 460px);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
@media (max-width: 1024px) {
  .hero-live-inner { grid-template-columns: 1fr; gap: 2.5rem; }
}

.hero-live h1 {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5.6vw, 4.4rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--white);
  margin-bottom: var(--stack);
  text-wrap: balance;
}
.hero-live h1 em {
  font-style: italic;
  color: var(--sky-light);
  position: relative;
}
.hero-live .hero-lead {
  color: rgba(255,255,255,0.80);
  font-size: clamp(1rem, 1.35vw, 1.14rem);
  line-height: 1.65;
  max-width: 46ch;
  margin-bottom: calc(var(--stack) * 1.6);
}

/* Hand-drawn underline accent (Orchard-style doodle) */
.scribble {
  display: block;
  width: clamp(120px, 16vw, 190px);
  height: auto;
  margin-top: 0.15rem;
  color: var(--electric);
  overflow: visible;
}
.scribble path {
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  fill: none;
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
  transition: stroke-dashoffset 1.1s var(--ease-out) 0.45s;
}
.scribble.drawn path { stroke-dashoffset: 0; }
@media (prefers-reduced-motion: reduce) {
  .scribble path { stroke-dashoffset: 0; transition: none; }
}

/* ── Hero trust row (named clients — the confirmed proof) ──── */
.trust-row {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 2vw, 1.5rem);
  flex-wrap: wrap;
  padding-top: calc(var(--stack) * 1.2);
  border-top: 1px solid rgba(255,255,255,0.14);
}
.trust-row-label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}
.trust-names {
  display: flex;
  align-items: center;
  gap: clamp(0.6rem, 1.5vw, 1.1rem);
  flex-wrap: wrap;
}
.trust-names span {
  font-weight: 600;
  font-size: 0.86rem;
  color: rgba(255,255,255,0.88);
  white-space: nowrap;
}
.trust-names span + span::before {
  content: '·';
  margin-right: clamp(0.6rem, 1.5vw, 1.1rem);
  color: rgba(255,255,255,0.35);
}

/* ── Diagnostic form card ──────────────────────────────────── */
.diag {
  position: relative;
  background: rgba(255,255,255,0.97);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  padding: clamp(1.35rem, 2.2vw, 1.9rem);
  overflow: hidden;
}
/* Subtle top edge in brand sky */
.diag::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, var(--sky), var(--electric), var(--sand));
}

.diag-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.9rem;
}
.diag-kicker {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--sky-dark);
}
.diag-step-count {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  color: var(--warm-grey);
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
}

/* Progress bar — the Zeigarnik pull to finish */
.diag-progress {
  height: 4px;
  background: var(--border);
  border-radius: 99px;
  overflow: hidden;
  margin-bottom: 1.15rem;
}
.diag-progress-fill {
  height: 100%;
  width: 33.33%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--sky), var(--electric));
  transition: width 0.55s var(--ease-out);
}

.diag-q {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.7vw, 1.4rem);
  line-height: 1.25;
  color: var(--navy);
  margin-bottom: 0.3rem;
}
.diag-hint {
  font-size: 0.82rem;
  color: var(--warm-grey);
  line-height: 1.55;
  margin-bottom: 1rem;
}

/* Steps: present in the DOM at all times so Netlify's build-time
   form parser sees every field. We only toggle visibility. */
.diag-step[hidden] { display: none !important; }
.diag-step { animation: slide-up-fade 0.45s var(--ease-out) both; }

/* Option buttons — each tap is a micro-commitment */
.diag-opts {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.diag-opt {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  text-align: left;
  padding: 0.8rem 0.95rem;
  border: 1.5px solid var(--border-mid);
  border-radius: var(--radius);
  background: var(--white);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--charcoal);
  line-height: 1.4;
  transition: border-color 0.2s var(--ease-snap),
              background 0.2s var(--ease-snap),
              transform 0.2s var(--ease-snap),
              box-shadow 0.2s var(--ease-snap);
}
.diag-opt:hover {
  border-color: var(--sky);
  background: rgba(91,158,201,0.055);
  transform: translateX(3px);
  box-shadow: var(--shadow-sm);
}
.diag-opt:focus-visible {
  outline: 2px solid var(--electric-dk);
  outline-offset: 2px;
}
.diag-opt[aria-pressed="true"] {
  border-color: var(--sky-dark);
  background: rgba(91,158,201,0.10);
}
/* Leading marker that fills on selection */
.diag-opt-mark {
  flex: 0 0 auto;
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 1.5px solid var(--border-mid);
  display: grid;
  place-items: center;
  transition: border-color 0.2s, background 0.2s;
}
.diag-opt-mark::after {
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--sky-dark);
  transform: scale(0);
  transition: transform 0.25s var(--ease-out);
}
.diag-opt:hover .diag-opt-mark { border-color: var(--sky); }
.diag-opt[aria-pressed="true"] .diag-opt-mark { border-color: var(--sky-dark); }
.diag-opt[aria-pressed="true"] .diag-opt-mark::after { transform: scale(1); }

/* Echo of their own answers on the final step (labour illusion) */
.diag-echo {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 1rem;
}
.diag-echo-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.6rem;
  border-radius: 99px;
  background: rgba(91,158,201,0.12);
  border: 1px solid rgba(91,158,201,0.25);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--navy);
}
.diag-echo-chip button {
  font-size: 0.85rem;
  line-height: 1;
  color: var(--sky-dark);
  padding: 0 0 0 0.1rem;
}
.diag-echo-chip button:hover { color: var(--navy); }

/* Final-step fields */
.diag-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
}
.diag-fields .full { grid-column: 1 / -1; }
@media (max-width: 420px) {
  .diag-fields { grid-template-columns: 1fr; }
}
.diag-fields label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--slate);
  margin-bottom: 0.28rem;
}
.diag-fields input[type="text"],
.diag-fields input[type="email"],
.diag-fields input[type="tel"] {
  width: 100%;
  padding: 0.6rem 0.7rem;
  border: 1.5px solid var(--border-mid);
  border-radius: var(--radius-sm);
  background: var(--white);
  font-size: 0.88rem;
  color: var(--charcoal);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.diag-fields input:focus {
  outline: none;
  border-color: var(--sky);
  box-shadow: 0 0 0 3px rgba(91,158,201,0.15);
}
.diag-consent {
  grid-column: 1 / -1;
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.72rem;
  line-height: 1.5;
  color: var(--warm-grey);
}
.diag-consent input { margin-top: 0.2rem; flex: 0 0 auto; }
.diag-consent a { color: var(--sky-dark); text-decoration: underline; }

.diag-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1rem;
}
.diag-back {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--warm-grey);
  padding: 0.4rem 0;
}
.diag-back:hover { color: var(--navy); }
.diag-submit {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.8rem 1.2rem;
  border-radius: var(--radius);
  background: var(--navy);
  color: var(--white);
  font-size: 0.9rem;
  font-weight: 600;
  transition: background 0.25s var(--ease-snap), transform 0.2s var(--ease-snap);
}
.diag-submit:hover { background: var(--navy-light); transform: translateY(-2px); }
.diag-submit:focus-visible { outline: 2px solid var(--electric); outline-offset: 2px; }

/* Risk-reversal footnote — kills the "will I get spammed" objection */
.diag-reassure {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.85rem;
  font-size: 0.7rem;
  color: var(--warm-grey);
  line-height: 1.45;
}
.diag-reassure svg { flex: 0 0 auto; color: var(--sky-dark); }

/* ── Proof strip ───────────────────────────────────────────── */
.proof-strip {
  background: var(--cream);
  border-block: 1px solid var(--border);
}
.proof-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1rem, 3vw, 2.5rem);
  flex-wrap: wrap;
}
.proof-claim {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.7vw, 1.35rem);
  line-height: 1.3;
  color: var(--navy);
  max-width: 30ch;
}
.proof-claim em { font-style: italic; color: var(--sky-dark); }
.proof-logos {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  flex-wrap: wrap;
}
.proof-logos img {
  height: clamp(26px, 3vw, 34px);
  width: auto;
  opacity: 0.62;
  filter: grayscale(1);
  transition: opacity 0.3s, filter 0.3s;
}
.proof-logos img:hover { opacity: 1; filter: grayscale(0); }
.proof-logos .proof-name {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--slate);
  opacity: 0.75;
  transition: opacity 0.3s, color 0.3s;
}
.proof-logos .proof-name:hover { opacity: 1; color: var(--navy); }

/* ── Work rail: horizontal drag / scroll gallery ───────────── */
.rail-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--gut);
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
  flex-wrap: wrap;
}
.rail-controls { display: flex; gap: 0.5rem; }
.rail-btn {
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1.5px solid var(--border-mid);
  display: grid;
  place-items: center;
  color: var(--navy);
  background: var(--white);
  transition: background 0.22s, color 0.22s, border-color 0.22s, transform 0.22s;
}
.rail-btn:hover:not(:disabled) {
  background: var(--navy); color: var(--white);
  border-color: var(--navy); transform: translateY(-2px);
}
.rail-btn:disabled { opacity: 0.32; cursor: not-allowed; }
.rail-btn:focus-visible { outline: 2px solid var(--electric-dk); outline-offset: 2px; }

.rail-viewport {
  display: flex;
  gap: clamp(1rem, 2vw, 1.5rem);
  overflow-x: auto;
  /* proximity, not mandatory: mandatory snapping re-snaps every
     programmatic scroll back to offset 0, which made the arrow
     buttons do nothing. proximity keeps the gentle alignment and
     still lets scrollBy() through. */
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  padding-bottom: 1rem;
  /* bleed to the viewport edge so it reads as a rail, not a grid */
  margin-inline: calc(var(--gut) * -1);
  padding-inline: var(--gut);
  scrollbar-width: thin;
  scrollbar-color: var(--border-mid) transparent;
  cursor: grab;
}
.rail-viewport.dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; }
.rail-viewport.dragging * { pointer-events: none; }
.rail-viewport::-webkit-scrollbar { height: 6px; }
.rail-viewport::-webkit-scrollbar-track { background: transparent; }
.rail-viewport::-webkit-scrollbar-thumb {
  background: var(--border-mid); border-radius: 99px;
}

.rail-item {
  flex: 0 0 clamp(270px, 34vw, 400px);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
}
.rail-media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--sand);
  margin-bottom: 0.9rem;
}
.rail-media img,
.rail-media video {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.7s var(--ease-out);
}
.rail-item:hover .rail-media img,
.rail-item:hover .rail-media video { transform: scale(1.05); }

.rail-tag {
  position: absolute;
  top: 0.75rem; left: 0.75rem;
  z-index: 2;
  padding: 0.28rem 0.6rem;
  border-radius: 99px;
  background: rgba(27,43,75,0.86);
  backdrop-filter: blur(6px);
  color: var(--white);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
/* Play affordance only where a video actually exists */
.rail-media[data-video] .rail-play {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  background: rgba(27,43,75,0.20);
  color: var(--white);
  opacity: 1;
  transition: opacity 0.3s;
}
.rail-media[data-video].playing .rail-play { opacity: 0; }
.rail-play span {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: rgba(255,255,255,0.92);
  color: var(--navy);
  display: grid;
  place-items: center;
  box-shadow: var(--shadow);
}

.rail-item h3 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  line-height: 1.25;
  color: var(--navy);
  margin-bottom: 0.3rem;
}
.rail-item p {
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--slate);
  margin-bottom: 0.5rem;
}
.rail-meta {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--warm-grey);
}

/* ── Compact testimonials ──────────────────────────────────── */
.quote-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}
.quote-card {
  display: flex;
  flex-direction: column;
  padding: clamp(1.1rem, 2vw, 1.5rem);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--white);
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out), border-color 0.3s;
}
.quote-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(91,158,201,0.35);
}
.quote-card blockquote {
  font-size: 0.93rem;
  line-height: 1.65;
  color: var(--charcoal);
  margin-bottom: 1rem;
  flex: 1;
}
.quote-card blockquote::before {
  content: '\201C';
  font-family: var(--font-display);
  font-size: 2.4rem;
  line-height: 0.6;
  color: var(--sky-light);
  display: block;
  margin-bottom: 0.3rem;
}
.quote-who {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--border);
}
.quote-who strong { font-size: 0.88rem; color: var(--navy); }
.quote-who span {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--warm-grey);
}

/* ── Service accordion (short on screen, full text for crawlers) ── */
.acc { border-top: 1px solid var(--border); }
.acc-item { border-bottom: 1px solid var(--border); }
.acc-trigger {
  display: flex;
  align-items: center;
  gap: var(--gut);
  width: 100%;
  padding: clamp(0.9rem, 1.6vw, 1.15rem) 0;
  text-align: left;
  transition: color 0.22s, padding-left 0.28s var(--ease-snap);
}
.acc-trigger:hover { color: var(--sky-dark); padding-left: 0.5rem; }
.acc-trigger:focus-visible { outline: 2px solid var(--electric-dk); outline-offset: 2px; }
.acc-num {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--warm-grey);
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
}
.acc-name {
  flex: 1;
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  font-weight: 600;
  color: inherit;
}
.acc-sign {
  flex: 0 0 auto;
  width: 22px; height: 22px;
  position: relative;
  color: var(--sky-dark);
}
.acc-sign::before, .acc-sign::after {
  content: '';
  position: absolute;
  inset: 50% 0 auto 0;
  height: 1.5px;
  background: currentColor;
  transition: transform 0.3s var(--ease-out);
}
.acc-sign::after { transform: rotate(90deg); }
.acc-trigger[aria-expanded="true"] .acc-sign::after { transform: rotate(0deg); }
.acc-panel {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.4s var(--ease-out);
}
.acc-panel > div {
  padding-bottom: clamp(0.9rem, 1.6vw, 1.25rem);
  padding-left: calc(0.7rem + var(--gut));
  max-width: 62ch;
}
.acc-panel p { font-size: 0.9rem; line-height: 1.65; color: var(--slate); }
.acc-panel a {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.6rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--sky-dark);
}
.acc-panel a:hover { color: var(--navy); }

/* ── Closing CTA ───────────────────────────────────────────── */
.close-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--navy);
  text-align: center;
}
.close-cta::before {
  content: '';
  position: absolute;
  z-index: -1;
  width: 70vw; height: 70vw;
  top: -30vw; left: 50%;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(91,158,201,0.32), transparent 65%);
  filter: blur(60px);
}
.close-cta h2 {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 4vw, 3rem);
  line-height: 1.1;
  color: var(--white);
  margin-bottom: var(--stack);
  text-wrap: balance;
}
.close-cta h2 em { font-style: italic; color: var(--sky-light); }
.close-cta p {
  color: rgba(255,255,255,0.78);
  max-width: 52ch;
  margin: 0 auto calc(var(--stack) * 1.5);
  line-height: 1.65;
}
/* Reassurance list — risk reversal, not fake scarcity */
.cta-assure {
  display: flex;
  justify-content: center;
  gap: clamp(0.75rem, 2.5vw, 2rem);
  flex-wrap: wrap;
  margin-top: calc(var(--stack) * 1.5);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.60);
}
.cta-assure li { display: flex; align-items: center; gap: 0.4rem; }
.cta-assure svg { color: var(--sky-light); flex: 0 0 auto; }

/* ── Section heading helper (replaces inline styles) ───────── */
.sh { margin-bottom: clamp(1.5rem, 3vw, 2.25rem); max-width: 62ch; }
.sh--center { margin-inline: auto; text-align: center; }
.sh h2 {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.4vw, 2.7rem);
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--navy);
  text-wrap: balance;
}
.sh h2 em { font-style: italic; color: var(--sky-dark); }
.sh p {
  margin-top: var(--stack);
  color: var(--slate);
  line-height: 1.65;
}
.sh .eyebrow { margin-bottom: 0.6rem; display: inline-block; }

/* Visually hidden but crawlable / screen-reader available */
.vh {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ── Logo legibility ──────────────────────────────────────────
   The full logo carries a tagline line ("Your speed-dial marketing
   consultant") inside the artwork. At 34px tall that text renders
   ~2px high and turns to mush, so give it a little more room. */
.nav-logo img   { height: 40px; }
@media (max-width: 600px) { .nav-logo img { height: 34px; } }

/* ── Legal / long-form document pages ─────────────────────────
   A single readable measure. Spacing comes from the scale, not
   from per-element inline styles. */
.legal-doc {
  max-width: 70ch;
  color: var(--slate);
  font-size: 0.95rem;
  line-height: 1.75;
}
.legal-doc > * + * { margin-top: 1rem; }
.legal-updated {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--warm-grey);
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--border);
}
.legal-doc h2 {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  line-height: 1.25;
  color: var(--navy);
  margin-top: 2.5rem !important;
}
.legal-doc h3 {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--navy);
  margin-top: 1.5rem !important;
}
.legal-doc a {
  color: var(--sky-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.legal-doc a:hover { color: var(--navy); }
.legal-doc strong { color: var(--charcoal); font-weight: 600; }
.legal-list { display: grid; gap: 0.6rem; padding-left: 0; }
.legal-list li {
  position: relative;
  padding-left: 1.15rem;
}
.legal-list li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.65em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--sky);
}

/* ── No-JS safety net ─────────────────────────────────────────
   .reveal elements start at opacity 0 and are only shown once an
   IntersectionObserver adds .visible. If JS fails or is blocked,
   that content would stay invisible forever — and on the homepage
   the testimonials are the only .reveal elements, so the social
   proof would silently vanish. An inline script in <head> sets
   .js on <html>; without it, reveal content is simply shown. */
html:not(.js) .reveal,
html:not(.js) .reveal-left,
html:not(.js) .reveal-right,
html:not(.js) .reveal-scale {
  opacity: 1 !important;
  transform: none !important;
}
html:not(.js) .scribble path { stroke-dashoffset: 0; }

/* Respect a reduced-motion preference in the work rail.
   styles.css resets html{scroll-behavior:auto} under this query, but
   .rail-viewport sets its own smooth value, which would otherwise win. */
@media (prefers-reduced-motion: reduce) {
  .rail-viewport { scroll-behavior: auto; scroll-snap-type: none; }
}

/* The "·" separator is an ::before on each name, so when the list wraps
   it can start a line ("· ClearGrow"). Below the wrap point, drop the
   dots and let the gap do the separating. */
@media (max-width: 760px) {
  .trust-names { gap: 0.4rem 1.1rem; }
  .trust-names span + span::before { content: none; margin-right: 0; }
}

/* ── Brand lockup ─────────────────────────────────────────────
   The supplied logo PNGs bake the wordmark AND the "Your speed-dial
   marketing consultant" tagline into one raster. At nav size that
   tagline renders about 2px tall — unreadable — and serving light and
   dark variants meant two PNG requests with a display:none swap.

   So: take only the pin mark from the artwork and set the wordmark as
   live text in the brand fonts. Crisp at any size, one request, colour
   switches with CSS, and it's real text for screen readers and
   crawlers. Wordmark styling mirrors the original artwork: sans for
   "Your"/"Marketer", italic serif for "Local". */
.brand {
  --pin-h: 1.9em;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-size: var(--brand-size, 1.0625rem);
  line-height: 1;
  flex-shrink: 0;
  text-decoration: none;
}

/* Source is 1200x1200 with the mark in a 588x750 box at (306,105).
   These ratios crop to exactly that, so the pin fills its box with no
   baked-in padding: 588/750=.784, 1200/750=1.6, 306/750=.408, 105/750=.14 */
.brand-pin {
  flex: 0 0 auto;
  height: var(--pin-h);
  width: calc(var(--pin-h) * 0.784);
  background-image: url('assets/logos/YourLocalMarketer-Icon-Transparent.png');
  background-repeat: no-repeat;
  background-size: calc(var(--pin-h) * 1.6) calc(var(--pin-h) * 1.6);
  background-position: calc(var(--pin-h) * -0.408) calc(var(--pin-h) * -0.14);
}

.brand-word {
  display: inline-flex;
  align-items: baseline;
  gap: 0.24em;
  white-space: nowrap;
}
.brand-word b {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 1em;
  letter-spacing: -0.01em;
  color: var(--brand-ink, var(--white));
  transition: color 0.35s;
}
.brand-word em {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.16em;
  letter-spacing: -0.01em;
  color: var(--brand-accent, var(--sky-light));
  transition: color 0.35s;
}

/* Colour states. Nav is transparent over a dark hero until scrolled,
   then frosted white; the footer is always dark. */
.site-nav .brand          { --brand-ink: var(--white); --brand-accent: var(--sky-light); }
.site-nav.scrolled .brand { --brand-ink: var(--navy);  --brand-accent: var(--sky-dark);  }
.site-footer .brand       { --brand-ink: var(--white); --brand-accent: var(--sky-light); }

.site-nav .brand    { --brand-size: 1.0625rem; }
.site-footer .brand { --brand-size: 1rem; }
@media (max-width: 600px) {
  .site-nav .brand { --brand-size: 0.95rem; }
}
/* Very narrow: keep the pin, drop the wordmark rather than let it
   collide with the menu button. aria-label on the link still names it. */
@media (max-width: 380px) {
  .site-nav .brand-word { display: none; }
}

/* ── Service list (native <details>) ─────────────────────────
   Using <details> rather than a JS accordion: it opens and closes
   with zero JavaScript, the closed content is still in the DOM for
   crawlers, and browser find-in-page can expand it. */
.svc-group { border-top: 1px solid var(--border); margin-bottom: var(--sp-tight); }

.svc { border-bottom: 1px solid var(--border); }
.svc > summary {
  display: flex;
  align-items: center;
  gap: var(--gut);
  padding: clamp(0.9rem, 1.6vw, 1.2rem) 0;
  cursor: pointer;
  list-style: none;
  transition: padding-left 0.28s var(--ease-snap), color 0.22s;
}
.svc > summary::-webkit-details-marker { display: none; }
.svc > summary:hover { color: var(--sky-dark); padding-left: 0.5rem; }
.svc > summary:focus-visible { outline: 2px solid var(--electric-dk); outline-offset: 3px; }

.svc-name {
  flex: 1;
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  font-weight: 600;
  color: inherit;
}
.svc-tag {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--sky-dark);
  background: rgba(91,158,201,0.10);
  border: 1px solid rgba(91,158,201,0.22);
  border-radius: 99px;
  padding: 0.22rem 0.55rem;
}
@media (max-width: 560px) { .svc-tag { display: none; } }

/* Plus/minus that flips to a minus when open */
.svc-sign {
  flex: 0 0 auto;
  position: relative;
  width: 20px; height: 20px;
  color: var(--sky-dark);
}
.svc-sign::before, .svc-sign::after {
  content: '';
  position: absolute;
  inset: 50% 0 auto 0;
  height: 1.5px;
  background: currentColor;
  transition: transform 0.3s var(--ease-out);
}
.svc-sign::after { transform: rotate(90deg); }
.svc[open] .svc-sign::after { transform: rotate(0deg); }

.svc-body {
  padding: 0 0 clamp(1rem, 2vw, 1.5rem);
  max-width: 68ch;
  animation: slide-up-fade 0.35s var(--ease-out) both;
}
.svc-body > p {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--slate);
  margin-bottom: 1rem;
}
.svc-includes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 1.1rem;
}
.svc-includes li {
  font-size: 0.76rem;
  line-height: 1.3;
  color: var(--navy);
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.35rem 0.6rem;
}
.svc-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--sky-dark);
}
.svc-cta:hover { color: var(--navy); }

/* Outcome group heading */
.svc-head { margin-bottom: clamp(0.9rem, 1.8vw, 1.25rem); }
.svc-head h2 {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.6vw, 1.9rem);
  line-height: 1.18;
  color: var(--navy);
}
.svc-head h2 em { font-style: italic; color: var(--sky-dark); }
.svc-head p {
  margin-top: 0.4rem;
  font-size: 0.9rem;
  color: var(--warm-grey);
  max-width: 56ch;
}

/* Deep-linked service gets a brief highlight so it's obvious which
   one the link pointed at. */
.svc:target > summary { background: rgba(91,158,201,0.07); }

/* ── Engagement models strip ─────────────────────────────────── */
.models {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}
.model {
  padding: clamp(1.1rem, 2vw, 1.4rem);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out), border-color 0.3s;
}
.model:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(91,158,201,0.35);
}
.model h3 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--navy);
  margin-bottom: 0.35rem;
}
.model p { font-size: 0.87rem; line-height: 1.6; color: var(--slate); }
.model-kicker {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sky-dark);
  display: block;
  margin-bottom: 0.5rem;
}

/* ── FAQ ─────────────────────────────────────────────────────── */
.faq { max-width: 72ch; }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-item:first-child { border-top: 1px solid var(--border); }
.faq-item > summary {
  display: flex;
  align-items: center;
  gap: var(--gut);
  padding: clamp(0.85rem, 1.5vw, 1.1rem) 0;
  cursor: pointer;
  list-style: none;
  font-size: 0.97rem;
  font-weight: 600;
  color: var(--navy);
  transition: color 0.22s;
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary:hover { color: var(--sky-dark); }
.faq-item > summary:focus-visible { outline: 2px solid var(--electric-dk); outline-offset: 3px; }
.faq-q { flex: 1; }
.faq-a {
  padding: 0 0 clamp(0.9rem, 1.8vw, 1.25rem);
  font-size: 0.92rem;
  line-height: 1.7;
  color: var(--slate);
  max-width: 64ch;
  animation: slide-up-fade 0.3s var(--ease-out) both;
}
.faq-a a { color: var(--sky-dark); text-decoration: underline; text-underline-offset: 2px; }

/* ── Filterable gallery (work page) ──────────────────────────
   Deliberately uses .gal-filter, not .filter-btn. main.js owns
   .filter-btn for the insights page and its handler targets
   .insight-card, so reusing that class here is what left the work
   filters dead. Different class = main.js early-returns, no clash. */
.gal-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}
.gal-filter {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.9rem;
  border: 1.5px solid var(--border-mid);
  border-radius: 99px;
  background: var(--white);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--slate);
  transition: border-color 0.22s, background 0.22s, color 0.22s, transform 0.2s var(--ease-snap);
}
.gal-filter:hover { border-color: var(--sky); color: var(--navy); transform: translateY(-1px); }
.gal-filter:focus-visible { outline: 2px solid var(--electric-dk); outline-offset: 2px; }
.gal-filter[aria-pressed="true"] {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--white);
}
.gal-filter-count {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  opacity: 0.6;
  font-variant-numeric: tabular-nums;
}

.gal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
}
.gal-item {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out), border-color 0.3s;
}
.gal-item:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(91,158,201,0.35);
}
/* Filtered-out state — animated rather than display:none popping */
.gal-item[hidden] { display: none; }
.gal-item.entering { animation: slide-up-fade 0.4s var(--ease-out) both; }

.gal-media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--navy);
}
.gal-media img,
.gal-media video {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.7s var(--ease-out);
}
.gal-item:hover .gal-media img { transform: scale(1.04); }
.gal-media-label {
  position: absolute;
  top: 0.75rem; left: 0.75rem;
  z-index: 2;
  padding: 0.28rem 0.6rem;
  border-radius: 99px;
  background: rgba(27,43,75,0.86);
  backdrop-filter: blur(6px);
  color: var(--white);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.gal-body { padding: clamp(1.1rem, 2vw, 1.5rem); flex: 1; display: flex; flex-direction: column; }
.gal-where {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--warm-grey);
  margin-bottom: 0.5rem;
}
.gal-body h3 {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2vw, 1.45rem);
  line-height: 1.2;
  color: var(--navy);
  margin-bottom: 0.5rem;
}
.gal-body > p {
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--slate);
  margin-bottom: 1rem;
}

/* Headline result, pulled out of the bullet list where it was buried */
.gal-result {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.75rem 0.9rem;
  margin-bottom: 1rem;
  background: var(--cream);
  border-left: 3px solid var(--sky);
  border-radius: var(--radius-sm);
}
.gal-result strong {
  font-family: var(--font-display);
  font-size: 1.35rem;
  line-height: 1;
  color: var(--navy);
  white-space: nowrap;
}
.gal-result span { font-size: 0.78rem; line-height: 1.45; color: var(--slate); }

.gal-did {
  display: grid;
  gap: 0.4rem;
  margin-bottom: 1.1rem;
}
.gal-did li {
  position: relative;
  padding-left: 1.1rem;
  font-size: 0.84rem;
  line-height: 1.55;
  color: var(--slate);
}
.gal-did li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.6em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--sky);
}

.gal-foot {
  margin-top: auto;
  padding-top: 0.9rem;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.gal-tags { display: flex; gap: 0.3rem; flex-wrap: wrap; }
.gal-tags span {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--sky-dark);
  background: rgba(91,158,201,0.10);
  border-radius: 99px;
  padding: 0.2rem 0.5rem;
}
.gal-link {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--sky-dark);
  white-space: nowrap;
}
.gal-link:hover { color: var(--navy); }

.gal-empty {
  padding: 2.5rem 0;
  text-align: center;
  color: var(--warm-grey);
  font-size: 0.9rem;
}

/* ── Compact skill chips (about page) ────────────────────────── */
.skills { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.skills li {
  font-size: 0.82rem;
  color: var(--navy);
  background: var(--white);
  border: 1px solid var(--border-mid);
  border-radius: 99px;
  padding: 0.4rem 0.8rem;
  transition: border-color 0.22s, transform 0.2s var(--ease-snap);
}
.skills li:hover { border-color: var(--sky); transform: translateY(-1px); }

/* ── Reason cards (about page) ───────────────────────────────── */
.reasons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(0.9rem, 2vw, 1.35rem);
  counter-reset: reason;
}
.reason {
  position: relative;
  padding: clamp(1.1rem, 2vw, 1.4rem);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out), border-color 0.3s;
}
.reason:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(91,158,201,0.35);
}
.reason::before {
  counter-increment: reason;
  content: counter(reason, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  color: var(--sky-dark);
  letter-spacing: 0.08em;
  display: block;
  margin-bottom: 0.55rem;
}
.reason h3 {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 0.4rem;
  line-height: 1.35;
}
.reason p { font-size: 0.86rem; line-height: 1.6; color: var(--slate); }

/* ── Portrait (about page) ───────────────────────────────────── */
.portrait-wrap { position: relative; }
.portrait {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius-xl);
  background: var(--sand);
}
.portrait img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.portrait-badge {
  position: absolute;
  bottom: -0.9rem; left: 1.25rem; right: 1.25rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 0.75rem 0.9rem;
}
.portrait-badge strong { display: block; font-size: 0.92rem; color: var(--navy); }
.portrait-badge span {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--warm-grey);
}
.about-cols {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: start;
}
@media (max-width: 860px) {
  .about-cols { grid-template-columns: 1fr; }
  .portrait { max-width: 340px; }
}

/* ── Prose helpers (replaces repeated inline paragraph styles) ── */
.prose > p {
  color: var(--slate);
  line-height: 1.75;
}
.prose > p + p { margin-top: 1rem; }
.prose > p:first-child { margin-top: var(--stack); }

.label-mono {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--warm-grey);
  margin-top: 2rem;
  margin-bottom: 0.75rem;
}
.note {
  margin-top: 1.5rem;
  font-size: 0.88rem;
  line-height: 1.7;
  color: var(--slate);
  max-width: 64ch;
}
.note strong { color: var(--navy); }
.stack-cta { margin-top: 1.75rem; }

/* ── Contact page ────────────────────────────────────────────── */
.contact-lines { display: grid; gap: 0.6rem; margin-bottom: 0.5rem; }
.contact-line {
  display: grid;
  grid-template-columns: 6.5rem 1fr;
  gap: 0.75rem;
  align-items: baseline;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--border);
}
.contact-line-k {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--warm-grey);
}
.contact-line-v { font-size: 0.9rem; color: var(--charcoal); line-height: 1.5; }
a.contact-line:hover .contact-line-v { color: var(--sky-dark); }

/* Numbered "what happens next" */
.steps { display: grid; gap: 1rem; counter-reset: step; }
.steps li {
  position: relative;
  padding-left: 2.25rem;
  counter-increment: step;
}
.steps li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0; top: 0.1rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--sky-dark);
  letter-spacing: 0.06em;
}
.steps h4 {
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 0.2rem;
}
.steps p { font-size: 0.86rem; line-height: 1.6; color: var(--slate); }

.reassure-box {
  margin-top: 1.75rem;
  padding: 1.1rem 1.25rem;
  background: var(--cream);
  border: 1px solid var(--border);
  border-left: 3px solid var(--sky);
  border-radius: var(--radius);
}
.reassure-box p { font-size: 0.87rem; line-height: 1.65; color: var(--slate); }
.reassure-box strong { color: var(--navy); }

.social-link--light {
  background: var(--cream);
  border: 1px solid var(--border);
  color: var(--slate);
}
.social-link--light:hover { background: var(--navy); color: var(--white); border-color: var(--navy); }

.form-card-title {
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--navy);
  margin-bottom: 0.3rem;
}
.form-card-sub {
  font-size: 0.85rem;
  color: var(--warm-grey);
  line-height: 1.55;
  margin-bottom: 1.5rem;
}
.form-note {
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--warm-grey);
  margin-top: 0.75rem;
}

/* Optional-details disclosure inside the form. Keeps the form looking
   short — perceived length is what drives abandonment — while the
   qualifying fields stay available to anyone who wants to give them. */
.form-more {
  border: 1px dashed var(--border-mid);
  border-radius: var(--radius);
  padding: 0.75rem 0.9rem;
  background: rgba(245,240,232,0.5);
}
.form-more > summary {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  cursor: pointer;
  list-style: none;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--navy);
}
.form-more > summary::-webkit-details-marker { display: none; }
.form-more > summary:hover { color: var(--sky-dark); }
.form-more > summary:focus-visible { outline: 2px solid var(--electric-dk); outline-offset: 3px; }
/* The label takes the slack, not the hint. Giving the hint flex:1 made
   it stretch and then wrap its uppercase, letter-spaced text over four
   lines inside the narrow form column. */
.form-more > summary > span:first-child { flex: 1; }
.form-more-hint {
  flex: 0 0 auto;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--warm-grey);
}
@media (max-width: 620px) { .form-more-hint { display: none; } }

/* ── Article list (insights) ─────────────────────────────────── */
.post-list { border-top: 1px solid var(--border); }
.post { border-bottom: 1px solid var(--border); }
.post-link {
  display: block;
  padding: clamp(1.25rem, 2.5vw, 1.85rem) 0;
  transition: padding-left 0.3s var(--ease-snap);
}
.post-link:hover { padding-left: 0.6rem; }
.post-link:focus-visible { outline: 2px solid var(--electric-dk); outline-offset: 3px; }

.post-meta {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--warm-grey);
  margin-bottom: 0.6rem;
}
.post-cat { color: var(--sky-dark); }
.post-dot { opacity: 0.5; }

.post-link h3 {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2.4vw, 1.65rem);
  line-height: 1.22;
  color: var(--navy);
  margin-bottom: 0.5rem;
  max-width: 40ch;
  transition: color 0.22s;
}
.post-link:hover h3 { color: var(--sky-dark); }
.post-link > p {
  font-size: 0.92rem;
  line-height: 1.7;
  color: var(--slate);
  max-width: 64ch;
  margin-bottom: 0.6rem;
}
.post-more {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--sky-dark);
}

/* ── "Coming next" queue ─────────────────────────────────────── */
.queue {
  display: grid;
  gap: 0.5rem;
  max-width: 62ch;
}
.queue li {
  position: relative;
  padding: 0.55rem 0 0.55rem 1.5rem;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--slate);
  border-bottom: 1px dashed var(--border);
}
.queue li::before {
  content: '';
  position: absolute;
  left: 0; top: 1.05em;
  width: 9px; height: 9px;
  border: 1.5px solid var(--sky);
  border-radius: 50%;
}

/* ── Light-top pages (blog articles) ─────────────────────────
   Most pages open on a dark hero, so the nav starts transparent with
   white text. Blog posts open straight onto white, where white-on-
   white made the wordmark and links invisible until you scrolled 40px.
   Pages that open light opt in with data-nav="solid" on <body>. */
body[data-nav="solid"] .site-nav {
  background: rgba(255,255,255,0.94);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-bottom-color: rgba(226,218,208,0.7);
  box-shadow: 0 4px 24px rgba(27,43,75,0.06);
}
body[data-nav="solid"] .site-nav .brand {
  --brand-ink: var(--navy);
  --brand-accent: var(--sky-dark);
}
body[data-nav="solid"] .site-nav .nav-links a { color: var(--slate); }
body[data-nav="solid"] .site-nav .nav-links a:hover,
body[data-nav="solid"] .site-nav .nav-links a[aria-current="page"] { color: var(--navy); }
body[data-nav="solid"] .site-nav .nav-links a:hover { background: rgba(27,43,75,0.05); }
body[data-nav="solid"] .site-nav .nav-toggle span { background: var(--navy); }

/* Crop a tall image into a wide card from its upper part. For
   portrait creatives (tpv-portfolio.jpg) this keeps the brand mark and
   the subject, and drops the fine print that usually sits at the bottom. */
.media-upper { object-position: center 20%; }

/* ── Thank-you page ─────────────────────────────────────────── */
.ty-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: start;
}
@media (max-width: 880px) { .ty-cols { grid-template-columns: 1fr; } }

/* Section heading without the eyebrow/centre treatment */
.sh-plain {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.4vw, 1.75rem);
  line-height: 1.2;
  color: var(--navy);
  margin-bottom: 1rem;
}
.ty-sub {
  font-size: 0.9rem;
  color: var(--warm-grey);
  line-height: 1.6;
  margin-top: -0.5rem;
  margin-bottom: 1rem;
}
.ty-links {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-top: 1.25rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--sky-dark);
}
.ty-links span { color: var(--border-mid); font-weight: 400; }
.ty-links a:hover { color: var(--navy); }
/* On this page the article rows are a secondary element, so tighten them */
.ty-cols .post-link { padding-block: 0.9rem; }
.ty-cols .post-link h3 { font-size: clamp(1rem, 1.6vw, 1.1rem); margin-bottom: 0.35rem; }

/* ── Pricing ─────────────────────────────────────────────────
   Numbers are the content here, so they take the display face and
   tabular figures. Was previously lost when a git checkout reverted
   this file; kept together in one block so that can't happen quietly
   again. */

/* The entry offer, given its own weight above the tiers */
.price-feature {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1.25rem, 4vw, 3rem);
  flex-wrap: wrap;
  padding: clamp(1.4rem, 3vw, 2.25rem);
  background: var(--cream);
  border: 1px solid var(--border);
  border-left: 3px solid var(--sky);
  border-radius: var(--radius-lg);
}
.price-feature h3 {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  line-height: 1.2;
  color: var(--navy);
  margin-bottom: 0.5rem;
}
.price-feature p {
  font-size: 0.94rem;
  line-height: 1.7;
  color: var(--slate);
  max-width: 54ch;
}
.price-feature-tag { flex: 0 0 auto; text-align: right; }
.price-unit {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--warm-grey);
  margin-top: 0.3rem;
}

/* ── Tier cards ─────────────────────────────────────────────── */
.tiers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(1rem, 2.2vw, 1.6rem);
  align-items: stretch;
}
.tier {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: clamp(1.4rem, 2.6vw, 1.9rem);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: transform 0.3s var(--ease-out),
              box-shadow 0.3s var(--ease-out),
              border-color 0.3s;
}
.tier:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(91,158,201,0.45);
}
/* The one most people pick, marked so the choice is easier to make */
.tier--featured {
  border-color: var(--sky);
  box-shadow: var(--shadow);
}
.tier-flag {
  position: absolute;
  top: -0.65rem; left: clamp(1.4rem, 2.6vw, 1.9rem);
  padding: 0.25rem 0.65rem;
  border-radius: 99px;
  background: var(--navy);
  color: var(--white);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  white-space: nowrap;
}
.tier-head h3 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  line-height: 1.2;
  color: var(--navy);
  margin-bottom: 0.2rem;
}
.tier-for {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--warm-grey);
}
.tier-price {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  flex-wrap: wrap;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}
.tier-num {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.6vw, 2.6rem);
  line-height: 1;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}
.tier-per {
  font-size: 0.8rem;
  color: var(--warm-grey);
}
.tier-list {
  display: grid;
  gap: 0.55rem;
  flex: 1;
}
.tier-list li {
  position: relative;
  padding-left: 1.5rem;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--slate);
}
.tier-list li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.42em;
  width: 12px; height: 7px;
  border-left: 2px solid var(--sky);
  border-bottom: 2px solid var(--sky);
  transform: rotate(-45deg);
}
.tier-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.7rem 1rem;
  border-radius: var(--radius);
  border: 1.5px solid var(--border-mid);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--navy);
  transition: background 0.25s var(--ease-snap), color 0.25s, border-color 0.25s;
}
.tier-cta:hover { background: var(--navy); border-color: var(--navy); color: var(--white); }
.tier-cta:focus-visible { outline: 2px solid var(--electric-dk); outline-offset: 2px; }
.tier--featured .tier-cta { background: var(--navy); border-color: var(--navy); color: var(--white); }
.tier--featured .tier-cta:hover { background: var(--navy-light); border-color: var(--navy-light); }

/* ── Standalone price rows ──────────────────────────────────── */
.price-list {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--border);
}
.price-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1rem, 4vw, 3rem);
  padding: clamp(1.1rem, 2.2vw, 1.5rem) 0.25rem;
  border-bottom: 1px solid var(--border);
  transition: background 0.25s, padding-left 0.28s var(--ease-snap);
}
.price-list li:hover {
  background: rgba(91,158,201,0.045);
  padding-left: 0.75rem;
}
.price-what { min-width: 0; }
.price-what strong {
  display: block;
  font-size: 1.02rem;
  color: var(--navy);
  margin-bottom: 0.3rem;
}
.price-what span {
  display: block;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--slate);
  max-width: 56ch;
}
.price-amount {
  flex: 0 0 auto;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.4vw, 1.75rem);
  line-height: 1;
  color: var(--navy);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.price-amount small {
  font-family: var(--font-body);
  font-size: 0.44em;
  font-weight: 500;
  color: var(--warm-grey);
  letter-spacing: 0;
}

@media (max-width: 560px) {
  .price-list li { flex-direction: column; align-items: flex-start; gap: 0.6rem; }
  .price-list li:hover { padding-left: 0.25rem; }
  .price-feature-tag { text-align: left; }
}

/* "from $X" chip beside a service name on the services page */
.svc-price {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.03em;
  color: var(--navy);
  background: var(--sand);
  border-radius: 99px;
  padding: 0.26rem 0.62rem;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 680px) { .svc-price { display: none; } }

/* ── Tier extras: inheritance label and shared guarantees ───── */
.tier-inherit {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--sky-dark);
  margin-top: -0.35rem;
}
.tier-common {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(0.75rem, 2.5vw, 2rem);
  margin-top: clamp(1.25rem, 2.5vw, 1.75rem);
  padding-top: clamp(1.25rem, 2.5vw, 1.75rem);
  border-top: 1px solid var(--border);
}
.tier-common li {
  position: relative;
  padding-left: 1.4rem;
  font-size: 0.85rem;
  color: var(--slate);
}
.tier-common li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.38em;
  width: 11px; height: 6px;
  border-left: 2px solid var(--sky);
  border-bottom: 2px solid var(--sky);
  transform: rotate(-45deg);
}

/* ── Add-ons ────────────────────────────────────────────────
   Shows the full range of work without implying any of it is
   included in a monthly tier. */
.addons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(0.85rem, 1.8vw, 1.25rem);
}
.addon {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: clamp(1.1rem, 2.2vw, 1.5rem);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: transform 0.3s var(--ease-out),
              box-shadow 0.3s var(--ease-out),
              border-color 0.3s;
}
.addon:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(91,158,201,0.45);
}
.addon:focus-visible { outline: 2px solid var(--electric-dk); outline-offset: 3px; }
.addon-name {
  font-family: var(--font-display);
  font-size: 1.15rem;
  line-height: 1.2;
  color: var(--navy);
}
.addon-desc {
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--slate);
  flex: 1;
}
.addon-price {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: var(--navy);
  padding-top: 0.6rem;
  border-top: 1px solid var(--border);
  font-variant-numeric: tabular-nums;
}
.addon-price small {
  font-family: var(--font-body);
  font-size: 0.85em;
  color: var(--warm-grey);
}

/* ── Nav legibility over light backgrounds ───────────────────
   The wordmark was staying white once scrolled while the nav links
   correctly went dark. The links set `color` directly; the brand set a
   custom property on .brand that .brand-word b then read through var().
   That indirection is one more thing that has to resolve, and it was
   losing. Set the colours directly on the elements that paint them.

   The scrolled bar is also solid rather than 94% translucent, so the
   text never has to compete with whatever section is passing behind. */
.site-nav.scrolled {
  background: var(--white);
}
.site-nav.scrolled .brand-word b  { color: var(--navy); }
.site-nav.scrolled .brand-word em { color: var(--sky-dark); }
.site-nav.scrolled .brand-pin     { opacity: 1; }

/* Same treatment for pages that opt into a solid nav from the start */
body[data-nav="solid"] .site-nav { background: var(--white); }
body[data-nav="solid"] .site-nav .brand-word b  { color: var(--navy); }
body[data-nav="solid"] .site-nav .brand-word em { color: var(--sky-dark); }

/* A hairline keeps the white bar from merging into a white page */
.site-nav.scrolled,
body[data-nav="solid"] .site-nav {
  border-bottom: 1px solid rgba(27,43,75,0.10);
}

/* The free-audit offer inside the entry card */
.price-offer {
  margin-top: 0.85rem;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--navy);
  font-weight: 600;
}
.price-offer-cta {
  margin-top: 0.9rem;
  font-size: 0.85rem;
  padding: 0.7rem 1.15rem;
}

/* Anchor a crop to the top of the image. For artwork where the brand
   mark sits at the top edge, a centred crop into a wider card clips it. */
.media-top { object-position: center top; }

/* ── Client marquee (proof strip) ────────────────────────────
   Two identical groups in a track that slides exactly -50%, so the loop
   has no seam. Pauses on hover so a name can actually be read, fades at
   both edges, and stops entirely for people who ask for reduced motion.
   Each client is a text wordmark until logo files exist: replace the
   .cm-mark span with an <img> and the layout holds. */
.proof-lead { flex: 0 1 34ch; min-width: 0; }
.proof-kicker {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--warm-grey);
  margin-bottom: 0.4rem;
}

.cm {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.cm-track {
  display: flex;
  width: max-content;
  animation: cm-scroll 32s linear infinite;
}
.cm:hover .cm-track,
.cm:focus-within .cm-track { animation-play-state: paused; }

.cm-group {
  display: flex;
  align-items: center;
  gap: clamp(2rem, 4vw, 3.5rem);
  padding-right: clamp(2rem, 4vw, 3.5rem);   /* matches the gap, so the join is even */
}
.cm-item { flex: 0 0 auto; }
.cm-mark {
  display: inline-block;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.7vw, 1.3rem);
  letter-spacing: -0.005em;
  color: var(--slate);
  opacity: 0.55;
  white-space: nowrap;
  transition: opacity 0.3s, color 0.3s;
}
.cm-item:hover .cm-mark { opacity: 1; color: var(--navy); }
/* real logos, once supplied */
.cm-item img {
  height: clamp(24px, 3vw, 32px);
  width: auto;
  filter: grayscale(1);
  opacity: 0.6;
  transition: filter 0.3s, opacity 0.3s;
}
.cm-item:hover img { filter: none; opacity: 1; }

@keyframes cm-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .cm-track { animation: none; }
  .cm { -webkit-mask-image: none; mask-image: none; }
  .cm-group[aria-hidden="true"] { display: none; }
  .cm-group { flex-wrap: wrap; row-gap: 0.75rem; }
}

@media (max-width: 760px) {
  .proof-lead { flex-basis: 100%; }
  .cm { flex-basis: 100%; }
}