/* =========================================================
   Synovial Marketing: Onyx Cinema
   Design system: alabaster / shell / onyx / brown / champagne
   Display: EB Garamond · Body: Montserrat · Hand: Caveat
   Script: Great Vibes (wordmark and monogram only)
   Source direction: "Onyx Cinema" (Claude Design option 1b)
   ========================================================= */

:root{
  /* ---- color ---- */
  --cream: #F3EDE3;
  --cream-rgb: 243, 237, 227;
  --sand: #EAE4D8;
  --sand-rgb: 234, 228, 216;
  --sand-deep: #DFD6C6;
  --ink: #1F1B18;
  --ink-rgb: 31, 27, 24;
  --ink-soft: #2B2521;
  --clay: #5B4E43;
  --clay-rgb: 91, 78, 67;
  --clay-dark: #3E352E;
  --peach: #C7B294;
  --peach-rgb: 199, 178, 148;
  --sage: #C7B294;
  --sage-deep: #A88E68;
  --sage-dark: #8C7454;
  --border: #DCCFBB;
  --muted: #5B4E43;
  --stone: #A79A88;
  --chip: #EFE8DB;
  --card: #FBF9F4;

  /* the metallic: lines, dots, quote marks, labels on onyx */
  --champagne: #C7B294;
  --champagne-rgb: 199, 178, 148;

  /* on-dark equivalents */
  --dark-muted: #A79A88;
  --dark-stone: #8F8272;
  --dark-line: #4E4536;

  /* ---- type ---- */
  --font-display: "EB Garamond", "Iowan Old Style", Georgia, serif;
  --font-body: "Montserrat", -apple-system, "Segoe UI", sans-serif;
  --font-hand: "Caveat", "Segoe Script", cursive;
  --font-script: "Great Vibes", cursive;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-md: 1.125rem;
  --text-lg: clamp(1.125rem, 1.05rem + 0.4vw, 1.3125rem);

  --display-hero: clamp(2.75rem, 1.9rem + 3.8vw, 4rem);
  --display-page: clamp(2.4rem, 1.8rem + 3vw, 3.5rem);
  --display-section: clamp(1.9rem, 1.55rem + 1.8vw, 2.625rem);
  --display-cta: clamp(2rem, 1.6rem + 2.2vw, 2.875rem);
  --display-card: clamp(1.25rem, 1.1rem + .7vw, 1.5rem);

  /* ---- spacing scale, 8px base ---- */
  --sp-1: 0.5rem;
  --sp-2: 1rem;
  --sp-3: 1.5rem;
  --sp-4: 2rem;
  --sp-5: 3rem;
  --sp-6: 4rem;
  --sp-7: 5.25rem;
  --sp-8: 7rem;

  --content-max: 1200px;
  --edge-pad: clamp(1.5rem, 1.1rem + 2vw, 3rem);

  --header-h: 80px;

  --ease-out: cubic-bezier(.16,.8,.24,1);
  --dur-reveal: 500ms;

  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  /* the signature arch: photos wear it like a doorway */
  --radius-arch: 160px 160px 16px 16px;

  color-scheme: light;
}

/* =========================================================
   Reset
   ========================================================= */
*, *::before, *::after{ box-sizing: border-box; }
html{
  scroll-behavior: smooth;
  /* scroll anchoring fights the header's height animation near the top
     of the page (it nudges scrollY to compensate, re-crossing the
     header threshold); the layout is stable without it */
  overflow-anchor: none;
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
}
body{
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img{ max-width: 100%; display: block; }
ul, ol{ margin: 0; padding: 0; list-style: none; }
a{ color: inherit; text-decoration: none; }
button{ font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
h1, h2, h3, p, blockquote, figure{ margin: 0; }

[hidden]{ display: none !important; }

:focus-visible{
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

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

.skip-link{
  position: fixed;
  top: -100%;
  left: var(--sp-2);
  z-index: 1000;
  background: var(--ink);
  color: var(--cream);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-sm);
  transition: top .2s var(--ease-out);
}
.skip-link:focus{ top: var(--sp-2); }

/* Hotlinked-photo fallback: the hatched swatch from the design mock */
.img-fallback,
.frame.img-fallback{
  background: repeating-linear-gradient(45deg, var(--sand), var(--sand) 10px, var(--sand-deep) 10px, var(--sand-deep) 20px);
}

/* =========================================================
   Grain texture (kept from v1: warm paper, barely there)
   ========================================================= */
.paper{ position: relative; }
.paper::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .4;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.035 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-repeat: repeat;
  z-index: 0;
}
.paper > *{ position: relative; z-index: 1; }

/* =========================================================
   Layout helpers
   ========================================================= */
.section-inner{
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--edge-pad);
}

.eyebrow,
.kicker{
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--clay);
  margin-bottom: var(--sp-3);
}
.kicker{ margin-bottom: var(--sp-2); }
.kicker-on-ink{ color: var(--champagne); }

.section-display{
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--display-section);
  line-height: 1.1;
  text-wrap: pretty;
}
.section-display em,
.hero-display em,
.page-hero-display em,
.cta-display em{
  font-style: italic;
  font-weight: 500;
  color: var(--clay);
}
.section-display.on-ink{ color: var(--cream); }

.section-head{
  margin-bottom: var(--sp-6);
  text-align: center;
}
.section-head .section-display{ max-width: 24ch; margin-inline: auto; }

/* split section heading row: title left, action right */
.section-row{
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
  flex-wrap: wrap;
}

.lead{
  font-size: var(--text-md);
  line-height: 1.65;
  color: var(--muted);
}

/* =========================================================
   Handwritten accents (Caveat)
   ========================================================= */
.hand{
  font-family: var(--font-hand);
  font-weight: 500;
  font-size: clamp(1.25rem, 1.1rem + .7vw, 1.5rem);
  color: var(--clay);
  width: fit-content;
}
.hand--tilt-l{ transform: rotate(-1.5deg); }
.hand--tilt-r{ transform: rotate(1deg); }
/* second ink in the two-tone handwriting: onyx against the brown */
.hand--sage{ color: var(--ink); }

/* services: a handwritten accent under every description, in the same
   deep-champagne bronze as the process labels. 1.5rem = 24px, which is
   WCAG large text, so bronze's 3.78:1 on alabaster clears the 3:1 bar. */
.service-hand{
  display: block;
  font-size: 1.5rem;
  margin-top: 8px;
  transform: rotate(-1deg);
  color: #8C7454;
}

.sticker{
  position: absolute;
  bottom: -18px;
  left: -24px;
  background: var(--ink);
  color: var(--card);
  font-family: var(--font-hand);
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 1.1;
  padding: 10px 22px;
  border-radius: var(--radius-pill);
  transform: rotate(-4deg);
  box-shadow: 0 6px 18px rgba(var(--ink-rgb), .18);
  white-space: nowrap;
  transition: transform .3s var(--ease-out), background-color .25s ease;
}
a.sticker:hover{
  background: #35302B;
  transform: rotate(-2deg) translateY(-2px);
}
a.sticker:focus-visible{
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce){
  .sticker{ transition: none; }
}

/* =========================================================
   Photo frames
   ========================================================= */
.frame{
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--sand);
}
.frame img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.frame--arch{ border-radius: var(--radius-arch); }
.frame--arch-right{ border-radius: 16px 160px 16px 16px; }
.frame--tilt-l{ transform: rotate(-1.5deg); }
.frame--tilt-r{ transform: rotate(1.5deg); }
.frame--tilt-r-soft{ transform: rotate(1deg); }

/* =========================================================
   Buttons
   ========================================================= */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1.2;
  padding: 1em 2.1em;
  /* squared editorial corners (1b language); the pill read as template */
  border-radius: 3px;
  transition: transform .35s var(--ease-out), background-color .25s ease, color .25s ease, border-color .25s ease;
  white-space: nowrap;
}
/* solid on a light page: onyx block, porcelain lettering */
.btn-solid{
  background: var(--ink);
  color: var(--card);
}
.btn-solid:hover{ background: #35302B; transform: translateY(-2px); }

.btn-ink{
  background: var(--ink);
  color: var(--card);
}
.btn-ink:hover{ background: #35302B; transform: translateY(-2px); }

.btn-outline{
  background: none;
  border: 1.5px solid var(--ink);
  color: var(--ink);
}
.btn-outline:hover{ background: var(--ink); color: var(--card); transform: translateY(-2px); }

/* solid inside an onyx band: champagne block, onyx lettering */
.btn-peach{
  background: var(--champagne);
  color: var(--ink);
}
.btn-peach:hover{ background: #A88E68; transform: translateY(-2px); }

.btn-outline-ink{
  border: 1.5px solid var(--champagne);
  color: var(--champagne);
  background: transparent;
}
.btn-outline-ink:hover{
  border-color: var(--cream);
  color: var(--cream);
  background: rgba(var(--cream-rgb), .06);
}

.btn-lg{ font-size: var(--text-base); padding: 1.1em 2.3em; }
.btn-sm{ font-size: var(--text-sm); padding: 0.8em 1.6em; }

.btn-text{
  padding: 0;
  border-radius: 0;
  background: none;
  position: relative;
  color: var(--clay);
  font-size: var(--text-sm);
}
.btn-text::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 1.5px;
  background: currentColor;
  transform: scaleX(1);
  transform-origin: left;
  transition: transform .3s var(--ease-out);
}
.btn-text:hover{ color: var(--clay-dark); }
.btn-text:hover::after{ transform: scaleX(.4); }

@media (prefers-reduced-motion: reduce){
  .btn, .btn-text::after{ transition: none !important; }
}

/* =========================================================
   Header / Nav
   ========================================================= */
/* Transparent at the top of the page with the monogram seal large and
   legible; once the visitor scrolls, the bar drops into place (alabaster
   + border), the seal scales down to a lapel-pin size, and the name
   fades in beside it. script.js toggles .is-scrolled. */
.site-header{
  position: sticky;
  top: 0;
  z-index: 500;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color .3s ease, border-color .3s ease;
}
.site-header.is-scrolled{
  background: var(--cream);
  border-bottom-color: var(--border);
}
.header-inner{
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--edge-pad);
  height: 148px;
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  transition: height .35s var(--ease-out);
}
.site-header.is-scrolled .header-inner{ height: var(--header-h); }

.site-header .logo-seal{
  width: 128px;
  height: 128px;
  font-size: 58px;
  padding-top: 4px;
  transition: width .35s var(--ease-out), height .35s var(--ease-out),
              font-size .35s var(--ease-out), padding-top .35s var(--ease-out);
}
.site-header.is-scrolled .logo-seal{
  width: 44px;
  height: 44px;
  font-size: 20px;
  padding-top: 1px;
}

.logo-name{
  font: 500 .6875rem var(--font-body);
  letter-spacing: .38em;
  text-transform: uppercase;
  color: var(--clay);
  margin-left: 14px;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity .3s ease .1s, transform .3s var(--ease-out) .1s;
}
.site-header.is-scrolled .logo-name{ opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce){
  .site-header, .header-inner, .site-header .logo-seal,
  .logo-name{ transition: none !important; }
}
/* Monogram seal: a champagne hairline circle with the Great Vibes "SM"
   set inside it. Onyx glyphs on light chrome, champagne glyphs on the
   dark drawer and footer; the ring stays champagne everywhere. */
.logo{ display: inline-flex; align-items: center; }
.logo-seal{
  width: 64px;
  height: 64px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--champagne);
  background: transparent;
  font-family: var(--font-script);
  font-weight: 400;
  font-size: 29px;
  line-height: 1;
  /* Great Vibes sits high in its box; nudge it back to optical centre */
  padding-top: 2px;
  color: var(--ink);
  -webkit-user-select: none;
  user-select: none;
}

.primary-nav{ margin-left: auto; }
.primary-nav ul{ display: flex; gap: 4px; }
.primary-nav a{
  display: inline-block;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--muted);
  padding: .65em 1em;
  border-radius: 4px;
  transition: color .25s ease, background-color .25s ease;
}
.primary-nav a:hover{ color: var(--ink); background: rgba(var(--sand-rgb), .8); }
.primary-nav a[aria-current="page"]{
  color: var(--ink);
  font-weight: 600;
  background: var(--sand-deep);
}

.nav-cta{ font-size: var(--text-sm); padding: 0.8em 1.6em; margin-left: var(--sp-1); }

.social-links{
  display: flex;
  align-items: center;
  gap: var(--sp-1);
}
.social-link{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: var(--muted);
  transition: color .25s ease, background-color .25s ease;
}
.social-link svg{ display: block; }
.social-link:hover, .social-link:focus-visible{
  color: var(--clay);
  background: rgba(var(--clay-rgb), .1);
}

.hamburger{
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  margin-left: var(--sp-1);
}
.hamburger span{
  display: block;
  height: 2px;
  width: 24px;
  background: var(--ink);
  transition: transform .3s var(--ease-out), opacity .3s var(--ease-out);
}

.mobile-menu{
  position: fixed;
  inset: 0;
  z-index: 600;
  background: var(--ink);
  color: var(--cream);
  display: flex;
  flex-direction: column;
  padding: var(--sp-3) var(--edge-pad) var(--sp-5);
  transform: translateY(-100%);
  visibility: hidden;
  overflow-y: auto;
  transition: transform .45s var(--ease-out), visibility 0s linear .45s;
}
.mobile-menu.is-open{ transform: translateY(0); visibility: visible; transition: transform .45s var(--ease-out), visibility 0s; }
.mobile-menu-top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h);
}
.mobile-menu .logo-seal{ color: var(--champagne); }
.mobile-menu-close{
  font-size: 2rem;
  line-height: 1;
  color: var(--cream);
}
.mobile-menu nav{ margin-top: var(--sp-6); }
.mobile-menu nav ul{ display: flex; flex-direction: column; gap: var(--sp-3); }
.mobile-menu nav a{
  font-family: var(--font-display);
  font-size: clamp(2rem, 8vw, 2.75rem);
  font-weight: 600;
}
.mobile-menu nav a[aria-current="page"]{ color: var(--champagne); font-style: italic; font-weight: 500; }
.mobile-menu .social-links{ margin-top: var(--sp-4); gap: var(--sp-2); }
.mobile-menu .social-link{ color: var(--cream); width: 44px; height: 44px; }
.mobile-menu .social-link:hover, .mobile-menu .social-link:focus-visible{
  color: var(--champagne);
  background: rgba(var(--cream-rgb), .08);
}
.mobile-menu .btn{ margin-top: auto; align-self: flex-start; }
/* the drawer is onyx, so the solid CTA flips to the champagne block */
.mobile-menu .btn-solid{
  background: var(--champagne);
  color: var(--ink);
}
.mobile-menu .btn-solid:hover{ background: #A88E68; }
/* the drawer is onyx, so the ring flips to champagne (the onyx ring vanishes) */
.mobile-menu a:focus-visible,
.mobile-menu-close:focus-visible,
.mobile-menu .social-link:focus-visible,
.mobile-menu .btn:focus-visible{ outline-color: var(--champagne); }

@media (prefers-reduced-motion: reduce){
  .mobile-menu{ transition: none; }
}

/* =========================================================
   Home hero: split grid, arch portrait, sticker
   ========================================================= */
.hero-split{
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: var(--sp-6);
  align-items: center;
  max-width: var(--content-max);
  margin-inline: auto;
  padding: var(--sp-6) var(--edge-pad) var(--sp-7);
}
.hero-display{
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--display-hero);
  line-height: 1.04;
  letter-spacing: -.01em;
  text-wrap: pretty;
}
.hero-support{
  font-size: var(--text-md);
  line-height: 1.6;
  color: var(--muted);
  max-width: 44ch;
  margin-top: var(--sp-3);
}
.hero-ctas{
  display: flex;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
  align-items: center;
  flex-wrap: wrap;
}
.hero-aside{ margin-top: var(--sp-3); }

.hero-figure{ position: relative; }
.hero-figure .frame{ aspect-ratio: 4 / 5; }

/* =========================================================
   Ticker (dark strip, italic serif, endless drift)
   ========================================================= */
@keyframes tick{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}
.ticker{
  overflow: hidden;
  background: var(--ink);
  color: var(--champagne);
  padding: 12px 0;
  white-space: nowrap;
  display: flex;
  flex-direction: column;
  gap: 4px;
  /* items dissolve before they touch the viewport edges */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 20%, #000 80%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 20%, #000 80%, transparent 100%);
}
/* two kinetic rows: the FX loop drives them (speed reacts to scroll
   velocity); without JS they fall back to the CSS drift */
.ticker-row{
  display: flex;
  width: max-content;
  white-space: nowrap;
  will-change: transform;
}
.ticker-set{
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-md);
  padding-right: .35em;
}
html:not(.has-fx) .ticker-row{ animation: tick 26s linear infinite; }
@media (prefers-reduced-motion: reduce){
  .ticker-row{ animation: none !important; }
}

/* =========================================================
   Feature split ("the short version" on home)
   ========================================================= */
.feature-split{
  max-width: var(--content-max);
  margin-inline: auto;
  padding: var(--sp-7) var(--edge-pad);
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: var(--sp-6);
  align-items: center;
}
.feature-split .frame{ aspect-ratio: 1; }
.feature-split .lead{ max-width: 52ch; margin-top: var(--sp-3); }
.feature-split .btn-text{ margin-top: var(--sp-3); }
.feature-split .section-display{ max-width: 18ch; }

/* =========================================================
   Work cards (home teaser band + /work grid)
   ========================================================= */
.band{ background: var(--sand); padding-block: var(--sp-7); }

.work-cards{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-3);
}
.work-card{
  display: block;
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  transition: transform .35s var(--ease-out), box-shadow .35s ease;
}
.work-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(var(--ink-rgb), .1);
}

/* Matted photo: hatched mat, washi-tape accent, slight scrapbook tilt.
   The mat's stripes drift while the photo loads, then hold still. */
@keyframes mat-drift{
  to{ background-position: 28.28px 0; }
}
.work-card-media{
  display: block;
  position: relative;
  margin: 16px 16px 0;
  aspect-ratio: 4 / 3;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: repeating-linear-gradient(45deg, var(--sand), var(--sand) 10px, var(--sand-deep) 10px, var(--sand-deep) 20px);
}
html.js .work-card-media:not(.is-loaded){
  animation: mat-drift 1.1s linear infinite;
}
.work-card-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 7px;
}
/* washi tape over the top edge */
.work-card-media::after{
  content: "";
  position: absolute;
  top: -9px;
  left: 50%;
  width: 92px;
  height: 22px;
  transform: translateX(-50%) rotate(-3deg);
  background: rgba(var(--champagne-rgb), .92);
  border-radius: 3px;
  box-shadow: 0 2px 6px rgba(var(--ink-rgb), .12);
}
.work-cards .work-card:nth-child(1) .work-card-media{ transform: rotate(-1deg); }
.work-cards .work-card:nth-child(2) .work-card-media{ transform: rotate(.8deg); }
.work-cards .work-card:nth-child(2) .work-card-media::after{ transform: translateX(-50%) rotate(4deg); }
.work-cards .work-card:nth-child(3) .work-card-media{ transform: rotate(-.6deg); }

/* develop-in: photos fade and sharpen as they arrive */
html.js .work-card-media img,
html.js .frame img{
  opacity: 0;
  transform: scale(1.05);
  filter: blur(10px);
  transition: opacity .8s ease, transform .8s var(--ease-out), filter .8s ease;
}
html.js .work-card-media img.is-loaded,
html.js .frame img.is-loaded{
  opacity: 1;
  transform: none;
  filter: none;
}
@media (prefers-reduced-motion: reduce){
  html.js .work-card-media:not(.is-loaded){ animation: none; }
  html.js .work-card-media img,
  html.js .frame img{ opacity: 1; transform: none; filter: none; transition: none; }
}
.work-card-body{
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 20px 20px;
}
.work-card-type{
  display: block;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--clay);
}
.work-card-name{
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--display-card);
}

/* =========================================================
   Quote cards (tilted, kind words)
   ========================================================= */
.quotes{ padding-block: var(--sp-7); }
.quote-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-3);
  align-items: start;
}
.quote-card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 28px 26px;
  box-shadow: 0 8px 24px rgba(var(--ink-rgb), .06);
}
.quote-card--tilt-l{ transform: rotate(-1.2deg); }
.quote-card--tilt-r{ transform: rotate(1deg); }
.quote-card--tilt-s{ transform: rotate(-.6deg); }
.quote-mark{
  font-family: var(--font-display);
  font-size: 2.125rem;
  color: var(--champagne);
  line-height: 0;
  margin: 10px 0 18px;
}
.quote-text{
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--ink-soft);
}
.quote-cite{
  font-size: var(--text-sm);
  font-weight: 600;
  font-style: normal;
  margin-top: 18px;
}

/* =========================================================
   Podcast band (dark)
   ========================================================= */
.podcast{
  background: var(--ink);
  color: var(--cream);
  padding-block: var(--sp-7);
}
.podcast-stack{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.podcast-stack .podcast-desc{ margin-inline: auto; }
.podcast-stack .podcast-links{ justify-content: center; }
.podcast-stack .podcast-toggle{ justify-content: center; }
.podcast-stack .podcast-cover{ margin-bottom: var(--sp-4); }
.podcast-cover{
  position: relative;
  overflow: hidden;
  width: 220px;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at center, var(--ink-soft) 0 26%, transparent 26.5%),
    repeating-radial-gradient(circle at center, var(--ink-soft) 0 10px, var(--dark-line) 10px 20px);
  border: 1.5px solid var(--dark-line);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 4px;
  padding: 24px;
}
.podcast-cover img{
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.podcast-cover-label{
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--dark-muted);
}
.podcast-cover-title{
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 1.375rem;
  line-height: 1.15;
  color: var(--champagne);
}
.podcast-title{
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.8rem, 1.5rem + 1.6vw, 2.5rem);
  line-height: 1.1;
}
.podcast-desc{
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--dark-muted);
  max-width: 56ch;
  margin-top: var(--sp-2);
}
.podcast-links{
  display: flex;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
  flex-wrap: wrap;
}

/* in-page players (about page) */
.podcast-player{
  width: 100%;
  max-width: 620px;
  margin-top: var(--sp-5);
}
.podcast-toggle{
  display: flex;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}
/* editorial text tabs: an underline carries the active state, no capsule */
.podcast-toggle-btn{
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: .08em;
  padding: .45em .15em;
  border-bottom: 2px solid transparent;
  color: var(--dark-muted);
  transition: color .25s ease, border-color .25s ease;
}
.podcast-toggle-btn:hover{ color: var(--cream); }
.podcast-toggle-btn.is-active{
  color: var(--cream);
  border-bottom-color: var(--champagne);
}
.podcast-embed iframe{ display: block; }
.podcast-open-link{
  display: inline-block;
  margin-top: var(--sp-2);
  font-size: var(--text-sm);
  color: var(--dark-muted);
  border-bottom: 1px solid rgba(var(--champagne-rgb), .4);
  padding-bottom: 2px;
  transition: color .25s ease, border-color .25s ease;
}
.podcast-open-link:hover{ color: var(--cream); border-color: var(--cream); }
/* the band is onyx, so the ring flips to champagne (the onyx ring vanishes) */
.podcast .btn:focus-visible,
.podcast-toggle-btn:focus-visible,
.podcast-open-link:focus-visible{ outline-color: var(--champagne); }

/* =========================================================
   Newsletter close (home)
   ========================================================= */
.newsletter{
  max-width: 860px;
  margin-inline: auto;
  padding: var(--sp-8) var(--edge-pad);
  text-align: center;
}
.newsletter .hand{ margin-inline: auto; margin-bottom: var(--sp-1); transform: rotate(-2deg); }
.newsletter-display{
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--display-cta);
  line-height: 1.15;
  letter-spacing: -.01em;
  text-wrap: pretty;
}
.newsletter-form{
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: var(--sp-4);
  flex-wrap: wrap;
}
.newsletter-form input{
  font: 0.9375rem var(--font-body);
  color: var(--ink);
  padding: 15px 24px;
  border: 1.5px solid var(--dark-muted);
  border-radius: 3px;
  background: var(--card);
  width: min(300px, 100%);
  outline: none;
  transition: border-color .25s ease;
}
.newsletter-form input:focus{ border-color: var(--ink); }
.newsletter-form input::placeholder{ color: var(--clay); }

/* =========================================================
   Page hero (inner pages)
   ========================================================= */
.page-hero{ padding-block: var(--sp-6) var(--sp-5); }
.page-hero--tight{ padding-bottom: var(--sp-4); }
.page-hero-display{
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--display-page);
  line-height: 1.05;
  letter-spacing: -.01em;
  max-width: 20ch;
  text-wrap: pretty;
}
.page-hero-support{
  font-size: var(--text-md);
  line-height: 1.6;
  color: var(--muted);
  max-width: 52ch;
  margin-top: var(--sp-3);
}

/* =========================================================
   About: hero grid, fact chips, timeline
   ========================================================= */
.about-hero{
  max-width: 1100px;
  margin-inline: auto;
  padding: var(--sp-6) var(--edge-pad) var(--sp-7);
  display: grid;
  grid-template-columns: 1fr .75fr;
  gap: var(--sp-6);
  align-items: center;
}
.about-hero .page-hero-display{ max-width: none; }
.about-hero .frame{ aspect-ratio: 3 / 4; }

.fact-list{
  display: flex;
  gap: 10px;
  margin-top: var(--sp-4);
  flex-wrap: wrap;
}
.fact{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: .35em 0;
}
.fact::before{
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--champagne);
  flex: none;
}

/* Alternating timeline: center spine, copy on one side, a matted photo
   placeholder on the other, swapping sides down the page. Sourced from
   Hannah's 2020-2026 company history document. */
.timeline-wrap{ max-width: 980px; margin-inline: auto; }
.timeline{ display: flex; flex-direction: column; }
.timeline-row{
  position: relative; /* anchors the sketched margin illustration */
  display: grid;
  grid-template-columns: 1fr 48px 1fr;
  align-items: start;
}
.timeline-spine{
  grid-column: 2;
  grid-row: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.timeline-dot{
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--champagne);
  border: 3px solid var(--sand);
  box-shadow: 0 0 0 1.5px var(--champagne);
  flex: none;
  margin-top: 8px;
}
.timeline-line{
  width: 1.5px;
  flex: 1;
  background: rgba(var(--champagne-rgb), .55);
}
.timeline-row:last-child .timeline-line{ display: none; }

.timeline-body{
  grid-row: 1;
  max-width: 420px;
  padding-bottom: var(--sp-6);
}
.timeline-media{
  grid-row: 1;
  width: min(300px, 100%);
  padding-bottom: var(--sp-3);
}
/* odd rows: copy right of the spine, photo left; even rows mirror it */
.timeline-row:nth-child(odd) .timeline-body{ grid-column: 3; padding-left: 28px; }
.timeline-row:nth-child(odd) .timeline-media{ grid-column: 1; justify-self: end; margin-right: 28px; }
.timeline-row:nth-child(even) .timeline-body{ grid-column: 1; justify-self: end; text-align: right; padding-right: 28px; }
.timeline-row:nth-child(even) .timeline-media{ grid-column: 3; justify-self: start; margin-left: 28px; }
.timeline-row:nth-child(even) .timeline-aside{ margin-left: auto; }
.timeline-row:nth-child(even) .timeline-text{ margin-left: auto; }

.timeline-year{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.625rem;
  line-height: 1;
  color: var(--clay);
}
.timeline-theme{
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--clay);
  margin-top: 6px;
}
.timeline-title{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.375rem;
  line-height: 1.2;
  margin-top: 10px;
}
.timeline-text{
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--muted);
  margin-top: 8px;
  max-width: 44ch;
}
.timeline-aside{
  font-size: 1.25rem;
  margin-top: 10px;
  transform: rotate(-1deg);
}

/* photo placeholder: hatched mat + washi tape, Caveat note inside */
.ph-frame{
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: repeating-linear-gradient(45deg, var(--cream), var(--cream) 10px, var(--sand-deep) 10px, var(--sand-deep) 20px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ph-frame::before{
  content: "";
  position: absolute;
  inset: 10px;
  border: 1.5px dashed rgba(var(--ink-rgb), .28);
  border-radius: 7px;
  background: rgba(var(--cream-rgb), .72);
}
.ph-frame::after{
  content: "";
  position: absolute;
  top: -9px;
  left: 50%;
  width: 92px;
  height: 22px;
  transform: translateX(-50%) rotate(-3deg);
  background: rgba(var(--champagne-rgb), .92);
  border-radius: 3px;
  box-shadow: 0 2px 6px rgba(var(--ink-rgb), .12);
}
.ph-frame--tilt-l{ transform: rotate(-1.5deg); }
.ph-frame--tilt-r{ transform: rotate(1.5deg); }
.ph-frame--tilt-r::after{ transform: translateX(-50%) rotate(4deg); }
/* Real photo inside a frame: dashed placeholder styling drops, tape stays on top */
.ph-frame--photo::before{ border: 0; background: none; }
.ph-frame--photo::after{ z-index: 2; }
/* Per-scene frame shapes: portrait shots get tall mats, flat-lays square,
   landscapes wide, and the sizes vary so the strip reads like a real
   album rather than a grid of identical prints. */
.ph-frame--tall{ aspect-ratio: 3 / 4; }
.ph-frame--square{ aspect-ratio: 1 / 1; }
.ph-frame--wide{ aspect-ratio: 4 / 3; }
.timeline-media:has(.ph-frame--tall){ width: min(280px, 100%); }
.timeline-media:has(.ph-frame--square){ width: min(260px, 100%); }
.timeline-media:has(.ph-frame--wide){ width: min(350px, 100%); }
.timeline-media:has(.ph-frame--grand){ width: min(340px, 100%); }
.ph-frame--photo img{
  position: absolute;
  inset: 10px;
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  object-fit: cover;
  object-position: 50% 25%;
  border-radius: 7px;
}
.ph-label{
  position: relative;
  z-index: 1;
  font-family: var(--font-hand);
  font-weight: 500;
  font-size: 1.3125rem;
  line-height: 1.25;
  color: var(--muted);
  text-align: center;
  padding: 0 22px;
  transform: rotate(-1.5deg);
}

.timeline-quote{
  max-width: 700px;
  margin: var(--sp-4) auto 0;
  text-align: center;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.2rem, 1.05rem + .8vw, 1.5rem);
  line-height: 1.45;
  color: var(--ink-soft);
}

/* =========================================================
   Case studies (/work): editorial blocks with carousels
   ========================================================= */
.case-list{ display: flex; flex-direction: column; }
.case-study{
  padding-block: var(--sp-7);
  border-bottom: 1px solid var(--border);
}
.case-list > .case-study:first-child{ border-top: 1px solid var(--border); }
.case-study.is-tinted{ background: var(--sand); }
.case-study.is-ink{
  background: var(--ink);
  color: var(--cream);
  border-bottom-color: var(--dark-line);
}
.case-study.is-ink .case-category{ color: var(--champagne); }
.case-study.is-ink .case-name{ color: var(--cream); }
.case-study.is-ink .case-desc{ color: var(--dark-muted); }

.case-header{
  text-align: center;
  max-width: 60ch;
  margin-inline: auto;
  margin-bottom: var(--sp-6);
}
.case-category{
  font-size: 0.6875rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--clay);
  font-weight: 500;
  margin-bottom: var(--sp-2);
}
.case-name{
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.9rem, 1.5rem + 2vw, 3.25rem);
  line-height: 1.08;
  margin-bottom: var(--sp-3);
  max-width: 14em;
  margin-inline: auto;
}
.case-desc{
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--muted);
  max-width: 60ch;
  margin-inline: auto;
}

.case-frame{
  position: relative;
  background: var(--sand);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  overflow: hidden;
}
.case-study.is-ink .case-frame{ border-color: var(--dark-line); background: var(--ink-soft); }
.case-frame img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.case-carousel{ position: relative; }
.case-track{
  display: flex;
  gap: var(--sp-3);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
}
.case-track::-webkit-scrollbar{ display: none; }
.case-track > .case-frame{
  flex: 0 0 72%;
  scroll-snap-align: start;
  aspect-ratio: 4/5;
}
.case-track--solo{ justify-content: center; }
.case-track--solo > .case-frame{
  flex: 0 0 auto;
  width: min(420px, 100%);
  aspect-ratio: 9/16;
  scroll-snap-align: center;
}
.case-track > .case-frame--square{ aspect-ratio: 1/1; }
.case-track > .case-frame--tall{ aspect-ratio: 4/5; }
.case-track > .case-frame--wide{ aspect-ratio: 8/3; max-width: 760px; }
.case-frame img.fit-top{ object-position: top; }
.case-frame img.fit-contain{ object-fit: contain; padding: 4%; }

.case-nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--cream-rgb), .92);
  border: 1px solid var(--border);
  color: var(--ink);
  z-index: 2;
  transition: background-color .25s ease, color .25s ease, opacity .25s ease, transform .25s var(--ease-out);
}
.case-nav svg{ display: block; }
.case-nav--prev{ left: var(--sp-2); }
.case-nav--next{ right: var(--sp-2); }
.case-nav:hover:not(:disabled){ background: var(--ink); color: var(--card); }
.case-nav:focus-visible{ outline: 2px solid var(--ink); outline-offset: 2px; }
.case-nav:disabled{ opacity: .32; pointer-events: none; }
.case-carousel.is-single .case-nav{ display: none; }

.case-study.is-ink .case-nav{
  background: rgba(var(--ink-rgb), .55);
  border-color: var(--dark-line);
  color: var(--cream);
}
.case-study.is-ink .case-nav:hover:not(:disabled){ background: var(--champagne); color: var(--ink); }
.case-study.is-ink .case-nav:focus-visible{ outline-color: var(--champagne); }

@media (prefers-reduced-motion: reduce){
  .case-nav{ transition: none; }
}

/* Dynamic Fence flagship: interactive before/after slider */
.df-showcase{ margin-bottom: var(--sp-4); }
.ba-compare{ position: relative; }
.ba-frame{
  position: relative;
  aspect-ratio: 4/5;
  max-width: 640px;
  margin-inline: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  overflow: hidden;
  background: var(--sand);
}
.ba-img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  display: block;
}
.ba-before-wrap{ position: absolute; inset: 0; }
.ba-slider{
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
}
.ba-slider::-webkit-slider-thumb{
  -webkit-appearance: none;
  width: 44px;
  height: 100%;
  background: transparent;
}
.ba-slider::-moz-range-thumb{
  width: 44px;
  height: 100%;
  background: transparent;
  border: 0;
}
.ba-divider{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  z-index: 2;
  transform: translateX(-50%);
  pointer-events: none;
}
.ba-divider::before{
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 3px;
  margin-left: -1.5px;
  background: var(--cream);
  box-shadow: 0 0 10px rgba(0, 0, 0, .35);
}
.ba-handle{
  position: absolute;
  top: 50%; left: 0;
  transform: translate(-50%, -50%);
  width: 54px; height: 54px;
  border-radius: 50%;
  background: var(--ink);
  border: 2px solid var(--cream);
  box-shadow: 0 3px 14px rgba(0, 0, 0, .35);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  color: var(--cream);
}
.ba-handle::before, .ba-handle::after{
  content: "";
  width: 2px;
  height: 18px;
  border-radius: 1px;
  background: var(--cream);
}
.ba-slider:focus-visible ~ .ba-divider .ba-handle{
  outline: 2px solid var(--champagne);
  outline-offset: 2px;
}
.ba-label{
  position: absolute;
  top: var(--sp-2);
  z-index: 2;
  font-size: var(--text-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--cream);
  /* the backing has to hold cream over the lightest patch of either photo */
  background: rgba(var(--ink-rgb), .70);
  padding: .35em .9em;
  border-radius: 3px;
  pointer-events: none;
}
.ba-label-before{ left: var(--sp-2); }
.ba-label-after{ right: var(--sp-2); }

@media (max-width: 720px){
  .case-track > .case-frame{ flex-basis: 86%; }
  .case-track--solo > .case-frame{ flex-basis: auto; }
  .case-nav{ width: 40px; height: 40px; }
  .case-study{ padding-block: var(--sp-6); }
}

/* =========================================================
   Process ("how working together goes")
   ========================================================= */
.process{ padding-block: var(--sp-7); }
.process-steps{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-4) var(--sp-3);
  counter-reset: none;
}
.process-step{ position: relative; }
.process-label{
  font-family: var(--font-hand);
  font-weight: 600;
  font-size: 1.75rem;
  line-height: 1;
  /* deep champagne pop; 3.78:1 on alabaster passes the 3:1 large-text
     bar at this 28px/600 size (and the labels are aria-hidden anyway) */
  color: #8C7454;
  transform: rotate(-2deg);
  width: fit-content;
}
.process-phase{
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-base);
  margin-top: 10px;
}
.process-desc{
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--muted);
  margin-top: 8px;
}

/* =========================================================
   Services rows (photo + copy + price + book)
   ========================================================= */
.services, .services-teaser{ padding-block: var(--sp-7); }
.service-list{ display: flex; flex-direction: column; }
.service-row{ border-top: 1px solid var(--border); }
.service-list > .service-row:last-child{ border-bottom: 1px solid var(--border); }
.service-row-body{
  display: grid;
  grid-template-columns: 1.25fr auto auto;
  grid-template-areas: "main photo cta";
  align-items: center;
  gap: var(--sp-2) var(--sp-5);
  padding-block: var(--sp-4);
}
.service-main{ grid-area: main; display: block; }
.service-name{
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.4rem, 1.2rem + 1vw, 2rem);
  line-height: 1.15;
}
.service-desc{
  display: block;
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--muted);
  max-width: 52ch;
  margin-top: var(--sp-1);
}
.service-photo{
  grid-area: photo;
  display: block;
  width: 190px;
  height: 140px;
  border-radius: var(--radius-md);
  overflow: hidden;
  transform: rotate(1.5deg);
  border: 1px solid var(--border);
}
.service-row:nth-child(even) .service-photo{ transform: rotate(-1.5deg); }
.service-photo img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* placeholder slot for services shot before their photos exist */
.service-photo--ph{
  background: repeating-linear-gradient(45deg, var(--cream), var(--cream) 10px, var(--sand-deep) 10px, var(--sand-deep) 20px);
  border-style: dashed;
  display: flex;
  align-items: center;
  justify-content: center;
}
.service-photo--ph .ph-label{ font-size: 1.125rem; padding: 0 14px; }
.service-cta-row{
  grid-area: cta;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  justify-self: end;
}
.service-meta{
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.teaser-more{ margin-top: var(--sp-4); }

/* =========================================================
   Contact
   ========================================================= */
.contact{ padding-block: var(--sp-6) var(--sp-7); }
.contact-layout{
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: var(--sp-7);
  align-items: start;
}
.contact-visual .frame{ aspect-ratio: 3 / 4; }
.contact-prefer{
  margin-top: var(--sp-4);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-2);
}
.contact-prefer-text{
  font-family: var(--font-hand);
  font-weight: 500;
  font-size: 1.375rem;
  color: var(--clay);
  transform: rotate(-1.5deg);
}
.contact-meta{ margin-top: var(--sp-4); }
.contact-meta-location{
  font-size: var(--text-sm);
  color: var(--clay);
  margin-bottom: var(--sp-1);
}
.contact-form-col .section-display{ max-width: 16ch; }
.contact-intro-text{
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--muted);
  max-width: 48ch;
  margin-top: var(--sp-2);
}
.contact-form{
  margin-top: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  max-width: 560px;
}
.form-row{ display: flex; flex-direction: column; gap: 8px; }
.form-row label{
  font-size: var(--text-sm);
  font-weight: 600;
}
.form-row input,
.form-row textarea{
  font: var(--text-base) var(--font-body);
  color: var(--ink);
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  outline: none;
  transition: border-color .25s ease;
  resize: vertical;
}
.form-row input:focus,
.form-row textarea:focus{ border-color: var(--ink); }
.contact-form .btn{ align-self: flex-start; margin-top: var(--sp-1); }

/* =========================================================
   Big CTA band
   ========================================================= */
.cta-footer{
  padding-block: var(--sp-8);
  text-align: center;
}
.cta-display{
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--display-cta);
  line-height: 1.12;
  letter-spacing: -.01em;
  max-width: 20ch;
  margin-inline: auto;
  text-wrap: pretty;
}
.cta-footer .btn{ margin-top: var(--sp-4); }
.cta-footer .hand{ margin-inline: auto; margin-bottom: var(--sp-2); }

/* =========================================================
   404
   ========================================================= */
.notfound{ padding-block: var(--sp-8); }
.notfound-inner{ text-align: center; }
.notfound .page-hero-display{ margin-inline: auto; }
.notfound-desc{
  font-size: var(--text-md);
  color: var(--muted);
  max-width: 44ch;
  margin: var(--sp-3) auto 0;
}
.notfound .btn{ margin-top: var(--sp-4); }

/* =========================================================
   Footer (dark)
   ========================================================= */
.site-footer{
  background: var(--ink);
  color: var(--dark-muted);
  padding-block: var(--sp-6) var(--sp-4);
}
.footer-grid{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--sp-5);
  flex-wrap: wrap;
}
.footer-brand .logo-seal{
  width: 128px;
  height: 128px;
  font-size: 58px;
  padding-top: 4px;
  color: var(--champagne);
}
.footer-blurb{
  font-size: var(--text-sm);
  line-height: 1.6;
  max-width: 34ch;
  margin-top: 10px;
}
.footer-nav{
  display: flex;
  gap: var(--sp-6);
}
.footer-col{
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: var(--text-sm);
}
.footer-col-label{
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--dark-muted);
}
.footer-col ul{
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.footer-col a{
  color: var(--dark-muted);
  transition: color .25s ease;
}
.footer-col a:hover{ color: var(--cream); }
/* the footer is onyx, so the ring flips to champagne (the onyx ring vanishes) */
.footer-col a:focus-visible{ outline-color: var(--champagne); }
.footer-bottom{
  display: flex;
  justify-content: space-between;
  gap: var(--sp-2);
  flex-wrap: wrap;
  border-top: 1px solid var(--dark-line);
  margin-top: var(--sp-5);
  padding-top: var(--sp-3);
  font-size: var(--text-xs);
  color: var(--dark-muted);
}
.footer-bottom p{ margin: 0; }

/* =========================================================
   Scroll FX (Claude Design "Scroll Animation Concepts v2")
   Doodle accents: coral / teal / marigold / periwinkle, the
   bright complementary set chosen against the warm palette.
   ========================================================= */
/* breathing background: three soft champagne and porcelain blobs
   drifting slowly behind the alabaster areas of every page; sections
   with their own backgrounds (shell bands, onyx bands, footer) cover
   them, which is the point */
.bg-breathe{
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}
.bg-blob{
  position: absolute;
  border-radius: 50%;
  will-change: transform;
}
.bg-blob--1{
  top: -22%;
  left: -14%;
  width: 56vmax;
  height: 56vmax;
  background: radial-gradient(circle, rgba(var(--champagne-rgb), .5) 0%, rgba(var(--champagne-rgb), 0) 65%);
  animation: breathe-a 16s ease-in-out infinite alternate;
}
.bg-blob--2{
  bottom: -26%;
  right: -12%;
  width: 50vmax;
  height: 50vmax;
  background: radial-gradient(circle, rgba(251, 249, 244, .6) 0%, rgba(251, 249, 244, 0) 65%);
  animation: breathe-b 21s ease-in-out infinite alternate;
}
.bg-blob--3{
  top: 26%;
  left: 52%;
  width: 42vmax;
  height: 42vmax;
  background: radial-gradient(circle, rgba(var(--champagne-rgb), .14) 0%, rgba(var(--champagne-rgb), 0) 65%);
  animation: breathe-c 26s ease-in-out infinite alternate;
}
@keyframes breathe-a{
  from{ transform: translate(0, 0) scale(1); }
  to{ transform: translate(4vw, 3vh) scale(1.12); }
}
@keyframes breathe-b{
  from{ transform: translate(0, 0) scale(1.1); }
  to{ transform: translate(-3vw, -4vh) scale(.96); }
}
@keyframes breathe-c{
  from{ transform: translate(0, 0) scale(.94); }
  to{ transform: translate(-4vw, 2vh) scale(1.1); }
}
@media (prefers-reduced-motion: reduce){
  .bg-blob{ animation: none; }
}
.hero-split{ position: relative; }

/* podcast bands: film grain + light sweep */
@keyframes grain-jump{
  0%{ transform: translate(0,0); }
  25%{ transform: translate(-3%,2%); }
  50%{ transform: translate(2%,-3%); }
  75%{ transform: translate(-2%,-2%); }
  100%{ transform: translate(0,0); }
}
.podcast{ position: relative; overflow: hidden; }
.podcast > .section-inner{ position: relative; z-index: 1; }
.fx-sweep{
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 32%, rgba(var(--cream-rgb), .04) 44%, rgba(var(--cream-rgb), .11) 50%, rgba(var(--cream-rgb), .04) 56%, transparent 68%);
  background-size: 250% 100%;
}
.fx-grain{
  position: absolute;
  inset: -40px;
  pointer-events: none;
  opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain-jump .7s steps(4) infinite;
}
@media (prefers-reduced-motion: reduce){
  .fx-grain{ animation: none; }
}

/* rotating text: any [data-rotate] cycles its child spans */
[data-rotate]{
  display: inline-grid;
  vertical-align: baseline;
  text-align: left;
}
[data-rotate] > span{
  grid-area: 1 / 1;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(.5em);
  transition: opacity .5s ease, transform .5s var(--ease-out);
}
[data-rotate] > span:first-child{ opacity: 1; transform: translateY(0); }
/* The hero's rotating words sit inside body copy, so they cannot use the
   24px-and-up handwriting bronze (#8C7454 is only 3.8:1 here). This deeper
   bronze is the same warm family and clears 5.26:1 on alabaster, so the
   words read as an accent rather than more body text. */
.rotate-words > span{
  font-style: italic;
  font-weight: 500;
  color: #7A5C3E;
}
.sticker[data-rotate]{ text-align: center; }
.hand[data-rotate]{ margin-inline: auto; }

/* handwritten notes wipe in left to right, like being written */
html.has-fx .hand:not(.service-hand){
  clip-path: inset(-25% 105% -25% -5%);
  transition: clip-path 1.1s cubic-bezier(.6, 0, .3, 1) .15s;
}
html.has-fx .hand:not(.service-hand).is-written{
  clip-path: inset(-25% -5% -25% -5%);
}
/* services notes write word by word: each word is its own quick
   pen stroke, staggered by script.js via transition-delay */
html.has-fx .service-hand .hw-word,
html.has-fx .process-label .hw-word{
  display: inline-block;
  clip-path: inset(-30% 105% -30% -8%);
  transition: clip-path .34s cubic-bezier(.55, 0, .45, 1);
}
html.has-fx .service-hand.is-written .hw-word,
html.has-fx .process-label.is-written .hw-word{
  clip-path: inset(-30% -8% -30% -8%);
}

/* timeline ink thread: draws itself, lights each node it passes */
.timeline{ position: relative; }
.timeline-thread{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 48px;
  transform: translateX(-50%);
  pointer-events: none;
}
/* a plain div that grows with scroll: no SVG dash math, no artifacts */
.timeline-thread-line{
  position: absolute;
  top: 0;
  left: 50%;
  width: 2px;
  margin-left: -1px;
  height: 0;
  background: var(--champagne);
  border-radius: 1px;
}
.timeline-spine{ position: relative; z-index: 1; }
html.has-fx .timeline-line{ opacity: 0; }
html.has-fx .timeline-dot{
  background: var(--sand);
  transition: background-color .35s ease, transform .35s var(--ease-out);
}
html.has-fx .timeline-dot.is-lit{
  background: var(--champagne);
  transform: scale(1.25);
}
@media (max-width: 720px){
  .timeline-thread{ left: 16px; width: 32px; }
}

/* photo depth: once loaded, the FX loop owns the transform, so the
   develop-in transition releases it (a transform transition would
   smear every per-frame parallax update) */
html.js .work-card-media img.is-loaded,
html.js .frame img.is-loaded{
  transition: opacity .8s ease, filter .8s ease;
}

/* =========================================================
   Scroll reveal
   ========================================================= */
/* services rows: premium entrance, rise + unblur, then the photo
   settles into its tilt a beat later (desktop only; photos sit flat
   on mobile) */
html.js .service-row.reveal{
  opacity: 0;
  transform: translateY(28px);
  filter: blur(6px);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out), filter .7s ease;
}
html.js .service-row.reveal.is-visible{
  opacity: 1;
  transform: none;
  filter: none;
}
@media (min-width: 721px){
  html.js .service-row.reveal .service-photo{
    transform: rotate(0deg) scale(.97);
    transition: transform .9s var(--ease-out) .25s;
  }
  html.js .service-row.reveal.is-visible .service-photo{ transform: rotate(1.5deg) scale(1); }
  html.js .service-row.reveal.is-visible:nth-child(even) .service-photo{ transform: rotate(-1.5deg) scale(1); }
}
@media (prefers-reduced-motion: reduce){
  html.js .service-row.reveal{ opacity: 1; transform: none; filter: none; transition: none; }
  html.js .service-row.reveal .service-photo{ transform: none; transition: none; }
}

html.js .reveal{
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out);
}
html.js .reveal.is-visible{
  opacity: 1;
  transform: translateY(0);
}
/* tilted elements keep their tilt while revealing */
html.js .frame--tilt-l.reveal{ transform: rotate(-1.5deg) translateY(18px); }
html.js .frame--tilt-l.reveal.is-visible{ transform: rotate(-1.5deg); }
html.js .frame--tilt-r.reveal{ transform: rotate(1.5deg) translateY(18px); }
html.js .frame--tilt-r.reveal.is-visible{ transform: rotate(1.5deg); }
html.js .quote-card--tilt-l.reveal{ transform: rotate(-1.2deg) translateY(18px); }
html.js .quote-card--tilt-l.reveal.is-visible{ transform: rotate(-1.2deg); }
html.js .quote-card--tilt-r.reveal{ transform: rotate(1deg) translateY(18px); }
html.js .quote-card--tilt-r.reveal.is-visible{ transform: rotate(1deg); }
html.js .quote-card--tilt-s.reveal{ transform: rotate(-.6deg) translateY(18px); }
html.js .quote-card--tilt-s.reveal.is-visible{ transform: rotate(-.6deg); }
@media (prefers-reduced-motion: reduce){
  html.js .reveal{ opacity: 1; transform: none; transition: none; }
}

/* =========================================================
   Booking: service picker, calendar, details, confirmation
   ========================================================= */
.booking{ padding-block: var(--sp-6) var(--sp-7); }
.booking-steps{ display: flex; flex-direction: column; gap: var(--sp-6); }

.booking-step-head{ margin-bottom: var(--sp-4); }
/* Step headings take programmatic focus so screen readers follow the flow. */
.booking-step-title:focus,
.booking-panel-title:focus{ outline: none; }
.booking-step-title{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.5rem, 1.25rem + 1.1vw, 2.125rem);
  line-height: 1.12;
}
.booking-step-note{
  font-size: var(--text-sm);
  color: var(--muted);
  margin-top: var(--sp-1);
  max-width: 56ch;
}
.booking-step-head.is-centered{
  max-width: 32rem;
  margin-inline: auto;
  text-align: center;
}
.booking-step-head.is-centered .booking-step-note{ margin-inline: auto; }

/* ---- notices ---- */
.booking-notice{
  border-left: 2px solid var(--champagne);
  background: var(--sand);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  color: var(--ink-soft);
  max-width: 62ch;
  margin-bottom: var(--sp-6);
}
.booking-error{
  color: var(--clay-dark);
  font-size: var(--text-sm);
  font-weight: 600;
  margin-top: var(--sp-3);
  max-width: 56ch;
}
.booking-loading{
  font-size: var(--text-sm);
  color: var(--clay);
  padding-block: var(--sp-3);
}

/* ---- service picker: an editorial price list, not a row of cards ----
   No boxes: champagne hairlines and space articulate the entries, and the
   type carries the hierarchy (Garamond names and figures, Montserrat notes).
   Selection is a shape change, a solid onyx rail, so it never reads by colour
   alone. Rules and rails are pseudo-elements so hover can thicken them
   without reflowing the list. */
.service-picker{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: clamp(1.5rem, 4vw, 3rem);
  row-gap: 0;
  max-width: 980px;
  margin-inline: auto;
  /* the list closes on a rule, the way a printed menu does */
  border-bottom: 1px solid rgba(var(--champagne-rgb), .85);
}
.service-option{
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr;
  align-content: start;
  justify-items: start;
  text-align: left;
  min-height: 148px;
  /* the left inset is the rail's lane; it stays reserved so nothing shifts */
  padding: var(--sp-3) var(--sp-2);
  border: 0;
  border-radius: 0;
  background: transparent;
  transition: background-color .25s ease;
}
/* the rule that opens each entry */
.service-option::before{
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: rgba(var(--champagne-rgb), .85);
  transition: height .2s ease, background-color .25s ease;
}
/* the selected rail: no width until chosen */
.service-option::after{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  background: var(--ink);
  transition: width .2s var(--ease-out);
}
/* the floret marker is retired; the rules carry the list now */
.service-option-marker{ display: none; }

.service-option:hover{ background: rgba(var(--champagne-rgb), .16); }
.service-option:hover::before{ height: 2px; background: var(--sage-dark); }
.service-option:hover .service-option-name{ color: var(--clay); }

.service-option[aria-pressed="true"]{ background: rgba(var(--ink-rgb), .05); }
.service-option[aria-pressed="true"]::before{ height: 2px; background: var(--ink); }
.service-option[aria-pressed="true"]::after{ width: 4px; }
.service-option[aria-pressed="true"] .service-option-name{ color: var(--clay); }
.service-option[aria-pressed="true"] .service-option-meta::before{
  width: 44px;
  background: var(--ink);
}

.service-option-name{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.2rem, 1.05rem + .7vw, 1.55rem);
  line-height: 1.15;
  max-width: 26ch;
  transition: color .3s ease;
}
.service-option-summary{
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--muted);
  max-width: 42ch;
  margin-top: .55rem;
}
/* the price line, ticked by a short champagne rule */
.service-option-meta{
  position: relative;
  margin-top: var(--sp-2);
  padding-top: .85rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.125rem;
  line-height: 1.3;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  max-width: 32ch;
}
.service-option-meta::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 28px;
  height: 1px;
  background: var(--champagne);
  transition: width .2s var(--ease-out), background-color .25s ease;
}
.service-option-meta span{
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-xs);
  letter-spacing: .04em;
  color: var(--clay);
}
/* also the "optional" tag on the business-name label: small brown italic */
.service-option-sample{
  font-size: var(--text-xs);
  color: var(--clay);
  font-style: italic;
}
.service-option .service-option-sample{ margin-top: .5rem; }

/* ---- calendar ---- */
.calendar{
  background: var(--sand);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  padding: var(--sp-4);
  max-width: 560px;
}
.calendar-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
}
.calendar-month{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.15rem, 1rem + .6vw, 1.4rem);
  text-align: center;
  white-space: nowrap;
  flex: 1;
}
.calendar-nav{
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--clay);
  padding: .6em .4em;
  border-radius: var(--radius-sm);
  transition: color .25s ease, opacity .25s ease;
}
.calendar-nav:hover:not(:disabled){ color: var(--clay-dark); }
.calendar-nav:disabled{ color: var(--stone); opacity: .5; cursor: default; }

.calendar-weekdays,
.calendar-grid{
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}
.calendar-weekdays{ margin-bottom: 6px; }
.calendar-weekdays span{
  text-align: center;
  font-size: var(--text-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--clay);
  padding-block: .4em;
}
.calendar-blank{ min-height: 44px; }
.calendar-day{
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-sm);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  background: var(--cream);
  color: var(--ink);
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.calendar-day:hover:not(:disabled){ border-color: var(--ink); color: var(--ink); }
.calendar-day:disabled{
  background: transparent;
  color: rgba(var(--ink-rgb), .3);
  cursor: default;
}
.calendar-day[aria-pressed="true"]{
  background: var(--ink);
  border-color: var(--ink);
  color: var(--card);
}

/* ---- time chips ---- */
.time-block{ margin-top: var(--sp-5); }
.time-block-label{
  font-size: var(--text-sm);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--clay);
  margin-bottom: var(--sp-3);
}
.time-chips{
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
}
.time-chip{
  min-height: 44px;
  padding: .6em 1.1em;
  border-radius: 4px;
  border: 1.5px solid var(--border);
  background: var(--card);
  font-size: var(--text-sm);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  transition: border-color .25s ease, color .25s ease, background-color .25s ease;
}
.time-chip:hover{ border-color: var(--ink); color: var(--ink); }
.time-chip[aria-pressed="true"]{
  background: var(--ink);
  border-color: var(--ink);
  color: var(--card);
}

/* ---- selection summary + details form ---- */
.booking-summary{
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding-block: var(--sp-3);
  margin-bottom: var(--sp-5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-4);
  max-width: 620px;
}
.booking-summary-item{
  font-size: var(--text-sm);
  color: var(--clay);
}
.booking-summary-item strong{
  display: block;
  color: var(--ink);
  font-weight: 600;
  margin-top: .2em;
}
.booking-form{ max-width: 620px; }
.booking-form .form-row + .form-row{ margin-top: var(--sp-4); }
.booking-form .btn{ margin-top: var(--sp-5); }
.booking-form .btn[disabled]{ opacity: .6; cursor: default; transform: none; }

.booking-smallprint{
  margin-top: var(--sp-6);
  font-size: var(--text-xs);
  letter-spacing: .06em;
  color: var(--clay);
}
.booking-noscript{
  font-size: var(--text-sm);
  color: var(--ink-soft);
  max-width: 56ch;
}

/* ---- confirmation panel (also used by /booking-confirmed) ---- */
.booking-panel{
  background: var(--card);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  padding: var(--sp-6) var(--sp-5);
  max-width: 680px;
  box-shadow: 0 8px 24px rgba(var(--ink-rgb), .06);
}
.booking-panel-marker{
  font-family: var(--font-hand);
  font-weight: 600;
  font-size: 1.75rem;
  color: var(--clay);
  line-height: 1;
  margin-bottom: var(--sp-3);
  transform: rotate(-2deg);
  width: fit-content;
}
.booking-panel-marker--floret{
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1.5rem;
  transform: none;
}
.booking-panel-title{
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.625rem);
  line-height: 1.08;
  max-width: 18ch;
}
.booking-panel-title em{ font-style: italic; font-weight: 500; color: var(--clay); }
.booking-panel-text{
  font-size: var(--text-md);
  color: var(--ink-soft);
  max-width: 52ch;
  margin-top: var(--sp-3);
}
.booking-panel-facts{
  margin-top: var(--sp-5);
  display: grid;
  gap: var(--sp-3);
  border-top: 1px solid var(--border);
  padding-top: var(--sp-4);
}
.booking-panel-facts div{ font-size: var(--text-sm); color: var(--clay); }
.booking-panel-facts strong{
  display: block;
  color: var(--ink);
  font-weight: 600;
  font-size: var(--text-md);
  margin-top: .2em;
}
.booking-panel-demo{
  margin-top: var(--sp-5);
  border-left: 2px solid var(--champagne);
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--text-sm);
  color: var(--ink-soft);
  background: var(--chip);
}
.booking-panel .btn{ margin-top: var(--sp-5); }

@media (prefers-reduced-motion: reduce){
  .service-option, .service-option-name, .calendar-day, .time-chip, .calendar-nav,
  .service-option::before, .service-option::after, .service-option-meta::before{
    transition: none !important;
  }
}

@media (max-width: 720px){
  .booking{ padding-block: var(--sp-6); }
  .booking-steps{ gap: var(--sp-6); }
  .service-picker{ grid-template-columns: 1fr; max-width: none; }
  .service-option{ min-height: 0; padding-inline: .75rem; }
  .calendar{ padding: var(--sp-3); }
  .calendar-weekdays span{ font-size: 0.625rem; letter-spacing: .04em; }
  .calendar-nav{ font-size: 0.625rem; }
}

@media (max-width: 480px){
  :root{ --edge-pad: 1.25rem; }
  .calendar-weekdays,
  .calendar-grid{ gap: 4px; }
  .calendar-day, .calendar-blank{ min-height: 40px; }
  .calendar-nav{ font-size: 0.5625rem; letter-spacing: .06em; padding-inline: 0; }
}

/* =========================================================
   Lead-capture modal (booking flow in a dialog)
   ========================================================= */
.booking-modal{
  width: min(1040px, calc(100vw - 2 * var(--sp-4)));
  height: min(860px, 92dvh);
  padding: 0;
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--cream);
  overflow: hidden;
}
.booking-modal::backdrop{
  background: rgba(var(--ink-rgb), .55);
  backdrop-filter: blur(6px);
}
.booking-modal-frame{
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.booking-modal-close{
  position: absolute;
  top: var(--sp-2);
  right: var(--sp-2);
  z-index: 2;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--cream);
  font-size: 1.4rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color .25s ease;
}
.booking-modal-close:hover{ background: #35302B; }
@media (max-width: 720px){
  .booking-modal{
    width: 100vw;
    height: 100dvh;
    max-width: none;
    max-height: none;
    border-radius: 0;
  }
}

/* =========================================================
   Podcast modal (players in a dialog, stay on the page)
   ========================================================= */
.podcast-modal{
  width: min(560px, calc(100vw - 2 * var(--sp-3)));
  padding: 0;
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--ink);
  color: var(--cream);
}
.podcast-modal::backdrop{
  background: rgba(var(--ink-rgb), .55);
  backdrop-filter: blur(6px);
}
.podcast-modal-inner{ padding: var(--sp-5); }
.podcast-modal-title{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.4rem, 1.2rem + 1vw, 1.75rem);
  line-height: 1.15;
  margin-bottom: var(--sp-3);
}
.podcast-modal .podcast-embed{ text-align: left; }
.podcast-modal-close{
  position: absolute;
  top: var(--sp-2);
  right: var(--sp-2);
  z-index: 2;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--champagne);
  color: var(--ink);
  font-size: 1.4rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color .25s ease;
}
.podcast-modal-close:hover{ background: var(--cream); }
/* the dialog is onyx, so the ring flips to champagne (the onyx ring vanishes) */
.podcast-modal-close:focus-visible,
.podcast-modal .podcast-toggle-btn:focus-visible,
.podcast-modal .podcast-open-link:focus-visible{ outline-color: var(--champagne); }
@media (max-width: 720px){
  .podcast-modal-inner{ padding: var(--sp-4) var(--sp-3); }
}

/* Embed mode: /book rendered inside the modal iframe, chrome hidden.
   The dialog needs roomier spacing than the full-page defaults. */
html.is-embed .site-header,
html.is-embed .mobile-menu,
html.is-embed .site-footer,
html.is-embed footer,
html.is-embed .cta-footer{ display: none !important; }
html.is-embed .booking{ padding-block: var(--sp-5) var(--sp-6); }
html.is-embed .section-inner{ padding-inline: clamp(1.5rem, 7vw, 5rem); }
html.is-embed .page-hero{ padding-block: var(--sp-6) var(--sp-4); }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 980px){
  .primary-nav, .nav-cta, .nav-social{ display: none; }
  .hamburger{ display: flex; }

  .hero-split{ grid-template-columns: 1fr; gap: var(--sp-5); padding-top: var(--sp-5); }
  .hero-figure{ max-width: 420px; }
  .hero-figure .frame{ aspect-ratio: 4 / 5; }

  .feature-split{ grid-template-columns: 1fr; gap: var(--sp-5); }
  .feature-split .frame{ max-width: 420px; }

  .about-hero{ grid-template-columns: 1fr; gap: var(--sp-5); }
  .about-hero .frame{ max-width: 420px; }

  .podcast-cover{ width: 180px; }

  .work-cards{ grid-template-columns: repeat(2, 1fr); }
  .quote-grid{ grid-template-columns: 1fr 1fr; }

  .process-steps{ grid-template-columns: repeat(2, 1fr); }

  .contact-layout{ grid-template-columns: 1fr; gap: var(--sp-6); }

  .footer-nav{ gap: var(--sp-5); }
}

@media (max-width: 720px){
  :root{ --header-h: 68px; }

  .header-inner{ height: 104px; }
  .site-header .logo-seal{ width: 88px; height: 88px; font-size: 40px; padding-top: 3px; }
  .site-header.is-scrolled .logo-seal{ width: 40px; height: 40px; font-size: 18px; padding-top: 1px; }
  .logo-name{ font-size: .625rem; letter-spacing: .3em; margin-left: 10px; }

  .quotes, .process, .services, .services-teaser, .contact,
  .cta-footer, .podcast{ padding-block: var(--sp-6); }
  .band{ padding-block: var(--sp-6); }
  .newsletter{ padding-block: var(--sp-6); }
  .page-hero{ padding-block: var(--sp-5) var(--sp-4); }

  .hero-split{ padding-bottom: var(--sp-6); }
  .sticker{ font-size: 1.25rem; left: -8px; }

  .section-row{ align-items: flex-start; flex-direction: column; }

  .work-cards{ grid-template-columns: 1fr; }
  .quote-grid{ grid-template-columns: 1fr; }
  .process-steps{ grid-template-columns: 1fr; gap: var(--sp-4); }

  /* timeline collapses to a single left-spine column; the placeholder
     photo tucks under its entry's copy */
  .timeline-row{ grid-template-columns: 32px 1fr; }
  .timeline-spine{ grid-column: 1; grid-row: 1 / 3; }
  .timeline-row:nth-child(odd) .timeline-body,
  .timeline-row:nth-child(even) .timeline-body{
    grid-column: 2;
    grid-row: 1;
    justify-self: start;
    text-align: left;
    padding: 0 0 var(--sp-3) 16px;
    max-width: none;
  }
  .timeline-row:nth-child(odd) .timeline-media,
  .timeline-row:nth-child(even) .timeline-media{
    grid-column: 2;
    grid-row: 2;
    justify-self: start;
    margin: 4px 0 var(--sp-5) 16px;
  }
  .timeline-row:nth-child(even) .timeline-aside,
  .timeline-row:nth-child(even) .timeline-text{ margin-left: 0; }
  .timeline-media{ width: min(260px, 100%); }
  .timeline-year{ font-size: 1.375rem; }

  .service-row-body{
    grid-template-columns: 1fr;
    grid-template-areas:
      "main"
      "photo"
      "cta";
    row-gap: var(--sp-2);
    padding-block: var(--sp-4);
  }
  .service-photo{ width: 100%; height: 190px; transform: rotate(0); margin-top: var(--sp-1); }
  .service-row:nth-child(even) .service-photo{ transform: rotate(0); }
  .service-cta-row{ flex-direction: column; align-items: flex-start; gap: var(--sp-2); width: 100%; justify-self: stretch; }
  .service-cta-row .btn{ align-self: stretch; }

  .newsletter-form input{ width: 100%; }
  .newsletter-form .btn{ width: 100%; }

  .footer-grid{ flex-direction: column; gap: var(--sp-4); }
  .footer-bottom{ flex-direction: column; gap: 6px; }
}

/* =========================================================
   Free guides
   An editorial rate-card list, not boxes: champagne hairline
   rows on the open page, Garamond names, a ghosted desk sketch
   in the band margin. Rows open the guides dialog (script.js,
   keyed on data-guide; hrefs are the no-JS fallback).
   ========================================================= */
.guides-band{ position: relative; overflow-x: clip; }
.guides-band .section-inner{ position: relative; z-index: 1; }
.guides-hand{ text-align: center; margin-top: 2px; }
.guides-fig{
  position: absolute;
  right: 1vw;
  top: 6%;
  width: min(460px, 30vw);
  pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 58% 58% at 50% 50%, #000 30%, transparent 73%);
  mask-image: radial-gradient(ellipse 58% 58% at 50% 50%, #000 30%, transparent 73%);
}
.guides-fig img{
  width: 100%;
  height: auto;
  display: block;
  mix-blend-mode: multiply;
  opacity: .22;
  transform: rotate(2deg);
}
.guides-fig--bl{
  right: auto;
  left: 1vw;
  top: auto;
  bottom: 3%;
  width: min(340px, 22vw);
}
.guides-fig--bl img{ transform: rotate(-2.5deg); opacity: .2; }
.guide-list{
  max-width: 880px;
  margin: 0 auto;
  border-top: 1px solid rgba(var(--champagne-rgb), .55);
}
.guide-row{ border-bottom: 1px solid rgba(var(--champagne-rgb), .55); }
.guide-row-link{
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) auto;
  gap: var(--sp-3);
  align-items: baseline;
  padding: 30px 10px;
  transition: background-color .25s ease;
}
.guide-row-link:hover{ background: rgba(var(--champagne-rgb), .14); }
.guide-row-name{
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.35rem, 1.1rem + 1.2vw, 1.75rem);
  line-height: 1.15;
  text-wrap: pretty;
  transition: color .25s ease;
}
.guide-row-link:hover .guide-row-name{ color: var(--clay); }
.guide-row-hook{
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--muted);
}
.guide-row-cue{
  justify-self: end;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--clay);
  border-bottom: 1.5px solid rgba(var(--champagne-rgb), .9);
  padding-bottom: 3px;
  white-space: nowrap;
  transition: color .25s ease, border-color .25s ease;
}
.guide-row-link:hover .guide-row-cue{ color: var(--ink); border-color: var(--ink); }

@media (max-width: 1149px){
  .guides-fig{ display: none; }
}

@media (prefers-reduced-motion: reduce){
  .guide-row-link, .guide-row-name, .guide-row-cue{ transition: none; }
}

/* ---- the dialog ---- */
.guides-modal{
  width: min(560px, calc(100vw - 2 * var(--sp-3)));
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--card);
  color: var(--ink);
}
.guides-modal::backdrop{
  background: rgba(var(--ink-rgb), .55);
  backdrop-filter: blur(6px);
}
.guides-modal-inner{ padding: var(--sp-5); }
.guides-modal-title{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.4rem, 1.2rem + 1vw, 1.75rem);
  line-height: 1.15;
  margin-bottom: var(--sp-3);
}
.guides-toggle{
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
}
/* editorial text tabs on the light panel, same language as the podcast dialog */
.guides-toggle-btn{
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: .08em;
  padding: .45em .15em;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  transition: color .25s ease, border-color .25s ease;
}
.guides-toggle-btn:hover{ color: var(--ink); }
.guides-toggle-btn.is-active{
  color: var(--ink);
  border-bottom-color: var(--champagne);
}
.guides-panel-name{
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.25rem, 1.1rem + .7vw, 1.5rem);
  line-height: 1.2;
  color: var(--clay);
}
.guides-panel-desc{
  font-size: var(--text-sm);
  line-height: 1.7;
  color: var(--muted);
  margin-top: var(--sp-2);
}
.guides-panel-cta{ margin-top: var(--sp-4); }
.guides-modal-close{
  position: absolute;
  top: var(--sp-2);
  right: var(--sp-2);
  z-index: 2;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--sand-deep);
  color: var(--ink);
  font-size: 1.4rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color .25s ease, color .25s ease;
}
.guides-modal-close:hover{ background: var(--ink); color: var(--card); }

@media (prefers-reduced-motion: reduce){
  .guides-toggle-btn, .guides-modal-close{ transition: none; }
}

/* ---- responsive ---- */
@media (max-width: 720px){
  .guide-row-link{
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 22px 4px;
  }
  .guide-row-cue{ justify-self: start; margin-top: 6px; }
  .guides-modal-inner{ padding: var(--sp-4) var(--sp-3); }
}

/* =========================================================
   Sketched journey illustrations (about timeline margins).
   Hannah's illustrations painted into the paper: multiply blend
   over alabaster, a radial vignette on the holder, and a scroll
   driven wipe mask on the img (script.js, has-fx only). Without
   JS or with reduced motion they render fully painted. Placement
   from Claude Design "Journey Section".
   ========================================================= */
.band:has(.timeline){ overflow-x: clip; }
.timeline-fig{
  position: absolute;
  z-index: -1;
  pointer-events: none;
}
.timeline-fig img{
  width: 100%;
  height: auto;
  display: block;
  mix-blend-mode: multiply;
  opacity: .3;
  transition: opacity .6s ease;
}
/* One-shot draw-in: script.js queues the figs one at a time. .is-drawing
   starts the wipe and PERSISTS (drawn sketches survive scrolling away,
   reset only on reload); .is-shining is the one-second gloss at completion.
   Without has-fx (no JS or reduced motion) there is no mask at all and the
   sketches simply rest fully painted at the subtle opacity. */
@property --wipe{
  syntax: "<percentage>";
  inherits: true;
  initial-value: 0%;
}
html.has-fx .timeline-fig{
  --wipe: 0%;
  transition: --wipe 3.2s linear;
}
html.has-fx .timeline-fig img{
  -webkit-mask-image: linear-gradient(105deg, #000 var(--wipe), transparent calc(var(--wipe) + 22%));
  mask-image: linear-gradient(105deg, #000 var(--wipe), transparent calc(var(--wipe) + 22%));
}
html.has-fx .timeline-fig.is-drawing{ --wipe: 135%; }
html.has-fx .timeline-fig.is-drawing img{ opacity: .48; }
html.has-fx .timeline-fig.is-shining img{ opacity: .62; }
html.has-fx .timeline-fig.is-drawing:not(.is-shining):not(.no-anim) img{ transition: opacity .6s ease .2s; }
html.has-fx .timeline-fig.no-anim{ transition: none; }
html.has-fx .timeline-fig.no-anim img{ transition: none; opacity: .3; }
.timeline-fig::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 40%, rgba(251, 249, 244, .9) 50%, transparent 60%);
  background-size: 250% 100%;
  background-repeat: no-repeat;
  background-position: -40% 0;
  opacity: 0;
}
.timeline-fig.is-shining::after{
  animation: fig-shine 1s ease-out both;
}
@keyframes fig-shine{
  from{ background-position: -40% 0; opacity: 0; }
  30%{ opacity: .55; }
  to{ background-position: 120% 0; opacity: 0; }
}
.timeline-fig--2018{ right: calc(100% - 150px); top: 6%; width: min(680px, 40vw); -webkit-mask-image: radial-gradient(ellipse 58% 58% at 50% 50%, #000 30%, transparent 73%); mask-image: radial-gradient(ellipse 58% 58% at 50% 50%, #000 30%, transparent 73%); }
.timeline-fig--2018 img{ transform: rotate(-2deg); }
.timeline-fig--2020{ left: calc(100% - 130px); top: 0; width: min(420px, 26vw); -webkit-mask-image: radial-gradient(ellipse 60% 58% at 50% 48%, #000 32%, transparent 74%); mask-image: radial-gradient(ellipse 60% 58% at 50% 48%, #000 32%, transparent 74%); }
.timeline-fig--2020 img{ transform: rotate(2deg); }
.timeline-fig--2021{ right: calc(100% - 150px); top: 10%; width: min(560px, 34vw); -webkit-mask-image: radial-gradient(ellipse 58% 58% at 50% 50%, #000 30%, transparent 73%); mask-image: radial-gradient(ellipse 58% 58% at 50% 50%, #000 30%, transparent 73%); }
.timeline-fig--2021 img{ transform: rotate(3deg); }
.timeline-fig--2022{ left: calc(100% - 150px); top: 14%; width: min(620px, 38vw); -webkit-mask-image: radial-gradient(ellipse 58% 58% at 50% 50%, #000 30%, transparent 73%); mask-image: radial-gradient(ellipse 58% 58% at 50% 50%, #000 30%, transparent 73%); }
.timeline-fig--2022 img{ transform: rotate(-2.5deg); }
.timeline-fig--2023{ right: calc(100% - 130px); top: 8%; width: min(460px, 28vw); -webkit-mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, #000 34%, transparent 75%); mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, #000 34%, transparent 75%); }
.timeline-fig--2023 img{ transform: rotate(2deg); }
.timeline-fig--2024{ left: calc(100% - 110px); top: 0; width: min(400px, 25vw); -webkit-mask-image: radial-gradient(ellipse 62% 58% at 50% 46%, #000 32%, transparent 74%); mask-image: radial-gradient(ellipse 62% 58% at 50% 46%, #000 32%, transparent 74%); }
.timeline-fig--2024 img{ transform: rotate(-2deg); }
.timeline-fig--2025{ right: calc(100% - 120px); top: 0; width: min(420px, 26vw); -webkit-mask-image: radial-gradient(ellipse 60% 58% at 50% 48%, #000 32%, transparent 74%); mask-image: radial-gradient(ellipse 60% 58% at 50% 48%, #000 32%, transparent 74%); }
.timeline-fig--2025 img{ transform: rotate(2.5deg); }
.timeline-fig--2026{ left: calc(100% - 170px); top: 8%; width: min(680px, 40vw); -webkit-mask-image: radial-gradient(ellipse 58% 58% at 50% 50%, #000 30%, transparent 73%); mask-image: radial-gradient(ellipse 58% 58% at 50% 50%, #000 30%, transparent 73%); }
.timeline-fig--2026 img{ transform: rotate(-2deg); }

/* tablet range: the margins shrink, so without the JS squeeze the
   figs pre-dim and slim down; the loop refines this when running */
@media (min-width: 760px) and (max-width: 1149px){
  .timeline-fig{ opacity: .55; }
}
@media (max-width: 759px){
  .timeline-fig{ display: none; }
}

/* =========================================================
   Work page elevated: proof bar, filters, case stat rows,
   and the hand cues on the slider and the Millie Rose track.
   Numbers in the proof bar and Dynamic Fence stats are read
   from the clients' own Instagram insight graphics shown on
   this page; do not edit one without the other.
   ========================================================= */
.em-underline{ border-bottom: 3px solid var(--champagne); }
.proof-band{ padding-block: 0 var(--sp-5); }
.proof-bar{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 42px 46px 30px;
}
.proof-stats{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--sp-4);
}
.proof-stat{
  border-left: 1px solid var(--champagne);
  padding-left: 24px;
}
.proof-stat-num{
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.6rem, 2rem + 2.4vw, 3.6rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.proof-stat-label{
  margin-top: 12px;
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--clay);
}
.proof-stat-client{
  margin-top: 6px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1rem;
  color: var(--clay);
}
.proof-note{
  margin-top: var(--sp-3);
  font-size: .75rem;
  color: var(--clay);
}
.proof-note-mark{ color: var(--champagne); }
.case-stats{
  display: grid;
  gap: 14px;
  border-top: 1px solid var(--champagne);
  padding-top: 22px;
  margin-top: 26px;
  max-width: 560px;
}
.case-stat{
  display: flex;
  align-items: baseline;
  gap: 16px;
}
.case-stat-value{
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.75rem;
  min-width: 150px;
  font-variant-numeric: tabular-nums;
}
.case-stat-label{
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--clay);
}
.case-cue{ text-align: center; margin-top: 10px; }
.case-cue--left{ text-align: left; margin-top: 14px; }


/* =========================================================
   Work case deck: one business at a time. Each case pins to
   the viewport and the next client slides up over it (sticky
   stack, native scroll, no snapping). Panels need opaque
   backgrounds to cover the case beneath; mobile and short
   viewports keep the normal stacked flow.
   ========================================================= */
@media (min-width: 981px) and (min-height: 640px){
  .case-list .case-study{
    position: sticky;
    top: 0;
    min-height: 100svh;
    display: flex;
    align-items: center;
    z-index: 1;
    padding-block: 0;
  }
  .case-list .case-study:not(.is-tinted):not(.is-ink){ background: var(--cream); }
  .case-list .case-study .section-inner{
    width: 100%;
    padding-block: 88px 40px;
  }
  .case-split{
    display: grid;
    grid-template-columns: minmax(300px, 5fr) minmax(340px, 7fr);
    gap: var(--sp-5);
    align-items: center;
  }
  .case-visuals .ba-frame{
    width: min(100%, calc(62svh * 0.8));
    margin-inline: auto;
  }
  .case-visuals .case-frame img{
    max-height: 56svh;
    width: auto;
    max-width: 100%;
  }
  .case-visuals .case-track{ align-items: center; }
}
.case-duo{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 20px;
  max-width: 440px;
}
.case-duo .case-frame img{
  width: 100%;
  height: auto;
  max-height: 24svh;
  object-fit: contain;
}

/* Contact form status line (created by script.js on submit) */
.form-note{
  margin-top: var(--sp-2);
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--clay);
}
.form-note.is-error{ color: var(--clay-dark); font-weight: 500; }