/* ==========================================================================
   Design for Serenity — homepage styles
   Brand tokens: sage #4B6A63 · berry #994B6B · sand #F2ECE3
   Type: Adobe Garamond Pro (display) · Raleway (body) · Poppins (UI)
   ========================================================================== */

:root {
  /* Brand */
  --sage: #4b6a63;
  --berry: #994b6b;
  --sand: #f2ece3;

  /* Ground — near-black sage/charcoal derived from --sage */
  --ink: #1d2822;
  --ink-2: #232f28;
  --ink-3: #2a372f;

  /* Text — deliberately assertive: premium doesn't mean whispered.
     Low opacity is reserved for metadata, never for paragraphs
     visitors need to read. */
  --text: var(--sand);
  --text-muted: rgba(242, 236, 227, 0.78);
  /* 0.66 alpha blends to ≈6.3:1 against --ink — WCAG AA for normal text */
  --text-faint: rgba(242, 236, 227, 0.66);

  /* Lines */
  --hairline: rgba(242, 236, 227, 0.18);
  --hairline-soft: rgba(242, 236, 227, 0.11);

  /* Type stacks — adobe-garamond-pro activates automatically once the
     Adobe Fonts kit <link> is added in index.html */
  --font-display: "adobe-garamond-pro", "EB Garamond", Garamond, Georgia, serif;
  --font-body: "Raleway", "Helvetica Neue", Arial, sans-serif;
  --font-ui: "Poppins", "Helvetica Neue", Arial, sans-serif;

  /* Rhythm */
  --gutter: clamp(1.25rem, 4vw, 4rem);
  --section-pad: clamp(5rem, 12svh, 9.5rem);
  --header-h: 5.5rem;
}

/* ------------------------------ Reset-ish ------------------------------ */

/* <picture> wrappers from the responsive-image pipeline must not add a
   layout box: the inner <img> carries all the classes and sizing */
picture {
  display: contents;
}


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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1.0625rem;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

h1,
h2,
h3,
p,
ul,
ol,
dl,
dd,
figure,
blockquote {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

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

/* Focus */
:focus-visible {
  outline: 2px solid var(--sand);
  outline-offset: 4px;
  border-radius: 1px;
}

.skip-link {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 100;
  padding: 0.75rem 1.25rem;
  background: var(--sand);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transform: translateY(-200%);
  transition: transform 0.2s ease;
}

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

/* ------------------------------ Utilities ------------------------------ */

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

.eyebrow {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.section-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.75rem, 5.5vw, 4.75rem);
  line-height: 1.05;
  letter-spacing: 0.01em;
  margin-top: 0.75rem;
}

/* Italic is reserved for expressive lines in Laura's voice ("She reads
   yards for a living."); functional headings stay upright so the italic
   keeps its impact. */
.section-title--em {
  font-style: italic;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 1.05rem 2rem;
  border: 1px solid var(--sand);
  color: var(--sand);
  background: transparent;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.btn--small {
  padding: 0.7rem 1.4rem;
  font-size: 0.75rem;
}

.btn--solid {
  background: var(--sand);
  color: var(--ink);
}

.btn:hover {
  background: var(--sand);
  color: var(--ink);
}

.btn--solid:hover {
  background: transparent;
  color: var(--sand);
}

/* Arrow link */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-ui);
  font-size: 0.75rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sand);
  padding-bottom: 0.35rem;
  position: relative;
}

.link-arrow::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--berry);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}

.link-arrow:hover::after {
  transform: scaleX(1);
}

.link-arrow__glyph {
  transition: transform 0.3s ease;
}

.link-arrow:hover .link-arrow__glyph {
  transform: translateX(0.35rem);
}

/* Leading back-arrow: glyph comes first and nudges left on hover instead */
.link-arrow--back:hover .link-arrow__glyph {
  transform: translateX(-0.35rem);
}

/* Quiet link */
.link-quiet {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--text-faint);
  transition: color 0.3s ease;
}

.link-quiet:hover {
  color: var(--sand);
}

/* Underline-grow variant, matching .link-arrow's animation */
.link-quiet--underline {
  position: relative;
  padding-bottom: 0.2rem;
}

.link-quiet--underline::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--berry);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}

.link-quiet--underline:hover::after {
  transform: scaleX(1);
}

/* Inline text link within prose (body-copy paragraphs) — a static
   underline so it reads as a link while reading, brightening on hover */
.link-inline {
  text-decoration: underline;
  text-decoration-color: rgba(153, 75, 107, 0.55);
  text-underline-offset: 0.15em;
  transition: color 0.3s ease, text-decoration-color 0.3s ease;
}

.link-inline:hover {
  color: var(--sand);
  text-decoration-color: var(--berry);
}

/* Placeholder tags (shared by all image slots awaiting DFS photography) */
.ph-tag {
  position: absolute;
  right: 0.9rem;
  bottom: 0.9rem;
  z-index: 2;
  font-family: var(--font-ui);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(242, 236, 227, 0.5);
  border: 1px solid var(--hairline);
  padding: 0.35rem 0.6rem;
  background: rgba(29, 40, 34, 0.55);
  backdrop-filter: blur(4px);
}

.ph-watermark {
  position: absolute;
  width: 70%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.07;
  pointer-events: none;
}

/* Scroll reveals — set --reveal-delay (inline or via nth-child) to stagger
   siblings that enter the viewport together */
.reveal {
  opacity: 0;
  transform: translateY(2rem);
  transition: opacity 0.9s ease var(--reveal-delay, 0s), transform 0.9s ease var(--reveal-delay, 0s);
}

.reveal.in-view {
  opacity: 1;
  transform: none;
}

/* Headline variant: rises out of a clipped line, like the reference site.
   Driven by the nearest .reveal ancestor gaining .in-view — a fully
   clipped element can never trigger IntersectionObserver itself. */
.reveal--title {
  transform: translateY(1.15em);
  clip-path: inset(0 0 100% 0);
  transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1) 0.1s, clip-path 1s cubic-bezier(0.22, 1, 0.36, 1) 0.1s;
}

.in-view .reveal--title {
  transform: none;
  clip-path: inset(-0.25em 0 -0.25em 0);
}

/* ------------------------------- Header ------------------------------- */

.site-header {
  position: fixed;
  /* Starts 1px above the viewport (padding compensates): Chrome rounds
     fixed-element edges to fractional device pixels while the scrolled
     background fades in, which showed a 1px sliver of the hero above
     the header. Overshooting the top edge makes the seam impossible. */
  inset: -1px 0 auto 0;
  padding-top: 1px;
  z-index: 50;
  transition: background-color 0.4s ease, border-color 0.4s ease;
  border-bottom: 1px solid transparent;
}

.site-header.is-scrolled {
  background: rgba(29, 40, 34, 0.92);
  backdrop-filter: blur(10px);
  border-bottom-color: var(--hairline-soft);
}

.site-header__inner {
  width: min(100% - 2 * var(--gutter), 90rem);
  margin-inline: auto;
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  flex-shrink: 0;
}

.brand__mark {
  width: 1.65rem;
  height: auto;
}

/* Full logo lockup (replaces the flower mark + text wordmark) */
.brand__logo {
  height: 1.6rem;
  width: auto;
}

.brand--footer .brand__logo {
  height: 1.5rem;
}

.brand__wordmark {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.375rem;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.site-nav__list {
  display: flex;
  gap: clamp(1.5rem, 3vw, 3rem);
}

.site-nav__link {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 0.9rem 0;
  position: relative;
  transition: color 0.3s ease;
}

.site-nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--berry);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.site-nav__link:hover {
  color: var(--sand);
}

.site-nav__link:hover::after {
  transform: scaleX(1);
}

/* Mobile menu toggle */
.menu-toggle {
  display: none;
  align-items: center;
  gap: 0.7rem;
  min-height: 2.75rem; /* 44px touch target */
  background: none;
  border: none;
  color: var(--sand);
  font-family: var(--font-ui);
  font-size: 0.75rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 0.5rem 0;
}

.menu-toggle__bars {
  display: inline-flex;
  flex-direction: column;
  gap: 5px;
  width: 1.5rem;
}

.menu-toggle__bars i {
  display: block;
  height: 1px;
  background: var(--sand);
  transition: transform 0.3s ease;
}

.menu-toggle[aria-expanded="true"] .menu-toggle__bars i:first-child {
  transform: translateY(3px) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] .menu-toggle__bars i:last-child {
  transform: translateY(-3px) rotate(-45deg);
}

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: var(--ink);
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: calc(var(--header-h) + 2rem) var(--gutter) 3rem;
  opacity: 0;
  transition: opacity 0.35s ease;
}

/* `.mobile-menu { display: flex }` alone would beat the [hidden] attribute's
   UA display:none (equal specificity, author sheet wins) and leave this
   fixed, full-viewport panel sitting invisibly over the whole page —
   swallowing every hover and click below the header even while "closed".
   Only switch on display once [hidden] is actually removed. */
.mobile-menu:not([hidden]) {
  display: flex;
}

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

.mobile-menu__list {
  display: grid;
  gap: 1.25rem;
  margin-bottom: 3rem;
}

.mobile-menu__link {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 10vw, 3.5rem);
  line-height: 1.1;
  color: var(--sand);
}

.mobile-menu__cta {
  margin-bottom: auto;
}

.mobile-menu__foot {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-top: 3rem;
}

/* -------------------------------- Hero -------------------------------- */

/* Scroll track: the extra height is the "distance" the scroll-scrub uses
   to move through the hero video. */
.hero {
  position: relative;
  height: 170svh;
}

.hero__sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(29, 40, 34, 0.9) 0%,
    rgba(29, 40, 34, 0.45) 45%,
    rgba(29, 40, 34, 0.3) 100%
  );
}

.hero__content {
  position: relative;
  z-index: 1;
  width: min(100% - 2 * var(--gutter), 90rem);
  margin-inline: auto;
  padding-bottom: clamp(4rem, 10svh, 7rem);
  padding-top: calc(var(--header-h) + 3rem);
}

/* Load-in: hero copy cascades up once the page is ready */
@keyframes hero-rise {
  from {
    opacity: 0;
    transform: translateY(1.8rem);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.hero__content > * {
  opacity: 0;
  animation: hero-rise 1.1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.hero__content > :nth-child(1) { animation-delay: 0.15s; }
.hero__content > :nth-child(2) { animation-delay: 0.3s; }
.hero__content > :nth-child(3) { animation-delay: 0.5s; }
.hero__content > :nth-child(4) { animation-delay: 0.65s; }

.hero__eyebrow {
  color: var(--text-muted);
  margin-bottom: clamp(1.5rem, 3svh, 2.5rem);
}

.hero__title {
  font-family: var(--font-display);
  font-weight: 400;
  /* Sized to the longest line, "Looks Like Devotion." (20ch) */
  font-size: clamp(2.9rem, 8vw, 7.5rem);
  line-height: 1.05;
  letter-spacing: 0.005em;
  max-width: 21ch;
}

.hero__title em {
  font-style: italic;
}

.hero__support {
  max-width: 34rem;
  margin-top: clamp(1.5rem, 3svh, 2.25rem);
  color: rgba(242, 236, 227, 0.94);
  text-shadow: 0 1px 14px rgba(29, 40, 34, 0.6);
}

.hero__actions {
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3rem);
  margin-top: clamp(2rem, 4svh, 3rem);
  flex-wrap: wrap;
}

.hero__scroll {
  position: absolute;
  right: calc(var(--gutter) / 2);
  bottom: clamp(4rem, 10svh, 7rem);
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.hero__scroll-word {
  writing-mode: vertical-rl;
  font-family: var(--font-ui);
  font-size: 0.75rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.hero__scroll-line {
  width: 1px;
  height: 4rem;
  background: var(--hairline);
  position: relative;
  overflow: hidden;
}

.hero__scroll-line::after {
  content: "";
  position: absolute;
  left: 0;
  top: -100%;
  width: 100%;
  height: 100%;
  background: var(--sand);
  animation: scroll-drip 2.6s ease-in-out infinite;
}

@keyframes scroll-drip {
  0% { top: -100%; }
  55% { top: 100%; }
  100% { top: 100%; }
}


/* ----------------------------- Philosophy ----------------------------- */

.philosophy {
  padding: calc(var(--section-pad) * 1.15) 0;
}

.philosophy__quote {
  max-width: 56rem;
  margin-inline: auto;
  text-align: center;
}

.philosophy__quote p,
.testimonial__quote p {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.75rem, 3.4vw, 3rem);
  line-height: 1.35;
}

.philosophy__quote footer,
.testimonial__quote footer {
  margin-top: 2.75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
}

.philosophy__rule {
  display: block;
  width: 2.5rem;
  height: 1px;
  background: var(--berry);
  transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Quotes warm up slightly on hover — rule widens, text lifts to full sand */
.philosophy__quote p,
.testimonial__quote p {
  color: rgba(242, 236, 227, 0.82);
  transition: color 0.5s ease;
}

.philosophy__quote:hover p,
.testimonial__quote:hover p {
  color: var(--sand);
}

.philosophy__quote:hover .philosophy__rule,
.testimonial__quote:hover .philosophy__rule {
  width: 5rem;
}

.philosophy__cite,
.testimonial__cite {
  transition: color 0.5s ease;
}

.philosophy__quote:hover .philosophy__cite,
.testimonial__quote:hover .testimonial__cite {
  color: var(--text-muted);
}

.philosophy__cite,
.testimonial__cite {
  font-family: var(--font-ui);
  font-style: normal;
  font-size: 0.75rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* ------------------------------- Work grid ------------------------------- */

.work {
  border-top: 1px solid var(--hairline-soft);
  padding: var(--section-pad) 0;
}

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: clamp(3rem, 6svh, 5rem);
}

/* Tight editorial mosaic — even gutters, text overlaid on the photos.
   Layout keys are assigned per project in js/main.js. */
.work__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(0.625rem, 1.2vw, 1rem);
  grid-auto-rows: clamp(13rem, 24vw, 21rem);
  grid-auto-flow: dense;
}

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

.project--tall-left  { grid-column: 1 / 6;  grid-row: span 2; }
.project--wide-right { grid-column: 6 / 13; }
.project--wide-left  { grid-column: 1 / 8; }
.project--half-right { grid-column: 8 / 13; }
.project--tall-right { grid-column: 8 / 13; grid-row: span 2; }
.project--banner     { grid-column: 1 / -1; }

.project__media {
  display: block;
  position: relative;
  overflow: hidden;
  height: 100%;
  background: var(--ink-2);
}

/* Legibility gradient that deepens to a full dark veil on hover */
.project__shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image: linear-gradient(to top, rgba(29, 40, 34, 0.78) 0%, rgba(29, 40, 34, 0) 58%);
  background-color: rgba(29, 40, 34, 0);
  transition: background-color 0.45s ease;
}

.project:hover .project__shade,
.project:focus-visible .project__shade {
  background-color: rgba(29, 40, 34, 0.6);
}

/* Placeholder art per tonal variant (replace with real project photos) */
.project__art {
  position: absolute;
  inset: 0;
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.project:hover .project__art,
.project:focus-visible .project__art {
  transform: scale(1.045);
}

.project__art--photo {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.project__art::after,
.video__art::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E");
}

[data-tone="sage"] {
  background:
    radial-gradient(120% 90% at 25% 15%, rgba(75, 106, 99, 0.55) 0%, rgba(75, 106, 99, 0) 60%),
    linear-gradient(160deg, #1e2b26 0%, #121a17 70%);
}

[data-tone="moss"] {
  background:
    radial-gradient(110% 85% at 80% 20%, rgba(110, 132, 106, 0.4) 0%, rgba(110, 132, 106, 0) 60%),
    linear-gradient(200deg, #1a251f 0%, #101714 75%);
}

[data-tone="berry"] {
  background:
    radial-gradient(110% 90% at 75% 80%, rgba(153, 75, 107, 0.28) 0%, rgba(153, 75, 107, 0) 60%),
    linear-gradient(150deg, #201d20 0%, #121a17 70%);
}

[data-tone="sand"] {
  background:
    radial-gradient(120% 90% at 20% 85%, rgba(242, 236, 227, 0.12) 0%, rgba(242, 236, 227, 0) 55%),
    linear-gradient(170deg, #232a24 0%, #111714 75%);
}

/* Meta overlaid bottom-left: title always visible; location and the
   View Project link surface on hover (reference-style) */
.project__meta {
  position: absolute;
  left: clamp(1rem, 2vw, 1.75rem);
  right: clamp(1rem, 2vw, 1.75rem);
  bottom: clamp(0.85rem, 1.6vw, 1.15rem);
  z-index: 2;
  display: flex;
  flex-direction: column;
}

/* Collapsible rows: closed (0fr) the title sits at the card's bottom
   edge; on hover the rows expand and the title rides up into place. */
.project__row {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.project__row-inner {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  overflow: hidden;
  min-height: 0;
}

.project__row--loc .project__row-inner {
  padding-bottom: 0.45rem;
}

.project__row--more .project__row-inner {
  padding-top: 0.45rem;
}

.project:hover .project__row,
.project:focus-visible .project__row {
  grid-template-rows: 1fr;
}

.project__location {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--text-muted);
  opacity: 0;
  transform: translateY(0.5rem);
  transition: opacity 0.4s ease 0.05s, transform 0.4s ease 0.05s;
}

.project__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.4rem, 2.2vw, 1.9rem);
  line-height: 1.15;
  text-shadow: 0 1px 18px rgba(29, 40, 34, 0.55);
}

.project__blurb {
  display: block;
  max-width: 30rem;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 400;
  line-height: 1.6;
  color: var(--text-muted);
  opacity: 0;
  transform: translateY(0.5rem);
  transition: opacity 0.4s ease 0.1s, transform 0.4s ease 0.1s;
}

.project__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.35rem;
  font-family: var(--font-ui);
  font-size: 0.75rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--sand);
  opacity: 0;
  transform: translateY(0.5rem);
  transition: opacity 0.4s ease 0.16s, transform 0.4s ease 0.16s;
}

.project:hover .project__location,
.project:focus-visible .project__location,
.project:hover .project__blurb,
.project:focus-visible .project__blurb,
.project:hover .project__cta,
.project:focus-visible .project__cta {
  opacity: 1;
  transform: none;
}

/* ------------------------------- Services ------------------------------- */

.services {
  border-top: 1px solid var(--hairline-soft);
  padding: var(--section-pad) 0;
}

.services__layout {
  display: grid;
  grid-template-columns: minmax(16rem, 1fr) 2.2fr;
  gap: clamp(3rem, 6vw, 7rem);
  align-items: start;
}

.services__intro {
  position: sticky;
  top: calc(var(--header-h) + 2rem);
}

.services__lede {
  margin-top: 1.75rem;
  max-width: 24rem;
  color: var(--text-muted);
}

.services__list {
  border-top: 1px solid var(--hairline);
  counter-reset: service;
}

.service {
  display: grid;
  grid-template-columns: 3.5rem 1.1fr 1fr;
  gap: clamp(1rem, 2.5vw, 2.5rem);
  align-items: baseline;
  padding: clamp(1.75rem, 3.5svh, 2.5rem) 0;
  border-bottom: 1px solid var(--hairline);
  transition: border-color 0.4s ease;
}

.service:hover {
  border-bottom-color: rgba(153, 75, 107, 0.55);
}

.service__num {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  color: var(--text-faint);
  transition: color 0.35s ease, opacity 0.35s ease;
}

.service:hover .service__num {
  color: var(--berry);
}

.service__name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.4rem, 2.2vw, 1.9rem);
  line-height: 1.2;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s ease;
}

.service:hover .service__name {
  transform: translateX(0.5rem);
}

.service__desc {
  font-size: 0.9375rem;
  color: var(--text-muted);
  transition: opacity 0.35s ease;
}

/* Highlight the hovered row by letting its siblings recede. Children are
   dimmed (not the row itself) so this never fights the .reveal opacity. */
@media (hover: hover) {
  .services__list:hover .service > * {
    opacity: 0.35;
  }

  .services__list:hover .service:hover > * {
    opacity: 1;
  }
}

/* Rows cascade as the list enters the viewport */
.services__list .service:nth-child(2) { --reveal-delay: 0.08s; }
.services__list .service:nth-child(3) { --reveal-delay: 0.16s; }
.services__list .service:nth-child(4) { --reveal-delay: 0.24s; }
.services__list .service:nth-child(5) { --reveal-delay: 0.32s; }
.services__list .service:nth-child(6) { --reveal-delay: 0.4s; }
.services__list .service:nth-child(7) { --reveal-delay: 0.48s; }

/* -------------------------------- Studio -------------------------------- */

.studio {
  border-top: 1px solid var(--hairline-soft);
  padding: var(--section-pad) 0;
}

/* Sand variant: the homepage Who We Are section breathes in warm sand
   while everything around it stays in the dark editorial register */
.studio--sand {
  background: var(--sand);
  border-top: none;
}

.studio--sand .eyebrow {
  color: rgba(29, 40, 34, 0.55);
}

.studio--sand .section-title {
  color: var(--ink);
}

.studio--sand .studio__text p {
  color: rgba(29, 40, 34, 0.78);
}

.studio--sand .link-arrow {
  color: var(--ink);
}

.studio--sand .link-arrow::after {
  background: var(--berry);
}

.studio__layout {
  width: min(100% - 2 * var(--gutter), 90rem);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(3rem, 6vw, 7rem);
  align-items: center;
}

/* Restrained press credit line in the Who We Are section (sand ground).
   Selector must outweigh the .studio--sand .studio__text p color rule. */
.studio__press,
.studio--sand .studio__text p.studio__press {
  margin-top: 2.25rem;
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(29, 40, 34, 0.55);
}

.studio__media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background:
    radial-gradient(120% 80% at 70% 20%, rgba(75, 106, 99, 0.45) 0%, rgba(75, 106, 99, 0) 60%),
    radial-gradient(80% 60% at 20% 90%, rgba(153, 75, 107, 0.14) 0%, rgba(153, 75, 107, 0) 55%),
    linear-gradient(170deg, #202b25 0%, #101714 80%);
  background-color: var(--ink-2);
}

.studio__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Homepage portrait: crop from the top of the frame so Laura keeps her
   headroom — the 4/5 box otherwise center-crops into the visor */
.studio--sand .studio__photo {
  object-position: 50% 0;
}

.studio__text p {
  color: var(--text-muted);
  max-width: 36rem;
  margin-top: 1.5rem;
}

.studio__text .link-arrow {
  margin-top: 2.5rem;
}

/* ------------------------------- Process ------------------------------- */

.process {
  border-top: 1px solid var(--hairline-soft);
  padding: var(--section-pad) 0;
}

.process__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  margin-top: clamp(3rem, 6svh, 5rem);
}

.process__step {
  border-left: 1px solid var(--hairline);
  padding: 0.5rem clamp(1.25rem, 2vw, 2rem) 0.5rem clamp(1.25rem, 2vw, 1.75rem);
  transition: border-color 0.4s ease;
}

.process__step:hover {
  border-left-color: rgba(153, 75, 107, 0.65);
}

.process__grid .process__step:nth-child(2) { --reveal-delay: 0.08s; }
.process__grid .process__step:nth-child(3) { --reveal-delay: 0.16s; }
.process__grid .process__step:nth-child(4) { --reveal-delay: 0.24s; }
.process__grid .process__step:nth-child(5) { --reveal-delay: 0.32s; }

.process__num {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  color: var(--text-faint);
  transition: color 0.35s ease, opacity 0.35s ease;
}

.process__step:hover .process__num {
  color: var(--berry);
}

.process__name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.35rem, 1.9vw, 1.7rem);
  line-height: 1.2;
  margin-top: 2.25rem;
  transition: opacity 0.35s ease;
}

.process__desc {
  font-size: 0.9375rem;
  color: var(--text-muted);
  margin-top: 0.85rem;
  transition: opacity 0.35s ease;
}

/* Highlight the hovered step; siblings recede */
@media (hover: hover) {
  .process__grid:hover .process__step > * {
    opacity: 0.35;
  }

  .process__grid:hover .process__step:hover > * {
    opacity: 1;
  }
}

/* ------------------------------- Programs ------------------------------- */

.programs {
  position: relative; /* anchors .anchor-alias (#ask) to the section top */
  border-top: 1px solid var(--hairline-soft);
  padding: var(--section-pad) 0;
}

/* Invisible anchor: lets a second nav target land at the exact same
   position as the section's own id */
.anchor-alias {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
}

.programs__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 3vw, 3rem);
}

.program {
  border: 1px solid var(--hairline);
  min-height: 24rem;
  position: relative;
  overflow: hidden;
  transition: border-color 0.4s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.program:hover {
  transform: translateY(-0.4rem);
}

/* Second module trails the first as they reveal */
.programs__grid .program:nth-child(2) {
  --reveal-delay: 0.12s;
}

.program--ask {
  border-color: rgba(153, 75, 107, 0.35);
}

.program--learn:hover {
  border-color: rgba(242, 236, 227, 0.4);
}

.program--ask:hover {
  border-color: rgba(153, 75, 107, 0.7);
}

/* Full-bleed background photo */
.program__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: var(--ink-2);
}

/* Fallback while the real photo is missing (see onerror handler in HTML) */
.program__media--ph {
  background-image: radial-gradient(120% 90% at 25% 15%, rgba(75, 106, 99, 0.45) 0%, rgba(75, 106, 99, 0) 60%),
    linear-gradient(160deg, #2a372f 0%, #1d2822 70%);
}

.program__media--ph::before {
  content: "Replace · card photo";
  position: absolute;
  right: 0.9rem;
  bottom: 0.9rem;
  z-index: 2;
  font-family: var(--font-ui);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(242, 236, 227, 0.5);
  border: 1px solid var(--hairline);
  padding: 0.35rem 0.6rem;
  background: rgba(29, 40, 34, 0.55);
}

.program__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1), filter 0.6s ease;
}

.program:hover .program__photo {
  transform: scale(1.045);
}

/* Legibility gradient, tinted per module; deepens on hover so the photo
   recedes slightly and the text/CTA gain contrast */
.program__media::after {
  content: "";
  position: absolute;
  inset: 0;
  transition: background-color 0.5s ease, opacity 0.5s ease;
}

.program--learn .program__media::after {
  background-image: linear-gradient(to top, rgba(29, 40, 34, 0.94) 0%, rgba(29, 40, 34, 0.55) 55%, rgba(29, 40, 34, 0.35) 100%);
}

.program--ask .program__media::after {
  /* Same neutral scrim as the Learn card — the berry tint wasn't dark
     enough over the illustration's light cap/hair for reliable contrast. */
  background-image: linear-gradient(to top, rgba(29, 40, 34, 0.94) 0%, rgba(29, 40, 34, 0.55) 55%, rgba(29, 40, 34, 0.35) 100%);
}

.program:hover .program__media::after {
  opacity: 0.88;
}

/* Content sits above the photo/gradient */
.program__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 100%;
  padding: clamp(2.5rem, 5vw, 4.5rem);
}

.program__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 3.2vw, 2.9rem);
  line-height: 1.1;
  margin-top: 1.5rem;
  text-shadow: 0 1px 20px rgba(13, 19, 17, 0.4);
}

.program__desc {
  color: var(--text-muted);
  margin-top: 1.25rem;
  max-width: 26rem;
}

.program .link-arrow {
  margin-top: auto;
  padding-top: 2.5rem;
}

/* ----------------------------- Testimonial ----------------------------- */

.testimonial {
  border-top: 1px solid var(--hairline-soft);
  padding: calc(var(--section-pad) * 1.1) 0;
}

.testimonial__quote {
  max-width: 52rem;
  margin-inline: auto;
  text-align: center;
}

/* ----------------------------- From YouTube ----------------------------- */

.videos {
  border-top: 1px solid var(--hairline-soft);
  padding: var(--section-pad) 0;
}

/* Equal columns so every thumbnail is exactly the same size and the
   date lines align; hairline dividers sit centered in the gaps. */
.videos__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: clamp(2.5rem, 5vw, 4rem);
  margin-top: clamp(3rem, 6svh, 5rem);
}

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

.video + .video::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(clamp(2.5rem, 5vw, 4rem) / -2);
  width: 1px;
  background: var(--hairline-soft);
}

.videos__grid .video:nth-child(2) { --reveal-delay: 0.1s; }
.videos__grid .video:nth-child(3) { --reveal-delay: 0.2s; }

.video__thumb {
  display: block;
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9.5;
  background: var(--ink-2);
}

.video__art {
  position: absolute;
  inset: 0;
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.video__art--photo {
  object-fit: cover;
  width: 100%;
  height: 100%;
  /* Tame the loud baked-in YouTube thumbnail art so the three cards read
     as one family: consistent crop, softened color, brand-tinted veil */
  filter: saturate(0.72) contrast(0.95);
}

.video__thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(160deg, rgba(29, 40, 34, 0.28), rgba(29, 40, 34, 0.5));
  transition: opacity 0.35s ease;
}

.video:hover .video__thumb::after,
.video:focus-visible .video__thumb::after {
  opacity: 0.55;
}

/* Highlight the hovered video; siblings recede (thumb zoom is above) */
.video > * {
  transition: opacity 0.35s ease;
}

@media (hover: hover) {
  .videos__grid:hover .video > * {
    opacity: 0.4;
  }

  .videos__grid:hover .video:hover > * {
    opacity: 1;
  }
}

.video:hover .video__art,
.video:focus-visible .video__art {
  transform: scale(1.05);
}

.video__play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 3.25rem;
  height: 3.25rem;
  border: 1px solid rgba(242, 236, 227, 0.55);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--sand);
  font-size: 0.7rem;
  background: rgba(29, 40, 34, 0.35);
  backdrop-filter: blur(3px);
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

.video:hover .video__play {
  background: rgba(153, 75, 107, 0.45);
  border-color: var(--sand);
}

.video__meta {
  display: block;
  margin-top: 1.4rem;
  font-family: var(--font-ui);
  font-size: 0.75rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.video__title {
  display: inline-block;
  position: relative;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.35rem, 1.9vw, 1.7rem);
  line-height: 1.25;
  margin-top: 0.85rem;
}

.video__title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.25rem;
  width: 100%;
  height: 1px;
  background: var(--berry);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease;
}

.video:hover .video__title::after,
.video:focus-visible .video__title::after {
  transform: scaleX(1);
}

.video__desc {
  display: block;
  font-size: 0.9375rem;
  color: var(--text-muted);
  margin-top: 0.7rem;
}

/* -------------------------------- Begin -------------------------------- */

.begin {
  border-top: 1px solid var(--hairline-soft);
  padding: calc(var(--section-pad) * 1.15) 0;
}

.begin__layout {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(3rem, 6vw, 8rem);
  align-items: start;
}

.begin__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(3.25rem, 7.5vw, 6.5rem);
  line-height: 1.02;
  margin-top: 1rem;
}

.begin__copy {
  color: var(--text-muted);
  max-width: 30rem;
  margin-top: 1.75rem;
}

.begin .btn {
  margin-top: 2.75rem;
}

.begin__facts {
  border-top: 1px solid var(--hairline);
  margin-top: 0.5rem;
}

.begin__fact {
  display: grid;
  grid-template-columns: minmax(7.5rem, 0.6fr) 1fr;
  gap: 1.5rem;
  padding: 1.6rem 0;
  border-bottom: 1px solid var(--hairline);
}

.begin__fact dt {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--text-faint);
  padding-top: 0.2rem;
}

.begin__fact dd {
  font-size: 0.9375rem;
  color: var(--text-muted);
}

/* -------------------------------- Footer -------------------------------- */

.site-footer {
  border-top: 1px solid var(--hairline-soft);
  padding: 2.5rem 0;
}

.site-footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}

.brand--footer .brand__wordmark {
  font-size: 1.125rem;
}

.brand--footer .brand__mark {
  width: 1.3rem;
}

.site-footer__legal {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* ------------------------------ Responsive ------------------------------ */

@media (max-width: 64rem) {
  .services__layout {
    grid-template-columns: 1fr;
  }

  .services__intro {
    position: static;
  }

  .service {
    grid-template-columns: 3rem 1fr;
    grid-template-areas:
      "num name"
      "num desc";
    row-gap: 0.6rem;
  }

  .service__num { grid-area: num; }
  .service__name { grid-area: name; }
  .service__desc { grid-area: desc; }

  .studio__layout,
  .begin__layout,
  .programs__grid {
    grid-template-columns: 1fr;
  }

  .studio__media {
    max-width: 34rem;
  }

  .process__grid {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 3rem;
  }

  /* Videos stack: hairlines rotate from column dividers to row dividers */
  .videos__grid {
    grid-template-columns: 1fr;
    row-gap: 2.75rem;
  }

  .video + .video::before {
    display: none;
  }

  .video + .video {
    border-top: 1px solid var(--hairline-soft);
    padding-top: 2.75rem;
  }
}

/* The full nav needs ~990px of row to sit on one line; below that,
   switch straight to the hamburger rather than letting links wrap */
@media (max-width: 69rem) {
  .site-nav,
  .site-header__cta {
    display: none;
  }

  .menu-toggle {
    display: inline-flex;
  }
}

@media (max-width: 54rem) {
  .brand__logo {
    height: 1.2rem;
  }

  /* Gallery stacks gracefully — full-width cards, image impact retained */
  .work__grid {
    grid-template-columns: 1fr;
    grid-auto-rows: clamp(16rem, 64vw, 24rem);
  }

  .project--tall-left,
  .project--wide-right,
  .project--wide-left,
  .project--half-right,
  .project--tall-right {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  /* Touch devices have no hover — keep location visible on the cards */
  .project__row--loc {
    grid-template-rows: 1fr;
  }

  .project__location {
    opacity: 1;
    transform: none;
  }

  .section-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
  }

  .hero__scroll {
    display: none;
  }

  .process__grid {
    grid-template-columns: 1fr;
    row-gap: 2.5rem;
  }

  .process__name {
    margin-top: 1rem;
  }

  .site-footer__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
  }
}

/* ---------------------------- Reduced motion ---------------------------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

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

  .hero__scroll-line::after {
    animation: none;
  }

  /* No scroll-scrubbing: hero is a single static viewport showing the
     video's poster frame */
  .hero {
    height: auto;
  }

  .hero__sticky {
    position: relative;
    min-height: 100svh;
    min-height: 100svh;
  }

  .project__art,
  .video__art,
  .service__name,
  .program,
  .link-arrow__glyph {
    transition: none;
  }

  .reveal--title {
    clip-path: none;
    transition: none;
  }

  .hero__content > * {
    animation: none;
    opacity: 1;
  }

  .book__how .book__steps li {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ==========================================================================
   Work / Gallery page
   ========================================================================== */

/* Active nav item */
.site-nav__link.is-active {
  color: var(--sand);
}

.site-nav__link.is-active::after {
  transform: scaleX(1);
}

/* ------------------------------ Page head ------------------------------ */

.page-head {
  padding: calc(var(--header-h) + clamp(4rem, 9svh, 7rem)) 0 clamp(3rem, 6svh, 5rem);
}

.page-head__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(3.5rem, 8vw, 7rem);
  line-height: 1;
  margin-top: 0.75rem;
}

.page-head__intro {
  max-width: 38rem;
  color: var(--text-muted);
  margin-top: clamp(1.5rem, 3svh, 2.25rem);
}

/* Editorial filter row */
.filters {
  display: flex;
  align-items: baseline;
  gap: clamp(0.9rem, 2vw, 1.5rem);
  margin-top: clamp(2.5rem, 5svh, 3.5rem);
  padding-top: 1.75rem;
  border-top: 1px solid var(--hairline-soft);
}

.filter {
  background: none;
  border: none;
  cursor: pointer;
  /* padding keeps the tap target near 44px without changing the look */
  padding: 0.7rem 0 0.4rem;
  position: relative;
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--text-faint);
  transition: color 0.3s ease;
  white-space: nowrap;
}

.filter::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--berry);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}

.filter:hover {
  color: var(--text-muted);
}

.filter.is-selected {
  color: var(--sand);
}

.filter.is-selected::after {
  transform: scaleX(1);
}

.filters__dot {
  color: var(--text-faint);
}

/* ------------------------------- Gallery ------------------------------- */

.gallery {
  padding: clamp(2rem, 5svh, 4rem) 0 var(--section-pad);
}

/* Justified rows of homepage-style cards: every row's spans sum to 12
   (js/work.js), so the outer edges stay perfectly flush */
.gallery__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(0.625rem, 1.2vw, 1rem);
  grid-auto-rows: clamp(13rem, 26vw, 22rem);
}

.gallery__grid .project {
  grid-column: span var(--gspan, 6);
}

/* --------------------------- Work-page close --------------------------- */

.begin--work .begin__layout {
  grid-template-columns: 1fr;
}

.begin__note {
  font-size: 0.875rem;
  color: var(--text-faint);
  max-width: 34rem;
  margin-top: 1.75rem;
}

/* ------------------------- Work page responsive ------------------------- */

@media (max-width: 54rem) {
  .filters {
    overflow-x: auto;
    padding-bottom: 0.5rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

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

  .gallery__grid {
    grid-template-columns: 1fr;
    grid-auto-rows: clamp(16rem, 64vw, 24rem);
  }

  .gallery__grid .project {
    grid-column: auto;
  }
}

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

/* ==========================================================================
   Individual project gallery page
   ========================================================================== */

/* Project nav row reuses the .filters/.filter treatment; links can wrap */
.pnav {
  flex-wrap: wrap;
  row-gap: 0.9rem;
}

/* ------------------------- Photo grid (no text) -------------------------
   Masonry via CSS columns: photos keep their natural proportions with
   even padding between every photo. */

.pgallery {
  padding: clamp(2rem, 5svh, 4rem) 0 var(--section-pad);
}

/* Justified rows (built in js/project.js): each row spans the full frame
   width with a fixed height, so the gallery reads as one perfect
   rectangle with clean outer edges, while the 12-col spans and two row
   heights vary the individual crops. */
.prow {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(0.75rem, 1.4vw, 1.25rem);
  margin-bottom: clamp(0.75rem, 1.4vw, 1.25rem);
}

.prow:last-child {
  margin-bottom: 0;
}

.prow--std { height: clamp(15rem, 27vw, 25rem); }
.prow--short { height: clamp(11rem, 20vw, 18rem); }

.sp-4 { grid-column: span 4; }
.sp-5 { grid-column: span 5; }
.sp-6 { grid-column: span 6; }
.sp-7 { grid-column: span 7; }
.sp-8 { grid-column: span 8; }
.sp-12 { grid-column: span 12; }

.pgrid__item {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: none;
  background: var(--ink-2);
  cursor: zoom-in;
  overflow: hidden;
}

.pgrid__item--ph {
  cursor: default;
}

.pgrid__item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s ease;
}

.pgrid__item .ph-watermark {
  width: 55%;
  height: auto;
  object-fit: contain;
}

/* Hover: slight zoom on the hovered photo, siblings recede */
@media (hover: hover) {
  .pgrid:hover .pgrid__item img {
    opacity: 0.45;
  }

  .pgrid:hover .pgrid__item:hover img {
    opacity: 1;
    transform: scale(1.03);
  }
}

/* ------------------------------- Lightbox ------------------------------- */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(29, 40, 34, 0.95);
  backdrop-filter: blur(8px);
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 4rem);
}

/* Same [hidden] rule as .mobile-menu — never display an overlay while hidden */
.lightbox:not([hidden]) {
  display: flex;
}

/* Subtle fade on open/close (driven by .is-open from js/project.js) */
.lightbox {
  opacity: 0;
  transition: opacity 0.4s ease;
}

.lightbox.is-open {
  opacity: 1;
}

.lightbox__img {
  max-width: 100%;
  max-height: 88svh;
  object-fit: contain;
  box-shadow: 0 0 80px rgba(0, 0, 0, 0.55);
  opacity: 0;
  transition: opacity 0.35s ease;
}

.lightbox__img.is-loaded {
  opacity: 1;
}

.lightbox__close {
  position: absolute;
  top: clamp(0.75rem, 2vw, 1.75rem);
  right: clamp(1rem, 2.5vw, 2.25rem);
  background: none;
  border: none;
  color: var(--sand);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 2.25rem;
  line-height: 1;
  cursor: pointer;
  /* 44px minimum touch target */
  min-width: 2.75rem;
  min-height: 2.75rem;
  display: grid;
  place-items: center;
  padding: 0.25rem 0.5rem;
  transition: color 0.3s ease;
}

.lightbox__close:hover {
  color: var(--berry);
}

.lightbox__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  /* The stage (a later sibling) otherwise paints over the prev arrow
     when a wide photo extends underneath it */
  z-index: 2;
  background: none;
  border: 1px solid var(--hairline);
  color: var(--sand);
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 1.1rem;
  cursor: pointer;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.lightbox__arrow:hover {
  background: rgba(153, 75, 107, 0.35);
  border-color: var(--sand);
}

.lightbox__arrow--prev { left: clamp(0.75rem, 2.5vw, 2.25rem); }
.lightbox__arrow--next { right: clamp(0.75rem, 2.5vw, 2.25rem); }

/* The stage shrink-wraps the photo so the caption (and its legibility
   gradient) pin to the image's own bottom-left corner */
.lightbox__stage {
  position: relative;
  display: flex;
  margin: 0;
}

.lightbox__stage.has-caption::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: clamp(6rem, 20svh, 11rem);
  background: linear-gradient(to top, rgba(15, 20, 17, 0.82), rgba(15, 20, 17, 0));
  pointer-events: none;
}

/* Caption: left-justified, narrow measure, bottom-left of the photo */
.lightbox__caption {
  position: absolute;
  z-index: 1;
  left: clamp(1rem, 2.2vw, 1.75rem);
  right: clamp(1rem, 2.2vw, 1.75rem);
  bottom: clamp(0.9rem, 2vw, 1.5rem);
  max-width: min(75%, 24rem);
  text-align: left;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  line-height: 1.5;
  color: var(--sand);
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.85);
}

.lightbox__count {
  position: absolute;
  z-index: 1;
  bottom: clamp(0.75rem, 2.5vw, 1.75rem);
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-ui);
  font-size: 0.75rem;
  letter-spacing: 0.25em;
  color: var(--text-faint);
}

/* --------------------------- Project testimonial --------------------------- */

.ptestimonial {
  border-top: 1px solid var(--hairline-soft);
  padding: var(--section-pad) 0;
}

.ptestimonial__inner {
  max-width: 50rem;
}

.ptestimonial__quote {
  margin-top: 2.5rem;
}

/* Hover treatment matches the homepage testimonial: the quote brightens
   and the berry rule stretches */
.ptestimonial__quote p {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.25rem, 2vw, 1.55rem);
  line-height: 1.6;
  color: rgba(242, 236, 227, 0.82);
  transition: color 0.5s ease;
}

.ptestimonial__quote p + p {
  margin-top: 1.5rem;
}

.ptestimonial__quote footer {
  margin-top: 2.5rem;
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.ptestimonial__quote:hover p {
  color: var(--sand);
}

.ptestimonial__quote:hover .philosophy__rule {
  width: 5rem;
}

.ptestimonial__cite {
  font-family: var(--font-ui);
  font-style: normal;
  font-size: 0.75rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* ---------------------- Project page responsive ---------------------- */

@media (max-width: 64rem) {
  .prow--std { height: clamp(12rem, 26vw, 18rem); }
  .prow--short { height: clamp(9rem, 19vw, 14rem); }
}

@media (max-width: 40rem) {
  /* Stack: one full-width photo per line, uniform height */
  .prow {
    grid-template-columns: 1fr;
    height: auto;
  }

  .sp-4, .sp-5, .sp-6, .sp-7, .sp-8, .sp-12 {
    grid-column: auto;
  }

  .prow .pgrid__item {
    height: clamp(14rem, 62vw, 20rem);
  }

  .lightbox__arrow--prev { left: 0.5rem; }
  .lightbox__arrow--next { right: 0.5rem; }
}

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

/* ==========================================================================
   Project dropdown (individual gallery pages)
   ========================================================================== */

.pselect {
  position: relative;
  display: inline-block;
  margin-top: clamp(2.5rem, 5svh, 3.5rem);
}

.pselect__summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  cursor: pointer;
  border: 1px solid var(--hairline);
  padding: 0.85rem 1.4rem;
  font-family: var(--font-ui);
  font-size: 0.75rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  transition: border-color 0.3s ease;
}

.pselect__summary::-webkit-details-marker {
  display: none;
}

.pselect__summary:hover {
  border-color: rgba(242, 236, 227, 0.35);
}

.pselect__label {
  color: var(--text-faint);
}

.pselect__current {
  color: var(--sand);
}

.pselect__chev {
  color: var(--text-faint);
  font-size: 0.8rem;
  transition: transform 0.3s ease;
}

.pselect[open] .pselect__chev {
  transform: rotate(180deg);
}

.pselect__list {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  z-index: 30;
  min-width: 100%;
  background: var(--ink-2);
  border: 1px solid var(--hairline);
  padding: 0.5rem 0;
}

.pselect__link {
  display: block;
  padding: 0.6rem 1.4rem;
  font-family: var(--font-ui);
  font-size: 0.75rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
  transition: color 0.25s ease, background-color 0.25s ease;
}

.pselect__link:hover {
  color: var(--sand);
  background: rgba(242, 236, 227, 0.04);
}

.pselect__link.is-selected {
  color: var(--berry);
}

/* ==========================================================================
   Book a Consultation page
   ========================================================================== */

.book {
  padding: clamp(2rem, 5svh, 4rem) 0 var(--section-pad);
}

.book__form {
  max-width: 46rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(1.5rem, 3vw, 2.5rem);
  row-gap: 2.25rem;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.field--full {
  grid-column: 1 / -1;
}

.field__label {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.field__label em {
  color: var(--berry);
  font-style: normal;
}

.field__input {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--hairline);
  padding: 0.6rem 0;
  color: var(--sand);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1rem;
  border-radius: 0;
  transition: border-color 0.3s ease;
}

.field__input::placeholder {
  color: rgba(242, 236, 227, 0.55);
}

.field__input:hover {
  border-bottom-color: rgba(242, 236, 227, 0.3);
}

.field__input:focus {
  outline: none;
  border-bottom-color: var(--berry);
}

select.field__input {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23F2ECE3' stroke-opacity='0.5' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.25rem center;
  cursor: pointer;
}

select.field__input option {
  background: var(--ink-2);
  color: var(--sand);
}

textarea.field__input {
  resize: vertical;
  min-height: 7.5rem;
  line-height: 1.7;
}

.book__actions {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}

.book__hint {
  font-size: 0.8125rem;
  color: var(--text-faint);
  max-width: 24rem;
}

.field__error {
  font-size: 0.8125rem;
  color: #d98aa8;
  display: none;
}

.field.is-invalid .field__error {
  display: block;
}

.field.is-invalid .field__input {
  border-bottom-color: #d98aa8;
}

/* Success + notice panels */
.book__panel {
  max-width: 46rem;
  border: 1px solid var(--hairline);
  padding: clamp(2rem, 4vw, 3.5rem);
}

.book__panel-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
}

.book__panel p {
  color: var(--text-muted);
  margin-top: 1rem;
}

.book__notice {
  grid-column: 1 / -1;
  font-size: 0.8125rem;
  color: #d9b98a;
  border: 1px solid rgba(217, 185, 138, 0.35);
  padding: 0.9rem 1.2rem;
  display: none;
}

.book__notice.is-visible {
  display: block;
}

@media (max-width: 44rem) {
  .book__form {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Launch build: static mobile hero, forms, newsletter, Learn/Ask/About,
   project hero, consultation explainer
   ========================================================================== */

/* ------------------- Static hero (mobile / reduced motion) -------------- */

.hero--static {
  height: 100svh;
}

.hero--static .hero__sticky {
  position: relative;
  /* Fill the viewport, but grow when the copy needs more room (short or
     very narrow screens) so the hero text never collides with the header */
  height: auto;
  min-height: 100svh;
}

/* The static poster is a real <picture> so mobile gets an art-directed
   crop (entry arch centered) instead of a shifted background image */
.hero__poster {
  display: none;
}

.hero--static .hero__poster {
  display: block;
  position: absolute;
  inset: 0;
}

.hero__poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Short viewports: keep the eyebrow clear of the fixed header.
   Desktop pointing devices ONLY: on phones the URL bar collapsing during
   scroll changes the viewport height, and a bare max-height query flips
   on/off mid-scroll — the hero type (and with it the cover-fit photo)
   visibly snaps between sizes. Phones never match hover+fine, so their
   hero stays at one size for the whole scroll. */
@media (max-height: 800px) and (hover: hover) and (pointer: fine) {
  .hero__title {
    font-size: clamp(2.3rem, 6.5vw, 5.25rem);
  }

  .hero__eyebrow {
    margin-bottom: 1rem;
  }
}

/* ------------------------------ Shared forms ----------------------------- */

.signup {
  display: flex;
  align-items: flex-end;
  gap: clamp(1.25rem, 2.5vw, 2rem);
  flex-wrap: wrap;
}

.signup .field {
  flex: 1 1 16rem;
  max-width: 26rem;
}

.signup--wide {
  margin-top: 2.25rem;
}

.form-thanks {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  color: var(--sand);
}


.form-error {
  font-size: 0.875rem;
  color: #d98aa8;
  margin-top: 1rem;
  flex-basis: 100%;
}

/* ------------------------------ Newsletter ------------------------------ */

.newsletter {
  border-top: 1px solid var(--hairline-soft);
  padding: var(--section-pad) 0;
}

.newsletter__inner {
  display: block;
}

/* Signup sits underneath the copy, email line with the button beside it */
.newsletter__signup {
  margin-top: clamp(2rem, 4svh, 3rem);
}

.newsletter__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.25rem, 4vw, 3.5rem);
  line-height: 1.08;
  margin-top: 0.75rem;
}

.newsletter__copy {
  color: var(--text-muted);
  margin-top: 1.25rem;
  max-width: 30rem;
}

/* -------------------- Consultation page: how it works -------------------- */

/* Two-column consultation layout: form leads, context rides alongside */
.book__layout {
  display: grid;
  grid-template-columns: 1.45fr 1fr;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: start;
}

/* The form as a deliberate destination: a slightly lighter sage panel
   with a sand tint, not more dark-page content */
.book__form--panel {
  max-width: none;
  background: linear-gradient(rgba(242, 236, 227, 0.04), rgba(242, 236, 227, 0.04)), var(--ink-2);
  border: 1px solid var(--hairline-soft);
  padding: clamp(1.75rem, 3.5vw, 3rem);
}

.book__side .book__how-title {
  margin-top: 0.5rem;
}

@media (max-width: 64rem) {
  .book__layout {
    grid-template-columns: 1fr;
  }
}

.book__how {
  max-width: 46rem;
}

.book__facts {
  margin-top: clamp(2rem, 4svh, 3rem);
}

.book__quote {
  margin-top: clamp(2rem, 4svh, 3rem);
}

.book__how-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
}

.book__steps {
  counter-reset: step;
  margin-top: 1.75rem;
  border-top: 1px solid var(--hairline);
}

/* The four steps cascade up as the section reveals */
.book__how .book__steps li {
  opacity: 0;
  transform: translateY(0.8rem);
  transition:
    opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    color 0.35s ease,
    border-bottom-color 0.35s ease;
}

.book__how.in-view .book__steps li {
  opacity: 1;
  transform: none;
}

/* Delay only the entrance (opacity, transform) — hover colors stay instant */
.book__how.in-view .book__steps li:nth-child(2) { transition-delay: 0.12s, 0.12s, 0s, 0s; }
.book__how.in-view .book__steps li:nth-child(3) { transition-delay: 0.24s, 0.24s, 0s, 0s; }
.book__how.in-view .book__steps li:nth-child(4) { transition-delay: 0.36s, 0.36s, 0s, 0s; }

.book__steps li {
  counter-increment: step;
  position: relative;
  padding: 1.1rem 0 1.1rem 3rem;
  border-bottom: 1px solid var(--hairline);
  color: var(--text-muted);
  transition: color 0.35s ease, border-bottom-color 0.35s ease;
}

.book__steps li:hover {
  color: var(--text);
  border-bottom-color: rgba(153, 75, 107, 0.55);
}

.book__steps li::before {
  content: "0" counter(step);
  position: absolute;
  left: 0;
  top: 1.25rem;
  font-family: var(--font-ui);
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  color: var(--text-faint);
  transition: color 0.35s ease;
}

.book__steps li:hover::before {
  color: var(--berry);
}

.book__steps strong {
  color: var(--sand);
  font-weight: 500;
}

.book__who {
  margin-top: 1.75rem;
  font-size: 0.9375rem;
  color: var(--text-muted);
}

.book__who a {
  color: var(--sand);
  border-bottom: 1px solid var(--berry);
}

/* -------------------------- Project / page hero -------------------------- */

.phero {
  padding-bottom: clamp(2rem, 5svh, 4rem);
}

.phero__btn {
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  background: var(--ink-2);
  cursor: zoom-in;
  overflow: hidden;
}

.phero__img {
  display: block;
  width: 100%;
  height: clamp(20rem, 64svh, 44rem);
  object-fit: cover;
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.phero__btn:hover .phero__img {
  transform: scale(1.015);
}

/* Press mockups and other art shown at intrinsic proportions */
.phero__img--natural {
  height: auto;
  object-fit: contain;
}

/* Learn page course photo: same quiet zoom as the project heroes */
.phero__frame {
  overflow: hidden;
  background: var(--ink-2);
}

.phero__frame .phero__img:hover {
  transform: scale(1.015);
}

/* ------------------------------ Learn page ------------------------------ */

.learn-facts {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-top: clamp(1.75rem, 3.5svh, 2.5rem);
}

.learn-what,
.learn-need {
  border-top: 1px solid var(--hairline-soft);
  padding: var(--section-pad) 0;
}

.learn-what__grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}

.learn-what__text p {
  color: var(--text-muted);
  max-width: 38rem;
}

.learn-what__text p + p {
  margin-top: 1.5rem;
}

.learn-what__text p + .link-arrow {
  margin-top: 1.75rem;
}

.learn-quote {
  margin-top: 2.25rem;
  border-left: 1px solid var(--berry);
  padding-left: 1.5rem;
}

.learn-quote p {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.3rem, 2.2vw, 1.65rem);
  line-height: 1.45;
  color: var(--sand);
}

.learn-quote cite {
  display: block;
  margin-top: 0.9rem;
  font-family: var(--font-ui);
  font-style: normal;
  font-size: 0.75rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.curriculum {
  border-top: 1px solid var(--hairline-soft);
  padding: var(--section-pad) 0;
}

.curriculum__part {
  display: grid;
  grid-template-columns: minmax(14rem, 1fr) 2.2fr;
  gap: clamp(1.5rem, 4vw, 4rem);
  border-top: 1px solid var(--hairline);
  padding: clamp(1.75rem, 3.5svh, 2.5rem) 0;
  transition: border-top-color 0.45s ease;
}

.curriculum__part:hover {
  border-top-color: rgba(242, 236, 227, 0.32);
}

.curriculum__part:first-of-type {
  margin-top: clamp(3rem, 6svh, 5rem);
}

.curriculum__part-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 2.3vw, 1.9rem);
  line-height: 1.2;
}

.curriculum__part-title span {
  display: block;
  font-family: var(--font-ui);
  font-style: normal;
  font-size: 0.75rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--berry);
  margin-bottom: 0.6rem;
}

.curriculum__lessons {
  list-style: decimal-leading-zero;
  padding-left: 2.25rem;
}

.curriculum__lessons li {
  color: var(--text-muted);
  padding: 0.55rem 0;
  transition: color 0.35s ease;
}

.curriculum__lessons li:hover {
  color: var(--text);
}

.curriculum__lessons li:hover::marker {
  color: var(--berry);
}

.curriculum__lessons li::marker {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--text-faint);
}

.curriculum__lessons strong {
  color: var(--sand);
  font-weight: 500;
}

/* ------------------------------- Ask page ------------------------------- */

/* The app promo is a transparent PNG — no panel behind it, the phones
   float straight on the page ground. overflow stays visible so the
   hover zoom can breathe past the column edge. */
.ask__media {
  overflow: visible;
}

.ask__img {
  display: block;
  width: 100%;
  /* keep intrinsic proportions — the width/height attributes are for
     layout reservation only */
  height: auto;
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.ask__media:hover .ask__img {
  transform: scale(1.03);
}

@media (prefers-reduced-motion: reduce) {
  .ask__img {
    transition: none;
  }
  .ask__media:hover .ask__img {
    transform: none;
  }
}

/* Ask hero: copy + beta form left, phones right, product on screen one */
.ask-hero__grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
}

.ask-hero .signup {
  margin-top: 2rem;
}

.ask-hero__note {
  margin-top: 1rem;
  font-size: 0.875rem;
  color: var(--text-faint);
}

.ask-hero__media {
  max-width: 26rem;
  justify-self: center;
}

@media (max-width: 64rem) {
  .ask-hero__grid {
    grid-template-columns: 1fr;
  }

  .ask-hero__media {
    max-width: 20rem;
  }
}


/* ------------------------- Legal pages (prose) -------------------------- */

.legal {
  border-top: 1px solid var(--hairline-soft);
  padding: var(--section-pad) 0;
}

.legal__body {
  max-width: 44rem;
}

.legal__note {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #d9b98a;
  border: 1px solid rgba(217, 185, 138, 0.35);
  padding: 0.9rem 1.2rem;
  margin-bottom: clamp(2.5rem, 5svh, 4rem);
}

.legal__body h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.4rem, 2.2vw, 1.8rem);
  margin-top: clamp(2.25rem, 4.5svh, 3.25rem);
}

.legal__body p,
.legal__body li {
  color: var(--text-muted);
  margin-top: 1rem;
}

.legal__body ul {
  padding-left: 1.4rem;
}

.legal__body a {
  color: var(--sand);
  border-bottom: 1px solid var(--berry);
}

.legal__body strong {
  color: var(--sand);
  font-weight: 500;
}

/* ------------------------------ Press list ------------------------------ */

.press {
  border-top: 1px solid var(--hairline-soft);
  padding: var(--section-pad) 0;
}

.press__list {
  margin-top: clamp(3rem, 6svh, 5rem);
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(2.5rem, 5vw, 5rem);
}

.press__item {
  border-top: 1px solid var(--hairline);
  padding: 1.6rem 0;
}

.press__outlet {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.35rem, 2vw, 1.6rem);
}

/* Outlets link out to the coverage itself */
.press__link {
  color: inherit;
  text-decoration: none;
  transition: color 0.3s ease;
}

.press__link:hover,
.press__link:focus-visible {
  color: var(--sand);
}

.press__glyph {
  font-size: 0.7em;
  color: var(--text-faint);
  transition: color 0.3s ease, transform 0.3s ease;
  display: inline-block;
}

.press__link:hover .press__glyph,
.press__link:focus-visible .press__glyph {
  color: var(--berry);
  transform: translate(0.15rem, -0.15rem);
}

.press__desc {
  font-size: 0.9375rem;
  color: var(--text-muted);
  margin-top: 0.5rem;
  max-width: 32rem;
}

/* --------------------------- Press feature ----------------------------
   The Better Homes & Gardens spread as an editorial moment: a full-bleed
   sand band inside the Recognition section, magazine composite on the
   left, feature copy and pull quote on the right.                        */

.pressfeat {
  background: var(--sand);
  margin-top: clamp(3rem, 6svh, 5rem);
  padding: clamp(3rem, 7svh, 5.5rem) 0;
}

.pressfeat__grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(2.5rem, 5vw, 5.5rem);
  align-items: center;
}

.pressfeat__img {
  display: block;
  width: 100%;
  height: auto;
  box-shadow: 0 18px 40px rgba(29, 40, 34, 0.18);
}

.pressfeat__text .eyebrow {
  color: rgba(29, 40, 34, 0.55);
}

.pressfeat__lede {
  color: rgba(29, 40, 34, 0.82);
  font-size: 1.125rem;
  max-width: 30rem;
  margin-top: 1.25rem;
}

.pressfeat__quote {
  margin-top: 1.75rem;
  border-left: 2px solid var(--berry);
  padding-left: 1.25rem;
}

.pressfeat__quote p {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.3rem, 1.8vw, 1.55rem);
  line-height: 1.35;
  color: var(--ink);
}

.pressfeat__quote cite {
  display: block;
  margin-top: 0.5rem;
  font-family: var(--font-ui);
  font-style: normal;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(29, 40, 34, 0.55);
}

.pressfeat__text .link-arrow {
  margin-top: 2rem;
  color: var(--ink);
}

.pressfeat__text .link-arrow::after {
  background: var(--berry);
}

/* Slideshow inside the press feature: the magazine composite plus the
   spread pages, crossfading. Auto-advances (paused on hover/focus, and
   never under prefers-reduced-motion); the dots always work. */
.pslides {
  position: relative;
  aspect-ratio: 4 / 3;
}

.pslides__slide {
  position: absolute;
  inset: 0;
  display: grid;
  align-items: center;
  opacity: 0;
  transition: opacity 0.8s ease;
  pointer-events: none;
}

.pslides__slide.is-active {
  opacity: 1;
  pointer-events: auto;
}

.pslides .pressfeat__img {
  max-height: 100%;
  object-fit: contain;
}

.pslides__arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  transform: translateY(-50%);
  background: none;
  border: 1px solid var(--hairline);
  color: var(--sand);
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 1.1rem;
  cursor: pointer;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.pslides__arrow:hover {
  background: rgba(153, 75, 107, 0.35);
  border-color: var(--sand);
}

.pslides__arrow--prev {
  left: clamp(0.5rem, 2vw, 1.25rem);
}

.pslides__arrow--next {
  right: clamp(0.5rem, 2vw, 1.25rem);
}

.pslides__nav {
  position: absolute;
  left: 50%;
  bottom: -2rem;
  transform: translateX(-50%);
  display: flex;
  gap: 0.65rem;
}

.pslides__dot {
  width: 0.55rem;
  height: 0.55rem;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(29, 40, 34, 0.45);
  background: transparent;
  cursor: pointer;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.pslides__dot.is-active {
  background: var(--berry);
  border-color: var(--berry);
}

/* Dark-ground variant (press page): light dots, room reserved for the nav */
.pslides--dark {
  margin-bottom: 3rem;
}

.pslides--dark .pslides__dot {
  border-color: rgba(242, 236, 227, 0.5);
}

.pslides--dark .pslides__dot.is-active {
  background: var(--berry);
  border-color: var(--berry);
}

/* Compact remainder of the press list under the feature */
.press__list--compact {
  grid-template-columns: repeat(3, 1fr);
  column-gap: clamp(2rem, 4vw, 4rem);
}

.press__list--compact .press__outlet {
  font-size: clamp(1.15rem, 1.5vw, 1.3rem);
}

@media (max-width: 64rem) {
  .pressfeat__grid,
  .press__list--compact {
    grid-template-columns: 1fr;
  }
}

/* -------------------------------- Team --------------------------------
   About page: the crew behind the installs, under Recognition.          */

.team {
  border-top: 1px solid var(--hairline-soft);
  padding: var(--section-pad) 0;
}

.team__blurb {
  color: var(--text-muted);
  max-width: 38rem;
  margin-top: 1.5rem;
}

.team__grid {
  list-style: none;
  padding: 0;
  margin-top: clamp(3rem, 6svh, 5rem);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2.5vw, 2rem);
}

.team__photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

@media (max-width: 64rem) {
  .team__grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
}

/* --------------------------- Before / After ---------------------------
   Drag-to-compare reveal (learn page). The "after" photo sits underneath;
   the "before" layer above is clipped at --ba-pos (0–100%). Driven by
   initBeforeAfter() in main.js: pointer drag anywhere on the frame, or
   arrow keys on the handle.                                              */

.page-head__cta {
  margin-top: 1.75rem;
}

/* As the learn-page hero the frame needs no extra top rhythm */
.phero .ba {
  margin-top: 0;
}

.ba {
  --ba-pos: 50%;
  position: relative;
  margin-top: clamp(2.5rem, 6svh, 4.5rem);
  overflow: hidden;
  touch-action: pan-y; /* vertical page scroll stays native; horizontal drags are ours */
  user-select: none;
  -webkit-user-select: none;
  cursor: ew-resize;
}

.ba__img {
  display: block;
  width: 100%;
  height: auto;
}

.ba__top {
  position: absolute;
  inset: 0;
  clip-path: inset(0 calc(100% - var(--ba-pos)) 0 0);
}

.ba__divider {
  position: absolute;
  inset-block: 0;
  left: var(--ba-pos);
  width: 1px;
  margin-left: -0.5px;
  background: rgba(242, 236, 227, 0.85);
  box-shadow: 0 0 12px rgba(29, 40, 34, 0.5);
}

.ba__handle {
  position: absolute;
  top: 50%;
  left: var(--ba-pos);
  transform: translate(-50%, -50%);
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  border: 1px solid rgba(242, 236, 227, 0.85);
  background: rgba(29, 40, 34, 0.65);
  backdrop-filter: blur(6px);
  color: var(--sand);
  font-family: var(--font-body);
  font-size: 1rem;
  letter-spacing: 0.1em;
  display: grid;
  place-items: center;
  cursor: ew-resize;
  transition: border-color 0.3s ease, background-color 0.3s ease;
}

.ba__handle:hover,
.ba__handle:focus-visible {
  border-color: var(--berry);
  background: rgba(29, 40, 34, 0.85);
}

.ba__label {
  position: absolute;
  top: 1rem;
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sand);
  background: rgba(29, 40, 34, 0.55);
  backdrop-filter: blur(4px);
  padding: 0.35rem 0.7rem;
  pointer-events: none;
}

.ba__label--before {
  left: 1rem;
}

.ba__label--after {
  right: 1rem;
}

.ba__hint {
  margin-top: 0.9rem;
  font-size: 0.875rem;
  color: var(--text-faint);
}

/* ------------------------------ Responsive ------------------------------ */

@media (max-width: 64rem) {
  .newsletter__inner,
  .learn-what__grid,
  .ask__grid,
  .press__list {
    grid-template-columns: 1fr;
  }

  .curriculum__part {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
}

/* ------------------------------ Case study ------------------------------ */

.cstudy {
  border-top: 1px solid var(--hairline-soft);
  padding: var(--section-pad) 0;
}

.cstudy__grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}

.cstudy__lede {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.35rem, 2.2vw, 1.7rem);
  line-height: 1.5;
  margin-top: 1.25rem;
}

.cstudy__body {
  color: var(--text-muted);
  margin-top: 1.25rem;
  max-width: 34rem;
}

.cstudy__decisions {
  margin-top: clamp(3.5rem, 7svh, 5.5rem);
}

.cstudy__list {
  margin-top: 1.75rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(2.5rem, 5vw, 5rem);
}

/* Hover treatment mirrors the homepage Services rows: the hairline warms
   to berry, the number lights up, and the title eases right */
.cstudy__item {
  border-top: 1px solid var(--hairline);
  padding: 1.6rem 0;
  transition: border-top-color 0.35s ease;
}

.cstudy__item:hover {
  border-top-color: rgba(153, 75, 107, 0.55);
}

.cstudy__num {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  color: var(--text-faint);
  transition: color 0.35s ease;
}

.cstudy__item:hover .cstudy__num {
  color: var(--berry);
}

.cstudy__name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.3rem, 1.9vw, 1.6rem);
  margin-top: 0.5rem;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.cstudy__item:hover .cstudy__name {
  transform: translateX(0.5rem);
}

.cstudy__desc {
  font-size: 0.9375rem;
  color: var(--text-muted);
  margin-top: 0.5rem;
  max-width: 32rem;
}

@media (max-width: 64rem) {
  .cstudy__grid,
  .cstudy__list {
    grid-template-columns: 1fr;
  }
}