/* =========================================================
   Synovial Marketing: Redesign Pitch
   Design system: cream / blush / ink / clay
   Display: Fraunces · Body: Instrument Sans · Wordmark: Albano Script
   ========================================================= */

@font-face{
  font-family: "Albano Script";
  src: url("fonts/Albano-Script.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "Stylebooks";
  src: url("fonts/StylebooksTypeface-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "Stylebooks";
  src: url("fonts/StylebooksTypeface-Italic.otf") format("opentype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face{
  font-family: "Stylebooks";
  src: url("fonts/StylebooksTypeface-SemiBold.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root{
  /* ---- color ---- */
  --cream: #F7F3EC;
  --cream-rgb: 247, 243, 236;
  --blush: #ECE2DC;
  --blush-rgb: 236, 226, 220;
  --ink: #211C18;
  --ink-rgb: 33, 28, 24;
  --clay: #A9502F;
  --clay-rgb: 169, 80, 47;
  --clay-dark: #8A3F24;
  --stone: #8B837B;

  /* ---- type ---- */
  --font-display: "Stylebooks", "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-body: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-script: "Albano Script", "Pinyon Script", "Segoe Script", cursive;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-md: 1.125rem;
  --text-lg: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);

  --display-hero: clamp(3.5rem, 2.2rem + 6.2vw, 8rem);
  --display-page: clamp(2.75rem, 2.1rem + 3.4vw, 5rem);
  --display-section: clamp(2.25rem, 1.7rem + 2.4vw, 4rem);
  --display-cta: clamp(2.5rem, 1.6rem + 4.2vw, 5.5rem);
  /* letterspaced caps masthead reads larger than its point size */
  --wordmark-size: clamp(1.0625rem, 0.95rem + 0.55vw, 1.375rem);

  /* ---- spacing scale, 8px base ---- */
  --sp-1: 0.5rem;   /* 8  */
  --sp-2: 1rem;     /* 16 */
  --sp-3: 1.5rem;   /* 24 */
  --sp-4: 2rem;     /* 32 */
  --sp-5: 3rem;     /* 48 */
  --sp-6: 4rem;     /* 64 */
  --sp-7: 6rem;     /* 96 */
  --sp-8: 8rem;     /* 128 */

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

  --header-h: 84px;

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

  --radius-sm: 4px;
  --radius-lg: 28px;

  color-scheme: light;
}

/* =========================================================
   Reset
   ========================================================= */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
@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;
  padding-top: var(--header-h);
}
body.page-home{ padding-top: 0; }
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; }

:focus-visible{
  outline: 2px solid var(--clay);
  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); }

/* =========================================================
   Grain texture (cream / blush sections)
   ========================================================= */
.paper{ position: relative; }
.paper::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .5;
  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);
}
.kicker{
  font-size: var(--text-sm);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--stone);
  margin-bottom: var(--sp-2);
}
.kicker-on-ink{ color: rgba(var(--cream-rgb), .6); }

.eyebrow{
  font-size: var(--text-sm);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--clay);
  font-weight: 600;
  margin-bottom: var(--sp-3);
}

/* Stylebooks ships a very wide native word space; pull display type back in */
.hero-display, .section-display, .page-hero-display, .cta-display,
.service-name, .work-name, .mobile-menu nav a, .quote-moment-quote,
.testimonial-quote, .about-pullquote, .manifesto-text, .journal-title,
.marquee-set span{
  word-spacing: -0.18em;
}

.section-display{
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--display-section);
  line-height: 1.05;
  letter-spacing: -0.01em;
  max-width: 16ch;
  margin-bottom: var(--sp-6);
}
.section-display em, .hero-display em, .cta-display em, .about-pullquote em, .page-hero-display em{
  font-style: italic;
  font-weight: 400;
  color: var(--clay);
}
.section-display.on-ink{ color: var(--cream); }

.services, .services-teaser, .process, .about, .work, .work-teaser,
.testimonials, .journal, .quote-moment, .manifesto{
  padding-block: var(--sp-8);
}

/* =========================================================
   Buttons
   ========================================================= */
.btn{
  display: inline-flex;
  align-items: center;
  gap: .5em;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-base);
  padding: 0.95em 1.7em;
  border-radius: 999px;
  transition: transform .35s var(--ease-out), background-color .25s ease, color .25s ease, border-color .25s ease;
  white-space: nowrap;
}
.btn-solid{
  background: var(--clay);
  color: var(--cream);
}
.btn-solid:hover{ background: var(--clay-dark); transform: translateY(-2px); }
.btn-lg{ font-size: var(--text-lg); padding: 1.1em 2.2em; }

.btn-text{
  padding: 0;
  border-radius: 0;
  background: none;
  position: relative;
}
.btn-text span{ transition: transform .3s var(--ease-out); }
.btn-text::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -3px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0.35);
  transform-origin: left;
  transition: transform .35s var(--ease-out);
  opacity: .6;
}
.btn-text:hover::after{ transform: scaleX(1); }
.btn-text:hover span{ transform: translateX(4px); }

.btn-outline-ink{
  border: 1px solid rgba(var(--cream-rgb), .4);
  color: var(--cream);
  background: transparent;
}
.btn-outline-ink:hover{
  border-color: var(--cream);
  background: rgba(var(--cream-rgb), .08);
}

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

/* =========================================================
   Header / Nav
   ========================================================= */
.site-header{
  position: fixed;
  top: 0; left: 0; right: 0;
  width: 100%;
  z-index: 500;
  background: rgba(var(--cream-rgb), .78);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid rgba(var(--ink-rgb), .08);
  transition: background-color .3s ease, backdrop-filter .3s ease, border-color .3s ease;
}
.header-inner{
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--edge-pad);
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: var(--sp-5);
}
.wordmark{
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--wordmark-size);
  text-transform: uppercase;
  letter-spacing: .18em;
  word-spacing: .1em;
  line-height: 1;
  color: var(--ink);
  transition: color .3s ease;
}
.primary-nav{
  margin-left: auto;
}
.primary-nav ul{ display: flex; gap: var(--sp-4); }
.primary-nav a{
  font-size: var(--text-sm);
  font-weight: 500;
  position: relative;
  padding: .3em 0;
  transition: color .3s ease;
}
.primary-nav a::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--clay);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s var(--ease-out);
}
.primary-nav a:hover::after{ transform: scaleX(1); }
.primary-nav a[aria-current="page"]{ color: var(--clay); }
.primary-nav a[aria-current="page"]::after{ transform: scaleX(1); }

.nav-cta{ font-size: var(--text-sm); padding: 0.75em 1.4em; }

.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(--ink);
  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), background-color .3s ease;
}

/* ---- Transparent header over the home cinematic hero ---- */
.site-header--home:not(.is-scrolled){
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
}
.site-header--home:not(.is-scrolled) .wordmark,
.site-header--home:not(.is-scrolled) .primary-nav a,
.site-header--home:not(.is-scrolled) .social-link{
  color: var(--cream);
  text-shadow: 0 1px 3px rgba(0, 0, 0, .25);
}
.site-header--home:not(.is-scrolled) .social-link:hover,
.site-header--home:not(.is-scrolled) .social-link:focus-visible{
  color: var(--clay);
  background: rgba(var(--cream-rgb), .12);
}
.site-header--home:not(.is-scrolled) .hamburger span{
  background: var(--cream);
}

.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 guard: content taller than a short viewport would otherwise
     overflow past the translated box and peek into view */
  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: 84px;
}
.mobile-menu .wordmark{ color: var(--cream); font-size: clamp(1rem, 0.9rem + 0.8vw, 1.375rem); }
.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: 500;
}
.mobile-menu nav a[aria-current="page"]{ color: var(--clay); }
.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(--clay);
  background: rgba(var(--cream-rgb), .08);
}
.mobile-menu .btn{ margin-top: auto; align-self: flex-start; }

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

/* =========================================================
   Cinematic home hero
   ========================================================= */
.hero-cinematic{
  position: relative;
  /* grows past 100svh when content needs it (small screens) */
  height: auto;
  min-height: max(100svh, 560px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--ink);
}
.hero-cinematic-media{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  z-index: 0;
}
.hero-cinematic-media.img-fallback{ display: none; }
.hero-cinematic::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to bottom,
    rgba(33, 28, 24, .8) 0%,
    rgba(33, 28, 24, .3) 32%,
    rgba(33, 28, 24, .4) 62%,
    rgba(33, 28, 24, .88) 100%
  );
}
.hero-cinematic-content{
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--edge-pad);
  padding-top: calc(var(--header-h) + var(--sp-5));
  padding-bottom: var(--sp-8);
  color: var(--cream);
}
.hero-cinematic-content .hero-display{ color: var(--cream); }
.hero-cinematic-content .hero-support{ color: rgba(var(--cream-rgb), .85); }
/* lighter clay: the base accent lacks contrast on the dark photo */
.hero-cinematic-content .eyebrow{ color: #D9906A; }
.hero-cinematic-content .hero-display em{ color: #D9906A; }

.hero-display{
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--display-hero);
  line-height: 0.98;
  letter-spacing: -0.02em;
  max-width: 17ch;
}
.hero-support{
  font-size: var(--text-lg);
  max-width: 42ch;
  color: #45403A;
  margin-top: var(--sp-4);
}
.hero-ctas{
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-top: var(--sp-5);
  flex-wrap: wrap;
}

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

/* =========================================================
   Marquee
   ========================================================= */
.marquee{
  background: var(--ink);
  color: var(--cream);
  overflow: hidden;
  padding-block: var(--sp-4);
  border-top: 1px solid rgba(var(--cream-rgb), .12);
  border-bottom: 1px solid rgba(var(--cream-rgb), .12);
}
.marquee-track{
  display: flex;
  width: max-content;
  animation: marquee-scroll 34s linear infinite;
}
.marquee-set{
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.marquee-set span{
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.5rem, 1.1rem + 2vw, 2.75rem);
  padding-inline: var(--sp-3);
  white-space: nowrap;
}
.marquee-set .floret{
  font-family: var(--font-body);
  font-style: normal;
  color: var(--clay);
  font-size: 1.1rem;
  padding-inline: 0;
}
@keyframes marquee-scroll{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce){
  .marquee-track{ animation: none; }
}

/* =========================================================
   Manifesto band
   ========================================================= */
.manifesto-inner{
  max-width: 800px;
  text-align: center;
}
.manifesto-text{
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.5rem, 1.15rem + 1.8vw, 2.5rem);
  line-height: 1.3;
  color: var(--ink);
}

/* =========================================================
   Page hero (About / Services / Work / Contact)
   ========================================================= */
.page-hero{
  background: var(--blush);
  padding-block: var(--sp-7) var(--sp-6);
}
.page-hero-display{
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--display-page);
  line-height: 1;
  letter-spacing: -0.02em;
  max-width: 16ch;
}
.page-hero-support{
  font-size: var(--text-lg);
  max-width: 46ch;
  color: #45403A;
  margin-top: var(--sp-4);
}

/* =========================================================
   Services
   ========================================================= */
.service-list{
  border-top: 1px solid rgba(var(--ink-rgb), .14);
}
.service-row{ border-bottom: 1px solid rgba(var(--ink-rgb), .14); }
.service-link{
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: var(--sp-4);
  padding-block: var(--sp-5);
  text-align: left;
  transition: padding-inline .35s var(--ease-out);
}
.service-list--teaser .service-link{
  grid-template-columns: auto 1fr auto;
  padding-block: var(--sp-4);
}
.service-link:hover{ padding-inline: var(--sp-2) 0; }
.service-link:hover .service-name{ color: var(--clay); }
.service-marker{
  font-size: 1.25rem;
  color: var(--clay);
  min-width: 1.4ch;
  text-align: center;
}
.service-main{ display: flex; flex-direction: column; gap: .45em; }
.service-name{
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.35rem + 1.8vw, 3rem);
  font-weight: 500;
  line-height: 1.05;
  transition: color .3s ease;
}
.service-list--teaser .service-name{
  font-size: clamp(1.4rem, 1.15rem + 1.2vw, 2rem);
}
.service-desc{
  font-size: var(--text-sm);
  color: var(--stone);
  max-width: 50ch;
}
.service-meta{
  font-size: var(--text-sm);
  color: var(--stone);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.service-arrow{
  font-size: 1.3rem;
  color: var(--clay);
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity .3s ease, transform .35s var(--ease-out);
}
.service-link:hover .service-arrow{ opacity: 1; transform: translateX(0); }

.teaser-more{ display: inline-flex; margin-top: var(--sp-5); }

@media (prefers-reduced-motion: reduce){
  .service-link, .service-arrow{ transition: none !important; }
}

/* =========================================================
   Process
   ========================================================= */
.process{ background: var(--blush); }
.process-steps{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-5);
}
.process-step{
  position: relative;
  padding-top: var(--sp-4);
  border-top: 2px solid var(--ink);
}
@media (min-width: 981px){
  .process-step:not(:last-child)::after{
    content: "\2192";
    position: absolute;
    top: -0.6em;
    right: calc(var(--sp-5) / -2);
    transform: translateX(50%);
    color: var(--clay);
    font-size: 1rem;
    line-height: 1;
    background: var(--blush);
    padding-inline: 0.2em;
  }
}
.process-phase{
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--clay);
  margin-bottom: var(--sp-2);
}
.process-desc{
  font-size: var(--text-md);
  color: var(--ink);
  max-width: 26ch;
}

/* =========================================================
   About
   ========================================================= */
.about-grid{
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: var(--sp-7);
  align-items: center;
}
.about-frame{
  aspect-ratio: 4/5;
  background: var(--blush);
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(var(--ink-rgb), .1);
}
.about-frame img{
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .6s var(--ease-out);
}
.about-figure:hover .about-frame img{ transform: scale(1.03); }
.about-frame.img-fallback{ position: relative; }
.about-frame.img-fallback::after{
  content: "H L";
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: 3rem;
  color: var(--clay);
  opacity: .5;
}
.about-text{
  font-size: var(--text-md);
  max-width: 52ch;
  margin-bottom: var(--sp-3);
  color: #3A342F;
}
.about-pullquote{
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.25rem);
  font-weight: 400;
  line-height: 1.2;
  margin-top: var(--sp-4);
  max-width: 18ch;
}

@media (prefers-reduced-motion: reduce){
  .about-frame img{ transition: none; }
}

/* =========================================================
   Work: editorial masonry
   ========================================================= */
.work-grid{
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 140px;
  gap: var(--sp-3);
}
.work-grid--teaser{
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 240px;
}
.work-tile{
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--sp-4);
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: transform .4s var(--ease-out);
}
.work-tile:hover{ transform: translateY(-4px); }
.tile-lg{ grid-column: span 3; grid-row: span 3; }
.tile-md{ grid-column: span 3; grid-row: span 2; }
.tile-sm{ grid-column: span 6; grid-row: span 2; }
.work-grid--teaser .work-tile{ grid-column: span 1; grid-row: span 1; }

.tile-blush{ background: var(--blush); color: var(--ink); }
.tile-ink{ background: var(--ink); color: var(--cream); }
.tile-clay{ background: var(--clay); color: var(--cream); }

.work-name{
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.5rem, 1.2rem + 1.6vw, 2.5rem);
  line-height: 1.05;
}
.work-tag{
  display: block;
  margin-top: var(--sp-2);
  font-size: var(--text-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .7;
}
.work-arrow{
  position: absolute;
  top: var(--sp-3);
  right: var(--sp-3);
  font-size: 1.4rem;
  transition: transform .35s var(--ease-out);
}
.work-tile:hover .work-arrow{ transform: translate(3px, -3px); }

.work-teaser{ background: var(--blush); }

@media (prefers-reduced-motion: reduce){
  .work-tile, .work-arrow{ transition: none; }
}

/* =========================================================
   Testimonials
   ========================================================= */
.quote-moment-inner{
  max-width: 760px;
  text-align: center;
}
.quote-moment-quote{
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.6rem, 1.25rem + 2vw, 2.75rem);
  line-height: 1.25;
  color: var(--ink);
}
.quote-moment-cite{
  margin-top: var(--sp-4);
  font-size: var(--text-sm);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--clay);
  font-style: normal;
  font-weight: 600;
}
.quote-moment-inner .btn-text{ margin-top: var(--sp-5); }

.testimonial-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
}
.testimonial-card{
  background: var(--blush);
  border-radius: var(--radius-sm);
  padding: var(--sp-5) var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.testimonial-quote{
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.25rem, 1.05rem + .8vw, 1.6rem);
  line-height: 1.3;
  color: var(--ink);
}
.testimonial-cite{
  font-size: var(--text-sm);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--clay);
  font-style: normal;
  font-weight: 600;
  margin-top: auto;
}

/* =========================================================
   Podcast (dark): used full on /about, condensed teaser on home
   ========================================================= */
.podcast{
  background: var(--ink);
  color: var(--cream);
  padding-block: var(--sp-8);
}
.podcast-inner{ text-align: center; }
.podcast-inner .section-display{ margin-inline: auto; max-width: 20ch; }
.podcast-desc{
  font-size: var(--text-lg);
  color: rgba(var(--cream-rgb), .75);
  max-width: 44ch;
  margin: 0 auto var(--sp-5);
}
.podcast-links{
  display: flex;
  justify-content: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
}

/* =========================================================
   Journal
   ========================================================= */
.journal-list{ border-top: 1px solid rgba(var(--ink-rgb), .14); }
.journal-row{ border-bottom: 1px solid rgba(var(--ink-rgb), .14); }
.journal-row a{
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding-block: var(--sp-4);
}
.journal-title{
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1rem + .8vw, 1.6rem);
  font-weight: 500;
  transition: color .3s ease;
}
.journal-row a:hover .journal-title{ color: var(--clay); }
.journal-date{
  margin-left: auto;
  font-size: var(--text-sm);
  color: var(--stone);
  white-space: nowrap;
}
.journal-arrow{
  transition: transform .35s var(--ease-out);
}
.journal-row a:hover .journal-arrow{ transform: translateX(4px); }

@media (prefers-reduced-motion: reduce){
  .journal-title, .journal-arrow{ transition: none; }
}

/* =========================================================
   Contact form
   ========================================================= */
.contact-layout{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-7);
  align-items: start;
}
.contact-intro-text{
  font-size: var(--text-md);
  max-width: 44ch;
  margin-bottom: var(--sp-4);
  color: #3A342F;
}
.contact-meta{
  margin-top: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.contact-meta-location{
  font-size: var(--text-sm);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--stone);
}
.contact-form{
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.form-row{
  display: flex;
  flex-direction: column;
  gap: .5em;
}
.form-row label{
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: .04em;
}
.form-row input,
.form-row textarea{
  font-family: var(--font-body);
  font-size: var(--text-base);
  padding: .9em 1em;
  border: 1px solid rgba(var(--ink-rgb), .25);
  border-radius: var(--radius-sm);
  background: var(--cream);
  color: var(--ink);
  transition: border-color .25s ease;
  resize: vertical;
}
.form-row input:focus,
.form-row textarea:focus{
  outline: none;
  border-color: var(--clay);
}
.contact-form .btn{ align-self: flex-start; margin-top: var(--sp-1); }

/* =========================================================
   404
   ========================================================= */
.notfound{
  min-height: calc(100svh - var(--header-h));
  display: flex;
  align-items: center;
}
.notfound-inner{
  max-width: 640px;
}
.notfound-desc{
  font-size: var(--text-lg);
  max-width: 46ch;
  color: #45403A;
  margin-top: var(--sp-4);
  margin-bottom: var(--sp-5);
}

/* =========================================================
   Big CTA footer band
   ========================================================= */
.cta-footer{
  padding-block: var(--sp-8);
  text-align: center;
}
.cta-display{
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--display-cta);
  line-height: 1;
  letter-spacing: -0.02em;
  max-width: 16ch;
  margin-inline: auto;
  margin-bottom: var(--sp-5);
}

/* =========================================================
   Footer
   ========================================================= */
.site-footer{
  background: var(--ink);
  color: rgba(var(--cream-rgb), .8);
  padding-block: var(--sp-6) var(--sp-4);
}
.footer-grid{
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-5);
  align-items: flex-start;
  justify-content: space-between;
  padding-bottom: var(--sp-5);
  border-bottom: 1px solid rgba(var(--cream-rgb), .14);
}
.footer-brand .wordmark{
  color: var(--cream);
  font-size: clamp(1.375rem, 1.15rem + 1.2vw, 2rem);
}
.footer-meta{ margin-top: var(--sp-2); font-size: var(--text-sm); color: var(--stone); }
.footer-nav ul{ display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.footer-nav a{ font-size: var(--text-sm); }
.footer-nav a:hover{ color: var(--clay); }
.footer-nav a[aria-current="page"]{ color: var(--clay); }
.footer-social{ gap: var(--sp-2); }
.footer-social .social-link{ color: rgba(var(--cream-rgb), .8); }
.footer-social .social-link:hover, .footer-social .social-link:focus-visible{
  color: var(--clay);
  background: rgba(var(--cream-rgb), .08);
}
.footer-bottom{ padding-top: var(--sp-4); font-size: var(--text-xs); color: var(--stone); }

/* =========================================================
   Scroll reveal
   ========================================================= */
html.js .reveal{
  opacity: 0;
  transform: translateY(28px);
  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);
}
@media (prefers-reduced-motion: reduce){
  html.js .reveal{ opacity: 1; transform: none; transition: none; }
}

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

  .about-grid{ grid-template-columns: 1fr; }
  .about-frame{ max-width: 420px; margin-inline: auto; }

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

  .work-grid--teaser{ grid-template-columns: repeat(2, 1fr); grid-auto-rows: 200px; }
  .testimonial-grid{ grid-template-columns: 1fr 1fr; }

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

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

  .services, .services-teaser, .process, .about, .work, .work-teaser,
  .testimonials, .journal, .quote-moment, .manifesto, .podcast, .cta-footer{
    padding-block: var(--sp-6);
  }
  .page-hero{ padding-block: var(--sp-6) var(--sp-5); }

  .service-link{
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    row-gap: var(--sp-2);
    padding-block: var(--sp-4);
  }
  .service-marker, .service-main{ grid-row: 1; }
  .service-meta, .service-arrow{ grid-row: 2; grid-column: 2; }
  .service-arrow{ justify-self: end; }
  .service-list--teaser .service-link{ grid-template-columns: auto 1fr; }
  .service-list--teaser .service-arrow{ grid-row: 1; justify-self: end; }

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

  .work-grid{ grid-template-columns: repeat(2, 1fr); grid-auto-rows: 130px; }
  .tile-lg{ grid-column: span 2; grid-row: span 3; }
  .tile-md{ grid-column: span 2; grid-row: span 2; }
  .tile-sm{ grid-column: span 2; grid-row: span 2; }
  .work-grid--teaser{ grid-template-columns: 1fr; grid-auto-rows: 220px; }

  .testimonial-grid{ grid-template-columns: 1fr; }

  .footer-grid{ flex-direction: column; gap: var(--sp-3); }
}

@media (max-width: 480px){
  :root{ --edge-pad: 1.25rem; }
  .journal-row a{ flex-wrap: wrap; }
  .journal-date{ margin-left: 0; order: 3; }
}