/* Fonts: self-hosted (no request to Google; GDPR). Inter is one variable file for 400-600. */
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Instrument Serif";
  src: url("../fonts/instrument-serif-italic-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* Arial adjusted to Inter's metrics, shown until Inter has loaded. */
@font-face {
  font-family: "Inter Fallback";
  src: local("Arial");
  size-adjust: 107.4%;
  ascent-override: 90.2%;
  descent-override: 22.5%;
  line-gap-override: 0%;
}

:root {
  color-scheme: light;

  /* Brand */
  --colour-accent: #D18E80;          /* terracotta: fills, rules, highlights */
  --colour-accent-strong: #9A5646;   /* terracotta for text on light ground (AA contrast) */
  --colour-accent-soft: rgba(209, 142, 128, 0.14);

  /* Fixed ink and paper, for elements that must not flip with the section theme */
  --colour-ink: #1F1A17;
  --colour-paper: #F7F2EC;

  /* Neutrals (light sections; .section--dark redefines these) */
  --colour-bg: #F7F2EC;
  --colour-surface: #FCF9F5;
  --colour-border: rgba(31, 26, 23, 0.12);
  --colour-text-primary: #1F1A17;
  --colour-text-secondary: #564B44;
  --colour-text-tertiary: #75675E;

  --font-sans: "Inter", "Inter Fallback", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-accent: "Instrument Serif", Georgia, "Times New Roman", serif;
  --text-xs: clamp(0.75rem, 1.5vw, 0.8125rem);
  --text-sm: clamp(0.875rem, 1.8vw, 0.9375rem);
  --text-base: clamp(1rem, 2vw, 1.0625rem);
  --text-lg: clamp(1.0625rem, 2vw, 1.1875rem);
  --text-xl: clamp(1.1875rem, 2.4vw, 1.375rem);
  --text-2xl: clamp(1.75rem, 3.6vw, 2.375rem);
  --text-3xl: clamp(2.375rem, 5.5vw, 4rem);
  --text-story: clamp(1.6rem, min(5vw, 5.5svh), 2.75rem);

  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-6: 3rem;
  --space-8: 4rem;
  --space-12: 6rem;

  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 9999px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 200ms;
  --dur-base: 400ms;
  --dur-slow: 700ms;

  --page-gutter: clamp(1.25rem, 5vw, 4rem);
  --content-width: 1040px;
  --prose-width: 34rem;
  --header-height: 4.5rem;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-height);
}

body {
  overflow-x: hidden;
  background: var(--colour-bg);
  color: var(--colour-text-primary);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

body.menu-open {
  overflow: hidden;
}

h1, h2, h3, h4 {
  color: var(--colour-text-primary);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

p, li, dd {
  color: var(--colour-text-secondary);
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  color: inherit;
  font: inherit;
  cursor: pointer;
}

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

ul, ol {
  list-style: none;
}

::selection {
  background: rgba(209, 142, 128, 0.35);
}

:focus-visible {
  outline: 2px solid var(--colour-accent-strong);
  outline-offset: 4px;
}

.skip-link {
  position: fixed;
  z-index: 2000;
  top: var(--space-2);
  left: var(--space-2);
  transform: translateY(-200%);
  border-radius: var(--radius-md);
  background: var(--colour-ink);
  color: var(--colour-paper);
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-sm);
  font-weight: 500;
  transition: transform var(--dur-fast) var(--ease-out);
}

.skip-link:focus {
  transform: translateY(0);
}

/* Layout */

.container {
  width: min(100% - (var(--page-gutter) * 2), var(--content-width));
  margin-inline: auto;
}

/* Every section fills one screen under the fixed header, content centred vertically. */
.section,
.about {
  display: flex;
  min-height: calc(100vh - var(--header-height));
  min-height: calc(100svh - var(--header-height));
  flex-direction: column;
  justify-content: center;
}

.section {
  padding-block: clamp(5rem, 12vw, 9rem);
}

.section--compact {
  padding-block: clamp(3rem, 7vw, 4.5rem);
}

.section--dark {
  --colour-bg: #1F1A17;
  --colour-surface: #2A2420;
  --colour-border: rgba(247, 242, 236, 0.14);
  --colour-text-primary: #F7F2EC;
  --colour-text-secondary: #CFC4BA;
  --colour-text-tertiary: #A99B90;
  --colour-accent-strong: #E3A597;
  background: var(--colour-bg);
  color: var(--colour-text-primary);
}

/* Shared two-column section: heading on the left, content on the right (stacks on mobile). */
.layout {
  display: grid;
  gap: var(--space-6);
  align-items: start;
}

.section-heading {
  font-size: var(--text-2xl);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.12;
  text-wrap: balance;
}

.section-lede {
  margin-top: var(--space-3);
  font-size: var(--text-lg);
  line-height: 1.6;
}

.eyebrow {
  margin-bottom: var(--space-2);
  color: var(--colour-accent-strong);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 1.4;
  text-transform: uppercase;
}

.prose {
  max-width: var(--prose-width);
}

.prose > p + p {
  margin-top: var(--space-3);
}

.prose__lead {
  color: var(--colour-text-primary);
  font-size: var(--text-xl);
  line-height: 1.45;
}

.prose__note {
  margin-top: var(--space-4) !important;
  border-top: 1px solid var(--colour-border);
  padding-top: var(--space-3);
  color: var(--colour-text-tertiary);
  font-size: var(--text-sm);
}

/* Reveal on scroll */

.js .reveal {
  opacity: 0;
  transform: translateY(1.5rem);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}

.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

.reveal--delay-1 { transition-delay: 100ms; }

/* Buttons */

.button {
  display: inline-flex;
  min-height: 3rem;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  padding: 0.8rem 1.5rem;
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  transition: background-color var(--dur-fast), transform var(--dur-fast) var(--ease-out);
}

.button--primary {
  background: var(--colour-accent);
  color: var(--colour-ink);
}

.button--small {
  min-height: 2.5rem;
  padding: 0.55rem 1.1rem;
  font-size: var(--text-xs);
}

.button--large {
  min-height: 3.5rem;
  padding: 1rem 2rem;
  font-size: var(--text-base);
}

.button--full {
  width: 100%;
}

/* Header */

.site-header {
  position: fixed;
  z-index: 1000;
  top: 0;
  right: 0;
  left: 0;
  display: grid;
  height: var(--header-height);
  grid-template-columns: 1fr auto auto;
  column-gap: var(--space-1);
  align-items: center;
  padding-inline: var(--page-gutter);
  border-bottom: 1px solid transparent;
  transition: background-color var(--dur-base), border-color var(--dur-base);
}

/* Light-on-dark while the header floats over the photo intro. */
.site-header:not(.scrolled) {
  --colour-text-primary: var(--colour-paper);
  --colour-text-secondary: #E6DDD4;
}

.site-header:not(.scrolled) .menu-toggle {
  border-color: rgba(247, 242, 236, 0.35);
  background: transparent;
}

/* The open mobile menu is light, so the close button must stay dark. */
body.menu-open .site-header:not(.scrolled) {
  --colour-text-primary: var(--colour-ink);
}

/* Keep the header (and its close button) above the open mobile menu. */
body.menu-open .site-header {
  z-index: 1002;
}

body.menu-open .header-cta {
  visibility: hidden;
}

.site-header.scrolled {
  border-bottom-color: var(--colour-border);
  background: rgba(247, 242, 236, 0.92);
  backdrop-filter: blur(12px);
}

.wordmark {
  width: fit-content;
  white-space: nowrap;
  color: var(--colour-text-primary);
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1;
}

.wordmark__dot {
  color: var(--colour-accent);
}

/* Secondary links from the home page to the longer pages. */
.more-link-row {
  margin-top: var(--space-3);
}

.more-link {
  color: inherit;
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--colour-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.3em;
  transition: color var(--dur-fast);
}

.more-link:hover,
.more-link:focus-visible {
  color: var(--colour-accent);
}

/* Inner pages have no photo intro, so the content starts under the fixed header. */
.page-main {
  padding-top: var(--header-height);
}

.desktop-nav {
  display: none;
  align-items: center;
  gap: var(--space-4);
}

.desktop-nav a {
  color: var(--colour-text-secondary);
  font-size: var(--text-sm);
  transition: color var(--dur-fast);
}

.desktop-nav a[aria-current="location"] {
  color: var(--colour-text-primary);
  text-decoration: underline;
  text-decoration-color: var(--colour-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.5em;
}

/* Phones: a compact "Book a call" next to the menu button; full label from tablet up. */
.header-cta {
  justify-self: end;
  white-space: nowrap;
}

.header-cta__long {
  display: none;
}

.menu-toggle {
  position: relative;
  z-index: 1002;
  display: flex;
  width: 2.75rem;
  height: 2.75rem;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  justify-self: end;
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-pill);
  background: var(--colour-surface);
  color: var(--colour-text-primary);
}

.menu-toggle span {
  display: block;
  width: 1rem;
  height: 1.5px;
  background: currentColor;
  transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-fast);
}

.menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(6.5px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-6.5px) rotate(-45deg); }

.mobile-menu {
  position: fixed;
  z-index: 1001;
  inset: 0;
  display: grid;
  visibility: hidden;
  place-items: center;
  background: var(--colour-paper);
  opacity: 0;
  transition: opacity var(--dur-base), visibility var(--dur-base);
}

.mobile-menu.is-open {
  visibility: visible;
  opacity: 1;
}

.mobile-menu__nav {
  display: flex;
  width: min(100% - (var(--page-gutter) * 2), 30rem);
  flex-direction: column;
  gap: var(--space-3);
}

.mobile-menu__nav > a {
  color: var(--colour-ink);
  font-size: var(--text-2xl);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1.2;
}

.mobile-menu__nav .mobile-menu__cta {
  width: fit-content;
  margin-top: var(--space-3);
  border-bottom: 2px solid var(--colour-accent);
  font-size: var(--text-lg);
}

/* Story: lines arrive one at a time on their own, like a message thread */

.story {
  position: relative;
}

.story__stage {
  position: relative;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  /* Solid scrim keeps the lines readable over the photo. Phones get a portrait crop. */
  background:
    linear-gradient(rgba(20, 16, 14, 0.6), rgba(20, 16, 14, 0.6)),
    url("../img/hero-portrait.webp") 50% 40% / cover no-repeat,
    var(--colour-bg);
}

/* Lines hug the right edge and stack up from the bottom. */
.story__thread {
  display: flex;
  width: min(100% - (var(--page-gutter) * 2), 52rem);
  height: 100%;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
  margin-inline: auto var(--page-gutter);
  padding-top: var(--header-height);
  padding-bottom: clamp(3rem, 12svh, 7rem);
  text-align: right;
  /* Older lines fade out as they are pushed up under the header. */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 calc(var(--header-height) + 3rem));
  mask-image: linear-gradient(to bottom, transparent 0, #000 calc(var(--header-height) + 3rem));
}

.story__line {
  display: grid;
  grid-template-rows: 1fr;
  color: var(--colour-text-primary);
  font-size: var(--text-story);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.15;
  transition:
    grid-template-rows var(--dur-base) var(--ease-out),
    margin-top var(--dur-base) var(--ease-out),
    opacity var(--dur-base) var(--ease-out) 80ms,
    transform var(--dur-base) var(--ease-out) 80ms;
}

/* Inner wrapper so the row can collapse to zero height. */
.story__line > span {
  min-height: 0;
  overflow: hidden;
  padding-bottom: 0.12em;
}

.story__line + .story__line {
  margin-top: 0.45em;
}

/* Lines not yet reached are collapsed but stay readable by screen readers;
   a keyboard user tabbing to the button reveals it. Without JS everything shows. */
.js .story__line:not(.is-shown):not(:focus-within) {
  grid-template-rows: 0fr;
  margin-top: 0;
  opacity: 0;
  transform: translateY(0.75rem);
}

.story__line em,
.hero__title em,
.about__text .section-heading em,
#problem-title em {
  color: var(--colour-accent);
  font-family: var(--font-accent);
  font-size: 1.15em;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
}

.story__line--cta a {
  display: inline-flex;
  align-items: baseline;
  gap: 0.3em;
  border-bottom: 3px solid currentColor;
  color: var(--colour-accent);
  padding-bottom: 0.08em;
}

.story__line--cta .arrow {
  transition: transform var(--dur-fast) var(--ease-out);
}

/* Hero */

.hero {
  display: flex;
  /* Fits under the fixed header when reached from the nav. */
  min-height: calc(100vh - var(--header-height));
  min-height: calc(100svh - var(--header-height));
  align-items: flex-end;
  padding-block: var(--space-8) clamp(3rem, 7vw, 4.5rem);
  background: var(--colour-bg);
}

/* Solid scrim keeps the text readable over the photo. Without JS the photo loads straight away. */
.hero.is-near,
html:not(.js) .hero {
  background:
    linear-gradient(rgba(20, 16, 14, 0.5), rgba(20, 16, 14, 0.5)),
    url("../img/path-portrait.webp") 50% 60% / cover no-repeat,
    var(--colour-bg);
}

.hero__title {
  max-width: 16ch;
  font-size: var(--text-3xl);
  font-weight: 500;
  letter-spacing: -0.045em;
  line-height: 1.02;
}

.hero__lede {
  max-width: 30rem;
  margin-top: var(--space-4);
  color: var(--colour-text-primary);
  font-size: var(--text-xl);
  line-height: 1.4;
}

.hero__line {
  margin-top: var(--space-2);
  font-size: var(--text-lg);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-4);
  margin-top: var(--space-6);
}

.hero__actions .contact-email {
  margin-top: 0.4rem;
}

/* What happens after clicking "Book": shown under the booking buttons. */
.booking-note {
  max-width: 30rem;
  color: var(--colour-text-secondary);
  font-size: var(--text-sm);
  line-height: 1.5;
}

.price-path {
  margin-bottom: var(--space-3);
  color: var(--colour-text-primary);
}

.founding-offer {
  max-width: 44rem;
  margin-bottom: var(--space-3);
  color: var(--colour-text-secondary);
}

.founding-offer strong {
  color: var(--colour-text-primary);
  font-weight: 500;
}

.pricing__action {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
}

/* Does this feel familiar? */

/* A swipeable row of cards: one-and-a-bit on phones, more on wider screens. */
.recognition-list {
  --sign-size: 3rem;
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.recognition-list::-webkit-scrollbar {
  display: none;
}

.recognition-list:focus-visible {
  outline: 2px solid var(--colour-accent);
  outline-offset: 4px;
  border-radius: var(--radius-lg);
}

.recognition-list li {
  display: flex;
  flex: 0 0 78%;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  min-height: 11rem;
  scroll-snap-align: start;
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-lg);
  background: var(--colour-surface);
  padding: var(--space-3);
  color: var(--colour-text-primary);
  font-size: var(--text-lg);
  letter-spacing: -0.02em;
  line-height: 1.35;
}

.carousel__bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

.carousel__progress {
  position: relative;
  flex: 1;
  height: 2px;
  background: var(--colour-border);
}

.carousel__progress span {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 30%;
  background: var(--colour-accent);
  transition: left 120ms linear;
}

.carousel__buttons {
  display: flex;
  gap: var(--space-1);
}

.carousel__button {
  display: grid;
  width: 2.75rem;
  height: 2.75rem;
  place-items: center;
  border: 1px solid var(--colour-border);
  border-radius: 50%;
  background: transparent;
  color: var(--colour-text-primary);
  cursor: pointer;
  font-size: 1.1rem;
  transition: border-color var(--dur-fast), color var(--dur-fast), opacity var(--dur-fast);
}

.carousel__button:hover:not(:disabled),
.carousel__button:focus-visible {
  border-color: var(--colour-accent);
  color: var(--colour-accent-strong);
}

.carousel__button:disabled {
  cursor: default;
  opacity: 0.35;
}

.agitate {
  margin-top: var(--space-6);
  color: var(--colour-text-primary);
  font-size: var(--text-lg);
  letter-spacing: -0.02em;
  line-height: 1.35;
}

.agitate-follow {
  max-width: 40rem;
  margin-top: var(--space-2);
  color: var(--colour-text-secondary);
  line-height: 1.5;
}

.agitate-follow {
  max-width: 40rem;
  margin-top: var(--space-2);
  color: var(--colour-text-secondary);
  line-height: 1.5;
}

.agitate em {
  color: var(--colour-accent-strong);
  font-family: var(--font-accent);
  font-size: 1.15em;
  font-weight: 400;
  letter-spacing: 0;
}

/* The Work: what changes. */
.desire {
  color: var(--colour-accent-strong);
  font-size: var(--text-lg);
  font-weight: 500;
}

/* Hand-drawn line signs: each stroke draws itself in when its row is revealed. */
.sign {
  width: var(--sign-size);
  height: var(--sign-size);
  overflow: visible;
  color: var(--colour-accent-strong);
}

.sign * {
  fill: none;
  stroke: currentColor;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.6;
  transition: stroke-dashoffset 1.4s var(--ease-out) 0.3s;
}

.sign :nth-child(2) { transition-delay: 0.5s; }
.sign :nth-child(3) { transition-delay: 0.7s; }
.sign :nth-child(n + 4) { transition-delay: 0.9s; }

.sign--large {
  display: block;
  width: min(100%, 13rem);
  height: auto;
  aspect-ratio: 120 / 72;
  margin-top: var(--space-6);
}

.sign--large * {
  stroke-width: 1.4;
}

/* The part below the surface fades in dashed rather than drawing. */
.sign .faint {
  stroke-dasharray: 0.03 0.03;
  opacity: 0.6;
  transition: opacity 1s ease 1s;
}

.js .reveal:not(.is-visible) .sign * {
  stroke-dashoffset: 1;
}

.js .reveal:not(.is-visible) .sign .faint {
  stroke-dashoffset: 0;
  opacity: 0;
}

/* About: a magazine-style spread. Phones: photo, story, background. Desktop: story on the
   left; photo, pull quote and background on the right. */

.about {
  background: var(--colour-paper);
}

/* Tighter than other sections: the story is long, so no extra air above and below. */
.about.section {
  padding-block: var(--space-6);
}

.about__grid {
  display: grid;
  gap: var(--space-6);
}

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

.about__text {
  max-width: 34rem;
}

.about__text .section-heading {
  margin-bottom: var(--space-3);
}

.about__text .prose__lead {
  margin-bottom: var(--space-4);
  font-size: var(--text-xl);
}

.about__text > p:not(.eyebrow, .prose__lead) + p {
  margin-top: var(--space-3);
}

/* The lines that carry the turn of the story: set apart on a terracotta rule. */
.about__text .about__beat {
  margin-block: var(--space-4) !important;
  border-left: 2px solid var(--colour-accent);
  padding-left: var(--space-3);
  color: var(--colour-text-primary);
  font-size: var(--text-lg);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.4;
}

.about__text .about__cta {
  margin-top: var(--space-6) !important;
  color: var(--colour-text-primary);
  font-size: var(--text-lg);
  font-weight: 500;
}

/* "let's talk": opens the booking modal, underlined with a hand-drawn scribble that draws in
   when the line scrolls into view and redraws on hover. */
.scribble-link {
  position: relative;
  display: inline-block;
  color: var(--colour-accent-strong);
  text-decoration: none;
}

.scribble {
  position: absolute;
  left: -2%;
  bottom: -0.45em;
  width: 104%;
  height: 0.6em;
  overflow: visible;
}

.scribble path {
  fill: none;
  stroke: var(--colour-accent);
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  stroke-linecap: round;
  stroke-width: 2.4;
  vector-effect: non-scaling-stroke;
  transition: stroke-dashoffset 0.9s var(--ease-out) 0.4s;
}

.js .reveal:not(.is-visible) .scribble path {
  stroke-dashoffset: 1;
}

@keyframes scribble-redraw {
  from { stroke-dashoffset: 1; }
  to { stroke-dashoffset: 0; }
}

.scribble-link:hover .scribble path,
.scribble-link:focus-visible .scribble path {
  stroke: var(--colour-accent-strong);
  animation: scribble-redraw 0.6s var(--ease-out);
}

.about__side .eyebrow {
  margin-bottom: var(--space-2);
}

.credentials {
  display: grid;
  border-top: 1px solid var(--colour-border);
}

/* A quiet list with hairline dividers; a small terracotta tick marks each line. */
.credentials li {
  position: relative;
  border-bottom: 1px solid var(--colour-border);
  padding: 0.55rem 0 0.55rem 1.1rem;
  color: var(--colour-text-primary);
  font-size: var(--text-sm);
  line-height: 1.4;
}

.credentials li::before {
  content: "";
  position: absolute;
  top: 1.05em;
  left: 0;
  width: 0.4rem;
  height: 2px;
  background: var(--colour-accent);
}

/* Work with me: pricing */

.section-intro {
  max-width: 40rem;
  margin-bottom: var(--space-6);
}

/* The pricing line runs on one line on wide screens. */
#work-with-me .section-intro {
  max-width: none;
}

.price-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.price-tile {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-lg);
  background: var(--colour-surface);
  padding: var(--space-3);
}

.price-tile--featured {
  border-color: var(--colour-accent);
}

.price-tile__name {
  color: var(--colour-text-primary);
  font-weight: 500;
}

.price-tile__price {
  margin-top: var(--space-2);
  color: var(--colour-text-primary);
  font-size: var(--text-2xl);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.price-tile--featured .price-tile__price {
  color: var(--colour-accent-strong);
}

.price-tile__meta {
  margin-top: var(--space-1);
  color: var(--colour-text-tertiary);
  font-size: var(--text-sm);
  line-height: 1.4;
}

/* FAQ */

.accordion,
.accordion__col {
  display: grid;
  gap: var(--space-1);
  align-content: start;
}

.accordion__item {
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-md);
  background: var(--colour-surface);
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}

.accordion__item:has([aria-expanded="true"]) {
  border-color: var(--colour-accent);
  box-shadow: 0 0 0 3px var(--colour-accent-soft);
}

.accordion__item h3 {
  font-size: inherit;
}

.accordion__trigger {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  border: 0;
  border-radius: inherit;
  background: transparent;
  padding: 1rem var(--space-3);
  color: var(--colour-text-primary);
  font-size: var(--text-base);
  font-weight: 500;
  line-height: 1.4;
  text-align: left;
}

.accordion__icon {
  position: relative;
  flex: 0 0 2rem;
  height: 2rem;
  border-radius: var(--radius-pill);
  background: var(--colour-accent-soft);
  color: var(--colour-accent-strong);
  transition: transform var(--dur-base) var(--ease-out), background-color var(--dur-fast), color var(--dur-fast);
}

.accordion__icon::before,
.accordion__icon::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.75rem;
  height: 1.5px;
  background: currentColor;
  content: "";
  transform: translate(-50%, -50%);
}

.accordion__icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.accordion__trigger[aria-expanded="true"] .accordion__icon {
  background: var(--colour-accent);
  color: var(--colour-ink);
  transform: rotate(45deg);
}

.accordion__panel p {
  max-width: 40rem;
  padding: 0 var(--space-3) var(--space-3);
  line-height: 1.7;
}

/* Contact (final call to action) */

.contact-email {
  font-size: var(--text-sm);
}

.contact-email a {
  color: var(--colour-text-primary);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--colour-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.3em;
}

/* Footer */

.site-footer {
  padding-block: var(--space-8) var(--space-3);
}

.footer-grid {
  display: grid;
  gap: var(--space-4);
}

.footer-tagline {
  margin-top: var(--space-1);
  font-size: var(--text-sm);
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
}

.footer-links a {
  color: var(--colour-text-secondary);
  font-size: var(--text-sm);
}

.footer-top {
  display: grid;
  gap: var(--space-6);
}

/* Desktop: brand and links on the left half, signup card on the right half. */
@media (min-width: 768px) {
  .footer-top {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-8);
    align-items: start;
  }

  .footer-top .footer-grid {
    grid-template-columns: 1fr;
  }
}

.signup {
  padding: var(--space-3);
  border: 1px solid rgba(209, 142, 128, 0.35);
  border-radius: var(--radius-lg);
  background: var(--colour-accent-soft);
}

.signup__title {
  color: var(--colour-accent);
  font-size: var(--text-base);
  font-weight: 600;
}

.signup__text {
  margin-top: 0.25rem;
  color: var(--colour-text-secondary);
  font-size: var(--text-sm);
}

.signup__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-top: var(--space-2);
}

.signup__input {
  flex: 1 1 10rem;
  min-width: 0;
  padding: 0.6rem 1rem;
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-pill);
  background: rgba(247, 242, 236, 0.06);
  color: var(--colour-text-primary);
  font: inherit;
  font-size: max(16px, var(--text-base));
}

.signup__input::placeholder {
  color: var(--colour-text-tertiary);
}

.signup__consent {
  margin-top: var(--space-2);
  color: var(--colour-text-tertiary);
  font-size: var(--text-xs);
  line-height: 1.7;
}

.signup__consent a {
  color: var(--colour-accent-strong);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

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

/* Phones: a compact footer so the brand, links and signup card fit one screen. */
@media (max-width: 767px) {
  .site-footer {
    padding-block: var(--space-4) var(--space-2);
  }

  .footer-top {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3);
  }

  .footer-grid {
    gap: var(--space-2);
  }

  .signup {
    padding: var(--space-2);
  }

  .signup__text {
    font-size: var(--text-xs);
    line-height: 1.5;
  }

  .signup__row {
    flex-wrap: nowrap;
    margin-top: var(--space-1);
  }

  .signup__input {
    flex: 1 1 0;
    padding: 0.5rem 0.9rem;
  }

  .signup__row .button {
    flex: 0 0 auto;
  }

  .signup__consent {
    margin-top: var(--space-1);
    line-height: 1.5;
  }
}

.footer-bottom {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-top: var(--space-6);
  border-top: 1px solid var(--colour-border);
  padding-top: var(--space-3);
}

.footer-bottom p,
.privacy-details summary {
  color: var(--colour-text-tertiary);
  font-size: var(--text-xs);
}

.privacy-details {
  margin-top: var(--space-2);
}

.privacy-details summary {
  width: fit-content;
  cursor: pointer;
}

.privacy-details p {
  max-width: 52rem;
  margin-top: var(--space-1);
  font-size: var(--text-xs);
  line-height: 1.7;
}

.privacy-details h4 {
  margin-top: var(--space-2);
  color: var(--colour-text-primary);
  font-size: var(--text-xs);
  font-weight: 600;
}

.privacy-details ul {
  max-width: 52rem;
  margin-top: 0.25rem;
  padding-left: 1.1rem;
  list-style: disc;
}

.privacy-details li {
  font-size: var(--text-xs);
  line-height: 1.7;
}

.accordion__panel a {
  color: var(--colour-accent-strong);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.privacy-details a {
  color: var(--colour-accent-strong);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* Hover (pointer devices only) */

@media (hover: hover) and (pointer: fine) {
  .button--primary:hover {
    background: #C67D6E;
  }

  .button:hover {
    transform: translateY(-1px);
  }

  .desktop-nav a:hover,
  .footer-links a:hover,
  .mobile-menu__nav > a:hover,
  .accordion__trigger:hover {
    color: var(--colour-accent-strong);
  }

  .story__line--cta a:hover .arrow {
    transform: translateY(0.2em);
  }
}

@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;
    transition-delay: 0s !important;
  }

  .js .reveal {
    opacity: 1;
    transform: none;
  }
}

/* Breakpoints */

@media (min-width: 600px) {
  .footer-bottom {
    flex-direction: row;
    justify-content: space-between;
  }
}

@media (min-width: 768px) {
  :root {
    --header-height: 5rem;
  }

  .site-header {
    grid-template-columns: 1fr auto 1fr;
  }

  .desktop-nav {
    display: flex;
  }

  .header-cta__short {
    display: none;
  }

  .header-cta__long {
    display: inline;
  }

  .menu-toggle,
  .mobile-menu {
    display: none;
  }

  .story__stage {
    background-image:
      linear-gradient(rgba(20, 16, 14, 0.6), rgba(20, 16, 14, 0.6)),
      url("../hero.webp");
    background-position: 55% 40%;
  }

  .hero.is-near,
  html:not(.js) .hero {
    background-image:
      linear-gradient(rgba(20, 16, 14, 0.5), rgba(20, 16, 14, 0.5)),
      url("../img/path.webp");
  }

  .layout {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: clamp(3rem, 7vw, 6rem);
  }

  .accordion {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-2);
  }

  .about__grid {
    grid-template-areas:
      "text photo"
      "text side";
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    grid-template-rows: auto 1fr;
    gap: var(--space-4) var(--space-8);
    align-items: start;
  }

  .about__text { grid-area: text; }
  .about__photo {
    grid-area: photo;
    aspect-ratio: 4 / 3;
    object-position: 62% 30%;
  }
  .about__side { grid-area: side; }

  .price-tiles {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .footer-grid {
    grid-template-columns: 1fr auto;
    align-items: start;
  }
}

/* Wider screens: all the cards at once as a grid; the carousel controls are for phones. */
@media (min-width: 768px) {
  .recognition-list {
    --sign-size: 2.5rem;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-1);
    overflow: visible;
    scroll-snap-type: none;
  }

  /* Small blocks so all eleven fit on one screen. */
  .recognition-list li {
    min-height: 0;
    gap: var(--space-2);
    border-radius: var(--radius-md, 14px);
    padding: var(--space-2);
    font-size: var(--text-sm);
    line-height: 1.35;
  }

  .carousel__bar {
    display: none;
  }
}

@media (min-width: 1024px) {
  .recognition-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Phones: tighter spacing so each section fits one screen on a standard phone. */
@media (max-width: 767px) {
  .section--compact,
  .section {
    padding-block: var(--space-6);
  }

  .section-intro {
    margin-bottom: var(--space-3);
  }

  .section-lede {
    margin-top: var(--space-2);
    font-size: var(--text-base);
  }

  .layout {
    gap: var(--space-3);
  }

  /* On phones the drawing is smaller and simply there, without the draw-in animation. */
  .sign--large {
    width: min(100%, 9rem);
    margin-top: var(--space-3);
  }

  .js .reveal:not(.is-visible) .sign--large *,
  .sign--large * {
    stroke-dashoffset: 0;
    transition: none;
  }

  .js .reveal:not(.is-visible) .sign--large .faint {
    opacity: 0.6;
  }

  .prose > p + p {
    margin-top: var(--space-2);
  }

  .prose__lead {
    font-size: var(--text-lg);
  }

  .prose__note {
    margin-top: var(--space-3) !important;
    padding-top: var(--space-2);
  }

  /* Eight compact rows so "Does this feel familiar?" fits one phone screen. */
  #problem {
    padding-block: var(--space-4);
  }

  .recognition-list {
    --sign-size: 2.5rem;
  }

  .recognition-list li {
    flex-basis: 62%;
    gap: var(--space-2);
    min-height: 7.5rem;
    padding: var(--space-2);
    font-size: var(--text-sm);
    line-height: 1.3;
  }

  .agitate {
    margin-top: var(--space-3);
  }

  .price-tiles {
    gap: var(--space-1);
    margin-bottom: var(--space-3);
  }

  .price-tile {
    padding: var(--space-2);
  }

  .price-tile__price {
    margin-top: var(--space-1);
    font-size: var(--text-xl);
  }

  .price-tile__meta {
    font-size: var(--text-xs);
  }

  .price-path,
  .founding-offer {
    margin-bottom: var(--space-2);
    font-size: var(--text-sm);
  }

  .accordion,
  .accordion__col {
    gap: 0.4rem;
  }

  .accordion__trigger {
    padding: 0.75rem var(--space-2);
    font-size: var(--text-sm);
  }

  .accordion__icon {
    flex-basis: 1.75rem;
    height: 1.75rem;
  }

  .accordion__panel p {
    padding: 0 var(--space-2) var(--space-2);
  }

  .booking-note {
    font-size: var(--text-xs);
  }

  /* Pricing: tighter so the four tiles, offer and booking button share one screen. */
  #work-with-me .section-intro {
    margin-bottom: var(--space-2);
  }

  #work-with-me .section-lede {
    font-size: var(--text-sm);
  }

  .price-tile__name {
    font-size: var(--text-sm);
  }

  .price-tile__meta {
    line-height: 1.35;
  }

  .founding-offer {
    font-size: var(--text-xs);
    line-height: 1.5;
  }

  /* About: a wide, short photo and the story. The key background lines sit under it; the full list is on the About page. */
  .about.section {
    padding-block: var(--space-3);
  }

  .about__grid {
    gap: var(--space-2);
  }

  .about__text .more-link-row {
    margin-top: var(--space-2);
  }

  .about[id] .about__side .eyebrow {
    display: none;
  }

  /* A round portrait keeps the face and saves a lot of height. */
  .about__photo {
    width: 4.75rem;
    aspect-ratio: 1;
    border-radius: 50%;
    object-position: 66% 22%;
  }

  .credentials li {
    padding-block: 0.3rem;
    font-size: var(--text-xs);
  }

  .about__text .prose__lead {
    margin-bottom: var(--space-2);
    font-size: var(--text-lg);
  }

  .about__text > p:not(.eyebrow, .prose__lead) + p {
    margin-top: var(--space-2);
  }

  .about__text .about__beat {
    margin-block: var(--space-2) !important;
  }

  .about__text .about__cta {
    margin-top: var(--space-2) !important;
  }
}

/* Desktop: everything scaled to 80% (type, spacing and content width), matching how the
   page reads at 80% browser zoom. Using a % root size keeps visitors' own font settings working. */
@media (min-width: 1024px) {
  html {
    font-size: 80%;
  }

  :root {
    --content-width: 832px;
  }
}

/* Smallest phones: keep wordmark, button and menu on one line. */
@media (max-width: 359px) {
  .header-cta {
    padding-inline: 0.8rem;
  }
}